/***** HEADER STYLES *****/

.m-header-top-bar {	
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 2;
	text-align: center;
	display: block;
	background-color: #eeeeee;
	box-shadow: 0px 2px 2px #cccccc;
	border: solid 0px #ff0000; 
}

.m-header-email {
	position: absolute;
	left: 260px;
	width: 50px;
	height: 50px;
	z-index: 9999;
	display: inline-block;
	background-image: url('../images/email-icon.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42px;
	border: solid 0px #ff0000; 
}

.m-header-email-red-circle {
	position: absolute;
	left: 290px;
	padding-left: 4px;
	padding-right: 4px;
	top: 4px;
	vertical-align: middle;
	color: #ffffff;
	z-index: 9999;
	border-radius: 3px;
	display: inline-block;
	background-color: red;
	border: solid 1px #ff0000; 
}

.m-header-user-menu {
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 4;
	width: 260px;
	height: 80px;
	display: inline-block;
	background-color: #ffffff;
	border: solid 0px #ff0000; 
}

.m-header-user-image {
	position: relative;
	right: 2px;
	top: 15px;
	vertical-align: middle;
	width: 50px;
	height: 50px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px;
	border: solid 0px #ff0000; 
}

.m-header-user-name {
	position: relative;
	top: 16px;
	left: 5px;
	right: 0px;
	font-size: 1.2em;
	color: #124456;
	font-weight: 300;
	text-align: left;
	vertical-align: middle;
	width: 150px;
	height: 20px;
	display: inline-block;
	border: solid 0px #ff0000; 
}

.m-header-user-arrow {
	position: relative;
	vertical-align: middle;
	top: 14px;
	right: 0px;
	width: 30px;
	height: 20px;
	display: inline-block;
	background-image: url('../images/down-arrow-icon.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	border: solid 0px #ff0000; 
}

.m-header-user-menu-sub {
	position: fixed;
	top: -95px;
	right: 0px;
	text-align: left;
	padding: 0px;
	z-index: 4;
	width: 260px;
	display: block;
	border-radius: 0;
	background-color: #ffffff;
	box-shadow: 0px 2px 2px #cccccc;
	border: solid 0px #ff0000; 
}

.m-header-user-menu-sub-sub {
	position: relative;
	text-align: left;
	padding: 14px;
	width: 260px;
	margin-bottom: 1px;
	background-color: #eeeeee;
	border: solid 0px #ff0000; 
}

.incorrect-results {
	display: none;
}

.m-notify-desc {
	padding: 5px 10px 0px 10px;
	font-size: .9em;
}

.close-answer-btn,.all-answers-table,.one-answer-table,.stop-edit-btn,.close-new-question-btn,.m-header-top-bar-admin {
	display: none;
}


/***** BOXES ******/

.m-box,.m-box-w-nav {
	position: relative;
	z-index: 0;
	display: block;
	min-width: 900px;
	max-width: 50%;
	margin-bottom: 100px;
	padding-bottom: 30px;
	top: 100px;
	left: 280px;
	text-align: left;
	border: solid 0px #ff0000;
}

.m-box-w-nav {
	top: 50px;
}

.m-box-account {
	display: inline-block;
	min-width: 60%;
	max-width: 60%;
	text-align: left;
	padding: 10px 10px 20px 14px;
	border-radius: 4px;
	margin: 0px 0px 20px 0px;
	border: solid 1px #dddddd;  	
}

.m-box-course {
	display:inline-block;
	min-width: 270px;
	max-width: 270px;
	min-height: 442px;
	max-height: 100%;
	background-color:#f3f3f3;
	padding: 20px;
	vertical-align:top;
	margin-right: 18px;	
	border: solid 1px #dddddd;
}

.m-box-center {
	position: absolute;
	top: 70px;
	width: 81%;
	left: 270px;
	z-index: 0;
	text-align: center;
	height: 100%;
	margin: 0 auto;
	margin-bottom: 0px;
	vertical-align: top;
	border: solid 0px #ffdd00;  
}

.m-box-clock {
	position: absolute;
	top: 28px;
	left: 22px;
	height: 20px;
	width: 20px;
	text-align: center;
	border: solid 0px #000000; 
}

.m-box-comment {
	 position: relative;
	 z-index: 0;
	 min-width: 840px;
	 max-width: 100%;
	 padding: 5px;
	 background: rgb(238,238,238);
	 background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 50%, rgba(238,238,238,1) 100%);
	 border: 0px solid #dddddd;
}

.m-box-ed {
	position: relative;
	vertical-align: top;
	display: inline-block;
	margin: 0 auto;
	min-width: 400px;
	max-width: 650px;
	left: 0px;
	background-color: #ffffff;
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-radius: 4px;
	border: 1px solid #dddddd;
}

.m-box-expire {
	position: absolute;
	right: 280px;
	top: 12px;
	height: 47px;
	width: 51px;
	border: solid 0px #ff0000; 
}

.m-box-form {
	position: absolute;
	display:inline-block;
	top: 140px;
	height:250px;
	min-width:425px;
	max-width:50%;
	border: 0px solid #000;
}

.m-box-full {
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
	text-align: center;
	border: solid 0px #dddddd;  	
}

.m-box-grey {
	 position: relative;
	 z-index: 0;
	 top: 20px;
	 min-width: 840px;
	 max-width: 100%;
	 padding: 5px;
	 margin-bottom: 30px;	
	 border-radius: 0px;
	 background: rgb(238,238,238);
	 background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 50%, rgba(238,238,238,1) 100%);
	 border: 0px solid #dddddd;
}

