/* CSS Document */
/*  colors....
	007f82 dark teal
	7FBFC0 pale teal
	28475D blue 
	DE740D orange (old efa585)
	*/
#nav a {
text-decoration: none;
}
#nav ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
width: 100%; /* 1000 */
/*font-family: 'Open Sans', sans-serif;*/
font-weight: 100; 
background-color: #007F82;
}
#nav > a {
display: none;
}

#nav li {
position: relative;
background-color: #007F82; /*dark teal*/
margin-left:1px; padding-left: 10px; padding-right: 1px; float: left;
}
#nav li a:hover {
background-color: #7FBFC0; /*light teal*/
color: #28475D; /*blue*/
}
/* current/active tab*/
#nav li.activeTab {
background-color:#28475D !important; /*blue*/
}
#nav li.activeTab:hover {
background-color:#28475D !important; /*blue (same as above so hover on active doesn't change color*/
}
#nav li.activeTab a  {
background-color: #28475D !important; /*blue*/
color: #fff !important; /*blue*/
}
#nav li.activeTab a:hover {
background-color: #28475D !important; /*blue*/
color: #fff !important; /*blue*/
}

#nav li:hover {
background-color: #7FBFC0; /*light teal*/
}
#nav li a {
font-family: font-family: "franklin-gothic-urw",sans-serif; font-weight:400; font-style:normal;
color: #fff;
display: block;
}

/*#nav li a:active {
background-color: #28475D !important;  /*blue*/
}*/



#nav span:after {
width: 0;
height: 0;
border:5px solid transparent; /* 5 */
border-bottom: none;
border-top-color: #DE740D; 
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.6px; /* 5 */
}
/* first level */

#nav > ul {
height: 33px; /* 60 */
background-color: #007F82; /*dark teal*/
margin-left:100px;

}
#nav > ul > li {
float: left;
padding:5px 8px 5px 8px;

}
#nav > ul > li:hover {
background-color:#7FBFC0; /* light teal*/
}
#nav > ul > li > a {
font-size: 16px; /* 24 */
line-height: 22px; /* 60 (24) */
text-align: center;
}
#nav > ul > li .first-button {margin-left:100px;}
/*#nav > ul > li .active {background-color: #28475D; } blue*/

#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
background-color: #7FBFC0; /* light teal*/
color:#28475D;
}


/******************************************************************/


 @media only screen and ( max-width: 920px ) /* 62.5 em 1000 */ {
#nav { 
width: 100%;
/*position: static;*/
position: relative;
margin: 0;
}
#nav ul {
margin-left:1px;
}
#nav li {
margin-left:1px; 
}

/* #nav > ul > li > a {
font-size: 80%;
} 
*/

 @media only screen and ( max-width: 720px ) {
/*html {
font-size: 75%; 
}
*/
#nav {
position: relative;
top: auto;
left: auto;
z-index:9999;
margin-left:-10px;
margin-right:-10px;
} 


#nav > ul {
height: auto;
/*display: none;*/
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
background-color: #28475D; /*blue*/
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 14px; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid #cc470d;
}

 @media only screen and ( max-width: 480px ) /* 640 */ {
#nav > a {
width: 50px; /* 50 */
height: 50px; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav > a:before, #nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
display: block;
}
/* hide menu initially */
#nav > ul {
display: none;
}