Dotclear

source: admin/style/default.css @ 1869:86628c089648

Revision 1869:86628c089648, 48.8 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map