/* NOTE; specs for #wn in head of demo too */
.image_carousal {
    margin: 30px auto;
    width: 100%;
	background-color:#474747;
	padding:20px 0;
}
div#wn {
	position:relative; /* scroll area div must be positioned */
	min-height:155px; /* width and height required. adjust to suit  */
	overflow:hidden; /* required! */
	text-transform:uppercase;
}
.slides {
	width:100%;
}
.slides div {
	float: left;
	margin: 0 10px;
	text-align: center;
	max-width: 200px;
	color:#FFFFFF;
}
.slides div img {
	margin-bottom:5px;
}
/* styles to display list items horizontally */
#horiz {
	list-style:none;
	margin:0;
	padding:0;
	white-space:nowrap;
}
#horiz div {
	display:inline;
	white-space:nowrap;
}
/* style scrollLinks to suit your taste and layout. */
div#scrollLinks {
	text-align:center;
	margin:0;
}
div#scrollLinks .left, div#scrollLinks .right {
	width:10px;
	height:10px; /* specify width and height of your image */
	display:inline-block;
	padding:8px;
	margin:-100px 5px 0 0;
	cursor:pointer;
	border-radius:5px;
	opacity:0.7;
	padding:15px;
	position:absolute;
}
div#scrollLinks .left:hover, div#scrollLinks .right:hover {
	opacity:1;
}
div#scrollLinks .left {
	background:url(../images/left-arrow.png) no-repeat center #000;
	left:10px;
}
div#scrollLinks .right {
	background:url(../images/right-arrow.png) no-repeat center #000;
	right:10px;
}
/* safari, chrome, opera have very prominent outline by default 
   opera shows outline movement with scrolling and won't allow none
   set to suit your page design
*/
div#wn:focus {
	outline:1px dotted #eee;
}