source: themes/ductile/style.css @ 694:cdb899b3d7ac

@charset "UTF-8";
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Ductile, a theme for Dotclear
#
# Copyright (c) 2011 - 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 ----------------------------------------- */

/* Infos
Plan de cette feuille :
1. Structure, imports
2. Liens, html
3. Page
4. Haut de page
5. Wrapper, main, content
6. Billets
7. Commentaires et rétroliens
8. Sidebar
9. Footer
10. Classes communes
11. Pages spécifiques
12. Clearers

Couleurs :
Typo: #222 courant, #4c4c85 commentaires
Titres non cliquables: #14709e
Liens: #666 courant, #ad3f4c titre billet et Lire la suite
Fond formulaire comm: #eef
Fond sidebar: #ededed

Thanks to:
Colorzilla wysiwyg gradient editor http://www.colorzilla.com/gradient-editor/
Micro clearfix by Nicolas Gallagher http://nicolasgallagher.com/
*/

/* -----------------------------------------------------------------
     1. STRUCTURE - IMPORTS
------------------------------------------------------------------ */

@import url(rebase.css);
@import url(mediaqueries.css);

/* ------------------------------------------------------- body */
body {
     background: #fff;
     font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     color: #222;
     }

/* ------------------------------------------------------------
     2. LIENS & Complément balises HTML
------------------------------------------------------------- */
del {
     color: #800000;
     }
blockquote {
     border-left: 4px solid #ccc;
     padding: 1px 1em .5em;
     background: #f9f9f9;
     }
code, pre {
     background: #efefef;
     border-right: 1px solid #aaa;
     border-bottom: 1px solid #aaa;
     font-size: .81em;
     }
pre {
     white-space: normal;
     }
a {
     color: #686867;
     }
a:hover, a:focus {
     background-color: #ebebee;
     text-decoration: none;
     }
ul ul {
     margin-top: 0;
     }
h2, h2 a {
     font-weight: normal;
     margin-top: .75em;
     }
table {
     border: 1px solid #999;
     border-collapse: collapse;
     }
td, th, tr {
     padding: 2px 8px;
     border: 1px solid #CCC;
     border-collapse: collapse;
     }
thead th, tbody th {
     color: #555;
     background: #f0f0f5;
     text-align: left;
     font-weight: normal;
     }
tbody tr:hover, tbody th:hover {
     background: #eee; 
     }
table caption {
     color: #14709e;
     text-align: left;
     margin-bottom: .33em;
     font-weight: bold;
     }

/* ------------------------------------------------------------
     3. PAGE
------------------------------------------------------------- */

#page {
     position: relative;
     }

/* ------------------------------------------------------------
     4. HAUT DE PAGE
------------------------------------------------------------- */
#header {
     position: relative;
     text-shadow: 0 1px 1px rgba(0,0,0,.2);
     line-height: 1;
     }
#logo a img, #stickers a img {
     border: none;
     }
h1 {
     font-variant: small-caps;
     }
h1 a {
     text-decoration: none;
     color: #333;
     }
#blogdesc {
     margin: 0 0 0 32px;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     font-style: italic;
     color: #686867;
     text-shadow: none;
     }
.supranav, #prelude {
     list-style-type: none;
     line-height: 1.25;
     font-size: .875em;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
.supranav li, #prelude li {
     text-transform: uppercase;
     vertical-align: top;
     }
.supranav {
     clear: both;
     }
.supranav li a {
     text-decoration: none;
     white-space: nowrap;
     margin-bottom: 4px;
     background: transparent url(img/menu.png) no-repeat right top;
     }
.supranav li a:hover, 
.supranav li a:active, 
.supranav li a:focus {
     background-color: #ebebee;
     background-position: right -150px;
     }
.supranav li.active a {
     background-position: right -150px;
     color: #14709e;
     }
.supranav li a span {
     display: block;
     text-transform: none;
     text-shadow: none;
     font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     font-style:italic;
     }

