/*
* 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;
}

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


#mainnav { 
	top: 90px;/* firefox calculates the top of this div height 6px higher than chrome and safari */
	/* background-color: white;used to test layout - comment out in production */
	margin:-30px 0 0 0;
	padding-right:35px;
	padding-bottom:5px;
	width: 100%; 	 
	/*   height: 24px; if this is specified, firefox calculates the div height differently than chrome and safari */
	z-index: 50;
	overflow: visible;
	text-align:right;
	position: fixed;
	position: absolute; /* often used to test layout - comment out in production */
	/*  outline:1px solid blue; used to test layout - comment out in production */
}

#mainnav ul {
	margin: 0 auto;
	display: inline;
}

#mainnav ul li {
	margin: 0 0 0 6px;   /* this sets the positioning of each nav item relative to its neighbor inthe row */
	display: inline;
	padding: 6px 8px 6px 4px;/* this sets the space around the text of each mainnav item - bottom padding sets lower edge of dropdown trigger */
    font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
	list-style-type: none;
	position: relative;
	width: 6.0em; /*   specified in ems so ZOOM TEXT option expands the nav items proportionally */
	/*outline:1px solid red;   used to test layout - comment out in production */
}
	
#mainnav ul li a {
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 20px;
	padding: 0px 5px 0px 5px;
	margin-left: 0px;
 	/* outline:1px solid red;  used to test layout - comment out in production */
}

#mainnav ul li:hover a{
	text-decoration: none;
	font-weight: bold;
	color:#5374af;
}


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


#mainnav li ul.dropdown { 
	position: absolute; 
	margin: 0px;
	left: -20px; /*  this sets the left edge of the whole dropdown block  */
	/*  top: 16px;;this sets the upper edge of the dropdown block trigger - if not specified all browsers calculate the upper edge flush with the containing #mainnav div*/
	display: none; /* reveal dynamically */
 	/*background-color: ;   this sets the background color the whole dropdown block  */
	z-index: 100;
}

#mainnav li li {
	display: block;
	height: 25px;/*  this should be the same as #mainnav li ul a {height} *//* should be specified in ems so ZOOM TEXT option expands items proportionally */
	width: 8.7em;/*  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;
	margin-left: 0px;
	list-style-type: none;
	padding: 0px 0 0 5px; 
	text-align:left;/* left aligns dropdown text*/
	/* outline:1px solid orange; */ /* used to test layout - comment out in production */
}

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

#mainnav li ul a {
	height:25px;/*  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;
	margin-left: -5px;
	padding-left: 5px;
 } 

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

body#colordesign .topmenu1 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}


body#interior .topmenu2 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}

body#painting .topmenu3 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}

body#repairs .topmenu4 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}

body#careers .topmenu5 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}

body#charity .topmenu6 a {
	color:#9e3594;
	background-color:#ddd;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 4px solid #ddd;
}
	


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

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


#secondnav {
	margin-top:6px;
	width: auto; 	 
	/*   height: 24px; if this is specified, firefox calculates the div height differently than chrome and safari */
	z-index: 50;
	overflow: visible;
	/* position: absolute; used to test layout - comment out in production */
	text-align:center;
	/* outline:1px solid blue;  used to test layout - comment out in production */
}

#secondnav ul {
	margin: 0;
	display: inline-block;
}

#secondnav ul li {
	margin: 0;   /* this sets the positioning of each nav item relative to its neighbor inthe row */
	display: inline-block;
	padding: 0px 1px 6px 1px;/* this sets the space around the text of each mainnav item - bottom padding sets lower edge of dropdown trigger */
	font-family: arsenal, helvetica, geneva, swiss, sunsans-regular, sans-serif;
	list-style-type: none;
	position: relative;
	/*width: 6.0em;    specified in ems so ZOOM TEXT option expands the nav items proportionally */
	/* outline:1px solid red;  used to test layout - comment out in production */
}
	
#secondnav ul li a {
	text-decoration: none;
	color: black;
	font-weight: bold;
	font-size: 15px;
	padding: 3px 8px 3px 8px;
	margin-left: 0px;
 	/* outline:1px solid red;  used to test layout - comment out in production */
}

#secondnav ul li:hover a{
	text-decoration: none;
	font-weight: bold;
	color:#9e3594;
}


#secondnav ul li:hover {
	background-color: white;/* this sets the bg color of the dropdown items when hovered*/
}


#secondnav li ul.dropdown { 
	position: absolute; 
	margin: 0px;
	left: -20px; /*  this sets the left edge of the whole dropdown block  */
	/*  top: 16px;;this sets the upper edge of the dropdown block trigger - if not specified all browsers calculate the upper edge flush with the containing #mainnav div*/
	display: none; /* reveal dynamically */
 	/*background-color: ;   this sets the background color the whole dropdown block  */
	z-index: 100;
}

