Dotclear

source: admin/style/default.css @ 1789:fb2cbdc0ba39

Revision 1789:fb2cbdc0ba39, 45.1 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map