/*

page header = margin-top:4em; for mobile, 0 for desktop

*/
.gridContainer {
	padding-top:3em;
}


#mobileHeader	{
	background-color:#ccc;
	/*
	border-bottom-left-radius:0.5em;
	border-bottom-right-radius:0.5em;
	*/
}

#mobileMenuToggle	{
	display:block;	
	padding-top:0.75em;
	padding-bottom:0.75em;
}

#mobileHeader a	{
	text-decoration:none;	
	color:#999;
}

#mobileHeader a span	{
	border:1px solid #999;
	border-radius:0.2em;
	padding:0.1em 0.5em;
}

#mobileHeader a:hover	{
	color:black;
}


#mobileHeader p	{
	text-align:right;
	padding-right:2%;	
	
}

#mobileHeader .homeButtonWrapper {
	width:17%;
	margin-left:3%;
	display:inline-block;
	text-align:left;
	float:left;
}
#mobileHeader .menuDDWrapper {
	width:75%;
	display:inline-block;
	padding-right:5%;
}

#mobileMenuWrapper	{
	display:none;
	position:fixed;
	top:3.5em;
	z-index:1000;	
	width:95%;	/* set to width of mobile screen in responsive css */
	left:2.5%;	/* set to width of mobile screen in responsive css */
	background-color:white;
	opacity:0.95;
	margin:0;
	padding:0;
}

#mobileMenuWrapper li	{
	list-style-type:none;
	text-align:left;
	padding:0.2em;
}

#mobileMenuWrapper li a	{
	display:block;
	padding:0.75em 1.5em;
	font-size:1em;
	text-decoration:none;
	background-color:#b26527;
	color:white;
	font-weight:bold;
}

#mobileMenuWrapper li a:focus,
#mobileMenuWrapper li a:hover	{
	background-color:#e46c0a;
}

/* - media="print" stylesheet only */
/*
.noPrint	{
	display:none;
}
*/

/*RESPONSIVE STYLES BELOW*/

/* Mobile Layout: 480px and below. */
#mobileHeader {
	clear: both;
	float: left;
	margin-left: 0;
	display: block;
	text-align: center;
	position:fixed;
	top:0;
	z-index:9999;
	width:100%;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
	.gridContainer {
		padding-top:3em;
	}

	#mobileHeader {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		
		display:block;
		position:static;
		/* OR
		REMOVE height:1px;
		display:block;
		position:static;
		*/
	}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
	.gridContainer {
		padding-top:0;
	}

	#mobileHeader {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height:1px;
		display:none;
	}
}


@media print {
	#mobileHeader	{
		display:none;
	}
	
	.gridContainer {
		padding-top:0;	
	}
}