Dotclear

source: admin/style/default.css @ 1864:dfe13b571ffd

Revision 1864:dfe13b571ffd, 48.6 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Réduction de la boîte pour les médias en pièce jointe du billet. Fixes #1653
Line 
1/*
2# -- BEGIN LICENSE BLOCK --------------------------------------------------
3# This file is part of Dotclear 2.
4# Copyright (c) 2003-2013 Olivier Meunier & Association Dotclear
5# Licensed under the GPL version 2.0 license.
6# See LICENSE file or http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
7# -- END LICENSE BLOCK ----------------------------------------------------
8               LAYOUTS
9               HTML TAGS
10               FORMULAIRES
11               BOUTONS
12               MESSAGES
13               ELEMENTS PRINCIPAUX
14               REGLES SPECIFIQUES
15               MEDIA QUERIES
16*/
17/* ---------------------------------------------------------------------------
18                                                                                     LAYOUTS
19---------------------------------------------------------------------------- */
20#header {
21     background: #676e78;
22     position: relative;
23     border-bottom: 4px solid #A2CBE9;
24     width: 100%;
25     }
26#wrapper {
27     width: 100%;
28     padding-top: 1em;
29     background: #f7f7f7 url(bg_wrapper.png) repeat-y 15.5em;
30     }
31#main {
32     width: 100%;
33     float: right;
34     margin-left: -14.5em;
35     margin-top: 0;
36     }
37#content {
38     margin: 0 0 0 15.5em;
39     padding: 9px 18px 18px; /* ie < 9 sucks */
40     padding: .9rem 1.8rem 1.8rem;
41     background: #fff;
42     overflow: hidden;
43     }
44#main-menu {
45     width: 14.5em;
46     float: left;
47     margin:0;
48     padding-top: .5em;
49     padding-bottom: 1em;
50     background: #f7f7f7;
51     }
52#footer {
53     clear: both;
54     padding: .5em 1em .5em 0;
55     text-align: right;
56     border-top: 1px solid #ccc;
57     background-color: #fff;
58     }
59/* to hide main-menu */
60#collapser {
61     display: block;
62     float: left;
63     width: 1em;
64     background: #e3e3e3;
65     opacity: .4;
66     margin-left: 14.5em;
67     border: none;
68     text-align: center;
69     overflow: hidden;
70     }
71/* if main-menu is hidden */
72#wrapper.hide-mm {
73     background: #fff;
74     }
75.hide-mm #main {
76     margin-left: 0;
77     float: left;
78     }
79.hide-mm #content {
80     margin-left: 1em;
81     }
82.hide-mm #main-menu {
83     display: none;
84     }
85.hide-mm #collapser {
86     margin-left: 0;
87     opacity: 1;
88     }
89/* if no js activated */
90.no-js #content {
91     margin-left: 14.5em;
92     }
93
94/* -------------------------------------------------------------- layout: two-cols */
95.two-cols {
96     position: static;
97     }
98     .two-cols .col {
99          width: 48%;
100          margin-left: 2%;
101          float: left;
102          }
103     .two-cols .col70 {
104          width: 68%;
105          margin-left: 0;
106          float: left;
107          }
108     .col30 {
109          width: 28%;
110          margin-left: 2%;
111          float: left;
112          }
113     .two-cols .col:first-child,
114     .two-cols .col30.first-col {
115          margin-left: 0;
116          margin-right: 2%;
117          }
118     .two-cols .col:last-child,
119     .two-cols .col70.last-col {
120          margin-left: 2%;
121          margin-right: 0;
122          }
123/* -------------------------------------------------------------- layout: three-cols */
124.three-cols {
125     position: static;
126     }
127     .three-cols .col { 
128          width: 32.3%; 
129          float: left; 
130          margin-left: 1%; 
131          } 
132     .three-cols .col:first-child { 
133          width: 33.3%; 
134          margin-left: 0; 
135          }
136/* ------------------------------------------------- layout: optionnal one/two-boxes */
137.one-box, .two-boxes, .three-boxes, .box {
138     margin-bottom: 1em;
139     }
140.one-box {
141     text-align: justify;
142     }
143.two-boxes {
144     width: 47%;
145     display: inline-block;
146     vertical-align: top;
147     -moz-box-sizing: border-box; 
148     -webkit-box-sizing: border-box; 
149     box-sizing: border-box;
150     }
151     .two-boxes:first-child, .two-boxes.odd, .two-boxes.odd:last-child {
152          margin-right: 3%;
153          }
154     .two-boxes.even:last-child, .two-boxes.even {
155          margin-left: 3%;
156          }
157.three-boxes {
158     width: 30%;
159     display: inline-block;
160     vertical-align: top;
161     margin-left: 2.5%;
162     margin-right: 2.5%; 
163     -moz-box-sizing: border-box; 
164     -webkit-box-sizing: border-box; 
165     box-sizing: border-box;
166     }
167     .three-boxes:first-child {
168          margin-left: 0;
169          }
170     .three-boxes:last-child {
171          margin-right: 0;
172          }
173/* boîtes intérieures distribuées horizontalement */
174.box {
175     display: inline-block;
176     vertical-align: top;
177     margin-right: 3%; 
178     text-align: left;
179     }
180.box:last-child {
181     margin-right: 0;
182     }
183/* ---------------------------------------------------------------- layout: popups */
184.popup #wrapper, .popup #top {
185     width: 100%;
186     padding: 0;
187     }
188.popup h1, .popup #top {
189     margin: 0;
190     border-bottom: 1px solid;
191     font-weight: normal;
192     color: #fff;
193     background: #676e78;
194     font-size: 1.5em;
195     text-indent: .5em;
196     line-height: 1.3em;
197     }
198.popup #wrapper {
199     float: none;
200     margin:0;
201     display: block;
202     }
203     .popup #main {
204          margin-bottom: 1em 0;
205          }
206     .popup #content {
207          margin: 0;
208          padding: .5em 0;
209          }
210          .popup #content h2 {
211               margin: 0 0 1em;
212               }
213     .popup #footer p {
214          border: none;
215          }
216/* -------------------------------------------------------- layout: classes de complément */
217.constrained {
218     margin: 0;
219     padding: 0;
220     border: none;
221     background: transparent;
222     }
223.table {
224     display: table;
225     }
226.cell {
227     display: table-cell;
228     vertical-align: top;
229     }
230.clear {
231     clear: both;
232     }
233.lclear {
234     clear: left;
235     }
236.clearer {
237     height: 1px;
238     font-size: 1px;
239     }
240/* Micro clearfix thx to Nicolas Gallagher */
241.clearfix:before, .clearfix:after {
242     content: " "; 
243     display: table;
244     }
245.clearfix:after {
246     clear: both;
247     }
248.frame-shrink {
249     border: 1px solid #676e78;
250     padding: 0.5em;
251     margin-bottom: 1em;
252     height: 120px;
253     overflow: auto;
254     }
255/* ---------------------------------------------------------------------------
256                                                                                     HTML TAGS
257---------------------------------------------------------------------------- */
258html {
259     font-size: 62.5%;
260     }
261body {
262     font-size: 12px; /* ie < 9 sucks */
263     font-size: 1.2rem;
264     line-height: 1.5;
265     font-family: Arial,Helvetica,sans-serif;
266     color: #333;
267     background: #fff;
268     margin: 0;
269     padding: 0;
270     }
271/* ------------------------------------------------------------------ titres */
272h1, h2, h3, .as_h3, h4, .as_h4, h5, h6 {
273     margin-top: 0;
274     margin-bottom: 1em;
275     }
276h2 {
277     color: #676e78;
278     font-size: 18px; /* ie < 9 sucks */
279     font-size: 1.8rem;
280     padding: 0 0 1.5em;
281     font-weight: normal;
282     }
283     /* titre de page */
284     #content > h2 {
285          padding: 0 18px 6px; /* ie < 9 sucks */
286          padding: 0 1.8rem .6rem;
287          margin: 0 -18px .5em; /* ie < 9 sucks */
288          margin: 0 -1.8rem 1rem;
289          background: #fff url(bg_h2.png) repeat-x center bottom;
290          }
291     h2 a:link, h2 a:visited {
292          color: #676e78;
293          border-color: #000;
294          }
295     .page-title {
296          color: #d30e60;
297          }
298     .page-title img {
299          padding-left: .5em;
300          vertical-align: middle;
301          }
302h3, .as_h3 {
303     margin-top: 1em;
304     color: #D33800;
305     font-weight: normal;
306     font-size: 16px; /* ie < 9 sucks */
307     font-size: 1.6rem;
308     }
309     #main-menu h3 {
310          font-weight: bold;
311          }
312h4, .as_h4 {
313     font-size: 14px; /* ie < 9 sucks */
314     font-size: 1.4rem;
315     color: #676e78;
316     }
317     .fieldset h3, .fieldset h4, .pretty-title { /* variante */
318          color: #D33800;
319          font-size: 12px;
320          font-size: 1.2rem;
321          font-weight: bold;
322          }
323          .fieldset h3 {
324               font-size: 14px;
325               font-size: 1.4rem;
326               }
327     .fieldset h3.smart-title, .fieldset h4.smart-title, .smart-title { /* variante */
328          font-size: 1em;
329          text-transform: uppercase;
330          font-weight: bold;
331          color: #333;
332          text-shadow: 0 1px 0 rgba(200, 200, 200, 0.6)
333          }
334h5 {
335     font-size: 12px; /* ie < 9 sucks */
336     font-size: 1.2rem;
337     font-weight: bold;
338     color: #676e78;
339     }
340     #entry-sidebar h5 {
341          font-weight: normal;
342          color: #333;
343          }
344     .entry-status img.img_select_option {
345          padding-left: 4px;
346          vertical-align: text-top;
347          }
348h4 label, h5 label {color: #333;}
349h2:first-child, h3:first-child, h4:first-child, h5:first-child, ul:first-child, p:first-child {
350     margin-top: 0;
351     }
352/* ---------------------------------------------------------------- tableaux */
353table {
354     font-size: 12px; /* ie < 9 sucks */
355     font-size: 1.2rem;
356     border-collapse: collapse;
357     margin: 0 0 1em 0;
358     }
359caption {
360     color: #333;
361     font-weight: bold;
362     text-align: left;
363     margin-bottom: .5em;
364     }
365th {
366     border-width: 1px 0 1px 0;
367     border-style: solid;
368     border-color: #ddd;
369     background: #f3f3ff;
370     padding: .4em 1em .4em .5em;
371     vertical-align: top;
372     text-align: left;
373     text-transform: uppercase;
374     font-size: 10px;
375     font-size: 1rem;
376     }
377td {
378     border-width: 0 0 1px 0;
379     border-style: solid;
380     border-color: #e3e3e3;
381     padding: .4em 1em .4em .5em;
382     vertical-align: top;
383     }
384
385/* ---------------------------------------------------------- autres balises */
386p {
387     margin: 0 0 1em 0;
388     }
389hr {
390     height: 1px;
391     border-width: 1px 0 0;
392     border-color: #ddd;
393     background: #ddd;
394     border-style: solid;
395     }
396hr.clearer {
397     clear: both;
398     }
399pre, code {
400     font: 100% "Andale Mono","Courier New",monospace;
401     }
402pre {
403     white-space: pre;
404     white-space: -moz-pre-wrap;
405     white-space: -hp-pre-wrap;
406     white-space: -o-pre-wrap;
407     white-space: -pre-wrap;
408     white-space: pre-wrap;
409     white-space: pre-line;
410     word-wrap: break-word;
411     }
412abbr {
413     cursor: help;
414     }
415input, textarea, select, option, optgroup, legend,label {
416     font-size: 1em;
417     }
418/* ------------------------------------------------------------------ liens */
419a, a:link, a:visited {
420     color: #2373A8;
421     text-decoration: none;
422     border-bottom: 1px dotted #999;
423     }
424a:hover, a:active, a:focus {
425     text-decoration: underline;
426     }
427a img, a:link img, a:visited img {
428     border:none;
429     }
430/* ----------------------------------------------------------------------------
431                                                                                     FORMULAIRES
432---------------------------------------------------------------------------- */
433form {
434     display: block;
435     margin: 0;
436     padding: 0;
437     }
438fieldset {
439     display: block;
440     margin: 1em 0;
441     padding: 1em 0.5em;
442     border-width: 1px 0;
443     border-style: solid;
444     border-color: #ccc;
445     background: #f7f7f7;
446     }
447input[type=text], textarea {
448     font: 100% "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
449     }
450legend {
451     padding: 0.2em 0.6em;
452     border-width: 1px;
453     border-style: solid;
454     border-color: #676e78;
455     background: #fff;
456     margin-bottom: 0.5em;
457     border-radius: 3px;
458     }
459label .maximal, textarea.maximal, input.maximal {
460     width: 99%;
461     }
462input[type=text], input[type=password], textarea, select {
463     background: #fbfbfb;
464     color: #000;
465     border-width: 1px;
466     border-style: solid;
467     border-color: #ddd;
468     border-radius: 3px;
469     box-shadow: 1px 1px 2px #F1F1F1 inset;
470     padding: 3px; 
471     }
472     input:focus, textarea:focus, select:focus {
473          -webkit-box-sizing: border-box;
474          -moz-box-sizing: border-box;
475          box-sizing: border-box;
476          border-color: #bee74b;
477          }
478     textarea {
479          padding: 2px 0;
480          }
481          textarea.maximal {
482               resize: vertical;
483               }
484          .area textarea {
485               display: block;
486               width: 100%;
487               resize: vertical;
488               }
489     select {
490          padding: 2px 0;
491          }
492          select.l10n option {
493               padding-left: 16px;
494               }
495          option.avail10n {
496               background: transparent url(../images/check-on.png) no-repeat 0 50%;
497               }
498     input.invalid, textarea.invalid, select.invalid {
499          border: 1px solid red;
500          background: #FFBABA;
501          color: red;
502          box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3);
503          }
504     input[type=text], input[type=password], textarea {
505          margin-right: .3em;
506          }
507     input[type=checkbox], input[type=radio], input[type=file] {
508          border: none;
509          margin: 0 .33em 0 0;
510          padding: 0;
511          background: transparent;
512          }
513     input[type=file] {
514          margin-top: .3em;
515          margin-bottom: .3em;
516          }
517optgroup {
518     font-weight: bold;
519     font-style: normal;
520     }
521option {
522     font-weight: normal;
523     }
524label, label span {
525     display: block;
526     }
527     label.ib, input.ib {
528          display: inline-block;
529          }
530     label.classic {
531          display: inline;
532          }
533     label.classic input, label span input, label.classic select, label span select {
534          display: inline;
535          }
536     label.required {
537          font-weight: bold;
538          }
539          label.required abbr {
540               color: #dd0000;
541               font-size: 1.3em;
542               }
543     label.area, p.area {
544          width: inherit !important;
545          }
546p.field {
547     position: relative;
548     }
549     p.field label {
550          display: inline-block;
551          width: 14em;
552          }
553     p.field input, p.field select {
554          display: inline-block;
555          }
556a.form-control {
557     display: none;
558     background: url(../images/expand.png) no-repeat 4px center;
559     padding-left: 20px;
560     color: #000;
561     }
562.form-note {
563     font-style: italic;
564     font-weight: normal;
565     color: #676e78;
566     }
567     p.form-note {
568          margin-top: -.7em;
569          }
570     span.form-note {
571          text-transform: none;
572          }
573/* ----------------------------------------------------------------------------
574                                                                                          BOUTONS
575---------------------------------------------------------------------------- */
576/* Removes inner padding and border in FF3+  - Knacss */
577button::-moz-focus-inner,
578input[type=button]::-moz-focus-inner,
579input[type=reset]::-moz-focus-inner,
580input[type=submit]::-moz-focus-inner {
581     border: 0;
582     padding: 0;
583     }
584/* tous les boutons */
585button,
586a.button,
587input[type=button],
588input[type=reset],
589input[type=submit] {
590     border: 1px solid #ccc;
591     font-family: arial, helvetica, sans-serif;
592     padding: 4px 10px;
593     line-height: normal !important;
594     display: inline-block;
595     vertical-align: middle;
596     font-size: 12px; /* ie < 9 sucks */
597     font-size: 1.2rem;
598     text-align: center;
599     text-decoration: none;
600     border-radius: 3px;
601     cursor: pointer;
602     font: 100% "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
603     }
604button,
605input[type=button],
606input[type=reset],
607input[type=submit] {
608     -webkit-appearance: button;
609     }
610 /* validation */
611input[type=submit], a.button.submit, input.button.start {
612     color: #fff;
613     border: 1px solid #2C8FD1;
614     background-image:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
615     background-image:-webkit-gradient(linear,left top,left bottom, from(#25A6E1), to(#188BC0));
616     background-image:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
617     background-color:#25A6E1;
618     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
619     }
620     input[type=submit]:hover, input[type=submit]:focus,
621     input.button.start:hover, input.button.start:focus,
622     a.button.submit:hover, a.button.submit:focus {
623          background-image:-moz-linear-gradient(top,#188BC0 0%,#25A6E1 100%);
624          background-image:-webkit-gradient(linear,left top,left bottom, from(#188BC0),to(#25A6E1));
625          background-image:linear-gradient(top,#188BC0 0%,#25A6E1 100%);
626          background-color:#188BC0;
627          }
628/* suppression, reset, "neutres" fond gris */
629button, input[type=button], input.button,
630input[type=reset], input[type=submit].reset, input.reset, 
631input[type=submit].delete, input.delete,
632a.button.delete, a.button.reset, a.button {
633     color: #000;
634     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#dfdfdf));
635     background-image: -moz-linear-gradient(top,  #f5f5f5,  #dfdfdf);
636     background-image:linear-gradient(top,#f5f5f5 0%,#dfdfdf 100%);
637     background-color: #eee;
638     border: 1px solid #ccc;
639     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
640     }
641     button:hover, input[type=button]:hover, input.button:hover,
642     button:focus, input[type=button]:focus, input.button:focus,
643     input[type=reset]:hover, input[type=submit].reset:hover, input.reset:hover, 
644     input[type=reset]:focus, input[type=submit].reset:focus, input.reset:focus, 
645     input[type=submit].delete:hover, input.delete:hover,
646     input[type=submit].delete:focus, input.delete:focus,
647     a.button.delete:hover, a.button.reset:hover, a.button:hover,
648     a.button.delete:focus, a.button.reset:focus, a.button:focus {
649          background-image:-webkit-gradient( linear, left top, left bottom, from(#e9e9e9), to(#f9f9f9));
650          background-image:-moz-linear-gradient(top, #e9e9e9, #f9f9f9);
651          background-image:linear-gradient(top,#e9e9e9 0%,#f9f9f9 100%);
652          background-color:#f3f3f3;
653          }
654     /* suppression */
655     input[type=submit].delete, input.delete, a.button.delete {
656          border-color: #ccc;
657          color: #c00;
658          margin-left: 1em;
659          }
660     a.delete:first-child, input.delete:first-child {
661          margin-left: 0;
662          }
663     input[type=submit].delete:hover, input.delete:hover, a.button.delete:hover,
664     input[type=submit].delete:focus, input.delete:focus, a.button.delete:focus {
665               border-color: #c00;
666               }
667     #info-box a.button {
668          padding: 0 .5em;
669          margin-left: 2em;
670          }
671.button.add {
672     background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bee74b), color-stop(1, #9BCA1C) );
673     background-image:-moz-linear-gradient(center top, #bee74b 5%, #9BCA1C 100%);
674     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bee74b', endColorstr='#9BCA1C');
675     background-color:#bee74b;
676     border:1px solid #B2D742;
677     padding:.33em 1.33em .5em;
678     color: #000;
679     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
680     font-weight: normal;
681     font-size: 14px; /* ie < 9 sucks */
682     font-size: 1.4rem;
683     }
684     .button.add:hover, .button.add:active, .button.add:focus {
685          background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9BCA1C), color-stop(1, #bee74b) );
686          background-image:-moz-linear-gradient(center top, #9BCA1C 5%, #bee74b 100%);
687          background-image:linear-gradient(center top, #9BCA1C 5%, #bee74b 100%);
688          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9BCA1C', endColorstr='#bee74b');
689          background-color:#9BCA1C;
690          }
691     .button-add:focus {
692          outline: dotted 1px;
693          }
694     /* paragraphe pour bouton Nouveau bidule */
695     p.top-add {
696          text-align: right;
697          margin: 0;
698          }
699
700/* disabled */
701input.disabled, input[type=submit].disabled {
702     text-shadow: none;
703     filter: none;
704     color: #676e78;
705     background: #F5F5F5;
706     border: 1px solid #CCC;
707     }
708     input.disabled:hover, input[type=submit].disabled:hover {
709          color: #676e78;
710          background: #eee;
711          border: 1px solid #CCC;
712          }
713/* ----------------------------------------------------------------------------
714                                                                                     MESSAGES
715---------------------------------------------------------------------------- */
716.warn, .warning, .info {
717     font-style: normal;
718     padding: .2em .66em .2em;
719     text-indent: 24px;
720     color: #333;
721     display: inline-block;
722     line-height: 1.5em;
723     border-radius: 3px;
724     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6)
725     }
726div.warn, div.warning, div.info {
727     padding: 1em 1em .33em 1em;
728     }
729     .warn, .warning {
730          background: #FEFACD url(msg-warning.png) no-repeat .3em .3em;
731          border: 1px solid #F7E07E;
732          }
733     .info {
734          background: #D9EDF7 url(msg-info.png) no-repeat .3em .3em;
735          border: 1px solid #BCE8F1;
736          }
737     span.warn, span.warning, span.info {
738          padding-top: 1px;
739          padding-bottom: 1px;
740          background-position: .3em .2em;
741          }
742.error, .message, .static-msg, .success, .warning-msg {
743     padding: 1em 0.5em 0.5em 48px;
744     margin-bottom: 1em;
745     border-radius: 8px;
746     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
747     }
748     p.error, p.message, p.static-msg, p.success, p.warning-msg {
749          padding-top: 1em;
750          padding-bottom: 1em;
751          }
752     .error {
753          background: #FFBABA url(msg-error.png) no-repeat .7em .7em;
754          color: #000;
755          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
756          }
757     .message, .static-msg {
758          background: #676e78 url(msg-std.png) no-repeat .7em .7em;
759          color: #fff;
760          }
761          .message a, .static-msg a {
762               color: #fff;
763               }
764     .success, .warning-msg {
765          color: #000;
766          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6)
767          }
768          .success {
769               background: #bee74b url(msg-success.png) no-repeat .7em .7em;
770               }
771          .warning-msg {
772               background: #F7E07E url(msg-warning.png) no-repeat .7em .7em;
773               border: 1px solid #F7E07E;
774               }
775          .success a, .warning-msg a {
776               color: #333;
777               }
778.dc-update {
779     padding: 1em 48px 0.5em 48px;
780     margin-bottom: 1em;
781     border-radius: 8px;
782     background: #A2CBE9 url(msg-success.png) no-repeat .7em .7em;
783     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
784     color: #000;
785     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1)
786     }
787     .dc-update h3 {
788          margin-top: 0;
789          color: #000;
790          }
791     .dc-update p {
792          display: inline-block;
793          vertical-align: middle;
794          }
795     .dc-update a {
796          color: #000;
797          margin-right: 1em;
798          }
799          .dc-update a.button {
800               padding: .5em 1em; 
801               }
802          .updt-info a {
803               margin-left: 2em;
804               border-color: #000;
805               font-weight: bold;
806               }
807/* ---------------------------------------------------------------------------------
808                                                                                ELEMENTS PRINCIPAUX
809--------------------------------------------------------------------------------- */
810/* -------------------------------------------------------------- HEADER ELEMENTS */
811/* prelude */
812#prelude {
813     line-height: 1.5;
814     margin: 0;
815     padding: 0;
816     overflow: hidden;
817     position: absolute;
818     top: 3em;
819     left: 0;
820     background: #A2CBE9;
821     width: 100%;
822     }
823     #prelude li {
824          list-style-type: none;
825          margin: 0;
826          background:transparent;
827          display: inline;
828          }
829     #prelude li a {
830          padding: 3px 16px 3px 8px; /* ie < 9 sucks */
831          padding: 3px 1.6rem 3px .8rem;
832          background: #A2CBE9;
833          color: #000;
834          border-bottom-color: #A2CBE9;
835          }
836/* top (h1) */
837#top {
838     margin: 0;
839     padding: 0;
840     width: 14.5em;
841     float: left;
842     }
843     h1 {
844          padding: 0;
845          margin: 0;
846          height: 36px;
847          text-indent: -1000px;
848          }
849          h1 a {
850               position: absolute;
851               top: 0;
852               left: 0;
853               width: 174px; /* ie < 9 sucks */
854               width: 17.4rem;
855               height: 36px; /* ie < 9 sucks */
856               height: 3.6rem;
857               border: none;
858               color: #fff;
859               background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
860               }
861          h1 a:hover, h1 a:focus {
862               background-position: 0 -94px;
863               }
864/* info-boxes */
865#info-boxes {
866     font-size: 12px; /* ie < 9 sucks */
867     font-size: 1.2rem;
868     line-height: 3em;
869     }
870     #info-boxes a {
871          font-weight: bold;
872          color: #fff;
873          border-bottom-color: #ccc;
874          margin-left: .3em;
875          margin-right: .3em;
876          white-space: nowrap;
877          font-weight: normal;
878          }
879     #info-boxes a img {
880          vertical-align: middle;
881          padding-left: .3em;
882          }
883     #info-box1 {
884          margin: 0;
885          padding: 0 3px 0 18px;
886          color: #fff;
887          display: inline-block;
888          }
889          #info-box1 p {
890               margin: 0;
891               display: inline;
892               }
893          #info-box1 select {
894               width: 145px; /* ie < 9 sucks */
895               width: 14.5em;
896               }
897          #info-box1 a {
898               margin-left: 1.33em;
899               }
900     #info-box2 {
901          margin: 0;
902          padding: 0 18px 0 0;
903          color: #fff;
904          float: right;
905          text-align: right;
906          }
907          #info-box2 span {
908               color: #999;
909               }
910          #info-box2 .logout {
911               margin-right: 0;
912               }
913          #info-box2 a.active {
914               border-bottom-color: #fff;
915               margin: 0;
916               padding: 1.2em .5em;
917               background-color: #fff;
918               color: #333;
919               font-weight: bold;
920               }
921/* ---------------------------------------------------------- MAIN-MENU ELEMENTS */
922#favorites-menu, #blog-menu, #system-menu, #plugins-menu {
923     border-bottom: 1px dashed #A2CBE9;
924     }
925#main-menu h3 {
926     margin: 0;
927     padding: 10px 0 10px 8px;
928     color: #676e78;
929     font-size: 14px; /* ie < 9 sucks */
930     font-size: 1.4rem;
931     }
932     #favorites-menu h3 {
933          color: #000;
934          font-variant: small-caps;
935          padding-top: .2em;
936          }
937#main-menu a {
938     color: #333;
939     border-bottom-color: #ccc;
940     }
941#main-menu ul {
942     margin: 0 0 1.5em 0;
943     padding: 0;
944     list-style: none;
945     }
946     #main-menu li {
947          display: block;
948          margin: 0.5em 0 0;
949          padding: 4px 0 1px 32px;
950          background-repeat: no-repeat;
951          background-position: 8px .3em;
952          }
953          #main-menu ul li:first-child {
954               margin-top: 0;
955               }
956          #main-menu li.active {
957               background-color: #fff;
958               font-weight: bold;
959               }
960               #favorites-menu li.active {
961                    background-color: transparent;
962                    }
963          #main-menu .active a {
964               border-bottom: none;
965               color: #d30e60;
966               }
967               #favorites-menu .active a {
968                    color: #000;
969                    }
970#search-menu {
971     padding: 4px 5px 0;
972     font-size: 100%
973     }
974     #search-menu * {
975          height: 22px; /* ie < 9 sucks */
976          height: 2.2rem;
977          display: inline-block;
978          vertical-align: top;
979          line-height: 22px;
980          }
981     #search-menu p {
982          border: 1px solid #999;
983          border-radius: .3em;
984          position: relative;
985          overflow: hidden;
986          }
987     #qx {
988          width: 124px; /* ie < 9 sucks */
989          width: 12.4rem;
990          border-bottom-left-radius: .3em;
991          border-top-left-radius: .3em;
992          background: transparent url(search.png) no-repeat 4px center;
993          text-indent: 18px;
994          padding: 0;
995          border: none;
996          height: 22px;
997          height: 2.2rem;
998          }
999          #qx:focus {
1000               border-color: #bee74b;
1001               }
1002     #search-menu input[type="submit"] {
1003          padding: 0 3px;
1004          padding: 0 .3rem;
1005          margin-left: -4px;
1006          background: #dfdfdf;
1007          border-color: #999;
1008          color: #444;
1009          border-bottom-right-radius: .3em;
1010          border-top-right-radius: .3em;
1011          border-top-left-radius: 0;
1012          border-bottom-left-radius: 0;
1013          text-shadow: none;
1014          border: none;
1015          border-left: 1px solid #aaa;
1016          font-size: 10px; /* ie < 9 sucks */
1017          font-size: 1rem;
1018          }
1019          #search-menu input[type="submit"]:hover,
1020          #search-menu input[type="submit"]:focus {
1021               background: #676e78;
1022               color: #fff;
1023               }
1024/* ----------------------------------------------------------------- CONTENT ELEMENTS */
1025.part-tabs ul {
1026     padding: .5em 0 0 1em;
1027     border-bottom: 1px solid #ddd;
1028     line-height: 2;
1029     }
1030     .part-tabs li {
1031          list-style: none;
1032          margin: 0;
1033          display: inline;
1034          }
1035          .part-tabs li a {
1036               padding: .5em 2em;
1037               margin-right: -1px;
1038               border: 1px solid #ccc;
1039               border-bottom: none;
1040               text-decoration: none;
1041               color: #333;
1042               background-color: #ecf0f1;
1043               display: inline-block;
1044               }
1045          .part-tabs li a:hover, .part-tabs li a:focus {
1046               color: #000;
1047               background: #fff;
1048               border-bottom-color: #fff;
1049               }
1050          .part-tabs li.part-tabs-active a {
1051               background: #fff;
1052               font-weight: bold;
1053               border-bottom-color: #fff;
1054               }
1055     .multi-part {
1056          padding-left: 1em;
1057          }
1058/* contextual help */
1059#help {
1060     margin-top: 4em;
1061     background: #f5f5f5;
1062     z-index: 100;
1063     clear: both;
1064     padding: 0 1em;
1065     }
1066     #content.with-help #help {
1067          display: block;
1068          position: absolute;
1069          top: 36px; /* ie < 9 sucks */
1070          top: 3.6rem;
1071          right: 0;
1072          width: 280px; /* ie < 9 sucks */
1073          width: 28rem;
1074          border-left: 2px solid #FFD478;
1075          border-top: 2px solid #FFD478;
1076          margin-top: 0;
1077          padding: .5em 0 0 0;
1078          overflow: auto;
1079          }
1080#help-button {
1081     background: transparent url(../images/page_help.png) no-repeat 6px center;
1082     position: absolute;
1083     top: 36px; /* ie < 9 sucks */
1084     top: 3.6rem;
1085     right: 0px;
1086     padding: 0 1.5em 0 30px;
1087     cursor: pointer;
1088     color: #2373A8;
1089     line-height: 42px; /* ie < 9 sucks */
1090     line-height: 4.2rem;
1091     }
1092     #help-button span {
1093          padding: .5em 0 .1em 0;
1094          border-bottom: 1px solid #2373A8;
1095          }
1096     #content.with-help #help-button {
1097          right: 282px; /* ie < 9 sucks */
1098          right: 28.2rem;
1099          background-color: #f5f5f5;
1100          position: fixed;
1101          border-top: 2px solid #FFD478;
1102          border-left: 2px solid #FFD478;
1103          border-bottom: 2px solid #FFD478;
1104          border-bottom-left-radius: 1em;
1105          border-top-left-radius: 1em;
1106          }
1107.help-box {
1108     display: none;
1109     }
1110     .help-box ul {
1111          padding-left: 20px;
1112          margin-left: 0;
1113          }
1114     #content.with-help .help-content {
1115          padding: 0 .5em 1em;
1116          }
1117          .help-content dt {
1118               font-weight: bold;
1119               color: #626262;
1120               margin: 0;
1121               }
1122          .help-content dd {
1123               margin: 0.3em 0 1.5em 0;
1124               }
1125/* 1. inside help block */
1126#helplink p {
1127     padding: 0 0 0 .5em;
1128     }
1129/* 2. in footer */
1130span.helplink {
1131     display: block;
1132     float: left;
1133     padding: 0 1.5em 0 30px;
1134     background: transparent url(../images/page_help.png) no-repeat 6px center;
1135     }
1136span.helplink a {
1137     border-bottom: 1px solid #2373A8;
1138     }
1139/* ------------------------------------------------------------------ FOOTER ELEMENTS */
1140#footer p {
1141     margin: 0;
1142     padding: 0 1em;
1143     font-size: 1em;
1144     }
1145     span.credit {
1146          font-size: 1em;
1147          font-weight: normal;
1148          }
1149/* ---------------------------------------------------------------------------------------
1150                                                                                     RÈGLES SPÉCIFIQUES
1151---------------------------------------------------------------------------------------- */
1152/* ---------------------------------------------------------------- LISTES TABLEAUX */
1153table .maximal, table.maximal {
1154     width: 100%;
1155     }
1156table .minimal {
1157     width: 1px;
1158     }
1159table .nowrap {
1160     white-space: nowrap;
1161     vertical-align: top;
1162     }
1163table .count {
1164     text-align: right;
1165     padding-right: 1.5em;
1166     }
1167th.first img {
1168     padding-right: 24px;
1169     }
1170tr.line img.expand, th img.expand {
1171     margin-right: 6px;
1172     margin-bottom: -2px;
1173     }
1174tr.line p {
1175     margin: 0;
1176     }
1177tr.line input {
1178     vertical-align: middle;
1179     }
1180tr.line:hover {
1181     background: #f3f3f3;
1182     }
1183td.status {
1184     vertical-align: middle;
1185     }
1186td.status img {
1187     margin-bottom: -2px;
1188     }
1189td.status a {
1190     border: none;
1191     }
1192.noborder td, td.noborder, .noborder th, th.noborder {
1193     border-width: 0 0 1px 0;
1194     border-color: #ddd;
1195     line-height: 2em;
1196     padding-bottom: 0;
1197     }
1198.noborder p {
1199     margin-bottom: 0;
1200     }
1201table.posts-list {
1202     min-width: 50%;
1203     }
1204table.settings, table.prefs {
1205     width: 80%;
1206     border: 1px solid #ccc;
1207     margin-bottom: 3em;
1208     }
1209     table.settings th, table.prefs th {
1210          background: #f3f3ff;
1211          }
1212     table.settings th:first-child, table.prefs th:first-child {
1213          width: 20%;
1214          }
1215     table.settings th + th, table.prefs th + th {
1216          width: 30%;
1217          }
1218     table.settings th + th + th, table.prefs th + th + th {
1219          width: 10%;
1220          }
1221     table.settings th:last-child, table.prefs th:last-child {
1222          width: 40%;
1223          }
1224/* js */
1225td.expand {
1226     padding: 1em;
1227     }
1228tr.expand td {
1229     border-bottom: none;
1230     }
1231.dragable {
1232     border-collapse: separate;
1233     }
1234.handle {
1235     padding: 0;
1236     }
1237.handler {
1238     cursor: move;
1239     background: transparent url(drag.png) no-repeat 0 50%;
1240     padding-left: 15px;
1241     }
1242/* ----------------------------------------------------------- BOITES À FILTRES */
1243#filters-form {
1244     border: 1px dashed #999;
1245     border-radius: .5em;
1246     margin-bottom: 2em;
1247     padding: .5em 1em 0;
1248     }
1249#filters-form .table {
1250     width: 100%;
1251     padding: 0;
1252     margin-bottom: 1em;
1253     margin-top: .5em;
1254     }
1255     #filters-form .cell {
1256          padding: 0 2em 0 0;
1257          }
1258     #filters-form .filters-sibling-cell {
1259          padding-top: 3.8em;
1260          }
1261#filters-form .filters-options {
1262     padding-left: 2em;
1263     border-left: 1px solid #ccc;
1264     }
1265#filters-form label.ib, span.ib {
1266     width:7em;
1267     }
1268#filters-form label.ibw, span.ibw {
1269     width: 9em;
1270     display: inline-block;
1271     }
1272#filters-form select {
1273     width: 14em;
1274     }
1275#filters-form h4 {
1276     margin-top: 0;
1277     margin-bottom: 2em;
1278     }
1279/* ---------------------------------------------------------------------------- SPEC PAGES */
1280/* ---------------------------------------------------------------------------- auth.php */
1281#login-screen {
1282     display: block;
1283     width: 20em;
1284     margin: 1.5em auto 0;
1285     font-size: 14px; /* ie < 9 sucks */
1286     font-size: 1.4rem;
1287     }
1288#login-screen h1 {
1289     text-indent: -2000px;
1290     background: transparent url(dc_logos/w-dotclear240.png) no-repeat top left;
1291     height: 66px;
1292     margin-bottom: .5em;
1293     margin-left: 0;
1294     }
1295#login-screen .fieldset {
1296     border: 1px solid #A8DC26;
1297     padding: 1em 1em 0 1em;
1298     border-radius: 3px;
1299     background: #fff;
1300     }
1301#login-screen input[type=text], #login-screen input[type=password], #login-screen input[type=submit] {
1302     width: 100%;
1303     }
1304     #login-screen input.login {
1305          padding-top: 6px;
1306          padding-bottom: 6px;
1307          font-size: 1em;
1308          }
1309#login-screen #issue {
1310     margin-left: 1.33em;
1311     font-size: 12px; /* ie < 9 sucks */
1312     font-size: 1.2rem;
1313     }
1314     #login-screen #issue strong {
1315          font-weight: normal;
1316          }
1317/* ------------------------------------------------------------------------- index.php */
1318#dashboard-main {
1319     padding: 1em 0;
1320     }
1321/* raccourcis */
1322#icons {
1323     overflow: hidden;
1324     padding-bottom: 1em;
1325     text-align: center;
1326     }
1327     #icons p {
1328          width: 207px;
1329          text-align: center;
1330          margin: 1em 0 2em;
1331          padding: 1em 0;
1332          display:inline-block;
1333          vertical-align: top;
1334          }
1335     #icons a,
1336     #icons a:link,
1337     #icons a:visited,
1338     #icons a:hover,
1339     #icons a:focus {
1340          border-bottom-width: 0px;
1341          text-decoration: none;
1342          }
1343          #icons a span {
1344               border-bottom: 1px dotted #999;
1345               color: #333;
1346               }
1347          #icons a img {
1348               padding: 2em;
1349               -moz-box-shadow: 0px 1px 0px 0px #ffffff;
1350               -webkit-box-shadow: 0px 1px 0px 0px #ffffff;
1351               box-shadow: 0px 1px 0px 0px #ffffff;
1352               background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
1353               background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
1354               filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
1355               background-color:#f9f9f9;
1356               -moz-border-radius:1em;
1357               -webkit-border-radius:1em;
1358               border-radius:1em;
1359               border:1px solid #dcdcdc;
1360               display:inline-block;
1361               }
1362               #icons a:focus img, #icons a:hover img {
1363                    background: #bee74b;
1364                    }
1365               #icons a:focus span, #icons a:hover span {
1366                    text-decoration: underline;
1367                    }
1368/* billet rapide */
1369#quick {
1370     margin-top: 1em;
1371     padding-top: 1em;
1372     }
1373     #quick h3 {
1374          margin-bottom: 0.2em;
1375          font-size: 1.2em;
1376          }
1377     #quick p.qinfo {
1378          margin: -.7em -1em 1em;
1379          background: #f3f3ff url(info.png) no-repeat .2em .2em;
1380          border: 1px solid #99f;
1381          padding: .2em 1em .1em 24px;
1382          color: #676e78;
1383          }
1384     #quick #new_cat, .q-cat, .q-cat label {
1385          display: inline-block;
1386          vertical-align: top;
1387          margin-right: 1em;
1388          margin-top: 0;
1389          }
1390     .q-cat label {
1391          margin-right: .3em;
1392          }
1393     #quick #new_cat {
1394          margin-bottom: 2em;
1395     }
1396/* modules additionnels */
1397#dashboard-boxes {
1398     margin: 2em auto 1em;
1399     padding-top: 2em;
1400     }
1401     .db-items, .db-contents {
1402          display: inline-block;
1403          text-align: center;
1404          }
1405     #dashboard-boxes .box {
1406          min-width: 300px;
1407          max-width: 580px;
1408          padding: 10px;
1409          border:   1px solid #ccc;
1410          border-radius: 3px;
1411          min-height: 200px;
1412          margin: 10px;
1413          text-align: left;
1414          }
1415          .box.small {
1416               width: 280px;
1417               }
1418          .box.large {
1419               width: 580px;
1420               }
1421          .dc-box {
1422               background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
1423               }
1424     .db-items img, .db-contents img {
1425          vertical-align: middle;
1426          }
1427     .db-items ul, .db-contents ul {
1428          display: block;
1429          padding-left: 1.5em;
1430          list-style: square;
1431          }
1432          .db-items li, .db-contents li {
1433               margin: 0.25em 0 0 0;
1434               color: #676e78;
1435               }
1436     #news dt {
1437          font-weight: bold;
1438          margin: 0 0 0.4em 0;
1439          }
1440     #news dd {
1441          margin: 0 0 1em 0;
1442          }
1443          #news dd p {
1444               margin: 0.2em 0 0 0;
1445               }
1446/* message de mise à jour */
1447#upg-notify ul {
1448     padding-left: 1.5em;
1449     }
1450     #upg-notify li {
1451          color: #fff;
1452          }
1453/* ------------------------------------------------------------------- blog_pref.php */
1454#media_img_title_pattern {
1455     margin-right: 1em;
1456     }
1457.user-perm {
1458     margin: 2em 0px;
1459     background: transparent url(user.png) no-repeat left top;
1460     width: 320px;
1461     display: inline-block;
1462     vertical-align: top;
1463     }
1464     .user-perm h4, .user-perm h5, .user-perm p, .user-perm ul, .user-perm li {
1465          margin: .5em 0 .33em;
1466          padding: 0;
1467          }
1468     .user-perm h4 {
1469          padding-left: 28px;
1470          }
1471     .user-perm h5 {
1472          margin:   1em 0 0 0;
1473          }
1474     .user-perm ul {
1475          list-style-type: inside;
1476          }
1477          .user-perm li {
1478               margin-left: 1em;
1479               padding-left: 0;
1480               }
1481               li.user_super, li.user_admin {
1482                    margin-left: 0;
1483                    padding-left: 1em;
1484                    list-style: none;
1485                    background: transparent url(../images/superadmin.png) no-repeat -2px 2px;
1486                    }
1487               li.user_admin {
1488                    background-image: url(../images/admin.png);
1489                    }
1490/* ------------------------------------------------------------------- blog_theme.php */
1491#themes {
1492     margin: 0;
1493     width: 100%;
1494     padding: 0;
1495     }
1496     .theme-details {
1497          border-top: 1px solid #ccc;
1498          padding: 12px;
1499          display: inline-block;
1500          vertical-align: top;
1501          width: 284px;
1502          }
1503          .theme-details.current-theme {
1504               background: #eef;
1505               }
1506          .theme-details:hover {
1507               background: #f3f3f3;
1508               }
1509          .theme-shot img {
1510               display: block;
1511               border: 1px solid #ccc;
1512               margin-bottom: 1.5em;
1513               }
1514          span.theme-desc {
1515               display: block;
1516               }
1517          span.theme-version {
1518               color: #676e78;
1519               }
1520          .theme-css {
1521               display: block;
1522               }
1523     #themes-actions {
1524          border-bottom: 1px solid #999;
1525          margin-bottom: 3em;
1526          }
1527/* Themes list, JS version */
1528#themes-wrapper {
1529     display: table;
1530     }
1531     #themes-wrapper #themes {
1532          display: table-cell;
1533          vertical-align: top;
1534          padding-left: 1em;
1535          }
1536     #theme-box {
1537          display: table-cell;
1538          vertical-align: top;
1539          padding: 0;
1540          width: 312px;
1541          border: 1px solid #ccc;
1542          border-radius: 3px;
1543          }
1544          #theme-box .theme-shot,
1545          #theme-box .theme-info,
1546          #theme-box .theme-actions {
1547               background: #eef;
1548               padding: 1em 16px;
1549               margin: 0;
1550               }
1551          #theme-box .theme-shot img {
1552               display: block;
1553               width: 280px;
1554               height: 245px;
1555               border: 1px solid #ccc;
1556               }
1557          #theme-box h4 {
1558               color: #000;
1559               background: #eef;
1560               }
1561          #theme-box span.theme-version {
1562               color: #676e78;
1563               }
1564          #theme-box span.theme-parent-ok {
1565               color: #676e78;
1566               }
1567          #theme-box span.theme-parent-missing {
1568               color: #c00;
1569               font-weight:bold;
1570               }
1571          #theme-box .theme-actions {
1572               border-bottom: 1px solid #ccc;
1573               }
1574#themes .theme-details-js {
1575     float: left;
1576     width: 120px;
1577     height: 150px;
1578     margin: 0 12px 24px;
1579     padding: 12px 12px 0;
1580     text-align: center;
1581     background: #f3f3f3;
1582     border: 1px solid #ddd;
1583     cursor: pointer;
1584     border-radius: 4px;
1585     }
1586     #themes .theme-details-js label {
1587          cursor: pointer;
1588          }
1589     #themes .theme-details-js.theme-selected {
1590          background: #e7e7e7;
1591          border: 1px solid #999;
1592          }
1593     #themes .theme-details-js .theme-shot img {
1594          width: 120px;
1595          height: 105px;
1596          border: 1px solid #fff;
1597          }
1598     #themes a:focus div, #themes a:hover div,
1599     #themes a:focus div.current-theme, #themes a:hover div.current-theme {
1600          background: #bee74b;
1601          }
1602/* ------------------------------------------------------------------ categories.php */
1603#categories {
1604     margin: 1em 0;
1605     }
1606#categories ul {
1607     list-style: none;
1608     margin: 0;
1609     padding: 0;
1610     }
1611     #categories li {
1612          margin: .5em 0;
1613          padding: .5em 1.2em;
1614          border: 1px solid #ccc;
1615          border-left: 8px solid #E5E3DA;
1616          border-radius: 3px;
1617          }
1618          #categories label a {
1619               font-weight: bold;
1620               }
1621          #categories li p {
1622               margin: 0;
1623               display: inline-block;
1624               }
1625          #categories input[type="checkbox"] {
1626               margin-right: .8em;
1627               }
1628          .cat-url {
1629               padding-left: 1em;
1630               }
1631          #categories .placeholder {
1632               outline: 1px dashed #4183C4;
1633               min-height: 2.5em;
1634               }
1635          #categories input.cat-rank {
1636               float: right;
1637               margin-left: 30px;
1638               }
1639#categories h4 {
1640     margin: 0;
1641     }
1642     #categories h4 span {
1643          font-weight: normal;
1644          }
1645.cat-actions {
1646     line-height: 2;
1647     }
1648     #del_cat {
1649          width: 100%;
1650          }
1651/* ------------------------------------------------------------------ help.php */
1652.legible { /* for pages with a lot of text to read */
1653     font-size: 1.16em;
1654     max-width: 62em;
1655     margin-left: 6%;
1656     }
1657
1658/* ------------------------------------------------------------------ media.php */
1659.media-item {
1660     position: relative;
1661     border: 1px solid #ddd;
1662     margin: 1em;
1663     padding: 10px 12px 6px;
1664     width: 300px;
1665     display: inline-block;
1666     vertical-align: top;
1667     min-height: 140px;
1668     }
1669     .media-item p {
1670          margin: 0 0 .5em;
1671          }
1672     .media-item object {
1673          margin-top: .5em;
1674          }
1675     .media-item ul {
1676          display: block;
1677          list-style: none;
1678          margin: 0;
1679          padding: 0;
1680          }
1681     a.media-icon {
1682          display: block;
1683          border-bottom: none;
1684          margin: 0 auto; 
1685          }
1686          .media-icon img {
1687               display: block;
1688               }
1689     .media-link {
1690          font-size: 1.1em;
1691          }
1692     .media-action-box {
1693          position: relative;
1694          margin: 3em 3em 1em 1em;
1695          display: inline-block;
1696          vertical-align: top;
1697          }
1698     li.media-action {
1699          display: block;
1700          position: absolute;
1701          bottom: 4px;
1702          right: 8px;
1703          height: 16px;
1704          }
1705     li.media-action a {
1706          border: none;
1707          }
1708     li.media-action form {
1709          display: inline;
1710          }
1711     li.media-action input {
1712          border: none;
1713          }
1714#entry-sidebar .media-item {
1715     width: 100%;
1716     min-height: 0;
1717     padding: 4px;
1718     margin: .33em 0;
1719     }
1720     #entry-sidebar li.media-action {
1721          top: 4px;
1722          }
1723
1724.folders-group .media-item {
1725     min-height: 64px;
1726     }
1727     .folders-group .media-item p {
1728          margin-bottom: 0;
1729          }
1730     .media-folder {
1731          background: transparent url(bg_menu.png) repeat-y;
1732          border-color: #eee;
1733          }
1734     .media-folder-up {
1735          border-color: #fff;
1736          padding-bottom: 6px;
1737          }
1738     .media-folder .media-link {
1739          font-size: 1.25em;
1740          margin-left: 2em;
1741          color: #676e78;
1742          border-bottom: none;
1743          }
1744
1745.zip-dl {
1746     background: transparent url(package.png) no-repeat 0 50%;
1747     padding: 5px 0 5px 20px;
1748     }
1749/* upload multiple */
1750.enhanced_uploader .choose_files, .enhanced_uploader .cancel, 
1751.enhanced_uploader .clean, .enhanced_uploader .start {
1752     margin-right: .4em;
1753     }
1754.enhanced_uploader #upfile {
1755     visibility: hidden;
1756     width: 0;
1757     height: 0;
1758     margin: 0;
1759     opacity: 0;
1760     filter: alpha(opacity=0);
1761     cursor: pointer;
1762     }
1763.button.clean, .button.cancel, .button.choose_files {
1764     display: none;
1765     }
1766.enhanced_uploader .button.choose_files {
1767     display: inline-block;
1768     }
1769.enhanced_uploader .max-size {
1770     display: block;
1771     }
1772.enhanced_uploader .one-file {
1773     display: none;
1774     }
1775label span.one-file {
1776     display: inline;
1777     }
1778.enhanced_uploader p.clear {
1779     padding-top: 1em;
1780     margin-bottom: 1em;
1781     }
1782#add-file-f p.clear {
1783     margin-top: 1em;
1784     margin-bottom: 0;
1785     clear: both;
1786     }
1787.files {
1788     list-style-type: none;
1789     margin-left: 0;
1790     padding-left: 0;
1791     border-bottom: 1px solid #ddd;
1792     }
1793.files li {
1794     margin-left: 0;
1795     padding-left: 0;
1796     }
1797.upload-msg {
1798     font-weight: bold;
1799     }
1800.upload-msg.upload-error {
1801     color: #c00;
1802     }
1803.upload-files {
1804     padding: 0 0.5em;
1805     margin: 1em 0;
1806     }
1807.upload-file {
1808     margin: 0;
1809     padding: .3em 0;
1810     border-top: 1px solid #ddd;
1811     position: relative;
1812     }
1813.upload-fileinfo {
1814     margin-left: 0;
1815/*   margin-bottom: .4em;*/
1816     }
1817.upload-fileinfo input {
1818     position: absolute;
1819     top: .5em;
1820     right: .5em;
1821     }
1822.upload-fileinfo span {
1823     padding-right: 8px;
1824     }
1825.upload-fileinfo .upload-filecancel {
1826     display: block;
1827     padding-right: 0;
1828     margin-top: 3px;
1829     width: 20px;
1830     height: 20px;
1831     background: transparent url("cancel.png") no-repeat left top;
1832     text-indent: -1000px;
1833     cursor: pointer;
1834     float: left;
1835     }
1836.upload-filemsg {
1837     font-weight: bold;
1838     color: green;
1839     }
1840.upload-filemsg.upload-error {
1841     color: #c00;
1842     }
1843.upload-progress {
1844     padding: .3em 0; 
1845     }
1846.upload-progress div {
1847     width: 0;
1848     height: 1em;
1849     padding: .2em 0;
1850     font-size: 0.8em;
1851     font-weight: bold;
1852     line-height: 1em;
1853     text-align: right;
1854     background: green url("loader.png") repeat-x left top;
1855     color: white;
1856     border-radius: 2px;
1857     }
1858div.template-upload {
1859     clear: both;
1860     }
1861.queue-message {
1862     font-weight: bold;
1863     }
1864
1865/* --------------------------------------------------------------- media-item.php */
1866#media-icon {
1867     float: left;
1868     }
1869.near-icon {
1870     margin-left: 70px;
1871     margin-bottom: 3em;
1872     }
1873#media-details ul {
1874     display: block;
1875     margin-left: 0;
1876     padding: 0;
1877     }
1878     #media-details li {
1879          list-style: square inside;
1880          margin: 0;
1881          padding: 0;
1882          }
1883#media-original-image {
1884     overflow: auto;
1885     }
1886     #media-original-image.overheight {
1887          height: 500px;
1888          }
1889/* -------------------------------------------------------------------- plugins.php */
1890#plugins td.action {
1891     vertical-align: middle;
1892     }
1893.distrib img {
1894     display: block;
1895     float: right;
1896     margin-top: -1em;
1897     }
1898/* ---------------------------------------------------------- post.php, page.php */
1899#entry-wrapper {
1900     float: left;
1901     width: 100%;
1902     margin-right: -18em;
1903     }
1904#entry-content {
1905     margin-right: 20em;
1906     margin-left: 0;
1907     }
1908     #entry-content label {
1909          text-transform: uppercase;
1910          font-weight: bold;
1911          margin-top: 2em;
1912          }
1913     #entry-content label:first-child {
1914          margin-top: 0;
1915          }
1916#entry-sidebar {
1917     width: 18em;
1918     float: right;
1919     }
1920     #entry-sidebar select {
1921          width: 100%;
1922          }
1923     #entry-sidebar input#post_position {
1924          width: 4em;
1925          }
1926     .sb-box {
1927          border-bottom: 1px solid #ddd;
1928          margin-bottom: 1em;
1929          }
1930/* ---------------------------------------------------------- preferences.php */
1931.fav-list {
1932     list-style-type: none;
1933     margin-left: 0;
1934     padding-left: 0;
1935     }
1936     #my-favs .fav-list {
1937          border-top: 1px solid #eee;
1938          }
1939.fav-list li {
1940     margin-left: 0;
1941     padding-left: 0;
1942     padding-top: 3px;
1943     padding-bottom: 3px;
1944     position: relative;
1945     }
1946     #my-favs .fav-list li {
1947          line-height: 2;
1948          border-bottom: 1px solid #eee;
1949          padding-top: 3px;
1950          padding-bottom: 3px;
1951          position: relative;
1952          }
1953     .fav-list img {
1954          vertical-align: middle;
1955          margin-right: .2em;
1956          }
1957     .fav-list li span.zoom {
1958          display: none;
1959          }
1960     .fav-list li:hover span.zoom {
1961          display: block;
1962          position: absolute;
1963          bottom: 0;
1964          left: 10em;
1965          background-color: #f7f7f7;
1966          border: 1px solid #ddd;
1967          padding: .2em;
1968          border-radius: .5em;
1969          }
1970#my-favs {
1971     border-color: #A8DC26;
1972     }
1973     #my-favs input.position {
1974          margin: 0 0 .4em .2em;
1975          }
1976#available-favs input, #available-favs label, #available-favs label span {
1977     white-space: normal;
1978     display: inline;
1979     }
1980#available-favs label span.zoom {
1981     display: none;
1982     }
1983#available-favs li:hover label span.zoom {
1984     display: block;
1985     position: absolute;
1986     bottom: 0;
1987     left: 10em;
1988     background-color: #f7f7f7;
1989     border: 1px solid #ddd;
1990     padding: .2em;
1991     border-radius: .5em;
1992     }
1993#user-options label.ib {
1994     display: inline-block;
1995     width: 14em;
1996     padding-right: 1em;
1997     }
1998/* --------------------------------------------------------------------- user.php */
1999.blog-perm {
2000     margin-top: 2em;
2001     font-weight: bold;
2002     }
2003.ul-perm {
2004     list-style-type: square;
2005     margin-left: 0;
2006     padding-left: 3.5em;
2007     margin-bottom: 0
2008     }
2009.add-perm {
2010     padding-top: .5em;
2011     padding-left: 2.5em;
2012     margin-left: 0;
2013     }
2014
2015/* ------------------------------------------------------------------------------------
2016                                                                                                    CLASSES
2017------------------------------------------------------------------------------------ */
2018/* jQuery Autocomplete plugin */
2019.ac_results {
2020     padding: 0px;
2021     border: 1px dotted #f90;
2022     background-color: white;
2023     overflow: hidden;
2024     z-index: 99999;
2025     }
2026.ac_results ul {
2027     width: 100%;
2028     list-style-position: outside;
2029     list-style: none;
2030     padding: 0;
2031     margin: 0;
2032     }
2033     .ac_results li {
2034          margin: 0px;
2035          padding: 2px 5px;
2036          cursor: default;
2037          display: block;
2038          font-size: 1em;
2039          line-height: 16px;
2040          overflow: hidden;
2041          }
2042.ac_loading {
2043     background: transparent url('loader.gif') right center no-repeat;
2044     }
2045.ac_over {
2046     background-color: #06c;
2047     color: white;
2048     }
2049/* password indicator */
2050.pw-table {
2051     display: table;
2052     margin-bottom: 1em;
2053     }
2054.pw-cell {
2055     display: table-cell;
2056     margin-bottom: 1em;
2057     }
2058#pwindicator {
2059     display: table-cell;
2060     vertical-align: bottom;
2061     padding-left: 1.5em;
2062     height: 3.8em;
2063     }
2064     #pwindicator .bar {
2065          height: 6px;
2066          margin-bottom: 4px;
2067          }
2068          .pw-very-weak .bar {
2069               background: #900;
2070               width: 30px;
2071               }
2072          .pw-weak .bar {
2073               background: #c00;
2074               width: 60px;
2075               }
2076          .pw-mediocre .bar {
2077               background: #f60;
2078               width: 90px;
2079               }
2080          .pw-strong .bar {
2081               background: #060;
2082               width: 120px;
2083               }
2084          .pw-very-strong .bar {
2085               background: #0c0;
2086               width: 150px;
2087               }
2088/* ------------------------------------------------------------------ navigation */
2089/* selects accès rapide */
2090.anchor-nav {
2091     background: #ecf0f1;
2092     color: #000;
2093     padding: 4px 1em;
2094     }
2095/* nav links */
2096.nav_prevnext {
2097     margin-bottom: 2em;
2098     color: #fff;
2099     }
2100     .nav_prevnext a, a.back {
2101          border: 1px solid #ddd;
2102          padding: 2px 1.5em;
2103          border-radius: .75em;
2104          background-color: #f0f0f0;
2105          }
2106          a.back:before {
2107               content: "\ab\a0";
2108               }
2109          a.onblog_link {
2110               color: #333;
2111               float: right;
2112               border: 1px solid #eee;
2113               padding: 2px 1.5em;
2114               border-radius: .75em;
2115               background-color: #ffe;
2116               }
2117/* Pagination */
2118.pagination {
2119     height: 22px;
2120     margin-top: 1em;
2121     line-height: 22px;
2122     padding: 0 .75em;
2123     border: 1px solid #e7e7e7;
2124     overflow: hidden;
2125     background: #f3f3f3;
2126     -moz-border-radius: 3px;
2127     -webkit-border-radius: 3px;
2128     border-radius: 3px;
2129     clear: left;
2130     }
2131     .pagination a, .pagination strong {
2132          height: 20px;
2133          border: none;
2134          padding: 2px 6px;
2135          background-color : transparent;
2136          background-position : 50% 50%;
2137          background-repeat: no-repeat;
2138          }
2139          .pagination a:hover, .pagination strong {
2140               border-color : #ccc;
2141               background-color: #fff;
2142               }
2143/* Etapes */
2144.step {
2145     display: inline-block;
2146     float: left;
2147     margin: 3px 10px 2px 0;
2148     padding: 5px .5em;
2149     background: #ecf0f1;
2150     border-radius: 3px;
2151     font-weight: bold;
2152     border: 1px solid #bdc3c7;
2153     color: #738182;
2154     }
2155/* ---------------------------------------------------------------- utilisables partout  */
2156.fieldset {
2157     background: #fff;
2158     border: 1px solid #bbb;
2159     border-radius: 3px;
2160     padding: 1em .7em .5em;
2161     margin-bottom: 1em;
2162     }
2163     .fieldset h3 {
2164          margin-top: 0;
2165          }
2166.right, .txt-right {
2167     text-align: right;
2168     }
2169.txt-center {
2170     text-align: center;
2171     }
2172.txt-left {
2173     text-align: left;
2174     }
2175.no-margin, label.no-margin {
2176     margin-top: 0;
2177     margin-bottom: 0;
2178     }
2179.vertical-separator {
2180     margin-top: 2em;
2181     }
2182     p.clear.vertical-separator {
2183          padding-top: 2em;
2184          }
2185.border-top {
2186     border-top: 1px solid #999;
2187     padding-top: 1em;
2188     margin-top:    1em;
2189     }
2190.grid {
2191     background: transparent repeat url('grid.png') 0 0;
2192     }
2193ul.nice {
2194     margin: 1em 0;
2195     padding: 0 0 0 2em;
2196     list-style: square;
2197     }
2198     ul.nice li {
2199          margin:0;
2200          padding: 0;
2201          }
2202.offline {
2203     color: #676e78;
2204     }
2205/* caché pour tout le monde */
2206.hide, .button.hide {
2207     display: none;
2208     }
2209/* Caché sauf pour les revues d'écran */
2210.hidden, .with-js .out-of-screen-if-js {
2211     position: absolute !important;
2212     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
2213     clip: rect(1px, 1px, 1px, 1px);
2214     padding: 0 !important;
2215     border: 0 !important;
2216     height: 1px !important;
2217     width: 1px !important;
2218     overflow: hidden;
2219     }
2220/* caché si js est inactif */
2221.no-js .hidden-if-no-js {
2222     display: none;
2223     }
2224/* caché si js est actif */
2225.with-js .hidden-if-js {
2226     display: none;
2227     }
2228/* ------------------------------------------------------------------------------------
2229                                                                                                    UTILS
2230------------------------------------------------------------------------------------ */
2231/* debug */
2232#debug {
2233     position: absolute;
2234     top: 0;
2235     width: 100%;
2236     height: 4px;
2237     background: #d99;
2238     }
2239#debug div {
2240     display: none;
2241     padding: 3px 0.5em 2px;
2242     }
2243#debug p {
2244     margin: 0.5em 0;
2245     }
2246#debug:hover {
2247     height: auto;
2248     }
2249#debug:hover div {
2250     display: block;
2251     }
2252/* ------------------------------------------------------------------------------------
2253                                                                           UN POIL DE MEDIA QUERIES
2254------------------------------------------------------------------------------------ */
2255@media screen and (max-width: 920px) {
2256     #top, #top h1 a {
2257          width: 42px !important; 
2258          height:100%; 
2259          overflow: hidden;
2260          }
2261          #top h1 a:link {
2262               background: transparent url(dc_logos/b-dotclear120.png) no-repeat -180px 6px;
2263               border-right: 1px solid #ccc;
2264               }
2265          #top h1 a:hover, #top h1 a:focus {
2266               background: url(dc_logos/b-dotclear120.png) no-repeat -180px -94px;
2267               border-right: 1px solid #A2CBE9;
2268               }
2269     }
2270@media screen and (max-width: 800px) {
2271     #top, #info-boxes, #info-box1, #info-box2 {
2272          display:inline-block;
2273          vertical-align:middle;
2274          margin:0;
2275          padding:0;
2276          line-height: 32px; line-height: 3.2rem;
2277          }
2278          #info-box1 { margin-left: .75em; }
2279          #info-box1 select { width: 140px; width: 14rem; }
2280     #main-menu, #main, #content, #content h2, #entry-wrapper, #entry-sidebar, #entry-content, 
2281     .two-cols .col, .three-cols .col, .two-cols .col30, .two-cols .col70, .two-boxes, .three-boxes {
2282          display:block !important;
2283     width: 98% !important;
2284     margin:0 auto !important;
2285     padding:0;
2286     float:none;
2287     text-align: left;
2288     clear: both;
2289          }
2290     #content {
2291          width: 100%;
2292          padding-top: .5em;
2293          }
2294     }
2295@media screen and (max-width: 720px) {
2296     .smallscreen { display: none; }
2297     #info-box2 { float:none; }
2298     #help-button {
2299          height:26px; 
2300          width:26px; 
2301          background-color: #A2CBE9; 
2302          padding: 0; 
2303          margin: 0;
2304          font-size: 10px; font-size: 1rem;
2305          line-height: 68px;
2306          overflow: hidden;
2307          }
2308     .one-box, .two-boxes, .three-boxes {
2309          width: 100%;
2310          margin-left: 0;
2311          margin-right: 0; 
2312          }
2313     }
2314@media screen and (max-width: 492px) {
2315     #header { height: 36px; height: 3.6rem; }
2316     #wrapper { font-size: 16px; font-size: 1.6rem; }
2317     .page-title, #info-boxes { display: inline-block; }
2318     #info-box1 select {
2319          width: 120px; width: 12rem; 
2320          margin-right: .6rem;
2321          }
2322     #info-box1 p.nomobile, label.nomobile { display: none; }
2323     }
Note: See TracBrowser for help on using the repository browser.

Sites map