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

/*****Remarques*****
La version actuelle de PIE pose problème lorsque l'utilisateur choisit un autre zoom que 100% dans ie7 seulement je crois, ça fonctionne dans ie8 et la fonction zoom n'existe pas avant ie7, solution: faire une feuille de style spéciale pour ie7 avec des fonds en image qu'il faudra créer...
IE8 : Le site vacanceschezjolivet.free.fr fait a priori parti de la liste des sites webs mises à jour à partir de Microsoft qui nécessite un affichage de compatibilité !!! IE8 étant paramétré par défaut pour inclure ces listes, les utilisateurs d'IE8 prendront en compte les commentaires conditionnels tels que if lt IE8 et ne pourront pas profiter des optimisations pour IE8 que j'ai créé sur ce site... Seule solution:trouver une adresse pour le site qui ne fasse pas parti de ces listes... A vérifier sur chambreshotesjolivet.free.fr!!! (dans IE8 : Pages/Paramètres d'affichage de compatibilité, cocher la case Inclure...blablabla...)
La balise blinck est apprise à IE grâce à un script dans java.js, ça ne fonctionne pas sous ie8, ça marche avec ie7, j'ai déjà du ajouter des z-index pour que le fond du bouton apparaisse puis pour le texte, tout ça seulement pour IE8, donc il y a peut-être un soucis ailleurs, pas trouvé!!! une solution pourrait être de créer un gif animé pour IE8 mais après, on pert le redimensionnement auto du bouton...
*****fin remarques*****/

/************************************************************************/
/*							FONDS DE TESTS								*/
/************************************************************************/
/*table {background-color: lightgray}
td, th {background-color: gray}
div {background-color: beige}
#intro {background-color: beige}
form {background: bisque}
input, select, textarea {background-color: salmon}
h1 { background-color:#00FF99}
h2 { background-color:#00FF66}
hr { background-color:#FFFF00}
h3, h4, h5, h6, p {background-color: darkkhaki}
ul {background-color: lightsteelblue}
li {background-color: silver}
/*fin code test*/


/************************************************************************/
/*								FOND									*/
/************************************************************************/
#background {
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0}
#bgleft {
	left:0;
 	background: url(../images/dejeunersvert.jpg) no-repeat left center ;
	z-index:-10		 
}
#bgright {
	right:0;
	background:url(../images/vertevert.jpg) no-repeat right center;
	z-index:-9;
}
#bgleft, #bgright {
	width:40%;
	height:100%;
	position:absolute;
	top:0;
        -webkit-background-size: cover; /* pour Chrome et Safari */ 
        -moz-background-size: cover; /* pour Firefox */ 
        -o-background-size: cover; /* pour Opera */ 
        background-size: cover; /* version standardisée */
}
#bgcenter {
	width:30%;
	min-width:850px;
	height:100%;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-425px;
	background:url(../images/fondmotif18_bords_degrades.png) repeat-y center top;
        -webkit-background-size: 100% 200%; /* pour Chrome et Safari */ 
        -moz-background-size: 100% 200%; /* pour Firefox */ 
        -o-background-size: 100% 200%; /* pour Opera */ 
        background-size: 100% 200%; /* version standardisée */ 
	z-index:-8;
}
#motif {
margin:0 30px;
height:100%;
	background:url(../images/fondmotif18_centre.jpg) repeat center top;
        -webkit-background-size: auto 200%; /* pour Chrome et Safari */ 
        -moz-background-size: auto 200%; /* pour Firefox */ 
        -o-background-size: auto 200%; /* pour Opera */ 
        background-size: auto 200%; /* version standardisée */ 
}
/************************************************************************/
/*								PLACEMENT DU CONTENU					*/
/************************************************************************/
#referenceintro {/*Je pense que cette div peut être supprimée, à voir...*/
width:100%;
min-width:850px;
height:100%;
position:relative;
min-height:350px;
}



#intro {
	width: 850px;
	position:absolute;
	left:50%;
	top:95px;
	margin-left:-425px; 
	margin-bottom:4%;
	z-index:0;
}

#gauche{
	float:left;
	width:545px;
	padding:0 0 0 60px;
	margin:0;
	position:relative;
}

