/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 03
   © 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». */
/*
 ====> PRECHARGEMENT D'IMAGES <==========  
  */ 
 .cache {
  position: absolute;
  left: 0;
  top: -5000px;
 }
 
/* G&eacute;n&eacute;ral */
body {
	color: #000;
	/*background: #F5F5F5; -> white smoak*/
	background: #DCDCDC; /*geinsbro*/
	padding: 0; /* Note -> 2 */

}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}
span {
	color: crimson;
	font-weight: bold;
}

/* Page */
#global {
	background: #fff;
}


/* Contenu principal */
#contenu {
	/*color: #363B29;*/
	/*background: #cbd888;*/
    /*background: #F5F5F5;*/
	/*background: #F0FFF0;*/
	background: #fff;
	}
	
#contenu {
	/*background: url(img/bckg_corps.png) no-repeat;*/
	/*border: 2px strong #A9A9A9;*/
}

#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}
#contenu img {
	display: bloc;
}

/* Pied de page */
#pied {
	color: #E6A948;
}


/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 778px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
	margin-top: 0;
	margin-bottom: 0;
}

/* En-tête */
#entete {
	padding: 0;
	margin: 0;
}
/*==================*/
#navigation  {
	background: #fff;
	width: 778px;
	height: 17px;
}

ul#menu {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

ul#menu li {
float: left;
}

ul#menu a {
float: left;
margin: 0 2px;
padding: 5px 15px;
text-align: center;
/*border: 2px solid #00008B;*/
text-decoration: none;
color: #000;
background: #D2E9FF;
color: #002E8A;
font-size: 10px;
}

ul#menu a:hover {
background: #FFCCB9;
/*border: 2px solid #CC2900;*/ 
}


/*==================*/
/* Menu de navigation 
#navigation  {
	background: #fff;
	width: 778px;
	height: 17px;
}
#navigation ul li {
	line-height: 2,5;
}

#navigation ul {
	list-style-type: none;
	margin-left: 5px;
	margin-bottom: 0;
	margin-top: 0;

	padding: 0;
	width: 778px;
}

#navigation li {
	float: left;
	border-bottom: 1px solid crimson;

}
#navigation li {
	font-size: .8em;
}
#menu a {
	width: 110px;
	height: 15px;
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	background: #fff;

	color: #DC143C;
	font-weight: bold;
}

#menu a:hover {
	color: #DC143C;
	background: #F5F5DC;
	border: 2px solid crimson;
}

========*/
/* Contenu */
#contenu {
	padding: 1px 10px;
}
#contenu > :first-child {
	margin-top: 3;
}
#contenu p, #contenu li {
	line-height: 1.5;
}
#contenu {
	/*background: url(img/bckg_corps.png) repeat-y;*/
}

/* Pied de page */
#pied {
	padding: 15px 20px;
	font-size: .85em;
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: left;
	font-size: 1em;
}
/*============== ELEMENTS ====================*/
#titre_page h1{
	text-align: center;
}
/*--- Infos adresse et heures d'ouverture ---*/
#contenu {
}
div#gauche {
	float: left;
	width: 220px;
	/*border-right: 1px solid orange;*/
}
div#gauche ul {
	list-style-type: none;
	margin-left: 5px;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

div#gauche table{
	border-left: 10px solid #C0C0C0;
}
.text_left {
	text-align: left;
	font-size: 10px;
}
.text_center {
	text-align: center;
	font-size: 10px;
}
div#gauche table{
	border-left: 10px solid #C0C0C0;
}
div#droit table{
	border-left: 10px solid #C0C0C0;
}
.nom_img {
	font-size: 13px;
	color: #909090;
}

div#encadrement {
	margin-left: 210px;
	/*height: 650px;*/

}

div#encadrement  p{
	margin-bottom: 10px;
}

p#img_12 {
	float: left;
}

p#img_34 {
	float: left;
}


div#droit{
	margin-left: 230px;
	/*border-left: 1px solid blue;*/
	/*height: 650px;*/
}
p#img_canevas {
	margin-top: 50px;
}
p#armoir_tubes {
	margin-top: 60px;
}
div#droit h2 {
	/*border: 2px solid green;*/
	text-align: center;
	/*background-color: #F0FFF0;*/
	/*background: url(../img/bckg_h2_1.png) left bottom;*/
	line-height: 1;
}
.linked {
	background: url(../img/bckg_h2_1_2.png) left no-repeat;
	text-decoration: none;
}
.not_linked {
	background: url(../img/bckg_degrade.png) left no-repeat;
	text-decoration: none;
}

