Dotclear

source: admin/style/default.css @ 2022:e8a786ec10bf

Revision 2022:e8a786ec10bf, 49.7 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

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

Sites map