@import url(base.css);
@import url(layout.css);

/* ************************************************
- design & code : Philix 
- icônes : http://www.famfamfam.com/
************************************************ */

/* ------------------------------------------------------------
	1. BALISES HTML 
------------------------------------------------------------- */

body {
     background: #f2f9ff url(img/sceau_CTB_new.png) no-repeat 30px 0; 
/*     background: #f2f9ff url(img/chaine.jpg) -20px -75px no-repeat; */
     
     color: #025;
     font-family: Verdana, "Century Gothic", "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Rosie, Geneva, sans-serif;
}

blockquote, q { }
blockquote { }
cite { }

ul {
	list-style: none;
}

p { }
img { }
sup { }
abbr, acronym { }

form { }
fieldset { }
input { }
label { }

a:link, a:visited {
     color: #369;
     font-weight: bold;
     text-decoration: underline;
}
a:hover, a:focus, a:active {
     background: #a4cbff;
     color: #025;
}
a[hreflang]:after { }
a img { }
 
code, pre { }
pre { }
 
hr { }
 
/* ------------------------------------------------------------
	2. Too cool for IE
------------------------------------------------------------- */

a#tooCool {
     position: fixed;
     right: 0;
     bottom: 0;
     display: block;
     height: 80px;
     width: 80px;
     background: url(img/too_cool.png) bottom right no-repeat;
     text-indent: -999em;
     text-decoration: none;
     z-index: 100;
}

/* ------------------------------------------------------------
	3. PAGE
------------------------------------------------------------- */
 
#page { }

.message {
     color: red;
}
 
/* ------------------------------------------------------------
	4. HAUT DE PAGE
------------------------------------------------------------- */

#top {
	background: transparent url(img/basiliqueKCielCouleur.gif) no-repeat right top;
	}
#top h1 {
  padding: 70px 0;
  position: absolute; 
  right: 190px;
	top : -30px;
}
#top h1 a {
     background: url(img/ctb2.png) no-repeat;
     display: block;
     text-indent: -999em; /* pour cacher le contenu du lien au profit de l'image */
     height: 50px;
     text-decoration: none;
     width: 500px;
}
#prelude {
     margin: 0;
     position: absolute;
     right: 100px;
     top: 0;
}
#prelude a {
/*     background: url(img/frnl.png) no-repeat;  */
     color: #58b;
     font-size: 0.85em;
}


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

#wrapper {}
#main {}
#content {
       background: transparent;
/*  background: #e1e1e1;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-right: 1px solid #025;
  border-bottom: 1px solid #025;
*/
     margin-top: 1.5em;
/* -moz-border-radius: 5px;
*/}

#content-info { }
#content-info h2 { }
#content-info p { }

.content-inner { }

.pagination { }
#navlinks {
	background: #a4cbff;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #025;
	border-bottom: 1px solid #025;
	-moz-border-radius: 3px;
	color: #333;
	font-size: 1.1em;
	margin: 0 -5px;
	padding: 2px 4px 4px;
	text-align: right;
}


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

.post img {
     margin: 2.0em 0.5em 0.5em 0.4em;
}
.post.first { }
.post.odd { }

.day-date {
	background: #a4cbff;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #025;
	border-bottom: 1px solid #025;
	-moz-border-radius: 3px;
	color: #333;
	font-size: 1.1em;
	margin: 0 -5px;
	padding: 1px 4px;
	text-align: right;
	text-transform: lowercase;
}
.post-title {
	background: transparent url(img/billet.png) no-repeat 0 40%;
	font-weight: bold;
	font-size: 1.4em;
	margin: 10px 2px 0;
	padding-left: 20px;
}
.post-title a {
     color: #025;
     text-decoration: none;
}
.post-info {
	color: #258;
	font-size: 1.0em;
	font-style: italic;
	margin: 5px 0;
	padding-left: 22px;
}
.post-tags { }
.post-excerpt { }
.post-content { }

.read-it {
	background: transparent url(img/email_open.png) no-repeat 5px;
	font-size: 1.3em;
	padding-left: 2.5em;
}
.read-it a {
	padding-right: 5px;
}

.footnotes { }
.footnotes h4 { }

.post-info-co {
     font-size: 1.3em;
}
.post-info-co a { }
.post-info-co a.comment_count {
	background: transparent url(img/comment.png) no-repeat left center;
	padding-left: 1.6em;
}
.post-info-co a.ping_count {
	background: transparent url(img/retrolien.png) no-repeat left center;
	padding-left: 1.6em;
}
.attach_count { }

#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 {
     border-top: 1px dashed #c0c0c0;
     font-size: 1.3em;
     margin-left: 1.5em;
}
#pr h3 { }
#comment-form h3 {
     border-top: 1px dashed #c0c0c0;
     font-size: 1.3em;
     margin-left: 1.5em;
}

#comments dl { }
#comments dt { }
#comments dd { }
#comments .first { }
#comments .odd { }
#comments .me { }

#pings dl { }
#pings dt { }
#pings dd { }
#pings .first { }
#pings .odd { }
#pings .me { }

#pr dl { }
#pr dd { }

#comment-form fieldset { }
.field { }
.field label {
     display: block;
     float: left;
     margin-right: 1.0em;
     text-align: right;
     width: 15.0em;
}
.field input, .field textarea, .preview, .submit {
     border: 1px solid #025;
     -moz-border-radius: 3px;
}

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

.form-help {
     font-size: 1.0em;
     font-style: italic;
}

#ping-url { }
#comments-feed { }
#comments-feed a {
     font-size: 1.0em;
}


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

