/* /////////////// basic elements /////////////// */

body {
	margin:0; /* sert simplement à "coller" le fond aux bords du navigateurs */
	padding:0;/* sert simplement à "coller" le fond aux bords du navigateurs */
	font:0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #906054 url(./images/winter-bg-body.png) top repeat-x; /* le fond chocolat #946151*/
	text-align:center; /* pour caler le contenu de la page - la div container - au centre */
	color:  #fff ; 
	background-attachment  : fixed;
}

 p /* mise en forme du texte "libre" : info, saisei & no-xice*/
{
	text-align: justify ;
	margin: 0; padding: 5px 5px 0px 0px; 
	text-indent: 2em ;
	line-height: 1.7em ;
	font: 0.9em "Trebuchet MS", helvetica, sans-serif ;
	background : url(images/winter-layout-bg-mywork.png) repeat-y;
	color: #fff7f4 ;
}

p span 
{
	background : #906054;
	display : block;
	width : 590px;
	padding: 0 5px 5px 5px;
	margin : 0;
}

acronym { /* acronym = abréviation ; 
	en xhtml, indiquer <acronym title=""> </acronym> 
	à un terme permet d'insérer un texte explicatif au passage de la souris */ 
	border: none; /* par défaut, un acronyme est souligné de pointillé sous MF */ 
}

/* ////////////// layout ///////////////// */

#container { /* bloc où tout apparaît, centré, gris rosé */ 
	width:775px; /* taille fixe vue par même les plus petites résolutions */ 
	margin:0 auto ; /* 0 et auto forcent le bloc à se mettre au milieu de la page pour MF */ 
	padding:0 0; /* haut droite bas gauche / 
	ici un rembourrage de 0 px à droite et à gauche, à l'intérieur du bloc */ 
	position:relative; /* tout autre chose et le container ne se positionne plus au milieu */ 
	border: 1px solid transparent; /* le bord un peu plus foncé */ /*#febc97*/
	text-align:left;
	/*background: url(./images/winter-layout-bg.png) top left repeat-y;*/
}

/* ================== HEADER ========== */
#intro { /*contient le h1 et le h2 */
	width:775px;
	height:327px;
	margin : 0;
	padding : 0;
	border : 1px solid transparent;
	background:url(./images/winter-layout-header.png) no-repeat; /* à la place du texte, une image */
	/* *filter...pour IE à rajouter */
}

h1,h2 span {
	display: none; /* le bloc ne sera pas affiché */
	/* en fait, les titres le seront par le biais d'images, 
	pour h1 et h2 : voir lignes 66 à 70 #pageHeader, 
	pour h3 : traitement au cas par cas pour chaque chapitre */ 
}

h3 { /* on prévoit de la place pour les "gros" titres de chapitre */ 
/* la hauteur */ 
margin:0; /* calage */ 
padding:0; /* calage */ 
} 
/* ici, on n'a pas encore choisi de "style" à part la dimension, 
traitement au cas par cas + loin */ 
/* ================== FOOTER ========== */
#footer { /* bas de page, mentions xhtml, css, etc. */
display : block;
	width:608px;
	height : 79px;
	margin:5px 0 40px 167px ; /* marge à 0 */ 
	padding:0px 0px 0px 0; /* rembourrage = aération */
	color : #fff7f4;
	font-size :9pt;
	background: url(./images/winter-layout-footer.png) no-repeat;
	border : 0px solid black;
}
#footer span
{
	display : block;
	text-align: right; /* texte aligné à droite */
	padding-top : 10px; /* padding qui sert à positionner le texte du footer */
	padding-right : 5px;
	border : 0px solid white;
}
#footer a{ /* mise en page des liens du footer */
	text-decoration:none;
	color: #a9b83e ;
}
#footer a:hover{ /* mise en page des liens actifs du footer */
	font-variant: small-caps; /* police en capitale */
}

/* ================== BLOCS CHAPITRES ===== */
#miniatures, #mywork,  #pub1, #pub2
{ /* propriétés communes à ces blocs / chapitres */
	display:block; 
	padding:0; 
	background-repeat:repeat-y; /* fond répété en bas, 
	l'image sera définie plus tard */
	color:#a9b83e; /* vert kaki medium #a9b83e */
}
#miniatures
{
	margin: 0 0 0px 230px;/* marge à gauche de 250px :
	- les blocs se collent à droite du container
	- ils laissent la place à l'image de fond du bloc intro voir ligne 61 */
	width:560px; /* largeur */
}
h4.cartes {
	border : 1px solid black;
}
#mywork, #pub1, #pub2{ width:607px; }
#mywork{margin:-14px 0 2px 167px; }  
#pub1, #pub2 {margin:0px 0 10px 168px; /*place à gauche du container*/}

