body {font: 12px/1.5em Verdana; background: #dedede; margin: 0px auto;}

#header {font: bold; background:#ffffff; padding: 0px 0px 0px 0px; z-index:0;}
#logo { padding: 13px 20px 0px 0px; float:left;}
#iom-logo { padding: 0px 0px 0px 10px; float: right;}

#shadow-one {width: 1200px; border: 1px solid #ddd; border-top: 0; margin: 0px auto;}
#shadow-two {border: 1px solid #cecece; border-top: 0;}
#shadow-three {border: 1px solid #ccc; border-top: 0;}
#shadow-four {border: 1px solid #bcbcbc; border-top: 0;}

#preview {font: bold 15px/1.5em Comic Sans MS; display:inline;}
/*---------------Menu Tabs---------------- */
#tabs {float:left; width:100%;  height: 50px; line-height:45px; background-color: #76afe5; color:#fff; border-radius: 10px;}
#tabs .left {float: left; width: 100%; text-align: left; background-image:url("images/circuit.png");background-size: contain;background-repeat: repeat;}

.foot_title
{
    font: bold 20px/1.5em Helvetica;
	color: #53BAF5; /*#ffffff*/;
  	margin: 0px auto;
}
.foot_text
{
	font: bold 14px/1.5em Helvetica;
	color:#BBC1C4;
  	margin: 0px auto;
  	text-decoration: none;
}
a.foot_text:hover {text-decoration: underline;}


#nav {font: bold; float:left; width:100%; position: relative;}

#nav ul ul {
	display: none;
}

	#nav ul li:hover > ul {
		display: block;
	}

#nav ul {
  	background: #76afe5; 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.40);	
	padding: 0 0px;
 	border-radius: 10px;
	list-style: none;
	position: block;
	display: block;
	z-index:200;
}

	#nav ul:after {
		content: ""; clear: both; display: block;
	}

	#nav ul li {
		background: #76afe5; 
		float: left;
	}
		#nav ul li:hover {
			/*background: #437db2;*/
          	background: #FFA356;
			border-radius: 10px;

		}
			#nav ul li:hover a {
				color: #FFFFFF; 
			}
			
		#nav ul li a {
			display: block; padding: 10px 10px;
			color: black; text-decoration: none;
		}
		
		#nav li#current {
			background: #437db2;
			border-radius: 10px;
		}
		#nav li#current a {
			color: #ffffff;
		} 

	#nav ul ul {
		background: #666; padding: 0;
		position: absolute; top: 35px;
	}
	
	#nav ul li ul li {
		background: #666;
	}

/*#nav li:hover ul, li a:hover ul {background: #666; padding: 0; position: absolute; top: 100%;}*/

		#nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a;
			position: relative;
		}
			#nav ul ul li a {
				padding: 5px 30px;
				color: #fff;
			}	
				#nav ul ul li a:hover {
					background: black;
				}
/*
	#nav ul ul ul {
		position: absolute; left: 100%; top:0;
	}
*/


#page {border: 1px solid #333; background: #fff; border-top: 0; padding: 0px 20px 20px 20px;}

#title {background: #00c; padding: 0px 10px 0px 10px; font-weight: bold; color: #fff; margin-bottom: 10px; height: 25px;}

#title .right {float: right; width: 300px; text-align: right;}

#menu {float: left; width: 900px; padding-right: 2px;}

#menu a {width: 900px; display: inline; background: #00c; color: white; padding: 5px 10px; font-weight: bold; border-bottom: 1px solid #fff; text-decoration: none;}

#menu a:hover {background: #44d;}

#content {width: 525px; padding-right: 10px;}

#content a {color: #00c; text-decoration: none;}

#content a:hover {color: #44d; text-decoration: underline;}

#content h1 {margin-top: 0px; padding: 10px 10px 10px 10px; }

.spacer {clear: both;}

#footer {font-size: 0.8em; color: #ffffff; text-align: center; margin: 10px 50px 0 50px; padding-top: 10px; border-top: 1px dotted #ffffff;}

#status {width: 1000px; padding: 10px; margin: 10px; border: 1px dotted #666; font-weight: bold;}

#status p {padding: 5px 0 5px 10px; text-indent: -10px; margin: 0;}

