/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */


#mixedContent {
 z-index: 9;
position: absolute;
width: 100%;
bottom: 250px;
height: 150px;
overflow: hidden;
}


.white1 {
z-index: 9;
position: absolute;
width: 40px;
top: 0;
left:269px;
height: 148px;
background: url(/i/image/wwwwww.png) -40px  0px no-repeat;

}

.white2 {
z-index: 9;
position: absolute;
width: 40px;
top: 0;
right:349px;
height: 148px;
background: url(/i/image/wwwwww.png) 0px  0px no-repeat;

}

#mixedContent_inner {
margin:0 350px 0 270px;
}
div.scrollingHotSpotLeft
{
width: 86px;
height: 100%; 
position: absolute;
z-index: 200;
left: -40px;
cursor: url(/i/image/cursor_arrow_left.png), url(/i/image/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{ 
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
 
	width:86px;
	height: 100%; 
	position: absolute;
	z-index: 200;
	right:-40px;
	cursor: url(/i/image/cursor_arrow_right.png), url(/i/image/cursor_arrow_right.cur),w-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{ 
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden; 
	margin:0 auto;
	height: 150px;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
	
}



 .contentBox {
display: block;
height: 122px;
width: 180px;
background: fff;
margin: 10px 10px 40px 50px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border: 3px double #ebebeb;
-webkit-box-shadow: rgba(0,0,0,0.28) 0px 2px 3px;
-moz-box-shadow: rgba(0,0,0,0.28) 0px 2px 3px;
box-shadow: rgba(0,0,0,0.28) 0px 2px 3px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
float:left;
position:relative;
}

.contentBox  .title{
background: #fff;
bottom: -3px;
position: absolute;
left: -3px;
text-align: center;
width: 179px;
font-size: 12px;
line-height: 13px;
padding: 3px;
}

 .contentBox:hover {
margin:2px 10px 40px 50px;
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15),0 8px 12px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 1px 1px 10px #aaa;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15),0 8px 12px -5px rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}