Dotclear

source: admin/style/default.css @ 1767:c99d36e17de6

Revision 1767:c99d36e17de6, 43.4 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map