1/** 2 * Copyright (c) 2012 Anders Ekdahl (http://coffeescripter.com/) 3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 5 * 6 * Version: 1.2.7 7 * 8 * Demo and documentation: http://coffeescripter.com/code/ad-gallery/ 9 */ 10.ad-gallery { 11 width: 600px; 12} 13.ad-gallery, .ad-gallery * { 14 margin: 0; 15 padding: 0; 16} 17 .ad-gallery .ad-image-wrapper { 18 width: 100%; 19 height: 400px; 20 margin-bottom: 10px; 21 position: relative; 22 overflow: hidden; 23 } 24 .ad-gallery .ad-image-wrapper .ad-loader { 25 position: absolute; 26 z-index: 10; 27 top: 48%; 28 left: 48%; 29 border: 1px solid #CCC; 30 } 31 .ad-gallery .ad-image-wrapper .ad-next { 32 position: absolute; 33 right: 0; 34 top: 0; 35 width: 25%; 36 height: 100%; 37 cursor: pointer; 38 display: block; 39 z-index: 200; 40 } 41 .ad-gallery .ad-image-wrapper .ad-prev { 42 position: absolute; 43 left: 0; 44 top: 0; 45 width: 25%; 46 height: 100%; 47 cursor: pointer; 48 display: block; 49 z-index: 200; 50 } 51 .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { 52 /* Or else IE will hide it */ 53 background: url(trans.gif); 54 } 55 .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { 56 background: url(ad_prev.png); 57 width: 30px; 58 height: 30px; 59 display: none; 60 position: absolute; 61 top: 47%; 62 left: 0; 63 z-index: 101; 64 } 65 .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { 66 background: url(ad_next.png); 67 width: 30px; 68 height: 30px; 69 right: 0; 70 left: auto; 71 } 72 .ad-gallery .ad-image-wrapper .ad-image { 73 position: absolute; 74 overflow: hidden; 75 top: 0; 76 left: 0; 77 z-index: 9; 78 } 79 .ad-gallery .ad-image-wrapper .ad-image a img { 80 border: 0; 81 } 82 .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { 83 position: absolute; 84 bottom: 0px; 85 left: 0px; 86 padding: 7px; 87 text-align: left; 88 width: 100%; 89 z-index: 2; 90 background: url(opa75.png); 91 color: #000; 92 } 93 * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { 94 background: none; 95 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png'); 96 } 97 .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { 98 display: block; 99 } 100 .ad-gallery .ad-controls { 101 height: 20px; 102 } 103 .ad-gallery .ad-info { 104 float: left; 105 } 106 .ad-gallery .ad-slideshow-controls { 107 float: right; 108 } 109 .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { 110 padding-left: 5px; 111 cursor: pointer; 112 } 113 .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { 114 padding-left: 5px; 115 font-size: 0.9em; 116 } 117 .ad-gallery .ad-slideshow-running .ad-slideshow-start { 118 cursor: default; 119 font-style: italic; 120 } 121 .ad-gallery .ad-nav { 122 width: 100%; 123 position: relative; 124 } 125 .ad-gallery .ad-forward, .ad-gallery .ad-back { 126 position: absolute; 127 top: 0; 128 height: 100%; 129 z-index: 10; 130 } 131 /* IE 6 doesn't like height: 100% */ 132 * html .ad-gallery .ad-forward, .ad-gallery .ad-back { 133 height: 100px; 134 } 135 .ad-gallery .ad-back { 136 cursor: pointer; 137 left: -20px; 138 width: 13px; 139 display: block; 140 background: url(ad_scroll_back.png) 0px 22px no-repeat; 141 } 142 .ad-gallery .ad-forward { 143 cursor: pointer; 144 display: block; 145 right: -20px; 146 width: 13px; 147 background: url(ad_scroll_forward.png) 0px 22px no-repeat; 148 } 149 .ad-gallery .ad-nav .ad-thumbs { 150 overflow: hidden; 151 width: 100%; 152 } 153 .ad-gallery .ad-thumbs .ad-thumb-list { 154 float: left; 155 width: 9000px; 156 list-style: none; 157 } 158 .ad-gallery .ad-thumbs li { 159 float: left; 160 padding-right: 5px; 161 } 162 .ad-gallery .ad-thumbs li a { 163 display: block; 164 } 165 .ad-gallery .ad-thumbs li a img { 166 border: 3px solid #CCC; 167 display: block; 168 } 169 .ad-gallery .ad-thumbs li a.ad-active img { 170 border: 3px solid #616161; 171 } 172/* Can't do display none, since Opera won't load the images then */ 173.ad-preloads { 174 position: absolute; 175 left: -9000px; 176 top: -9000px; 177}