.m-box-long {
	position: relative;
	z-index: 0;
	display: block;
	min-width: 1200px;
	max-width: 70%;
	margin-bottom: 100px;
	padding-bottom: 30px;
	top: 100px;
	left: 280px;
	text-align: left;
	border: solid 0px #ff0000; 	
}

.m-box-nav {
	margin-top:40px;
	width: 100%;
	text-align: right;
	border: 0px solid #000000;	
}

.m-box-plain {
	position: relative;
	display: inline-block;
	min-width: 60%;
	max-width: 60%;
	text-align: left;
	border: solid 0px #dddddd;  	
}

.m-box-quiz {
	display: none;
	margin: 0 auto;
	min-width: 750px;
	max-width: 50%;
	text-align: center;
	border: solid 0px #dddddd;  	
}

.m-box-right {
	display: inline-block;
	vertical-align: top;
	min-width: 260px;
	max-width: 260px;
	padding: 10px 10px 20px 14px;
	text-align: left;
	margin-left: 20px;
	margin: 0px 0px 20px 0px;
	border-radius: 6px;
	border: solid 1px #dddddd;
}

.m-box-reg {
	position: relative;
	text-align: center;
	border: solid 0px #ff0000; 
}

.m-box-search {
	position: absolute;
	height: 110px;
	display: inline-block;
	margin-right: 30px;
	border: 0px solid #dddddd;	
}

.m-box-short {
	position: relative;
	vertical-align: top;
	display: inline-block;
	min-width: 400px;
	max-width: 650px;
	margin-bottom: 100px;
	padding-bottom: 30px;
	top: 90px;
	left: 280px;
	text-align: left;
	border: solid 0px #ff0000;
}

.m-box-table {
	position:relative;
	top:10px;
	display:inline-block;
	min-width:200px;
	max-width:100%;
	padding-top:5px;
	border:0px solid #cccccc;
}

.m-box-title {
	 position: relative;
	 z-index: 2;
	 margin: 0 auto;
	 text-align: center;
	 display: block;
	 width: 100%;
	 opacity: 1;
	 background-color: #ffffff;
	 margin-bottom: 0px;
	 padding-left: 18px;
	 padding-right: 18px;
	 padding: 20px;
	 border-radius: 4px;
	 box-shadow: 0px 0px 6px rgba(82, 168, 236, 0.6);
	 border: 2px solid #124456;
}

.m-box-video {
	position: relative;
	z-index: 0;
	display: block;
	min-width: 900px;
	max-width: 50%;
	margin-bottom: 100px;
	padding-bottom: 30px;
	top: 100px;
	left: 280px;
	text-align: left;
	border: solid 0px #ff0000;
}

