body{font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; color:black;background: peru ; 
                  /* background-image: url('cercles.jpg');background-attachment:fixed; background-repeat:repeat;*/}
/*body{ background: url('désert.jpg');} */
/*ci-dessous copié depuis lafranceestbelle_css 
.haut1 {position: absolute ; left:0px;top:0px; width:100%; height:70px; background-color:thistle; margin:0;text-align:center; }
.haut3 {position: absolute ; right:60px; height:80px;background-color:thistle;margin:0;text-align:left;}
h1 {font-size:40px;font-style:normal;color:darkred;margin-top:0px; padding-top: 10px;}
h3 {font-size:12px; color: white ; margin-top:40px;} */

/*annonces {width:1600px;}*/

.haut1 {	margin: 0px; left: 0px; top: -10px; width: 100%; height: 96px; padding-left: 430px;/*text-align: center;*/ line-height: 17px;
        position: absolute; opacity: 1; background-color: thistle;}
h1 {	color: darkred; padding-left: 60px; font-size: 27px; margin-top: -15px;}

.haut3 {	top: -12px; height: 20px; text-align: left; right: 145px; position: absolute; opacity: 1; background-color: thistle;  }
h3 {	color: white; font-size: 12px; margin-top: 10px;}
h6 { color: black; font-size: 14px; margin-top: 0px; }
/*
.haut1 {position: absolute ; left:0px; width:100%; height:70px;top:0px;line-height:17px; background-color:thistle;opacity:1; margin:0;text-align:center;}
h1 {font-size:27px;color:darkred; margin-top:-15px;}


.haut3 {position: absolute ; right:190px; height:30px;background-color:thistle;margin:0;text-align:left;}
h3 {font-size:12px; color: white ; margin-top:10px;}


*/



/*.haut1 {position: absolute ; left:0px; width:100%; height:70px;top:0px;line-height:17px; background-color:thistle;opacity:1; margin:0;text-align:center;}
h1 {font-size:27px;color:darkred; margin-top:-15px;}
/*annonces {width:1600px;}*/

/*.haut3 {position: absolute ; right:190px; height:30px;background-color:thistle;margin:0;text-align:left;}
h3 {font-size:12px; color: white ; margin-top:10px;}
*/

/*.annonces{position: absolute; margin:0; margin-left:14px; width:110%;top:50px;z-index:1;  height:30px; background:red;color: grey;}*/



div li {display: inline-block;margin-left:-2px; } 

    /*#{display: inline-block;} */   /*div ul {list-style-type: none;}*/

nav a {font-size: 1.3em; color: blue; padding-bottom: 3px; text-decoration: none;}
nav a:hover {color: pink; border-bottom: 3px solid green;}

div.gauche { position: absolute; width:26%; left:0px; top:80px;font-size:15px; background: sandybrown ; padding: 0 20px 0 10px; }
/*.centre {display: inline-block; position: absolute; width:45.4%; top:140px ; left:27.8%; right:25%; background: wheat;}
div. centr2  {display: inline-block; height: 30px; width:63% ;left:18.5%; right:15%; padding-left: 0px; -webkit-padding-start: 0px;}*/
/*div.contenu1{position: absolute; width:63%;  left:18.5%; right:15%; top:10720px; background: wheat;}*/
div.droit{position: absolute ; width:26%; right:0px; top:80px; font-size:15px; background: peru; padding: 0px 10px 0 10px;}
figure {display: inline-block; margin-left: 10px;margin-top:15px; position:center;}
p.retrait{padding-left:4px; }   
p.retrait1{padding-left:10px; font-size:14px;}
p.retrait2{padding-left:10px; font-size:12px;}
p.retrait3{padding-left:20px; font size:14px;}
.entree1{font-size:1.3em; text-align:center;}
.entree2{font-size:1.15em;}

/*.centre {display: inline-block; position: absolute; width:45.4%; top:140px ; left:27.8%; right:25%; background: wheat;} */
div.centre {display: inline-block;position:relative; width:45.4%; top:20px ; left:27.2%; right:26%; background: sandybrown;text-align: center;}
 /*div.contenu {position: absolute; width:45.4%; height:auto;left:27.8%; right:25%; top:0px; background: wheat;} */ 
