/* Stylesheet */

body {
  
margin: 10px;
  
padding: 0;
  
background-color: #333333;
  
font-family: tahoma;

font-size: 11pt; 
color: #ffffff;
}

/* h1 to be used as generic bold text anywhere on the page */
body h1 {
font-weight: bold;
font-size: 110%;
}

a.logo {		/* logo on top-right of header */
margin-top: 9px;
width: 185px;
height: 143px;
float: right;
background-image: url(webimage/logo.png);
}


div.fancytxt {		/* fancy lettering image at top-left */
margin-top: 25px;
height: auto;
width: auto;
float: left;
}

/* link formatting */
a:link {

color: #E7D796;
text-decoration: none;
}

a:visited {
  
color: #8D7720;
}

a:hover, a:active {
  
color: #8D7720;
  
}
/* end link formatting */

/* various classes to spiff up text if needed */

.bulletin {			/* puts a yellow box around text */
background-color: #d9c163;
margin: 1em 0 1em 0;
padding: .1em .1em .1em .1em;
color: #8D7720;
}

.roundbox {			/* apply to text in the round box */
color: #d9c163;
font-size: 18px;
text-align: center;
}

.columnul {			/* for UL column layout */
color: #d9c163;
float: left;
width: 100%;
margin: 0 0 0 .7em;
padding: 0 0 .8em 0;
list-style-type: square;
}

.columnli {			/* for LI column layout (use with above) */
color: #fff;
float: left;
width: 25em;
margin: 0;
padding: 0 0 0 0;
}

/* code for a rounded corner box- */

#roundboxcontain {	/* div for defining the round box dimensions */
padding: .2em .5em .2em .5em;
}

.bl {
background: #48658f url(webimage/bl.gif) 0 100% no-repeat;
}

.br {
background: url(webimage/br.gif) 100% 100% no-repeat;
}

.tl {
background: url(webimage/tl.gif) 0 0 no-repeat;
}

.tr {
background: url(webimage/tr.gif) 100% 0 no-repeat;
} 

/* Finished with rounded corner box code */



div#header {
		/* Overflow to hide the fancy logo if the screen is reduced */
height: 152px;
  
background-image: url(webimage/headerslice.png);
  
background-repeat: repeat-x;
overflow: hidden;
}

#logos {
width: 285px;
height: 60px;
float: right;
padding: 5.5em 2em 0 0;
overflow: hidden;
}

/* Various stuff for posting images */

/* For the Outstanding teacher award image.  be sure to set the proper height of the picture. */
p#OTA {
height: 411px;
background-image: url(pictures/tmackley.jpg);
background-position: center center;
background-repeat: no-repeat;
}

p#onlinepd {
height: 50px;
background-image: url(pictures/onlinepd.jpg);
background-position: center center;
background-repeat: no-repeat;
}

/* For other pictures that are sometimes posted on the main page */
p#MISC {
height: 367px;
background-image: url(pictures/BoardRecognition.jpg);
background-position: center center;
background-repeat: no-repeat;
}

p#OTAtext {			/* for centering the text for the OTA */
text-align: center;
font-weight: bold;
}

/* For staff pictures on cursor rollover */
.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail:hover {
background-color: transparent;
z-index: 50;
}

.thumbnail span { 		/* for enlarged image */
position: absolute;
background-color: #333333;
padding: 5px;
left: -1000px;
border: 1px dashed #fff;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img { 		/* for enlarged image */
border-width: 0;
padding: 2px;
}

.thumbnail:hover span { 	/* for enlarged image on hover */
visibility: visible;
top: 0;
left: 60px; 			/* position where enlarged image should offset horizontally */
}

/* This is the container that holds the image for the left navmenu.  (which is nothing more than the lighter hue of blue) The background color is also added for huge wide monitors that overcome the page.png image width.  Since the right column is the same background color, it doesn't matter. */
div#containleft {
  
background-color: #17335d;
background-image: url(webimage/page.png);
  
background-repeat: repeat-y;

}
  
p#onlinepd {
height: 50px;
background-image: url(pictures/onlinepd.jpg);
background-position: center center;
background-repeat: no-repeat;
}

/* and the right side.  We are still using an image, if we specified a background color here it would bleed into the left column.  */
div#containright {
  
background-image: url(webimage/contentslice.png);
  
background-repeat: repeat-y;
  
background-position: right center;
 
}