div.pub{border-bottom : 0px solid #edba9e ;}

/*ul#illustrations 
{
	height: 35px ;
	margin: 0 5px 0 0;
	padding: 0px;
	list-style-type: none ;
}*/
ul#illustrations li /* alignées, centrées, tout bien */
{
	float: left ;
	margin-right: 5px;
	text-align: center ;
	margin-top : -6px;
}

ul.illustrations_cartes, ul.illustrations_nb_inflow, ul.illustrations_cl_inflow
{
	height: 35px ;
	padding: 0px;
	list-style-type: none ;
}
ul.illustrations_cartes
{margin: 0 5px 0 30px;}
ul.illustrations_nb_inflow, ul.illustrations_cl_inflow
{margin: 0 5px 0 0;}
div#miniatures img {border: 0;} /* pas de bordure pour les miniatures */

/* Affichage ds le bloc my work */
#mywork h2
{
	display: block;
	width: 607px;
	height: 50px;
	margin: 0 0 0px 0;
	padding: 0 0 20px 8px;
	line-height: 25px;
	font-size: 1.6em;
	background: url(./images/winter-layout-h2.png) no-repeat top left;
	color: #364c0c;
	font-style: normal;
	text-align: left;
	text-indent: 0px;
	height: 25px;
	font-weight: bolder;
	font-variant: small-caps;
}
#mywork h2 span
{
	display: block; padding: 5px 0 0 20px;
}
div#mywork img.illus /* caractéristiques des dessins affichés */
{
	border: 1px solid ; 
	border-color: #6a7551 #aaaaaa #aaa #6a7551 ;
	background: transparent /* chocolat : #6b4133*/;
	margin : 0px; 
	padding: 0px;
	width: auto;
}


a.theme {color: #a9b83e; text-decoration: none; font-weight: bold;}
a.theme:hover{
	font-variant : small-caps;
	letter-spacing: 1px;
}
a {color : #f3fffe;  }
#mywork a:hover, a:hover /* rollover des liens dans le contenu */
{
	color: #a9b83e;
	text-decoration: none;
	font-weight: bold;
}
#mywork a:active, a:active /* couleur des liens dans le contenu quand on clique dessus */
{
	color: #d6a58b ;
	text-decoration: none;
}
#mywork img.ban /* les liens images dans le contenu */
{
	border: 1px solid ; 
	border-color: #a9b83e #aaaaaa #aaa #6a7551 ;
	background: transparent /* chocolat : #6b4133*/;
	margin : 7px 7px 0px 0px ;/* haut-droite-bas-gauche */
	padding : 7px;
}
/* Affichage des descriptifs de chaque dessin : dans une table */
#mywork table /* situer la table */
{
	margin-bottom : 10px;
	margin-left :0px;
	margin-top : -11px;
	width: 607px;
	text-align: justify;
	color: #6b4133 ; 
	/*background: url(./images/summer_bg_comment.png) right top repeat-y;*/
	background: url(./images/winter-layout-bg-mywork.png) left top repeat-y;
	padding : 0 1px;
}
tr
{
	/*padding : 2px;  display : block;*/
}
td.dessin /* cellule pour le dessin */
{
	text-align: center; background : transparent;}

td#dessin_donnees /* en commun pour date, outils, thème */
{
	padding: 0 10px 0 10px; color : #f3fffe;
	border-top : 0px dotted #c1e1df; background : #906054;}
}
td.dessin_date /* largeur pour date uniquement */
{width: 105px;}
td.dessin_outils /* largeur pour outils uniquement */
{width: 200px; }
td.dessin_comment /* pour commentaires uniquement */
{
background :  url(./images/winter-layout-bg-mywork-bottom.png) left bottom no-repeat;
padding-bottom : 2px 10px 20px 10px;
}



/* remarques sur margin et padding :
margin : rebourrage extérieur d'un bloc => placement d'un bloc par rapport à un bloc qui le contient, ici le container
padding : rembourrage intérieur d'un bloc => sert à aérer un texte à l'intérieur dudit bloc par ex. */

/* remarques sur la multiple mise en page des chapitres  :
Elle n'est rendue possible que par la conjonction de ces élements:
- une div englobante pour chaque
- des paragraphes aux class distinctes
- des span qui permettent d'affiner encore
Chacun de ses élements (div, p, span) peut recueillir une image de fond différente */

/* ================== LES TITRES ========================= */
#miniatures h3 /* Illustrations de Saisei */ 
{
	display: block;
	line-height: 25px ;
	font-size: 1.6em ;
	color: #a9b83e ;
	border: 0px solid #a9b83e;
	text-align : right;
	margin-right : 30px;
	margin-top : 45px;
	background: url(./images/winter-layout-footer.png) no-repeat;
	/*text-indent : -5000px;*/
	/*background: url(images/h3_spring_illustrations_de_saisei.png) no-repeat left bottom ;*/
}
h4.cartes
{ 
	margin : 10px 0px 10px 30px;
	width : 470px;
} 
h4.inflow
{ 
	margin : 10px 0 10px 0;
	width : 500px;
} 
h4.cartes, h4.inflow
{ /* Titres moyens : Cartes, Inflow  */ 
	color: #906054 ;
	line-height: 10px ;
	font-size: 9pt ;
	padding: 2px 0 0px 0px ;
	text-align : left;
	border: 1px dotted #906054;  /* ou vert pomme #a9b83e */
	letter-spacing: 2px;
	font-variant :  small-caps; 
} 
/*#miniatures h4{border-bottom: 0px solid #edba9e ; /*text-indent: -5000px;*/
/*h4.cartes{background: url(./images/h5_spring_cartes.png) no-repeat;}
h4.inflow{background: url(./images/h5_spring_inflow.png) no-repeat;}*/

#linkList2 h4 {text-indent : -5000px; height: 25px; margin : 0;  }
h4.select {background: url(./images/winter-h4_lselect_design.png) no-repeat; }
h4.archives {background: url(./images/winter-h4_larchives_archives.png) no-repeat; padding : 0;}
h4.resources {background: url(./images/winter-h4_lresources_ressources.png) no-repeat;}
h4 span {display: block; }

#miniatures h5 { /* Sous-titres Inflow : croquis, colo */ 
	margin : 8px 0 10px 0;
	padding-left: 5px;
	border-top: 1px dotted #fff7f4;
	width : 500px;
	color: #fff7f4 ;
	font-size: 0.8em;
	text-align : left;
	font-weight: lighter;
} 
#mywork h5
{
	margin : 5px 0 0 2px;
}
#mywork h5 span
{	display : block;
	padding-left : 5px;
}
.pub h3, #mywork h5 
{
	color: #a9b83e ;
	font-size: 1.0em;
	text-align : left;
	background: url(./images/winter-layout-footer.png) no-repeat;
}
.pub h3 
{
	margin : 0px 0 0px 0;
	padding-left: 5px;
}
.pub p, .pub p span {
	background : transparent;
	color: #fff7f4 ;
}
.pub a{
	color : #a9b83e;
}
a.info{text-decoration: none;}/* pour h5 informations.php */ 
/* ================== MENU DE GAUCHE ========================= */
#linkList { /* bloc des listes sur la gauche : */
	position:absolute; /* permet de fixer la liste précisément... */
	top:327px; /* ... à 179px du haut du container */
	width:166px; /* largeur légèrement inférieure à l'espace de 160px 
	laissés par les blocs chapitres ligne 78 */
	text-align: left;
	padding-bottom : 9px;
	margin: 0 0 0 1px;
	border : 0px solid red;
	background : url(./images/winter-layout-linklist-bg-bottom.png) left bottom no-repeat;
	background-position : right bottom;
}
#linkList2
{
	display : block;width:166px; 
	padding: 0;
	margin-left : 0px; margin-top : 0;
	background : url(./images/winter-layout-bg-linklist.png) top right repeat-y; 
	border : 0px solid black;
}
#linkList li { /* les lignes de la linklist */
	list-style:none; /* pas de puces */
	padding:2px 0 10px 0; /* aérées surtout en bas pour l'image de fond en pointillés */
}
#linkList li a { /* les liens de la linklist */
	color: #fff7f4 ;
	padding-left:20px; /* padding destiné à mettre l'espace suffisant pour ce qui servira de puce / image de fond */
	background: url(./images/link.png) no-repeat 0 0px; 
	text-decoration:none; /* lien non souligné */
	width : 138px;
	border : 0px solid black;
}
#linkList li a:hover { 
	color: #a9b83e;
	background: url(./images/link.png) no-repeat 5px -15px;
}