div.contenua{position: float; width:96%; height:100px;left:27%; right:29%; top:10px; background: wheat;border:3px solid peru;padding:0px 8px 0 12px;}
div.contenub{position: float; width:96%; height:100px;left:29%; right:25%; top:20px; background: sandybrown;border:3px solid peru;padding:0px 10px 0 10px;}
/*div.contenu1{position: absolute; width:63%;  left:18.5%; right:15%; top:10720px; background: wheat;}*/

div.centre1{position:float; display:inline-block ; width:97%;height:auto; left:0px; margin-top:270px; background:wheat;text-align:center;}
#carrousel{position:relative;} /*height:200px; width:700px; margin:auto; }/*text-align:center;  } */
#carrousel ul li{position:absolute;  top: -25px; left:-40px; } 
/*----------------------
#carrousel{ position:relative; height:200px; width:700px; margin:auto; }
#carrousel ul li{ position:absolute; top:0; left:0; } 
-----------------------
*/
div.centre2{ position: absolute; height: auto; width:63% ; margin-top:0px;left:18.5%; right: 15px;padding-top:0px;
            background: wheat;text-align: center; -webkit-padding-start: 0px; border-radius: 15px 15px 15px 15px ; font-size: 1.2em; }

div.centre3{display: inline-block;position:relative; width:45.4%; margin-top:635px; padding-left:10px; padding-right:10px ; padding-top:10px ;
            left:27.8%; right:25%; background: wheat;text-align: center;}
div.centre4{ position: absolute; height: auto; width:42% ; top:86px;left:23%; right: 300px;margin:auto;
            padding-left:50px; padding-top:0px; background: white;opacity:0.4; color: black; text-align: left; -webkit-padding-start: 0px;}
			
/*div.centre5{display: inline-block;/*position:relative; width:322px; margin-top:-10px; padding-left:155px; padding-right:60px ; padding-top:10px ;
            left:27.2%; right:25%; background: grey;text-align: left;height:30px;} /* margin-top ci-dessus pour la hauteur du block liste déroulante */
/*div.centre5 ci-dessus pour le choix de musique */  /* padding-top place le vers 14, en hauteur */ /* voir aussi fichier "ChoixDuFruit5.php" */			
/*aussi sur div.centre ci-dessous le background pour le fond de "Choisissez votre musique" */
div.centre5{display: inline-block;/*position:relative;*/ width:380px; margin-top:5px; padding-left:105px; padding-right:60px ; padding-top:5px ;
            left:27.2%; right:25%; background: wheat;text-align: left;} /* margin-top ci-dessus pour la hauteur du block liste déroulante 
			/* et background sur div.centre5 ci-dessus pour "Choisissez votre musique"  */ 
			/* padding-top place le vers 14, en hauteur */
            /* pour les alignements de "Choisissez votre musique" et "Cliquez ici" voir la ligne 629 <p style> de "lafranceestbelle...php 
			
/*div.centre6{display: inline-block;/*position:relative;  width:332px; margin-top:-10px; padding-left:155px; padding-right:60px ; padding-top:10px ;
            left:27.2%; right:25%; background: wheat;text-align: left;} /* margin-top ci-dessus pour la hauteur du block liste déroulante */
/*div.centre6 ci-dessus pour le choix du vers 14 */  /* padding-top place "Choisissez le dernier vers" en hauteur */ /* voir aussi fichier "ChoixDuFruit5.php" */
div.centre11{background:wheat; width: 435px; margin-top: -40px; text-align:left; margin-left: -10px;padding-top:0px;} 
/*div.centre10{background:red; width: 445px; margin-top: -91px; text-align:left; margin-left: -81px;padding-top:0px;} 
             /* margin-top sur cette ligne 10 ci-dessus pour placer en hauteur le vers 14, et margin-left pour le positionnement horizontal */
div.centre12{background:wheat; width: 435px; margin-top: -89px; text-align:left; margin-left: -59px;padding-top:0px;} 
             /* margin-top sur cette ligne 11 ci-dessus pour placer en hauteur le vers 14, et margin-left pour le positionnement horizontal */
			 /* Hauteur de la ligne "Choisissez le dernier vers" voir à cet endroit dans le code de "lafranceestbelle__.php
			 /* Et "background" centre11 pour le fond de la ligne du vers14  */

