html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
        
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* start here ----------------------------------------------------------------- */

/*  This is the bar only, not the text within it*/
header#page-top{
    width:100%;
    position:fixed;
    top:0px;
    height:2.75%;
    max-height: 10%;
    min-height: 2%;
    background: -webkit-linear-gradient(#303030,#303030,#191919,black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#303030,#303030,#191919,black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#303030,#303030,#191919,black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#303030,#303030,#191919,black);
    margin:0 0 0px 0;
    padding:.5% .5% .0% .5%;
    border-bottom:1px solid lightsteelblue;
}
/*This is the text on the top nav bar*/
nav ul li.page-top {
    color:whitesmoke;
    font-size: 90%;
    
    }
nav ul li.page-top a{
    color:whitesmoke;
    font-size: 90%;
    text-decoration:none;
    }
 .topbar li{
    display:inline;
    margin:.33em .33em .33em .33em;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    
    }
    .page-top a:hover{
        
    }
    

footer#main-panel{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    height: 20px;
    max-height: 10%;
    min-height: 20px;
    background-color:#efefef;
    margin:10px 0 0 0;
    padding:.5% .5% .5% .5%;
    color:#575757;
    font-size: 90%;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
}
body{
      width:100%;
      background-color:lightgray;
}
#ribbon-nav{
 height:40px;
 min-height:40px;
 background:whitesmoke;
 text-align: center;
 padding-top:30px;
 margin-top:-55px;
 padding-bottom:25px;
}
#ribbon-nav{
    margin-top:0px;
    transition-delay: .2s;
    z-index:10;
}
.list-inline{
    padding-left:0;
    list-style:none;
    margin-left:0px;
}
.list-inline>li{
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
}
.list-inline{
    overflow: hidden;
}
.list-inline li a{
    color:#3276b1;
    text-decoration: none;
    font-size:80%;
    padding-left:10px;
    padding-top:100px;
   
}
.list-inline li a:hover{
    color: #430021;
}
.list-inline li a:active{
    color:#5CD65C;
}
nav#ribbon ul ul {
    display: none;
}
nav#ribbon ul li:hover > ul {
    display: block;
    margin-top:0px;
}
nav#ribbon ul {
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
}
nav#ribbon ul li {
    float: left;
}
                                                                        /*here1*/
nav#ribbon ul li:hover a {
    color: white;
    font-size: 100%;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
}
.listLabel {
    color: lightgray;
    font-size: 85%;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    
}
.listLabel :hover {
    color: red;
    font-size: 90%;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    
}
nav#ribbon ul li a {
    display: block; 
    padding: 0px 10px;
    color: #575757; 
    text-decoration: none;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    font-size:100%;
}
nav#ribbon ul ul {
	background: #5f6975; padding: 0;
	position: absolute; top: 100%;
        
}
nav#ribbon ul ul li {
		float: none; 
		border-top: 0px;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
        
        nav ul ul li a {
			padding: 15px 40px;
			color: white;
		}	
nav#ribbon ul ul ul {
    position: absolute; left: 100%; top:0;
}
nav#ribbon ul ul ul li:hover {
    display:block;
    
}
                                                                        /*here2*/
nav#ribbon ul ul {
    
    
  
   
}
.listLabel:hover{
    color: white !important;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
}
.list1{
    background-color: black; 
     
    padding: 0;
    position: absolute; top: 100%;
    
}
.list2{
    background-color: Green; 
   
    padding: 0;
    position: absolute; top: 100%;
    
}
.list3{
    background-color: orange; 
     
    padding: 0;
    position: absolute; top: 100%;
    
}
.list4{
    background-color: purple; 
     
    padding: 0;
    position: absolute; top: 100%;
    
}
.list5{
    background-color: steelblue; 
    
    padding: 0;
    position: absolute; top: 100%;
    
}
.list6{
    background-color: red; 
     
    padding: 0;
    position: absolute; top: 100%;
    
}
.list7{
    background-color: darkgray; 
     
    padding: 0;
    position: absolute; top: 100%;
    
}
.list8{
    background-color: #99CC00; 
   
    padding: 0;
    position: absolute; top: 100%;
   
}
.list9{
    background-color: darkgoldenrod; 
    
    padding: 0;
    position: absolute; top: 100%;
    
    
}
.list10{
    background-color: #FF0066; 
     
    padding: 0;
    position: absolute; top: 100%;
   ;
}
.list11{
    background-color: #000066; 
    
    padding: 0;
    position: absolute; top: 100%;
}

nav#ribbon ul ul li {
    float: none; 
    border-top:0;
    border-bottom: 1px solid white;
    position: relative;
    
}	
nav#ribbon ul ul li a {
    min-width:100px;
    padding: 5px 10px;
    color: whitesmoke;
    font-family:Muli,Arial,Helvetica,Sans-Serif;		
}			
nav#ribbon ul ul li a:hover {
    background: #797979;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    color:white;
}
.listLabel nav#ribbon ul ul li a:hover {
    background: #797979;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    color:black !important;
}

table{
    width:600px;
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    margin:25px 0px 25px 10px;
}
th,td{
    padding:7px 10px 10px 10px;
    border-right:2px solid #efefef;
    border-left:2px solid #efefef;
    border-bottom:1px solid #efefef;
    
}
th{
    text-transform: uppercase;
    letter-spacing:.1em;
    font-size:90%;
   
    border-top:1px solid #999;
    text-align:left;
    color:white;
    background-color:steelblue;
}
tr:hover{
    background-color:lightsteelblue;
    color:white;
}
h1{
   font-family:Muli,Arial,Helvetica,Sans-Serif;
   margin:10px 0px 0px 25px; 
   color:steelblue;
}
input{
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    font-size:100%;
    color:black;
    border: 1px solid #bdbdbd;
    border-radius: 2px;
    padding: 5px 5px 5px 5px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;
    height:22px;
}
input:focus{
    background-color:lightsteelblue;
    border: 1px solid gray;
    color:white;
}
input:hover{
    background-color:lightsteelblue;
    border: 1px solid gray;
    color:white;
    transition-delay: .1s;
    transition-duration: .1s;
}

form{
    margin: 25px 25px 25px 25px;
    border: 1px solid #bebebe;
    width:90%;
    padding: 25px 25px 25px 25px;
    overflow:auto;
    background-color:steelblue;
    min-width:800px;
    overflow:hidden;
    
}
label{
    font-family:Muli,Arial,Helvetica,Sans-Serif;
    margin: 5px 5px 10px 0px;
    color:white;
}
.col1{
    float:left;
    width:30%;
    margin:10px;
}
label.col1{
    float:left;
}
.col2{
    float:left;
    width:30%;
    margin:10px;
}
.col3{
    float:right;
    width:10%;
    margin:10px;
    padding-top:10px;
}