/* here we are formatting the content for the navbar.  using em's so they will be fluid  */
#navbar {
 
float: left; 
width: 12.1em;
min-width: 100px;
border: 2px solid #000000;
border-bottom: 0px;
margin: 1em 0 0 .3em;
font-family: Dejavu-sans;
background-color: #d9c163;
color: #8d4b20;
}

#navbar ul {

min-width: 100px;
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;  
text-indent: 0em;
font-size: 90%;  
}

#navbar ul li {

min-width: 100px; 
border-bottom: 2px solid #000000;
margin: 0; 
}

#navbar ul li a {
 
display: block;
min-width: 100px;
padding: 5px 0 5px 0.5em;
border-left: 10px solid #E7D796;
border-right: 10px solid #695918;
color: #333333;
text-decoration: none;
}


#navbar ul li a:hover {

border-left: 10px solid #695918;
border-right: 10px solid #352D0D;
background-color: #524512;
color: #d9c163;
}

/* highlight active page in navbar */
body#home a#homenav,
body#products a#productsnav,
body#pd a#pdnav,
body#svl a#svlnav,
body#preschool a#preschoolnav,
body#ac a#acnav,
body#specialed a#specialednav,
body#calendar a#calendarnav,
body#gallery a#gallerynav,
body#staff a#staffnav,
body#forms a#formsnav,
body#links a#linksnav,
body#jobs a#jobsnav,
body#contact a#contactnav,
body#tech a#technav,
body#subs a#subsnav,
body#lpdc a#lpdcnav,
body#learnandserve a#learnandservenav {
background-color: #524512;
border-left: 10px solid #695918;
border-right: 10px solid #352D0D;
color: #d9c163;
}

/* navbar done */

/* Horizontal navbar used for Preschool page (and others possibly in the future) */
#hnav {
padding: .5em;
margin-bottom: .1em;
}

#hnav ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#hnav ul li {
margin-left: 0;
margin-bottom: 0;
padding-top: .2em;
padding-bottom: .2em;
border: 2px solid #000;
background-color: #48658f;
list-style: none;
display: inline;
}

#hnav ul li.here {
border-bottom: 2px solid #17335d;
background-color: #17335d;
list-style: none;
display: inline;
}

#hnav ul li a {
color: #ffffff;
padding: .2em .8em .2em .5em;
}

#hnav ul li a:hover {
background-color: #333333;
}


/* right side, going to basically be the same as the center. */

div#rightcontent {

width: 160px; 
margin-top: 10px;
  
padding: 0 5px 20px 10px;
float: right;
  
color: #FFFFFF;
border-style: dotted;
border-width: 1px;
border-color: #17335d #17335d #17335d #FFFFFF;
}

#rightcontent ul li {			/* for the firefox button, also to 
*/

margin-left: -1.8em;			/* stretch the screen downward     */
list-style-type: none;
font-size: 80%;
padding-top: 75%;
color: #FFFFFF;
}

#rightcontent li a:hover {		/* to remove the hover effect on the button */
background-color: #17335d;
}

#rightcontent p {
font-size: 80%;
}

div#rightcontent h3 {
  
padding: 0;
  
margin-top: 0px;
  
color: #d9c163;
font-weight: normal;
}
/* end of right side */

/* and the center content */

div#center {
  
margin: 0 195px 0 190px;
  
padding: 0 0 20px 10px; 
}

.yellowbullet {		/* yellow highlight with square bullet */
list-style-image: url(webimage/bullet.png);
margin-left: .7em;
font-size: 20px;
color: #d9c163;
}

div#center h5 {			/* container when using rounded box */
padding: .5em .5em .5em .5em;
color: #d9c163;
font-size: 120%;
font-weight: normal;
text-align: center;
}

div#center h2 {
  
margin: 0;
  
padding-top: 10px;
padding-bottom: 10px; 
font-weight: normal;
color: #d9c163;
}

/* end of center */

/* IE 5 and 5.5 fix, basically an empty div to clear the floats but still be in the container so the background image will tile */
#cleardiv {
  		
clear: both;
height: 1em;
}

div#footer {


clear: both;
width: auto;
height: 50px;
color: #333333;
 
background-color: #d9c163;
border-width: 2px;
border-style: solid;
border-color: #524512;
padding-right: 5px;
}

#footer a:hover {
background-color: #ecb18b;
}

#footer ul li {
list-style-type: none;
text-align: right;
margin-top: 15px;
padding-right: .5em;
}