style.css

/* Feuille de style vierge comportant les principales balises d'un
blog realise avec dotclear - Etablie par Kozlika pour la dcTeam
le 7 janvier 2007.

Licence : domaine public

*/

/* Palette

Gauche : #594f4f = gris taupe
Droite : #e5fcc2 = vert pâle

Complements :

#547980 = bleu gris
#45adA8 = cyan moyen
#9de0ad = vert d'eau

*/

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

@import url(layout.css);
/* ------------------------------------------------------------
  2. BALISES HTML PAR DEFAUT
------------------------------------------------------------- */

body {
  color: #333;
  background: transparent url('images/fond.png') repeat-y center top;
  font-size: 76%;
  font-family: "lucida grande", "gill sans", arial, sans-serif;
}

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

p {}

img {}

sup {}

abbr,
acronym {}

blockquote,
q {}

blockquote {
  background: transparent url(images/quote.gif) no-repeat scroll left top;
  margin: 1em;
  padding: 0pt 0pt 0pt 70px;
}

cite {}

[lang="fr"] q,
q[lang="fr"] {
  quotes: "« "" »";
}

ul {}

ol {}

dl {}

form {}

fieldset {
  border: none;
  display: block;
  margin: 0 0 0.5em;
  padding: 0;
}

input {
  padding: 0.25em 0.6em;
  border: 1px solid #594f4f;
  background: #f7f7f7;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

input:hover {
  border-color: #000000;
}

label {}

textarea {
  width: 95%;
}

a {
  color: #E5FCC2;
  text-decoration: none;
  outline: none;
}

a:link {}

a:visited {}

a:hover {}

a:focus {}

a[hreflang]:after {
  content: "\0000a0["attr(hreflang) "]";
}

a[hreflang|="fr"]:after {
  content: "";
}

a[hreflang] {
  content: normal !important;
}

a img {}

code,
pre {
  font: 1em "liberation mono", "Andale Mono", "DejaVu Sans Mono", "Courier New", Courier, monospace;
}

code {
  background: #fff;
  padding: 3px 5px 2px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

pre {
  overflow: scroll;
  display: block;
  border: solid 1px #561420;
  padding: 10px 20px 10px 30px;
  margin: 1em 1em 1em 0;
  text-align: left;
  line-height: 125%;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap important;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

hr {
  border: 0 none;
  height: 1px;
  margin: 2em 10em;
}

sup {
  line-height: 1em;
}

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

#page {}

/* ------------------------------------------------------------
  4. HAUT DE PAGE
------------------------------------------------------------- */

#top {
  background: transparent url('images/titre.png') no-repeat 50% 50%;
  text-align: left;
}

#top h1 {}

#top h1 a {
  color: #594f4f;
  font-size: 0.8em;
}

#prelude {
  background: transparent url('images/portrait.png') no-repeat right bottom;
  color: #e5fcc2;
}

#prelude a {
  color: #e5fcc2;
}

#prelude a:hover {
  color: #547980;
}

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

#wrapper {}

#main {
  font-size: 1.05em;
  text-align: justify;
}

#main a {
  color: #594f4f;
}

#content {}

#content-img {
  color: #CCCCCC;
}

#content-img a {
  color: #e5fcc2;
}

#content-img a:hover {
  color: #CCCCCC;
}

#content-img h2 {
  text-align: center;
  font-family: "lucida grande", "gill sans", arial, sans-serif;
  font-weight: normal;
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 1.5em;
}

#content-img hr {
  background-color: #e5fcc2;
  color: #e5fcc2;
}

#content-text {}

#content-text h2 {
  min-height: 1.5em;
  text-indent: 1em;
  text-align: left;
  padding-top: 4px;
}

#content-text hr {
  background-color: #547980;
  color: #547980;
}

#content-text a:hover {
  color: #547980;
}

#content-info {}

#content-info h2 {}

#content-info p {}

.content-inner {}

.pagination {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #547980;
  margin: 4em 1em 1em;
  padding: 1em;
  text-align: center;
}

#navlinks {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #547980;
  margin: 4em 1em 1em;
  padding: 1em;
  text-align: center;
}

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

.post {}

.post.first {}

.post.odd {}

.post h3,
.post h4 {
  clear: both;
}

.day-date {
  display: none;
}

.post-title {}

.post-info,
.page-info {
  font-style: italic;
}

.post-tags {}

ul.post-tags {
  list-style-type: none;
}

ul.post-tags li {
  float: right;
  margin: 0pt 0pt 0pt 1.2em;
  padding: 0pt 0pt 0pt 1.8em;
  background: transparent url('images/tag.png') no-repeat left top;
}

.post-excerpt {
  line-height: 1.6em;
}

.post-content {
  line-height: 1.6em;
}

.post-content p,
.post-excerpt p {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}

#content-text .post-content p,
#content-text .post-excerpt p {
  text-indent: 1.6em;
}

#content-text .post-content p a {
  color: #009e66;
}

#content-text .post-info,
#content-text .post-tags,
#content-text .post-info-co,
#content-text .page-info {
  text-align: right;
}

.read-it {}

.footnotes {
  font-size: 0.9em;
  text-align: left;
}

.footnotes h4 {}

#content-text .footnotes p {
  text-indent: 0;
  margin-top: 1.2em;
}

.post-info-co {}

.comment_count {
  margin: 0pt 0pt 0pt 1.2em;
  padding: 0pt 0pt 0pt 1.8em;
  background: transparent url('images/balloon.png') no-repeat left top;
}

.ping_count {
  margin: 0pt 0pt 0pt 1.2em;
  padding: 0pt 0pt 0pt 1.8em;
  background: transparent url('images/chain.png') no-repeat left top;
}

