/* Styles for the whole carousel */ .timeline_container { padding-bottom: 16px; width: 976px; } #dynamic_content{ display: none; } /*Thumbnails, 'carousel2'*/ #thumbnails { visibility: hidden; height: 0px; margin-bottom: 16px; } /*Slideshow, 'carousel1'*/ #slideshow { visibility:hidden; height: 0px; border: 1px solid #EDEDED; margin-bottom: 16px; } .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: 131px; /*99px; */ } .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 center; /*background-position: -85px -126px;*/ } #thumbnails div.gelui-carousel .gelui-carousel-button-next{ background-position: -521px center; /*background-position: -521px -126px;*/ } #thumbnails div.gelui-carousel .gelui-carousel-button-prev:hover { background-position: -170px center;/*background-position: -170px -126px;*/ } #thumbnails div.gelui-carousel .gelui-carousel-button-next:hover { background-position: -606px center; /*background-position: -606px -126px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev { background-position: -85px center; /*background-position: -85px 90px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next { background-position: -521px center; /*background-position: -521px 90px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:hover { background-position: -170px center; /*background-position: -170px 90px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:hover { background-position: -606px center; /*background-position: -606px 90px;*/ } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:active { background-position: -255px center; /*background-position: -255px -126px;*/ } #thumbnails div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:active { background-position: -691px center; /*background-position: -691px -126px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-prev:active { background-position: -255px center; /*background-position: -255px 90px;*/ } #slideshow div.gelui-carousel .gelui-carousel-button.gelui-carousel-button-next:active { background-position: -691px center; /*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 center; /*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 center; /*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 center; /*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 center; /*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: 488px; } #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: 100%; 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: 27px; padding: 6px 0 0 8px; position: relative; top: -3px; width: 172px; }/* #carousel2 li.mouse-over, #carousel2 li.active { border: 2px solid #D1700E; width: 178px; height: 128px; 97px; }*/ #carousel2 li.mouse-over .thumbnail-holder .highlight, #carousel2 li.active .thumbnail-holder .highlight { border: 3px solid #D1700E; width: 175px; height: 126px; position: absolute; top: 0; left: 0; } div.thumbnail-holder{ height: 130px;/*106*/ width: 112px; } /* #carousel2 li.mouse-over div.thumbnail-holder, #carousel2 li.active div.thumbnail-holder { margin: -2px; height: 128px; }*/ .ie #thumbnails .gelui-carousel .gelui-carousel-button { height: 130px;/*106*/ 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 li { display: block; float: left; height: 131px; width: 180px; } div.thumbnail-holder { width: 180px; height: 130px; } #st-intro .st-overlay p { line-height: 24px; width: 480px; margin-bottom: 8px; } #st-intro .st-overlay h2 { font-size: 36px; padding-top: 16px; width: 480px; padding-bottom: 16px; } #st-intro .st-overlay strong { color: #fff; } #st-intro .st-intro-cta { top: auto; bottom: 35px; width: 530px; } #st-intro .st-intro-icon { top: 463px; left: 518px; } .st-frame-wrapper p { font-size: 13px; padding: 0 8px 16px; } #carousel1 li img { margin-left: 1px; } #carousel1 .item-4 .st-frame-wrapper .st-media { background: #EDEDED; } #carousel1 .item-4 .st-frame-wrapper .st-media { padding-top: 36px; margin-top: 0; height: 396px; padding: 36px 16px 0; } #carousel1 .item-4 .st-frame-wrapper .st-text { padding: 0; } .item-4 div.st-media a.iplay div.ip { left: 1px; }