Dotclear

source: admin/style/default.css @ 1991:72ab5d2aff52

Revision 1991:72ab5d2aff52, 49.7 KB checked in by Franck Paul <carnet.franck.paul@…>, 12 years ago (diff)

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

Sites map