/* ------------------------------------------------------------
     5. WRAPPER MAIN CONTENT
------------------------------------------------------------- */
#wrapper {
     clear: both;
     position: relative;
     }
#content {
     padding-bottom: 2em;
     }

/* ------------------------------------------------------- content-info */
#content-info {
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     font-size: .875em;
     }
#content-info h2 {
     color: #14709e;
     margin-top: 1em;
     margin-bottom: .33em;
     }
#subcategories {
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     padding-top: 1em;
     font-size: .875em;
     }
#subcategories h3, #subcategories ul {
     display: inline;
     padding-right: 1em;
     }
#subcategories h3 {
     font-size: 1.1em;
     font-variant: small-caps;
     }
#content-info p, 
#content-info ul, 
#subcategories ul {
     margin: .5em 0;
     padding: 0;
     list-style-type: none;
     }
#subcategories li {
     margin: 0;
     display: inline;
     padding-right: 1em;
     }
.feed-info {
     color: #fff;
     }
.feed-info a {
     font-size: .875em;
     padding-top: .1em;
     padding-bottom: .1em;
     }
/* ------------------------------------------------------- pagination, navlinks */
.navlinks, 
.pagination {
     margin: 2em 0 1em 0;
     padding: 4px 8px;
     text-align: center;
     font-size: .875em;
     color: #000;
     background: rgb(244,244,245);
     background: -moz-linear-gradient(top, rgba(244,244,245,1) 0%, rgba(215,215,220,1) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,245,1)), color-stop(100%,rgba(215,215,220,1)));
     background: -webkit-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
     background: -o-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
     background: -ms-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f5', endColorstr='#d7d7dc',GradientType=0 );
     background: linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -o-border-radius: 4px;
     -ms-border-radius: 4px;
     -khtml-border-radius: 4px;
     border-radius: 4px;
     border-right: 1px solid #aaa;
     border-bottom: 1px solid #ccc;
     }
.navlinks a, 
.pagination a {
     color: #333;
     }

/* ------------------------------------------------------------
     6. BILLETS
------------------------------------------------------------- */
.post {
     background: transparent url(img/filet.png) repeat-x left bottom;
     }
.day-date {
     display: none;
     }
.post-title {
     margin-bottom: .33em;
     color: #14709e;
     line-height: 1.17;
     }
.post-title a {
     text-decoration: none;
     color: #ad3f4c;
     }
.post-icon {   /* for entry short */
     display: block;
     float: left;
     margin: .33em 1em .66em 0;
     padding: 4px;
     border: 1px solid #999;
     -moz-box-shadow: 2px 2px 3px #ccc;
     -webkit-box-shadow: 2px 2px 3px #ccc;
     -o-box-shadow: 2px 2px 3px #ccc;
     box-shadow: 2px 2px 3px #ccc;
     }
.short .post-content p {      /* for entry short */
     margin-top: 0;
     }
.post h3,
.post h4, 
.post h5,
.post h6 {
     font-weight: normal;
     color: #14709e;
     }
.post h3, .post h5 {
     font-variant: small-caps;
     }
.post-content img, .post-excerpt img {
     border: 1px solid #ccc;
     max-width: 96%;
     padding: 4px;
     }
img.smiley {
     border: none;
     padding: 0;
     }
.post-info, 
.post-tags, 
.post-info-co, 
.read-it {
     line-height: 1.2;   
     margin: .33em 0;
     }
.post-attr {
     margin-bottom: 1em;
     }
.post-info, 
.post-tags {
     font-size: .875em;
     margin: 0;
     background: #fff;
     display: inline;
     padding: 0 .66em 0 0;
     }
.post-info span + span {
     padding-right: .5em;
     }
.post-cat {
     padding-left: 24px;
     background: transparent no-repeat left center url(img/category.png);
     }
.permalink a {
     padding-left: 20px;
     background: transparent no-repeat left center url(img/link.png);
     }
.post-tags a {
     padding-right: 1em;
     padding-left: 14px;
     background: transparent no-repeat left center url(img/tag.png);
     }
