/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 08
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */


/* Navigation */

/* Bloc central */


/* Contenu principal */
#principal {
	color: #181A12;
	background: #000000; /* -> 2 */
}



/* Contenu secondaire */
#secondaire {
	background: #000000; /* -> 2 */
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 5px 5px;
}
#global {
	width: 900px;
	margin: 0 auto; /* -> 3 */
	background: ;
}


/* En-tête */
#entete {
	padding: 0px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Menu de navigation */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {

}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 30px;
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 14px;	
line-height: 30px;
text-align: left;
vertical-align:middle;
font-weight:;
letter-spacing:2px;
border: 1px solid gray;
background: #666666;
font-color:#FFFFFF;

}
#menu li {
text-align: left;
background: #333333;
}
#menu li a, #menu dt a {
text-decoration: none;
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 14px;
font-color: #FFFFFF;
vertical-align: middle;
letter-spacing:2px;
display: block;
border: 0 none;
height: 30px;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
color: #996600; 
margin: 0 2px;
text-decoration: none;
}
#navigation {

	background: #181A12;
	
	}
.intro {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size: 16px;
letter-spacing:2px;
text-align: center;
text-decoration: none;
	}
.intro4 {
font-family:  Verdana, Georgia, Arial, Helvetica, sans-serif;
color:#000;
font-size: 15px;
letter-spacing:2px;
text-align: left;
text-decoration: none;

}
.introz {
font-family:  Verdana,Georgia, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 17px;
letter-spacing:2px;
text-align: center;
text-decoration: none;
}
.introw {
font-family:  Verdana,Georgia, Arial, Helvetica, sans-serif;
color:#B3A463;
font-size: 15px;
letter-spacing:2px;
text-align: left;
text-decoration: none;
text-indent:0.5cm;

}
.intro2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000033;
font-size: 10px;
letter-spacing:2px;
text-align: center;
text-decoration: none;
}
.intro3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#5B5B5B;
font-size: 11px;
letter-spacing:1px;
text-align: left;
text-decoration: none;
}
.intro8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:13px;
letter-spacing:2px;
text-align: left;
text-decoration: none;
}
.wind {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#B00000;
font-size:17px;
letter-spacing:2px;
text-align: left;
text-decoration: none;
font-weight: bold;
}
.wind2{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:13px;
letter-spacing:2px;
text-align: center;
text-decoration: none;
}
.wind3{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:13px;
letter-spacing:1px;
text-align: justify;
text-decoration: none;
}
.wind4{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
font-size:13px;
letter-spacing:2px;
text-align: center;
text-decoration: none;
}
.wind5{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
font-size:13px;
letter-spacing:2px;
text-align: left;
text-decoration: none;
}
.wind6{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#B00000;
font-size:12px;
letter-spacing:1px;
text-align: left;
text-decoration: none;
margin: 20px 0;
padding: 10px;
}
.wind7{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:9px;
letter-spacing:0.5px;
text-align: left;
text-decoration: none;
padding: 10px;
}
.wind8{
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
letter-spacing:2px;
text-align: left;
text-decoration: none;
padding: 10px;
}
#slatenav{position:relative;display:block;height:42px; width:705px; letter-spacing:1.px; font-size:14px;font-weight:;background:transparent url(slate/slate/images/blueslate_background.gif) repeat-x top left;font-family:'Trebuchet MS',Arial,Georgia,Verdana,Helvitica,sans-serif; }
#slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
#slatenav ul li a{display:block;float:left;color:#FFF;text-decoration:none;padding:12px 11px 0 11px;height:38px;}
#slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#FFF;background:transparent url(slate/slate/images/blueslate_backgroundOVER.gif) no-repeat top center;}
#slatenav li a.current{color:#B00000;}
					
/* ---------------------- END Blueslate nav ---------------------- */

/* Bloc central */
#centre {
	width: 100%; /* -> 4 */
	overflow: hidden; /* -> 4 */
}


/* Contenu principal */
#principal {
	float: left; /* -> 5 */
	width: 195px;
	padding: 0px 0px;
	background: #000;
}

/* Contenu secondaire */
#secondaire {
	margin-left: 192px; /* -> 6 */

	padding: 0px 0;
}
#pied {
height: 45px;
background-color: #000000;
}
/* Mention de copyright */
#copyright {
	margin: 20px 0;
	font-size: .85em;
	text-align: left;
}
  a.info:hover>span {background-image: url(images/bgInfo.png);}   
  a.info:hover span {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgInfo.png",   
  sizingMethod="crop");}   
  #survol a {display:block;width:684px; 
height: 878px; 


background-image:  url(images/1P.jpg); 
} 
#survol a:hover{display:block;width:684px; 
height: 630px; 

background-image:  url(images/2P.jpg); 
} 
img{ 
border:0; 
}
#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #242424;
color: #000;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #BAAA6E;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #B3A463;
border-right: 10px solid #3A3939;
background-color: #000;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #B3A463;
border-right: 10px solid #3A3939;
background-color: #B3A463;
color: #fff;
}
#blueblock li a.current{
border-left: 20px solid #B3A463;
border-right: 10px solid #3A3939;
color: #B00000;
}



}
#blueblock2{
width: 140px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
color:#000000;
font-size: 80%;
background-color: #242424;
color: #000;
}

* html #blueblock2{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock2 ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock2 li {
border-bottom: 1px solid #BAAA6E;
margin: 0;
}

#blueblock2 li a{
display: block;
padding: 5px 5px 5px 8px;

background-color: #666;

text-decoration: none;
width: 100%;
}

html>body #blueblock2 li a{ /*Non IE6 width*/
width: auto;
}

#blueblock2 li a:hover{

background-color: #B3A463;
color: #fff;
}
#blueblock2 li a.current{
border-left: 20px solid #B3A463;
border-right: 10px solid #3A3939;
color: #B00000;
}
/* --- NOTES ---

1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe
	div#principal et div#secondaire uniquement. C'est ce conteneur que l'on
	utilise pour placer une image de fond répétée en hauteur, qui dessine
	le fond de la colonne de gauche et de la colonne de droite.
	Ainsi, quelle que soit la colonne la plus longue, on aura bien,
	visuellement, deux colonnes de hauteurs égales.

2.	On utilise ici des couleurs de fond pour div#principal et div#secondaire.
	Et pourtant, nous avons déjà une image de fond, sur div#centre, qui
	«dessine» nos deux colonnes. Pourquoi rajouter des couleurs de fond à
	ces blocs, alors? C'est en fait une sécurité, au cas où:
	- l'image de fond mettrait du temps à se charger (ça arrive);
	- l'image de fond ne peut pas être chargée (rare, mais ça arrive aussi).
	Ainsi, si ces problèmes surviennent, le contenu restera lisible. Notamment
	le contenu de div#principal, qui est sombre, tandis que le fond de la page
	est déjà sombre.
	Notez que