/* CAROUSEL */

/* rgb(2,135,255) dodger blue, rgb(255,0,146) iplayer pink */

.carousel {
	margin   : 0px 0px 25px 0px;
	position : relative;
	height   : 480px;
	width    : 880px;
	overflow : hidden;    
}

.carousel h2 {
	color: black;
}	

.carousel .backgrounds {
	height      : 480px;
	margin-left : 0;
}

.carousel .backgrounds .item {
	width    : 880px;
	height   : 480px;
	float    : left;
	position : relative;
	z-index  : 1;
}

.carousel .panel {
	background : white;
	color      : black;
	position   : absolute;
	right      : 0;
	top        : 0;
	height     : 480px;
	width      : 275px;
	z-index    : 10;
}

.carousel .panel .paging {
	position   : absolute;
	bottom     : 25px;
	left       : 25px;
	width      : 225px;    
	text-align : center;   
}

.carousel .panel .paging a {
	color     : black;
	font-size : 1.1em;
}

.carousel .panel .pause {
    position   : absolute;
    right      : 20px;
    top        : 25px;
    display    : block;
    width      : 18px;
    height     : 18px;
    background : transparent url(../images/carousel_pause_bg.gif) no-repeat 0 0;
    text-indent: -6000px;
}

.carousel .panel .play {
	position    : absolute;
	right       : 20px;
	top         : 25px;
	display     : block;
	width       : 18px;
	height      : 18px;
	background  : transparent url(../images/carousel_play_bg.gif) no-repeat 0 0;
	text-indent : -6000px;
}


.carousel .panel .paging .next{
	position    : absolute;
	right       : 0;
	bottom      : 0;
	display     : block;
	width       : 18px;
	height      : 18px;
	background  : transparent url(../images/carousel_next_bg.gif) no-repeat 0 0;
	text-indent : -6000px;
}

.carousel .panel .paging .previous{
	position    : absolute;
	left        : 0;
	bottom      : 0;
	display     : block;
	width       : 18px;
	height      : 18px;
	background  : transparent url(../images/carousel_previous_bg.gif) no-repeat 0 0;
	text-indent : -6000px;
}

.carousel .panel .paging #numbers a {
	padding : 0px 5px 0 5px;
	color   : rgb(2,135,255);
}

.carousel .panel .paging #numbers a.selected {
    color: rgb(255,0,146);
}

.carousel .panel .paging #numbers {
    color: rgb(2,135,255);
}

.carousel .panel .details_wrapper {
	position : absolute;
	top      : 20px;
	left     : 25px;
	width    : 225px;
	overflow : hidden;
	height   : 480px;
}

.carousel .panel .details_wrapper .details {
    height: 200px;
}

.carousel .panel .details_wrapper .details .detail {
	width  : 225px;
	height : 200px;
	float  : left;
}

.carousel .panel .details_wrapper .details h2 {
	font-size   : 1.6em;
	line-height : 1.2em;
	margin      : 0px 0px 5px 20px;
}

.carousel .panel .details_wrapper .details a.more {
	color     : white;
	font-size : 1.1em;
	margin    : 0px 0px 5px 20px;
}   

/* END CAROUSEL */