Affichage du diaporama flash.
[Portfolio.git] / skins / portfolio_style.css.dtml
1 /*
2 <dtml-with base_properties>
3 <dtml-with portfolio_properties>
4 $Id: portfolio_style.css.dtml 1312 2009-08-26 09:01:06Z pin $
5 $URL: http://svn.luxia.fr/svn/labo/projects/zope/Portfolio/trunk/skins/portfolio_style.css.dtml $
6 */
7 /* Photo / Portfolio */
8 .photo_viewer {
9 width:100%;
10 margin-bottom:1px;
11 }
12
13 .photo_viewer #medium_image {
14 height:603px; /* todo : paramètre */
15 text-align:center;
16 vertical-align:middle;
17 }
18
19 #medium_image.selected {
20 background: &dtml-medium_image_background;;
21 }
22
23 .photo_viewer td {
24 padding:0;
25 }
26
27 .photo_viewer .metadata_bar {
28 background: &dtml-metadata_bar_background;;
29 width:20em;
30 }
31
32 .image_metadata {
33 padding: 0 1em 1em 1em;
34 }
35
36 .photo_viewer .photographer {
37 color: &dtml-photographer_font_color;;
38 }
39
40 .photo_viewer .title_summary {
41 color: &dtml-title_font_color;;
42 }
43
44 .photo_viewer .description {
45 padding-top:1.5em;
46 max-height:22em;
47 overflow-y:hidden;
48 }
49
50 .photo_viewer .description:hover {
51 max-height:none;
52 }
53
54 .photo_viewer ul.keywords {
55 padding: 0 0 1em 0;
56 margin:0;
57 text-align:left;
58 }
59
60 .photo_viewer .keywords li {
61 display: inline;
62 padding-left: 10px;
63 background: url(&dtml-portal_url;/keyword_sep.gif) left no-repeat;
64 }
65
66 .photo_viewer .keywords li:first-child {
67 padding-left:0;
68 background:none;
69 }
70
71
72 table.metadata_category {
73 color: &dtml-metadata_edit_label_color;;
74 background: &dtml-metadata_edit_panel_background;;
75 font-size: 11px;
76 margin-top:1px;
77 }
78
79 table.metadata_category th {
80 text-align:right;
81 vertical-align:top;
82 font-weight:normal;
83 }
84
85 table.metadata_category tr.last td,
86 table.metadata_category tr.last th {
87 padding-bottom:4px;
88 }
89
90 table.metadata_category tr.name td,
91 table.metadata_category tr.name th {
92 margin-top: 4px;
93 border-top:1px solid &dtml-metadata_panel_border_sep_color;;
94 text-align:left;
95 padding: 4px 0 2px 10px;
96 }
97
98 table.metadata_category td {
99 padding:1px 8px;
100 }
101
102
103 table.metadata_category input,
104 table.metadata_category textarea,
105 table.metadata_category select {
106 width:100%;
107 color:&dtml-metadata_input_font_color;;
108 font-size:11px;
109 font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
110 border:1px solid &dtml-metadata_input_border_color;;
111 background: &dtml-metadata_input_background;;
112 }
113
114 table.metadata_category input:hover,
115 table.metadata_category textarea:hover,
116 table.metadata_category select:hover {
117 background: &dtml-metadata_input_hover_background;;
118 }
119
120 table.metadata_category input:focus,
121 table.metadata_category textarea:focus,
122 table.metadata_category select:focus {
123 background: &dtml-metadata_input_focus_background;;
124 color: &dtml-metadata_input_focus_font_color;;
125 border: 1px solid &dtml-metadata_input_border_focus_color;;
126 }
127
128 .portfolio_lightbox a {
129 background: &dtml-portfolio_slide_background;;
130 color: &dtml-fontColor;;
131 display:block;
132 width: <dtml-var expr="thumb_width + 16">px;/*&dtml-slide_size;px;*/
133 height: 256px;
134 display:block;
135 text-align:center;
136 float:left;
137 padding-top:8px;
138 margin-top : 6px;
139 margin-left : 6px;
140 overflow:hidden;
141 }
142
143 .portfolio_lightbox a:hover {
144 background:&dtml-portfolio_slide_hover_background;;
145 color: &dtml-linkHoverColor;;
146 }
147
148 .portfolio_lightbox img {
149 border:none;
150 }
151
152 .portfolio_lightbox h3 {
153 margin:5px 0;
154 padding:0 8px;
155 text-align:left;
156 }
157 .portfolio_lightbox div {
158 padding:0 8px;
159 text-align:left;
160 font-size: &dtml-fontSmallSize;;
161 }
162
163
164 .lightbox span {
165 width: &dtml-slide_size;px;
166 height: &dtml-slide_size;px;
167 display:block;
168 float:left;
169 }
170
171 .lightbox a.slide {
172 position:absolute;
173 display:block;
174 width: &dtml-slide_size;px;
175 height: &dtml-slide_size;px;
176 background:&dtml-slide_background;;
177 border: 1px solid &dtml-backgroundColor;;
178 }
179
180 .lightbox a.slide:hover {
181 background:&dtml-slide_hover_background;;
182 }
183
184 .lightbox .selected a.slide,
185 .lightbox a.selected:hover {
186 background:&dtml-slide_selected_background;;
187 }
188
189 .lightbox .hidden-slide a.slide,
190 .lightbox a.hidden-slide:hover {
191 background:url(&dtml-portal_url;/hidden-slide-bg.png);
192 }
193
194 .lightbox .slide img {
195 position:absolute;
196 border: 1px solid black;
197 }
198
199 .lightbox span.button {
200 background:none;
201 position: absolute;
202 }
203
204 .lightbox span[class].button {
205 visibility:hidden;
206 }
207
208 .lightbox span:hover span.button {
209 visibility:visible;
210 }
211
212 .lightbox .slide-select,
213 .lightbox .slide-deselect {
214 margin-left:10px;
215 margin-top:7px;
216 width:12px;
217 height:17px;
218 }
219
220 .lightbox .slide-select img {
221 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-select-btn.png');
222 }
223
224 .lightbox .slide-select[class] img {
225 background: url(&dtml-portal_url;/slide-select-btn.png);
226 }
227
228 .lightbox .slide-deselect img {
229 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-deselect-btn.png');
230 }
231
232 .lightbox .slide-deselect[class] img {
233 background: url(&dtml-portal_url;/slide-deselect-btn.png);
234 }
235
236 .lightbox .slide-cart {
237 margin-left:30px;
238 margin-top:7px;
239 width:12px;
240 height:17px;
241 }
242
243 .lightbox .slide-cart img {
244 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-cart-btn.png');
245 }
246
247 .lightbox .slide-cart[class] img {
248 background: url(&dtml-portal_url;/slide-cart-btn.png);
249 }
250
251 /* slide del */
252 .lightbox .slide-del {
253 margin-left:200px;
254 margin-top:5px;
255 width:18px;
256 height:19px;
257 }
258
259 .lightbox .slide-del img {
260 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-del-btn.png');
261 }
262
263 .lightbox .slide-del[class] img {
264 background: url(&dtml-portal_url;/slide-del-btn.png);
265 }
266
267
268 .lightbox .slide-hide,
269 .lightbox .slide-show {
270 width:16px;
271 height:15px;
272 }
273
274 .lightbox .slide-hide img {
275 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-eye-open-btn.png');
276 }
277
278 .lightbox .slide-hide[class] img {
279 background: url(&dtml-portal_url;/slide-eye-open-btn.png);
280 }
281
282 .lightbox .slide-show img {
283 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-eye-closed.png');
284 }
285
286 .lightbox .slide-show[class] img {
287 background: url(&dtml-portal_url;/slide-eye-closed.png);
288 }
289
290 .image_toolbar {
291 background: url(&dtml-portal_url;/image_toolbar_bg.gif) repeat-x;
292 position:relative;
293 z-index:3;
294 font-size:27px;
295 white-space:nowrap;
296 }
297
298 /*
299 .image_toolbar img {
300 margin-left: 4px;
301 border:0;
302 }*/
303
304 #film_bar {
305 background:#555;
306 overflow:hidden;
307 position:relative;
308 width:100%;
309 height: <dtml-var expr="thumb_height/2 + 12">px;;
310 }
311
312 #film_bar table {
313 position:absolute;
314 border-collapse:collapse;
315 }
316
317 #film_bar td {
318 padding:0;
319 border:1px solid #484848;
320 }
321
322 #film_bar a {
323 width: <dtml-var expr="thumb_width/2 + 10">px;;
324 height: <dtml-var expr="thumb_height/2 + 10">px;;
325 display:block;
326 text-align:center;
327 vertical-align:middle;
328 }
329
330 #film_bar a:hover,
331 #film_bar a.selected {
332 background:#727272;
333 }
334
335 #film_bar a.displayed {
336 background:#bfbfbf;
337 }
338
339 #film_bar img{
340 border:none;
341 }
342
343 .jsslider {
344 position:absolute;
345 height:13px;
346 width:0px;
347 background: #000;
348 }
349
350 .jsslider span {
351 position:absolute;
352 width:0px;
353 height:11px;
354 background:url(&dtml-portal_url;/slider_bg.gif);
355 margin:1px 0;
356 font-size:0; /*IE 6 hack */
357 }
358
359 #cart_slide {
360 position:absolute;
361 top:25px;
362 left:-190px;
363 width:226px;
364 height:237px;
365 visibility:hidden;
366 font-size:15px;
367 line-height:18px;
368 padding-top:11px;
369 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/cart-slide-background.png');
370 }
371
372 #cart_slide[id] {
373 background:no-repeat url(&dtml-portal_url;/cart-slide-background.png);;
374 }
375
376 .wdgt-buyable-items {
377 white-space:normal;
378 width: &dtml-slide_size;px;
379 height: &dtml-slide_size;px;
380 position:absolute;
381 margin:2px;
382 color:#fff;
383 }
384
385 .wdgt-buyable-items input {
386 font-size:70%;
387 }
388
389 .ppt-description {
390 color:white;
391 text-align:left;
392 visibility:hidden;
393 display:none;
394 padding-right:45px;
395 padding-top:0.5em;
396 }
397 .panel-background {
398 width: &dtml-slide_size;px;
399 height: &dtml-slide_size;px;
400 background:#3e2b14;
401 position:absolute;
402 opacity:0.9;
403 filter: alpha(opacity='90');
404 }
405
406 .confirm-message {
407 position:absolute;
408 color: &dtml-messageFontColor;;
409 padding:3px;
410 background: &dtml-messageBackgroundColor;;
411 }
412
413 #cart_slide .confirm-message {
414 position:static;
415 margin:2px;
416 text-align:center;
417 vertical-align:middle;
418 }
419
420
421 input.add-to-cart-btn {
422 position:absolute;
423 background:transparent;
424 width:45px;
425 height:43px;
426 border:none;
427 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/add_to_cart.png');
428 left:<dtml-var expr="slide_size - 47">px;
429 top:2.5em;;
430 }
431
432 input.add-to-cart-btn[class] {
433 background:url(&dtml-portal_url;/add_to_cart.png);
434 }
435
436 tbody.total th {
437 color:#fff;
438 }
439
440 tbody.total td {
441 font-weight:bold;
442 font-size:110%;
443 background:#151515;
444 }
445
446 td.num,
447 th.num {
448 text-align:right;
449 padding-right:0.5em;
450 border-left:1px solid black;
451 }
452
453 .sell_steps_bar td {
454 font-size:120%;
455 background:#000 url(&dtml-portal_url;/sellbar-arrow.gif) no-repeat right;
456 height:40px;
457 vertical-align:middle;
458 padding:0 1em 0 0.5em;
459 }
460
461 .sell_steps_bar td.done {
462 color: &dtml-messageFontColor;;
463 }
464
465 /*
466 </dtml-with>
467 </dtml-with>
468 */