source: admin/style/default.css @ 2151:e4a15d8624ea

/*
# -- BEGIN LICENSE BLOCK --------------------------------------------------
# This file is part of Dotclear 2.
# Copyright (c) 2003-2013 Olivier Meunier & Association Dotclear
# Licensed under the GPL version 2.0 license.
# See LICENSE file or http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
# -- END LICENSE BLOCK ----------------------------------------------------
               LAYOUTS
               HTML TAGS
               FORMULAIRES
               BOUTONS
               MESSAGES
               ELEMENTS PRINCIPAUX
               REGLES SPECIFIQUES
               MEDIA QUERIES
*/
/* ---------------------------------------------------------------------------
                                                                                     LAYOUTS
---------------------------------------------------------------------------- */
#header {
     background: #676e78;
     color: #FFF;
     border-bottom: 4px solid #A2CBE9;
     width: 100%;
     display: table;
     }
#wrapper {
     position: relative;
     padding-top: 1.5em;
     float: left;
     width: 100%;
     z-index: 10;
     background: #F7F7F7 url(bg_wrapper.png) repeat-y 15em;
     }
.with-js #wrapper {
     padding-top: 0;
     }
#main {
     width: 100%;
     float: right;
     margin-left: -14em;
     margin-top: 0;
     }
#content {
     margin: 0 0 0 14em;
     padding: .5em 1.5em .75em 2.5em;
     background: #fff;
     }
#main-menu {
     width: 14em;
     float: left;
     margin:0;
     padding-top: .5em;
     padding-bottom: 1em;
     overflow: hidden;
     background: #f7f7f7;
     }
#footer {
     clear: both;
     position: relative;
     padding: .5em 1em .5em 0;
     text-align: right;
     border-top: 1px solid #ccc;
     background-color: #fff;
     }
/* to hide main-menu */
#collapser {
     position: absolute;
     top: 0;
     left: 14em;
     width: 1em;
     height: 100%;
     overflow: hidden;
     display: block;
     background: #f3f3f3 url(../images/collapser-hide.png) no-repeat center bottom;
     border-right: double #dfdfdf;
     z-index: 1;
     }
.expand-mm {
     display:none;
     }
/* if main-menu is hidden */
#wrapper.hide-mm {
     background: #fff;
     }
.hide-mm #main {
     margin-left: 0;
     }
.hide-mm #content {
     margin-left: 1em;
     }
.hide-mm #main-menu {
     display: none;
     }
.hide-mm #collapser {
     left: 0;
     background: #e3e3e3 url(../images/collapser-show.png) no-repeat center bottom;
     }
.hide-mm .collapse-mm {
     display: none;
     }
.hide-mm .expand-mm {
     display: block;
     }
/* -------------------------------------------------------------- layout: two-cols */
.two-cols {
     position: static;
     }
     .two-cols .col {
          width: 48%;
          margin-left: 2%;
          float: left;
          }
     .two-cols .col70 {
          width: 68%;
          margin-left: 0;
          float: left;
          }
     .col30 {
          width: 28%;
          margin-left: 2%;
          float: left;
          }
     .two-cols .col:first-child,
     .two-cols .col30.first-col {
          margin-left: 0;
          margin-right: 2%;
          }
     .two-cols .col:last-child,
     .two-cols .col70.last-col {
          margin-left: 2%;
          margin-right: 0;
          }
     .two-cols table {
          width: 90%;
          }
/* -------------------------------------------------------------- layout: three-cols */
.three-cols {
     position: static;
     }
     .three-cols .col { 
          width: 32.3%; 
          float: left; 
          margin-left: 1%; 
          } 
     .three-cols .col:first-child { 
          width: 33.3%; 
          margin-left: 0; 
          }
/* ------------------------------------------------- layout: optionnal one/two-boxes */
.one-box, .two-boxes, .three-boxes, .box {
     margin-bottom: 1em;
     }
.one-box {
     text-align: justify;
     }
.two-boxes {
     width: 47%;
     display: inline-block;
     vertical-align: top;
     margin-right: 2%;
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;
     }
     .two-boxes:first-child, .two-boxes.odd, .two-boxes.odd:last-child {
          margin-right: 3%;
          margin-left: 0;
          }
     .two-boxes.even:last-child, .two-boxes.even {
          margin-left: 3%;
          margin-right: 0;
          }
.three-boxes {
     width: 30%;
     display: inline-block;
     vertical-align: top;
     margin-left: 1.5%;
     margin-right: 1.5%; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;
     }
     .three-boxes:first-child, .three-boxes.first-child {
          margin-left: 0;
          }
     .three-boxes:last-child, .three-boxes.last-child {
          margin-right: 0;
          }
/* boîtes intérieures distribuées horizontalement */
.box {
     display: inline-block;
     vertical-align: top;
     margin-right: 3%; 
     text-align: left;
     }
.box:last-child {
     margin-right: 0;
     }
/* ---------------------------------------------------------------- layout: popups */
.popup h1 {
     display: block;
     width: 100%;
     margin: 0;
     background: #676e78;
     font-size: 1.5em;
     text-indent: 1em;
     line-height: 1.5em;
     font-weight: normal;
     color: #fff;
     }
.popup #wrapper {
     display: block;
     float: none;
     width: 100%;
     margin: 0;
     padding: 0;
     background-position: 0 0;
     }
.popup #main {
     margin: 0;
     padding: 0;
     }
.popup #content {
     margin: 0;
     padding: 1em;
     }
.popup #content h2 {
     margin: 0 0 1em 0;
     padding: 0;
     }
.popup #footer p {
     border: none;
     }
/* -------------------------------------------------------- layout: classes de complément */
.constrained {
     margin: 0;
     padding: 0;
     border: none;
     background: transparent;
     }
.table {
     display: table;
     }
.cell {
     display: table-cell;
     vertical-align: top;
     }
.clear {
     clear: both;
     }
.lclear {
     clear: left;
     }
.clearer {
     height: 1px;
     font-size: 1px;
     }
/* Micro clearfix thx to Nicolas Gallagher */
.clearfix:before, .clearfix:after {
     content: " "; 
     display: table;
     }
.clearfix:after {
     clear: both;
     }
.frame-shrink {
     border: 1px solid #676e78;
     padding: 0.5em;
     margin-bottom: 1em;
     height: 120px;
     overflow: auto;
     }
/* ---------------------------------------------------------------------------
                                                                                     HTML TAGS
---------------------------------------------------------------------------- */
html {
     font-size: 62.5%;
     }
body {
     font-size: 12px; /* ie < 9 sucks */
     font-size: 1.2rem;
     line-height: 1.5;
     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
     color: #333;
     background: #fff;
     margin: 0;
     padding: 0;
     }
/* ------------------------------------------------------------------ titres */
h1, h2, h3, .as_h3, h4, .as_h4, h5, h6 {
     margin-top: 0;
     margin-bottom: 1em;
     }
h2 {
     color: #676e78;
     font-size: 1.5em;
     padding: 0 0 1.5em;
     font-weight: normal;
     }
     /* titre de page */
     #content > h2 {
          padding: 0 1em .5em 1em;
          margin: 0 -1em .5em -1em;
          background: #fff url(bg_h2.png) repeat-x center bottom;
          }
     h2 a:link, h2 a:visited {
          color: #676e78;
          border-color: #000;
          }
     .page-title {
          color: #d30e60;
          }
     .page-title img {
          padding-left: .5em;
          vertical-align: middle;
          }
h3, .as_h3 {
     margin-top: 1em;
     color: #D33800;
     font-weight: normal;
     font-size: 1.34em;
     }
     #main-menu h3 {
          font-weight: bold;
          }
