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



/* Invisible left hotspot */

div.scrollingHotSpotLeft

{

	/* 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. */

	min-width: 75px;

	width: 10%;

	height: 100%;

	/* There is a big background image and it's used to solve some problems I experienced

    in Internet Explorer 6. */

	background-image: url(../images/big_transparent.gif);

	background-repeat: repeat;

	background-position: center center;

	position: absolute;

	z-index: 200;

	left:-26px;

	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */

	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;

}



/* Visible left hotspot */

div.scrollingHotSpotLeftVisible

{

	background-image: url(../images/arrow_left.gif);				

	

	background-repeat: no-repeat;

	opacity: 0.35; /* Standard CSS3 opacity setting */

	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */

	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */

	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */

}



/* Invisible right hotspot */

div.scrollingHotSpotRight

{

	min-width: 75px;

	width: 10%;

	height: 100%;

	background-image: url(../images/big_transparent.gif);

	background-repeat: repeat;

	background-position: center center;

	position: absolute;

	z-index: 200;

	right: -4px;

	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;

}



/* Visible right hotspot */

div.scrollingHotSpotRightVisible

{

	background-image: url(../images/arrow_right.gif);

	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: 976px;

	height: 100%;

}















#makeMeScrollable

		{

			width:976px;
			height: 335px;

			position: relative;
			overflow:hidden;

		}

		

		/* Replace the last selector for the type of element you have in

		   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,

		   if you have links use #makeMeScrollable div.scrollableArea a and so on. */

		#makeMeScrollable div.scrollableArea img

		{

			position: relative;

			float: left;

			margin: 0;

			padding: 0 15px 0 0;

			/* If you don't want the images in the scroller to be selectable, try the following

			   block of code. It's just a nice feature that prevent the images from

			   accidentally becoming selected/inverted when the user interacts with the scroller. */

			-webkit-user-select: none;

			-khtml-user-select: none;

			-moz-user-select: none;

			-o-user-select: none;

			user-select: none;

		}



div.scrollableArea

{

	position: relative;

	width: auto;

	height: 490px;

}