#carousel {
background: #333333 url(images/carousel-bg.jpg) top left repeat-x;
width: 100%;
float: left;
}

#carousel-inside {
width: 960px;
height: 170px;
margin: 0px auto;
padding: 20px 0 20px 0;
}

.infinite {
width: 960px;
position: relative;
}

.infinite .carousel {
width: 960px; /* .infinite width - (.carousel margin-left + .carousel margin-right) */
overflow: auto;
height: 170px;
position: absolute;
top: 0;
}

.infinite .carousel ul {
width: 10000px;
}

.infinite ul li {
float:left;
width: 240px;
height: 170px;
margin: 0;
padding: 0 3px 0 0;
}

.infinite .arrow {
display: block;
height: 67px;
width: 47px;
background: url(images/arrow.png) no-repeat 0 0;
text-indent: -999px;
position: absolute;
top: 0px;
cursor: pointer;
}

.infinite .forward {
background-position: -47px 0;
top: 50px;
right: 10px;
}

.infinite .forward:hover {
background-position: -47px -67px;
}

.infinite .back {
background-position: 0 0;
top: 50px;
left: 10px;
}

.infinite .back:hover {
background-position: 0 -67px;
}

.carousel-title {
background: url(images/title-bg.png) repeat;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
width: 228px;
text-align: center;
position: absolute;
margin: -40px 0 0 1px;
padding: 2px 0 2px 0;
}

.post-frame-carousel {
background: url(images/post-frame-carousel.png) 0 0 no-repeat;
width: 240px;
height: 170px;
position: absolute;
}

.post-frame-carousel:hover {
background: url(images/post-frame-carousel.png) 0 -170px no-repeat;
width: 240px;
height: 170px;
}

.post-frame-carousel-video {
background: url(images/post-frame-carousel-video.png) 0 0 no-repeat;
width: 240px;
height: 170px;
position: absolute;
}

.post-frame-carousel-video:hover {
background: url(images/post-frame-carousel-video.png) 0 -170px no-repeat;
width: 240px;
height: 170px;
}

.carousel a {
color: #FFFFFF;
}

.carousel a:hover {
color: #CCCCCC;
}