.attach_count {
  margin: 0pt 0pt 0pt 1.2em;
  padding: 0pt 0pt 0pt 1.8em;
  background: transparent url('images/box.png') no-repeat left top;
}

#attachments {}

#attachments h3 {}

#attachments ul {}

#attachments ul li {}

#attachments li.audio {}

#attachments li.package {}

#attachments li.text {}

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

#comments {}

#pings {}

#pr {}

#comment-form {}

#comments h3 {}

#pings h3 {}

#pr h3 {}

#comment-form h3 {}

#comments dl {
  font-size: 0.93em;
  line-height: 1.5em;
}

#comments dt {}

#comments dd {}

#comments .first {}

#comments .odd {}

#comments .me {}

#comments dd.me {
  color: #547980;
  background: transparent url(images/me.png) no-repeat top left;
  margin-left: 0em;
  min-height: 3em;
  padding-left: 3.5em;
}

#comments dd.me a:hover {
  color: #45ada8;
}

#comments dd.visitor {
  background: transparent url(images/bookmark.png) no-repeat 0.5em center;
  margin-left: 0em;
  min-height: 3em;
  padding-left: 3.5em;
}

#pings dl {
  font-size: 0.93em;
  line-height: 1.5em;
}

#pings dt {}

#pings dd {}

#pings .first {}

#pings .odd {}

#pings .me {}

#pings dd.me {
  color: #547980;
  margin-left: 0em;
  min-height: 3em;
  padding-left: 3em;
}

#pr dl {}

#pr dd {}

#comment-form fieldset {}

.field {}

.field label {
  clear: left;
  display: block;
  float: left;
  width: 13em;
}

.field input {
  border: 1px solid #547980;
  padding: 0.25em;
}

.field textarea {
  border: 1px solid #547980;
  padding: 0.5em;
}

#comment-form input[type=submit] {}

#comment-form input[type=reset] {}

.form-help {}

#ping-url {}

#comments-feed {}

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

#sidebar {
  color: #9DE0AD;
}

#blognav {}

#blogextra {}

#blogextra a {}

#blognav a:hover,
#blogextra a:hover {
  color: #45ADA8;
}

#sidebar h2 {
  font-size: 1.2em;
}

#sidebar h3 {
  font-size: 1em;
}

#sidebar ul {}

#sidebar li {}

/* boites du menu des widgets livres avec Dotclear */

#search {}

#search form {}

#search input[type=text] {
  background: #FCFCFC url(images/magnifier.png) no-repeat scroll 0.5em center;
  border: 1px solid #FCFCFC;
  margin-left: 3.5em;
  padding: 0.25em 0.25em 0.25em 2.5em;
  width: 12em;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

/* ou #search #q */

#search input[type=submit] {}

/* ou #search .submit */

#topnav {}

#topnav ul li,
#topnav ul li a {
  display: inline;
}

.topnav-arch {}

.topnav-home {}

.selected {}

.langs {}

.categories {}

.syndicate {}

.syndicate ul {
  list-style: none;
  margin-left: -18px;
}

.lastposts {}

.lastcomments {}

.text {}

.links {}

.tags {}

.tags ul {}

.tags li {}

/* a completer separement ou globalement pour le sidebar et la page
specifique des tags avec les differentes class des tags en fonction
de leur frequence - voir 9/ classes communes */

/* ------------------------------------------------------------
  9. FOOTER
------------------------------------------------------------- */

#footer {
  color: #547980;
}

#footer a {
  color: #594f4f;
}

#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 {
  background: transparent url(images/feed.png) no-repeat left bottom;
  padding-left: 1.8em;
  margin-left: -0.3em;
  line-height: 1.5em;
}

/* tags dans le sidebar et dans la page les regroupant
(exemple ici pour un nuage) */

.dc-tags #content ul li,
.dc-tags #content ul li a,
.tags ul li,
.tags ul li a {
  display: inline;
  width: auto;
  padding-left: 0;
  padding-right: 4px;
  background: transparent;
  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%;
}

.tags p {
  background: transparent url(images/tags.png) no-repeat left bottom;
  padding-left: 1.8em;
  margin-left: 1.4em;
  line-height: 1.5em;
}

/* 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-home #blogextra a {
  color: #594f4f;
}

.dc-home #blogextra a:hover {
  color: #45ada8;
}

.dc-post {}

.dc-categories {}

.dc-category {}

.dc-archive {}

.dc-archive-month {}

.dc-archive-month #content-text p.post-content {
  margin-left: 3em;
  font-size: 0.9em;
  line-height: 1.5em;
}

.dc-archive-month #content-text p.post-info {
  text-align: left;
  font-style: normal;
  margin-left: 3em;
  margin-bottom: -0.5em;
}

.dc-archive-month #content-text p.post-info-co {
  text-align: left;
  margin-left: 2em;
}

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

#content img {
  border: 1px solid #594f4f;
  padding: 0px;
}

#content img[src^="/public/"] {
  border: 12px solid #e5fcc2;
  padding: 1px;
}

#content-text img[src^="/public/"] {
  border: 12px solid #594f4f;
  padding: 1px;
}

.contact-me p {
  background: transparent url(images/mail.png) no-repeat scroll left bottom;
  line-height: 1.5em;
  margin-left: 1.4em;
  padding-left: 1.8em;
}

.dc-home #sidebar:after {
  content: '[ne pas supprimer, merci http://www.fu2k.org/alex/css/onetruelayout/]';
  display: block;
  height: 1px;
  clear: both;
  visibility: hidden;
}

#sidebar {
  display: inline-block;
}

/*\*/

* html #sidebar {
  height: 1%;
}

.dc-home #sidebar {
  display: block;
}

/* */