/* 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, ul {

	font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

	font-size: 13px;

}



/* html tags */



a:link	{

	color : #960A64;

	font-weight : bold;

	text-decoration : none;



	}



a:visited {

	color : #960A64;

	font-weight : bold;

	text-decoration : none;



	}



a:hover	{

	color : #960A64;

	font-weight : bold;

	text-decoration : underline;

	

}



a:active {

	color : #960A64;

	font-weight : bold;

	text-decoration : none;



}



body {

	background-color : #600637;

	text-align: left;



}



h1 {

	color : #600637;

	font-size : 17px;

	font-weight : bold;

	margin-left: 10px;

	margin-right: 5px;

	margin-top : 5px;

	margin-bottom : 0px;





}



h2 {

	color : #600637;

	font-size : 13px;

	font-weight : bold;

	margin-top : 5px;

	margin-bottom : 0px;

	margin-left: 10px;

	margin-right: 5px;







}



h3 {

	color : #600637;

	font-size : 13px;

	font-weight : bold;

	margin-top : 5px;

	margin-bottom : 0px;

	margin-left: 10px;

	margin-right: 5px;







}





h4 {

	color : #600637;

	font-size : 11px;

	font-weight : bold;

	margin-top : 5px;

	margin-bottom : 0px;

	margin-left: 10px;

	margin-right: 5px;



}





h5 {

	color : #FFFFFF;

	font-size : 13px;

	font-weight : bold;

	margin-top : 5px;

	margin-bottom : 0px;

	margin-left: 10px;

	margin-right: 5px;







}



p {

	color : #000000;

	font-size : 10pt;

	text-decoration : none;

	margin-top : 6px;

	margin-bottom : 0px;

	margin-left : 10px;

	margin-right : 5px;

	

	}



ul {


	font-size : 10pt;

	text-decoration : none;

	margin-top : 2px;

	margin-bottom : 0px;

}



/* classes */



.caption {

	font-size: 9px;

	margin-left: 2px;

	margin-right: 2px;

	

}



.italic {

	font-style : italic;

}



.menu {

	background : #448827;

	text-align: center;



}



.menu a:link{

	color: #FFFFFF;

	font-weight: bold;  }

	

.menu a:hover{

	color: #448827;

	font-weight: bold; text-decoration: underline; }



.menu a:active {

	color: #FFFFFF;

	}

	

.menu a:visited {

	color: #FFFFFF;

	}



.photos {

	cell-padding: 15;

	text-align: center;

	background-color: #F7E33E;

	width: 90%;

	}



.tablehead {

	width: 50%;

	font-size: 17px;

	color: #448827;

	font-weight: bold;

	border-bottom: 1px solid #F7E33E;



	

	}

	

.tablemain {

	width: 50%;

	border-right: 1px solid #F7E33E;

 	}

 	

 .tablemain {

	width: 50%;

	}



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

	top:0px;

	width: 100%;

	height: 100%;

	background: #ffffff;

		}

	

	



	

#menubar{

	position:absolute;

	top:120px; 

	width:100%; /* width relative to the container div outside, not relative to browser */

	height:31px;

	z-index: 1;

	

}



#button { /* properties of the div holding all the buttons inside it */

	position:absolute;

	margin:3px 10px 3px 10px; /* top right bottom left */

	width:790px;

	text-align:center;

	margin-left:-395px;

	left: 50%;

	letter-spacing: 1px;

	}

	

	

#button a:link { 

	color: #FFFFFF;

	text-decoration: none;

				}



#button a:hover {

	color: #FFFFFF;

	text-decoration: underline;

	margin-top:3px;

	background-color: none;



}





	



#button a:active {

	color: #FFFFFF;

	text-decoration : none;



}





#dropmenudiv{ /*background color is set in the .js*/

	position:absolute;

	font-size : 8pt;

	border:0px solid #000000;

	z-index:100;

	margin-left: 0px;

	margin-top: 3px;

	padding: 3px;

	line-height: 165%;

	width:150px;

	

	

}



#dropmenudiv 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 : #000000;

	font-weight : bold;

	text-decoration : none;

	

	

}



#dropmenudiv a:hover{ 

width:100%;

background-color: #600637;

color: #FFFFFF;

text-decoration: none;





}



#content{

	position:absolute;

	width: 100%;

	top:140px; /* position from top of browser + logo + menu height */

	background-color : #FFFFFF;

	text-align:left;

	}



#announce{

	position:absolute;

	top:0px;

	left:0px;

	width: 300px:

	overflow: visible;

}





#text_no_image{ /* this if for announcements + text but no image*/

	position:relative;

	top:10px;

	margin-left: 280px;

	

}



#text_only{

	position:relative;

	top:10px;



}







#smphoto_left{

	position:absolute;

	width: 160px;

	top:211px;

	margin-left: 0px;

	margin-right: 10px;

	margin-bottom:0px;

	}



#smphoto_middle{

	position:absolute;

	width: 160px;

	top:211px;

	margin-left: 160px;

	margin-right: 10px;

	margin-bottom:0px;

	

}



#smphoto_right{

	position:absolute;

	width: 160px;

	top:211px;

	margin-left: 320px;

	margin-right: 10px;

	margin-bottom:0px;

	

}



#footer{

	position:relative;

	height: 80px;

	padding-top: 5px;

	margin-bottom: 0px;

	width:790px;

	background-color : #448827;

	color : #FFFFFF; 

	text-align: center;

}