.post-tags li {
     display: inline;
     }
.post-content {
     padding-bottom: 9px;
     }
.post ul {
     list-style-type: square;
     margin-left: 1em;
     }
.post ol {
     margin-left: 1em;
     }
.footnotes {
     font-size: .875em;
     }
.footnotes h4 {
     font-variant: normal;
     font-weight: bold;
     }
.read-it {
     text-align: right;
     margin: 0 0 .5em 0;
     }
.read-it a {
     color: #ad3f4c;
     padding-left: .5em;
     }
.post-info-co {
     margin: 0;
     background: #fff;
     display: inline;
     font-size: 0.875em;
     font-style: italic;
     padding-right: .5em;
     }
.post-info-co a {
     text-decoration: none;
     padding-right: 1em;
     padding-left: 28px;
     background-color: #fff;
     background-repeat: no-repeat;
     background-position: left center;
     }
.post-info-co a.comment_count {
     background-image: url(img/comment.png);
     }
.post-info-co a.ping_count {
     background-image: url(img/ping.png);
     }
.post-info-co a.attach_count {
     background-image: url(img/attach.png);  
     }
#attachments {
     font-size: .875em;
     border-bottom: 1px solid #999;
     margin: 0 0 2em;
     }
#attachments h3 {
     font-variant: small-caps;
     font-weight: normal;
     color: #686867;
     }
#attachments ul {
     list-style-type: none;
     margin: 0 0 1em;
     padding: 0;
     }
#attachments ul li {
     padding-left: 24px;
     background: transparent url(img/download.png) no-repeat left .3em;
     }

/* ------------------------------------------------------------
     7. COMMENTAIRES, PINGS
------------------------------------------------------------- */

/* ------------------------------------------------------- commentaires et rétroliens */
#comments, 
#ping-url, 
#comment-form,
#comments-feed { 
     color: #333;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     font-size: .875em;
     clear: both;
     }
#comment-form, #ping-url {
     padding: 1em;
     background: #eef;
     margin-top: 1em;
     color: #333;
     border: 1px solid #ddf;
     }
#pr {
     padding: 1em;
     border: 1px dashed #14709e;
     margin-bottom: 1em;
     }
#comments h3, 
#ping-url h3, 
#pr h3, 
#comment-form h3 { 
     margin-top: 2em;
     color: #666;
     }
#comment-form h3, #ping-url h3 {
     margin-top: 0;
     }
#comments > ul { 
     margin-left: 0;
     padding-left: 0;
     list-style-type: none;
     }
.comment, .ping {
     clear: left;
     margin-left: 0;
     border-top: 1px solid #bbb;
     }
.comment-info { 
     padding-bottom: .2em;
     line-height: 1.25;
     color: #686867;
     font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
     }
#comments .me { 
     font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     color: #14709e;
     }
.comment-number {
     font-size: 2em;
     font-weight: normal;
     font-style: italic;
     text-decoration: none;
     font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     color: #ad3f4c;
     display: block;
     width: 2em;
     }
.comment .comment-number {
     background: transparent url(img/comm.png) right center no-repeat;
     }
.ping .comment-number {
     background: transparent url(img/tb.png) right center no-repeat;
     }
#comments-feed {
     border-top: 1px solid #bbb;
     margin-top: 1.5em;
     padding-top: 1em;
     }

/* ------------------------------------------------------- formulaire des commentaires */
#comment-form fieldset { }
.field { 
     margin-bottom: 1em;
     }
.field label { 
     display: block;
     font-size: .875em;
     color: #666;
     text-indent: 6px;
     }
