*{
    margin: 0;
    padding: 0;
}

body{
    background: #2A0000 url(../img/body-bg.png) repeat-x top center;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px; /* equal to 16px default */ 
    line-height:140%; /* 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: underline }
a img{ border: none; }
.clear, .clr{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;}
img{ max-width: 100%; }
/*common style end*/  

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

#top{ background: url(../img/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(../img/menu-jefferson.png) no-repeat top; width: 55px }
            a#jefferson:hover, a#jefferson.active{ background-position: bottom }
            
            a#lettiebrown{ background: url(../img/menu-lettiebrown.png) no-repeat top; width: 42px }
            a#lettiebrown:hover, a#lettiebrown.active{ background-position: bottom }
            
            a#lincoln{ background: url(../img/menu-lincoln.png) no-repeat top; width: 55px }
            a#lincoln:hover, a#lincoln.active{ background-position: bottom }
            
            a#grundy{ background: url(../img/menu-grundy.png) no-repeat top; width: 55px }
            a#grundy:hover, a#grundy.active{ background-position: bottom }
            
            a#mjhs{ background: url(../img/menu-mjhs.png) no-repeat top; width: 55px }
            a#mjhs:hover, a#mjhs.active{ background-position: bottom }
            
            a#mhs{ background: url(../img/menu-mhs.png) no-repeat top; width: 55px }
            a#mhs:hover, a#mhs.active{ background-position: bottom }
            
            a#district{ background: url(../img/menu-district.png?v=2) no-repeat top; width: 55px }
            a#district:hover, a#district.active{ background-position: bottom }
            
            a#weblinks{ background: url(../img/menu-weblinks.png) no-repeat top; width: 50px }
            a#weblinks:hover, a#weblinks.active{ background-position: bottom }

#banner{ height: 287px }

div#nav{ background: url(../img/nav-bg.png) no-repeat top; height: 53px }
    #nav 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; text-indent: -9999px; }
            a#home{ background: url(../img/nav-home.gif) no-repeat top; width: 24px } 
            a#home:hover, a#home.active{ background-position: bottom }
            
            a#contact{ background: url(../img/nav-contact.gif) no-repeat top; width: 27px } 
            a#contact:hover, a#contact.active{ background-position: bottom }
            
            a#about{ background: url(../img/nav-about.gif) no-repeat top; width: 59px } 
            a#about:hover, a#about.active{ background-position: bottom }
            
            a#admin{ background: url(../img/nav-admin.gif) no-repeat top; width: 137px }
            a#admin:hover, a#admin.active{ background-position: bottom }
            
            a#about{ background: url(../img/nav-about.gif) no-repeat top; width: 59px }
            a#about:hover, a#about.active{ background-position: bottom }
            
            a#board{ background: url(../img/nav-board.gif) no-repeat top; width: 172px }
            a#board:hover, a#board.active{ background-position: bottom }
            
            a#emp{ background: url(../img/nav-employment.gif) no-repeat top; width: 109px }
            a#emp:hover, a#emp.active{ background-position: bottom }
            
            a#schools{ background: url(../img/nav-schools.gif) no-repeat top; width: 78px }
            a#schools:hover, a#schools.active{ background-position: bottom }
            
            a#parents{ background: url(../img/nav-parents.gif) no-repeat top; width: 75px }
            a#parents:hover, a#parents.active{ background-position: bottom }
            
            a#staff{ background: url(../img/nav-staff.gif) no-repeat top; width: 53px }
            a#staff:hover, a#staff.active{ background-position: bottom }
            
            a#accolades{ background: url(../img/nav-accolades.gif) no-repeat top; width: 93px }
            a#accolades:hover, a#accolades.active{ background-position: bottom }
            
#doc-body{ background: url(../img/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: #EF3A42; text-transform: uppercase }
    #doc-body-left{ font-size: 0.85em; line-height: 140%; }
    
    #doc-body-left{ width: 250px; float: left }
        #doc-body-left-top{ 
            background: url(../img/sidebar-top3.png) no-repeat top; 
            padding: 20px 20px 5px 20px;  
        }
            #doc-body-left-top span{ display: inline-block; width: 60px }
            
        .doc-body-separator{
            background: url(../img/sidebar-separator.png) no-repeat;
            width: 250px;
            height: 24px;
        }
        .doc-body-separator2{
            background: url(../img/sidebar-separator2.png) no-repeat;
            width: 250px;
            height: 24px;
        }
        .another-box{
            background: url(../img/sidebar-repeat-bg.png) repeat-y;
            padding: 0px 20px; 
        }
        
        #doc-body-left-bottom{ 
                __background: url(../img/sidebar-bottom.png) no-repeat top; 
                min-height: 100px; height: auto!important; height: 100px;
                line-height: normal;
        }
            #doc-body-left-bottom h3{ padding: 0px 0 0 20px }
            div.text{ 
                background: url(../img/sidebar-shade-bg.png) no-repeat top center; 
                min-height: 50px; height: auto!important; height: 50px; 
                padding: 5px 20px 0 20px;
            }
            div.text p{ margin-bottom: 10px; }
        
    #doc-body-right{ background: url(../img/text-area-bg.jpg) no-repeat top; width: 581px; float: right }
    #doc-body-right.block{ padding: 100px 50px 50px 30px; width: 496px; background-color: #fff; }
    
        #doc-body-right p{ margin-bottom: 1em; }
        h2#page-title{ padding-left: 5px }
        #doc-body-text{ padding: 0 50px 50px 30px; line-height: normal; }
        #doc-body-text p{ margin-bottom: 10px; }
        #doc-body-text img{ margin: 3px; }
    #doc-body-footer{ background: url(../img/doc-body-footer.png) no-repeat top; height: 20px }

