@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}

body{
	background: #350000 url(../imgs/body-bg.png) repeat-x top center;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size:100%;  equal to 16px default */ 
    font-size: 10pt;
	line-height:1.125em; /* 16 / 18 = 1.125 */
	text-align: center;
}

/*common style*/
ul,ol,blockquote{ padding-left: 45px; margin: 10px 0 10px 0; }
a:link,a:visited{ text-decoration: underline; outline-style: none; -moz-outline-style: none }
/*a:hover,a:focus{ text-decoration: none }*/
a img{ border: none; }
.clear{clear: both;}
.hide-text{text-indent: -9999px;}
.uppercase{ text-transform: uppercase }
.font-10{ font-size: 0.625em } /* 10 / 16 = 0.625 */
.font-12{ font-size: 0.75em }
.font-14{ font-size: 0.875em }
.font-bold{ font-weight: bold; color: #B8854E; }
.color-white{ color: #fff }
.margin-left-10{ margin-left: 10px }
.margin-right-15{ margin-right: 15px }
.margin-bottom-10{ margin-bottom: 10px }
.margin-bottom-5{ margin-bottom: 5px }
.padding-right-8{ padding-right: 8px }
.padding-left-25{ padding-left: 25px }
.border-1{ border-bottom: 1px solid #000 }
.font-italic{ font-style: italic; }
.float-left{ float: left; }
.float-right{ float: right; }
.text-center{ text-align: center; }
img.float-left{ float: left; margin: 0px 10px 0px 0; border: 1px solid #061831;} 
img.float-right{ float: right; margin: 0px 0 0px 10px; border: 1px solid #061831;}
/*common style end*/  

#wrapper{ margin: 0 auto; width: 836px; text-align:left; padding-top: 22px }

#top{ background: url(../imgs/top-bg.png) no-repeat top; height: 85px }
	#top h1{ width: 397px; float: left }
	#top ul{ float: right; margin: 0; padding: 8px 5px 0 0 }
		#top ul li{ float: right; list-style-type: none }
		#top ul li a{ display: block; height: 77px; text-indent: -9999px }
		
			a#jefferson{ background: url(../imgs/menu-jefferson.png) no-repeat top; width: 55px }
			a#jefferson:hover, a#jefferson.active{ background-position: bottom }
			
			a#lettiebrown{ background: url(../imgs/menu-lettiebrown.png) no-repeat top; width: 42px }
			a#lettiebrown:hover, a#lettiebrown.active{ background-position: bottom }
			
			a#lincoln{ background: url(../imgs/menu-lincoln.png) no-repeat top; width: 55px }
			a#lincoln:hover, a#lincoln.active{ background-position: bottom }
			
			a#grundy{ background: url(../imgs/menu-grundy.png) no-repeat top; width: 55px }
			a#grundy:hover, a#grundy.active{ background-position: bottom }
			
			a#mjhs{ background: url(../imgs/menu-mjhs.png) no-repeat top; width: 55px }
			a#mjhs:hover, a#mjhs.active{ background-position: bottom }
			
			a#mhs{ background: url(../imgs/menu-mhs.png) no-repeat top; width: 55px }
			a#mhs:hover, a#mhs.active{ background-position: bottom }
			
			a#district{ background: url(../imgs/menu-district.png) no-repeat top; width: 55px }
			a#district:hover, a#district.active{ background-position: bottom }
			
			a#weblinks{ background: url(../imgs/menu-weblinks.png) no-repeat top; width: 50px }
			a#weblinks:hover, a#weblinks.active{ background-position: bottom }

#banner{ height: 287px }

div#nav{ background: url(../imgs/nav-bg.png) no-repeat top; height: 53px }
	ul#nav{ margin: 0; padding: 0; padding-left: 5px }
		ul#nav li{ float: left; list-style-type: none }
		ul#nav li a{ display: block; height: 53px }
			a#home{ background: url(../imgs/nav-home.gif) no-repeat top; width: 36px; }
			a#home:hover, a#home.active{ background-position: bottom }
			
			a#contact{ background: url(../imgs/nav-contact.gif) no-repeat top; width: 113px; }
			a#contact:hover, a#contact.active{ background-position: bottom }
			
			a#about{ background: url(../imgs/nav-about.gif) no-repeat top; width: 161px } 
			a#about:hover, a#about.active{ background-position: bottom }
			
			a#elementary{ background: url(../imgs/nav-elementary.gif) no-repeat top; width: 118px }
			a#elementary:hover, a#elementary.active{ background-position: bottom }
			
			a#juniorhigh{ background: url(../imgs/nav-juniorhigh.gif) no-repeat top; width: 126px }
			a#juniorhigh:hover, a#juniorhigh.active{ background-position: bottom }
			
			a#highschool{ background: url(../imgs/nav-highschool.gif) no-repeat top; width: 128px }
			a#highschool:hover, a#highschool.active{ background-position: bottom }
			
			a#subscriptions{ background: url(../imgs/nav-subscriptions.gif) no-repeat top; width: 140px }
			a#subscriptions:hover, a#subscriptions.active{ background-position: bottom }
			
#doc-body{ background: url(../imgs/doc-body-bg.png) repeat-y; padding-left: 5px }
	#doc-body-left, #doc-body-right{ min-height: 592px; height: auto!important; height: 592px }
	
	#doc-body-left h3{ font-size: 1em; line-height: 26px; color: #6c0a0a; text-transform: uppercase }
	/*#doc-body-left p{ font-size: 0.75em; }*/
	
	#doc-body-left{ width: 250px; float: left }
        #doc-body-left-top{ 
            background: url(../imgs/sidebar-top.png) no-repeat top; 
            height: 91px; /*line-height: 14px;*/
            padding: 20px 20px 5px 20px;  
        }
            span#phone{ margin-left: 33px }
            span#fax{ margin-left: 50px }
            span#email{ margin-left: 40px }
        #doc-body-left-bottom{ background: url(../imgs/sidebar-bottom.png) no-repeat top; min-height: 100px; height: 1% }
            #doc-body-left-bottom h3{ padding: 20px 0 0 20px }
            div.text{ 
                background: url(../imgs/sidebar-shade-bg.png) no-repeat top center; 
                min-height: 50px; height: auto!important; height: 50px; 
                padding: 5px 20px 0 20px;
            }
        
    #doc-body-right{ background: url(../imgs/text-area-bg.jpg) no-repeat top; width: 581px; float: right }
        h2#page-title{ padding-left: 5px }
        #doc-body-text{ padding: 0 20px 50px 30px; line-height: normal; }
        #doc-body-text p{ margin-bottom: 10px; }
        #doc-body-text img{ margin: 3px; }
    #doc-body-footer{ background: url(../imgs/doc-body-footer.png) no-repeat top; height: 20px }
    
#story-boxes{ background: url(../imgs/story-boxes-bg.png) no-repeat top; height: 167px; padding: 0 0 0 7px; color: #fff }
	div.box{ height: 142px; overflow: hidden; float: left; padding: 15px 10px 10px 10px; }
	div#box1{ width: 252px; }
	div#box2{ width: 261px; }
	div#box3{ width: 250px; }
	h3.story{ font-size: 1.1em; line-height: 20px; text-transform: uppercase }

#footer{ background: url(../imgs/footer-bg.png) no-repeat top; height: 41px; }
	#footer a{ display: block; float: left; height: 41px; text-indent: -9999px }
	a#click4forms{ width: 207px }
	a#visit-weblinks{ width: 214px }

#cybernaut{ 
    background: url(../imgs/cybernautic-logo.png) no-repeat top center; 
    height: 66px; margin-bottom: 10px; 
}
    #cybernaut h1 a{ margin: 0 auto; width: 341px; height: 66px; display: block; text-indent: -9999px; }

/*form validation*/            
div#form label.error, label.error { color:red; display:block; font-size:10px; }
div#result{ position: relative; }