/* Feuille de style arrangée -
blog realise avec dotclear - base Aorakit-3F par Kozlika pour la dcTeam
le 7 janvier 2007.
Licence : domaine public
*/
/* ------------------------------------------------------------
Bloc de styles � supprimer, ne servent qu'aux premiers tests
References couleurs :
---------------------
café grillé : #93480E
café : #993300
café au lait : #E4A14C
chocolat : #cc6600
chocolar noir : #670F0F
chataigne : #480402
rouge cramoisi : #B70F17
mirabelle : #f91
mandarine : #FF9933 (prélude)
anis : #D8FF05
verveine : #B1FFB7
saumon : #EFCF7D (fond des commentaires : comments #pr dl)
pêche : #F3FFB1
vert feuille : #021F06
souris : #346
(gris-brun : #D1B9AB fond des commentaires)
------------------------------------------------------------- */
@import url(layout.css);
a {
color:#A71602;
text-decoration : none;
}
fieldset {
border : none;
}
.post h3, .post h4 {
clear : both;
}
/* ---------------- fin du bloc � supprimer ---------------------- */
/* -----------------------------------------------------------------
1. STRUCTURE
a inscrire ici ou en important une css de structure placee dans
le meme repertoire et appelee grace a l'instruction ci-dessous
------------------------------------------------------------------ */
@import url(style.css);
/* ------------------------------------------------------------
2. BALISES HTML PAR DEFAUT
------------------------------------------------------------- */
body {
/*background : #B51A0D;*/
background :none repeat scroll 0 0 #000;
font-size : 76%;
font-family : "lucida grande", "gill sans", arial, sans-serif;
}
/*h, p et q = Les spécifications propres à chaque niveau hiérarchique des titres h1 à h6 (taille et marges + couleur) et l'apparence des textes qui seront dans des balises code, pre (police et taille) ou q (style italique).*/
h1, h2, h3, h4, h5, h6 { color : #93480E;}
h2 { font-size : 1.33em;}
h3 { font-size : 1.2em;}
h4 { font-size : 1em;}
h5 { font-size : .9em;}
h6 { font-size : .8em;}
p { }
img { }
sup { }
abbr, acronym { }
blockquote, q { }
blockquote { }
cite { }
ul { }
ol { }
dl { }
/*boutons (ok, prévisualiser etc.)*/
form { border:none;}
fieldset { border:none; display : block; }
input[type=submit] { border-right : 1px solid #FF9933; border-bottom : 1px solid #FF9933;
color : #fff; text-transform : uppercase; background : #993300; font-weight : bold; font-size : 1em;}
input[type=submit]:hover { background : #D8FF05; color : #fff; }
label { }
/*L'apparence des liens :a link: au départ; a:hover : au survol; a:focus : cliqués; a:active : activés; a[ hreflang]:after : mention de la langue du lien (si elle est renseignée) en gris*/
a { text-decoration : none; font-weight : normal; }
a:link {color : #993300; }
a:visited {color : #B70F17; }
a:hover { color : #993300; }
a:focus { color : #993300; }
a [hreflang] { font-size : .9em; color : #999; }
a[hreflang]:after { content: " [" attr(hreflang) "]"; color : #999; font-size : .9em; }
a img { border : none; }
code, pre { }
pre { margin: 0 auto;
margin-bottom: 1em;
padding: 0.5em;
text-align: left; font-size: 1.3em;
border: 1px solid darkred;
width: 90%;
overflow: auto;}
hr { }
/* ------------------------------------------------------------
3. PAGE
------------------------------------------------------------- */
#page {
background : white;
}
/* ------------------------------------------------------------
4. HAUT DE PAGE
------------------------------------------------------------- */
/* top = bandeau de titre du blog = L'entête de la page + son fond avec une image reproduite horizontalement (repeat-x) ou ici non répétée et centrée*/
/*#top { background : #670F0F url(img/body-bg.png) no-repeat center;}*/
#top {
background:url("img/body-bg.png") no-repeat scroll center center #000;}
/* ses liens*/
/*#top h1 { padding : 60px 0 0 80px; }
#top h1 a:link, #top h1 a:hover { color : #000;}
#top h1 a:visited { color : #f91;}*/
#top h1 { padding:px 0 0 80px;}
#top h1 a { font-weight : bold;font-size: 1.655em;}
#top h1 a:link, #top h1 a:visited { color:gelb;}
#top h1 a:hover { color:grey;}
/*liens de navigation de l'en-tête; spécial mal-voyants*/
#prelude {top : 260px; text-align : right; font-size : 0.9em; background : #000;}
/*#prelude a {
color: #000;
}*/
#prelude a { color:#FF9911;}
#prelude a:focus, #prelude a:hover {
background: #f91;
color: #480402;
text-decoration: none;
}
/* ------------------------------------------------------------
5. WRAPPER MAIN CONTENT
------------------------------------------------------------- */
#wrapper { }
#main {
background : white;
}
#content { }
#content-info { }
/*cartouche des catégories*/
#content-info h2 { margin : 0; background : #270201; padding : 2px 2px; color : #f91;}
#content-info p { }
.content-inner { }
.pagination { }
#navlinks { }
/* ------------------------------------------------------------
6. BILLETS
------------------------------------------------------------- */
.post { }
.post.first { }
.post.odd { }
/*titre des billets, couleur, surlignage et fond*/
.day-date { display : none; padding-left : 30px; margin : 0; font-size : .9em;}
.post-title { margin : 0; padding : 0 0 0 30px; color : #f91; background : #3B0403;}
.post-title a { color : #fff; font-weight : bold;}
.post-title a:hover { color : #f91;}
/*border-bottom = ligne sous le cartouche titre du billet*/
.post-info { font-size : .9em; text-indent : 30px; border-bottom : 2px solid #f91; padding-bottom : 2px; margin : 0; }
.post-info a { white-space : nowrap;}
.post-info a:hover { color : #cc6600;}
.post-tags { }
.post-tags li {
display: inline;
margin-right: 8px;
padding: 5px 0 5px 22px;
background: transparent url(img/tag.png) no-repeat 0 70%;
}
.post-excerpt { }
.post-content { }
.read-it { }
.footnotes { }
.footnotes h4 { }
.post-info-co { }
.comment_count { }
.pings_count { }
.attach_count { }
#attachments { }
#attachments h3 { }
#attachments ul { }
#attachments ul li { }
#attachments li.audio { }
#attachments li.package { }
#attachments li.text { }
/* ------------------------------------------------------------
7. COMMENTAIRES, PINGS
------------------------------------------------------------- */
#comments { background : url(images/bg_info-co.gif) no-repeat right top; padding-top : 4px; }
#pings { }
#pr { }
#comment-form { padding : 0;}
/*titre des billets*/
#comments h3, #pings h3, #pr h3, #comment-form h3 { color : #cc6600; font-weight : normal;}
#pings h3 { }
#pr h3 { }
/*champs des commentaires*/
#comment-form h3 { }
#comments dl { }
#comments dt { }
#comments dt.me { color : #f91;}
#comments dd { }
#comments dd.me { color : #f91;}
#comments .first { }
#comments .odd { }
#comments .me { }
#pings dl { }
#pings dt { }
#pings dd { }
#pings .first { }
#pings .odd { }
#pings .me { }
#pr dl { }
#pr dd { }
/*champs des commentaires*/
#comment-form fieldset {margin : 0; padding : 0;}
.field label { clear:left; display : block; width : 10em; float:left; font-size : .95em;}
.field input { border : 1px solid #ccc;background : #EFCF7D;}
.field input:focus { border : 1px solid #777;background : #f91; }
.field textarea {background : #EFCF7D; border : 1px solid #ccc; width : 95%; margin : .5em 0; padding : 4px;}
.field textarea:focus { border : 1px solid #777; background : #fff;}
#comment-form input[type=submit] { }
#comment-form input[type=reset] { }
.form-help { }
#ping-url { }
#comments-feed { }
/* ------------------------------------------------------------
8. SIDEBAR
------------------------------------------------------------- */
#sidebar { }
#blognav { }
#blogextra { }
/*cartouches des catégories des sidebar color des textes et fond*/
#sidebar h2 { color : #f91;
font-size: 1.2em;
margin : 0;
background : #670F0F;
}
#sidebar h3 { color : #480402;
margin : 1em 0 0.5em;
font-size: 1em;
background-color : #f91;
}
#sidebar div div {
margin-bottom: 2em;
}
#sidebar div div div {
margin-bottom: 0;
}
#sidebar ul { color : #f91;
margin: 1em 0;
padding: 0;
list-style-type : none;
border-top: 1px solid #f91;
}
#sidebar li { display: block;
margin: 0;
padding: 4px 0;
border-bottom: 1px solid #f91;
}
#sidebar li a {
color: #6B6B6B;
text-decoration: none;
}
#sidebar li a:hover, #sidebar li a:focus, #sidebar li a:active {
color: #B51A0D;
}
#sidebar .tags ul {
border-top: none;
font-size: 1.1em;
text-align: justify;
}
#sidebar .tags ul li {
display: inline;
background: none;
margin: 0;
padding: 0;
border: none;
line-height: 1.8em;
}
#sidebar ul, div.sidebar ul {
margin:0;
padding:0 0 0 04px;
}
/* boites du menu des widgets livres avec Dotclear */
#search { }
#search form { }
#search input[type=text] { } /* ou #search #q */
#search input[type=submit] { } /* ou #search .submit */
#topnav { }
.topnav-arch { }
.topnav-home { }
.selected { }
.lang { }
.categories { }
.syndicate { }
.lastposts { }
.lastcomments { }
.text { }
.links { }
/*liste des tags d'un billet*/
.tags { }
.tags ul { }
ul.post-tags {
}
.tags ul li a, ul.tags li a { padding-left : 12px;}
.tags li { }
/* a completer separement ou globalement pour le sidebar et la page
sp�cifique des tags avec les differentes class des tags en fonction
de leur frequence - voir 9/ classes communes */
/* ------------------------------------------------------------
. MENUS SPE - menus déroulants horizontaux
------------------------------------------------------------- */
ul#menu li {}
/* ------------------------------------------------------------
9. FOOTER
------------------------------------------------------------- */
#footer {background : #f91; }
#footer p { }
/* ------------------------------------------------------------
10. CLASSES COMMUNES
------------------------------------------------------------- */
/* class sur les liens rss (on peut y placer l'icone
feed.png a piocher dans le theme par defaut par ex.) */
.feed {
padding-left: 16px;
background: transparent url(img/ico_feed.png) no-repeat left center;
}
/* tags communs sidebar et page marqueurs les regroupant sauf spécifié dans la sidebar (.tags ul) et dans la page (ul.tags)
(exemple ici pour un nuage) */
.dc-tags ul.tags {
font-size: 1.8em;
}
.dc-tags ul.tags, .sidebar .tags ul {
list-style-type : disc;
margin : 0;
padding : 0;
}
.dc-tags ul.tags li , .sidebar .tags ul li {
margin:0;
padding:0;
display : inline;
}
.tag0 { font-size: 85%; }
.tag10 { font-size: 90%; }
.tag20 { font-size: 95%; }
.tag30 { font-size: 100%; }
.tag40 { font-size: 105%; }
.tag50 { font-size: 110%; }
.tag60 { font-size: 115%; }
.tag70 { font-size: 120%; }
.tag80 { font-size: 125%; }
.tag90 { font-size: 130%; }
.tag100 { font-size: 135%; }
ul.tags {
list-style: none;
margin: 1em 0;
padding: 0;
font-size: 1.3em;
text-align: justify;
}
ul.tags li {
display: inline;
margin: 0;
padding: 0;
line-height: 1.8em;
}
/* messages d'erreur */
.error {
border : 1px solid #c44;
background : #df0;
padding : 0.5em;
}
.error ul {
padding-left : 20px;
}
.error li {
list-style : square;
}
/* exemples de ceux que j'ajoute souvent */
.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 : .8em;}
.little-upper-text { font-size : .8em; text-transform : uppercase; }
/* ------------------------------------------------------------
11. PAGES SPECIFIQUES
j'indique le marqueur du body, a completer pour cibler
plus precisement (cf l'exemple ci-dessus pour les tags)
------------------------------------------------------------- */
.dc-home { }
.dc-post { }
.dc-categories { }
.dc-category { }
.dc-contribute {font-size: 0.5em;}
.dc-archive { }
.dc-archive-month { }
.dc-tags { }
.dc-tag { }
.dc-404 { }
.dc-search { }
/* ---------------------------------------------------
12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS
ici ceux le plus souvent necessaires
--------------------------------------------------- */
.post, .post-content, .footnotes, .attachments,
.post-info-co, #comments, #footer {
clear:both;
}
/* -------------------------------------------------------------------
13. NAVIGATION HORIZONTALE (cf http://tips.dotaddict.org/fiche/Une-barre-de-navigation-horizontale) cf fichier top.html avce les entrées et 3 en attente (li>Contribuez
Nous contacter
formulaireAccueil */
/*Paramètres généraux de la liste (ul). Toujours mes marges à zéro,
* le padding (marge intérieure) servira à dégager le texte en haut et en
* bas de 5 pixels tout en le décollant également de 1em du bord droit
* ce dernier point est indispensable pour Internet Explorer, comme on
* le verra pour ul#nav-box li a { }.
* list-style-type : none; déclare que je ne place pas de puces devant
* chaque item.
*/
ul#nav-box {
margin : 0 0 1.5em 0;
padding : 5px 1em 5px 0;
list-style-type : none;
background-color: #f91;
color: #000;
font-weight : bold;
font-size : 1.5em;
text-align: center;
}
/* Paramètres des items. display : inline; donne comme instruction de ne
* pas faire de saut de ligne pour chaque item. Je redonne également une
* marge intérieure haute et basse de 5 pixels pour que les items occupent
* toute la place verticale créée pour la liste
*/
ul#nav-box li {
display: inline;
padding : 5px 0;
}
/* On retrouve le padding haut et bas de 5 pixels (car sinon Internet Explorer
* va n'en faire qu'à sa tête) et j'ajoute un espace latéral de 1em de chaque
* côté des liens. J'indique également la couleur des caractères des liens et je
* place un bord gauche continu et blanc de 1 pixel de large. text-decoration :
* none; indique que je ne veux pas que les liens soient soulignés (ce qui serait
* le cas par défaut.
*/
ul#nav-box li a {
padding : 5px 1em 5px 1em;
color: #000;
text-decoration: none;
border-left: 1px solid #fff;
}
/* Ici, ce qui se passe au survol des liens : changement de la couleur du fond,
* de la couleur des caractères, je n'oublie pas de remettre à ce lien survolé le
* bord gauche que j'ai défini pour les liens « au repos ».
*/
ul#nav-box li a:hover {
background-color: #cc6600;
color: #fff;
border-left: 1px solid #fff;
}