/* created  2006 by WoW! Graphic Designs. Duplication or redistribution is strictly prohibited. */

/* since mostly the same font is used throughout a site, to be able to change it faster you can have a font-family only tag for all */


html, body {
	height: 100%;
}

body, h1, h2, h3, p, td, span {
	font-family : "Georgia", Times, serif;
	font-size: 13px;
}

/* html tags */

a:link	{
	color : #AA0D0A;
	text-decoration : none;
	font-weight: bold;

	}

a:visited {
	color : #AA0D0A;
	text-decoration : none;
	font-weight : bold;

	}

a:hover	{
	color : #808080;
	text-decoration : underline;
	font-weight : bold;

}

a:active {
	color : #000000;
	font-weight : bold;
	text-decoration : none;

}


body {
	text-align: left;
	background: #006400;
}

h1 {
	color : #AA0D0A;
	font-size : 20px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;
	margin-left : 10px;
	margin-right : 10px;


}

h2 {
	color : #AA0D0A;
	font-size : 14px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;
	height: 100%;
	margin-left : 10px;
	margin-right : 10px;



}

h3 {
	color : #006400;
	font-size : 14px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;
	height: 100%;
	margin-left : 10px;
	margin-right : 10px;



}

h5 {
	color : #ffffff;
	font-size : 14px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;
	height: 100%;
	margin-left : 10px;
	margin-right : 10px;



}



p {
	color : #000000;
	line-height: 150%;
	font-size : 10pt;
	text-decoration : none;
	margin-top : 12px;
	margin-bottom : 0px;
	margin-left : 10px;
	margin-right : 10px;
	
	}

ul {
	color : #000000;
	font-size : 10pt;
	text-decoration : none;
	margin-top : 2px;
	margin-bottom : 0px;
}


blockquote {
	width: 300px;
	float: center;
	margin: 0px;
	padding: 5px;
	color: #AA0D0A;
	background-color: #FFFFFF;
	font-size : 12px;
	font-style: italic;
	quotes: "\201C" "\201D";
}

blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }



/* classes */

.italic {
	font-style : italic;
}


.smlink a {
	color : #AA0D0A;
	text-decoration : none;
	font-size: 10px;
	font-weight: normal;

	}
	
.smlink a: hover {
	color : #808080;
	text-decoration : underline;
	font-size: 10px;
	font-weight: normal;

	}

.smlink a: active {
	color : #AA0D0A;
	text-decoration : none;
	font-size: 10px;
	font-weight: normal;

	}

.smlink a: visited {
	color : #AA0D0A;
	text-decoration : none;
	font-size: 10px;
	font-weight: normal;

	}
.footer {
	font-size : 10px;
	color : #007E3A;
	text-align: center;
}


/* layers (div) 
"container" just holds everything else, manages width of page content. Like table is relative to its cells.
"content" does the same for the lower part of the page, otherwise it's hard to keep everything in place with the footer for some reason. This allows the most flexibility when resizing a browser window.
There are 4 text box varieties. 3 columns, only text column, announce + text, text + image.
You simply change the id of the center (text) div on each page depending on having a right image or not, the image is in one div, announcements are in one, just empty them for no content.
*/


#container{
	position:absolute;
 	width:640px;
 	z-index:1;
 	margin-left:-395px;
 	left: 50%;
 	height: 100%;
 	
}


#top{
	position:absolute;
	left:0px;
	top:0px;
	overflow: visible;
	}
	
#menubar{
	position:absolute;
	top:119px; 
	width:100%; /* width relative to the container div outside, not relative to browser */
	height:30px;
	background-color : #D0AB64; /* background color of menu bar */

	
}

#button { /* properties of the div holding all the buttons inside it */
	color: #FFFFFF;
	position:absolute;
	margin:3px 10px 3px 10px; /* top right bottom left */
	width:790px;
	text-align:center;
	margin-left:-405px;
	left: 50%;
	}
	
	
#button a:link { 
	color: #FFFFFF;
	text-decoration: none;
				}

#button a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	margin-top:3px;
	background-color: none;

}

#button a:visited {
	color : #FFFFFF;
	font-weight : bold;
	text-decoration : none;

	}
	
}

#button a:active {
	color: #FFFFFF;
	text-decoration : none;

}


#menudiv{ /*background color is set in the .js*/
	position:absolute;
	font-size : 8pt;
	border:1px solid #000000;
	z-index:100;
	margin-left: 0px;
	margin-top: 3px;
	padding: 3px;
	line-height: 165%;
	width:100px;
	
}

#menudiv a:link{ /* have to make special link properties for dropdown or it takes its cue from your normal a:link etc. which you may want underlined in the text */
	width:100%;
	color : #990000;
	font-weight : bold;
	text-decoration : none;
	
	
}

#menudiv a:hover{ 
	width:100%;
	background-color: #FFFFFF;
	color: #CC6600;
	text-decoration: none;


}

#content{
	position:absolute;
	top:10px; /* position from top of browser + logo + menu height */
	width:	100%;
	text-align:left;

}


#left{
	position:absolute;
	top:0px;
	left:0px;
	width:150px;
	background-color : #FFFFFF;
	overflow: visible;


}

#middle{ 
	position:relative; /* if the middle div is not relative, it will not wrap text */
	top:10px;
	margin-left: 160px;
	margin-right: 179px;
	background-color : #FFFFFF;
	margin-bottom:25px;
	overflow:visible;



	}

#middle_wide{ 
	position:relative; /* if the middle div is not relative, it will not wrap text */
	top:10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:25px;
	overflow:visible;


	}

#right{
	position:absolute;
	right:0px;
	top:20px;
	width:150px;
	background-color : #FFFFFF;
	height:100%;
	overflow: visible;

	}

#footer{
	position:relative;
	bottom:0px;
	width:790px;
	background-color:#ffffff;
	border-top: 1px black;
	overflow: visible;

}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:650px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:600px; height:300px; padding:2px; border:1px solid #ccc; background:#EFEED4}
#information {position:absolute; bottom:0; width:600px; height:50; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:650px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:406px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url('images/left.gif') no-repeat left center; }
#imgnext {right:0; background:url('images/right.gif') no-repeat right center; }
#imglink {position:absolute; height:406px; width:650; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url('images/link.gif') no-repeat center; }
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:#222 url('images/scroll-left.gif') no-repeat center; }
#slideleft:hover {background-color:#EFEED4}
#slideright {float:right; width:20px; height:81px; background:#222 url('images/scroll-right.gif') no-repeat center; }
#slideright:hover {background-color:#EFEED4}
#slidearea {float:left; position:relative; width:650px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}