Dotclear

source: admin/style/default.css @ 2078:0619de6f0565

Revision 2078:0619de6f0565, 51.2 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Menu simple, tableau sans drag & drop sur l'ajout d'un item ; réduction de la largeur déclenchant le scroll horizontal du tableau.

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

Sites map