/*	css/layout.css - default layout file */

	/* 
	//* error reporting
	/// default: off
	/// options: E_ALL, E_ALL ^ E_NOTICE, OFF	
	
	*/
	
	html { height: 100%; }
	
	body {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background: url(../images/background.png) fixed;
	}
	
	#wrapper { width: 1080px; height: 100%; margin: auto; }
	body > #wrapper {
	    height: auto;
	    }

	    header {
			width: 100%;
			height: 95px;
			}
			header img {
				padding: 0;
				float: left;
			}
			#meta {
				float: right;
				margin-top: 10px;
				}
				#meta a { text-transform: uppercase; padding-left: 20px; font-size: 10px; color: #898A8E; }
	
		#main {
			width: 1080px;
			position: relative;
			padding-bottom: 60px;
			}
			
			#topNavigation 				{ width: 1080px; height: 40px; margin-bottom: 20px; }
			#topNavigation ul 			{ margin: 0; padding: 0; list-style-type: none; }
			#topNavigation ul li 		{ float: left; background: url(../images/mn-out.gif); width: 216px; height: 40px; }
			#topNavigation ul li:hover	{ background: url(../images/mn-hover.gif); }
			#topNavigation ul li.current	{ background: url(../images/mn-hover.gif); }
			#topNavigation ul li a		{ color: #FFFFFF; display: block; font: 13px/40px verdana,arial,sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; width: 216px; }
			
			section		{ width: 1080px; /* height: 574px;  */box-shadow: 0px 0px 4px #898A8E; }
			#content	{ width: 1060px; min-height: 530px; padding: 10px; background: url(/images/section.png) no-repeat center bottom #fff; }
			#content.admin	{ padding: 5px 15px 5px 5px; }
			/* login */
			#content.login	{ padding: 10px; border: none; margin: 0; min-height: 400px; background: url(/images/login.png) no-repeat top right #fcfcfc; }
			#login, #forgotpwd { padding-left: 270px; padding-top: 30px; width: 350px; }
			#forgotpwd { margin-top: 10px; display: none; }
			
			#content.gateway { width: 920px; padding: 50px 80px; }
			#content.gateway h1 { font-size: 22px; color: #4d4e52 !important; }
			#content.gateway table td { padding-top: 30px; padding-right: 20px; }
			#content.gateway table td a { font-size: 18px; color: #c5252d !important; }
			#content.gateway table img { max-width: 160px; height: auto; }
			
			#newUser { display: none; padding-left: 0; padding-top: 30px; }
			#newUser input { width: 200px; height: 16px; margin: 5px 0 5px 0; }
			#newUser input[type=submit] { height: 25px; }

			/* welcome */
			#content.welcome { padding: 1px 0 0 0; width: 1080px; }
			
			/* training */
			#content.training { padding: 10px; min-height: 530px; }
			#content.training ul { margin: 0; padding: 0; list-style-type: none; }
			#content.training ul li { float: left; width: 490px; line-height: 25px; margin: 0 15px 10px 0; background: #e3e3e3; border-radius: 5px; }
			#content.training ul li a { display: block; color: #000; padding-left: 15px; margin-right: 5px; background: url(../images/arrow-red-down.png) no-repeat center right; }
			
			.trainingContent { display: none; background: #fff; }
			
			#content.videolib,
			#content.videolibDetail {background:url(/images/section-videolib.png) no-repeat; }

			#content.videolibDetail iframe 	{ float: left; }
			#content.videolibDetail .text 	{ float: right; width: 400px; }
			
			.admin {
				background: #fff !important;
				height: auto !important;
				
			}
			
			#content {
				
			}
			
			.admnav	{ width: 200px !important; background: #eeeeee; }
			.admnav ul {
				list-style-type: none;
				margin: 5px 0 0 0;
				padding: 0;
				}
				.admnav ul li {
					margin-bottom: 20px;
					}
					.admnav ul li strong { padding: 0 5px; }
					.admnav ul li a {
						line-height: 20px;
						border-bottom: 2px solid #d7d7d7;
						display: block;
						padding: 0 5px;
						}
						.admnav ul li a:hover,
						.admnav ul li.current a { background: #969696; color: white; }
						.admnav ul li ul {
							border-bottom: none;
						}
						.admnav ul li ul li {
							border-top: none;
							margin-bottom: 0;
							padding-left: 0;
						}
	
	footer {
/* 		position: fixed; */
/* 		bottom: 0; */
		width: 100%;
		height: 135px;
		background: url(/images/footer.png) center top;
		color: #fff;
		}
		#footer { 
			width: 1080px;
			height: 135px;
			margin: 0px auto;
			color: #7f7f84;
			font-size: 10px;
			}
			#footer a {
/* 				line-height: 26px; */
				color: #7f7f84;
				font-size: 10px;
			}
			#footer td {
				line-height: 16px;
				color: #7f7f84;
				font-size: 10px;
			}
	
	#sysinfo {
		position: absolute;
		top: 0;
		right: 0;
		color: #fff;
		margin: 10px;
		border: 1px solid red;
		font-size: 11px;
		padding: 5px;
		border-radius: 5px;
		background: rgba(164,164,164,0.8)
	}
	

	#langSelect {
	    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	    border: 0 none;
	    color: #898a8e !important;
	    font-family: Verdana;
	    font-size: 10px !important;
	    font-weight: normal !important;
	    margin-right: 20px;
	    padding: 4px 10px 0 4px;
	    text-transform: uppercase;
	    width: 100px !important;
	    border: 1px solid #cbcbcb;
	}


			#content.media {
				background:url(/images/section-downloads.png) no-repeat center bottom #fff;
				padding: 35px 30px 10px;
				width: 1020px;
				padding-bottom: 150px;
			}

			#content.videolib {
				background:url(/images/section-videolib.png) no-repeat center bottom #fff;
				padding: 35px 30px 10px;
				width: 1020px;
				padding-bottom: 150px;
			}

			#content.account {
				padding: 35px 30px 10px;
				width: 1020px;
				background:url(/images/section-account.png) no-repeat center bottom #fff;
			}

			#content.certificates {
				padding: 35px 30px 10px;
				width: 1020px;
				background:url(/images/section-certificates.png) no-repeat center bottom #fff;
			}

			/* training */
			
			#content.device {
				background:url(/images/section-training.png) no-repeat center bottom #fff;
				padding: 35px 30px 10px;
				width: 1020px;
				}

			
				#content.device .devices {
					float: left;
					margin-right: 10px;
				}
				#content.device .devices img { width: 240px; }
				#content.device .devices h3 { width: 220px; background: url(/images/arrow-red-right.png) no-repeat 215px 5px #E3E3E3; border-radius: 5px; padding: 5px 10px; }


			#content.devicedownloads {
				background:url(/images/section-downloads.png) no-repeat;
				padding: 35px 30px 10px;
				width: 1020px;
				}
				
				#content.devicedownloads .devices {
					float: left;
					margin-right: 10px;
				}
				#content.devicedownloads .devices img { width: 240px; }
				#content.devicedownloads .devices h3 { width: 220px; background: url(/images/arrow-red-right.png) no-repeat 215px 5px #E3E3E3; border-radius: 5px; padding: 5px 10px; }



			#content.devicevideolib {
				background:url(/images/section-videolib.png) no-repeat center bottom #fff;
				padding: 35px 30px 10px;
				width: 1020px;
				}
				
				#content.devicevideolib .devices {
					float: left;
					margin-right: 10px;
				}
				#content.devicevideolib .devices img { width: 240px; }
				#content.devicevideolib .devices h3 { width: 220px; background: url(/images/arrow-red-right.png) no-repeat 215px 5px #E3E3E3; border-radius: 5px; padding: 5px 10px; }


				
			#content.training,
			#content.course {
				background:url(/images/section-training.png) no-repeat center bottom #fff;
				padding: 35px 30px 10px;
				width: 1020px;
				}
			
			.one-half{
				width: 46%;
				float: left;
				margin-right: 2%;
				}
				.one-half.last{
					margin-left: 4%;
				}
				
				#toggle-view{
					list-style:none;
					margin:30px 0 0 0;
					padding:0;
					width:100%;
					}
					.toggle-container{
						position:relative;
						cursor:pointer;
						float: left;
						width: 100%;
						margin-right: 0;
						margin-bottom: 10px;
						}
					#toggle-view h3{
						margin:0;
						font-size:14px;
						display: block;
						width: 100%;
						border-radius:5px;
						padding: 2px 0 2px 15px;
						background:#e3e3e3;
						color: black;
						font-weight: normal;
						}
						#toggle-view h3:hover{
							color: #A82B32;
							}
					#toggle-view span{
						position:absolute;
						right:0px;
						top:2px;
						color:#ccc;
						font-size:13px;
						}
					#toggle-view .panel{
						padding:5px 15px;
						display:none;
						border-bottom: 1px solid #e3e3e3;
						}
					#toggle-view a{
						display: block;
						color: black;
						}
						#toggle-view a:hover{
							text-decoration: none;
						}		
						#toggle-view a b{
							color: #a82a31;
							}
							
			/* training-video questions */
			
			#content.coursestart {
				background:url(../images/section.png) no-repeat;
				padding: 50px 70px 0px 10px;
				width: 1020px;
				 min-height: 530px;
				}							
						
			.three-fifth{
				width: 585px;
				float: left;
				}
				
				span.completed{
					display: block;
					padding-top: 3px;
				}
			
			.two-fifth{
				width: 410px;
				margin-left: 25px;
				float: left;
				min-height: 395px;
				}
				
				p.hint{
					background: url(../images/arrow-red-right-small.png) 0 2px no-repeat;
					padding-left: 15px;
					margin-left: -15px;
				}
				
				span.legit,
				p.legit{
					color: #00c000;
					font-weight: bold;
					display: block;
					padding-top: 20px;
				}
				
				p.legit{
					padding-top: 0;
				}
				
				span.wrong{
					color: #a82a31;
					font-weight: bold;
					display: block;
					padding-top: 20px;
				}
				
			#pagination{
				position: absolute;
				width: 1020px;
				padding: 8px 30px 0;
				height: 32px;
				top: 0;
				left: 0;
				z-index: 999;
				background: #898A8E;
				}
				#pagination h1{