#linkList li a:active, #linkList li a:focus  { 
	color: #d6a58b ;
	background: url(./images/link.png) no-repeat 5px -30px;
	border-top : #a9b83e dotted;
}

#lselect, #larchives, #lresources { /* menu de gauche, thèmes de la linklist */
margin:0 0 2px 2px;
}

	
#lselect ul, #lresources ul
{	display :block; padding: 0 ; text-align: left;
	/*background: url(left_bottom.gif) bottom no-repeat;*/
}

#larchives ul{margin : -10px 0 0 0 ; padding: 0 ; text-align: left;}
#lselect ul, #lresources ul{margin: 0px 0 0 0 ; }
#lselect li a {/* lien avec le nom du thème du design */
display:block;
font-weight:bold;
}
#lselect form
{
	margin-top : 4px;
	margin-left : 2px;
	width : 120px;
}
.select_style
{
	background: #fdf8f2 ; /* le fond un peu gris-rosé */
	border: 1px solid #9a8682 ; /* le fond du body*/
	color: #a9b83e; /* un marron plus soutenu que h */
	padding : 1px;
	margin : 0 0 20px 0px;
	display : block;
	width : 112px;
}
input.connexion
{
background: url(./images/bouton-connexion.gif) no-repeat; 
border:none; width:36px; height:22px; margin-top:0px;
}
input.connexion:hover 
{background: url(./images/bouton-connexion.gif) no-repeat 0 -22px;}
input.connexion:active, input.connexion:focus 
{background: url(./images/bouton-connexion.gif) no-repeat 0 -44px;}

