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

div.scrollingHotSpotLeft
{
	width:13px;
	height:10px;
	text-indent:-9999px;
	overflow:hidden;
	background:url('../images/sprite.png') no-repeat 0 -10px;
	margin:8px 0px 0px 0px;
	float:left;
	position:absolute;
	top:0px;
	left:-25px;
	cursor: pointer;
	display:block !important;
}
div.scrollingHotSpotLeft:hover {opacity: 0.75;-moz-opacity: 0.75;filter:alpha(opacity=75);}
div.scrollingHotSpotLeftEnd {background-position:0 0;cursor:default;}
div.scrollingHotSpotLeftEnd:hover {opacity: 1;-moz-opacity: 1;filter:alpha(opacity=100);}

div.scrollingHotSpotLeftVisible
{
	/*
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	-moz-opacity: 0.35;
	filter: alpha(opacity = 35);
	zoom: 1;
	*/
}

div.scrollingHotSpotRight
{
	width:13px;
	height:10px;
	text-indent:-9999px;
	overflow:hidden;
	background:url('../images/sprite.png') no-repeat -23px 0px;
	margin:8px 0px 0px 0px;
	float:left;
	position:absolute;
	top:0px;
	right:-25px;
	cursor:pointer;
	display:block !important;
}
div.scrollingHotSpotRight:hover {opacity: 0.75;-moz-opacity: 0.75;filter:alpha(opacity=75);}
div.scrollingHotSpotRightEnd {background-position:-23px -10px;cursor:default;}
div.scrollingHotSpotRightEnd:hover {opacity: 1;-moz-opacity: 1;filter:alpha(opacity=100);}

div.scrollingHotSpotRightVisible
{
	/*
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	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;
	width: 100%;
	height: 100%;
}

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