h4, .as_h4 {
     font-size: 14px; /* ie < 9 sucks */
     font-size: 1.4rem;
     color: #676e78;
     }
     .fieldset h3, .fieldset h4, .pretty-title { /* variante */
          color: #D33800;
          font-size: 1em;
          font-weight: bold;
          }
          .fieldset h3 {
               font-size: 1.17em;
               }
     .fieldset h3.smart-title, .fieldset h4.smart-title, .smart-title { /* variante */
          font-size: 1em;
          text-transform: uppercase;
          font-weight: bold;
          color: #333;
          text-shadow: 0 1px 0 rgba(200, 200, 200, 0.6)
          }
h5 {
     font-size: 12px; /* ie < 9 sucks */
     font-size: 1.2rem;
     font-weight: bold;
     color: #676e78;
     }
     #entry-sidebar h5 {
          font-weight: normal;
          color: #333;
          }
     .entry-status img.img_select_option {
          padding-left: 4px;
          vertical-align: text-top;
          }
h4 label, h5 label {color: #333;}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, ul:first-child, p:first-child {
     margin-top: 0;
     }
/* ---------------------------------------------------------------- tableaux */
.table-outer {
     width: 100%;
     overflow: auto;
     }
table {
     font-size: 12px; /* ie < 9 sucks */
     font-size: 1.2rem;
     border-collapse: collapse;
     margin: 0 0 1em 0;
     width: 100%;
     }
caption {
     color: #333;
     font-weight: bold;
     text-align: left;
     margin-bottom: .5em;
     }
th {
     border-width: 1px 0 1px 0;
     border-style: solid;
     border-color: #ddd;
     background: #eef1ec;
     padding: .4em 1em .4em .5em;
     vertical-align: top;
     text-align: left;
     }
td {
     border-width: 0 0 1px 0;
     border-style: solid;
     border-color: #e3e3e3;
     padding: .4em 1em .4em .5em;
     vertical-align: top;
     }

/* ---------------------------------------------------------- autres balises */
p {
     margin: 0 0 1em 0;
     }
hr {
     height: 1px;
     border-width: 1px 0 0;
     border-color: #ddd;
     background: #ddd;
     border-style: solid;
     }
hr.clearer {
     clear: both;
     }
pre, code, #debug {
     font: 100% "Andale Mono","Courier New",monospace;
     }
code {
     background: #FAFAD1;
     }
pre {
     white-space: pre;
     white-space: -moz-pre-wrap;
     white-space: -hp-pre-wrap;
     white-space: -o-pre-wrap;
     white-space: -pre-wrap;
     white-space: pre-wrap;
     white-space: pre-line;
     word-wrap: break-word;
     }
abbr {
     cursor: help;
     }
input, textarea, select, option, optgroup, legend,label {
     font-size: 1em;
     }
/* ------------------------------------------------------------------ liens */
a, a:link, a:visited {
     color: #2373A8;
     text-decoration: none;
     border-bottom: 1px dotted #999;
     }
a:hover, a:active, a:focus {
     border-bottom-style: solid;
     }
a img, a:link img, a:visited img {
     border:none;
     }
h1 a:link, h1 a:visited {
     border:   none;
     }
/* ----------------------------------------------------------------------------
                                                                                     FORMULAIRES
---------------------------------------------------------------------------- */
form {
     display: block;
     margin: 0;
     padding: 0;
     }
fieldset {
     display: block;
     margin: 1em 0;
     padding: 1em 0.5em;
     border-width: 1px 0;
     border-style: solid;
     border-color: #ccc;
     background: #f7f7f7;
     }
input[type=text], textarea {
     font: 100% "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
     }
legend {
     padding: 0.2em 0.6em;
     border-width: 1px;
     border-style: solid;
     border-color: #676e78;
     background: #fff;
     margin-bottom: 0.5em;
     border-radius: 3px;
     }
label .maximal, textarea.maximal, input.maximal {
     width: 99%;
     }
input[type=text], input[type=password], textarea, select {
     background: #fbfbfb;
     color: #000;
     border-width: 1px;
     border-style: solid;
     border-color: #ddd;
     border-radius: 3px;
     box-shadow: 1px 1px 2px #F1F1F1 inset;
     padding: 3px; 
     vertical-align: top;
     }
     input:focus, textarea:focus, select:focus {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          border-color: #bee74b;
          }
     textarea {
          padding: 2px 0;
          }
          textarea.maximal {
               resize: vertical;
               }
          .area textarea {
               display: block;
               width: 100%;
               resize: vertical;
               }
     select {
          padding: 2px 0;
          }
          select.l10n option {
               padding-left: 16px;
               }
          option.avail10n {
               background: transparent url(../images/check-on.png) no-repeat 0 50%;
               }
          option.sub-option1 {
               margin-left: .5em;
          }
          option.sub-option2 {
               margin-left: 1.5em;
          }
          option.sub-option3 {
               margin-left: 2.5em;
          }
          option.sub-option4 {
               margin-left: 3.5em;
          }
          option.sub-option5 {
               margin-left: 4.5em;
          }
          option.sub-option6 {
               margin-left: 5.5em;
          }
          option.sub-option7 {
               margin-left: 6.5em;
          }
          option.sub-option8 {
               margin-left: 7.5em;
          }
          option.sub-option1:before, option.sub-option2:before, option.sub-option3:before, option.sub-option4:before,
          option.sub-option5:before, option.sub-option6:before, option.sub-option7:before, option.sub-option8:before {
               content: "\002022\0000a0";
          }
     input.invalid, textarea.invalid, select.invalid {
          border: 1px solid red;
          background: #FFBABA;
          color: red;
          box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3);
          }
     input[type=text], input[type=password], textarea {
          margin-right: .3em;
          }
     input[type=checkbox], input[type=radio], input[type=file] {
          border: none;
          margin: 0 .33em 0 0;
          padding: 0;
          background: transparent;
          }
     input[type=file] {
          margin-top: .3em;
          margin-bottom: .3em;
          }
optgroup {
     font-weight: bold;
     font-style: normal;
     }
option {
     font-weight: normal;
     }
label, label span {
     display: block;
     }
     label.ib, input.ib {
          display: inline-block;
          }
     label.classic {
          display: inline;
          }
     label.classic input, label span input, label.classic select, label span select {
          display: inline;
          }
     label.required {
          font-weight: bold;
          }
          label.required abbr {
               color: #dd0000;
               font-size: 1.3em;
               }
     label.area, p.area {
          width: inherit !important;
          }
p.field {
     position: relative;
     }
     p.field label {
          display: inline-block;
          width: 14em;
          }
     p.field.wide label {
          width: 21em;
          }
     p.field input, p.field select {
          display: inline-block;
          }
.form-note {
     font-style: italic;
     font-weight: normal;
     color: #676e78;
     }
     p.form-note {
          margin-top: -.7em;
          }
     span.form-note {
          text-transform: none;
          }
/* ----------------------------------------------------------------------------
                                                                                          BOUTONS
---------------------------------------------------------------------------- */
/* Removes inner padding and border in FF3+  - Knacss */
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
     border: 0;
     padding: 0;
     }
/* tous les boutons */
button,
a.button,
input[type=button],
input[type=reset],
input[type=submit] {
     border: 1px solid #ccc;
     font-family: "DejaVu Sans","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
     padding: 3px 10px;
     line-height: normal !important;
     display: inline-block;
     vertical-align: middle;
     font-size: 100%;
     text-align: center;
     text-decoration: none;
     border-radius: 3px;
     cursor: pointer;
     }
button,
input[type=button],
input[type=reset],
input[type=submit] {
     -webkit-appearance: button;
     }
 /* validation */
