#carousel_inner {
float:left; /* important for inline positioning */
width:895px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
}

#carousel_ul {
position:relative;
left:-210px; /* 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:210px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:210px;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
font: bold 10px helvetica;
color: #0066cc;
text-align: center;
}

#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;
cursor: hand;
border:0px;
padding:10px 8px;
}



#carousel_ul_off {
position:relative;
left:0px; /* 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_off li{
float: left; /* important for inline positioning of the list items */
width:210px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:210px;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
font: bold 10px helvetica;
color: #0066cc;
text-align: center;
}

#carousel_ul_off 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;
cursor: hand;
border:0px;
padding:10px 5px;
}


#left_scroll, #right_scroll{
float:left;
height:130px;
width:45px;
padding:75px 10px 0px 10px;
}
#left_scroll img, #right_scroll img{
border:0; /* remove the default border of linked image */
/*styling*/
cursor: pointer;
cursor: hand;

}





.infiniteCarousel {
  width: 995px;
  position: relative;
  height:220px;
}

.infiniteCarousel .wrapper {
  width: 915px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 220px;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
 /* border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;*/
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 5px;
  margin:15px;
  width:260px;
  height:180px;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: url(/img/arrow.png) no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 88px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}