div.hero-wrapper { 
	/* modify width and height of scrolling section if necessary	*/		
	width: 960px; 
	height: 200px;
	overflow: hidden;
	}
	div.hero-wrapper li {
		/* modify width and height of each section as needed (should match the size of the scroller window)	*/		
		width:960px;
		height:200px;
		overflow:hidden;
		float:left;
		display: block;		
		}
	div.hero-wrapper ul {
		width: 10000px;
		}

	div#section2 {
		background:#666666;
		color:#ffffff;
		}


#hero-section { position: relative; margin-bottom: 20px; z-index: 10;}

#hero-section .arrow {
	background: url(../images/arrows.png) no-repeat 0 0;
	display: block;
	cursor: pointer;
	height: 200px; width: 67px;
	position: absolute;
	text-indent: -9999px;
	top: 0px;
}

#hero-section .forward { background-position: 0 0; right: -67px; }

#hero-section .back { background-position: -67px 0; left: -67px; }

#hero-section .forward:hover { background-position: 0 -200px; }

#hero-section .back:hover { background-position: -67px -200px; }