input[type=submit], a.button.submit, input.button.start {
     color: #fff;
     border: 1px solid #2C8FD1;
     background-image:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
     background-image:-webkit-gradient(linear,left top,left bottom, from(#25A6E1), to(#188BC0));
     background-image:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
     background-color:#25A6E1;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
     }
     input[type=submit]:hover, input[type=submit]:focus,
     input.button.start:hover, input.button.start:focus,
     a.button.submit:hover, a.button.submit:focus {
          background-image:-moz-linear-gradient(top,#188BC0 0%,#25A6E1 100%);
          background-image:-webkit-gradient(linear,left top,left bottom, from(#188BC0),to(#25A6E1));
          background-image:linear-gradient(top,#188BC0 0%,#25A6E1 100%);
          background-color:#188BC0;
          }
/* suppression, reset, "neutres" fond gris */
button, input[type=button], input.button,
input[type=reset], input[type=submit].reset, input.reset, 
input[type=submit].delete, input.delete,
a.button.delete, a.button.reset, a.button {
     color: #000;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#dfdfdf));
     background-image: -moz-linear-gradient(top,  #f5f5f5,  #dfdfdf);
     background-image:linear-gradient(top,#f5f5f5 0%,#dfdfdf 100%);
     background-color: #eee;
     border: 1px solid #ccc;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
     }
     button:hover, input[type=button]:hover, input.button:hover,
     button:focus, input[type=button]:focus, input.button:focus,
     input[type=reset]:hover, input[type=submit].reset:hover, input.reset:hover, 
     input[type=reset]:focus, input[type=submit].reset:focus, input.reset:focus, 
     input[type=submit].delete:hover, input.delete:hover,
     input[type=submit].delete:focus, input.delete:focus,
     a.button.delete:hover, a.button.reset:hover, a.button:hover,
     a.button.delete:focus, a.button.reset:focus, a.button:focus {
          background-image:-webkit-gradient( linear, left top, left bottom, from(#e9e9e9), to(#f9f9f9));
          background-image:-moz-linear-gradient(top, #e9e9e9, #f9f9f9);
          background-image:linear-gradient(top,#e9e9e9 0%,#f9f9f9 100%);
          background-color:#f3f3f3;
          }
     /* suppression */
     input[type=submit].delete, input.delete, a.button.delete {
          border-color: #ccc;
          color: #c00;
          margin-left: 1em;
          }
     a.delete:first-child, input.delete:first-child {
          margin-left: 0;
          }
     input[type=submit].delete:hover, input.delete:hover, a.button.delete:hover,
     input[type=submit].delete:focus, input.delete:focus, a.button.delete:focus {
               border-color: #c00;
               }
     #info-box a.button {
          padding: 0 .5em;
          margin-left: 2em;
          }
.button.add {
     background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bee74b), color-stop(1, #9BCA1C) );
     background-image:-moz-linear-gradient(center top, #bee74b 5%, #9BCA1C 100%);
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bee74b', endColorstr='#9BCA1C');
     background-color:#bee74b;
     border:1px solid #B2D742;
     padding:.33em 1.33em .5em;
     color: #000;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
     font-weight: normal;
     font-size: 14px; /* ie < 9 sucks */
     font-size: 1.4rem;
     }
     .button.add:hover, .button.add:active, .button.add:focus {
          background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9BCA1C), color-stop(1, #bee74b) );
          background-image:-moz-linear-gradient(center top, #9BCA1C 5%, #bee74b 100%);
          background-image:linear-gradient(center top, #9BCA1C 5%, #bee74b 100%);
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9BCA1C', endColorstr='#bee74b');
          background-color:#9BCA1C;
          }
     .button-add:focus {
          outline: dotted 1px;
          }
     /* paragraphe pour bouton Nouveau bidule */
     p.top-add {
          text-align: right;
          margin: 0;
          }

/* disabled */
input.disabled, input[type=submit].disabled {
     text-shadow: none;
     filter: none;
     color: #676e78;
     background: #F5F5F5;
     border: 1px solid #CCC;
     }
     input.disabled:hover, input[type=submit].disabled:hover {
          color: #676e78;
          background: #eee;
          border: 1px solid #CCC;
          }
/* ----------------------------------------------------------------------------
                                                                                     MESSAGES
---------------------------------------------------------------------------- */
.warn, .warning, .info {
     font-style: normal;
     padding: .2em .66em .2em;
     text-indent: 24px;
     color: #333;
     display: inline-block;
     line-height: 1.5em;
     border-radius: 3px;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6)
     }
div.warn, div.warning, div.info {
     display: block;
     padding: 1em 1em .33em 1em;
     margin-bottom: 1em;
     }
     .warn, .warning {
          background: #FEFACD url(msg-warning.png) no-repeat .3em .3em;
          border: 1px solid #F7E07E;
          }
     .info {
          background: #D9EDF7 url(msg-info.png) no-repeat .3em .3em;
          border: 1px solid #BCE8F1;
          }
     span.warn, span.warning, span.info {
          padding-top: 1px;
          padding-bottom: 1px;
          background-position: .3em .2em;
          }
.error, .message, .static-msg, .success, .warning-msg {
     padding: 1em 0.5em 0.5em 48px;
     margin-bottom: 1em;
     border-radius: 8px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     }
     p.error, p.message, p.static-msg, p.success, p.warning-msg {
          padding-top: 1em;
          padding-bottom: 1em;
          }
     .error {
          background: #FFBABA url(msg-error.png) no-repeat .7em .7em;
          color: #000;
          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
          }
     .message, .static-msg {
          background: #676e78 url(msg-std.png) no-repeat .7em .7em;
          color: #fff;
          }
          .message a, .static-msg a, .message h3, .static-msg h3 {
               color: #fff;
               }
     .success, .warning-msg {
          color: #000;
          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6)
          }
          .success {
               background: #bee74b url(msg-success.png) no-repeat .7em .7em;
               background-color: #a2f157;
               }
          .warning-msg {
               background: #F7E07E url(msg-warning.png) no-repeat .7em .7em;
               border: 1px solid #F7E07E;
               }
          .success a, .warning-msg a, .info a {
               color: #333;
               }
.dc-update {
     padding: 1em 48px 0.5em 48px;
     margin-bottom: 1em;
     border-radius: 8px;
     background: #A2CBE9 url(msg-success.png) no-repeat .7em .7em;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
     color: #000;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1)
     }
     .dc-update h3 {
          margin-top: 0;
          color: #000;
          }
     .dc-update p {
          display: inline-block;
          vertical-align: middle;
          }
     .dc-update a {
          color: #000;
          margin-right: 1em;
          }
          .dc-update a.button {
               padding: .5em 1em; 
               }
          .updt-info a {
               margin-left: 2em;
               border-color: #000;
               font-weight: bold;
               }
/* ---------------------------------------------------------------------------------
                                                                                ELEMENTS PRINCIPAUX
--------------------------------------------------------------------------------- */
/* -------------------------------------------------------------- HEADER ELEMENTS */
/* prelude */
#prelude {
     line-height: 1.5;
     margin: 0;
     padding: 0;
     overflow: hidden;
     position: absolute;
     top: 3em;
     left: 0;
     background: #A2CBE9;
     width: 100%;
     z-index: 100;
     }
     #prelude li {
          list-style-type: none;
          margin: 0;
          background:transparent;
          display: inline;
          }
     #prelude li a {
          padding: 3px 16px 3px 8px; /* ie < 9 sucks */
          padding: 3px 1.6rem 3px .8rem;
          background: #A2CBE9;
          color: #000;
          text-decoration: underline;
          }
     #prelude li a:hover, #prelude li a:focus {
          background: #FFF;
          }
/* si le prélude est affiché on repousse les trucs dessous */
#wrapper.with-prelude { 
     padding-top: 1em;
     }
#help-button.with-prelude, #collapser.with-prelude {
     top: 1em;
     }
/* header global h1, form#top-info-blog, ul#top-info-user */
#header a {
     color: #FFF;
     }
#header img {
     vertical-align: middle;
     padding-left: .5em;
     }
h1, #top-info-blog, #top-info-user {
     display: table-cell;
     padding: 8px 0;
     margin: 0;
     font-size: 1em;
     vertical-align: top;
     }
/* h1 */
h1 {
     text-indent: -1000px;
     width: 16.5em;
     }
     h1 a {
          position: absolute;
          top: 0;
          left: 0;
          width: 15em;
          height: 36px; /* ie < 9 sucks */
          height: 3.6rem;
          color: #fff;
          background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
          }
     h1 a:hover, h1 a:focus {
          background-position: 0 -94px;
          }
/* top-info-blog */
#top-info-blog select {
     max-width: 20em;
     }
#top-info-blog a {
     margin-left: 1.5em;
     }
#top-info-blog input[type=submit] {
     background: #000;
     border-color: #999;
     margin-left: .33em; 
     }
