/*
* nav.css
* stylesheet to hold nav styles not yet folded into layout.css
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Nav Styles
- Media Queries
*/

/* Nav Styles from menus
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.align-right {
  float: right;
}

#mainnav { 
	top: 0px;
	text-align:right;
	padding-top:20px;
    /* background: linear-gradient(#468cbe, #214275);  Standard syntax */ /* WED */
    /* background: -webkit-linear-gradient(#468cbe, #214275);  For Safari 5.1 to 6.0 */ /* WED */
    /* background: -o-linear-gradient(#468cbe, #214275);  For Opera 11.1 to 12.0 */ /* WED */
    /* background: -moz-linear-gradient(#468cbe, #214275); For Firefox 3.6 to 15 */ /* WED */
	z-index: 50;
	overflow: visible;
	/* position: absolute; floats the navigation over the header image */
	/*outline:1px solid orange;   used to test layout - comment out in production */
}

#menu-icon {
	display: none;
	cursor: pointer;
}

#topmenu {

	/*outline:1px solid blue;	   used to test layout - comment out in production */
}

#mainnav > ul {
	margin: 0 auto; /* center menu*/
	width: 100%;
	display: inline;
}

#mainnav li {
    line-height: 2.0;
    margin-bottom: 0;
    text-align: center;
}

#mainnav > ul > li {   /* this defines the top level of the main nav */
	display: inline;
	padding: 8px 8px 8px 10px;/* this sets the space around the text of each mainnav item - bottom padding sets lower edge of dropdown trigger */
	font-family: arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
	text-shadow: 2px 2px black;
	list-style-type: none;
	position: relative;
	width: 8.7em; /*   specified in ems so ZOOM TEXT option expands the nav items proportionally */
	/*outline:1px solid green;   used to test layout - comment out in production */
}
	
#mainnav > ul > li a, #mainnav > ul > li a:visited { /* this defines the top level of the main nav */
	text-decoration: none;
	color: #fff;
	font-weight: bold;
 	/* outline:1px solid red;  used to test layout - comment out in production */
}

#mainnav > ul > li:hover { /* this defines the top level of the main nav */
	background-color: none;/* this sets the bg color of the dropdown items when hovered*/
	text-shadow: none;
}


#mainnav > ul > li:hover a { /* this defines the top level of the main nav */ /* this sets the anchor tag styling when hovering over the li*/
	text-decoration: none;
	font-weight: bold;
	color:gold;
}


#mainnav > ul li ul.dropdown {  /* this defines the sub levels of the main nav */
	/*  position: absolute; */
	padding:0;
	margin: 0px;
	left: 0px; /*  this sets the left edge of the whole dropdown block  */
	top: 33px;/*  this sets the upper edge of the dropdown block trigger - alignment is dependent on #mainnav height */
	display: none; /* reveal dynamically */
 	background-color: #670909; /*  this sets the background color the whole dropdown block  */
	z-index: 100;
}

#mainnav > ul li ul.dropdown a {
	height:24px;/*  this should be the same as #mainnav li li {height} *//* should be specified in ems so ZOOM TEXT option expands items proportionally */
	width:8.7em;/*  this should be the same as #mainnav li li {width} *//*   specified in ems so ZOOM TEXT option expands the nav items proportionally */
	/*  background-color: gray;this sets the background color of each dropdown linked area  */
	float: left;
	color: white;
 } 
 

#mainnav > ul > li ul li:hover a { /* this defines the top level of the main nav */ /* this sets the anchor tag styling when hovering over the li*/
	text-decoration: none;
	font-weight: bold;
	color:#670909;
}


#mainnav > ul li li {
	display: block;
	height: 33px;/*  this should be the same as #mainnav li ul a {height} *//* should be specified in ems so ZOOM TEXT option expands items proportionally */
	width: 11em;/*  this should be the same as #mainnav li ul a {width} *//* specified in ems so ZOOM TEXT option expands the nav items proportionally */
	float: none;
	list-style-type: none;
	text-align:left;/* left aligns dropdown text*/
	/* outline:1px solid orange; /* */ /* used to test layout - comment out in production */
}

#mainnav > ul li li a {
	float: none;
	margin-left: 20px;
	padding: 0;
} 

#mainnav > ul li li:hover {
	background-color: white;/* this sets the bg color of the dropdown items when hovered*/
	font-weight: bold;
	color: #670909;
}

.reveal.desktop {
	margin-left: 1.0em;
	display: inline;
	color: white;
	cursor: default;
}

