Dotclear

source: admin/style/default.css @ 1990:64538e14d013

Revision 1990:64538e14d013, 49.7 KB checked in by Lepeltier kévin <kevin@…>, 12 years ago (diff)

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

Sites map