.m-box-white-big {
	 position: relative;
	 z-index: 2;
	 display: block;
	 min-width: 820px;
	 max-width: 90%;
	 padding: 5px;
	 padding-bottom: 10px;
	 text-align: center !important;
	 background-color: #ffffff;
	 border: 1px solid #dddddd;
}

.m-box-white {
	 position: relative;
	 z-index: 2;
	 display: block;
	 min-width: 840px;
	 max-width: 100%;
	 padding: 20px;
	 padding-bottom: 20px;
 	 margin-top: 0px;
	 text-align: center !important;
	 background-color: #ffffff;
	 border: 1px solid #dddddd;
}

.m-header-top-menu .box,.m-header-user-menu-side {
	display: none;
}



/***** MENU STYLES *****/

.m-menu-back,.m-menu-back-student {
	position: absolute;
	bottom: 0;
	top: 80px;
	height: 100%;
	width: 250px; 
	z-index: 0;
	background-color: #124456;
	border: solid 0px #ff0000; 
}

.m-menu-back-student {
	width: 200px; 
	top: 0px;
	background-color: #f3f3f3;
}

.m-menu-linkbox {
	position: relative;
	width: 215px;
	left: 24px;
	text-align: center;
	padding-right: 14px;
	border: solid 0px #ffcc00;
}

.m-menu-holder,.m-menu-holder-student {
	position: relative;
	margin: 30px 0px 30px 0px;
	width: 230px;
	left: 20px;
	border: solid 0px #ffcc00;
}

.m-menu-holder-student {
	width: 200px;
	top: 90px;
	left: 0;
}

.m-menu-slice {
	position: relative;
	width: 230px;
	padding: 8px;
	text-align: right;
	border-radius: 5px 0px 0px 5px;
	margin-bottom: 5px;
	background-color: #2b809d;
	border: solid 0px #ffcc00;
}

.m-menu-slice:hover {
	color: #2b809d;
	background-color: #ffffff;
}

.m-menu-slice-student {
	position: relative;
	padding: 6px;
	width: 190px;
	color: #000000;
	text-align: right;
	margin-bottom: 5px;
	border: solid 0px #ffcc00;
}

.m-menu-slice-student:hover {
	color: #aaaaaa;
}

.m-menu-icon {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	margin-right: 18px;
	border: solid 0px #dddddd;
}

.m-menu-text {
	font-size: 1.1em;	
	color: #ffffff;
	text-decoration: none;;
}

.m-menu-text:hover {	
	color: #000000;
}

.m-menu-link-text {
	font-size: .9em;
	text-align: right;	
	color: #ffffff;
	text-decoration: none;
}

.m-menu-link-text:hover {	
	color: #aaaaaa;
}

.m-box-menu {
	position: relative;
	top: 200px;
	margin-left: 260px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	display: none;
	padding: 20px;
	background-color: #eeeeee;
	border: solid 0px #dddddd;  	
}

.m-menu-top {
	display: inline-block;
	min-width: 165px;
	max-width: 180px;
	margin-bottom: 4px;
	height: 34px;
	color: #ffffff;
	font-size: 1.1em;
	padding-top: 6.5px;
	transition: all 500ms ease;
	text-decoration: none;
	/* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 6px rgba(82, 168, 236, 0.6); */ 	
	background-color: #124456;
	border: solid 2px #124456;  	
}

.m-menu-top:hover {
	color: #124456;
	border: solid 2px #124456;
	background-color: #ffffff;  
	text-decoration: none;	
}

.m-menu-top:active {
	position: relative;
	left: 2px;
	top: 2px;	
}

.m-box-menu-top {
	position: relative;
	top: 80px;
	left: 250px;
	padding: 18px;
	padding-top: 22px;
	margin-bottom: 30px;
	width: 100%;
	height: 55px;
	text-align: left;
	background-color: #f9f9f9;
	border-bottom: 1px solid #f3f3f3; 	
}

.m-box-menu-top-resp {
	display: none;
}

.m-profile-menu {
	display: block;
	width: 90%;
	height: 20px;
	margin: 10px;
	background-color: #ffffff;
	border: solid 0px #aaaaaa;
}

.m-profile-menu.h1 {
	font-size: 1.1em; 
	font-weight: normal; 
	text-align: left;
}

