/* ----------------------------------------------------------
Site: Strictly Come Dancing
Filename: carousels.css
Author: Stephen Bardwell <stephen.bardwell@bbc.co.uk>
Created: 2010.10.01
Modified: 2010.10.08 Stephen Bardwell <stephen.bardwell@bbc.co.uk> 
Description: For styling both width of glow carousel used in the SCD site	
Comments: Styles for individual IE versions in separate files - e.g. s-ie7.css
---------------------------------------------------------- */

#carousel {min-height:212px;position:relative;background-color:#000; margin-left:-13px; margin-top:-17px;}

/* width for the standard width carousel */
.carousel-stnd #carousel {width:624px;}
.carousel-stnd #carousel .carousel-window {margin-left:69px}
html* .carousel-stnd #carousel .carousel-window {margin-left:0px}
html* .carousel-stnd #carousel .carousel-window {padding-left:69px} /* margin left will not work in ie6 */

/* width for the full page width carousel */
.carousel-wide #carousel {width:976px;}
.carousel-wide #carousel .carousel-window {margin-left:82px}
html* .carousel-wide #carousel .carousel-window {margin-left:0px}
html* .carousel-wide #carousel .carousel-window {padding-left:82px} /* margin left will not work in ie6 */

.carousel-light {padding-top:22px;}
.carousel-window {background-color:#000 !important;}
.carousel-title {color:#F3F6A6;}

#carousel h2 {padding-left:16px;padding-top:0.7em;color:#FFF;}
#carousel h2, #carousel li a {font-weight:bold;}

#carousel li {float:left;display:block;position:relative;width:160px;height:12.4em;overflow:hidden;padding:0 1px;}
#carousel li a {position:relative;display:block;width:160px;height:12.4em;text-decoration:none;}
#carousel li a img {margin-bottom:10px;}
#carousel li.carousel-pad {background:url(/staticarchive/0907450ceac5872763c2d7e38f73ef7866bf6ec6.gif) no-repeat 0 0;}
#carousel .spacer { display:block; width:100%; height:16px;}
#carousel-wrapper {overflow:hidden;height:12.4em;}

#carousel-image, #carousel-opacity {position:absolute;left:0;top:0;display:block;width:160px;height:90px;}
#carousel-item {display:block;padding:10px 0;width:160px;}
#carousel-opacity, #carousel #carousel-text, #carousel .item-rating, #carousel .button {display:none;}

#carousel li a:hover #carousel-item, #carousel li a:hover #carousel-opacity, #carousel .icon-overlay  {display:block;cursor:pointer}
#carousel-title, #carousel-text {display:block;}
#carousel .icon-overlay {position:absolute;left:0;top:0;width:40px;height:36px;opacity:0.6;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;background-image:url(/staticarchive/fc427835d894bd28ae84d9c6c4367bedc360b8bb.gif);}
#carousel a:hover .icon-overlay {opacity:1;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;}

#carousel .pageNav {border:none;height:12px;position:absolute;top:0;margin-left:0 !important;text-align:right;}
.carousel-stnd #carousel .pageNav {width:624px;}
html* .carousel-stnd, html* .carousel-wide {padding-right:0 !important;} /* needed for ie6 else carousel container pushes out too wide & right column is forced down under the main content column*/
.carousel-wide #carousel .pageNav {width:974px;}
#carousel .pageNav li {padding:0;height:8px;line-height:8px;width:8px;border:none;margin:0 2px;text-align:left; text-indent:-9999px;background:none;float:none;display:inline;position:relative;overflow:visible;}
#carousel .pageNav li div {width:8px;height:8px;background-color:#8a8a8a;display:inline-block;text-align:left;text-indent:-9999px;position:relative;top:0;overflow:hidden;}
#carousel .pageNav li.dotActive div {background-color:#D0BDFF;}

#carousel .pageNav .arrow, #carousel .pageNav .arrow a {display:block;height:90px;background-image:url(/staticarchive/a41fa9569e427f3781238d93fa9337970e192250.gif);}
#carousel .pageNav .arrow {top:22px;position:absolute;margin:0;}
#carousel .pageNav .arrow a {text-indent:-9999px;cursor:pointer;outline:0;}
.carousel-stnd #carousel .pageNav .arrow, .carousel-stnd #carousel .pageNav .arrow a {width:68px;}
.carousel-wide #carousel .pageNav .arrow, .carousel-wide #carousel .pageNav .arrow a {width:82px;}
#carousel .pageNav #leftarrow {left:0;}
#carousel .pageNav #rightarrow {right:0;}

/* arrow positioning for the standard width carousel */
.carousel-stnd #carousel .pageNav #leftarrow a {background-position:-8px 0;}
.carousel-stnd #carousel .pageNav #leftarrow a:hover {background-position:-8px -90px;}
.carousel-stnd #carousel .pageNav #leftarrow.carousel-prev-disabled a, .carousel-stnd #carousel .pageNav #leftarrow.carousel-prev-disabled a:hover {background-position:-8px -180px}
.carousel-stnd #carousel .pageNav #rightarrow a {background-position:-86px 0;}
.carousel-stnd #carousel .pageNav #rightarrow a:hover {background-position:-86px -90px;}
.carousel-stnd #carousel .pageNav #rightarrow.carousel-next-disabled a, .carousel-stnd #carousel .pageNav #rightarrow.carousel-next-disabled a:hover {background-position:-86px -180px}

/* arrow positioning for the full page width carousel */
.carousel-wide #carousel .pageNav #leftarrow a {background-position:0 0;}
.carousel-wide #carousel .pageNav #leftarrow a:hover {background-position:0 -90px;}
.carousel-wide #carousel .pageNav #leftarrow.carousel-prev-disabled a, .carousel-wide #carousel .pageNav #leftarrow.carousel-prev-disabled a:hover {background-position:0 -180px}
.carousel-wide #carousel .pageNav #rightarrow a {background-position:-82px 0;}
.carousel-wide #carousel .pageNav #rightarrow a:hover {background-position:-82px -90px;}
.carousel-wide #carousel .pageNav #rightarrow.carousel-next-disabled a, .carousel-wide #carousel .pageNav #rightarrow.carousel-next-disabled a:hover {background-position:-82px -180px}

#carousel .pageNav .carousel-prev-disabled a, #carousel .pageNav .carousel-next-disabled a {cursor:default;}
#carousel .pageNav .dot .dotLabel {display:inline-block;}
html* #carousel .pageNav .dot .dotLabel {display:inline;} /* required to prevent the navigation dots stacking in both ie6 & 7 */

a:hover span.carousel-item {text-decoration:underline;cursor:pointer;} /* stating the cursor type assists ie6 & 7 */