body {
margin:0px 5px 5px 5px;
	 padding:0px;
	text-align:left;
	}
	
	#wrapper {
  width: 860px;
  margin: 0 auto;
 
}
#container2
	{
		
		padding: 5px;
		border: transparent;
		background: transparent;
	}

#tabnav
	{
		height: 20px;
		margin: 0;
		padding-left: 10px;
		background: url(../images/tab_bottom.gif) repeat-x bottom;
	}

#tabnav li
	{
		margin: 0; 
		padding: 0;
  		display: inline;
  		list-style-type: none;
  	}
	
#tabnav a:link, #tabnav a:visited
	{
		float: left;
		background: #f3f3f3;
		font-size: 12px;
		line-height: 14px;
		font-weight: bold;
		padding: 2px 10px 2px 10px;
		margin-right: 4px;
		border: 1px solid #ccc;
		text-decoration: none;
		color: black;
	}

#tabnav a:link.active, #tabnav a:visited.active
	{
		border-bottom: 1px solid #fff;
		background: #fff;
		color: black;
	}

#tabnav a:hover
	{
		background: #fff;
			color: #996633;
	}

#searchsite p{
	font-family: Century Gothic, Helvetica, sans-serif;
   color:white; font-size: 12px;
	text-align: left;
	display:inline;
	background-color:gray;
	border-color:gray;
	}
	
	div.info span{
	font-family: Century Gothic, Helvetica, sans-serif;
	color:red; font-size: 12px;
	}
	
#search p{
width:160px;
font-family:Garamond, Hoefler Text, Times New Roman, Times, serif;
color:black;

}

div.infomain p{
 text-align: center;
margin:5px 5px 0px 5px;
   border-width:3px;
border-color:#CCCCCC;
padding: 3px;
font-family:  Century Gothic, Helvetica, sans-serif;
color:black;font-size: 14px;
}

#main h1{
 font-family: Century Gothic, Apple Gothic, san-serif;
  font-weight:200;
color:black;
font-size: 30px;
	text-align:center;
background-color:#FFFFCC;
	border-color:#FBD7A1;
	border-width:3px 5px 3px 5px;
	border-style:solid;	
	width:600px; 
	
	}
	
	#container{
	background-color:black;
	border-color:#FBD7A1;
	border-width:3px;
	border-style:solid;	
	}
	
#Content {
	margin:0px 0px;
	
	text-align:left;
	padding:10px;
	border-width:3px;
border-style:solid;	
	}
div.float2 h2 {	
  text-align: center;
margin:5px 5px 0px 5px;
   border-width:3px;
border-color:#8DCB41;
padding: 3px;
font-family:  Century Gothic, Helvetica, sans-serif;
font-size: 14px;
background-color:#FFFFCC;
}
div.float {
  float: left;
border-width:3px;
border-color:#8DCB41;
padding: 8px;
margin-top:2px;
  }
  
  

div.float p{
  text-align: center;
margin:5px 5px 0px 5px;
   border-width:3px;
border-color:#CCCCCC;
padding: 3px;
font-family:  Century Gothic, Helvetica, sans-serif;
color:black;font-size: 14px;
	}
 
div.float h2{
  text-align: center;
margin:5px 5px 0px 5px;
   border-width:3px;
border-color:#CCCCCC;
padding: 3px;
font-family:Garamond, Hoefler Text, Times New Roman, Times, serif;
color:#FFFFCC;
font-size: 16px;
	}
	
div.float img {
border-width:3px;
border-color:#CCCCCC;
border-style:solid;
}

	

h2 {font-family: Century Gothic, Apple Gothic, sans-serif;
color:#7C9BCF; font-size: 12px;
	text-align: left;
}

h3 {
font-family: Garamond, Hoefler Text, Times New Roman, Times, serif;
color:#7C9BCF; font-size: 10px;
	text-align: left;
}
p {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; color:#2977c7; 
margin-right:5px;
margin-top:10px;
margin-bottom:10px;
padding: 10px;
background-color:white;
border-style: solid;
border-width:1px;
border-color:black;
}
h4{
font-family:Century Gothic, Apple Gothic, sans-serif;
color:#7C9BCF; font-size: 10px;
	text-align: left;
}

#menu ul{
border-color:#FBD7A1;
	border-width:1px;
	border-style:solid;	
padding:2px;
background-color:#CCCCCC;
}

#menu li{
display:inline;
list-style-type:none; 
margin-right:3px;
margin-top:2px;
margin-bottom:5px;
padding:2px;
color:#FBD7A1;
font-family:Century Gothic, Apple Gothic, sans-serif;
font-size: 12px; 

}

a:link{font-weight:bold; color:black;text-decoration:none;}
a:visited{font-weight:bold; color:#996633;text-decoration:none;}
a:hover{font-weight:bold; color:#FFFFCC;text-decoration:none;}


#menu2 li {

font-family:Garamond, Hoefler Text, Times New Roman, Times, serif;
display:inline;
list-style-type:none; 

margin-top:10px;
margin-bottom:10px;
padding:5px;
background-color:white;
font-size: 14px; 
color:#996633;
border-color:#FBD7A1;
	border-width:1px;
	border-style:solid;	

}
#menu2 ul {
margin-left:0px;

display:inline;
margin-top:10px;

}
#footer p{
display:inline;
background-color:#FBD7A1;
font-family:Garamond, Hoefler Text, Times New Roman, Times, serif;
font-size: 12px; 
color:black;
margin-right:10px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
padding: 2px;
clear:both;
font-weight : bold; 
}





/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 400px;
	width: 450px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 400px;
	margin: 0 auto;
	width: 450px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}