vcs.maemo.org Git - marble/blob - www/css/jd.gallery.css

   1 #myGallery, #myGallerySet, #flickrGallery
   2 {
   3         width: 460px;
   4         height: 345px;
   5         z-index:5;
   6         border: 1px solid #000;
   7 }
   8
   9 .jdGallery a
  10 {
  11         outline:0;
  12 }
  13
  14 #flickrGallery
  15 {
  16         width: 500px;
  17         height: 334px;
  18 }
  19
  20 #myGallery img.thumbnail, #myGallerySet img.thumbnail
  21 {
  22         display: none;
  23 }
  24
  25 .jdGallery
  26 {
  27         overflow: hidden;
  28         position: relative;
  29 }
  30
  31 .jdGallery img
  32 {
  33         border: 0;
  34         margin: 0;
  35 }
  36
  37 .jdGallery .slideElement
  38 {
  39         width: 100%;
  40         height: 100%;
  41         background-color: #000;
  42         background-repeat: no-repeat;
  43         background-position: center center;
  44         background-image: url('img/loading-bar-black.gif');
  45 }
  46
  47 .jdGallery .loadingElement
  48 {
  49         width: 100%;
  50         height: 100%;
  51         position: absolute;
  52         left: 0;
  53         top: 0;
  54         background-color: #000;
  55         background-repeat: no-repeat;
  56         background-position: center center;
  57         background-image: url('img/loading-bar-black.gif');
  58 }
  59
  60 .jdGallery .slideInfoZone
  61 {
  62         position: absolute;
  63         z-index: 10;
  64         width: 100%;
  65         margin: 0px;
  66         left: 0;
  67         bottom: 0;
  68         height: 38px;
  69         background: #222;
  70         color: #fff;
  71         text-indent: 0;
  72         overflow: hidden;
  73 }
  74
  75 * html .jdGallery .slideInfoZone
  76 {
  77         bottom: -1px;
  78 }
  79
  80 .jdGallery .slideInfoZone h2
  81 {
  82         padding: 0;
  83         font-size: 100%;
  84         margin: 0;
  85         margin: 2px 5px;
  86         font-weight: bold;
  87         color: inherit;
  88 }
  89
  90 .jdGallery .slideInfoZone p
  91 {
  92         padding: 0;
  93         font-size: 80%;
  94         margin: 2px 5px;
  95         color: #eee;
  96 }
  97
  98 .jdGallery div.carouselContainer
  99 {
 100         position: absolute;
 101         height: 135px;
 102         width: 100%;
 103         z-index: 10;
 104         margin: 0px;
 105         left: 0;
 106         top: 0;
 107 }
 108
 109 .jdGallery a.carouselBtn
 110 {
 111         position: absolute;
 112         bottom: 0;
 113         right: 30px;
 114         height: 20px;
 115         /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
 116         text-align: center;
 117         padding: 0 10px;
 118         font-size: 13px;
 119         background: #333;
 120         color: #fff;
 121         cursor: pointer;
 122 }
 123
 124 .jdGallery .carousel
 125 {
 126         position: absolute;
 127         width: 100%;
 128         margin: 0px;
 129         left: 0;
 130         top: 0;
 131         height: 115px;
 132         background: #333;
 133         color: #fff;
 134         text-indent: 0;
 135         overflow: hidden;
 136 }
 137
 138 .jdExtCarousel
 139 {
 140         overflow: hidden;
 141         position: relative;
 142 }
 143
 144 .jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
 145 {
 146         position: absolute;
 147         width: 100%;
 148         height: 78px;
 149         top: 10px;
 150         left: 0;
 151         overflow: hidden;
 152 }
 153
 154 .jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
 155 {
 156         position: relative;
 157 }
 158
 159 .jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
 160 {
 161         cursor: pointer;
 162         background: #000;
 163         background-position: center center;
 164         float: left;
 165         border: solid 1px #fff;
 166 }
 167
 168 .jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
 169 {
 170         margin-bottom: 10px;
 171 }
 172
 173 .jdGallery .carousel .label, .jdExtCarousel .label
 174 {
 175         font-size: 13px;
 176         position: absolute;
 177         bottom: 5px;
 178         left: 10px;
 179         padding: 0;
 180         margin: 0;
 181 }
 182
 183 .jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
 184 {
 185         font-size: 10px;
 186         position: absolute;
 187         bottom: 5px;
 188         right: 10px;
 189         padding: 1px 2px;
 190         margin: 0;
 191         background: #222;
 192         border: 1px solid #888;
 193         cursor: pointer;
 194 }
 195
 196 .jdGallery .carousel .label .number, .jdExtCarousel .label .number
 197 {
 198         color: #b5b5b5;
 199 }
 200
 201 .jdGallery a
 202 {
 203         font-size: 100%;
 204         text-decoration: none;
 205         color: inherit;
 206 }
 207
 208 .jdGallery a.right, .jdGallery a.left
 209 {
 210         position: absolute;
 211         height: 99%;
 212         width: 25%;
 213         cursor: pointer;
 214         z-index:10;
 215         filter:alpha(opacity=20);
 216         -moz-opacity:0.2;
 217         -khtml-opacity: 0.2;
 218         opacity: 0.2;
 219 }
 220
 221 * html .jdGallery a.right, * html .jdGallery a.left
 222 {
 223         filter:alpha(opacity=50);
 224 }
 225
 226 .jdGallery a.right:hover, .jdGallery a.left:hover
 227 {
 228         filter:alpha(opacity=80);
 229         -moz-opacity:0.8;
 230         -khtml-opacity: 0.8;
 231         opacity: 0.8;
 232 }
 233
 234 .jdGallery a.left
 235 {
 236         left: 0;
 237         top: 0;
 238         background: url('img/fleche1.png') no-repeat center left;
 239 }
 240
 241 * html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
 242
 243 .jdGallery a.right
 244 {
 245         right: 0;
 246         top: 0;
 247         background: url('img/fleche2.png') no-repeat center right;
 248 }
 249
 250 * html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
 251
 252 .jdGallery a.open
 253 {
 254         left: 0;
 255         top: 0;
 256         width: 100%;
 257         height: 100%;
 258 }
 259
 260 .withArrows a.open
 261 {
 262         position: absolute;
 263         top: 0;
 264         left: 25%;
 265         height: 99%;
 266         width: 50%;
 267         cursor: pointer;
 268         z-index: 10;
 269         background: none;
 270         -moz-opacity:0.8;
 271         -khtml-opacity: 0.8;
 272         opacity: 0.8;
 273 }
 274
 275 .withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }
 276
 277 * html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
 278         filter:alpha(opacity=80); }
 279
 280
 281 /* Gallery Sets */
 282
 283 .jdGallery a.gallerySelectorBtn
 284 {
 285         z-index: 15;
 286         position: absolute;
 287         top: 0;
 288         left: 30px;
 289         height: 20px;
 290         /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
 291         text-align: center;
 292         padding: 0 10px;
 293         font-size: 13px;
 294         background: #333;
 295         color: #fff;
 296         cursor: pointer;
 297         opacity: .4;
 298         -moz-opacity: .4;
 299         -khtml-opacity: 0.4;
 300         filter:alpha(opacity=40);
 301 }
 302
 303 .jdGallery .gallerySelector
 304 {
 305         z-index: 20;
 306         width: 100%;
 307         height: 100%;
 308         position: absolute;
 309         top: 0;
 310         left: 0;
 311         background: #000;
 312 }
 313
 314 .jdGallery .gallerySelector h2
 315 {
 316         margin: 0;
 317         padding: 10px 20px 10px 20px;
 318         font-size: 20px;
 319         line-height: 30px;
 320         color: #fff;
 321 }
 322
 323 .jdGallery .gallerySelector .gallerySelectorWrapper
 324 {
 325         overflow: hidden;
 326 }
 327
 328 .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
 329 {
 330         margin-left: 10px;
 331         margin-top: 10px;
 332         border: 1px solid #888;
 333         padding: 5px;
 334         height: 40px;
 335         color: #fff;
 336         cursor: pointer;
 337         float: left;
 338 }
 339
 340 .jdGallery .gallerySelector .gallerySelectorInner div.hover
 341 {
 342         background: #333;
 343 }
 344
 345 .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
 346 {
 347         background: #000;
 348         background-position: center center;
 349         float: left;
 350         border: none;
 351         width: 40px;
 352         height: 40px;
 353         margin-right: 5px;
 354 }
 355
 356 .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
 357 {
 358         margin: 0;
 359         padding: 0;
 360         font-size: 12px;
 361         font-weight: normal;
 362 }
 363
 364 .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
 365 {
 366         margin: 0;
 367         padding: 0;
 368         font-size: 12px;
 369         font-weight: normal;
 370         color: #aaa;
 371 }