#story-boxes{ background: url(../img/story-boxes-bg.png) no-repeat top; height: 167px; padding: 0 0 0 7px; color: #fff; font-size: 12px; }
    div.box{ height: 142px; overflow: hidden; float: left; padding: 15px 10px 10px 10px; line-height: normal; }
    div#box1{ width: 252px; }
    div#box2{ width: 261px; }
    div#box3{ width: 250px; }
    h3.story{ font-size: 100%; text-transform: uppercase; line-height: normal; margin-bottom: 5px; }
    
    h3.story a{ text-decoration: none; color: #fff; }
    h3.story a:hover{ color: blue }

#footer{ background: url(../img/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(../img/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; }                  

/*addon*/
ul#board_menu{
    border: 5px solid #262626;
    border-top: 3px solid #262626;
    border-bottom: 3px solid #262626;
    list-style-type: none;
    margin: 5px 0 10px 0;
    padding: 0;
    width: 200px;
}
    ul#board_menu li{
        border-top: 2px solid #262626;
        border-bottom: 2px solid #262626;
        padding: 3px 0 3px 0;
    }
        ul#board_menu li a{
            background-color: #F0F0F0;
            color: #000;
            display: block;
            text-decoration: none;
            padding: 3px;
        }
        ul#board_menu li a:hover, ul#board_menu li a.active{text-decoration:none; background-color: #fff; color: #cc0000 }

table.LeftAlignedText a{ text-decoration: none; text-align: left; }

 #footer-logo-link {
    display:block;
    width:418px;
    height:86px;
    background-image:url(../img/bottom-tag.gif);
    text-indent:-9999px;
    margin-left:auto;
    margin-right:auto;
}

#doc-body-left .cse .gsc-search-button input.gsc-search-button-v2, 
#doc-body-left input.gsc-search-button-v2 {
    padding: 6px 10px; margin-top: 0px;
}
#doc-body-left .gsc-search-box-tools .gsc-search-box .gsc-input {
    padding-right: 0px;
    font-size: 12px;
}

.gsc-search-button{ vertical-align: middle; }

#sidebar.block{ background: #fff; padding: 20px; }

#login-form{
  
}
  #login-form input[type=password] {
      width: 240px;
      padding: 4px;
      margin-top: 5px;
      border: 1px solid #222;
      background: #eee;
  }
  
  #login-form input[type="submit"] {
    padding: 2px 10px;
  }
  
  #login-form .contact-form-message{ font-size: 12px; }
  #login-form .contact-form-message.error{ color: red }