div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: 582px;
	height: 108px;
	overflow:hidden;
}
/* Invisible left hotspot */
div.scrollingHotSpotLeft, div.scrollingHotSpotLeftVisible
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */

	width: 20px;
	height:108px;
	background-image: url(/images/brandslider/leftArrow.png);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;		
}


/* Invisible right hotspot */
div.scrollingHotSpotRight, div.scrollingHotSpotRightVisible
{
    background-image: url(/images/brandslider/rightArrow.png);
	width: 20px;
	height:108px;
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;		
}

.scrollWrapper{margin-left:20px;margin-right:20px;height: 108px;width:582px!important;}				    
.scrollingHotSpotLeft, .scrollingHotSpotRight {float:left;position: relative;cursor:pointer;}	
.scrollingHotSpotLeft {}
.scrollingHotSpotRight {text-align:right;}		


#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	

.item {
	float:left;
	width:291px;	
	height:108px!important;
	overflow:hidden;	
}

.item .image 
{
    float:left;
    width:148px;
    overflow:hidden;
    height:108px!important;
}
.item .image img 
{
    border:0;
    width:165px;
    height:110px;
}
.item .details 
{
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    text-align:center;
    width:122px;
    float:left;    
    font-size:11px;
}