#carousel_container
{
margin:0px; padding:0px; width:432px;
}

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

#carousel_ul {
position:relative;
left:-510px; /* 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 */
}

#carousel_ul li{
float:left; /* important for inline positioning of the list items */
width:500px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
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;
}
#left_scroll, #right_scroll{
width:100%;
background: #fff;
}
#left_scroll img, #right_scroll img{
/*styling*/
cursor: pointer;
cursor: hand;
}

table.carousel_tbl
{
    width: 100%;
}

table.carousel_tbl td
{
  text-align: center !important;
  vertical-align: middle;
}

.ct_1,.ct_3
{
  text-align: center;
}


.ct_2
{
  width:510px;
}