/* 
 * By default, the header class "logo" extends across the entire page and
 * displays the logo centered at a small size. As the screen size increases,
 * the logo is shifted to the left, with the title of the site floated next
 * to it. Eventually, the logo image displays at full size. In print format,
 * the logo and page title are shrunk back down to fit on a portrait size
 * page.
 * 
 * The top menu does some pretty neat things, changing its appearance and
 * screen real estate percentage based on the size of the screen. It does
 * not print.
 */

header.logo {
	width: 100%;
	}

	header div.logo {
		width: 125px;
		max-width: 100%;
		margin: 10px auto 0 auto;
		}

			header div.logo img {
				width: 125px;
				}

@media (min-width: 600px) {
	header div.logo {
		float: left;
		}
}

@media (min-width: 700px) {
	header div.logo {
		max-width: 100%;
		text-align: center;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		}
}


@media (min-width: 892px) {
	header div.logo {
		width: 191px;
		text-align: center;
		float: left;
		}

		header div.logo img {
			width: 191px;
			text-align: center;
			}
}



	header div.pagetitle {
		}

		header div.pagetitle h1 {
			margin: 0;
			padding: 0;
			}

@media (min-width: 600px) {
	header div.pagetitle {
		width: calc(100% - 125px);
		max-width: 100%;
		text-align: center;
		float: left;
		margin-top: 25px;
		}
		
		header div.pagetitle img {
			max-width: 100%;
			}
}


@media (min-width: 700px) {
	header div.pagetitle {
		width: 716px;
		max-width: calc(100% - 221px);
		text-align: center;
		float: left;
		margin-top: 40px;
		}
}

		header div.pagetitle img {
			width: 716px;
			max-width: 100%;
			}





div.top-menu {
	width: calc(100% - 24px);
	padding: 4px 12px;
	background-color: #9e4f11;
	color: #cad49d;
	margin-top: 10px;
	}

	div.top-menu ul {
		list-style-type: none;
		text-indent: 0;
		padding: 0;
		margin: 0 0 0 15px;
		display: block;
		}

		div.top-menu ul li {
			font-size: 150%;
			font-family: 'Oxygen', sans-serif;
			}

@media (min-width: 600px) and (max-width: 892px) {
	div.top-menu ul li {
		width: 210px;
		float: left;
		}
}


@media (min-width: 893px) {
	div.top-menu ul li {
		padding: 0 15px;
		float: left;
		font-size: 170%;
		}

		div.top-menu ul li:first-child {
			padding-left: 0px !important;
			}

	span.noshow {
		display: none;
		}

}


	div.top-menu a, div.top-menu a:visited {
		color: #cad49d;
		text-decoration: none;
		}


	div.top-menu a:hover {
		color: #339999;
		}

@media print {
	div.top-menu {
		display: none;
		}
}