#top-info-blog input[type=submit]:hover {
     background: #999;
     }
#top-info-blog p {
     display: inline-block;
     margin: 0;
     }
/* top-info-user */
#top-info-user {
     padding-right: 18px;
     list-style-type: none;
     text-align: right;
     }
#top-info-user li {
     display: inline-block;
     margin-left: .5em;
     padding-left: .5em;
     border-left: 1px solid #999;
     }
#top-info-user li:first-child {
     border-left: none;
     }
#top-info-user a.active {
     border-bottom-color: #fff;
     margin: 0;
     padding: 18px .5em;
     background-color: #fff;
     color: #333;
     font-weight: bold;
     }
/* ---------------------------------------------------------- MAIN-MENU ELEMENTS */
#favorites-menu, #blog-menu, #system-menu, #plugins-menu {
     border-bottom: 1px dashed #A2CBE9;
     }
#main-menu h3 {
     margin: 0;
     padding: 10px 0 10px 8px;
     color: #676e78;
     font-size: 14px; /* ie < 9 sucks */
     font-size: 1.4rem;
     }
     #favorites-menu h3 {
          color: #000;
          font-variant: small-caps;
          padding-top: .2em;
          }
#main-menu a {
     color: #333;
     border-bottom-color: #ccc;
     }
#main-menu ul {
     margin: 0 0 1.5em 0;
     padding: 0;
     list-style: none;
     }
     #main-menu li {
          display: block;
          margin: 0.5em 0 0;
          padding: 4px 0 1px 32px;
          background-repeat: no-repeat;
          background-position: 8px .3em;
          }
          #main-menu ul li:first-child {
               margin-top: 0;
               }
          #main-menu li.active {
               background-color: #fff;
               font-weight: bold;
               }
               #favorites-menu li.active {
                    background-color: transparent;
                    }
          #main-menu .active a {
               border-bottom: none;
               color: #d30e60;
               }
               #favorites-menu .active a {
                    color: #000;
                    }
#search-menu {
     padding: 4px 5px 0;
     font-size: 100%
     }
     #search-menu * {
          height: 22px; /* ie < 9 sucks */
          height: 2.2rem;
          display: inline-block;
          vertical-align: top;
          line-height: 22px;
          }
     #search-menu p {
          border: 1px solid #999;
          border-radius: .3em;
          position: relative;
          overflow: hidden;
          }
     #qx {
          width: 124px; /* ie < 9 sucks */
          width: 12.4rem;
          border-bottom-left-radius: .3em;
          border-top-left-radius: .3em;
          background: transparent url(search.png) no-repeat 4px center;
          text-indent: 18px;
          padding: 0;
          border: none;
          height: 22px;
          height: 2.2rem;
          }
          #qx:focus {
               border: 1px solid #bee74b;
               }
     #search-menu input[type="submit"] {
          padding: 0 3px;
          padding: 0 .3rem;
          margin-left: -4px;
          background: #dfdfdf;
          border-color: #999;
          color: #444;
          border-bottom-right-radius: .3em;
          border-top-right-radius: .3em;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          text-shadow: none;
          border: none;
          border-left: 1px solid #aaa;
          font-size: 10px; /* ie < 9 sucks */
          font-size: 1rem;
          }
          #search-menu input[type="submit"]:hover,
          #search-menu input[type="submit"]:focus {
               background: #676e78;
               color: #fff;
               }
/* ----------------------------------------------------------------- CONTENT ELEMENTS */
.part-tabs ul {
     padding: .5em 0 0 1em;
     border-bottom: 1px solid #ddd;
     line-height: 2;
     }
     .part-tabs li {
          list-style: none;
          margin: 0;
          display: inline;
          }
          .part-tabs li a {
               padding: .5em 2em;
               margin-right: -1px;
               border: 1px solid #ccc;
               border-bottom: none;
               text-decoration: none;
               color: #333;
               background-color: #ecf0f1;
               display: inline-block;
               }
          .part-tabs li a:hover, .part-tabs li a:focus {
               color: #000;
               background: #fff;
               border-bottom-color: #fff;
               }
          .part-tabs li.part-tabs-active a {
               background: #fff;
               font-weight: bold;
               border-bottom-color: #fff;
               }
     .multi-part {
          padding-left: 1em;
          }
/* contextual help */
#help {
     margin-top: 4em;
     background: #f5f5f5;
     z-index: 100;
     clear: both;
     padding: 0 1em;
     }
     #content.with-help #help {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 280px; /* ie < 9 sucks */
          width: 28rem;
          border-left: 2px solid #FFD478;
          border-top: 2px solid #FFD478;
          margin-top: 0;
          padding: .5em 0 0 0;
          overflow: auto;
          }
#help-button {
     background: transparent url(../images/page_help.png) no-repeat 6px center;
     position: absolute;
     top: 0;
     right: 0;
     padding: 0 1.5em 0 30px;
     cursor: pointer;
     color: #2373A8;
     line-height: 36px; /* ie < 9 sucks */
     line-height: 3.6rem;
     }
     #help-button.floatable {
          border-top: 2px solid #ccc;
          border-left: 2px solid #ccc;
          border-bottom: 2px solid #ccc;
          border-bottom-left-radius: 1em;
          border-top-left-radius: 1em;
        background-color: #f5f5f5;
        position: fixed;
        top: 10px;
        }
     .no-js #help-button {
          top: 1em;
          }
     #help-button span {
          padding: .5em 0 .1em 0;
          border-bottom: 1px solid #2373A8;
          }
     #content.with-help #help-button {
          right: 280px; /* ie < 9 sucks */
          right: 28rem;
          background-color: #f5f5f5;
          position: fixed;
          top: 50px;
          z-index: 100;
          border-top: 2px solid #FFD478;
          border-left: 2px solid #FFD478;
          border-bottom: 2px solid #FFD478;
          border-bottom-left-radius: 1em;
          border-top-left-radius: 1em;
          }
.help-box {
     display: none;
     }
     .help-box ul {
          padding-left: 20px;
          margin-left: 0;
          }
     #content.with-help .help-content {
          padding: 0 1em 1em;
          }
          .help-content dt {
               font-weight: bold;
               color: #626262;
               margin: 0;
               }
          .help-content dd {
               margin: 0.3em 0 1.5em 0;
               }
/* 1. inside help block */
#helplink p {
     padding: 0 0 0 .5em;
     }
/* ------------------------------------------------------------------ FOOTER ELEMENTS */
#footer p {
     margin: 0;
     padding: 0 1em;
     font-size: 1em;
     }
     span.credit {
          font-size: 1em;
          font-weight: normal;
          }
/* ---------------------------------------------------------------------------------------
                                                                                     RÈGLES SPÉCIFIQUES
---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------- LISTES TABLEAUX */
table .maximal, table.maximal {
     width: 100%;
     }
table .minimal {
     width: 1px;
     }
table .nowrap {
     white-space: nowrap;
     vertical-align: top;
     }
table .count {
     text-align: right;
     padding-right: 1.5em;
     }
th.first img {
     padding-right: 34px;
     }
tr.line img.expand, th img.expand {
     margin-right: 6px;
     margin-bottom: -2px;
     }
