
.jThumbnailScroller {
position:relative; 
width:700px; 
height:150px; 
/*margin:160px auto 0 auto; */
border:5px solid #eee; 
background:#bbb; 
overflow:hidden; 
-moz-border-radius: 5px;
-webkit-border-radius:5px; 
border-radius:5px;
}

img {
margin-top:5px;}
  
.jThumbnailScroller .jTscrollerContainer{position:absolute;}
.jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline;}


.jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;}
.jThumbnailScroller .jTscrollerNextButton{background:#000 url(../images/scroller/nextArrow.png) center center;}
.jThumbnailScroller .jTscrollerPrevButton{background:#000 url(../images/scroller/prevArrow.png) center center;}
.jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#d56916; opacity:1;}


/*something here is causing a 3 or 4 pixel border at the top of the thumbnails. can't figure out what it is. i changed the BG to match the #ddd border in order to hide it.*/

.jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#ddd; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.jThumbnailScroller .jTscroller a:hover{border-color:#ff9933;}
.jThumbnailScroller .jTscroller a:first-child{margin-left:10px;}
.jThumbnailScroller .jTscroller a img{border:none;}
/* different styled scrollers */
/* liquid width scroller */

.jThumbnailScroller#tS2{margin:30px auto;}
.jThumbnailScroller#tS2 .jTscroller a{opacity:0.7;}
.jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;}
.jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:0; top:50%;}
.jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:0; top:50%;}


.jThumbnailScroller#tS3{margin:30px auto;}
.jThumbnailScroller#tS3 .jTscroller a{opacity:0.7;}
.jThumbnailScroller#tS3 .jTscroller a:hover{opacity:1;}
.jThumbnailScroller#tS3 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:0; top:50%;}
.jThumbnailScroller#tS3 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:0; top:50%;}