Dotclear

source: admin/style/default.css @ 1994:f11a757f6dd3

Revision 1994:f11a757f6dd3, 49.6 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Améliorations de présentation :

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

Sites map