/*

 ****   DESIGN POUR WOOK.fr ****
 
 ** Dernières modifs le :  01/05 à 14h00, par Neoxx78
 Thème : NeoStudio DC1 initialement codé pour le blog neoxx78-studio.com puis adapté pour Wook.fr par Neoxx78
 
Ce thème est librement distribuable, gratuitement, selon la licence GNU-GPL. 
Nous vous prions cependant de repecter la mention "Thème par Wook.fr" en échange de ce service.

**** FIN CREDITS *****
 
*/

/* ******  STRUCTURE PRINCIPALE  ******* */

body {
	background : rgb(241, 226, 190);
	font-family : Tahoma, Geneva, Helvetica, 'Trebuchet MS', Verdana, Times , serif;
}

div#page { /* Correspont à l'ensemble de la page affiché, du header au footer, fond en dégradé excepté */
	width : 780px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 0px;
}

div#screen { /* Correspont à la zone d'affichage des billets, du menu sans le header et footer */
	background : white;
	width : 780px;
	margin : auto;
}

div#main { /* Zonde d'affichage du texte, des billets en son ensemble */
	background : white;
	padding : 0.5em 1em;
	overflow : hidden;
}

div#credit { /* Zone de texte en dessus du footer */
	text-align : center;
	font-size : 0.8em;
	background : white;
	clear : both;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ******  BALISES COURANTES, DE CONTENU  ******* */


/*         LIENS         */

a {
	color : #ffa855;
	font-weight : bold;
	text-decoration : none;
}

a:hover { text-decoration : underline; }
a img { border : none; }
p, ul, ol, dl, table, caption, div.post-chapo, div.post-content {
	color : #676767;
	line-height : 1.4em;
	letter-spacing : 1px;
}

h2 {
	color : #e6a47a;
	font-size : 1.2em;
	border-bottom : 1px dotted #e9af8b;
	margin-bottom : 0.2em;
}
h2 a { color : #e59975; }
h2 a:hover {
	text-decoration : none;
	border-top : 1px dotted #e9af8b;
}

h3 {
	text-indent : 65px;
	font-size : 1.1em;
	font-style : italic;
	color : #e9af8b;
}

h4, h5 {
	font-weight : bold;
	font-style : italic;
	color : #e9af8b;
	text-indent : 65px;
}
h4 { font-size : 1em; }
h5 { font-size : 0.9em; }
h6 { font-size : 0.8em; text-indent : 80px; color : #e9af8b; }

ul { list-style-type : square; }
ul ul { list-style-type : circle; }
ol ol { list-style-type : lower-alpha; }
pre { 
	overflow : auto !important;
	overflow : scroll;
	margin: 1em 2em;
	padding: 1em;
	min-height : 3em;
	border : 1px solid #cdcdcd;
	text-align:left;
}
q { font-style : italic; }
.centre, .alert { text-align : center; }
.alert { color : #e59975; }
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* ******  MISE EN PAGE TOP, HEADER, SPEEDBAR, MENU, FOOTER  ******* */

div#header {
	width : 780px;
	height : 120px;
	margin : 0;
	padding : 0;
	background-image : url('img/top.gif');
}

div#header h1 { /* Titre du site dans le cadre du header */
	font : 1.6em Tahoma, Verdana, 'Trebuchet MS';
	margin : 0;
	padding-top : 40px;
	padding-left : 35px;
	letter-spacing : 1px
}
div#header h1 a { 	color : white; padding : 0.3em; }
div#header h1 a:hover { text-decoration : none; }
p#prelude { display : none; } /* Liens de navigation rapide */

div#menu_top  { /* Speedbar ou menu horizontal */
	background : white;
	margin : 0;
	padding : 0;
	font-size : 0.8em;
}

div#menu_top ul {
	list-style-type : none;
	list-style-image : none;
	margin : 0 0 0 25px;
	padding : 0;
	height : 25px;
}

div#menu_top li {
	float : left;
	text-align : center;
	text-indent : 10px;
	padding : 0;
	margin : 0;
	width : 100px;
	height : 25px;
	background : url('img/fond_menutop.gif') top right no-repeat;

}

div#menu_top  a {
	font : 1em "Trebuchet MS" ;
	font-weight : bold;
	color : white;  
	text-decoration : none;
	padding : 0;
	margin : 0;
}

/*   SIDEBAR/MENU VERTICAL  */

div#menu { /* Sidebar ou menu vertical de droite */
	background : white;
	width : 180px;
	padding : 0.5em 1em 0.5em 0.5em;
	float : right;
	font-size : 0.8em;
}

div#menu h2 {
	margin : 0.2em 0 ;
	text-align : right;
	border-bottom : 1px solid #ffcb9a;
	color : #ffbe87;
	font-size : 1.1em;
}

div#menu ul {
	text-align : right;
	list-style-type : none;
	list-style-image : none;
}

div#menu ul a {
	display : block;
	width : 130px;
	padding : 0.2em;
	font-size : 1em;
	font-weight: bold;
	color : #ffbe87;
	text-decoration : none;
}

div#menu ul a:hover {
	display : block;
	background : #ffbe87;
	color : white;
}
div#calendar { font-size : 0.9em ;}
div#calendar td, div#calendar th {
	padding : 0.2em 1px;
	text-align : center;
	letter-spacing : 0;
}

div#calendar td a{
	display : block;
	padding : 0.1em;
	text-align : center;
}

div#calendar td a:hover {
	background : #ffbe87;
	color : white;
	text-decoration : none;
}