tr.line p {
     margin: 0;
     }
tr.line input[type=text] {
     background: #FFF;
     }
tr.line input, tr.line select {
     vertical-align: middle;
     -webkit-box-shadow: none;
             box-shadow: none;
     }
tr.line select {
     width: 6em;
     }
tr.line:hover {
     background: #f3f3f3;
     }
td.status {
     vertical-align: middle;
     }
td.status img {
     margin-bottom: -2px;
     }
td.status a {
     border: none;
     }
.noborder td, td.noborder, .noborder th, th.noborder {
     border-width: 0 0 1px 0;
     border-color: #ddd;
     line-height: 2em;
     padding-bottom: 0;
     }
.noborder p {
     margin-bottom: 0;
     }
table.posts-list {
     min-width: 50%;
     }
table.settings, table.prefs {
     margin-bottom: 3em;
     }
     table.settings th:first-child, table.prefs th:first-child {
          width: 20%;
          }
     table.settings th + th, table.prefs th + th {
          width: 30%;
          }
     table.settings th + th + th, table.prefs th + th + th {
          width: 10%;
          }
     table.settings th:last-child, table.prefs th:last-child {
          width: 40%;
          }
/* js */
td.expand {
     padding: 1em;
     }
tr.expand td {
     border-bottom: none;
     }
.handle {
     padding: 0;
     }
.handler {
     cursor: move;
     background: transparent url(drag.png) no-repeat 0 50%;
     padding-left: 15px;
     }
/* ----------------------------------------------------------- BOITES À FILTRES */
a.form-control {
     display: none;
     background: url(../images/expand.png) no-repeat 4px center;
     padding-left: 20px;
     color: #000;
     }
a.form-control.open {
     background: url(../images/hide.png) no-repeat 4px center;
     }
#filters-form {
     border: 1px dashed #999;
     border-radius: .5em;
     margin-bottom: 2em;
     padding: .5em 1em 0;
     }
#filters-form .table {
     width: 100%;
     padding: 0;
     margin-bottom: 1em;
     margin-top: .5em;
     }
     #filters-form .cell {
          padding: 0 2em 0 0;
          }
     #filters-form .filters-sibling-cell {
          padding-top: 3.8em;
          }
#filters-form .filters-options {
     padding-left: 2em;
     border-left: 1px solid #ccc;
     }
#filters-form label.ib, span.ib {
     width:7em;
     }
#filters-form label.ibw, span.ibw {
     width: 9em;
     display: inline-block;
     }
#filters-form select {
     width: 14em;
     }
#filters-form h4 {
     margin-top: 0;
     margin-bottom: 2em;
     }
/* ---------------------------------------------------------------------------- SPEC PAGES */
/* ---------------------------------------------------------------------------- auth.php */
#login-screen {
     display: block;
     width: 20em;
     margin: 1.5em auto 0;
     font-size: 14px; /* ie < 9 sucks */
     font-size: 1.4rem;
     }
#login-screen h1 {
     text-indent: -2000px;
     background: transparent url(dc_logos/w-dotclear240.png) no-repeat top left;
     height: 66px;
     width: 20em;
     margin-bottom: .5em;
     margin-left: 0;
     }
#login-screen .fieldset {
     border: 1px solid #A8DC26;
     padding: 1em 1em 0 1em;
     border-radius: 3px;
     background: #fff;
     }
#login-screen input[type=text], #login-screen input[type=password], #login-screen input[type=submit],
#login-screen input[type=text]:focus, #login-screen input[type=password]:focus, #login-screen input[type=submit]:focus {
     width: 100%;
     margin: 0; 
     padding: 5px 3px;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box; 
     }
     #login-screen input.login, #login-screen input.login:focus {
          padding-top: 6px;
          padding-bottom: 6px;
          font-size: 1em;
          }
#login-screen #issue {
     margin-left: 1.33em;
     font-size: 12px; /* ie < 9 sucks */
     font-size: 1.2rem;
     }
     #login-screen #issue strong {
          font-weight: normal;
          }
/* ------------------------------------------------------------------------- index.php */
#dashboard-main {
     padding: 1em 0;
     }
/* raccourcis */
#icons {
     overflow: hidden;
     padding-bottom: 1em;
     text-align: center;
     }
     #icons p {
          width: 170px;
          text-align: center;
          margin: 1em 0 2em;
          padding: 1em 0;
          display:inline-block;
          vertical-align: top;
          }
     #icons a,
     #icons a:link,
     #icons a:visited,
     #icons a:hover,
     #icons a:focus {
          border-bottom-width: 0;
          text-decoration: none;
          }
          #icons a span {
               border-bottom: 1px dotted #999;
               color: #333;
               }
          #icons a img {
               padding: 1.5em;
               background-color:#f9f9f9;
               -moz-border-radius:8px;
               -webkit-border-radius:8px;
               border-radius:8px;
               border:1px solid #dcdcdc;
               display:inline-block;
               }
               #icons a:focus img, #icons a:hover img {
                    background: #bee74b;
                    }
               #icons a:focus span, #icons a:hover span {
                    border-bottom-style: solid;
                    }
/* billet rapide */
#quick {
     margin-top: 1em;
     padding-top: 1em;
     }
     #quick h3 {
          margin-bottom: 0.2em;
          font-size: 1.2em;
          }
     #quick p.qinfo {
          margin: -.7em -1em 1em;
          background: #f3f3ff url(info.png) no-repeat .2em .2em;
          border: 1px solid #99f;
          padding: .2em 1em .1em 24px;
          color: #676e78;
          }
     #quick #new_cat, .q-cat, .q-cat label {
          display: inline-block;
          vertical-align: top;
          margin-right: 1em;
          margin-top: 0;
          }
     .q-cat label {
          margin-right: .3em;
          }
     #quick #new_cat {
          margin-bottom: 2em;
     }
/* modules additionnels */
#dashboard-boxes {
     margin: 2em auto 1em;
     padding-top: 2em;
     }
     .db-items, .db-contents {
          display: inline-block;
          text-align: center;
          }
     #dashboard-boxes .box {
          padding: 10px;
          border:   1px solid #ccc;
          border-radius: 3px;
          min-height: 200px;
          margin: 10px;
          text-align: left;
          }
          .box.small {
               width: 300px;
               }
          .box.medium {
               width: 640px;
               }
          .box.large {
               width: 100%;
               }
          .dc-box {
               background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right;
               }
     .db-items img, .db-contents img {
          vertical-align: middle;
          }
     .db-items ul, .db-contents ul {
          display: block;
          padding-left: 1.5em;
          list-style: square;
          }
          .db-items li, .db-contents li {
               margin: 0.25em 0 0 0;
               }
     #news dt {
          font-weight: bold;
          margin: 0 0 0.4em 0;
          }
     #news dd {
          margin: 0 0 1em 0;
          }
          #news dd p {
               margin: 0.2em 0 0 0;
               }
/* message de mise à jour */
#upg-notify ul {
     padding-left: 1.5em;
     }
     #upg-notify li {
          color: #fff;
          }
/* ------------------------------------------------------------------- blog_pref.php */
#media_img_title_pattern {
     margin-right: 1em;
     }
.user-perm {
     margin: 2em 0px;
     background: transparent url(user.png) no-repeat left top;
     width: 320px;
     display: inline-block;
     vertical-align: top;
     }
     .user-perm h4, .user-perm h5, .user-perm p, .user-perm ul, .user-perm li {
          margin: .5em 0 .33em;
          padding: 0;
          }
     .user-perm h4 {
          padding-left: 28px;
          }
     .user-perm h5 {
          margin:   1em 0 0 0;
          }
     .user-perm ul {
          list-style-type: inside;
          }
          .user-perm li {
               margin-left: 1em;
               padding-left: 0;
               }
               li.user_super, li.user_admin {
                    margin-left: 0;
                    padding-left: 1em;
                    list-style: none;
                    background: transparent url(../images/superadmin.png) no-repeat -2px 2px;
                    }
               li.user_admin {
                    background-image: url(../images/admin.png);
                    }
