.carousel_container{
    width:960px;
    height:140px;
}
#carousel_inner {
float:left; 
width:920px;  
height:140px;
overflow: hidden; 
background: #0f1014;
color:#fff;
}

#carousel_ul {
position:relative;
left:-305px; /* 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:295px;  /* fixed width, important */
/* just styling bellow*/
padding:0;
height:120px;
background: #0f1014;
margin-top:10px;
margin-bottom:10px; 
margin-left:5px; 
margin-right:5px; 
}
#carousel_ul li .st{
    height:120px;
    float:left;
}
#carousel_ul li p{
    float:left;
    margin:0 10px 10px 10px;
    width:180px;
    height:65px;
    overflow:hidden;
    font-size:13px;
    line-height: 17px;
}
#carousel_ul li h3{
    float:left;
    margin:10px 10px 5px 10px;
    font-size:17px;
    width: 180px;
    color: #fff;
}
#carousel_ul li h3 a, #carousel_ul li h3 a:visited{
    float:left;
    margin:0;
    font-size:17px;
    width: 180px;
    color: #fff;
    text-decoration: none;
}
#carousel_ul li h3 a:hover{
    color: red;
}
#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*/
margin-top:15px;
border:0px; 
max-width: 90px;
max-height: 90px;
}
#right_scroll{
float:left; 
height:70px; 
width:40px; 
cursor: pointer;
background: url('c-next-gray.png');
}
#right_scroll:hover{
    background: url('c-next-red.png');
    cursor: pointer; 
}
#left_scroll{
float:left; 
height:70px; 
width:40px; 
background: url('c-back-gray.png');
cursor: pointer; 
}
#left_scroll:hover{
    background: url('c-back-red.png');
    cursor: pointer;  
}