Dotclear

source: admin/style/default.css @ 2006:d05c4983c3c7

Revision 2006:d05c4983c3c7, 49.5 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

Réparation des popups qui étaient tout moches.

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

Sites map