/* 					width: 50%; */
					display: block;
					color: white;
					float: left;
					}
				.button-red{
					font-size: 12px;
					float: right;
					color: #ffffff;
					font-weight: bold;
					padding: 4px 10px;
					margin-left: 10px;
					background:	#ab2b31;
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					border-radius: 4px;
					border: 1px solid #61181c;
					-moz-box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					-webkit-box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					}

				.button-red2{
					font-size: 12px;
					color: #ffffff;
					font-weight: bold;
					padding: 4px 10px;
					margin-left: 10px;
					float: none;
					background:#aa2a30;
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					border-radius: 4px;
					border: 1px solid #61181c;
					-moz-box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					-webkit-box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					box-shadow:
						0px 1px 3px rgba(000,000,000,0),
						inset 0px -7px 5px rgba(000,000,000,0.3);
					}

					.button-red:hover{
						cursor: pointer;
						text-decoration: none;
						}
						
				.button-red span{
					display: block;
					width: 9px;
					height: 13px;				
					}
					.button-red.left span{
						margin:2px 8px 0 0;
						display: block;
						width: auto;
						float: left !important;
						}
					
					.button-red.right span{
						margin:2px 0 0 8px;
						float: right;
						}
					.button-red.submit{
						float: left;
						margin:20px 0 0 0;
					}					

			#carousel{
