/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft {
	background: url('../images/hot-spot-left.gif') no-repeat center center;
	min-width:75px;
	width:7%;
	height:100%;
	position:absolute;
	z-index:10000;
	left:0;
	opacity: .8;
	filter:alpha(opacity = 80);
	-moz-opacity:.8;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
	background: url('../images/hot-spot-left.gif') no-repeat center center;
	opacity:.8;
	filter:alpha(opacity = 80);
	-moz-opacity:.8;
	zoom:1;
}

/* Invisible right hotspot */
div.scrollingHotSpotRight {
	background: url('../images/hot-spot-right.gif') no-repeat center center;
	min-width:75px;
	width:7%;
	height:100%;
	position:absolute;
	z-index:10000;
	right:0;
	opacity: .8;
	filter:alpha(opacity = 80);
	-moz-opacity:.8;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
	background: url('../images/hot-spot-right.gif') no-repeat center center;
	opacity:.8;
	filter:alpha(opacity = 80);
	-moz-opacity:.8;
	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%;
}

#scroll div.scrollableArea img {
	position:relative;
	float:left!important;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
}




/* MEDIA QUERIES
-------------------------------------------------------------------------------*/

/* P & L */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.scrollingHotSpotRight,
.scrollingHotSpotLeft {
	display: none!important;
}
}


/* P & L */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
.scrollingHotSpotRight,
.scrollingHotSpotLeft {
	display: none!important;
}	
}


/* P & L */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.scrollingHotSpotRight,
.scrollingHotSpotLeft {
	display: none!important;
}	
}