/* ------------------------------------------------------------------- blog_theme.php */
#themes {
     margin: 0;
     width: 100%;
     padding: 0;
     }
     .theme-details {
          border-top: 1px solid #ccc;
          padding: 12px;
          display: inline-block;
          vertical-align: top;
          width: 284px;
          }
          .theme-details.current-theme {
               background: #eef;
               }
          .theme-details:hover {
               background: #f3f3f3;
               }
          .theme-shot img {
               display: block;
               border: 1px solid #ccc;
               margin-bottom: 1.5em;
               }
          span.theme-desc {
               display: block;
               }
          span.theme-version {
               color: #676e78;
               }
          .theme-css {
               display: block;
               }
     #themes-actions {
          border-bottom: 1px solid #999;
          margin-bottom: 3em;
          }
/* Themes list, JS version */
#themes-wrapper {
     display: table;
     }
     #themes-wrapper #themes {
          display: table-cell;
          vertical-align: top;
          padding-left: 1em;
          }
     #theme-box {
          display: table-cell;
          vertical-align: top;
          padding: 0;
          width: 312px;
          border: 1px solid #ccc;
          border-radius: 3px;
          }
          #theme-box .theme-shot,
          #theme-box .theme-info,
          #theme-box .theme-actions {
               background: #eef;
               padding: 1em 16px;
               margin: 0;
               }
          #theme-box .theme-shot img {
               display: block;
               width: 280px;
               height: 245px;
               border: 1px solid #ccc;
               }
          #theme-box h4 {
               color: #000;
               background: #eef;
               }
          #theme-box span.theme-version {
               color: #676e78;
               }
          #theme-box span.theme-parent-ok {
               color: #676e78;
               }
          #theme-box span.theme-parent-missing {
               color: #c00;
               font-weight:bold;
               }
          #theme-box .theme-actions {
               border-bottom: 1px solid #ccc;
               }
#themes .theme-details-js {
     float: left;
     width: 120px;
     height: 150px;
     margin: 0 12px 24px;
     padding: 12px 12px 0;
     text-align: center;
     background: #f3f3f3;
     border: 1px solid #ddd;
     cursor: pointer;
     border-radius: 4px;
     }
     #themes .theme-details-js label {
          cursor: pointer;
          }
     #themes .theme-details-js.theme-selected {
          background: #e7e7e7;
          border: 1px solid #999;
          }
     #themes .theme-details-js .theme-shot img {
          width: 120px;
          height: 105px;
          border: 1px solid #fff;
          }
     #themes a:focus div, #themes a:hover div,
     #themes a:focus div.current-theme, #themes a:hover div.current-theme {
          background: #bee74b;
          }
/* ------------------------------------------------------------------ categories.php */
#categories {
     margin: 1em 0;
     }
#categories ul {
     list-style: none;
     margin-top: 2em;
     padding: 0;
     }
     .cat-line {
          position: relative;
          margin: .66em 0;
          padding: .66em 1em;
          border: 1px solid #bbb;
          border-radius: 3px;
          }
          .cat-line label {
               margin-right: .25em;
               }
          .cat-line label a {
               font-weight: bold;
               }
          .cat-line p, .cat-line label {
               margin: 0;
               display: inline-block;
               }
          p.cat-title {
               margin-right: 1em;
               }
          .cat-nb-posts a {
               color: #333;
               }
          .cat-url {
               padding-left: 1em;
               }
          #categories .placeholder {
               outline: 1px dashed #4183C4;
               min-height: 2.5em;
               }
.cat-buttons { 
     float: right; 
     margin-top: -.2em;
     font-size: 11px;
     }
.cat-buttons select {
     padding: 1px 2px 3px 2px;
     margin-right: .25em;
     }
.cat-buttons .reset {
     padding-left: 4px;
     padding-right: 4px;
     }
#categories ul ul {
     margin-right: 2em;
     margin-left: 2em;
     }
.cat-line .cat-line {
     border: 1px solid #dfdfdf;
     }
.cat-actions {
     line-height: 2;
     }
     #del_cat {
          width: 100%;
          }
/* ------------------------------------------------------------------ help.php */
.legible { /* for pages with a lot of text to read */
     font-size: 1.16em;
     max-width: 62em;
     }

/* ------------------------------------------------------------------ media.php */
.media-item {
     position: relative;
     border: 1px solid #ddd;
     margin: 9px;
     padding: 10px 12px 6px;
     width: 300px;
     display: inline-block;
     vertical-align: top;
     min-height: 140px;
     word-wrap: break-word;
     }
     .media-item p {
          margin: 0 0 .5em;
          }
     .media-item object {
          margin-top: .5em;
          }
     .media-item ul {
          display: block;
          list-style: none;
          margin: 0;
          padding: 0;
          }
     a.media-icon {
          display: block;
          border-bottom: none;
          margin: 0 auto; 
          }
          .media-icon img {
               display: block;
               }
     .media-link {
          font-size: 1.1em;
          }
     .media-action-box {
          position: relative;
          margin: 3em 3em 1em 1em;
          display: inline-block;
          vertical-align: top;
          }
     li.media-action {
          display: block;
          position: absolute;
          bottom: 4px;
          right: 8px;
          height: 16px;
          }
     li.media-action a {
          border: none;
          }
     li.media-action form {
          display: inline;
          }
     li.media-action input {
          border: none;
          }
#entry-sidebar .media-item {
     width: 100%;
     min-height: 0;
     padding: 4px;
     margin: .33em 0;
     }
     #entry-sidebar li.media-action {
          top: 4px;
          }

.folders-group .media-item {
     min-height: 70px;
     }
     .folders-group .media-item p {
          margin-bottom: 0;
          }
     .media-folder {
          background: transparent url(bg_menu.png) repeat-y;
          border-color: #eee;
          }
     .media-folder-up {
          border-color: #fff;
          padding-bottom: 6px;
          }
     .media-folder .media-link {
          font-size: 1.25em;
          margin-left: 2em;
          color: #676e78;
          border-bottom: none;
          }

.zip-dl {
     background: transparent url(package.png) no-repeat 0 50%;
     padding: 5px 0 5px 20px;
     }
/* upload multiple */
.enhanced_uploader .choose_files, .enhanced_uploader .cancel, 
.enhanced_uploader .clean, .enhanced_uploader .start {
     margin-right: .4em;
     }
.enhanced_uploader #upfile {
     visibility: hidden;
     width: 0;
     height: 0;
     margin: 0;
     opacity: 0;
     filter: alpha(opacity=0);
     cursor: pointer;
     }
.button.clean, .button.cancel, .button.choose_files {
     display: none;
     }
.enhanced_uploader .button.choose_files {
     display: inline-block;
     }
.enhanced_uploader .max-size {
     display: block;
     }
.enhanced_uploader .one-file {
     display: none;
     }
label span.one-file {
     display: inline;
     }
.enhanced_uploader p.clear {
     padding-top: 1em;
     margin-bottom: 1em;
     }
#add-file-f p.clear {
     margin-top: 1em;
     margin-bottom: 0;
     clear: both;
     }
.files {
     list-style-type: none;
     margin-left: 0;
     padding-left: 0;
     border-bottom: 1px solid #ddd;
     }
.files li {
     margin-left: 0;
     padding-left: 0;
     }
.upload-msg {
     font-weight: bold;
     }
.upload-msg.upload-error {
     color: #c00;
     }
.upload-files {
     padding: 0 0.5em;
     margin: 1em 0;
     }
.upload-file {
     margin: 0;
     padding: .3em 0;
     border-top: 1px solid #ddd;
     position: relative;
     }
