/* product scroller */

img { border:0px; }

div#scrollbar { 
    display:none;
    }

/* below in external file */
div .scrollerMask	{ 
    position:relative; 
    width:293px; height:52px; 
    float:right;
    margin-right:20px;
    overflow:hidden;	
}
div .scrollerDiv { 
    height:52px; 	
}

div .scrollBarContainer {background:url('../images/bg_scrolltrack.png') scroll 0px 0px repeat-x; clear:both; height:10px; overflow:hidden; font-size:0px}
div .scrollBarContainer img.scrolltrackleft {position:absolute; left:0px}
div .scrollBarContainer img.scrolltrackright {position:absolute; right:0px}

div .scrollBar {background:url('../images/bg_scrolltrack.png') scroll 0px 0px repeat-x; clear:both; height:10px; overflow:hidden; font-size:0px; position:absolute; left:10px}

div .scrollHandler {
	background:#999999 url(../images/bg_scrollhandle.png) repeat-x scroll 0 0;
	height:10px;
	width:20px;
	overflow:hidden;
}

div .scrollHandler img.scrollhandleleft {float:left; clear:none}
div .scrollHandler img.scrollhandleright {float:right; clear:none}
/*
div#left { position:absolute; left:0; top:0; }  
div#right { position:absolute; right:0; top:0;  }
*/
/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#left, div#right {
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar img {
    display:block;
    border: 0px none white;
}

div.productScroller div.seriesLogo {float:left; margin:30px 0 0; width:140px}
div.productScroller div.explore-the {font-size:100%; font-weight:normal; color:#6D6F72; line-height:100%; text-transform:uppercase}
div.productScroller div.family-name {font-size:100%; font-weight:bold; color:#6D6F72; line-height:100%; text-transform:uppercase}

div.left_gradient {position:absolute; z-index:4; left:0px; top:0px; height:125px; width:30px; background:url('../images/bg_gradient.png') scroll 0 0 repeat-y; _display:none}
div.right_gradient {position:absolute; z-index:4; right:0px; top:0px; height:125px; width:30px; background:url('../images/bg_gradient.png') scroll 100% 0 repeat-y; _display:none}

div.scroller_label_div a {color:#333333; text-decoration:none}
div.scroller_label_div a:hover {color:#E11B22; text-decoration:none}