source: themes/ductile/style.css @ 391:77ce8f145513

@charset "UTF-8";

/* Ductile
     Dotclear theme by Dotclear Team
     Version de chantier
*/

/* 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
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/
*/

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

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

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

/* ------------------------------------------------------------
     2. LIENS & Complément balises HTML
------------------------------------------------------------- */
del {
     color: #800000;
     }
blockquote {
     border: 2px solid #eef;
     padding: 1px 1em .5em;
     }
code, pre {
     background: #efefef;
     border-right: 1px solid #aaa;
     border-bottom: 1px solid #aaa;
     font-size: .81em;
     }

a {
     color: #666;
     }
a:hover, a:focus {
     background-color: #ebebee;
     text-decoration: none;
     }

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

#page {
     position: relative;
     }

/* ------------------------------------------------------------
     4. HAUT DE PAGE
------------------------------------------------------------- */
#header {
     text-shadow: 0 1px 1px rgba(0,0,0,.2);
     line-height: 1;
     }
h1 {
     font-variant: small-caps;
     }
h1 a {
     text-decoration: none;
     color: #333;
     }
#prelude {
     position: absolute;
     margin: 0;
     top: 0;
     left: 3px;
     color: #fff;
     font-size: .875em;
     list-style-type: none;
     }
#prelude li {
     display: inline;
     }
#prelude a, #prelude a:hover, #prelude a:visited {
     position:absolute;
     left:0;
     top:-500px;
     width:1px;
     height:1px;
     overflow:hidden;
     }
#prelude a:active, #prelude a:focus {
     position:static;
     width:auto;
     height:auto;
     }
#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: #909090;
     text-shadow: none;
     }
#supranav {
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     padding: 0 0 0 4px;
     list-style-type: none;
     line-height: 1.25;
     font-size: .875em;
     }
#supranav li {
     text-transform: uppercase;
     vertical-align: top;
     }
#supranav li a {
     text-decoration: none;
     white-space: nowrap;
     margin-bottom: 4px;
     -webkit-border-bottom-left-radius: 7px;
     -moz-border-radius-bottomleft: 7px;
     border-bottom-left-radius: 7px;    
     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;
     }
#supranav li a span {
     display: block;
     text-transform: none;
     text-shadow: none;
     font-family: georgia;
     font-style:italic;
     }

/* ------------------------------------------------------------
     5. WRAPPER MAIN CONTENT
------------------------------------------------------------- */

#wrapper { clear:both; }
#main { }
#content { 
     padding-bottom: 2em; 
     }

/* ------------------------------------------------------- content-info */
#content-info {
     margin-top: 4em;
     font-size: .875em;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
#content-info h2 { 
     font-size: 1.2em;
     }
#subcategories {
     font-size: .875em;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
#subcategories h3 { 
     font-size: 1.1em;
     font-variant: small-caps;
     }
#content-info p, 
#content-info ul, 
#subcategories ul { 
     margin: .5em 0;
     }

/* ------------------------------------------------------- pagination, navlinks */
#navlinks, 
.pagination {
     margin-bottom: 1em;
     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%);
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     border-right: 1px solid #aaa;
     border-bottom: 1px solid #ccc;
     }
#navlinks {
     margin-top: 4em;
     }
#navlinks a, 
.pagination a {
     padding: 0 1em;
     white-space: nowrap;
     }

/* ------------------------------------------------------------
     6. BILLETS
------------------------------------------------------------- */

.post {
     background: transparent url(img/filet.png) repeat-x left bottom;
     }
.day-date {
     display: none;
     }
.post-title {
     margin-bottom: .33em;
     color: #000;
     line-height: 1.17;
     }
.post-title a {
     text-decoration: none;
     color: #ad3f4c;
     }
.post h3, 
.post h4, 
.post h5
.post h6 {
     font-variant: small-caps;
     font-weight: normal;
     color: #666;
     }
.post-info, 
.post-tags, 
.post-info-co, 
.read-it, 
.page-info {
     line-height: 1.2;   
     margin: .33em 0;
     }
.post-info, 
.post-tags {
     font-size: .875em;
     padding: 0;
     }
.post-info a, 
.post-tags a, 
.post-info-co a {
     white-space: nowrap;
     }
.post-tags a {
     padding-right: 1em;
     padding-left: 14px;
     background: #fff no-repeat left center url(img/tag.png);
     }
.post-tags li {
     display: inline;
     }
.post-content {
     padding-bottom: 9px;
     }
