|
1 #myGallery, #myGallerySet, #flickrGallery |
|
2 { |
|
3 width: 590px; |
|
4 height: 278px; |
|
5 z-index:5; |
|
6 |
|
7 } |
|
8 |
|
9 #flickrGallery |
|
10 { |
|
11 width: 500px; |
|
12 height: 334px; |
|
13 } |
|
14 |
|
15 #myGallery img.thumbnail, #myGallerySet img.thumbnail |
|
16 { |
|
17 display: none; |
|
18 } |
|
19 |
|
20 .jdGallery |
|
21 { |
|
22 overflow: hidden; |
|
23 position: relative; |
|
24 } |
|
25 |
|
26 .jdGallery img |
|
27 { |
|
28 border: 0; |
|
29 margin: 0; |
|
30 } |
|
31 |
|
32 .jdGallery .slideElement |
|
33 { |
|
34 width: 100%; |
|
35 height: 100%; |
|
36 background-color: #000; |
|
37 background-repeat: no-repeat; |
|
38 background-position: center center; |
|
39 background-image: url('img/loading-bar-black.gif'); |
|
40 } |
|
41 |
|
42 .jdGallery .loadingElement |
|
43 { |
|
44 width: 100%; |
|
45 height: 100%; |
|
46 position: absolute; |
|
47 left: 0; |
|
48 top: 0; |
|
49 background-color: #000; |
|
50 background-repeat: no-repeat; |
|
51 background-position: center center; |
|
52 background-image: url('img/loading-bar-black.gif'); |
|
53 } |
|
54 |
|
55 .jdGallery .slideInfoZone |
|
56 { |
|
57 position: absolute; |
|
58 z-index: 10; |
|
59 width: 100%; |
|
60 margin: 0px; |
|
61 left: 0; |
|
62 bottom: 0; |
|
63 height: 88px; |
|
64 background: url(img/slideinfozone-bg.png); |
|
65 color: #fff; |
|
66 text-indent: 0; |
|
67 overflow: hidden; |
|
68 } |
|
69 |
|
70 * html .jdGallery .slideInfoZone |
|
71 { |
|
72 bottom: -1px; |
|
73 } |
|
74 |
|
75 .jdGallery .slideInfoZone h2 |
|
76 { |
|
77 padding: 0; |
|
78 margin: 0; |
|
79 margin: 2px 8px; |
|
80 font-weight: bold; |
|
81 color: #fff; |
|
82 font-family:arial, helvetica; |
|
83 letter-spacing:-1px; |
|
84 font-size:24px; |
|
85 } |
|
86 |
|
87 .jdGallery .slideInfoZone p |
|
88 { |
|
89 padding: 0; |
|
90 font-size: 13px; |
|
91 font-family:arial, helvetica; |
|
92 margin: 2px 8px; |
|
93 color: #eee; |
|
94 height:50px; |
|
95 overflow:hidden; |
|
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: 7px; |
|
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 } |
|
372 |
|
373 |
|
374 .content {margin-bottom:20px;} |