/*  CAROUSEL */

#carousel-container {margin: 0px 0 0px; width: 100%;}
#carousel {margin:0 auto; width: 1000px; height:auto; position: relative;}

#carousel .scrollable {
    position:relative;
    width: 1000px;
    height:300px;
	/*  if you don't want to show anything around the slider (i.e. non-bbc style) then use overflow: hidden here */
	overflow: hidden;
}


.scrollable .items {
    /* this cannot be too large */
	/* DANIEL 07/12/12: 
		The above comment is generated from the http://jquerytools.org/ download facility. For some reason it doesn't want the width to be too large but this can cause problems if there are too many Large (full width) slides */
    width:/*500*/ 50000em;
    position:absolute;
    clear:both;
}

.items div.slide {
    float:left;
    width:1000px;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
	position: absolute;
	z-index:100;
	top:5px;
}

#carousel a.right {
    background: url("/img/_cms/next-icon.png") no-repeat scroll left top transparent;
    clear: right;
    height: 30px;
    margin: 0;
    padding: 0;
    right:0px;
    width: 30px;
	top:134px;

}

 #carousel a.left {
    background: url("/img/_cms/prev-icon.png") no-repeat scroll right top transparent;
    clear: right;
    height: 30px;
    left:0px;
    margin: 0;
    padding: 0;
    width: 30px;
	top:134px;

}

#carousel.navi {
  height: 15px;
  position: absolute;
  width: 200px;
  bottom: 5px;
  left: 30px;
}
 
/* items inside navigator */
#carousel .navi {
    width:8px;
    height:15px;
    float:left;
    margin:3px;
    display:block;
    font-size:1px;
	cursor: pointer;
	width:200px; 
	position: absolute;
  bottom: 5px;
  left: 30px;

}
 
/* mouseover state */
.navi a:hover {background-position:0 -8px;}
 
/* active state (current page state) */
.navi a.active {background-position:0 -16px;}

/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

/* items inside navigator */
.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(/img/_cms/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
	cursor: pointer;
}
 
/* mouseover state */
.navi a:hover {
    background-position:0 -8px;
}
 

/* ALEX: these styles were needed for the lines between the items as IE was being a pain about borders, margins and padding */
.layout1 {padding: 0px; position: relative;height: 300px; width: 1000px;}
#carousel img {margin:0; border:none;width: auto; height: auto; padding: 0; float: none;}


#carousel a:hover {opacity: 0.8}


.image1 {position:relative;}

.header-carousel-title-text {background:url(/img/opacity70repeat.png) repeat; color:#00405D; position:absolute; width:355px; height:30px; padding:10px 0px 10px 15px; right:0; bottom:10px;}

.header-carousel-title {float:left; width:100%; clear:both; font-size:17px; line-height:17px; font-weight:bold; text-transform:uppercase;}
.header-carousel-text  {float:left; width:100%; clear:both; font-size:13px; line-height:13px; font-weight:bold;}