#carousel,
#carousel {background: #000;}
div.scrollable {
	margin-top:12px;
	position:relative;
	overflow:hidden;	 	
	width: 640px;	
	height:143px;
	background:#F8FBFB;
	}
	
#allShows.scrollable {
	width:964px;
	height:194px;
	}
	
div.scrollable div.items,
div.scrollable div.allShowItems {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	padding:0;
	margin:10px 0 0 0;
	clear:both;
	}
	
div.scrollable div.items div {
	float:left;
	width:144px;
	display:block;
	padding:0;
	margin:0 8px 0 0;
	padding-left:10px;
	}

/*--div.scrollable div.items div a img {
	display:block;
	height:86px;
	width:154px;
	margin-bottom:10px;
	margin-left:-10px;
	}--*/
	
div.scrollable div.items div a {cursor:pointer;}

div.scrollable div.items div span.cItemTitle {	
	color:#4d4d4d !important;
	line-height:1em;
	font-weight:bold;
	}

div.scrollable div.items div a:hover {text-decoration:none;}

/*-- a slight tweak to existing infoLightbox styles see layout.css for main styles --*/
div.scrollable div.items div a.infoLightbox {
	float:left;
	margin:11px 0 0 5px;
	}

div.scrollable div.items div.active,div.scrollable div.items div:active {outline:none;}
div.scrollable div.items div a img {border-bottom:4px solid #F8FBFB;display:block; clear:both;}
div.scrollable div.items div a.infoLightbox{float:none!important;margin:1px 0 -2px 4px !important;}	
div.scrollable div.items div.active a img,
div.scrollable div.items div a:hover img {opacity:1;}

div.scrollable div.items a {outline:none;}
div.scrollable div.items div a:hover span.cItemTitle,
div.scrollable div.items div.active a span.cItemTitle {color: #000 !important;}	
div.scrollable div.items div.active a img {border-bottom:4px solid #CC0000;}

#carouselControls {
	background: url(http://www.history.co.uk/docroot/images/carouselControlsBg-twothird.png) 0 0 no-repeat;
	height:21px;
	overflow:hidden;
	}
	
.ui-slider { }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 86px; height: 15px; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

a.next,
a.prev {
 	background: url(../images/ci/but/carouselRight.png) 0 0 no-repeat;
	display:block;
	width:30px;
	height:21px;
	float:left;
	cursor:pointer;
	}

a.prev {background: url(../images/ci/but/carouselLeft.png) 0 0 no-repeat;}
a.prev:hover {background: url(../images/ci/but/carouselLeft.png) 0 -21px no-repeat;}	
a.next:hover {background: url(../images/ci/but/carouselRight.png) 0 -21px no-repeat;}

.ui-slider-horizontal { 
	float:left; 
	height: 15px; 
	width:462px;
	position: relative; 
	text-align: left; 
	margin:3px 102px 0 16px; 
	} /* had to make this 100px smaller to contain the slider handle */
	
.ui-slider-horizontal .ui-slider-handle { top: 0; background:#FFF;}
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 10px; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* homepage carousel override */
#carousel #carouselControls {background: transparent url(../images/ci/bg/carouselControlsBg-full.png) no-repeat scroll 0 0; overflow:hidden;}
#carousel .ui-slider-horizontal { 
	position: relative; 
	text-align: left; 
	float:left; 
	height: 15px;
	margin:3px 102px 0 16px; 
	width:786px;
	}