#sidebar {
     font-size: 90%;
}
#blognav {
     background: #ffeecc;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-right: 1px solid #025;
     border-bottom: 1px solid #025;
     margin-top: 1.5em;
     -moz-border-radius: 5px;
}
#sidebar h2, #blognav h2 {
     background: #a4cbff;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-right: 1px solid #025;
     border-bottom: 1px solid #025;
     -moz-border-radius: 3px;
     padding: 0.1em 0.5em 0;
}
#blogextra {
     background: #ffeecc;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-right: 1px solid #025;
     border-bottom: 1px solid #025;
     margin-top: 1.5em;
     -moz-border-radius: 5px;
}

#sidebar h2 { }
#sidebar h3 { }
#sidebar ul {
     margin: 0.75em 0;
}
#sidebar li {
     margin: 0.75em 0;
}

/* boites du menu des widgets livrés avec Dotclear */
#search {
     position: absolute;
     right: 190px;
     top: 80px;  
}
#search h2 {
     background: transparent;
     border: none;
     margin: 0 0 0 0.7em;
}
#search form {
     width: 20.0em;
}
#search form p {
     margin: 0;
}
#search input[type=text], #search #q { /* ou #search #q */
     width: 10.0em;
}
#search input[type=submit], #search.submit { /* ou #search.submit */
	cursor: pointer;
} 
#search input[type=text], #search #q { /* ou #search #q */
     border: 1px solid #369;
     -moz-border-radius: 3px;
}
#search input[type=submit], #search .submit {
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #025;
	border-bottom: 2px solid #025;
	-moz-border-radius: 13px;
}

#topnav { }
.topnav-arch { }
.topnav-home { }

#sidebar .selected h2 {
     background: #fb7c00;
     color: #fff;
}
.lang { }
.categories { }
.syndicate { }
.lastposts { }
.lastcomments { }
.text { }
.links { }

.tags { }
.tags ul { }
.tags li { }
/* a compléter séparement ou globalement pour le sidebar et la page 
spécifique des tags avec les différentes class des tags en fonction 
de leur fréquence - voir 9/ classes communes */

/* ------------------------------------------------------------
	Plugin meteoWend
------------------------------------------------------------- */
#meteoj0, #meteoj1, #meteoj2 {
     background: #c4ddff url(img/meteo.gif) top no-repeat;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-right: 1px solid #025;
     border-bottom: 1px solid #025;
     -moz-border-radius: 5px;
     line-height: 1.3em;
     margin: 0.5em 0;
     padding-bottom: 0.5em;
}
#meteoj0 h3, #meteoj1 h3, #meteoj2 h3, #meteoj0 h4, #meteoj1 h4, #meteoj2 h4 {
     margin: 0.5em;
}
p.classmeteo {
     font-size: 0.9em;
     margin: 0 1.5em;
}
p.classmeteo img {
     vertical-align: middle;
}
.meteolink {
}

/* ------------------------------------------------------------
	Plugin contact-me
------------------------------------------------------------- */
.contact-me p {
     margin: 0.75em 0;
}

/* ------------------------------------------------------------
	Plugin calWend
------------------------------------------------------------- */
#calendardiv {
     background: #f2f9ff;
     border: 1px solid #000;
     margin: 0.5em 0.2em 1.0em;
     -moz-border-radius: 5px;
}
#calendarh2 {
     margin: 0.5em;
}
#calendarh3 {
     margin: 0.5em;
}
#calendarp {
     font-size: 1.0em;
}
#calendarspan {
     font-weight: bold;
}

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

#footer {
     padding: 2.0em 0 1.0em;
}
#footer p {
     background: #a4cbff;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
     border-right: 1px solid #025;
     border-bottom: 1px solid #025;
     font-size: 0.9em;
     margin: 0.5em;
     -moz-border-radius: 5px;
     padding: 0.3em 1.0em;
     text-align: center;
}


/* ------------------------------------------------------------
	10. CLASSES COMMUNES
------------------------------------------------------------- */

/* class sur les liens rss (on peut y placer l'icone
feed.png à piocher dans le thème par defaut par ex.) */

a.feed { 
	background : transparent url(img/feed.png) no-repeat left center;
	padding-left: 20px;
}


/* 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%; }

label.classic {
     display: block;
     width: 10.0em;
}

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

.msgalert {
     color: red;
}


/* ---------------------------------------------------
  13. Formulaire d'inscription
--------------------------------------------------- */
.formtitre, .formcorps, #formpied {
  background: #e3e9ff;
  border-left: 1px solid #036;
  border-right: 1px solid #036;
  font-size: 1.2em;
  margin: 0 10px;
  padding: 5px 10px;
}
.formtitre, #formpied {
  background: #a4cbff;
  margin: 0;
}
.formtitre {
  border-bottom: 1px solid #036;
  border-top: 1px solid #036;
  font-size: 1.3em;
  font-weight: bold;
}
#formpied {
  border-bottom: 1px solid #036;
  border-top: 1px solid #036;
}
#formpied input {
  border: 1px solid #036;
}
.formcorps label {
  clear: both;
  float: left;
  margin: 0.1em;
  padding-right: 0.5em;
  text-align: right;
  vertical-align: middle;
  width: 10.0em;
}
.formcorps p {
  clear:both;
  font-size:1.1em;
  margin: 1.0em 0.5em;
  padding-top: 1.0em;
}
.formcorps input, .formcorps textarea {
  border: 1px solid #036;
  margin: 0.1em;
  padding: 0 0.5em;
}