/* created  2006 by Libra Design and Media. 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 : "Tahoma", Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/* html tags */

a:link	{
	color : #C0C0C0;
	text-decoration : none;

	}

a:visited {
	color : #C0C0C0;
	text-decoration : none;

	}

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

a:active {
	color : #C0C0C0;
	text-decoration : none;

}

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

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


}

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



}

h3 {
	color : #000000;
	font-size : 14px;
	margin-top : 7px;
	margin-bottom : 0px;
	margin-left: 10px;
	font-weight: normal;
	letter-spacing: 3px;
	font-family : "Arial", Arial, Helvetica, sans-serif;

	



}




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


.caption {
	text-align: center;
	font-size: 9px;

}

.menubk {
	text-align: center;
	font-color: #ffffff;
	background-color:#000000;
	width: 20%;
	padding-top: 5px;
	padding-bottom: 5px;
	border: solid #000000;
	border-width: 1px;

}

.footer {
	text-align: center;
	font-color: #000000;
	background-color:#C0C0C0;
	font-size: 11px;
	margin-top: 0px;
	margin-bottom: 0px;
	
}


.leftmenu {
	text-align: center;
	font-color: #ffffff;
	background-color:#902721;
	width: 90%;
	height: 40px;
	padding-top: 2px;
	padding-bottom: 2px;


}


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


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


#top{
	position:absolute;
	left:0px;
	top:20px;
	overflow: visible;
	}
	
#menubar{
	position:absolute;
	top:160px; 
	width:100%; /* width relative to the container div outside, not relative to browser */
	height:35px;
	background-color: #C0C0C0;
	
}

#dropmenudiv{
border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:0px solid black; position:absolute;
background-color: #C0C0C0;
line-height:18px;
z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Verdana; 
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color: #000000;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;
color: #FFFFFF;
}



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

}


#content{
	position: relative;
	top:188px; 
	width:	100%;
	height:75%;
	background-color : #FFFFFF;
	text-align:left;
	
}

#left{
	position: absolute;
	background-color: #000000;
	left:0px;
	width:150px;
	height:100%;
	overflow:visible;
}



#text { 
	position: relative;
	top:10px;
	margin-left: 170px;
	margin-right: 20px;
	overflow:visible;
	background-url:(water.jpg);
	

}

#footer{
	position:relative;
	padding-top: 10px;
	bottom:0px;
	width:100%;
	background-color : #C0C0C0;
	color : #000000;
	font-size : 11px;
	text-align : center;
	overflow: visible;
}