.upload-fileinfo {
     margin-left: 0;
/*   margin-bottom: .4em;*/
     }
.upload-fileinfo input {
     position: absolute;
     top: .5em;
     right: .5em;
     }
.upload-fileinfo span {
     padding-right: 8px;
     }
.upload-fileinfo .upload-filecancel {
     display: block;
     padding-right: 0;
     margin-top: 3px;
     width: 20px;
     height: 20px;
     background: transparent url("cancel.png") no-repeat left top;
     text-indent: -1000px;
     cursor: pointer;
     float: left;
     }
.upload-filemsg {
     font-weight: bold;
     color: green;
     }
.upload-filemsg.upload-error {
     color: #c00;
     }
.upload-progress {
     padding: .3em 0; 
     }
.upload-progress div {
     width: 0;
     height: 1em;
     padding: .2em 0;
     font-size: 0.8em;
     font-weight: bold;
     line-height: 1em;
     text-align: right;
     background: green url("loader.png") repeat-x left top;
     color: white;
     border-radius: 2px;
     }
div.template-upload {
     clear: both;
     }
.queue-message {
     font-weight: bold;
     }

/* --------------------------------------------------------------- media-item.php */
#media-icon {
     float: left;
     }
.near-icon {
     margin-left: 70px;
     margin-bottom: 3em;
     }
#media-details ul {
     display: block;
     margin-left: 0;
     padding: 0;
     }
     #media-details li {
          list-style: square inside;
          margin: 0;
          padding: 0;
          }
#media-original-image {
     overflow: auto;
     }
     #media-original-image.overheight {
          height: 500px;
          }
/* -------------------------------------------------------------------- plugins.php */
#plugins td.action {
     vertical-align: middle;
     }
.icon img {
     width: 16px;
     height: 16px;
     }
.distrib img {
     display: block;
     float: right;
     }
/* ---------------------------------------------------------- post.php, page.php */
#entry-wrapper {
     float: left;
     width: 100%;
     margin-right: -16em;
     }
#entry-content {
     margin-right: 18em;
     margin-left: 0;
     }
     #entry-content label {
          text-transform: uppercase;
          font-weight: bold;
          margin-top: 2em;
          display: inline-block;
          }
     #entry-content label:first-child {
          margin-top: 0;
          }
#entry-sidebar {
     width: 16em;
     float: right;
     }
     #entry-sidebar h4 {
          font-size: 13px;
          font-size: 1.3rem;
          margin-top: .3em;
          }
     #entry-sidebar select {
          width: 100%;
          }
     #entry-sidebar input#post_position {
          width: 4em;
          }
     .sb-box {
          border-bottom: 1px solid #ddd;
          margin-bottom: 1em;
          }
     #tb_excerpt {
          width: 100%;
          }
/* ---------------------------------------------------------- preferences.php */
.fav-list {
     list-style-type: none;
     margin-left: 0;
     padding-left: 0;
     }
     #my-favs .fav-list {
          border-top: 1px solid #eee;
          }
.fav-list li {
     margin-left: 0;
     padding-left: 0;
     padding-top: 3px;
     padding-bottom: 3px;
     position: relative;
     }
     #my-favs .fav-list li {
          line-height: 2;
          border-bottom: 1px solid #eee;
          padding-top: 3px;
          padding-bottom: 3px;
          position: relative;
          }
     .fav-list img {
          vertical-align: middle;
          margin-right: .2em;
          }
     .fav-list li span.zoom {
          display: none;
          }
     .fav-list li:hover span.zoom {
          display: block;
          position: absolute;
          bottom: 0;
          left: 10em;
          background-color: #f7f7f7;
          border: 1px solid #ddd;
          padding: .2em;
          border-radius: .5em;
          }
#my-favs {
     border-color: #A8DC26;
     }
     #my-favs input.position {
          margin: 0 0 .4em .2em;
          }
#available-favs input, #available-favs label, #available-favs label span {
     white-space: normal;
     display: inline;
     }
#available-favs label span.zoom {
     display: none;
     }
#available-favs li:hover label span.zoom {
     display: block;
     position: absolute;
     bottom: 0;
     left: 10em;
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     padding: .2em;
     border-radius: .5em;
     }
#user-options label.ib {
     display: inline-block;
     width: 14em;
     padding-right: 1em;
     }
/* --------------------------------------------------------------------- user.php */
.blog-perm {
     margin-top: 2em;
     font-weight: bold;
     }
.ul-perm {
     list-style-type: square;
     margin-left: 0;
     padding-left: 3.5em;
     margin-bottom: 0
     }
.add-perm {
     padding-top: .5em;
     padding-left: 2.5em;
     margin-left: 0;
     }
/* --------------------------------------------------------------------- _charte.php */
.guideline #content h2 {
     color: #D33800;
     padding: 2em 0 0 0;
     margin: 1em 0;
     font-size: 2em;
     }
.guideline h3 {
     margin-top: 2em;
     }
.guideline .one-box .box {
     border: 1px solid #ddd; 
     padding: 2px .5em;
     }
/* ------------------------------------------------------------------------------------
                                                                                                    CLASSES
------------------------------------------------------------------------------------ */
/* jQuery Autocomplete plugin */
.ac_results {
     padding: 0px;
     border: 1px dotted #f90;
     background-color: white;
     overflow: hidden;
     z-index: 99999;
     }
.ac_results ul {
     width: 100%;
     list-style-position: outside;
     list-style: none;
     padding: 0;
     margin: 0;
     }
     .ac_results li {
          margin: 0px;
          padding: 2px 5px;
          cursor: default;
          display: block;
          font-size: 1em;
          line-height: 16px;
          overflow: hidden;
          }
.ac_loading {
     background: transparent url('loader.gif') right center no-repeat;
     }
.ac_over {
     background-color: #06c;
     color: white;
     }
/* password indicator */
.pw-table {
     display: table;
     margin-bottom: 1em;
     }
.pw-cell {
     display: table-cell;
     margin-bottom: 1em;
     }
#pwindicator {
     display: table-cell;
     vertical-align: bottom;
     padding-left: 1.5em;
     height: 3.8em;
     }
     #pwindicator .bar {
          height: 6px;
          margin-bottom: 4px;
          }
          .pw-very-weak .bar {
               background: #900;
               width: 30px;
               }
          .pw-weak .bar {
               background: #c00;
               width: 60px;
               }
          .pw-mediocre .bar {
               background: #f60;
               width: 90px;
               }
          .pw-strong .bar {
               background: #060;
               width: 120px;
               }
          .pw-very-strong .bar {
               background: #0c0;
               width: 150px;
               }
/* ------------------------------------------------------------------ navigation */
/* selects accès rapide */
.anchor-nav {
     background: #ecf0f1;
     color: #000;
     padding: 4px 1em;
     }
.anchor-nav label {
     vertical-align: bottom;
     }
/* nav links */
.nav_prevnext {
     margin-bottom: 2em;
     color: #fff;
     }
     .nav_prevnext a, a.back {
          border: 1px solid #ddd;
          padding: 2px 1.5em;
          border-radius: .75em;
          background-color: #f0f0f0;
          }
          a.back:before {
               content: "\ab\a0";
               }
          a.onblog_link {
               color: #333;
               float: right;
               border: 1px solid #eee;
               padding: 2px 1.5em;
               border-radius: .75em;
               background-color: #ffe;
               }
/* Pagination */
.pager {
     margin: 2em 0 1em 0;
     clear: left;
     }
