/* Horizontal Carousel */
#horizontal_carousel {
  padding:0px;
}

#horizontal_carousel .container {
position:relative;
width: 610px;
overflow: hidden;
height:62px; float:left }

#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0px;
  height: 62px;
}                      

#horizontal_carousel ul li {
  width: 102px;
  list-style:none;   
  float:left;
}
#horizontal_carousel ul li img{ padding:1px; border:1px solid #e0e0e0; }
#horizontal_carousel ul li img:hover{ border:1px solid #c2c2c2; }

#horizontal_carousel .buttons{
	display:block;
 	clear:both;
}
#horizontal_carousel .previous_button {
  margin-right:6px; width:20px; float:left; width:20px; height:62px; display:block;
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .previous_button_over{ background-position:0 -62px; }

#horizontal_carousel .previous_button_disabled { background-position:0 0; cursor:default; }

#horizontal_carousel .next_button {
	margin-left:2px; width:20px; float:right; width:-20px; height:62px; display:block;
  	z-index: 100;
  	cursor: pointer;
}

#horizontal_carousel .next_button_over {
  background-position:-20px -62px;
}

#horizontal_carousel .next_button_disabled {
  background-position:-20px 0;
  cursor: default;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 610px; /*Width of Carousel Viewer itself*/
height: 62px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}