#droite{
	float:right;
	width:180px;
	padding:0 50px 0 0;
	margin:0;
	position:relative;
}

#logocharmance{
margin-top:3px
}

#intro hr {
 	clear: both;
	visibility:hidden;
	height:1.5em;
}

/************************************************************************/
/*								TEXTE									*/
/************************************************************************/
.txtintro {
	margin:1em 0 0 0;
	font-size:1.2em;
	color:#8B3402;
	text-align:center;
	width:520px;
	margin:1em auto 1em auto;
	padding:10px 5px 10px 5px;
}

#gauche {font-size:0.9em}
#gauche p:first-letter {padding-left:2.5em}

#droite {
	font-family: Kalimati,Tahoma,Geneva,Arial,"Comic sans MS", sans-serif;
	color: #FFF5A4;
	font-size:0.7em;
	font-weight:400;
}
#droite a:link, #droite a:visited{color:#FFF5A4;}
a img {border:none}

/************************************************************************/
/*							CADRES EN RELIEF							*/
/************************************************************************/

#gauche li.relief1 {
	width:520px;
	margin:0 auto 1em auto;
	padding:10px 5px 10px 5px;
	text-align:justify;
	background-image:url(../images/1pxblanc10.png); background-repeat:repeat;
			/*ombre box*/
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
}

#gauche li.news {
	background-image:url(../images/1pxjaune50.png); background-repeat:repeat;
}
#droite li.relief2 {
	width:140px;
	margin:0 auto 1em auto;
	padding:10px 5px 9px 5px;
	text-align:center;
			/*dégradés*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(242,203,5,1)), to(rgba(104,115,22,1)));  /* For WebKit (Safari, Google Chrome etc) */     
	background: -moz-linear-gradient(top, rgba(242,203,5,1), rgba(104,115,22,1)); /* For Mozilla/Gecko (Firefox etc) */ 
	background: linear-gradient(rgba(242,203,5,1), rgba(104,115,22,1));/* For Others*/
			/*ombre box*/
	-webkit-box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	-moz-box-shadow:rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
}

#droite .bookingbutton {
	display:block;
	width:140px;
	margin:0 auto 1em auto;
	padding:10px 5px 9px 5px;
	text-align:center;
			/*dégradés*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(242,203,5,1)), to(rgba(104,115,22,1)));  /* For WebKit (Safari, Google Chrome etc) */     
	background: -moz-linear-gradient(top, rgba(242,203,5,1), rgba(104,115,22,1)); /* For Mozilla/Gecko (Firefox etc) */ 
	background: linear-gradient(rgba(242,203,5,1), rgba(104,115,22,1));/* For Others*/
			/*ombre box*/
	-webkit-box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	-moz-box-shadow:rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
}
#droite .bookingbuttonthin {padding:0 5px}

#droite .bookingbutton:active, #droite .bookingbutton:hover, #droite .bookingbutton:focus {
			/*dégradés*/
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#333));  /* For WebKit (Safari, Google Chrome etc) */     
	background: -moz-linear-gradient(top, #777, #333); /* For Mozilla/Gecko (Firefox etc) */ 
	background: linear-gradient(#777, #333);/* For Others*/
			/*ombre box*/
	-webkit-box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	-moz-box-shadow:rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
	box-shadow: rgba(102,102,102,0.7) 3px 3px 3px, rgba(255,247,181,0.6) -1px -1px 0px;
}
#droite .book1 a:visited, .book1 a:link {text-decoration:none}
.book {
color:#FF0000;
font-size:1.2em
}
#paypal {width:110px;}

#TA_rated418 {
	padding-left:5px;
	margin:0 auto 0 auto;
	position:relative;
	top:-111px;
	height:0px
}
.fondtripadvisor{
	height:80px;/*89px et -121px pour ce texte : Chambres d'hotes JOLIVET en Bourgogne*/
}
/************************************************************************/
/*						BOUTON ENTREZ SUR LE SITE						*/
/************************************************************************/

