Dotclear

source: admin/style/default.css @ 1917:a6026fcf0bb2

Revision 1917:a6026fcf0bb2, 49.2 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Pagination, mise en forme et compléments.

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

Sites map