/* 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 */

body, h1, h2, h3, p, td, span {
	font-family : "Lucida Sans", Verdana, sans-serif;
	font-size: 12px;
	
}

/* html tags */

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

	}

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

	}

a:hover	{
	color : #90601F;
	font-weight : bold;
	text-decoration : underline;
	
}

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

}

body {
	background-color : #ffffff;
	text-align: left;
}

h1 {
	color : #516239;
	font-size : 24px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;


}

h2 {
	color : #516239;
	font-size : 14px;
	font-weight : bold;
	margin-top : 5px;
	margin-bottom : 0px;


}


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

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

/* classes */


.italic {
	font-style : italic;
}
 
.photo {
	background-color : #6B824B;
	text-align:center;
	color : #FFFFFF;
	font-size : 11px;
	padding: 5;

}

.caption {
	text-align:center;
	color : #FFFFFF;
	font-size : 11px;
	padding: 2;

}


/* 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:790px;
 	z-index:1;
 	margin-left:-395px;
 	left: 50%;
 	height: 100%;
	
}


#top{
	position:absolute;
	left:0px;
	top:0px;
	overflow: visible;
	}
	

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


#text_only{ 
	position:relative;
	top:10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:80px;

}


#bottom_row{
	position:relative;
	bottom:75px;
	width:100%;
	
}

#footer{
	position:absolute;
	bottom:0px;
	width:100%;
	height:75px;
	background-color : #90601F;
	color : #FFFFFF;
	font-size : 8px;
	text-align : center;
	overflow: visible;
}