Dotclear

source: admin/style/default.css @ 2130:9571f9d492ef

Revision 2130:9571f9d492ef, 49.7 KB checked in by Lepeltier kévin <kevin@…>, 12 years ago (diff)

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

Sites map