/*
TITLE:      Screen Styles for Hawbridge School
AUTHOR:     Dan Boland, dan@danzigner.com
CREATED:    September 23, 2007
NOTES:      Hand-crafted in Los Angeles, CA
*/

* {margin: 0; padding: 0; }

.alt {display: none; }

body {background: #2c7370 url(../img/body-bg.jpg) top center repeat-y; }

a img {border: 0; }

#wrapper {width: 850px; margin: 0 auto; }

#header {
			width: 850px; 
			height: 200px; 
			background: white url(../img/header-bg.jpg) top center no-repeat; 
		}
		
#menusystem {
			width: 850px;
			height: 36px;
			background: #719997; 
			color: white; 
		}
		
ul#navmenu {
			border: 0 none;
			width: 850px; /*For KHTML*/
			list-style: none; 
			height: 36px; 
		}
		
ul#navmenu li {
			border: 0 none; 
			float: left; /*For Gecko*/
			display: inline;
			list-style: none; 
			position: relative; 
			height: 36px; 
		}
		
ul#navmenu ul {
			border: 0 none;
			width: 300px; 
			list-style: none;
			display: none;
			position: absolute; 
			top: 36px; 
			left: 0; 
		}
		
ul#navmenu ul:after /*From IE 7 lack of compliance*/ {
			clear: both;
			display: block;
			font: 1px/0px serif;
			content: ".";
			height: 0; 
			visibility: hidden; 
		}
		
ul#navmenu ul li {
			width: 260px;
			border-left: 1px solid #2c7370; 
			float: left; /* For IE 7 lack of compliance */
			display: block !important;
			display: inline; /*For IE*/
		}
		
/* Root Menu */
ul#navmenu a {
			padding: 0 15px;
			float: none !important; /*For Opera*/
			float: left; /*For IE*/
			display: block;
			color: white; 
			font: 14px/35px Georgia, serif; 
			text-decoration: none;
			height: auto !important;
			height: 1%; /*For IE*/
		}
		
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
			background: #2c7370; 
		}
		
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
			float: none;
			background: #719997; border-bottom: 1px solid #2c7370; 
		}
		
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {background: #2c7370; border-bottom: 1px solid #2c7370; }

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {background: #719997;  border-bottom: 1px solid #2c7370; }

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {background: #2c7370; border-bottom: 1px solid #2c7370; }

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {background: #719997; border-bottom: 1px solid #2c7370; }

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {background: #2c7370; border-bottom: 1px solid #2c7370; }

ul#navmenu ul ul,
ul#navmenu ul ul ul {
			display: none;
			position: absolute; 
			top: 0; 
			left: 260px; 
		}
		
/* Do Not Move - Must Come before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {display: none; }

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {display: block; }

#splash img {float: left; margin: 0 20px 10px 35px; }

#splash h1 {
			margin-top: 35px; 
			font: 24px/35px Georgia, serif; 
			color: #2c7370; 
		}
		
#splash p {
			font: italic 18px/24px Georgia, serif; 
			color: #666; 
			margin-right: 35px; 
			margin-bottom: 35px; 
		}

.content
			{
			margin: 20px;
			align: center;
			}

.content img
		{
			margin: 5px;
		}
		
#content h1 {
			margin: 20px 35px;
			font: 24px/35px Georgia, serif; 
			color: #2c7370; 
		}
		
#content h2 {
			margin: 20px 0 0 35px; 
			font: italic 18px/24px Georgia, serif; 
			font-weight: normal; 
			color: #2c7370; 
		}
		
#content h3 {
			margin: 20px 0 0 35px;
			font: 18px/24px Georgia, serif; 
			font-weight: normal;
			color: #333; 
		}
		
#content h3 a:link, #content h3 a:visited {color: #2c7370; text-decoration: none; }
#content h3 a:hover {color: #333; text-decoration: underline; }
		
#content p.first {
			margin-top: 0; 
		}
		
#content table {
			margin: 20px 35px; 
			font: 14px/20px Georgia, serif; 
			color: #555; 
			width: auto; 
		}
		
#content table td.left {
			font-weight: bold; 
			text-align: right; 
		}
		
#content table td.right {
			font-weight: normal; 
			text-align: left;
			padding-left: 20px; 
		}

#content p {
			margin: 20px 35px; 
			font: 14px/20px Georgia, serif; 
			color: #555; 
		}
		
#content blockquote {
			margin: 35px; 
			border: 1px solid #2c7370; 
			color: #555;
			width: 465px;
			padding: 15px; 
			font: italic 14px/20px Georgia, serif; 
		}
		
#content p a:link,
#content p a:visited,
#content li a:link,
#content li a:visited {
			color: #2c7370;
			text-decoration: none; 
		}
		
#content p a:hover, #content li a:hover {text-decoration: underline; color: #333; }
		
#content ul {
			margin: 0px 85px; 
			font: 14px/20px Georgia, serif;
			color: #555;
			list-style: circle; 
		}

#content ul li ul {
			margin: 0px 85px; 
			font: 14px/20px Georgia, serif;
			color: #555;
			list-style: circle; 
		}
						
#content p.address {
			text-align: center;
			color: #2c7370; 
			font: 18px/35px Georgia, serif; 
		}
		
#content p.long {width: auto; }

#content p.longclear {width: auto; clear: both; }
		
#content img.right {
			float: right; 
			margin: 0 35px 20px 20px; 
		}
		
#content img.left {
			float: left; 
			margin: 0 20px 20px 35px; 
		}
		
#content img.big {margin: 35px; }
#content img.bignested {margin: 0 0 0 35px; }

#content h3.backtotop {
			width: 10px;
			height: 12px;
			border: none; 
			background: url(../img/up-arrow.gif); 
			margin-left: 35px; 
		}
		
#alert {
		clear: both; 
		text-align: center; 
	}
	
#alert h1 {
		margin-top: 35px; 
		font: 24px/35px Georgia, serif; 
		color: #2c7370; 
	}
	
#alert p{
			margin-top: 0px; 
			font: 14px/20px Georgia, serif; 
			color: #555; 
}

#footer {
			color: #999;
			font: italic 11px/15px Georgia, serif; 
			margin: 35px; 
			text-align: center; 
		}
		
#footer a:link, #footer a:visited {color: #999; }
#footer a:hover {color: #666; }