<style type="text/css">
	#makeMeScrollable {
		width: 900px;
		height: 150px;
		position: relative;
		overflow: hidden;
	}
	#makeMeScrollable2 {
		position: relative;
		overflow: hidden;
	}
	/* 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: 50px;
		width: 10%;
		height: 96%;
		/* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */
		background-image: url(https://www.l2c2.com/images/slideshow/big_transparent.gif);
		background-repeat: repeat;
		background-position: center center;
		position: absolute;
		z-index: 200;
		left: 0;
		/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
		cursor: url(https://www.l2c2.com/images/slideshow/cursors/cursor_arrow_left.png), url(https://www.l2c2.com/images/slideshow/cursors/cursor_arrow_left.cur),w-resize;
	}

	/* Visible left hotspot */
	div.scrollingHotSpotLeftVisible {
		background-image: url(https://www.l2c2.com/images/slideshow/arrow_left.gif);				
		background-color: #fff;
		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: 50px;
		width: 10%;
		height: 96%;
		background-image: url(https://www.l2c2.com/images/slideshow/big_transparent.gif);
		background-repeat: repeat;
		background-position: center center;
		position: absolute;
		z-index: 200;
		right: 0;
		cursor: url(https://www.l2c2.com/images/slideshow/cursors/cursor_arrow_right.png), url(https://www.l2c2.com/images/slideshow/cursors/cursor_arrow_right.cur),e-resize;
	}

	/* Visible right hotspot */
	div.scrollingHotSpotRightVisible {
		background-image: url(https://www.l2c2.com/images/slideshow/arrow_right.gif);
		background-color: #fff;
		background-repeat: no-repeat;
		opacity: 0.35;
		filter: alpha(opacity = 35);
		-moz-opacity: 0.35;
		zoom: 1;
	}
	div.scrollWrapper {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	div.scrollWrapper img {
		top: 0px;
		bottom: 0px;
		margin: 0 auto;
		float: left;
		margin-right: 30px;
		border: none;
	}
	div.scrollableArea {
		position: relative;
		width: auto;
		height: 100%;
		overflow: hidden;
	}
</style>