#pieds {
		/*positionnement*/
	position:fixed;
	bottom:0;
	width:auto;
	max-width:212px;
	left:50%;
	margin:0 0 0 190px;/**/
	padding:20px 0 0 0;
		/*fond*/
	background-image:url(../images/fondmotif18_centre.jpg);
	background-position:-30px 46.8%; /*-30px pour éviter de voir le dégradé sur le bord, 46.8% pour ajuster ce fond avec le grand fond*/
	background-repeat:repeat-x;
		/*bords arrondis*/
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}
#pieds a:visited, #pieds a:link {text-decoration:none}
.blink {text-decoration: blink}
@-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}
.css3-blink {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}			

.enterbuton{
	display:block;
	padding:10px 13px 15px 13px;
	margin:00px 10px 25px 10px;
	background-color:#444; /*ça c'est si j'ai oublié un navigateur!!!*/
		/*texte*/
	font-size:1.2em;
	color:#FFF5A4;
	text-align:center;
		/*ombre texte*/
	text-shadow:0px 1px 0px rgba(255,255,255,0.2); /*(décalage horizontal/décalage vertical/niveau de flou/couleur)*/
		/*bords arrondis*/
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
		/*dégradé en fond*/
	background: -webkit-gradient(linear, left top, left bottom, from(#8B3402), to(#260801));      
	background: -moz-linear-gradient(top, #8B3402, #260801); 	
	background: linear-gradient(#8B3402, #260801);
		/*ombre box*/
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5),
						0 -1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
					0 -1px 0 rgba(255,255,255,0.4);
	box-shadow: 0 0 5px rgba(0,0,0,0.5),
				0 -1px 0 rgba(255,255,255,0.4);
}

.enterbuton:hover, .enterbuton:focus {
    background:#555;
		/*dégradé en fond*/
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#333));      
	background: -moz-linear-gradient(top, #777, #333); 	
	background: linear-gradient(#777, #333);
}

.enterbuton:active{   /*ne fonctionne pas sous IE !!!*/
    color:#000;
    background:#444;
		/*dégradé en fond*/
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#2C2C2C));      
	background: -moz-linear-gradient(top, #555, #2C2C2C); 	
	background: linear-gradient(#555, #2C2C2C);
		/*ombre box*/
	-webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
	box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
}
/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES AUX RESEAUX SOCIAUX	***								*/
/************************************************************************************************************************/
.socialintro{
float:left;
width:50%;
height:60px;/*95px nécessaires si on ajoute le bouton "send" de facebook dessous*/
text-align:center;
margin-top:7px;
}
.socialintro2{
float:left;
width:50%;
height:20px;
text-align:center;
margin-top:10px;
margin-bottom:-8px
}







/***********************************************************************/
/*      Modifs pour menu déroulant HTML5       */
/*******************************************************************/

ul#listemenu {margin:0 auto 0 25px;overflow: hidden ;position:relative;padding:2px} 
ul#listemenu > li {display:block;float:left;margin:2px 1px;color:#fff;}
ul#listemenu li a.rond20 {position:relative;
				display:block;
				width: 112px ;
				height: 78px;
				color: #fff ;
				font: 1em "Trebuchet MS",Arial,sans-serif ;
				text-decoration: none ;
				background-image:url(../images/vignettes/sprite_intro_112.jpg); background-repeat:no-repeat;
				/*Bords Arrondis*/-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;
				}
			
.txtmenuintro {position:absolute;bottom:0;height:12px;margin:0;padding-bottom:5px;width:100%;text-align:center;background-image:url(../images/1pxviolet70.png);background-repeat:repeat; border-radius:0 0 20px 20px;-moz-border-radius:0 0 20px 20px;-webkit-border-radius:0 0 20px 20px;text-decoration:none;font-family:"Bradley Hand ITC",Arial,Verdana, Myranda,Helvetica,sans-serif;}
ul#listemenu li a.rond20:hover, ul#listemenu li a.rond20:focus {color:#000;font-weight:bolder;font-size:14px;}

ul#listemenu li a {text-decoration:none;}
ul#listemenu > li > a {
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.8),
						-1px -1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:2px 2px 2px rgba(0,0,0,0.8),
					-1px -1px 0 rgba(255,255,255,0.4);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.8),
				-1px -1px 0 rgba(255,255,255,0.4);
			}				
ul#listemenu li a:hover, ul#listemenu li a:focus, ul#listemenu li a:active {
text-decoration:underline}

.place {position:relative;left:900px;height:20px;
		 -webkit-transition: height 0.5s ease 0.3s;
			-moz-transition: height 0.5s ease 0.3s;
			 -ms-transition: height 0.5s ease 0.3s;
			  -o-transition: height 0.5s ease 0.3s;
				 transition: height 0.5s ease .3s;
	    }
#listemenu:hover .place {height:210px;}
#listemenu li:hover > ul.place {left:0/*background-color:#00F;*//*width:700%*/}
#listemenu li:hover > ul.place2 {margin-left:-114px}
#listemenu li:hover > ul.place3 {margin-left:-228px}
#listemenu li:hover > ul.place4 {margin-left:-342px}
#listemenu li:hover > ul.place5 {margin-left:-456px}
#listemenu li:hover > ul.place6 {margin-left:-570px}
#listemenu li:hover > ul.place7 {margin-left:-684px}

#listemenu:hover .place #brouille {left:0px}		
#brouille {
	/*background-color:#309;*/position:absolute;left:900px;width:757px;background-image:url(../images/1pxblanc65.png); background-repeat:repeat;padding:20px;color:#000;
	     -webkit-transition: left 0.5s ease .3s;
			-moz-transition: left 0.5s ease .3s;
			 -ms-transition: left 0.5s ease .3s;
			  -o-transition: left 0.5s ease .3s;
				 transition: left 0.5s ease .3s;
				/*ombre box*/
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.2), -1px -1px 0 rgba(255,255,255,0.6);
	}