/*
				position: absolute;
				bottom:85px;
				left: 15px;
*/
				display: block;
				
				width: 1020px;
				padding: 20px 0 20px 0;				
			}
			
		/* TOOLTIP */
		
		 a.tooltip {
		 	outline:none;
			display: block;
			width: 162px;
			height: 92px;
			float: left;
			margin-right: 10px;
			border: 2px solid #898A8E;
		 } 
		 
		 a.corrttip {
			 border: 2px solid #008000;
		 }
		 
		 a.tooltip strong {
			line-height:30px;
		 } 
		
		 a.tooltip:hover {
		 	text-decoration:none;
		 	} 
		 
		 a.tooltip span { 
		 	z-index:10;
		 	display:none; 
		 	padding:0 10px 10px; 
		 	margin-top:-90px; 
		 	margin-left:5px; 
		 	width:240px; 
		 	line-height:16px;} 			
		 	
		 a.tooltip:hover span{ 
		 	display:inline; 
		 	position:absolute; 
		 	color:white; 
		 	background:#969696;} 
		 	
		 .callout {
		 	z-index:20;
		 	position:absolute;
		 	bottom:-30px;
		 	border:0;
		 	left:0;}
		 	
		 /* STYLED CHECKBOXES */
		 
		input[type="checkbox"] {
		    display:none;
		}
		
		.account input[type="checkbox"] {
		    display:inline;
		    width: 20px;
		    border: none;
		    box-shadow: none;
		    padding: 0 5px;
		}

		.account input[type="radio"] {
		    display:inline;
		    width: 20px;
		    border: none;
		    box-shadow: none;
		    padding: 0 5px;
		}

		.admin input[type="checkbox"] {
		    display:block;
		    width: 15px;
		    height: 15px;
		    margin-right: 5px;
		}

		.admin input[type="radio"] {
		    display:block;
		    width: 15px;
		    height: 15px;
		    margin-right: 5px;
		}
		
		#newUser input[type="radio"] {
		    display:inline;
		    width: 20px;
		    border: none;
		    box-shadow: none;
		    padding: 0 5px;
		}
		#newUser input[type="checkbox"] {
		    display:inline;
		    width: 20px;
		    border: none;
		    box-shadow: none;
		    padding: 0 5px;
		}
		
 		.devicecheckbox { display: none; }
				
		input[type="checkbox"] + label {
			display: block;
			margin-bottom: 0;
			min-height: 20px;
		}
		
		.questionItem {
			position: relative;
		}

		.questionlist label {
			display: inline-block;
			margin-left: 40px;
			padding-top: 6px;
		}