.post ul {
     list-style-type: square;
     }
.footnotes {
     font-size: .875em;
     }
.read-it {
     text-align: right;
     margin: 0 0 .25em 0;
     }
.read-it a {
     color: #ad3f4c;
     }
.post-info-co, 
.page-info {
     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: #666;
     }
#attachments ul {
     list-style-type: none;
     margin: 0 0 1em;
     padding: 0;
     }
#attachments ul li {
     padding-left: 24px;
     background: #fff url(img/download.png) no-repeat;
     }

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

/* ------------------------------------------------------- commentaires et rétroliens */
#comments, 
#pings, 
#comment-form,
#comments-feed { 
     color: #4c4c85;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     font-size: .875em;
     }
#comment-form {
     padding: 1em;
     background: #eef;
     margin-top: 1em;
     color: #333;
     border: 1px solid #ddf;
     }
#pr {
     padding: 1em;
     border: 1px dashed #4c4c85;
     margin-bottom: 1em;
     }
#comments h3, 
#pings h3, 
#pr h3, 
#comment-form h3 { 
     margin-top: 2em;
     color: #666;
     }
#comment-form h3 {
     margin-top: 0;
     }
#comments dl { }
#comments dt { 
     padding-bottom: .2em;
     border-bottom: 1px solid #ccc;
     margin-top: 1.5em;
     line-height: 1.1;
     }
#comments dd { }
#comments .first { }
#comments .odd { }
#comments .me { 
     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     color: #333;
     font-size: 1.14em;
     }
.comment-number {
     font-size: 2em;
     font-weight: normal;
     font-style: italic;
     text-decoration: none;
     font-family: "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
     color: #909090;
     }

#pings dl { }
#pings dt { 
     border-bottom: 1px solid #ccc;
     margin-top: 1.5em;
     line-height: 1.1;
     padding-bottom: .2em;
     }
#pings dd { }
#pings .first { }
#pings .odd { }

#pr dl { }
#pr dd { }

/* ------------------------------------------------------- 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;
     text-indent: 4px;
     background: #fff;
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px;
     border-radius: 3px;
     }
.field textarea { 
     font-family: sans-serif;
     padding: .5em 1em;  
     }
.field input:focus, 
.field textarea:focus {
     background: #fff;
     }
#comment-form input[type=submit], 
#comment-form input[type=reset] {
     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);
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px;
     border-radius: 5px;
     border: solid 1px #777;
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
     box-shadow: 0 1px 2px rgba(0,0,0,.2);
     background: rgb(119,119,119);
     background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(85,85,85,1) 100%);
     background: -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: -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%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#555555',GradientType=0 );
     color: #eee;
     }
#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: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
     background: rgb(85,85,85);
     background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 100%);
     background: -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: -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%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 );
     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;
     }

#ping-url { 
     background: #efefef;
     border-right: 1px solid #aaa;
     border-bottom: 1px solid #aaa;
     font-size: .81em;
     padding-left: .5em;
     }
#comments-feed { 
     margin-top: 2em; 
     }

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

#sidebar {
     font-size: 0.875em;
     }
#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 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: .5em;
     }
#sidebar ul 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 ul 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);
     }
     
/* ------------------------------------------------------- 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;
     }
#footer p {
     padding: .66em 2em;
     margin: 0;
     text-align: right;
     font-size: .875em;
     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
     }
#footer a {
     color: #fff;
     }
#footer a:hover, 
#footer a:focus {
     background: #686867;
     }
#stickers {
     list-style-type: none;
     margin: 0;
     }
     
/* ------------------------------------------------------------
     10. CLASSES COMMUNES
------------------------------------------------------------- */

/* ------------------------------------------------------- RSS */
.feed { 
     padding-left: 20px;
     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, 
#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; }


/* ------------------------------------------------------------
     11. PAGES SPECIFIQUES
------------------------------------------------------------- */

.dc-home { }
.dc-post { }
.dc-category { }
.dc-archive { }
.dc-archive-month h2.post-title {
     font-size: 1.3em;
     }
.dc-archive { }
.dc-tags { }
.dc-tag { }
.dc-404 { }
.dc-search { }


/* ---------------------------------------------------
  12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
--------------------------------------------------- */
.post, 
.footnotes, 
#attachments, 
.post-info-co, 
#comments, #footer {
     clear:both;
     }

/* ================================================ 
     personnalisations blog chantier
================================================ */
.post-content img, .post-excerpt img {
     border: 1px solid #ccc;
     }