#vig1 {background-position:-0px top}
#vig1:hover, #vig1:focus, #listemenu li:hover > #vig1 {background-position:-0px top;border:2px outset #695CB4;}/*le li:hover permet de conserver l'image en couleur lorsqu'on positionne sa souris sur le cadre "sous-menu" mais ça c'était pour la version avec affiche sépia par défaut...*/
#vig2 {background-position:-112px top}
#vig2:hover, #vig2:focus, #listemenu li:hover > #vig2 {background-position:-112px top;border:2px outset #695CB4;}
#vig3 {background-position:-224px top}
#vig3:hover, #vig3:focus, #listemenu li:hover > #vig3 {background-position:-224px top;border:2px outset #695CB4;}
#vig4 {background-position:-336px top}
#vig4:hover, #vig4:focus, #listemenu li:hover > #vig4 {background-position:-336px top;border:2px outset #695CB4;}
#vig5 {background-position:-448px top}
#vig5:hover, #vig5:focus, #listemenu li:hover > #vig5 {background-position:-448px top;border:2px outset #695CB4;}
#vig6 {background-position:-560px top}
#vig6:hover, #vig6:focus, #listemenu li:hover > #vig6 {background-position:-560px top;border:2px outset #695CB4;}
#vig7 {background-position:-672px top}
#vig7:hover, #vig7:focus, #listemenu li:hover > #vig7 {background-position:-672px top;border:2px outset #695CB4;}

#listemenu li:hover {margin:-2px -1px}

#tri {position:relative;left:900px;height:9px/*; background-color:#0F0*/;background-image:url(../images/vignettes/selectbar.png);background-repeat:repeat-x;margin:0 15px;z-index:-1}
#listemenu li:hover > #tri {left:0;}

#sm1,#sm2,#sm3,#sm4,#sm5,#sm6,#sm7 {position:relative;float:right;width:200px;height:150px;background-image:url(../images/vignettes/sprite_intro_sous-menu.jpg); background-repeat:no-repeat;margin-left:15px}
#sm1 {background-image:url(../images/vignettes/sprite_intro_sous-menu-1.png)}
#sm2 {background-position:-200px top}
#sm3 {background-position:-400px top;width:226px}
#sm4 {background-position:-626px top;width:224px}
#sm5 {background-position:-850px top;width:344px}
#sm6 {background-position:-1194px top;width:224px}
#sm7 {background-position:-1418px top;width:224px}

#brouille hr {
 	clear:none;
	visibility:visible;
	height:auto;
	margin-top: -2px;
	margin-bottom:10px;
	border-color:#D8D8D8; 
	border-style: solid; 
}

/***********************************************************************/
/*      Modifs pour traduction       */
/*******************************************************************/
#google_translate_element {left:50%;margin-left:-395px}