@charset "utf-8";
/* CSS Document */
body {
    font: 100% Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes 				valeurs par défaut des navigateurs */
    padding: 0;
    /*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;*/
}
/*---------- L'entête ----------*/

#entete {

	margin:0;
	padding:0;/* 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. */
	background-image: url(../../images/banniere_franck.jpg);
	width:780px;
	height:120px;
  
}
/*---------- Le Conteneur ----------*/

#conteneur {
    width: 780px;  /* 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-color: #fbf7d9;
    margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	padding:0;
    text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
}
/************************************************************************************************/
/*------------------------------------------- La page ------------------------------------------*/

#page {
	width:780px;
	height:auto;
	margin:0;
	padding:50px 0 0 0; /* 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. 5px 10px 0 20px */
	/*margin-top: 0px;
	padding-top: 0px;*/
	background-color:#fbf7d9;
}
#page p{
	margin:20px;
	padding:0;
	
}
#page h1 h2 h3 h4 h5 h6{
	margin:0;
	padding:0;

}
/************************************************************************************************/
/*---------- Ici c'est très important, c'est l'espace entre le menu et le haut de la page 
et l'espace entre le bas de page et le pied de page -----*/
.espacemenu{
	margin:20px 0 0 0;/*il y a une marge haute de 20 pixels entre le menu et le début de la page 
	ceci a une incidence sur le déroulement du menu !!*/
	padding:0;
}
/************************************************************************************************/
/*------------------------------------- Le pied de page ----------------------------------------*/
#piedpage {
	width:780px;/* Largeur du pied de page */
	height:123px;/* Hauteur du pied de page */
	margin:0;
	padding:0;
	clear: both;/* La propriété "clear both" garanti qu'aucun élément flottant ne viendra interférer avec le pied de page */
	background-image:url(../../images/piedpage2.jpg);
}
#p1 {/* Gére les dates et horaires d'ouverture du salon dans le pied de page */
	position:absolute;
	margin:0 0 0 25px;
	/margin:0 0 0 25px;/*IE7*/
	padding:0;
	color: #0066FF;
	font-size:1.1em;
	font-weight:bold;
    font-family : Arial;
}
.trait{ /* Gère l'image de la ligne entre le paragraphe 1 et le paragraphe 2 */
	position:absolute;
	margin:45px 0 3px 30px;
	/margin:45px 0 3px 30px; /*IE7*/
	padding:0;
	background-image:url(../../images/trait_pied_page.jpg); /* adresse le l'image */
	width:720px; /* Largeur de l'image */
	height:1px; /* Hauteur de l'image */
}
#p2 {/* Gére le nom, l'adresse le tél, le fax dans le pied de page  */
	position:absolute;
	margin:60px 0 0 200px;
	/margin:60px 0 0 200px;/*IE7*/
	padding:0;
	color: black;
	font-size:12px;
	font-weight:bold;
    font-family : Arial;
}
.logopiedpage1{
	position:absolute;
	width:50px;
	height:52px;
	margin:50px 0 0 90px;
	/margin:50px 0 0 90px;/*IE7*/
	padding:0;
	background-image:url(../../images/logo_pied_page.jpg);
	background-repeat:repeat;
}
/*.logopiedpage2{
position:absolute;
background-image:url(../../images/logo_pied_page.jpg);
background-repeat:repeat;
width:50px;
}*/
/************************************************************************************************/
/*---------------------------------- Le  Menu du pied de page ----------------------------------*/
ul#menupiedpage{
	position:absolute;
	margin:105px 0 0 5px;
	/margin:105px 0 0 5px;/*IE7*/
	padding:0;
	list-style-type:none;
	font-weight : bold;
    font-family : Arial;
    font-size : 12px;
}
#menupiedpage li{
	float:left;
}
#menupiedpage a{
	display:block;
	width:140px;
	margin:0 0 0 41px;
	padding:0;
	border:1px solid #fff;
	background-image:url(../../images/menu1.jpg);
	text-align:center;
	text-decoration:none;
	color:#3033c0;
}
#menupiedpage a:hover{
	text-decoration:none;
	background-image:url(../../images/menu1.1_hover.jpg);
	color:#3033c0;
}
/************************************************************************************************/
/*-------------------------------- Toutes les classes, div et style ----------------------------*/
.texte{/* gére la balise "texte" dans la page index du site */
position:absolute;
margin:-28px 0 0 21px;
padding:10px 20px 0 10px;
width:700px;
height:40px;
/*border:2px solid red;*/
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:1.0em;
}.textdefilant{ padding:0 0 0 10px;}
.Style2 {color: #0066FF}/*couleur bleu */
.Style3 {color: #DE412E}/* couleur bordeaux*/
.Style4 {color: #009933}/* couleur verte */
.surligngris{background-color:#999999;}
.surlign{/* surligne en jaune certains passage de texte */
	background-color:yellow;
}
.espaceliste{/* gère l'espace entre les lignes dans une liste à puce */
line-height:25px;
}
a img{ /*desactive la bordure "lien" autour de l'image */
	border:0 none;
}
.retraitgauche{
text-indent:50px;
}
.titre4{
margin:0;
padding:0;
}
.h3{
margin:0;
padding:0;
color:#31319c;
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Association" --------------------------*/
#asso{
position:absolute;
width:750px;
height:auto;
margin:-1040px 0 0 23px;
padding:0;
/*border:1px solid red;*/
}
#salon{
position:absolute;
width:750px;
height:auto;
margin:-830px 0 0 23px;
padding:0;
/*border:1px solid green;*/
}
#club{
position:absolute;
width:750px;
height:auto;
margin:-300px 0 0 23px;
padding:0;
/*border:1px solid black;*/
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Crédit" -------------------------------*/
#credits{
position:absolute;
width:731px;
height:auto;
margin:-710px 0 0 23px;
padding:0;
/*border:1px solid red;*/
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Contacts" -------------------------------*/
#contacts{
position:absolute;
width:731px;
height:auto;
margin:-970px 0 0 23px;
/margin:-920px 0 0 23px;
padding:0;
/*border:1px solid red;*/
}
/*#logo_mairie{
position:absolute;
width:750px;
height:auto;
margin:10px 0 0 355px;
padding:0;
/*z-index:15;*/
/*}*/
/*#verre{
position:absolute;
width:242px;
height:230;
margin:-10px 0 0 247px;
padding:0;
}*/
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Mentions Légales" -------------------------------*/
#mentions_leg{
position:absolute;
width:731px;
height:auto;
margin:-950px 0 0 23px;
padding:0;
background-image:url(../../pages/legales/images/arrplan1_asso.jpg);
background-repeat:repeat-y;
font: 90% Arial, Helvetica, sans-serif;
/*border:1px solid red;*/
}
#mentions_leg h3{
margin:0 0 0 20px;
padding:0;
}
/************************************************************************************************/
/*------------------ Les paragraphes de la page "Présentation du salon" ------------------------*/
#tavail_1{
float:left;
width:500px;
height:auto;
margin:0;
padding:0;
/*border:1px solid red;*/
}
#tavail_2{
float:left;
width:390px;
height:auto;
margin:0;
padding:0;
/*border:1px solid red;*/
}
#hygiene{
width:670px;
height:180px;
margin:0px 0 0 50px;
/margin:0 0 0 50px;/*IE7*/
padding:0;
border:1px solid black;
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Les Exposants" ------------------------*/
#exposants{
position:absolute;
width:610px;
height:auto;
margin:-450px 0 0 103px;
padding:0;
/padding:80px 0 0 560px;/*IE7*/
font-weight:bold;
/*border:1px solid red;*/
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Les Animations" ------------------------*/
#animations{
position:absolute;
width:610px;
height:auto;
margin:-450px 0 0 103px;
padding:0;
/padding:80px 0 0 560px;/*IE7*/
font-weight:bold;
/*border:1px solid red;*/
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Restauration" ------------------------*/
#restauration{
position:absolute;
width:610px;
height:auto;
margin:-450px 0 0 103px;
padding:0;
/padding:80px 0 0 560px;/*IE7*/
font-weight:bold;
/*border:1px solid red;*/
}
/*----- Gère la taille et la position de la balise " Xiti"dans toutes les pages ---------------*/
#tabloxiti{
width:39px;
height:25px;
margin:0px 0px 0 0px;
padding:0;
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Animation Salon" ----------------------*/
#date1{
position:absolute;
width:760px;
height:auto;
margin:20px 0 0 10px;
/margin:0px 0 0 10px;/*IE7*/
padding:0;
/*border:1px solid red;*/
}
#date2{
position:absolute;
width:570px;
height:auto;
margin:100px 0 0 90px;
/margin:260px 0 0 90px;/*IE7*/
padding:0;
/*border:1px solid green;*/ z-index:10;
}
#date3{
position:absolute;
width:570px;
height:auto;
margin:430px 0 0 90px;/*860px 0 0 40px*/
/margin:430px 0 0 90px;/*IE7*/
padding:0;
/*border:1px solid black;*/ z-index:10;
}
#date4{
position:absolute;
width:570px;
height:auto;
margin:600px 0 0 90px;
/margin:600px 0 0 90px;/*IE7*/
padding:0;
/*border:1px solid blue;*/ z-index:18;
}
#date_concert{
position:absolute;
width:570px;
height:auto;
margin:750px 0 0 90px;
/margin:750px 0 0 90px;/*IE7*/
padding:0;
z-index:18;
}
#date6{
position:absolute;
width:570px;
height:auto;
margin:950px 0 0 90px;
/margin:950px 0 0 90px;/*IE7*/
padding:0;
z-index:18;
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Ateliers découvertes" -----------------*/
#titre_ad1{
position:absolute;
width:600px;
height:auto;
margin:0px 0 0 100px;
/margin:0px 0 0 100px;/*IE7*/
padding:0;
/*border:1px solid black;*/
}
#ateliers_1{
position:absolute;
width:400px;
height:auto;
margin:120px 0 0 320px;
/margin:70px 0 0 320px;/*IE7*/
padding:0;
/*border:1px solid red;*/
}
#titre_ad2{
position:absolute;
width:500px;
height:auto;
margin:320px 0 0 150px;
/margin:320px 0 0 150px;/*IE7*/
padding:0;
/*border:1px solid black;*/
}
#ateliers_2{
position:absolute;
width:400px;
height:auto;
margin:400px 0px 0 50px;
/margin:390px 0 0 50px;
padding:0;
/*border:1px solid blue;*/
}
#titre_ad3{
position:absolute;
width:300px;
height:auto;
margin:600px 0 0 250px;
/margin:600px 0 0 160px;/*IE7*/
padding:0;
/*border:1px solid black;*/
}
#ateliers_3{
position:absolute;
width:330px;
height:auto;
margin:690px 0 0 390px;
/margin:690px 0 0 390px;/*IE7*/
padding:0;
/*border:1px solid green;*/
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Région invitée" -----------------*/
#titre1_ri{
position:absolute;
width:450px;
height:auto;
margin:-40px 0 0 230px;
/margin:-40px 0 0 230px;
padding:0;
/*border:1px solid red;*/
}
#image1_ri{/*festival_off*/
position:absolute;
width:280px;
height:184px;
margin:220px 0 0 20px;
/margin:210px 0 0 20px;/*IE7*/
/*padding:0;
/*border:1px solid black;*/
}
#texte1_ri{
position:absolute;
width:410px;
height:auto;
margin:0px 0 0 340px;
/margin:0px 0 0 340px;/*IE7*/
padding:0;
/*border:1px solid red;*/
}
#titre2_ri{
position:absolute;
width:380px;
height:auto;
margin:430px 0 0 200px; /* 260 */
/margin:430px 0 0 200px;/*IE7*/
padding:0;
/*border:1px solid red;*/
}
#image2_ri{/* Gite de France*/
position:absolute;
width:300px;
height:199px;
margin:530px 0 0 440px; /* 360 */
/margin:530px 0 0 440px;/*IE7*/
padding:0;
/*border:1px solid black;*/
}
#image_logo_ri{/* Logo Gite de France*/
position:absolute;
width:100px;
height:100px;
margin:550px 0 0 310px; /* 360 */
/margin:540px 0 0 310px;/*IE7*/
padding:0;
/*border:1px solid black;*/
}
#texte2_ri{
position:absolute;
width:440px;
height:auto;
margin:490px 0px 0 0px; /* 300 */
/margin:480px 0 0 0px;
padding:0;
/*border:1px solid blue;*/
}
#titre3_ri{
position:absolute;
width:450px;
height:auto;
margin:430px 0 0 170px;
/margin:430px 0 0 170px;/*IE7*/
padding:0;
/*border:1px solid blue;*/
}
#image3_ri{/* photo CNIEL*/
position:absolute;
width:280px;
height:210px;
margin:520px 0 0 20px;
/margin:520px 0 0 20px;/*IE7*/
padding:0;
}
#texte3_ri{
position:absolute;
width:410px;
height:auto;
margin:550px 0 0 340px;
/margin:550px 0 0 340px;/*IE7*/
padding:0;
/*border:1px solid green;*/
}
/*#texte4_ri{ /* Page région invitée *//* Mis en commentaire le 19 février 2010 */
/*position:absolute;
width:730px;
height:auto;
margin:960px 0 0 20px;
/margin:960px 0 0 20px;/*IE7*/
/*padding:0;
/*border:1px solid green;*/
/*}
#texte5_ri{ /* Page région invitée *//* Mis en commentaire le 19 février 2010 */
/*position:absolute;
width:750px;
height:auto;
margin:1010px 0 0 20px;
/margin:1010px 0 0 20px;/*IE7*/
/*padding:0;
/*border:1px solid green;*/
/*}*/
/************************************************************************************************/
/*--------------------- Les paragraphes de la page "Liste des coups de coeurs 2009" ------------*/
#listecoupcoeur1{
position:absolute;
width:610px;
height:70px;
margin:30px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur2{
position:absolute;
width:610px;
height:70px;
margin:130px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur3{
position:absolute;
width:610px;
height:70px;
margin:230px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur4{
position:absolute;
width:610px;
height:70px;
margin:330px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur5{
position:absolute;
width:610px;
height:70px;
margin:430px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur6{
position:absolute;
width:610px;
height:70px;
margin:530px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur7{
position:absolute;
width:610px;
height:70px;
margin:630px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur8{
position:absolute;
width:610px;
height:70px;
margin:730px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur9{
position:absolute;
width:610px;
height:70px;
margin:830px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur10{
position:absolute;
width:610px;
height:70px;
margin:930px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur11{
position:absolute;
width:610px;
height:70px;
margin:1030px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#listecoupcoeur12{
position:absolute;
width:610px;
height:70px;
margin:1130px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
/************************************************************************************************/
/*---------------------------- Les paragraphes de la page "Cep d'or 2009" ----------------------*/
#cep_dor1{
position:absolute;
width:610px;
height:auto;
margin:-60px 0 0 80px;
padding:30px 0 30px 10px;
border:10px double #31319C;
text-align:center;
}
#cep_dor2{
position:absolute;
width:625px;
height:auto;
margin:190px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
#cep_dor3{
	position:absolute;
	width:625px;
	height:auto;
	margin:180px 0 0 80px;
	padding:10px 0 0 10px;
	border:2px solid blue;
	text-align:center;
/*	left: 2px;*/
	top: 743px;
}
#cep_dor4{
position:absolute;
width:625px;
height:auto;
margin:840px 0 0 80px;
padding:10px 0 0 10px;
border:2px solid blue;
text-align:center;
}
/************************************************************************************************/
/*--------------- L'image du "produits regionaux" de la page "Région invitée" ------------------*/
#image12_ri{
position:absolute;
width:280px;
height:150px;
margin:30px 0 0 20px;
/margin:30px 0 0 20px;
}
/************************************************************************************************/
/*-------------------------- Les paragraphes de la page "Animation Salon" ----------------------*/
#date7{
position:absolute;
width:570px;
height:auto;
margin:1100px 0 0 90px;
/margin:1100px 0 0 90px;/*IE7*/
padding:0;
z-index:18;
}
#date8{
position:absolute;
width:570px;
height:auto;
margin:1240px 0 0 90px;
/margin:1240px 0 0 90px;/*IE7*/
padding:0;
z-index:18;
}
.Style5 {color:#FFCC33}/* couleur verte */