/*************************************
these styles control the positioning 
of the scroller. please them alone
unless you absolutely what you are doing!
*************************************/


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 5px;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}

/*************************************
| end |    these styles control the positioning 
| end |     of the scroller. please them alone
| end |     unless you absolutely what you are doing!
*************************************/





/************************************
Here, you will find the styles that 
make the scroller pretty. 
************************************/

		
			.jScrollPaneTrack {
				background: url(../images/scroller/scroll_background.png) repeat-y;
			}
			.jScrollPaneDrag {
				background: url(../images/scroller/scrollbar_center.png) no-repeat 0 50%;
			}
			.jScrollPaneDragTop {
				background: url(../images/scroller/scrollbar_center_top.png) no-repeat;
				height: 6px;
			}
			.jScrollPaneDragBottom {
				background: url(../images/scroller/scrollbar_center_bottom.png) no-repeat;
				height: 6px;

			}
			a.jScrollArrowUp {
				height: 15px;
				background: url(../images/scroller/scrollbar_top.png) no-repeat 0 -15px;
			}
			a.jScrollArrowUp:hover {
				background-position: 0 0px;
			}
			a.jScrollArrowDown {
				height: 15px;
				background: url(../images/scroller/scrollbar_bottom.png) no-repeat 0 -15px;
			}
			a.jScrollArrowDown:hover {
				background-position: 0 0px;
			}
			a.jScrollActiveArrowButton,
			a.jScrollActiveArrowButton:hover {
				background-position: 0 0px;
			}

			/* IE SPECIFIC HACKED STYLES */
			* html .product_detail .jScrollPaneDragBottom {
				bottom: -1px;
			}


/************************************
| end | Here, you will find the styles that 
| end | make the scroller pretty. 
************************************/









/***********************************
This section controls the positioning
of the actual scroller. 
***********************************/




div#overviewprodscroll {
margin: 5px 0px 0px 0px;
padding:0px 0px 0px 0px; 
float: left;
display:inline;


}
div#overviewprodscroll.product_detail{
width:140px;
height:280px;
}

div#overviewprodscroll.category_detail{
width:130px;
height:280px;
float:right;
}
#overviewprodscroll h4 { 
 margin: 0 0 10px 24px;
}
div#overviewprodscroll #pane {
float:left;
margin-right:5px;
float:left;
display:inline;
overflow: auto; 
overflow-x:hidden;
}
div#overviewprodscroll.product_detail #pane {
width:150px;
height:255px;
margin:0px;
padding: 0px 0px 0px 15px;
}
div#overviewprodscroll.category_detail #pane {
width:130px;
height:255px;
margin:0px;
padding: 0px 7px 0px 5px;
}

div#overviewprodscroll div.overviews {
margin: 0px 5px 0px 0px;
padding: 0px 20px 5px 10px;
width:180px;
}
div#overviewprodscroll div#overvwscrollcontent {
margin: 0px 5px 0px 0px;
padding: 0px 20px 5px 0px;
width:180px;
}
div#overviewprodscroll div.overviews a,
div#overvwscrollcontent a{
display:block;
clear:both;
width:88px;
}
div#overviewprodscroll div.overviews img,
div#overvwscrollcontent img {
display:block;
clear:both;
width:88px;
height:51px;
}
div#overviewprodscroll div.overviews span,
div#overvwscrollcontent span {
display:block;
font-size:10px;
text-align:center;
line-height:11px;
margin: 4px 0px 8px 0px;
padding:0px;
}

 
 








div#overviewprodscroll {
padding: 0px 0px 0px 14px;
margin: 0px 0px 0px 15px;
}
div#overviewprodscroll h4{
margin:0px;
padding: 0px 0px 10px 5px;
}
div#overviewprodscroll div#panel {
height: 225px; 
width: 140px;
padding:0px;
text-align:left
}
div#overviewprodscroll div#panel div#overvwscrollcontent{
margin:0px;
padding:0px;
width:109px;
float:left;
text-align:center;
}







.overlay-dialog  .jScrollPaneContainer .scroll-pane {
overflow: hidden;	
height: 100%;
text-align:left;
}
.overlay-dialog .jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	margin: 0px 10px 0px 0px;
	padding: 0;
}