/* pour le dérouler javascript */
#larchives li
{
	display : block;
}
#larchives li a
{
	display : block;
}
a.java 
{
	text-decoration: none;
	font-variant: small-caps;
	letter-spacing: 2px;
	display : block;
	margin : 0 0 0 5px;
	color : #fff7f4;
	display : block;
	width : 155px;
}
a.java:hover
{
	letter-spacing: 3px;
	color : white;
}
a.java:active, a.java:focus
{
	letter-spacing: 3px;
	color : #dced61;
}
/*ul#EnCours{display : block;}*/
ul.ouvert{display : block;}
ul.ferme{display : none;}
/* /////////////// les trucs à voir plus tard /////////////// */


/* ================== LES BLOCS en extra  ========================= */
#extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6{display:none;}
/* ici je choisis de ne pas m'en servir : "none" = pas d'affichage des blocs */

#extraDiv1, #extraDiv2 
{
	display : block;
	background-repeat: repeat-x;
	position: fixed;
	z-index: 5;
}
#extraDiv1 span, 
{display : block;}
#extraDiv1 
{
	background-image: url(images/winter-etoiles-bottom2.png) ;
	background-position: left bottom;
	width: 100%;
	bottom: 0px;
	height : 131px;
}
#extraDiv2
{
	background-image: url(images/winter-etoiles-bottom1.png) ;
	background-position: left top;
	width: 100%;
	top: 0px;
	height : 107px; border : 0px solid red;
} 
/* =============================================================== */

/* ///////////// background image ////////////// */

/* right image */
#lselect 
{
	background: url(./images/winter_linklist_bg_lselect.png) right bottom no-repeat; 
/* le pendentif à lannières */
}

#lresources {
/* pour tous les éléments du menu de gauche */
background: url(./images/winter-linklist_bg.png) right bottom no-repeat; 
/* le pendentif à lannières */
}

/* side image */ /* image sur le côté de chaque chapitre */
#mywork {
background-image:url(img_participation.jpg);
background-position:right bottom;
border : 1px solid transparent;
}


/* pour les pages editions : post.php, modif.php, suppr.php */
#modif { /*contient le h1 et le h2 dans pageHeader + h3, h4, h5 dans miniatures */
	border : 1px solid #f9f9f9;
	width:768px;
	height:auto;
	margin : 0 0 0 0;
	padding : 0 0 0 0;
	background:url(./images/ban.png) left top no-repeat; /* à la place du texte, une image */
}
#content-edition
{
	display : block;
	border : 0px solid pink;
	width : 500px;
	margin:60px 0 0px 260px; /* marge à gauche de 160px*/
}
#edition {
	display: block;
	border : 0px dotted green;
	width : 450px;
}