Dotclear

source: admin/style/default.css @ 1971:f0a9d1ec6e3c

Revision 1971:f0a9d1ec6e3c, 49.5 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map