/**
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.
*/
* {
	margin:0;
	padding:0;
}

img {border: none; }

.container {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.header {
	height: 80px;
	width: 960px;
	margin-left: auto;
	margin-right: auto; 
	position:relative;
}

.search {
	position: absolute;
	width:220px;
	height: 25px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 0 0 0;
	top:41px;
	right: 1px;
}

.container_slideshow {
	width: 100%;
	height:465px;
	background-color:#000;
	margin: 0px;
	padding: 0px;
	}

.container_slideshow_sectionlabelbox {
	position:absolute;
	top:60;
	width:100%;	
	z-index:3;
	}
.container_slideshow_sectionlabel {
	width:960px;
	margin-left: auto;
	margin-right: auto; 
	padding: 10px 0;
	z-index:4;	
	}
.menu {
	width: 960px;
	height: 50px;
	margin: 0 auto;
	background: url("engine/css/$rel#back.png$") no-repeat scroll 0 0 transparent;
	position: relative;
	background-color: #A47700;
}

.mainContent {
	width: 960px;
	margin: 0 auto;
	position: relative;
	z-index:0;
}

.mainContent p{
	color:#000;
	font-family:Verdana, Geneva, sans-serif;
	font-size:small;
}

.mainContent H1{
	color:#000;
}

.footer {
	padding:2px 5px 0 5px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	height:60px;
	width:950px;
	background-color:#000;
	background-image:url(images/FooterBottom.jpg);
                background-position:bottom;
                background-repeat:no-repeat;

}
.footer_rightside{
                position:relative;
                float:right;
                
}

.footer a{
                color:#FFF;
                font-size:10px;
                text-decoration:none;
}
.footer p{
	color:#FFC;
	font-size:10px;
	text-decoration:none;
}


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

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

.slideshow {
	width: 960px;
	height: 360px;
	margin: 0 auto;
	background: url("$rel#back.png$") no-repeat scroll 0 0 transparent; 
}
.slideshow a img {
	border: 0;
}
/**
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 {
	width: 960px;
	height: 360px;
	left: 0px;
	top: 0px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
	position: static;
}
/**
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 * {
	margin: 0;
	padding: 0;
}
.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;
}
.slideshow-thumbnails {
	bottom: -110px;
	height: 110px;
	left: 0;
	position: absolute;
	width: 100%;
	overflow: auto;
}
.slideshow-thumbnails ul {
	height: 90px;
	left: 0;
	position: absolute;
	top: 0;
	width: 1080px;
}

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

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

css below is originally from style.css used for menu

*/
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;}
ul#css3menu1,ul#css3menu1 .submenu{
	background-color:#A47700;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 .submenu{
	display:none;position:absolute;left:0;top:100%;float:left;background-color:#000000;border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;-webkit-border-radius:0;-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:6px;padding:10px 1px 11px;z-index:2;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul .submenu{
	position:absolute;left:100%;top:0;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
ul#css3menu1{
	padding:10px 10px 10px 0;display:block;font-size:0;float:left;}
ul#css3menu1 ul{
	padding:0 10px 10px;}
ul#css3menu1 .column{
	float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
	margin:0 0 0 10px;}
ul#css3menu1 ul>li{
	margin:10px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Verdana;color:#DDDDDD;cursor:default;padding:8px 18px;background-color:#A47700;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
	float:none;margin:1px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:5px 15px;background-color:#000000;border-width:0 0 1px 0;border-style:solid;border-color:#3a4e59;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 12px Arial,Helvetica;color:#dadada;text-decoration:none;}
ul#css3menu1 li:hover>a{
	background-color:#000000;border-style:none;font:bold 12px Verdana;color:#EEEEEE;text-decoration:none;}
ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
	background-image:url("arrowsub.png");padding-right:24px;}
ul#css3menu1 ul li:hover>a{
	background-color:#757575;border-style:solid;border-color:#3a4e59;font:bold 12px Arial,Helvetica;color:#ffffff;text-decoration:none;}
ul#css3menu1.topmenu{
	padding:3px 0px 3px 35px;
	border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul#css3menu1 li.topmenu>a{
	height:20px;line-height:20px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
ul#css3menu1 li.topmenu:hover>a{
	line-height:20px;}
ul#css3menu1 li.toproot>a{
	height:20px;line-height:20px;border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toproot:hover>a{
	line-height:20px;}