/* * * * Carousel Navigation * * * */
.carousel-nav { display: block; width: 18px; height: 18px; float: left; margin-top: 27px; }
.move-left { margin-left: 25px; }
.carousel-nav a { display: block; width: 18px; height: 18px; }
.carousel-nav a:hover { background-position-y: -18px; }
.move-left a{ background: url('/images/scrollable/left.gif') no-repeat; }
.move-right a{ background: url('/images/scrollable/right.gif') no-repeat; }

.stepcarousel{
	position: relative; /*leave this value alone*/
	border: 0;
	overflow: scroll; /*leave this value alone*/
	width: 395px; /*Width of Carousel Viewer itself*/
	height: 60px; /*Height should enough to fit largest content's height*/
	padding-bottom: 15px;
	float: left;
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 5px; /*margin around each panel*/
	width: 60px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


/* outmost wrapper element, containing all elements  */
#scroll-gallery {
	display: block;
	height: 60px;
	/* background-color:#efefef; */
	/* border:1px solid #ddd; */
	padding:10px 8px;
	width:523px;
	height:65px;
	margin:0px auto;
	-moz-border-radius:7px;
}

/* container for the scrollable items */
div.items {
	height:66px;	
	margin-left:8px;
	float:left;
	/* width:475px !important; */
}

/* single item */
div.items a {
	display:block;
	float:left;
	margin-right:8px;
	width:64px;
	height:66px;
	/* background:url(/images/scrollable/entry.gif) 0 0 no-repeat; */
	font-size:50px;
	color:#ccc;
	line-height:66px;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
}
div.items a img {
	margin-top: 2px;
}

div.items a:hover {
	color:#999;	
}

div.items a.active {
	background-position:-174px 0;		
	color:#555;
	cursor:default;
}


/* next / prev buttons */
a.prev, a.next {
	background:url(/images/scrollable/left.gif) no-repeat 0 0;
	display:block;
	width:18px;
	height:18px;
	float:left;	
	margin:22px 0 0 0;
	cursor:pointer;
}

a.next {
	background-image:url(/images/scrollable/right.gif)		
}

a.prev:hover {
	background-position:0 -18px;		
}

a.next:hover {
	background-position:0 -18px;		
}


/* navigator */
div.navi {
	display: none;
	position:relative;
	top:-30px;
	left:310px;
	margin-left:-50px;
	width:50px;
	height:0px;
}


/* items inside navigator */
div.navi span {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(/images/scrollable/dots.png) 0 0 no-repeat;     
	cursor:pointer;
}

div.navi span:hover {
	background-position:0 -8px;      
}

div.navi span.active {
	background-position:0 -16px;     
}