/*
div#droit h2 a:hover{
	border: 3px solid crimson;
	text-align: center;
	color: crimson;
	/*background-color: #F0FFF0;*/
	/*background: url(../img/bckg_h2_4.png) left bottom;*/

}*/

div#droit span {
	color: #FF8C00;
}

.class {
	height: 200px;
	border: 1px colid crimson;
}
.pub {
	color: crimson;
	font-weight: bold;
	font-size: 1em;

}
.lettrine {
	float: left;
	font: bold 2.5em/1em Georgia, Times New Roman, Times, serif;
	color: #900;
	border: 1px solid #900;
	background-color: #ffc;
	margin-right: 3px;
	padding: 1px;
}

.lettrine_2 {
	font: bold 1.5em/1em Georgia, Times New Roman, Times, serif;
	color: #900;
	border: 1px solid #900;
	background-color: #ffc;
	margin-right: 3px;
	padding: 1px;
}

.en_savoir_plus {
	display: bloc;
	float: right;
	font-weight: bold; 
	color: #900;
}
p#beauxarts li{
	list-style-type: none;
}

/* pied de page => centrer les liens vers les pages*/ 
p#copyright {
	float: left;
}
p#links {
	margin-left: 300px;
}
div#pied {
	margin-top: 50px;
	margin-bottom: 10px;
	clear: both;
}
/*================= NOUVEAU PRODUIT ==============================*/
p#produit {
	margin: auto;
	
}
/*
p#new_prod {
	position: absolute;
	margin-left: 100;
	margin-bottom: 20px;
}*/
.linked_prod {
	background: url(../img/bckg_h2_j.png) left no-repeat;
}

/*===================== paragrephe PHOTO cadres SCROLL =============*/
p#defile {
	margin-top: 20px;
	margin-bottom: 20px;
	
	width: 210px;
	height: 210px;
	
	overflow: scroll;
	
	/*border: 2px solid gray;*/
}
/*===================== NOUVELLES =================================*/
p#nouvelles {
	border: 1px solid gray;

	height: 200px;
}
/*==================================================================*/
.h2_cours {
	background: url(../img/bckg_h2_cours_enfants.png) left no-repeat;
}
.h2_beauxarts {
	background: url(../img/bckg_h2_beauxarts.png) left no-repeat;
}
.h2_galerie {
	background: url(../img/bckg_galerie.png) left no-repeat;
}

.center_img {
	text-align: center;
}
.img_plateau {
	display: block;
	position: relative;
	margin-right: 0;
}
.format_ul {
	list-style-type: none;

}
.annule {
 color:red;
 font-weight: bold;
}
/* --- NOTES ---

1.	Pour pouvoir utiliser une hauteur (height) ou une hauteur minimale
	(min-height) sur un bloc, il faut que sont parent direct ait lui-même une
	hauteur d&eacute;termin&eacute;e (donc toute valeur de height sauf "auto": hauteur en
	pixels, em, autres unit&eacute;s...).
	Si la hauteur du parent est en pourcentage, elle se r&eacute;f&#244;re alors  &#224; la
	hauteur du «grand-p&#244;re», et ainsi de suite.
	Ainsi, pour pouvoir utiliser un "min-height: 100%" sur div#contenu, il nous
	faut:
	- un parent (body) en "height: 100%";
	- le parent de body &eacute;galement en "height: 100%".

2.	Il faut &eacute;viter que les marges des enfants de div#global ne se transmettent
	 &#224; leur parent. Notamment, le margin-top du premier enfant (ici, div#entete),
	et le margin-bottom du dernier enfant (ici, div#pied).
	On &eacute;vite ce probl&#244;me grâce  &#224; la propri&eacute;t&eacute; CSS overflow, qui bloque la
	fusion des marges. En savoir plus sur la fusion des marges:
	http://web.covertprestige.info/test
		04-blocs-imbriques-et-fusion-des-marges.html

3.	Les marges automatiques  &#224; gauche et  &#224; droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global  &#224; gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global  &#224; droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global  &#224; droite avec un retrait ( &#224; droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

*/