/*
		.questionlist label img {
			pointer-events: none;
		}
*/
		
		input[type="checkbox"] + label span {
		    display:block;
		    float: left;
		    width:27px;
		    height:27px;
		    margin:-5px 8px 0 0;
		    vertical-align:middle;
		    background:url(../images/check_radio_sheet.png) left top no-repeat;
		    cursor:pointer;
		    position: absolute;
		    left: 0px;
		    top: 7px;
		}
		
		input[type="checkbox"]:checked + label span {
		    background:url(../images/check_radio_sheet.png) -27px top no-repeat;
		}

		input[type="checkbox"]:checked + label span.correct {		    
			background:url(../images/check_radio_sheet.png) -54px top no-repeat;
		}

		input[type="checkbox"]:checked + label img.correct {		    
			border: 4px solid #00c000;
		}

		input[type="checkbox"]:checked + label span.incorrect {		    
			background:url(../images/check_radio_sheet.png) -81px top no-repeat;
		}

		input[type="checkbox"]:checked + label img.incorrect {		    
			border: 4px solid #a82a31;
		}
		
		input[type="radio"] {
		    display:none;
		}
		
		input[type="radio"] + label {
		    color:#f2f2f2;
		    font-family:Arial, sans-serif;
		    font-size:14px;
		}
		
		input[type="radio"] + label span {
		    display:inline-block;
		    width:19px;
		    height:19px;
		    margin:-1px 4px 0 0;
		    vertical-align:middle;
		    background:url(check_radio_sheet.png) -38px top no-repeat;
		    cursor:pointer;
		}
		
		input[type="radio"]:checked + label span {
		    background:url(../images/check_radio_sheet.png) -57px top no-repeat;
		}
		
		input[disabled="disabled"] + label span{
			cursor: default;
		}
		 		
		img { border: 0; }
		
		
		#topbar {
			display: block; 
			background: #969696;
			width: 100%;
			height: 26px;
			padding: 6px 0;
			border-right: 15px solid #969696;
			margin-top: -5px;
			margin-bottom: 25px;
			position: relative;
		}
		
		#notification {
			position: absolute;
			width: 864px;
			height: 38px;
			text-align: center;
			font-weight: bold;
			line-height: 40px;
			display: none;
			top: 0;
			left: 0;
			}
			.save,
			.delete,
			.add {
				text-transform: uppercase;
				font-size: 14px;
				color: white; 
				background: #969696;
				background: -moz-linear-gradient(left, #969696 0%, #00c000 50%, #969696 100%);
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#969696), color-stop(50%,#00c000), color-stop(100%,#969696));
				background: -webkit-linear-gradient(left, #969696 0%,#00c000 50%,#969696 100%);
				background: -o-linear-gradient(left, #969696 0%,#00c000 50%,#969696 100%);
				background: -ms-linear-gradient(left, #969696 0%,#00c000 50%,#969696 100%);
				background: linear-gradient(to right, #969696 0%,#00c000 50%,#969696 100%);
			}
			.error {
				background: #A82A31;
				color: white;
			}