.reveal.mobile {
	display:none;
	cursor: pointer;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* All mobile devices, phone up to portrait tablet */

@media only screen and (max-width: 749px) {

#mainnav { 
	text-align:left;
	margin: 0 auto;
	/* width: 100%;*/
	padding-top: 0px;
 	/* outline:1px solid black; used to test layout - comment out in production */
}

#menu-icon {
	display: block;
	position: absolute;
	left: 86%;
	top: 7px;
	z-index: 60;
	cursor: pointer;
}



#mainnav > ul {
	display: none;  /* reveal dynamically */
	margin-top: -27px;/*  adjusts vertical alignment*/
	padding-left: 0px;/*  adjusts horizontal alignment*/
}

#mainnav ul li {
	margin: 0%;
	display: block;
	background-color: #670909;
	min-height: 45px;
	width: 80%;
	/* padding: 12px 0px 0px 26px;this sets the positioning of text within each mainnav item */
 	/* outline:1px solid orange;*/ /* used to test layout - comment out in production */
}
	
#mainnav ul li a {
	text-decoration: none;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 0.95em;
}
 
#mainnav ul li:hover a {/*  changes text color when li is hovered*/
	color:#011171;
}

#mainnav ul li:hover {
	background-color: gold;/* this sets the bg color of the dropdown li when hovered */
	text-decoration: none;
	font-weight: bold;
	color:#670909;
 	/* outline:1px solid orange;*/ /* used to test layout - comment out in production */
}

#mainnav ul li ul.dropdown { 
	position: relative; 
	top: 0px;
	margin-top: 14px;
}

#mainnav li li {
	display: block;
	height: 45px;
	width: 215px;/* sets the width os the secondary li to the same width at the menu BG*/
	margin-left: 20px;
	list-style-type: none;
	padding: 0px 0 0 5px;/* this sets the positioning of text within each dropdown nav item */
	/* outline:1px solid orange;   used for testing */
}

#mainnav li ul a {
	width: 200px;/* this causes the anchor to extend across the whole width of the dropdown rather than just over the text */
	height: 45px;
	float: left;
 	/* outline:1px solid orange; /* used to test layout - comment out in production */
} 

.reveal.desktop {
	display: none;
}

.reveal.mobile {
	margin-left: 1.25em;
	font-size: 20px;
	padding: .25em;
	display: inline;
}

#mainnav .dropdown {
	display: none;  /* reveal dynamically */
}

}

	/* Mobile Portrait Size for old phones */
@media only screen and (max-width: 399px) {

#mainnav  {
	margin-top:50px;
	}

#mainnav ul li {
	margin-left: 20px;

}

}

@media only screen and (min-width: 400px) and (max-width: 549px) {

#mainnav  {
	width:300px;
	text-align:right;
	margin-top:50px;
	margin-right:18px;
	}

#mainnav ul li {
	margin-left: 25px;
}

#mainnav > ul {
	display: none;  /* reveal dynamically */
	margin-top: -27px;/*  adjusts vertical alignment*/
	padding-left: 0px;/*  adjusts horizontal alignment*/
}


}

/* Larger than phablet (also point when grid becomes active) */
@media only screen and (min-width: 550px) and (max-width: 749px) {

#mainnav  {
	width:300px;
	text-align:right;
	margin-top:50px;
	margin-right:18px;
	}
	
#mainnav ul li {
	margin-left: 30px;
}

#mainnav > ul {
	display: none;  /* reveal dynamically */
	margin-top: -42px;/*  adjusts vertical alignment*/
	padding-left: 0px;/*  adjusts horizontal alignment*/
}


}

/* Larger than tablet */
@media only screen and (min-width: 750px) and (max-width: 959px) {


#mainnav > ul {
	margin: 0;  /* left-justify menu*/
}
	

#mainnav > ul > li {   /* this defines the top level of the main nav */
	/*padding: 8px 0px 8px 0; this sets the space around the text of each topmenu item - bottom padding sets lower edge of dropdown trigger */
	margin-left: 0px;
}	

#mainnav ul li a {
	font-size: 0.65em;
	}

ul#topmenu {
	padding-left: 0px;
	}

}

@media only screen and (min-width: 960px) and (max-width: 1159px) {


#mainnav > ul > li {   /* this defines the top level of the main nav */
	/*padding: 8px 0px 8px 0; this sets the space around the text of each topmenu item - bottom padding sets lower edge of dropdown trigger */
	margin-left: 0px;
}	
#mainnav ul li a {
	font-size: 0.80em;
}

}

@media only screen and (min-width: 1150px) and (max-width: 1600px) {

#mainnav > ul > li {   /* this defines the top level of the main nav */
	/*padding: 8px 0px 8px 1%; this sets the space around the text of each topmenu item - bottom padding sets lower edge of dropdown trigger */
	margin-left: 0px;
}	

#mainnav ul li a {
	font-size: 0.90em;
	}

}