/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel { position: relative; overflow: hidden; border: 1px solid #E5E5E5; }
.jcarousel > div { width: 10000em; position: relative; /* Optional, required in this case since it's a
element */ list-style: none; margin: 0; padding: 0; }
/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel > div > div { width: 180px; float: left; border-right: 1px solid #E5E5E5; padding: 0 8px; text-align: center; }
/*.jcarousel img { display: block; height: auto !important; width: 146px; }*/
.jcarousel-prev { width: 30px; position: absolute; left: 0px; height: 86px; top: 0px; display: inline-block; border: 1px solid #E5E5E5; background: url(../images/back-slider.png) #fff center center no-repeat; display: none; }
.jcarousel-prev:hover { background: url(../images/back-hover-slider.png) #ff8200 center center no-repeat; }
.jcarousel-next { width: 30px; position: absolute; right: 0px; height: 86px; top: 0px; display: inline-block; border: 1px solid #E5E5E5; background: url(../images/next-slider.png) #fff center center no-repeat; display: none; }
.jcarousel-next:hover { background: url(../images/next-hover-slider.png) #ff8200 center center no-repeat; }