#status .leds {font-size: 14pt;}

#status .leds a {color: #ddd; cursor: pointer;}

#status .leds a:hover {color: #ddd; text-decoration: none;}

#noprint input {width:200px; height:40px; font-weight:bold; cursor:pointer;}

#fixed {z-index:100; position:fixed; width: 932px; background:white;}

.examplebox {
	margin:10px 40px 10px 40px;
	padding: 8px;
	border: 1px dotted #333;
	text-align:center;
	background:#ddd;
}

.code {
	font-family: Courier New, Courier, fixed-width, fixed;
}

.exercise {
	background: #fe9;
	padding: 5px;
	margin-left: 10px;
	border-left: 2px solid #eb3;
}

.error {
	margin-left: 10px;
	padding: 10px;
	background: #fdd;
	border-left: 2px solid #900;
}

#content h6 {
	border-top: 1px dashed #333;
	margin: 15px;
	padding: 0px;
	height: 1px;
}

.examplebox td {
	text-align:left;
	padding-right: 15px;
}
hr{
    display: block;
    height: 4px;
    background: transparent;
    border: none;
    border-top: solid 4px #aaa;
}

fieldset {
	margin:0px 0px 0px 0px;
	padding: 20px 8px 8px 8px;
	border: 1px dotted #333;
	background:#ddd;
	border-radius: 10px;
}

fieldset div {
	padding: 0px 0px 0px 100px;
}


fieldset table{table-layout:fixed;}
fieldset table table{table-layout:fixed;}
/*
fieldset td{width:1px;white-space:wrap;}
*/

fieldset td div {
	padding: 0px 0px 0px 0px;
}

fieldset div label {
	margin-left: -90px;
	padding-top: 0px;
	font-weight: bold;
}

fieldset div label.fail {
	font: bold 12px/1.5em Verdana;
	color:#A00;
}

fieldset div label.pass {
	font: bold 12px/1.5em Verdana;
	color:#090;
}

fieldset div label.progress {
	font: bold 12px/1.5em Verdana;
	color:black;
}

fieldset div label.title {
	font: bold 15px/1.5em Verdana;
	color:green;
}

fieldset label.product {
	font:bold 15px/1.5em Verdana;
	color: #666; 
	text-align: top;  
	margin: 10px 10px 100px 4px;
	border-bottom: 2px dotted #666;
}

fieldset.resultat label.warning {
	font: bold 15px/1.5em Verdana;
	color:#A00;
}

fieldset.foot {
	margin:0px 0px 0px 0px;
	padding: 0px 8px 8px 8px;
	border: 1px dotted #333;
	background:#76afe5;
    background-image:url("images/foot_bg.jpg");
  	background-size: contain;
  	background-repeat: repeat;
	border-radius: 0px;
	color:#ffffff;
}

#test_state_result {
	font: bold 15px/1.5em Verdana;
}

#btnSubmit {
	font: bold 20px/1.5em Verdana;
	width: 100px;
	color:white;
	background:#090;
	border-color:#0B0;
	cursor:pointer;
}

#progress_bar {     
	width:100px;        
	height:7px;     
	border:1px solid #ccc;      
	padding:0;       
	margin:0;             
	background-image:url("\progress_bar.gif");       
	background-repeat:repeat-x;		
}   

#progress_bar span {
	background-color:#fff;  
}

fieldset input.sm {
	width: auto;
}

fieldset textarea {
	width: 250px;
}

.result
{
	margin: 10px 40px 0px 40px;
	padding: 8px;
	border: 1px solid #333;
	text-align: center;
	font-weight: bold;
	background: #eee;
}

	.ok {
		border-color: #6b6;
		background: #efe;
	}
	
	.fail1 {
		border-color: #b66;
		background: #fee;
	}
	
	.unk {
		border-color: #cc6;
		background: #ffd;
	}

.button {
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  color: #fff;
  background: black;
}
.button_rev {
  color: white;
  background: black;
  text-decoration: none;
  cursor: pointer;
}
.button_rev:hover {
  color: black;
  background: #dedede;
}
/*****************************/
 /* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

tr.bull {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	font-size: 20px;
}
/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}