/*																	   
div.centre10{position:float; display:inline-block ; background:red; width: 445px; margin-top: 8px; text-align:left; margin-left: -46px;padding-top:-15px;} 
 /* centre10=musique */             /* margin-top sur cette ligne 10 ci-dessus pour placer en hauteur le vers 14, et margin-left pour le positionnement horizontal */  /* pour placer en hauteur le vers 14 */
/* 
div.centre11{position:float; display:inline-block ; background:grey; width: 445px; margin-top: 8px; text-align:left; margin-left: -46px;padding-top:-15px;} 
 /* centre11=vers14 */             /* margin-top sur cette ligne 10 ci-dessus pour placer en hauteur le vers 14, et margin-left pour le positionnement horizontal */  /* pour placer en hauteur le vers 14 */			 
/*le div.centre4 ci-dessus pour le fichier inscription-formulaire.php */ 

.reflexions{width:440px; height:120px;}                                                               
/*relexions des visiteurs sur le fichier inscription-formulaire.php*/

/*div.centr2{ display: inline-block; height: 30px; width:95% ; padding-left: 0px; -webkit-padding-start: 0px;}*/


/*div.contenu2{position: absolute; height:0px; width:300%; left:0px; right:0%; min-width: 1200px; max-width: 4550px;top:11450px;color:white; background:gray;}*/
footer {display: inline-block; position:relative; top: 0px; height:30px; width:300%; margin-left:-360px;padding-left: 2500px; background:grey; color:white;-webkit-padding-start: 2500px; }
/*#footer {height: 30px; color: white ; width: 300%; background: gray ; padding-left: 2500px; -webkit-padding-start: 2500px;}*/

#commentaire2 { display: inline-block; text-align: left; } 
p1{top:0px; margin-bottom:10px;font-size:1em;}
p2{top:60px;margin-bottom:10px;font-size:0.9em;}

p3{font-size:30px;color:darkred;}

/*div.bas{position: absolute ; left:0px; top:700px; width:100%; height:60px;text-align: center; background-color:rgb(0,220,153);} */

div h5 {padding: 30px 0 0 130px ; }

.taillepol { font-size: 0.9em ;} 

.taillepol1 { font-size: 0.8em ;}

.taillepol2 { font-size: 1em ; color: black ;}

.taillepol3 { font-size: 0.9em ; color: black; text-align: center ;}

.taillepol4 { font-size: 0.8em; color: navy; padding: 0px 15px 0px 15px; }
.taillepol5{ font-size:0.85em; color: black; text-align:center;}

.taillepol6{ font-size: 0.5em; color: green; padding-top: 20px;}
.taillepol7{ font-size: 1.1em; color: green;}
.taillepol8{ font-size: 1.2em; color: blue;}
.taillepol9{ font-size: 15px ; color : Blue;padding-left: 10px}  /* taille et couleur pour "Cliquez pour le dernier vers..." */
.taillepol10{ font-size: 0.9em ; background:wheat; color: BlueViolet;}
.taillepol11 {font-size: 15px; color: maroon; backgroune:blue;/*BlueViolet;*/ }
.taillepol12{ font-size: 1.1em; color: red;}
.taillepol13{ font-size: 1.2em ; color: blue; }
.taillepol14{ font-size: 0.9em ; color: black;}