#m-progress {
	position: absolute;
	height: 70px;
	bottom: -120px;
	display: none;
	width: 250px;
	text-align: center;
	border: 0px solid #aaaaaa;
}

#m-progress-wait {
	position: absolute;
	height: 20px;
	bottom: -150px;
	color: white;
	font-size: .9em;
	display: none;
	width: 250px;
	text-align: center;
	border: 0px solid #aaaaaa;
}

/***** BUTTON STYLES *****/ 

.m-btn-begin {
	cursor: pointer;
	color: white;
	min-width: 250px;
	max-width: 400px;
	font-weight: normal;
	font-size: 1.4em;
	padding: 8px;
	padding-left: 22px;
	padding-right: 22px;
	display: inline-block;
	margin: 20px;
	text-align: center;
	transition: all 500ms ease;
	background-color: #124456;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 3px 3px 3px #ddd;
	border: solid 1px #124456;
}

.m-btn-resume {
	cursor: pointer;
	color: white;
	min-width: 250px;
	max-width: 400px;
	font-weight: normal;
	font-size: 1.4em;
	padding: 8px;
	padding-left: 22px;
	padding-right: 22px;
	display: inline-block;
	margin: 20px;
	text-align: center;
	transition: all 500ms ease;
	background-color: red;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 3px 3px 3px #ddd;
	border: solid 1px red;
}

.m-btn-review {
	cursor: pointer;
	color: white;
	min-width: 250px;
	max-width: 400px;
	font-weight: normal;
	font-size: 1.4em;
	padding: 8px;
	padding-left: 22px;
	padding-right: 22px;
	display: inline-block;
	margin: 20px;
	text-align: center;
	transition: all 500ms ease;
	background-color: #136207;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 3px 3px 3px #ddd;
	border: solid 1px #136207;
}

.m-btn {
	cursor: pointer;
	color: white;
	min-width: 230px;
	max-width: 260px;
	font-weight: normal;
	font-size: 1.1em;
	display: inline-block;
	padding: 5px;
	text-align: center;
	transition: all 500ms ease;
	background-color: #124456;
	border: solid 1px #124456;
}

.m-btn-sm,.close-answer-btn {
	cursor: pointer;
	color: black;
	min-width: 100px;
	max-width: 220px;
	font-weight: normal;
	font-size: 1em !important;
	display: inline-block;
	padding: 8px;
	padding-top: 10px;
	text-align: center;
	transition: all 500ms ease;
	background-color: #ffffff;
	border: solid 1px #cccccc;
}

.m-btn-tiny {
	cursor: pointer;
	color: black;
	min-width: 60px;
	max-width: 100px;
	font-weight: normal;
	font-size: .9em;
	display: inline-block;
	padding: 4px;
	padding-top: 5px;
	text-align: center;
	margin-top:5px;
	transition: all 500ms ease;
	background-color: #ffffff;
	border: solid 1px #cccccc;
}

.m-btn-box {
	height: 50px;
	width: 125px;
	margin-left: 10px;
	display: inline-block;
	border: 0px solid #aaaaaa;
}

.m-btn-results {
	margin: 0 auto;
	display: block;
}

.m-btn-submit {
	display: inline-block;
	margin-top: 20px;
}

.m-btn:hover,.m-btn-begin:hover,.m-btn-resume:hover,.m-btn-resume-sm:hover {
	border: 1px solid #2d7aaf;
	color: #113c5a;
	background-color: #ffffff;
}

.m-btn-sm:hover {
	border: 2px solid #124456;
	color: #ffffff;
	background-color: #124456;
}

.m-btn-tiny:hover {
	border: 1px solid #124456;
	color: #ffffff;
	background-color: #124456;
}

.m-btn-tiny:active {
	position: relative;
	left: 1px;
	top: 1px;
}

.m-btn:active,.m-btn-begin:active,.m-btn-resume:active,.m-btn-resume-sm:active,.m-btn-sm:active {
	position: relative;
	left: 2px;
	top: 2px;
} 

.m-show-form {
	position: relative;
	vertical-align: top;
	display: none;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	left: 0px;
	background-color: #ffffff;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border: 0px solid #124456;
}