#carousel_container{
    left:7px;
    position: relative;
    top: 0;
}

#carousel_inner {
    float:left; /* important for inline positioning */
    /* important (this width = width of list item(including margin) * items shown */
    overflow: hidden;  /* important (hide the items outside the div) */
    /* non-important styling bellow */
    position:relative;
    width:840px;
    background:url("../images/bg_slider.jpg") repeat scroll 0 0 transparent;
    height:194px !important;
    width:876px !important;
}

#carousel_ul {
    position:relative;
    left:-292px; /* 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;
    float: left;
    display: block;
}
#carousel_ul li{
    display: inline-block;
    float: left;
    width: 282px;
    height: auto !important;
    margin:25px 5px 0;
}

#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;
}
#carousel_ul li img{display: block; margin: 0 0 5px}
#carousel_ul li h3{color:#fff;font-size: 11px;}
#carousel_ul li p{color:#ccc;font-size: 11px; padding: 0 10px 25px; text-align: left}
#carousel_ul li p:hover{color: #ddd;}
#carousel_ul li p b{font-size: 13px}
#left_scroll, #right_scroll{
    float:left;
    height:182px;
    width:31px;
    text-align: center;
}
#left_scroll img, #right_scroll img{
    /*styling*/
    cursor: pointer;
    cursor: hand;
}