.field input, 
.field textarea {
     display: block;
     font-size: 100%;
     border: 1px solid #ccc;
     padding: 4px;
     background: #fff;
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px;
     -o-border-radius: 3px;
     -ms-border-radius: 3px;
     -khtml-border-radius: 3px;
     border-radius: 3px;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
.field textarea {
     padding: .5em 1em;
     }
.field input:focus, 
.field textarea:focus {
     background: #fff;
     }
#comment-form input[type=submit], 
#comment-form input[type=reset] {
     color: #eee;
     font-size: .875em;
     display: inline-block;
     text-transform: capitalize;
     font-weight: bold;
     text-align: center;
     padding: .33em .66em;
     text-shadow: 0 1px 1px rgba(0,0,0,.3);
     background: rgb(119,119,119);
     border: solid 1px #686867;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     -ms-border-radius: 5px;
     -khtml-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     -o-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     box-shadow: 0 1px 2px rgba(0,0,0,.2);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(119,119,119,1)), color-stop(100%, rgba(85,85,85,1)));
     background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     background: -o-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     background: -ms-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     }
#comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus,
#comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus {
     background: rgb(85,85,85);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(85,85,85,1)), color-stop(100%, rgba(119,119,119,1)));
     background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
     background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
     background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
     background: -ms-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
     background: linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
     text-decoration: none;
     }
#c_content {
     width: 95%;
     padding: 4px;
     }
.form-help {
     margin-top: 0;
     font-size: .875em;
     font-style: italic;
     }
#comments-feed { 
     margin-top: 2em; 
     }

/* ------------------------------------------------------------
     8. SIDEBAR
------------------------------------------------------------- */

#sidebar {
     font-size: 0.875em;
     }
#sidebar img {
     max-width: 100%;
     }
#sidebar h2 {
     font-size: 1.1em;
     margin: 0;
     font-weight: normal;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     color: #333;
     }
#sidebar h2.toggle {
     background: url(img/plus.png) no-repeat left center;
     padding-left: 16px;
     }
#sidebar h2.expanded {
     background-image: url(img/minus.png);
     }
#sidebar h2.toggle a {
     text-decoration: none;
     }
#sidebar h3 {
     font-size: 1em;
     margin-bottom: 0;
     font-weight: normal;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     color: #333;
     }
#sidebar ul {
     margin: .75em 0 .5em 4px;
     list-style-type: none;
     padding: 0;
     }
#sidebar ul li ul {
     margin-top: 0;
     margin-bottom: 0;
     }
#sidebar li {
     padding-left: 16px;
     background: transparent url(img/square.png) no-repeat 0 .5em;
     }
#sidebar ul li ul li {
     background-image: url(img/square2.png);
     }
#sidebar ul li ul li ul li {
     background-image: url(img/square3.png);
     }
#sidebar .syndicate li {
     background-image: none;
     padding-left: 0;
     }
#blognav > div, 
#blogextra > div {
     background: #ededed;
     margin-bottom: 1em;
     padding: 4px 8px;
     -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
     -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
     -o-box-shadow: 2px 2px 4px rgba(0,0,0,.2);
     box-shadow: 2px 2px 4px rgba(0,0,0,.2);
     }
.category-current {
     font-weight: bold;
     }
     
/* ------------------------------------------------------- recherche */
#search p {
     background: #fff; 
     text-align: right;
     border: 1px solid #ddd;
     vertical-align: middle;
     padding: 0;
     }
#search input { 
     margin: 0;
     border: none;
     background: transparent;
     height: auto;
     line-height: 2em;
     }
#q {
     float: left;
     width: 78%;
     font-size: 100%;
     padding-left: 2px;
     }
#q:focus {
     background: #fcfcf9;
     }
#search .submit {
     background: #706F6F;
     color: #fff;
     vertical-align: top;
     width: 20%;
     font-variant: small-caps;
     height: 2em;
     }
#search .submit:hover, 
#search .submit:focus {
     background: #333;
     }
     
/* ------------------------------------------------------------
     9. FOOTER
------------------------------------------------------------- */

#footer {
     clear: both;
     background: #686867;
     color: #fff;
     font-size: .875em;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
#footer p {
     padding: .66em 2em;
     margin: 0;
     text-align: right;
     }
#footer a {
     color: #fff;
     }
#footer a:hover, 
#footer a:focus {
     background-color: #333;
     }
