Dotclear

source: admin/style/default.css @ 1760:70e6ba18a169

Revision 1760:70e6ba18a169, 43.2 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Editeur: hauteur minimale pour l'extrait ; pas de hauteur fixe pour la toolbar.

Couleurs:

  • le gris #666 est un peu plus bleuté (je pinaille si je veux)
  • les titres h3 sont orange foncé

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

Sites map