/* Styles for carousels */ .timeline_container{ padding-bottom: 16px; width: 976px; } div.timeline_container div#thumbnails{ padding-bottom: 16px; } #thumbnails{ visibility:hidden; height: 0px; } #slideshow{ visibility:hidden; height: 0px; } #dynamic_content{ display: none; } .gelui-carousel { background-color: #ffffff; position:relative; width:100%; overflow: hidden; } #slideshow .gelui-carousel .gelui-carousel-viewport { width: 906px; } .gelui-carousel .gelui-carousel-viewport { position: relative; margin: 0 35px; height: 106px; width: 872px; } .gelui-carousel ul { width: 20000px; position: absolute; list-style: none; margin: 0; padding: 0; } .gelui-carousel li { float: left; margin: 0 1px 0 0; padding: 0; } *[dir=rtl] .gelui-carousel li { float: right; margin: 0 0 0 10px; } .gelui-carousel .gelui-carousel-navigation { border:none; position:absolute; top:0; margin:0; padding:0; width:35px; height:100%; z-index:100; } .gelui-carousel .gelui-carousel-navigation legend { display:none; } .gelui-carousel .gelui-carousel-button { display:block; width:100%; height:100%; border:none; background: url("/news/special/technology/11/shuttle_timeline/css/v1/img/back_next_35x360.png") no-repeat scroll transparent; text-indent:-9999px; cursor:pointer; } .gelui-carousel .gelui-carousel-button:hover { cursor:pointer; } .gelui-carousel .gelui-carousel-navigation-left { left:0; } .gelui-carousel .gelui-carousel-navigation-right { right:0; } #thumbnails div.gelui-carousel .gelui-carousel-button-prev{ background-position: -85px -126px; } #thumbnails div.gelui-carousel .gelui-carousel-button-next{ background-position: -521px -126px; } #thumbnails div.gelui-carousel .gelui-carousel-button-prev:hover { background-position: -170px -126px; } #thumbnails div.gelui-carousel .gelui-carousel-button-next:hover { background-position: -606px -126px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev { background-position: -85px 0px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next { background-position: -521px 0px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:hover { background-position: -170px 0px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:hover { background-position: -606px 0px; } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:active { background-position: -255px -126px; } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:active { background-position: -691px -126px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:active { background-position: -255px 0px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:active { background-position: -691px 0px; } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled, #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled:hover, #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled:active{ background-position: 0px -126px; cursor:default; } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled, #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled:hover, #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled:active{ background-position: -436px -126px; cursor:default; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled, #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled:hover, #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev.gelui-carousel-button-disabled:active{ background-position: 0px 0px; cursor:default; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled, #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled:hover, #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next.gelui-carousel-button-disabled:active{ background-position: -436px -0px; cursor:default; } /* Styles for the image gallery */ #slideshow .gelui-carousel, #thumbnails .gelui-carousel { width:976px; } #slideshow .gelui-carousel .gelui-carousel-viewport { height:360px; } #carousel1 ul, #carousel2 ul { padding:0; } #carousel1 li, #carousel2 li { width:112px; height:106px; position:relative; list-style-type:none; display:inline-block; overflow:hidden; margin: 0; padding: 0; } #carousel1 li { width:906px; height:360px; background: none; } #carousel2 li { margin-left: 1px; cursor:pointer; } #carousel1 li img, #carousel2 li img { margin:0; border:none; } #carousel2 .item-text { /*background: url("http://news.bbcimg.co.uk/view/1_4_15/cream/hi/shared/img/transparencies/rgba-0-0-0-07.png") repeat scroll 0 0 transparent;*/ background: #666666; color: #FFFFFF; display: block; font-size: 0.9em; height: 43px; padding: 4px 0 0 8px; position: relative; top: -3px; width: 104px; } #carousel2 li.mouse-over, #carousel2 li.active{ border: 2px solid #D1700E; height: 102px; width: 108px; } div.thumbnail-holder{ height: 106px; width: 112px; } #carousel2 li.mouse-over div.thumbnail-holder, #carousel2 li.active div.thumbnail-holder{ margin: -2px; } .ie #thumbnails .gelui-carousel .gelui-carousel-button { height: 106px; width: 35px; } .ie #slideshow .gelui-carousel .gelui-carousel-button { height: 360px; width: 35px; } .ie #slideshow .gelui-carousel-button-prev.gelui-carousel-button-disabled{ background: #666666; cursor:default; } .ie #slideshow .gelui-carousel-button-next.gelui-carousel-button-disabled{ background: #666666; cursor:default; } .ie #thumbnails .gelui-carousel-button-prev.gelui-carousel-button-disabled{ background: #666666; cursor:default; } .ie #thumbnails .gelui-carousel-button-next.gelui-carousel-button-disabled{ background: #666666; cursor:default; } .ie7 #carousel2 .item-text , .ie #carousel2 .item-text { top: 0px; } .ie7 #thumbnails div.gelui-carousel .gelui-carousel-button-prev.active_but, .ie #thumbnails div.gelui-carousel .gelui-carousel-button-prev.active_but { background-position: -255px -126px; } .ie7 #thumbnails div.gelui-carousel .gelui-carousel-button-next.active_but, .ie #thumbnails div.gelui-carousel .gelui-carousel-button-next.active_but { background-position: -691px -126px; } .ie7 #slideshow div.gelui-carousel .gelui-carousel-button-prev.active_but, .ie #slideshow div.gelui-carousel .gelui-carousel-button-prev.active_but { background-position: -255px 0px; } .ie7 #slideshow div.gelui-carousel .gelui-carousel-button-next.active_but, .ie #slideshow div.gelui-carousel .gelui-carousel-button-next.active_but { background-position: -691px 0px; }