#blogcustom {
     clear: both;
     text-align: center;
     background-color: #ededed;
     color: #333;
     border-bottom: 1px solid #999;
     }
#blogcustom h2 {
     font-size: 1.2em;
     }
#blogcustom a:link, #blogcustom a:visited {
     color: #666;
     }
#blogcustom > div {
     display: inline-block;
     text-align: left;
     vertical-align: top;
     width: 294px;
     padding: 12px;
     }
#blogcustom div.feed {
     background-image: none;
     }
#blogcustom img {
     max-width: 100%;
     }
#blogcustom ul {
     padding: .66em 1em 0;
     margin: 0;
     text-align: left;
     line-height: 1.75;
     }
#blogcustom li {
     padding-left: 0;
     margin-left: 0;
     }
#blogcustom .syndicate ul,
#blogcustom .tags ul {
     list-style-type: none;
     padding-left: 0;
     }
#stickers {
     list-style-type: none;
     margin: 0;
     }
/* ------------------------------------------------------------
     10. CLASSES COMMUNES
------------------------------------------------------------- */
/* ------------------------------------------------------- RSS */
.feed {
     padding-left: 22px;
     background: transparent url(img/feed.png) no-repeat left center;
     }
/* ------------------------------------------------------- tags */
.dc-tags .content-inner, 
.dc-tags .content-inner ul {
     font-size: 1.25em;
     margin: 0;
     padding: 0;
     }
.dc-tags #content ul li, 
.dc-tags #content ul li a,
#blogcustom .tags ul li, 
#blogcustom .tags ul li a, 
#sidebar .tags ul li, 
#sidebar .tags ul li a {
     display: inline;
     width: auto;
     padding-left: 0;
     padding-right: .5em;
     background-color: transparent;
     background-image: none;
     text-decoration: none;
     line-height: 1.5em;
     }
.tags ul li a:hover {
     background-image: none;
     }
.dc-tags .tag0, .tags .tag0 {
     font-size: 85%;
     }
.dc-tags .tag10, .tags .tag10 {
     font-size: 90%;
     }
.dc-tags .tag20, .tags .tag20 {
     font-size: 95%;
     }
.dc-tags .tag30, .tags .tag30 {
     font-size: 100%;
     }
.dc-tags .tag40, .tags .tag40 {
     font-size: 105%;
     }
.dc-tags .tag50, .tags .tag50 {
     font-size: 110%;
     }
.dc-tags .tag60, .tags .tag60 {
     font-size: 115%;
     }
.dc-tags .tag70, .tags .tag70 {
     font-size: 120%;
     }
.dc-tags .tag80, .tags .tag80 {
     font-size: 125%;
     }
.dc-tags .tag90, .tags .tag90 {
     font-size: 130%;
     }
.dc-tags .tag100, .tags .tag100 {
     font-size: 135%;
     }
/* ------------------------------------------------------- messages d'erreur */
.error {
     border: 1px solid #c44;
     background: #df0;
     padding: 0.5em;
     }
.error ul {
     padding-left: 20px;
     }
.error li {
     list-style: square;
     }
/* ------------------------------------------------------- class à dispo pour billets */
.left {
     float: left;
     margin-right: 1em;
     }
.right {
     float: right;
     margin-left: 1em;
     }
.center {
     margin-left: auto;
     margin-right: auto;
     }
.left-text {
     text-align: left;
     }
.right-text {
     text-align: right;
     }
.center-text {
     text-align: center;
     }
.little-text {
     font-size: .875em;
     }
.little-upper-text {
     font-size: .875em;
     text-transform: uppercase;
     }
hr.hidden {
     background: #fff;
     color: #fff;
     border-color: #fff;
     margin: 0;
     }
/* ------------------------------------------------------------
     11. PAGES SPECIFIQUES
------------------------------------------------------------- */

.dc-home { }
.dc-post { }
.dc-category { }

/* ---------------------------------------------------------------- archives */
.arch-block {
     display: inline-block;
     margin: 0 0 2em 4em;
     vertical-align: top;
     }
