Dotclear

source: admin/style/default.css @ 1748:cc4744ca4ed7

Revision 1748:cc4744ca4ed7, 42.4 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map