#secondnav li li {
	display: block;
	height: 26px;/*  this should be the same as #mainnav li ul a {height} *//* should be specified in ems so ZOOM TEXT option expands items proportionally */
	width: 8.7em;/*  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;
	margin-left: 0px;
	list-style-type: none;
	padding: 0px 0 0 5px; 
	text-align:left;/* left aligns dropdown text*/
	/* outline:1px solid orange; */ /* used to test layout - comment out in production */
}

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

#secondnav li ul a {
	height:1.7em;/*  this should be the same as #mainnav li li {height} *//* should be specified in ems so ZOOM TEXT option expands items proportionally */
	width:8.0em;/*  this should be the same as #mainnav li li {width} *//*   specified in ems so ZOOM TEXT option expands the nav items proportionally */
	background-color: #bbb;/*  this sets the background color of each dropdown linked area  */
	float: left;
	margin-left: -5px;
	padding-left: 5px;
 } 

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

.secreveal.desktop {
	margin-left: 0em;
	display: inline;
	color: black;
	cursor: default;
}

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

.button a{
	background-color: #1a41a0;/*1a41a0 this sets the bg color of the button #25861a*/
	height:13px;
	padding:5px;
	-webkit-border-radius: 10px;
    border-radius: 10px;
	box-shadow: 0px -2px 2px 0px black inset; 
}

.button a:hover {
	background-color: #9e3594;
	text-decoration:none;
}



.contact a{
	/* border:1px solid teal;  used to test layout - comment out in production */
	background-color: #1a41a0;/*1a41a0 this sets the bg color of the button #25861a*/
	height:13px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	box-shadow: 0px -2px 2px 0px black inset; /* */
}

.bids a{
	/* border:1px solid teal;  used to test layout - comment out in production */
	background-color: #1a41a0;/* this sets the bg color of the button #28b0c9*/
	height:13px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	box-shadow: 0px -2px 2px 0px black inset; /* */
}

.jobs a{
	/*border:1px solid orange;   used to test layout - comment out in production */
	background-color: #1a41a0;/* this sets the bg color of the button #d76f09*/
	height:13px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	box-shadow: 0px -2px 2px 0px black inset; /* */
}

.pay a{
	/*border:1px solid red;   used to test layout - comment out in production */
	background-color: #1a41a0;/* this sets the bg color of the button #b94a3e*/
	height:13px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	box-shadow: 0px -2px 2px 0px black inset; /* */
}

.contact a:hover, .bids a:hover, .jobs a:hover, .pay a:hover{
	background-color: #9e3594;/* this sets the bg color of the button*/
}


/* 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.
*/
	/* Mobile Portrait Size for old phones */
@media only screen and (max-width: 399px) {
	#menu-icon {
	top: 112px;

}

}

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

#mainnav { 
	text-align:left;
	margin-bottom: 0;
 	/* outline:1px solid black; used to test layout - comment out in production */
}


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

#topmenu {/*  centers mobile dropdown*/
	margin: 0 auto;
	width:220px;
}

#secondnav {
	margin-top:0px;
	width: 100%; 	
	margin-left:-25px;
	}

#secmenu {/*  centers mobile dropdown*/
	margin: 0 auto;
	width:330px;/*   */
}

#mainnav > ul {
	display: none;  /* reveal dynamically */
	margin-top: 28px;/*  adjusts vertical alignment*/
}

#mainnav ul li {
	margin-left: 0;
	display: block;
	background-color: gray;
	min-height: 45px;
	width: 280px;
	padding: 12px 0px 0px 20px;/* this sets the positioning of text within each mainnav item */
	z-index: 100;
	}
	
#mainnav ul li a {
	text-decoration: none;
	height: 45px;
	color: white;
	font-weight: bold;
	font-size: 17px;
 }
 
#mainnav ul li:hover a{/*  changes text color when li is hovered*/
	color:#011171;
}

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

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


#mainnav li li {
	display: block;
	height: 45px;
	width: 215px;/* sets the width of the secondary li to the same width at the menu BG*/
	margin-left: 0px;
	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 #sub-menu, #mainnav #donate-menu, #mainnav #grant-menu {
	/* display: none;  reveal dynamically */
}

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


}

@media only screen and (min-width: 811px) and (max-width: 875px) {


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

#topmenu {
}

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

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



}

@media only screen and (min-width: 876px) and (max-width: 1000px) {

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

#topmenu {
}

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

#mainnav ul li a {
	font-size: 13px;
	padding: 0px 5px 0px 5px;
 }
 
#mainnav li li a {
	padding: 2px 0 0 10px;
}	



}