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

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


#marquee_wrapper {
	margin: 20px 19px;
	}
	
#marquee_wrapper .scrollable {
    position: relative; 
    overflow: hidden;          
    width: 950px;     
    height: 475px;
    }

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

#marquee_wrapper .scrollable .items .marquee {
	width: 950px;
	position: relative;
	height: 475px;
    }
    
#marquee_wrapper .scrollable .items .marquee .details_wrapper {
	z-index: 90;
	position: absolute;
	}
	
#marquee_wrapper .scrollable .items .marquee .details {
	z-index: 100;
	position: absolute;
	}

#marquee_wrapper .rotator {
	margin: 10px 0 -10px 0;
	text-align: center;
	}

	
/*////////////////////////////////////////////////////////////////////
	Marquee Defaults & Class Definitions
////////////////////////////////////////////////////////////////////*/

.marquee {
	border-top: 5px solid #ff001a;
	overflow: hidden;
	}
	
.marquee.womens {
	border-top: 5px solid #57bdeb;
	}
	
.marquee.lance {
	border-top: 5px solid #ffd200;
	}
	
.marquee .details h2 {
	font-size: 3.6em;
	font-weight: bold;
	letter-spacing: -.25px;
	line-height: 1.1;
	margin-bottom: .25em;
	}
	
.marquee .details h2 a:hover {
	text-decoration: underline;
	}
	
.marquee .details h3 {
	font-size: 1.8em;
	line-height: 1.4em;
	margin-bottom: 1em;
	}
	
.marquee .details h3 a:hover {
	text-decoration: underline;
	}
	
.marquee .details .link {
	display: inline;
	font: bold 1.5em "Helvetica Neue", Helvetica, sans-serif;
	text-transform: uppercase;
	}

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


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

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


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

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


/*--------------------------------------------------------------------
	Top Details
--------------------------------------------------------------------*/

#homepage .marquee.top .details_wrapper {
	left: 15px;
	width: 920px;
	height: 140px;
	}
	
#homepage .marquee.top .details {
	left: 15px;
	width: 880px;
	height: 100px;
	padding: 40px 20px 20px 20px;
	text-align: center;
	}
	
/*--------------------------------------------------------------------
	Bottom Details
--------------------------------------------------------------------*/

#homepage .marquee.bottom .details_wrapper {
	left: 15px;
	bottom: 15px;
	width: 920px;
	height: 140px;
	}
	
#homepage .marquee.bottom .details {
	left: 15px;
	bottom: 15px;
	width: 880px;
	height: 100px;
	padding: 40px 20px 20px 20px;
	text-align: center;
	}


/*--------------------------------------------------------------------
	Light Marquee
--------------------------------------------------------------------*/

.marquee.light {
	color: #ccc;
	background: #ccc url("/images/background/loading_medium_on_ccc.gif") no-repeat center center;
	}
	
.marquee.light .media img {
	color: #ccc;
	}
	
.marquee.light .details h2 {
	color: #000;
	}
	
.marquee.light .details h2 a {
	color: #000;
	}
	
.marquee.light .details h2 a:hover {
	}
	
.marquee.light .details h3 {
	color: #666;
	}
	
.marquee.light .details h3 a {
	color: #666;
	}
	
.marquee.light .details h3 a:hover {
	color: #333;
	}

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


/*--------------------------------------------------------------------
	Dark Marquee
--------------------------------------------------------------------*/

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

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

/*--------------------------------------------------------------------
	Lifestyle Marquee
--------------------------------------------------------------------*/

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