Dotclear

source: admin/style/default.css @ 2267:e59137433afb

Revision 2267:e59137433afb, 52.1 KB checked in by Denis Jean-Chirstian <contact@…>, 12 years ago (diff)

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

Sites map