#carousel_container {
	
	display: block;
	width: 650px; /* important (this width = width of list item(including margin) * items shown */
	height: 170px;	
	position: relative;
	overflow: hidden;
	margin-top: 10px;
	
}

#carousel_inner {
	
width: 648px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;
/* non-important styling bellow */
background: #F0F0F0;
border: 1px solid #CCCCCC;	

}

#carousel_ul {
position:relative;
left:-162px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:150px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left: 6px;
margin-right: 6px;
}

#carousel_ul li img {
	
margin-bottom: -4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
/* styling */
cursor:pointer;
border:0px;
}

#carousel_ul li img.thumbnail {
	
	width: 150px;
	
}

#left_scroll, #right_scroll{

	position: absolute;
	bottom: 10px;
	height: 20px;
	width: 35px;
	border: 0px solid blue;
	background: #C0C0C0;
	background-image: url(images/highslide/graphics/controlbar2.gif);
	background-position: -15px -5px;
	cursor: pointer;

}

#right_scroll {
	
	right: 280px;	
	background-position: -65px -5px;
	
} 

#left_scroll {
	
	left: 280px;	
}