@charset "UTF-8";
/* CSS Document */

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #EDECEC;
	padding: 0;
	background-image: url(images2/fnd2.jpg);
	background-position: center;
	width:1000px;
	margin: 0 auto;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000000;
    }

    #container {
    	width: 1000px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
    	background:#ffffff url(images2/2.jpg) 0 0 no-repeat;
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    }

    #header {
    	padding: 0 10px 0 20px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
    }

    #header h1 {
    	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
    	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    }

    #mainContent, #zone2, #zone3, #zone4, #zone5, #zone6, #footer {
    	padding: 0 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
		margin:20px 0 0 0;
    }

	#header h1{color:#ffffff;font-size: 120% ;font-weight: bold; line-height:160%;}
	h2{color:#990000;font-size: 120% ;font-weight: bold;}
	
	/*MEnu*/
	div#menu{ padding:20px 0 80px; 0; font: 90% Verdana, Arial, Helvetica, sans-serif;}
	div#menu ul {	padding:0;margin:0;	list-style:none;	width:100%;	float:left;	}
	div#menu li {	display:inline-block; 	text-align:center;	margin:0 0 0 10px; padding:0;	height:1.4em;	float:left;	/*background:#202020 url(images2/subbtn_ab.gif) repeat-x 0 0;*/	}	
	div#menu ul a{	display:inline-block;	height:1.4em;	padding:0 10px;	text-decoration: none;	color:#FFFFFF; }
	div#menu ul a:hover{ /*background-color:#FFFFFF;*/	color:#000000; }
	
	/* btn selected color */
	.c1 li#cat_1,
	.c2 li#cat_2,
	.c3 li#cat_3,
	.c4 li#cat_4,
	.c5 li#cat_5,
	.c6 li#cat_6,
	.c7 li#cat_7,
	.c8 li#cat_8,
	.c9 li#cat_9,
	.c10 li#cat_10,
	.c11 li#cat_11
	 {	/*background:#ffffff ;*/ color:#FFFFFF;	}
	.c1 li#cat_1 a,
	.c2 li#cat_2 a,
	.c3 li#cat_3 a,
	.c4 li#cat_4 a,
	.c5 li#cat_5 a,
	.c6 li#cat_6 a,
	.c7 li#cat_7 a,
	.c8 li#cat_8 a,
	.c9 li#cat_9 a,
	.c10 li#cat_10 a,
	.c11 li#cat_11 a
	 {	color:#ffffff ;	font-weight:bold; text-decoration:underline;	}
	 
	  /*Titres parties.... commun a c1*/
	 .c1 h2{margin:0 0 2em 0; padding:0; color:#006600; background:url(images2/linehor.jpg) no-repeat 50px 100%;} 
	 /*bloc gris*/
	 div.pad10{padding:10px; background:url(images2/fleur_fond.png) no-repeat 100% 100%;}
	 div.blocgris{background:#f7f7f7 url(images2/subblock.jpg) repeat-x 0 100%; color:#4e4e4e;}
	  
	 .btnplus{text-align:center;margin:0;padding:0;float:right;background:#202020 url(images2/btnv_ab.png) repeat-x 0 0; font-size:90%;}
	 .btnplus a{display:block; height:1.4em; padding-left:10px !important;padding-right:10px !important; text-decoration: none; color:#FFFFFF !important; } /*important pour ne pas garder les props de zone4 a et zone4 a:hover*/
	 .btnplus a:hover{ background-color:#FFFFFF; }
	 
	 /*HEADER*/
	 div#header_g{float:left; display:block; width:627px; background:#cfe8b1; margin:0 10px 0 0;}
	 div#header_g img{padding:10px;}
	 div#header_d{float:right; display:block; width:300px;}
	 div#header_d h2{margin:0 0 0.5em 0; color:#990000; background:none}
	 div#header_d li{margin:0; padding:0;}
	 
	 /*ZONE 2*/
	 div#zone2 span.fleur{display:block; float:left; width:50px; height:60px; background:url(images2/fleur_puce1.png) no-repeat 0 0;}
	 div#zone2L{float:left; display:block; width:470px; }
	 div#zone2L .blocgris{position:relative; text-align:center; line-height:1.8em; min-height:280px;}
	 div#zone2L .pad10{ padding:30px 10px;}
	 div#zone2L .content{height:220px; overflow:auto; color:#333333;}
	 
	 div#zone2R{float:right;display:block;width:470px;}
	 div#zone2R .blocgris{ position:relative; min-height:280px;}
	 div#zone2R .pad10{padding:10px; min-height:260px;}
	 div#zone2R img{float:left; margin:0 10px 10px 0; border:solid #cccccc 8px; width:auto;}
	 div#zone2R h3{margin:0 0 0.3em 0; font-size:80%; font-weight:bold; color:#990000;}
	 div#zone2R p{margin:0; font-size:80%; line-height:1.4em;}
	 div#zone2R .lastimg{margin:0 10px 0 0;}
	 div#bloc_articles a {color:#4E4E4E !important; }
	 div#bloc_articles a:hover {	color:#990000 !important;	background: none !important;}
	 
	 /*titres next fleur2*/
	 div#zone3 span.fleur, 
	 div#zone4 span.fleur, 
	 div#zone5 span.fleur{display:block; float:left; width:50px; height:40px; background:url(images2/fleur_puce2.png) no-repeat 0 0;}
	 
	 /*ZONE 3*/
	 div#header_d a,
	 div#zone2 a,
	 div#zone3 a,
	 div#zone4 a{display:block; margin:0; height:1%; padding:3px; color:#990000; text-decoration:none;}
	 div#header_d a:hover,
	 div#zone2 a:hover,
	 div#zone3 a:hover,
	 div#zone4 a:hover{display: block; margin:0; height:1%; padding:3px; background-color:#990000; color:#ffffff; text-decoration:none;}
	 
	 div#bloc_aquarelles{float:left; width:310px; font-size:90%;}
	 div#bloc_aquarelles .pad10{ min-height:290px; }
	 div#bloc_aquarelles ul{margin:0; padding:0 0 0 20px;}
	 div#bloc_aquarelles li{margin:0; padding:0;}
	
	 /*div#zone3 img, div#zone3 img{ float:left; margin:0 0 0 15px; width:290px; border:solid #aaaaaa 10px;}*/
	 div#zone3 div#diaaquarelles1, div#zone3 div#diaaquarelles2{ float:left; margin:0 0 0 15px; width:290px; height:290px; border:solid #aaaaaa 10px;}
	 div#zone3 div#diaaquarelles1 div.faded, div#zone3 div#diaaquarelles2 div.faded{ position:absolute;}
	 div#zone3 img {border:0px none !important;}
	 div#zone3 div.faded a, div#zone3 div.faded a:hover{border:0px none; padding:0; margin:0; background:none;}
	 
	 /*ZONE 4*/
	 
	 div#zone4 div#diaphotos1, div#zone4 div#diaphotos2, div#zone4 div#diaphotos3{ float:left; margin:0 0 0 10px; width:163px; height:163px; border:solid #000000 8px;}
	 div#zone4 div#diaphotos1 div.faded, div#zone4 div#diaphotos2 div.faded, div#zone4 div#diaphotos3 div.faded{ position:absolute;}
	 div#zone4 img {border:0px none !important;}
	 div#zone4 div.faded a, div#zone4 div.faded a:hover{border:0px none; padding:0; margin:0; background:none;}
	 
	 /*
	 div#zone4 img{float:left; margin:0 10px 0 0; padding:10px; background:#000000;}

	 */
	 div#zone4 .blocgris{margin:0 0 0 579px; font-size:90%; color:#4e4e4e;}
	 div#zone4 .pad10{min-height:163px;}
	 div#zone4 ul{margin:0; padding:0 0 0 20px;}
	 div#zone4 li{margin:0;}
	 
	 /*ZONE 5*/
	 div#zone5 .blocgris{font-size:80%; line-height:1.7em; color:#4e4e4e;}
	 div#zone5 a{ padding:2px; color:#4e4e4e; text-decoration:none;}
	 div#zone5 a:hover{ background-color:#990000; color:#ffffff;}
	 
	  /*Footer*/
	div#footer{ text-align:center; font: 70% Verdana, Arial, Helvetica, sans-serif;}
	div#footer a{ display: inline-block; height:1.4em; padding:3px 10px; text-decoration: none;	color:#000000;	}
	div#footer a:hover{ display: inline-block; height:1.4em; padding:3px 10px; text-decoration: none; background-color:#990000; color:#ffffff;	}
	div#footer p {	margin: 10px 0 0 0; font-size:130%; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
     }
	 
	 .clear{clear:both;}