.arch-block:first-child {
     margin-left: 0;
     }
.arch-block h3 {
     margin-bottom: 1em;
     font-size: 1.2em;
     font-style: italic;
     font-weight: normal;
     text-transform: lowercase;
     color: #14709e;
     }
.arch-block h4 {
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     font-weight: normal;
     font-size: 1.1em;
     margin-bottom: 0;
     margin-top: 0;
     }
.arch-block ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     }
.arch-block ul ul {
     margin-left: 20px;
     }
#time-criteria h3:first-child {
     margin-top: 0;
     }
#by-date {
     margin-right: 0;
     margin-bottom: 1em;
     margin-top: 2em;
     }
#by-date h3 {
     margin-bottom: 0;
     }
.fromto {
     margin-top: 0;
     margin-bottom: 1.5em;
     font-size: .875em;
     font-style: italic;
     }
#by-date div {
     display: inline-block;
     vertical-align: top;
     margin: 0;
     width: 10em;
     }
#by-date ul {
     margin-bottom: 1.5em;
     }
#by-date span {
     font-size: .875em;
     }
#by-cat ul {
     background: transparent url(img/vline.png) repeat-y;
     }
#by-cat ul ul {
     margin: .5em 0 0 .5em;
     }
#by-cat ul li {
     padding: .2em .2em .2em 20px;
     background: transparent url(img/hline.png) no-repeat left .82em;
     }
#by-cat ul li:last-child {
     background-image: url(img/last-hline.png);
     }
#by-tag {
     width: 18em;
     }
#by-tag ul li {
     display: inline;
     padding-right: 1em;
     }
#by-tag .tag0 {
     color: #909090;
     font-size: 90%;
     }
#by-tag .tag10 {
     color: #828282;
     font-size: 92%;
     }
#by-tag .tag20 {
     color: #737373;
     font-size: 94%;
     }
#by-tag .tag30 {
     color: #656565;
     font-size: 96%;
     }
#by-tag .tag40 {
     color: #484848;
     font-size: 98%;
     }
#by-tag .tag50 {
     color: #3A3A3A;
     font-size: 100%;
     }
#by-tag .tag60 {
     color: #2B2B2B;
     font-size: 102%;
     }
#by-tag .tag70 {
     color: #1D1D1D;
     font-size: 104%;
     }
#by-tag .tag80 {
     color: #0E0E0E;
     font-size: 106%;
     }
#by-tag .tag90 {
     color: #030303;
     font-size: 108%;
     }
#by-tag .tag100 {
     color: #000;
     font-size: 110%;
     }
.dc-archive #search {
     padding: 4px 8px;
     }
.dc-archive #blogextra div {
     background-color: transparent;
     margin-bottom: 1em;
     padding: 4px;
     border: 1px solid #ccc;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -o-box-shadow: none;
     box-shadow: none;
     }
.dc-archive #blogextra h2 {
     margin-bottom: .33em;
     }    
.dc-archive-month .title h2.post-title {
     font-size: 1.3em;
     }
/* ---------------------------------------------------------------- 404 */
.dc-404 #content-info {
     padding-bottom: 200px;
     background: transparent url(img/404.png) no-repeat bottom center;
     }
.dc-404 .content-inner ul {
     margin-left: 0;
     padding-left: 0;
     list-style-type: none;
     }
.dc-404 .content-inner h3 {
     font-size: 1.1em;
     font-variant: small-caps;
     }
/* ---------------------------------------------------------------- search */
.dc-search #content-info em {
     color: #14709e;
     }
/* ---------------------------------------------------
  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
--------------------------------------------------- */
.post, 
.pagination,
.navlinks,
.footnotes, 
#attachments,
.read-it, 
.post-info-co, 
#comments, #footer,
.clearer {
     clear: both;
     }
.post-content:before, .post-content:after {
     content: "";
     display: table;
     }
.post-content:after {
     clear: both;
     }
.post:before, .post:after {
     content: "";
     display: table;
     }
.post:after {
     clear:both;
     }