/*	The HHS, Health Options website is built on HTML5. We’re proud to support web standards.

	We also want to share what we’ve learned. Although the basic design of this site, as
	well as all written content, photographs, and logos are the copyright property of
	HHS, Health Options, the HTML and CSS code for this site is licensed under a Creative
	Commons BSD license (http://creativecommons.org/licenses/BSD). Share alike and give it away. */

/*	This is the main stylesheet for the hhshealthoptions.org website. The design and styling of
	this site are built on the philosophy of minimizing ID and class specification whenever
	possible, in favor of using broad element styles through the use of selector specificity. */

@media all {
	/*	Zero out padding, margins, and borders on all elements. */
	* {
		margin: 0; padding: 0; border: 0; }

	a:link,
	a:visited {	
		color: #888502;
		text-decoration: none; }

	ol,
	ul {
		padding-left: 2.5em; }
}


@media screen {
	/*	Basic typographical styles. */
	p, li {
		color: #54380a;
		font: 9pt/14pt Arial, Helvetica, sans-serif; }


	/*	Basic elements. */
	a:hover, a:active {
		color: black;
		text-decoration: none; }

	body {
		background-color: #888502; }

	div#wrap {
		width: 842px;
		margin: 0 auto; }

	div#content {
		padding-bottom: 14px;
		background: #fff url('http://hhshealthoptions.org/images/ripples.png') no-repeat left bottom; }

	div#header {
		background: url('http://hhshealthoptions.org/images/header.jpg') no-repeat;
		width: 842px;
		height: 157px; }

	div#footer {
		background: url('http://hhshealthoptions.org/images/footer.jpg') no-repeat;
		width: 842px;
		height: 150px; }

	div#mainContent {
		min-height: 200px;
		margin-left: 250px;
		background: #fff; }

	div#title_div {
		position: relative;
		width: 256px;
		height: 26px;
		left: 560px;
		top: 120px;
		color: #ffffd0;
		font: 18pt serif;
		font-style: italic;
		text-align: right; }

	p {
		margin: 20px 20px 20px 0; }

	h1 {	
		font: bold 14pt Arial, Helvetica, sans-serif;
		color: #888502;
		margin: 1em 0; }

	h2 {
		font: 12pt Arial, Helvetica, sans-serif;
		color: #996533;
		margin-bottom: 1em; }

	h3 {
		font: 10pt Arial, Helvetica, sans-serif;
		color: #888502;
		margin-bottom: 1em; }

	li {
		color: #543802;
		padding-bottom: 8px; }


	/* Front-page menu */
	ul#mainMenu {
		position: absolute;
		top: 188px;
		width: 180px; }

	ul#mainMenu li {
		list-style: none;
		padding: 0 0 5px 0; }

	ul#mainMenu li a:link,
	ul#mainMenu li a:visited {
		color: #888502; }

	ul#mainMenu li.servicesItem {
		font: 14pt bold Arial, Helvetica, sans-serif;
		margin-bottom: 20px; }

	ul#servicesMenu li {
		background: #d8d89d;
		padding: 3px 0 3px 10px;
		list-style: none;
		border-bottom: 1px solid white; }

	ul#resourcesMenu li {
		background: #d8d89d;
		padding: 3px 0 3px 10px;
		list-style: none;
		border-bottom: 1px solid white; }

	ul#servicesMenu li a:link,
	ul#servicesMenu li a:visited,
	ul#resourcesMenu li a:link,
	ul#resourcesMenu li a:visited {
		color: #543802;
		text-decoration: none; }

	ul.menuPopup {
		display: block;
		position: absolute;
		margin-left: 150px;
		margin-top: 189px;
		width: 200px; 
		z-index: 2; }

	ul.hidden {
		display: none; }	


	/* Page menus */
	ul#leftMenu {
		position: absolute;
		top: 225px;
		width: 180px; }

	ul#leftMenu li {
		list-style: none;
		padding: 0 0 5px 0; }

	ul#leftMenuServices li {
		background-color: #d8d89d;
		padding: 3px 0 3px 10px;
		list-style: none;
		border-bottom: 1px solid white; }

	ul#leftMenuResources li {
		background-color: #d8d89d;
		padding: 3px 0 3px 10px;
		list-style: none;
		border-bottom: 1px solid white; }

	ul#leftMenuServices li a:link,
	ul#leftMenuServices li a:visited,
	ul#leftMenuResources li a:link,
	ul#leftMenuResources li a:visited {
		color: #543802;
		text-decoration: none; }

	ul.leftMenuPopup {
		display: block;
		position: absolute;
		margin-left: 150px;
		margin-top: 65px;
		width: 200px;
		z-index: 2; }


	/* Top menu */
	p#topMenu {
		margin-top: 0;
		text-align: center;
		background: #996533;
		height: 20px;
		width: 100%; }

	p#topMenu a:link,
	p#topMenu a:visited {
		color: #ffffd0; }

	p#topMenu a:hover,
	p#topMenu a:active {
		color: #deb887;	}
}