/*
	The styling for header of content pages and mobile. 
	Currently used in header_consolidated.php
*/

:target::before {
	display: block;
	content: " ";
	height: 56px;
}

header {
	clear: both;
	position: fixed;
	height: 49px;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #fff;
	z-index: 100;
}

div#header_content {
	position: relative;
	height: 49px;
	width: 100%;
	max-width: 996px;
	margin: 0 auto 0 auto;
}

a#logo {
	display: block;
	float: left;
	padding: 6px 0 12px 0;
	width: 140px;
	background: transparent;
}

/* Navigation Menu */
ul#thin_menu {
	position: absolute;
	top: 9px;
	/*clear: both;
	width: 100%;*/
	height: 40px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: transparent;
}

ul#thin_menu li {
	float: left;
	height: 36px;
	margin: 0 6px 0 6px;
	padding: 0;
	line-height: 19px; 
	list-style-type: none;
	font-size: 15px;
}

.menu:link, .menu:visited, .menu:active {
	display: block;
	padding: 7px 3px 7px 3px;
	line-height: 19px; 
	font-weight: bold;
	color: #fff;
}

ul#thin_menu li:hover .menu, .menu:hover {
	background: #879FAC;
}

/* Dropdowns of Main Menu */
ul#thin_menu li ul, ul#mobile_menu li ul {
	display: none;
}

ul#thin_menu li:hover > ul {
	display: block;
	position: absolute;
	min-width: 170px;
	margin: 0;
	z-index: 5;
	background: #678595;
}

ul#thin_menu li:hover > ul li {
	display: block;
	width: auto;
	height: auto;
	float: none;
	margin: 0;
}

ul#thin_menu ul a:link, ul#thin_menu ul a:visited, ul#thin_menu ul a:active,
ul#mobile_menu a:link, ul#mobile_menu a:visited, ul#mobile_menu a:active {
	display: block;
	border-bottom: 1px solid #abbab9;
	padding: 10px 11px 10px 11px;
	font-size: 14px;
	color: #fff;
}

ul#thin_menu ul a:hover, ul#mobile_menu ul a:hover {
	background: #879FAC;
}

ul#thin_menu ul a#logo:hover {
	background: transparent;
}

/* Mobile Menu */
div#mobile_toggle {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
}

div#mobile_toggle img#hamburger {
	float: right;
	vertical-align: middle;
	margin: 9px 0 0 0;
	padding: 5px 8px 5px 5px;
	width: 23px;
}

div#mobile_toggle img#x {
	display: none;
	position: absolute;
	top: 13px;
	right: 8px;
	vertical-align: middle;
	width: 23px;
	background: #435766; 
}

img#hamburger:hover {
	cursor: pointer;
}

/*div#mobile_toggle:hover > img#hamburger {
	display: none;
}*/

div#mobile_toggle:hover > img#x {
	display: block;
}

ul#mobile_menu {
	display: none;
	position: absolute;
	top: 38px;
	right: 0;
	width: 165px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #678595;
}

div#mobile_toggle:hover > ul#mobile_menu {
	display: block;
}

ul#mobile_menu li {
	float: none;
	margin: 0;
	border-bottom: 1px solid #abbab9;
	padding: 0;
	list-style-type: none;
}

ul#mobile_menu a.menu:hover {
	background: #879FAC;
}

/*hide for really narrow screens; show in hamburger menu instead*/
.narrow_hide {
	display: none;
}

@media screen and (min-width: 520px) {
	.narrow_hide {
		display: inline;
	}
}

@media screen and (min-width: 850px) {
	div#mobile_toggle {
		width: auto;
		right: 1px;
	}
	
	div#mobile_toggle img#hamburger, div#mobile_toggle img#x {
		display: none;
	}

	ul#mobile_menu {
		display: block;
		top: 8px;
		right: 0;
		height: 40px;
		width: 440px;
		padding: 0;
		background: transparent;
	}
	
	ul#mobile_menu li {
		float: left;
		height: 36px;
		margin: 2px 8px 0 6px;
		border: 0;
		line-height: 19px; 
	}

	ul#mobile_menu .menu:link, ul#mobile_menu .menu:visited, ul#mobile_menu .menu:active {
		font-size: 14px;
		border-bottom: 0;
		padding: 7px 3px 7px 3px;
	}

	/*show the mobile menu sublinks now that screen is wider*/
	ul#mobile_menu li:hover > ul {
		display: block;
		position: absolute;
		min-width: 170px;
		margin: 0;
		background: #678595;
		z-index: 5;
	}
	
	ul#mobile_menu li:hover > ul li {
		display: block;
		width: auto;
		height: auto;
		float: none;
		margin: 0;
	}
}

@media screen and (min-width: 996px) {
	ul#thin_menu {
		top: 6px;
	}
	
	ul#mobile_menu {
		width: 550px;
		top: 6px;
	}
	
	ul#thin_menu li, ul#mobile_menu li {
		height: 43px;
		margin: 0 12px 0 12px;
	}

	a#logo {
		margin-top: 2px;
	}
	
	ul#mobile_menu .menu:link, ul#mobile_menu .menu:visited, ul#mobile_menu .menu:active,
	.menu:link, .menu:visited, .menu:active {
		padding: 11px 6px 11px 6px;
		font-size: 15px;
	}
}