.hover { cursor: pointer; background-color: #afa;  /* palegreen ou vert pâle */}
section { text-align: center ; margin: 0 auto; width: 500px;color:white;} 

h4 {position: absolute; width:560px; height:70px; top: 0px; bottom: 10px ; left:20.8%; right:35%; padding: 10px 5px 10px 5px ; }
h5 {font-family: sans-serif; font-style:12px;}
#drapeau{margin:0 auto;}

#chateau_versailles1{display: block; margin-left:-6.5px; border: 3px solid peru ;  } 
#mona_lisa{display:block; margin-left: 90px; border:3px solid orange;}
#mona_lisa1{display:line;  border:3px solid orange;}
#canotiers1 {display: block; margin: 0 auto ; border: 3px solid peru ; position:center ;} 
#canotiers2 {display: block; margin: 0 auto ; border: 3px solid peru ; position:center ;}
/*#chateau0 { display: block; margin: 0 auto ; border: 3px solid peru ; position:center } */
div.img1 { margin: 0 auto; border : 3px solid chocolate;padding-left: -5px;}               /* img pour les fleurs */
div.img2 { margin: 0 auto; border : 3px solid orange;}  /* img pour les oiseaux */
div.img3 { border : 3px solid peru ;}   /* img pour les châteaux */

 
#commentaire3 {display: inline-block; color: black ;display: block; margin: 0 auto ;	padding-right:10px; padding-left: 10px;font-size: 0.8em ;}   
#commentaire4 {display: inline-block; color: green ;display: block; margin: 0 auto ;	padding-right:10px; padding-left: 10px;font-size: 0.9em ;}  
.bleu {font-size:0.9em; color:blue;}
.blanc{font-size:0.9em; color:white;}
.rouge{font-size:0.9em; color:red; }
.espace{white-space:pre;}

/*div.boutoncroyance { font-size: 0.9em; color: pink; } */ /* ajouté le 03Avril2015 avec le javaScript et jQuery */
#bouton1 {display: inline-block; color: green ;display: block; margin: 0 auto ;	padding-right:10px; padding-left: 10px;font-size: 0.8em ;} 
div.bouton2{ margin: 0 auto; border : 3px solid orange;}
.highlight { font-weight: bold; font-style: italic;}
.switcher { float: right; background-color: #ddd; border: 1px solid #000; margin: 10px; padding: 10px; font-size: .9em;}

/* les lignes ci-dessous jusqu'à #auchoix pour le menu, en jQuery, du choix du dernier vers du poème "2084, savoir-vivre..." */
/*.entry{margin-left: -25px; color: black; font-size:1.25em;}

.entry .term { display: inline; font-weight: bold;}
.entry .part { padding: 0 1em; display: inline; font-style: italic;}
.entry .definition { padding: .5em; }
.entry .definition .quote { margin: .5em 2em; padding: 0 1em; color: black; border-left: 2px #eee solid;}
.entry .definition .quote .quote-author { font-weight: bold; margin-left: 20em;}


.letters { float: left; width: 15%; padding-right: 2%;}
.letter { margin: 2px;}
.letter h7 { font-weight: normal ;}  /* bold 
.letter ul { list-style: none; padding: 0; margin: 0 1em;}
.letter input { width: 21%; margin-bottom: 1em;}               /* list-style: none; 

#auchoix { float: left; width: 100%; margin-bottom:0px; margin-top:-100px; margin-left:-12px;}
*/	
b7 { font-size: 15px ; color : maroon; /*margin-left:5px;  /* font-size: 1.1em;  */ }
b8 { font-size: 15px ; color : BlueViolet; /*margin-left:-5px;  /* font-size: 1.1em;  */ }
                  /* b7 ci-dessous pour la ligne "Cliquez pour le dernier vers...", voir aussi à "taillepol9" et à "Div centre5" ci-dessus */
h7 { font-size: 15px ; color : BlueViolet; margin-left:-5px;  /* font-size: 1.1em;  */ }
h8 { font-size: 1.0 ; color : black ; margin-left : -40px; } 
h9{font-size: 1.0 ; color : black ; margin-left : -40px; } 
tailletexte{font-size: 16px ; color : black ;background: wheat; z-index:3;} /* pour le vers 14 */
/* Dans "tailletexte" ci-dessus, "color" pour la couleur du texte du vers 14 */
.boutonform{ font-size: 12px; border: 1px solid peru; width: 220px ; padding-left: auto; margin-left: 165px;background : white;}
.boutonform1{font-size: 12px; border: 1px solid peru; width: 190px ; padding-left: auto; margin-left: 175px;background : wheat;}
.boutonform2{font-size: 12px; border: 1px solid peru; width: 190px ; padding-left: auto; margin-left: 172px;background : wheat;}
.boutonform3{font-size: 12px; border: 1px solid peru; width: 255px ; padding-left: auto; margin-left: 148px;background : wheat;}
.boutonform4{font-size: 12px; border: 2px solid peru; width: 130px ; padding-left: auto; margin-left: 1px; background: wheat;}

img 1 {width : 30% ;}
img 2 {width : 15px ;}
/*div.contenuc{position: float; width:99%; height:100px;left:27.8%; right:25%; top:20px; background: sandybrown;border:3px solid peru ;}*/


/* Trouvé sur le site : www.frogweb.fr/menu-deroulant-horizontal, ci-dessous :  */


/* Ajouté ce a:hover le 26/01/15 pour colorer le fond au survol du curseur*/
/* Supprimé ce a:hover le 28/01/15 sans problème */

 
/* 
#menu-demo2{
border-left:1px solid orange;
border-right:1px solid orange;
border-top:1px solid thistle;

}

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
font-size:0.9em; /*ajouté le 23/01/15*/
/*
}

#menu-demo2 ul, li{
text-align:center; /*ajouté le 27/01/2015*/
/*
}

#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;

}

#menu-demo2 ul li{
display:inherit;   
border-radius:0;

}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}

#menu-demo2 ul{
position:absolute;
max-height:0;

left: -0px;
right: 0;
border-left: 1px solid orange;
border-right: 1px solid orange;
border-bottom: 1px solid orange;

text-align:center; /*ajouté le 22/01/2015 pour centrer les textes*/
/*
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#menu-demo2 li:hover ul{
max-height:20em;   /* définit la hauteur des menus déroulants */
/*
}
/* background des liens menus */
/*
#menu-demo2 li:first-child{
background-color: ivory; /*#65537A;*/
/*
background-image:-webkit-linear-gradient(top, white /*#65537A 0%, #2A2333*/ 100%);
background-image:linear-gradient(to bottom, white /*#65537A*/ 0%, white /*#2A2333*/ /*100%); 
/*padding-left:4px;*/ /*
}
#menu-demo2 li:nth-child(2){
background-color: ivory; /*#729EBF;*/       /* Titre "Infos" mis en rouge */ /*
background-image: -webkit-linear-gradient(top, white /*#729EBF 0%, #333A40*/ /*100%);
background-image:linear-gradient(to bottom, white /*#729EBF 0%, #333A40*/ /*100%);
/*padding-left:4px;*/ /*
}
#menu-demo2 li:nth-child(3){
background-color: ivory; /*#F6AD1A;*/     /* Titre "l'ecole au passe" mis en vert */  /*
background-image:-webkit-linear-gradient(top, white /*#F6AD1A 0%, #9F391A*/  /* 100%);
background-image:linear-gradient(to bottom, white /*#F6AD1A 0%, #9F391A*/   /*100%);
/*padding-left:4px;*/  /*
}
#menu-demo2 li:nth-child(4){
background-color: ivory; /*#CFFF6A;*/      /* ajouté le 23/01/15 */
background-image:-webkit-linear-gradient(top, white /*#CFFF6A 0%, #677F35*/  /* 100%);
background-image:linear-gradient(to bottom, white /*#CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(5){
background-color: ivory; /*#CFFF6A;*/      /* ajouté le 23/01/15 */
background-image:-webkit-linear-gradient(top, white /*#CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /*#CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(6){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(7){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(8){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(9){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(10){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:nth-child(11){
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}

#menu-demo2 li:last-child{
background-color: ivory; /*#CFFF6A;*/
background-image:-webkit-linear-gradient(top, white /* #CFFF6A 0%, #677F35*/ 100%);
background-image:linear-gradient(to bottom, white /* #CFFF6A 0%, #677F35*/ 100%);
/*padding-left:4px;*/
}


/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:white; /*red; pink; #2A2333;*/

}

#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:white; /*#CFFF6A;*/
}
/* les a href */
#menu-demo2 a{        /* Pour l'espacmt entre les colonnes, voir ligne 23 à div:li à margin-left */
text-decoration:none;
display:block;
padding:6px 32px;    /*le 1er padding définit la hauteur des têtes des menus déroulants, 2è padding la largeur des déroulants */ 
color:black ; /*#fff;*/
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 1px      /* le 1er padding définit l'espacement des lignes en hauteur dans les menus déroulants 
                        le 2èm padding définit la marge gauche à l'intérieur des menus déroulants */ 
}
#menu-demo2 li:hover li a{
color:black; /*#fff; */
/*text-transform:inherit;*/
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color: chocolate; /*#000;*/
}