/* FOOTER ET CREDITS */

div#credit p {
	margin : 0;
	padding : 0.5em;
}
	
div#footer {
	height : 120px;
	background : url('img/footer.gif') bottom left no-repeat;
	clear : both;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*     ********   ASPECT BILLETS  ***********  */

div.post { margin-bottom : 2em; } /* Zone d'affichage d'un billet, englobe texte, date et infos pour un et un seu billet */
div.post-content, div.post-chapo, div#trackbacks, div#comments { font-size : 0.8em; }
div.date-news { /* Date affiché au dessus du titre */
	background :  #f5f5f5;
	height : 20px;
	margin : 1em 0 0.2em 0;
	border-top : 1px solid #cdcdcd;
	border-bottom : 1px solid #cdcdcd;
	font-size : 0.8em;
}
div.date-news p {
	margin : 0;
	font-weight : bold;
	line-height : 20px;
	color : #c4c4c4;
	text-indent : 20px;
}

p.infos-news { /* Infos sur le billet affichés en dessous du titre du billet, correspont au pseudo de l'auteur et la date de publication du billet */
	text-align : right;
	font-size : 0.7em;
	font-style : italic;
	height : 30px;
	line-height : 30px;
	color : #a3a3a3;
	margin : 0.2em 0;
	letter-spacing : 1px;
}

div.post-chapo p { margin : 0.5em 0; } /* Correspont à l'eventuel intro du billet */
p.read-it a { /* Liens "Lire la suite" si le billet contient une intro */
	color : #676767;
	font-weight : bold;
	text-decoration: underline;
}

blockquote {
	margin : 1em 0 1em 1em;
	padding : 1em 1em 1em 1.5em;	
	border : 1px solid #f1d2b5;
	border-left : 10px solid #f1d2b5;
	background-color : #fbfbf7;
	color : #f8f8f8;
	font-family : Verdana;
}

blockquote cite { /* Correspont au nom, pseudo de l'auteur d'une citation, se met forcément dans une citation blockquote */
	margin : 1em 0 0 0;
	text-align : right;
	font-size : 0.8em;
	letter-spacing : 1px;
	color : #aeaeae;
	font-style : italic;
}

p.info-co { /* Infos sur les commentaireset rétroliens à la fin de chaque billet */
	text-align : right;
	font-size : 0.7em;
	font-style : italic;
}

p.info-co a {
	color : #a3a3a3;
	text-decoration : none;
	font-weight : normal;
	padding : 0.3em;
}

hr { /* Séparateur de contenu */
	margin : 1em;
	border : 1px dotted #f1d2b5;
}

.footnotes p { font-size : 0.8em; }

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*    ******** ASPECT COMMENTAIRES  *********  */

span.comment-info { /* Zone d'info du commentaire avant le commentaire lui même. Se rapporte à la date, à l'auteur etc.*/
	font-size : 1.2em;
	color : #aeaeae;
	letter-spacing : 1px;
}

span.comment-number { /* Numéro du commentaire */
	font-weight : bold ;
	font-family : "Trebuchet MS", Verdana;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*  ********** ASPECT FORMULAIRE  ******** */
form {
	padding : 0.2em;
	margin : 1em 0;
}

fieldset { border : 1px solid #e6a47a; }

label {
	display : block;
	letter-spacing : 1px;
	font-size : 0.9em;
	color : #696969;
}

div.form-info { /* Correspont au bloc du formulaire servant pour le pseudo/email et site web = info donné par le visiteur à chaque formulaire */
	float : left;
	margin : 0.8em 0.8em 2em 0.8em;
}

div.form-info input { width : 155px; }
div.form-info input , textarea, fieldset.form-end {
	border : 1px solid #f1d2b5;
	background : #f9eedf;
	color : #696969;
}

div.form-text { /* Correspont au bloc du formulaire servant pour le message ou commentaire en lui même = bloc textarea message */
	margin : 0.5em 0.5em 2em 0.5em;
	float : right;
}

textarea { height : 135px; }
p.form-help { clear : both; } /* Bloc de texte au mileu du formulaire =  Info sur la prise en compte du code dans les messages postés */
fieldset.form-end { /* Bloc du formulaire contenant le bouton de validation/d'envoie du fomulaire */
	text-align : center;
	padding : 0.5em;
	clear : both;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*    ******** IMPORT CLASSES.CSS POUR CLASSES COMMUNES *********  */


a img { border : none; }

/* Bloc flottant, que ce soit pour placer les images dans les articles, les textes, ou stoppé un bloc flottant etc. */
.centre { text-align : center }
img.centre {/* Correction d'un petit bug dans le cas la classe centre est appliqué à l'image, déconseiller cenpendant, ajouter la classe sur un <p> avec l'image <img> dedans est conseillé */
	display : block; 
	text-align : center; 
} 
.flottant-gauche { float : left; margin : 0.3em; }
.flottant-droit { float : right; margin : 0.3em; }
.clearer { clear : both; }

/* Pour tous ce qui est des annonces importantes, que vous voulais mettre en évidence, au centre, en gras etc. */
.important { 
	font-size : 1.3em;
	font-family : Verdana, 'Trebuchet MS', Tahoma, Arial, Times;
	font-weight : bold;
	text-align : center;
}

/* Simple mise en gras, juste pour l'aspect = sans raport avec une emphase du contenu */
.gras { font-weight : bold; }

/* Simple mise en italic pour l'aspect =  sans rapport avec une emphase du contenu */
.italique { font-style : italic; }