.pager ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     }
.pager li, .pager input {
     display:inline-block;
     vertical-align: middle;
     margin: 0 .33em 0 0;
     padding: 0;
     text-align: center;
     }
     .pager .btn {
          border: 1px solid #ddd;
          background-color: #fcfcfc;
          color: #738182; 
          border-radius: 3px;
          overflow: hidden;
          }
          .btn.no-link {
               border-color: #ddd;
               background-color: #f9f9f9;
               padding: 1px 3px 0;
               }
     .pager .active {
          padding: 4px 12px; 
          color: #676e78;
          }
     .pager .direct-access {
          margin-left: 2em;
          }
     .direct-access input[type=text] {
          border: 1px solid #ddd;
          padding: 3px 8px;
          margin-left: .25em;
          background-color: #fff;
          }
     .direct-access input[type=submit] {
          padding: 3px 6px; 
          }
.pager a {
     display: block;
     padding: 1px 3px 0;
     border:none;
     }
.pager a:hover, .pager a:focus {
     background-color: #ecf0f1;
     }
/* Etapes */
.step {
     display: inline-block;
     float: left;
     margin: 3px 10px 2px 0;
     padding: 5px .5em;
     background: #ecf0f1;
     border-radius: 3px;
     font-weight: bold;
     border: 1px solid #bdc3c7;
     color: #738182;
     }
/* ---------------------------------------------------------------- utilisables partout  */
.fieldset {
     background: #fff;
     border: 1px solid #bbb;
     border-radius: 3px;
     padding: 1em .7em .5em;
     margin-bottom: 1em;
     }
     .fieldset h3 {
          margin-top: 0;
          }
.right, .txt-right {
     text-align: right;
     }
.txt-center {
     text-align: center;
     }
.txt-left {
     text-align: left;
     }
.no-margin, label.no-margin {
     margin-top: 0;
     margin-bottom: 0;
     }
.vertical-separator {
     margin-top: 2em;
     }
     p.clear.vertical-separator {
          padding-top: 2em;
          }
.border-top {
     border-top: 1px solid #999;
     padding-top: 1em;
     margin-top:    1em;
     }
.grid {
     background: transparent repeat url('grid.png') 0 0;
     }
ul.nice {
     margin: 1em 0;
     padding: 0 0 0 2em;
     list-style: square;
     }
     ul.nice li {
          margin:0;
          padding: 0;
          }
ul.from-left {
     list-style-type: none;
     padding-left: 0;
     margin: 1 0;
     }
     ul.from-left > li {
          margin-top: 1em;
          margin-bottom: 1em;
          }
     ul.from-left ul {
          list-style-type: square;
          }
.offline {
     color: #676e78;
     }
/* caché pour tout le monde */
.hide, .button.hide {
     display: none;
     }
/* Caché sauf pour les revues d'écran */
.hidden, .with-js .out-of-screen-if-js {
     position: absolute !important;
     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0 !important;
     border: 0 !important;
     height: 1px !important;
     width: 1px !important;
     overflow: hidden;
     }
/* caché si js est inactif */
.no-js .hidden-if-no-js {
     display: none;
     }
/* caché si js est actif */
.with-js .hidden-if-js {
     display: none;
     }
/* ------------------------------------------------------------------------------------
                                                                                                    UTILS
------------------------------------------------------------------------------------ */
/* debug */
#debug {
     position: absolute;
     top: 0;
     width: 100%;
     height: 4px;
     background: #ff6;
     }
#debug div {
     display: none;
     padding: 3px 0.5em 2px;
     }
#debug p {
     margin: 0.5em 0;
     }
#debug:hover {
     height: auto;
     padding: 2px 1em;
     z-index: 100;
     }
#debug:hover div {
     display: block;
     }
/* ------------------------------------------------------------------------------------
                                                                           UN POIL DE MEDIA QUERIES
------------------------------------------------------------------------------------ */
@media screen and (max-width: 1000px) {
     #top-info-blog #switchblog {
          max-width: 16em;
          }
     #top-info-blog a {
          margin-left: 2em;
          }
     }
@media screen and (max-width: 960px) {
     #header {
          display: block;
          width: 100%;
          text-align: right;
          background: #333;
          } 
     #header h1, #header h1 a {
          width: 120px;
          padding: 0;
          margin: 0;
          }
     h1, #top-info-blog {
          display: inline-block;
          vertical-align: top;
          margin-right: 1em;
          }
     #top-info-user {
          display: block;
          width: 100%;
          background: #676e78;
          padding-right: 0;
          }
     #top-info-user li:last-child {
          padding-right: 1em;
          }
     #top-info-user a.active {
          padding: 2px 8px;
          } 
     .three-boxes, .three-boxes .box,
     .three-boxes:first-child, .three-boxes.first-child,
     .three-boxes:last-child, .three-boxes.last-child,
     .two-cols .col70, .two-cols .col30 {
          width: 100%;
          margin-left: 0;
          margin-right: 0; 
          }
     }
@media screen and (max-width: 700px) {
      #help-button {
          height:26px;
          width:26px;
          background-color: #A2CBE9;
          padding: 0;
          margin: 0;
          font-size: 10px; font-size: 1rem;
          line-height: 68px;
          overflow: hidden;
          }    
     #content.with-help #help-button {
          top: 77px;
          }
     .one-box, .two-boxes,
     .one-box .box, .two-boxes .box, .two-boxes.odd, .two-boxes.even,
     .two-boxes:first-child, .two-boxes.odd, .two-boxes.odd:last-child,
     .two-boxes.even:last-child, .two-boxes.even,
     .two-cols .col {
          width: 100%;
          margin-left: 0;
          margin-right: 0; 
          }
     }
@media screen and (max-width: 600px) {
     #header h1, #header h1 a {
          width: 42px !important; 
          height: 42px;
          }
     h1 a:link {
          background: transparent url(dc_logos/b-dotclear120.png) no-repeat -180px 6px;
          border-right: 1px solid #ccc;
          }
     h1 a:hover, h1 a:focus {
          background: url(dc_logos/b-dotclear120.png) no-repeat -180px -94px;
          border-right: 1px solid #A2CBE9;
          }
     #wrapper, #main, #main-menu {
          display: block;
          float: none;
          width: 100%;
          margin: 0;
          }
     #main-menu a {
          display: block;
          width: 100%;
          }
     #main-menu h3 a {
          display: inline;
          }
     #content {
          margin: 0;
          padding: 0 .5em !important;
          }
     #collapser {
          display: none;
          }
     #main #content > h2 {
          margin: 0;
          padding: 6px 0;
          }
     #dashboard-boxes .box.medium,
     #dashboard-boxes .box.small,
     #dashboard-boxes .box.large {
          width: 90%;
          margin: 10px auto;
          }
     }
@media screen and (max-width: 500px) {
     h1, h1 a {
          padding: 0;
          border-right: #333 !important;
          }
     #top-info-blog label, .nomobile {
          display: none;
          }
     #top-info-blog select {
          margin-bottom: .5em;
          margin-right: 0 !important;
          }
     #top-info-blog p {
          display: block;
          }
     #icons p {
          width: 150px;
          }
     #content.with-help #help-button {
          top: 101px;
          }
     }
/* ---------------------------------------------- Couleurs ajoutées via javascript   
/* color-picker.js */
.color-color-picker {
     border: 1px solid #000;
     width: 195px;
     background: #fff;
     }
/* _blog_theme.js */
.select-button {
     font-weight: bold;
     }
/* _media_item.js */
.color-div {
     border: 1px solid #ccc;
     }
/* fadings ('color' est utilisé comme variable, pas comme text color) */
.colorBeginPassword, .colorBeginValidatorErr, .colorBeginUserMail {
     color: #fff;
     }
.colorEndPassword, .colorEndError, .colorEndValidatorErr, .colorEndUserMail {
     color: #ffbaba;
     }
.colorBeginMessage {
     color: #ccc;
     }
.colorEndMessage, .colorBeginValidatorMsg {
     color: #676e78;
     }
.colorBeginError {
     color: #ffdec8;
     }
.colorBeginSuccess {
     color: #9BCA1C;
     }
.colorEndSuccess {
     color: #bee74b;
     }
 .colorEndValidatorMsg {
     color: #ffcc00;
     }