/** * Copyright (c) 2012 Anders Ekdahl (http://coffeescripter.com/) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version: 1.2.7 * * Demo and documentation: http://coffeescripter.com/code/ad-gallery/ */.ad-gallery { width: 600px;}.ad-gallery, .ad-gallery * { margin: 0; padding: 0;} .ad-gallery .ad-image-wrapper { width: 100%; height: 400px; margin-bottom: 10px; position: relative; overflow: hidden; } .ad-gallery .ad-image-wrapper .ad-loader { position: absolute; z-index: 10; top: 48%; left: 48%; border: 1px solid #CCC; width: 28px; } .ad-gallery .ad-image-wrapper .ad-next { position: absolute; right: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 200; } .ad-gallery .ad-image-wrapper .ad-prev { position: absolute; left: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 200; } .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { /* Or else IE will hide it */ background: url(images/trans.gif); } .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(images/ad_prev.png); width: 30px; height: 30px; display: none; position: absolute; top: 47%; left: 0; z-index: 101; box-shadow: 0 0 3px #000; } .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(images/ad_next.png); width: 30px; height: 30px; right: 0; left: auto; box-shadow: 0 0 3px #000; } .ad-gallery .ad-image-wrapper .ad-image { position: absolute; overflow: hidden; top: 0; left: 0; z-index: 9; } .ad-gallery .ad-image-wrapper .ad-image a img { border: 0; } .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { position: absolute; bottom: 0px; left: 0px; padding: 7px; text-align: left; width: 100%; z-index: 2; background: url(images/opa75.png); } * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='images/opa75.png'); } .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { display: block; } .ad-gallery .ad-controls { height: 20px; } .ad-gallery .ad-info { float: left; } .ad-gallery .ad-slideshow-controls { float: right;display:none !important; } .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { padding-left: 5px; cursor: pointer; } .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { padding-left: 5px; font-size: 0.9em; } .ad-gallery .ad-slideshow-running .ad-slideshow-start { cursor: default; font-style: italic; } .ad-gallery .ad-nav { width: 100%; position: relative; } .ad-gallery .ad-forward, .ad-gallery .ad-back { position: absolute; top: 0; height: 100%; z-index: 10; } /* IE 6 doesn't like height: 100% */ * html .ad-gallery .ad-forward, .ad-gallery .ad-back { height: 100px; } .ad-gallery .ad-back { cursor: pointer; left: -20px; width: 13px; display: block; background: url(images/ad_scroll_back.png) 0px 22px no-repeat; } .ad-gallery .ad-forward { cursor: pointer; display: block; right: -20px; width: 13px; background: url(images/ad_scroll_forward.png) 0px 22px no-repeat; } .ad-gallery .ad-nav .ad-thumbs { overflow: hidden; width: 100%; } .ad-gallery .ad-thumbs .ad-thumb-list { float: left; width: 90000px !important; list-style: none; } .ad-gallery .ad-thumbs li { float: left; padding-right: 5px; } .ad-gallery .ad-thumbs li a { display: block; } .ad-gallery .ad-thumbs li a img { border: 3px solid #CCC; display: block; } .ad-gallery .ad-thumbs li a.ad-active img { border: 3px solid #333; }/* Getting rid of the title */.ad-description-title { display:none !important;}.ad-thumbs li a img{width:60px !important;}/* Can't do display none, since Opera won't load the images then */.ad-preloads { position: absolute; left: -9000px; top: -9000px; display:none;}#tabs{overflow:hidden;}#tabs ul li.ui-state-default a{color:#fff;padding:1em;display:block;}#tabs ul li.ui-state-active{ background:#01aef0 !important; text-shadow: 0px 1px 1px #01587a;}#tabs ul li.ui-state-default{ display:inline-block; background:#0189bd;}.lt-ie9 lt-ie8 lt-ie7 #tabs ul li.ui-state-default{ display:inline;}.ad-loader{ z-index:1 !important;}/*Mobile Styling*//* iPad [portrait + landscape] */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {.ad-nav .ad-thumbs { overflow: scroll !important; max-width: 100%; }/* Hide Scroll in IE */ .no-csstransitions .ad-nav .ad-thumbs { overflow: hidden !important; }}.mobile .ad-nav .ad-thumbs, .portrait .ad-nav .ad-thumbs, .landscape .ad-nav .ad-thumbs { overflow-y: scroll !important; max-width: 100%;}.mobile .ad-prev-image, .portrait .ad-prev-image, .landscape .ad-prev-image, .mobile .ad-next-image, .portrait .ad-next-image, .landscape .ad-next-image{ display: none;}.mobile .ad-image, .mobile .ad-gallery .ad-image-wrapper, .mobile .ad-gallery, .portrait .ad-image, .portrait .ad-gallery .ad-image-wrapper, .portrait .ad-gallery, .landscape .ad-image, .landscape .ad-gallery .ad-image-wrapper, .landscape .ad-gallery{ width:100% !important; font-size:11px !important;}.mobile .ad-image, .portrait .ad-image, .landscape .ad-image{ top: 0px !important;}.mobile .ad-gallery .ad-image-wrapper, .portrait .ad-gallery .ad-image-wrapper, .landscape .ad-gallery .ad-image-wrapper{ height: 200px !important;}.mobile #tabs ul li.ui-state-default a, .portrait #tabs ul li.ui-state-default a, .landscape #tabs ul li.ui-state-default a { padding:0.5em !important; font-size:11px !important;}