/* Styles for carousels */ .timeline_container{ padding-bottom: 16px; width: 976px; } div.timeline_container div#thumbnails{ /*padding-bottom: 16px;*/ } #thumbnails { visibility: hidden; height: 0px; margin-bottom: 16px; } #slideshow { visibility:hidden; height: 0px; border: 1px solid #EDEDED; } #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: 30000px; 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") repeat-y 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 90px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next { background-position: -521px 90px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:hover { background-position: -170px 90px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:hover { background-position: -606px 90px; } #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 90px; } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:active { background-position: -691px 90px; } #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 90px; 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 90px; cursor:default; } /* Styles for the image gallery */ #slideshow .gelui-carousel, #thumbnails .gelui-carousel { width:976px; } #slideshow .gelui-carousel .gelui-carousel-viewport { height: 360px; height: 500px; } #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: 500px; 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: 6px 0 0 8px; position: relative; top: -35px; width: 235px; } #carousel2 li.mouse-over, #carousel2 li.active{ border: 2px solid #D1700E; width: 239px; height: 131px; } 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: -30px; } .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 90px; } .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 90px; } #carousel2 { height: 135px; } #carousel2 li { display: block; float: left; height: 135px; width: 243px; } div.thumbnail-holder { width: 243px; height: 135px; }