/*////////////////////////////////////////////////////////////////////
 
	Copyright: Trek Bicycle Corporation
	Website: Bontrager
	Title: Feature Marquee Styles
	Media: Screen
	Author: Ken Soliva
	Last Modified: 2009-06-22 (kensoliva)

////////////////////////////////////////////////////////////////////*/

	
#feature #slideshow_wrapper {
	margin-bottom: 20px;
	}
	
#feature #slideshow_wrapper .scrollable {
    position: relative; 
    overflow: hidden;          
    width: 950px;     
    height: 470px;
    }

#feature #slideshow_wrapper .scrollable .items {
    width: 200000em;     
    position: absolute;
    }

#feature #slideshow_wrapper .scrollable .items .slide {
	float: left;
	display: inline;
	width: 950px;
	position: relative;
    }
    
#feature #slideshow_wrapper .scrollable .items .slide .details_wrapper {
	z-index: 90;
	position: absolute;
	}
	
#feature #slideshow_wrapper .scrollable .items .slide .details {
	z-index: 100;
	position: absolute;
	}

#feature #slideshow_wrapper .nav {
	margin: 10px auto -10px auto;
	text-align: center;
	}
	
#feature #slideshow_wrapper .nav a {
	display: inline-block;
	}
	
#feature #slideshow_wrapper .nav .active img {
	border-bottom: 5px solid #ff001a;
	}
	
#feature #slideshow_wrapper .nav img {
	display: inline;
	border-bottom: 5px solid #fff;
	margin-left: 10px;
	}
	
#feature #slideshow_wrapper .nav img.first {
	margin-left: 0;
	}

	
/*////////////////////////////////////////////////////////////////////
	Slide Defaults & Class Definitions
////////////////////////////////////////////////////////////////////*/
	
#feature .slide .details h2 {
	font-size: 3.6em;
	font-weight: bold;
	letter-spacing: -.25px;
	line-height: 1.1;
	margin-bottom: .25em;
	}
	
#feature .slide .details h2 a:hover {
	text-decoration: underline;
	}
	
#feature .slide .details h3 {
	font-size: 1.8em;
	line-height: 1.4em;
	margin-bottom: 1em;
	}
	
#feature .slide .details h3 a:hover {
	/*text-decoration: underline;*/
	}
	
#feature .slide .details .link {
	position: absolute;
	bottom: 20px;
	display: inline;
	font: bold 1.5em "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
	}

#feature .slide .details .link a {
	padding-right: 9px;
	background: url("/images/background/arrow_right_666_small.png") no-repeat right center;
	}
	
#feature .slide .details .link a:hover {
	text-decoration: underline;
	}


/*--------------------------------------------------------------------
	Left Details
--------------------------------------------------------------------*/

#feature .slide.left .details_wrapper {
	left: 15px;
	width: 315px;
	height: 455px;
	}
	
#feature .slide.left .details {
	left: 15px;
	width: 275px;
	height: 375px;
	padding: 60px 20px 20px 20px;
	}


/*--------------------------------------------------------------------
	Right Details
--------------------------------------------------------------------*/

#feature .slide.right .details_wrapper {
	right: 15px;
	width: 315px;
	height: 455px;
	}
	
#feature .slide.right .details {
	right: 15px;
	width: 275px;
	height: 375px;
	padding: 60px 20px 20px 20px;
	}


/*--------------------------------------------------------------------
	Center Details
--------------------------------------------------------------------*/

#feature .slide.center .details_wrapper {
	width: 670px;
	height: 455px;
	margin: 0 140px;
	}
	
#feature .slide.center .details {
	text-align: center;
	width: 630px;
	height: 375px;
	padding: 40px 20px 20px 20px;
	margin: 0 140px;
	}


/*--------------------------------------------------------------------
	Light Slide
--------------------------------------------------------------------*/

#feature .slide.light .media img {
	color: #ccc;
	background: #ccc url("/images/background/loading_medium_on_ccc.gif") no-repeat center center;
	}
	
#feature .slide.light .details h2 {
	color: #000;
	}
	
#feature .slide.light .details h2 a {
	color: #000;
	}
	
#feature .slide.light .details h2 a:hover {
	}
	
#feature .slide.light .details h3 {
	color: #666;
	}
	
#feature .slide.light .details h3 a {
	color: #666;
	border-bottom: 1px solid #999;
	}
	
#feature .slide.light .details h3 a:hover {
	color: #333;
	}

#feature .slide.light .details .link a {
	color: #666;
	background: url("/images/background/arrow_right_666_small.png") no-repeat right center;
	}
	
#feature .slide.light .details .link a:hover {
	color: #333;
	}


/*--------------------------------------------------------------------
	Dark Slide
--------------------------------------------------------------------*/

#feature .slide.dark .media img {
	color: #333;
	background: #333 url("/images/background/loading_medium_on_333.gif") no-repeat center center;
	}
	
#feature .slide.dark .details h2 {
	color: #fff;
	}
	
#feature .slide.dark .details h2 a {
	color: #fff;
	}
	
#feature .slide.dark .details h2 a:hover {
	border-color: #666;
	}
	
#feature .slide.dark .details h3 {
	color: #999;
	}
	
#feature .slide.dark .details h3 a {
	color: #999;
	border-bottom: 1px solid #666;
	}
	
#feature .slide.dark .details h3 a:hover {
	color: #fff;
	}

#feature .slide.dark .details .link a {
	color: #999;
	background: url("/images/background/arrow_right_666_small.png") no-repeat right center;
	}
	
#feature .slide.dark .details .link a:hover {
	color: #ccc;
	}
	

/*--------------------------------------------------------------------
	Lifestyle Slide
--------------------------------------------------------------------*/

#feature .slide.lifestyle .details_wrapper {
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	}
	
#feature .slide.light.lifestyle .details_wrapper {
	background-color: #fff;
	}
	
#feature .slide.dark.lifestyle .details_wrapper {
	background-color: #000;
	}