/*
* nav.css SPT
* 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;
	margin-bottom: 16px; 
	background-color: #8bdcdd;
	width: 100%; 	 
	height: 24px;/* bill changed 2016-04-25 */
	z-index: 50;
	overflow: visible;
	position: absolute;
	text-align:center;/* bill changed 2016-04-25 to center menu*/
}

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


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

#mainnav ul li {
	margin: 0 0 0 14px;   /* this sets the positioning of each nav item relative to the row */
	display: inline;
	padding: 0px 12px 0px 14px;/* this sets the positioning of text within each mainnav item - bottom padding sets dropdown trigger height*/
	font-family: "Helvetica Neue", arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
	list-style-type: none;
	position: relative;
	width: 140px; 
	/* outline:1px solid red;   /*    used for testing */
}
	
#mainnav ul li a, #mainnav ul li a:visited  {
	text-decoration: none;
	color: #c21e25;
	font-weight: bold;
	font-size: 14px;
	padding: 5px 5px 5px 5px; /* this causes the anchor to extend across the whole width of the list item *//* bill changed 2016-04-25 padding-bottom to 4*/
	margin-left: -20px;
 }


#mainnav ul li a:hover {
	background-color: #c21e25; /* this sets the bg color of the dropdown items when hovered*/
	text-decoration: none;
	font-weight: bold;
	color:white;
}


#mainnav ul li ul.dropdown { 
	position: absolute; 
	margin: 0px;
	left: 0; 
	top: 21px;;/* bill changed 2016-04-25 */
	display: none; /* reveal dynamically */
 	background-color: #8bdcdd; /*  this sets the background color the whole dropdown block  */
	z-index: 100;
}

#mainnav li li {
	display: block;
	height: 23px;/* bill changed 2016-04-25 */
	width: 140px;
	float: none;
	margin-left: 0px;
	list-style-type: none;
	padding: 0px 0 0 5px; /*  bill changed 2016-04-25 */
	text-align:left;/* bill changed 2016-04-25 to left align dropdown text*/
	/* outline:1px solid orange;    used for testing */
}

#mainnav li li a {
	float: none;
	margin: 0px;
	padding: 0;
} 

#mainnav li ul a {/* this causes the anchor to extend across the whole width of the dropdown rather than just over the text */
	width:146px;
	height:25px;
	background-color: #8bdcdd;
	float: left;
	margin-left: -5px;
	padding-left: 5px;
 } 

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

.reveal.desktop {
	margin-left: 4px;
	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.
*/


@media only screen and (min-width: 768px) and (max-width: 900px) {

#mainnav ul {
	margin: 0 auto 0 4%;
}

#topmenu {
}

#mainnav ul li {
	margin-left: 0px;/* bill changed 2016-04-25 */
}	

#mainnav ul li a {
	font-size: 12px;
	padding: 5px 5px 5px 5px;/* bill added 2016-04-25 */
 }
 
#mainnav li li a {
	padding: 2px 0 0 10px;/* this sets the positioning of text within each dropdown nav item */
}	



}


@media only screen and (min-width: 712px) and (max-width: 767px) {


#mainnav ul {
	margin: 0 auto 0 3%;
}

#topmenu {
}

#mainnav ul li {
	margin-left: 0px;/* bill changed 2016-04-25 */
}	

#mainnav ul li a {
	font-size: 11px;
	padding: 5px 5px 5px 5px;/* bill added 2016-04-25 */
 }
 
#mainnav li li a {
	padding: 2px 0 0 15px;/* this sets the positioning of text within each dropdown nav item */
}	



}


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

#mainnav { 
	text-align:left;/* bill changed 2016-04-25*/
	margin-bottom: 0;
}


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

#topmenu {/* bill added 2016-04-25 to center mobile dropdown*/
	margin: 0 auto;
	width:220px;
}

#mainnav > ul {
	display: none;  /* reveal dynamically */
	margin-top: 24px;/* bill changed 2016-04-25 to adjust vertical alignment*/
}

#mainnav ul li {
	margin-left: 0;
	display: block;
	background-color: #8bdcdd;
	min-height: 45px;
	width: 220px;
	padding: 12px 0px 0px 20px;/* this sets the positioning of text within each mainnav item */
	}
	
#mainnav ul li a {
	text-decoration: none;
	height: 45px;
	color: #c21e25;
	font-weight: bold;
	font-size: 18px;
 }
 
#mainnav ul li:hover a{/*  bill added 2016-04-25 to change text color when li is hovered*/
	color: white;
}

#mainnav ul li:hover {
	background-color: #c21e25;/* this sets the bg color of the dropdown li when hovered - bill changed 2016-04-25 to white*/
	text-decoration: none;
	font-weight: bold;
	color:white;
 	/*   outline:1px solid orange; used for testing */
}

#mainnav li ul.dropdown { 
	position: relative; 
	top: 0px;

}

#mainnav li li {
	display: block;
	height: 45px;
	width: 215px;/* bill changed 2016-04-25 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;
	/*background-color: #66a127; */ /* bill changed 2016-04-25 not needed because li BG color is the same */
	float: left;
 	/*outline:1px solid orange;    used for testing */
} 

.reveal.desktop {
	display: none;
	}

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


#mainnav #store-menu, #mainnav #donate-menu, #mainnav #grant-menu {
	display: none;  /* reveal dynamically */
}

}