Dotclear

source: admin/style/default.css @ 1958:d4d6696eed0d

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

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

Sites map