/*	-------------------------------------------------------------
 
	Fuzion Template - For ThemeForest.net
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Description:Slideshow CSS
	Name:slideshow.css
	Version:1.0
	Date:January 5th, 2010
	By:Simon Bouchard <www.simonbouchard.com> 

	This file is part of a site template for sale at ThemeForest.net.
	See: http://themeforest.net/user/simonbouchard/portfolio
	Copyright &copy; 2009 Simon Bouchard <info@simonbouchard.com> 
	 
-------------------------------------------------------------	*/

#slideshow {
	font-family:"Droid Sans Regular", sans-serif;
	width:880px;
	height:200px;
	margin-left:40px;
	position:relative;
	background:#fff url("../../images/slideshow_shadow.png") no-repeat bottom center; }
	
#slides {
	width:880px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
	background:#ccc;
	z-index:5; }

#slides ul {
	width:880px;
	height:200px;
	margin:0;
	list-style:none;
	background:#ccc; }
	
#slides ul li {
	width:880px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
	display:none;
	overflow:hidden; }
	
#slides ul li div {
	display:none; }

#slidesitems { 
	position:absolute;
	top:60px;
	right:0;
	z-index:20; }
	
#slidesitems ol {
	width:550px;
	margin:0;
	list-style:none; }
	
#slidesitems ol li {
	float:right;
	width:330px;
	height:41px;
	margin:10px 0 0;
	position:relative;
	background-color:#000;
	cursor:pointer;
	overflow:hidden;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px; }
	
#slidesitems ol li:first-child{
	margin:0; }
	
#slidesitems ol li:hover {
	background-color:#242424 !important; }
	
#slidesitems ol li.on:hover {
	background-color:#0d4f7f !important; }
	
#slidesitems ol li.on {
	cursor:default;
	background-image:none; }
	
#slidesitems ol li dl {
	margin:0;
	padding:0 0 0 20px; }
	
#slidesitems ol li dt {
	display:block;
	padding:1px 0 0 0;
	font-weight:normal;
	letter-spacing:-0.5px;
	color:#fff;
	background:none; }
	
#slidesitems ol li.on dt {
	font-size:2.5em !important;
	text-align:right; }
	
#slidesitems ol li dd {
	padding:0; }
	
#slidesitems ol li .default dl {
	width:310px;
	margin-left:-200%;
	padding-left:680px;
	height:41px;
	line-height:41px; }
	
#slidesitems ol li .default dt {
	font-family:"Droid Sans Bold", sans-serif;
	font-size:14px !important;
	text-shadow:1px 1px 0 #000;
	font-weight:normal;
	border:none;
	text-align:left;
	background:url("../../images/icon_plus_white.gif") no-repeat 96% 15px; }
	
#slidesitems ol li .default dd {
	display:none; }
	
#slidesitems ol li div.extended {
	position:relative;
	margin:0;
	padding:0; }
	
#slidesitems ol li .extended dl{
	width:482px;
	height:150px;
	margin:0;
	padding:0; }
	
#slidesitems ol li .extended dt {
	font-family:"Droid Sans Bold", sans-serif;
	font-size:31px !important;
	padding:5px 0 0 0;
	text-shadow:1px 1px 0 #111e32;
	text-align:right; }
	
#slidesitems ol li .extended dd {
	text-indent:0;
	text-align:right;
	color:#a8d7ed;
	font-size:12px;
	margin:15px 0 0 0;
	letter-spacing:-0.5px; }
	
#slidesitems ol li a {
	color:#ffffff;
	background:inherit; }
	
#slidesitems ol li a:hover {
	border-bottom:1px solid #fff; }      
	
	/*****slider *****/
	#s3slider {
	   width: 880px; /* important to be same as image width */
	   height: 147px; /* important to be same as image height */
	   position: relative; /* important */
	   overflow: hidden; /* important */
	}

	#s3sliderContent {
	   width: 880px; /* important to be same as image width or wider */
	   position: absolute; /* important */
	   top: 0; /* important */
	   margin-left: 0; /* important */
	}

	.s3sliderImage {
	   float: left; /* important */
	   position: relative; /* important */
	   display: none; /* important */
	} 
	.s3sliderImage span {
	   position: absolute; /* important */
	   left: 0;
	   font: 10px/15px Arial, Helvetica, sans-serif;
	   padding: 10px 13px;
	   /*width: 374px;   */
	   background-color: #000;
	   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
	   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
	   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
	   opacity: 0.7; /* here you can set the opacity of box with text */
	   color: #fff;
	   display: none; /* important */
	   top: 0;

	   /*
	       if you put
	       top: 0; -> the box with text will be shown at the top of the image
	       if you put
	       bottom: 0; -> the box with text will be shown at the bottom of the image
	   */
	}

	.clear {
	   clear: both;
	}