/*	border:1px solid LightSlateGrey;  */
/* background:#74959d; */ 

/* RESET */
body { 	margin:0; padding:0; 
		background: #e3e3e3 url('../img/fond_tour-eiffel.jpg') no-repeat; 
		}
div, header, footer, nav, section, article, aside, blockquote, details, figcaption, figure, hgroup { display:block; }
div, h1, h2, h3, h4, h5, h6, p, ul, li, a, span, figure, label, input, select, option, textarea { 
	font-family:Open Sans, Verdana, Tahoma, Arial, sans-serif; 
	margin:0; padding:0; 
	color:#333; 
	}
a img { border:0; } /* supprime borders defaut sous IE */
a { text-decoration:none; }
a:hover { text-decoration:underline; }
p a { font-weight:bold; color:#444; }


/****** STYLES GENERAUX ********/
.left { float:left; margin-right:15px; }
.right { float:right; margin-left:15px; margin-bottom:10px;}
.clear { clear:both; }

h1 { float:left;
	width:94%;
	padding:20px 0;
	font-weight:normal;
	font-size:28px;
	font-variant:small-caps;
	color:LightSlateGrey;
	}
h2 { width:100%; 
	margin:20px 0 10px 0;  /* padding:10px 0 20px 0; */
	font-size:20px;
	font-variant:small-caps;
	color:LightSlateGrey; 
	}
h3 {font-size:18px; color:#333; margin-top:20px; }
h4 {font-size:16px; color:#333; margin-top:20px; }

p { padding:10px 0; font-size:0.9em; }


blockquote { 	width:100%; 
			min-height:40px; /*margin:30px 20px 10px 20px;*/ 
			margin:20px 0;
			padding:15px 0;
			line-height:35px;
			text-align:center; 
			background: #333; 
			color:#ccc;
			}

a.titre { color:#74959d; } /* liens dans tags HX */

a.imprimer { float:right; 
			display:block; 
			padding:5px; 
			box-shadow:#999 3px 3px 10px; 
			font-size:13px; 
			}
a.imprimer img { float:left; }

a.button {	display:block; 
			width:100px; 
			height:35px; 
			line-height:35px; 
			text-align:center;
			border-radius:4px;
			color:#ccc;
			-webkit-transition: all .2s;
			-moz-transition: all .2s;
			-o-transition: all .2s;
			-ms-transition: all .2s;
			transition: all .2s;
			background:-webkit-gradient(linear, 0 0, 0 100%, from(#1f1f1f), to(#888888));
			background:-webkit-linear-gradient(#1f1f1f, #888888);
			background:-moz-linear-gradient(#1f1f1f, #888888);
			background:-o-linear-gradient(#1f1f1f, #888888);
			background:#1f1f1f; /* IE */
			background:linear-gradient(#1f1f1f, #888888);
			}
			
a.button:hover {	text-decoration:none;
				color:#fff;
				font-size:bold;
				background:-webkit-gradient(linear, 0 0, 0 100%, from(#888888), to(#1f1f1f));
				background:-webkit-linear-gradient(#888888, #1f1f1f);
				background:-moz-linear-gradient(#888888, #1f1f1f);
				background:-o-linear-gradient(#888888, #1f1f1f);
				background:linear-gradient(#888888, #1f1f1f);
				}
					
.center { text-align:center; }
.bigger {font-size:2em;}
.important { font-size:12px; color:red; }
.haut { display:block; float:right; font-size:0.6em; }

.img_shadow { 	-webkit-box-shadow: 1px 1px 6px #666; 
				box-shadow: 3px 3px 10px #666; 
				}
.img_acces { display:block-inline; 
			width:130px; 
			height:150px;
			margin:10px 15px 15px 0;
			-webkit-box-shadow: 1px 1px 6px #666;
			box-shadow: 3px 3px 10px #666;
			}
		
.plan_acces { 	float:right;
				width:45%;
				margin:20px;
				/* box-shadow: #666 3px 3px 10px; */
				}				
				

/************** STRUCTURE ACCUEIL ****************/
#wrapper { /* CONTENEUR DE LA STRUCTURE DE PAGE */
			max-width: 1024px;
			margin:0 auto;
			background: #fff url('../img/fond_tour-eiffel.jpg') no-repeat left top;
			}

header { height:300px; } /* width 100% par défaut */
/* #banner { width:1024px; margin:0 auto; } */

/* BLOC 'CONTACT' (langue, search, coordonnees) */
#contact { 	float:left; 
			width:39.0625%;  /* width relative, MAQUETTE width:400px; */
			color:#555; 
			}

#langue, #coordonnees, #search_form { padding:10px 30px; }
#langue a:hover { background:#333; text-decoration:none; color:white; }
#langue span  { font-size:0.9em; }

#coordonnees { font-size:0.8em; }

#coordonnees span { line-height:25px; }
#coordonnees span.titre { display:block; height:15px; }

#search_form { margin-top:5px; }
#search_form input  { width:180px; padding:2px; }
#search_form .submit {   width:30px;
						padding:2px; 
						background:#333; 
						color:#ccc; 
						}

/* BLOC 'LOGO' - CONTENANT */
#logo { 	float:left; width:19.53125%; /* MAQUETTE : width:200px; */
		/* position:relative; left:0px; /
		/* padding-top:15px; */
		} /* hauteur img logo 150px */

	
	
/* FORM 'RESA_VERIF' dans HEADER */
#resa_verif { 	float:right; 
				width:15.625%; /* MAQUETTE : width:160px; */
				padding:10px;
				margin-right:3%;
				background:#d2d2d2;
				opacity:0.9;
				}
#resa_verif span, 
#resa_verif label, 
#resa_verif input, 
#resa_verif select, 
#resa_verif span.titre { 
					display:block; 
					float:left;
					padding:0;
					margin-right:5px;
					margin-bottom:5px;
					font-size:0.8em; 
					color:#444; 
					}
#resa_verif span.titre { 	width:90%;
						margin-bottom:10px; 
						text-align:center;
						font-size:0.9em;
						}
#resa_verif label { width:70px; }
#resa_verif input  { width:75px; }
#resa_verif select { width:60px; }
#resa_verif .submit, 
#resa_verif .reset { float:right;
						padding:3px; 
						margin-top:5px;
						background:#333; 
						color:#ccc; 
						}
#resa_verif .submit  {  width:80px; }
#resa_verif .reset {  width:60px; }

#resa_verif a { display:block; margin:10px 0 10px 0; font-size:0.8em; background:#fff;}
#resa_verif a:hover { text-decoration:none; box-shadow:1px 2px 2px; }

a#panier { 	display:block;
			float:left;
			width:90%;
			padding:5px 5px 5px 10px;
			font-size:0.8em;
			}		
#panier img { float:right; }	

#resa_lien  .bouton_lien  { width:100%; 
						padding:10px; font-weight:bold; 
						background:#444; color:#fff; 
						}


/********************** BLOC NAV - MENU PRINCIPAL ***********************/
nav { 	width:100%;
		margin:10px auto;
		z-index:1000; /* toujours au-dessus */
		}
nav ul { list-style-type:none; } 
nav ul li { float:left;  /* display:block; optionnel - LI déjà 'block' */ }
nav li ul { /* Hors survol, masquage sous-menus */
			display:none; /* Masque LI des sous-menu ET l'espace occupé */
			width:135px;  /* taille fixe des LI des sous-menus */
			position:absolute;
			z-index:1000; /* doit être supérieur à celui des DIAPOS */
			}
nav li:hover ul { display:block; } /* Au survol, affichage des sous-menus */


/********* MENU PRINCIPAL - STYLE des LIENS *********/
nav a { display: inline-block;
		height:25px;
		width:106px; /* taille fixe des LI sans sous-menus */
		margin: 0 5px 0 0;
		padding:2px 4px;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #414141; 
		text-align:center;
		font-size: 1em; 
		color: WhiteSmoke;
		background:#333;
		/* AUSSI : display: block; float: left; 
		/* Ajouter le 'FLOAT' aligne les liens HORIZONTALEMENT  */
	
		-moz-transition: all 200ms ease-in; /* Firefox */
		-webkit-transition: all 200ms ease-in; /* Webkit */
		-o-transition: all 0.2s ease-in; /* Opera */
		transition: all 0.2s ease-in; /* 300ms */ /* OK pour CHROME */
	
		font-variant: small-caps; /* CSS 3 */
		/* text-transform: lowercase ; ou  uppercase */
		}
		
nav a:hover { text-decoration:none; color:#333; background:whitesmoke; }
nav a.accueil { width:106px; font-weight:bold; }
nav a.wider { width:152px; }



/************ CONTENT de l'INDEX (marges adaptées pour DIAPO) ************/
#index_content { width:100%;  /* largeur 1024px pour DIAPORAMA */
				margin: 0 auto; /* aucune marge à GAUCHE et DROITE */
				padding:2% 0 5% 0; /* PADDING relatif */
				background:#fff; 
				opacity:0.9; 
				}
.h1_index { padding:20px 3%; }
	
#index_descriptifs     { width:100%; }
#index_descriptifs h2 { 	margin-top:40px; 
						margin-left:30px; 
						}
									
#index_descriptifs li { height:250px; /* HAUTEUR blocs descriptifs INDEX */
					font-size:0.9em; 
					padding:15px; 
					background:#ededed;
					overflow:hidden;
					}
#index_descriptifs  li.parag { list-style:none; 
							font-size:1em; 
							overflow:visible;
							min-height:250px;
							}
#index_descriptifs  p { padding-top:0; }
							
#index_descriptifs  img { margin-top:10px; }

#index_descriptifs li a { /* liens classiques inline */
						color:#fff; 
						padding:0 5px; 
						background:#444; 
						font-variant:small-caps;
						}
						
li.index_bloc_descr_left { 	float:left;
							width:437px;  /* WIDTH fixe par bloc LI */
							margin:15px 0px 15px 30px; /* 30px MARGIN gauche */		
							}
li.index_bloc_descr_right { 	float:left;
							width:437px;  /* WIDTH fixe par bloc LI */
							margin:15px 30px 15px 30px; /* 30px MARGIN droite */		
							}						

						
/********************* CONTENT des autres pages *******************/
#content { 	width:94%;  /* +3% padding de chaque coté */
			padding:2% 3% 5% 3%; /* PADDING relatif */
			background:#fff; 
			opacity:0.9; 
			}
		
/* .intro_descriptifs { padding:15px; background:#ededed; } */
/* bloc 'INTRO' des DESCRIPTIFS' HOTEL, CHAMBRES, RESTO, SPA */

/* BLOC intro, haut de page GAUCHE */
.intro_left 	{ 	float:left; width:48%; padding-right:2%; } 
.intro_left ul { 	list-style-type:square; list-style-position:inside; }

/* BLOC intro, haut de page DROITE */
.intro_right { float:left; width:50%; overflow:hidden; } 

.sitemap  { width:60%; margin:0 auto; }
.sitemap  ul { margin:10px 15px 20px 100px; }


/********************* DIV index et autres pages *******************/
#blocs_descriptifs li { float:left;
						width:437px;  /* WIDTH fixe par bloc LI */
						height:250px; /* HAUTEUR blocs descriptifs INDEX */
						padding:15px;
						background:#ededed;
						overflow:hidden;
						font-size:0.9em; 						
						}

/* UNIQUEMENT blocs CHAMBRES */
#blocs_descriptifs_chambres li { float:left;
								width:437px;  /* WIDTH fixe par bloc LI */
								background:#ededed;
								overflow:hidden;
								font-size:0.9em; 						
								}	
li.bloc_descr_g { padding:15px; margin:15px 28px 15px 0; } /* margin GAUCHE fournie par CONTENT */	
li.bloc_descr_d { padding:0 15px 10px 15px; margin:15px 0 15px 0; } /* margin DROITE fournie par CONTENT */
				
li.bloc_descr_g p, li.bloc_descr_d p  { font-size:1em; }
li.bloc_descr_g img, li.bloc_descr_d img  { width:100%; }

.chambres_prestations { float:left;  }
.chambres_services, .chambres_tarifs { float:left; margin-left:30px; }



/******************** Formulaire 'CONTACT' *******************/
#contact_form  { overflow:hidden; }

#contact_form #col_1 { float:left; width:45%; padding-right:3%}
#contact_form #col_2 { float:right; width:50%; }

#contact_form label, 
#contact_form input,
#contact_form select { 	 
					display:inline-block; 
					margin-bottom:10px; 
					height:25px; 
					font-size:13px;
					}

#contact_form label { width:30%; }
#contact_form input { width:50%; }
#contact_form input.court { width:80px; }

#contact_form textarea { height:100px; font-size:13px; }
label.msg { margin-bottom:0px; }

#contact_form .submit,
#contact_form .reset { display:inline-block; 
							width:20%;
							min-width:80px;
							height:35px;
							margin-top:5%; 
							margin-bottom:5%; 
							padding:5px;
							background:#333; 
							color:#ccc;
							}
#contact_form .submit { margin-left:20%; margin-right:50px; }



/******************** Formulaire 'RESA' + 'AVIS' *******************/

#resa_form #col_1 { float:left; width:45%; margin-right:3%; }
#resa_form #col_2 { float:left; width:50%; }

#resa_form label, 
#resa_form input { display:inline-block; 
				margin-bottom:10px; 
				height:25px; 
				font-size:13px;
				}
				
#resa_form label { width:40%; }
#resa_form label.marginright { margin-left:20px; }

#resa_form input { width:50%; }
#resa_form input.date { width:19%; }
#resa_form select { width:20%; }
#resa_form input.court { width:80px; }
#resa_form input.radio { width:30px; height:15px; }



fieldset#sejour { margin-bottom:20px; }
fieldset#sejour label, 
fieldset#sejour input { width:80px; }

fieldset { width:90%; margin-bottom:25px; background:#ddd; }

fieldset legend { padding:7px; 
			margin-left:-20px;		
			margin-bottom:10px;		
			color:#ccc;
			background:#444;
			box-shadow:#666 3px 3px 3px;
			}

#resa_form textarea { width:95%; height:100px; font-size:13px; }

#resa_form .submit,
#resa_form .reset { display:inline-block; 
					width:20%;
					min-width:80px;
					height:35px;
					margin-bottom:10%;
					padding:5px;
					background:#333; 
					color:#ccc;
					}
#resa_form .submit { margin-left:25%; }
#resa_form .reset { margin-left:10%; }



/******************** Formulaire 'RECRUTEMENT' *******************/
#recrute_form  { overflow:hidden; }

#recrute_form #col_1 { float:left; width:45%; padding-right:3%}
#recrute_form #col_2 { float:right; width:50%; }

#recrute_form label, 
#recrute_form input { 	 
					display:inline-block; 
					margin-bottom:10px; 
					height:25px; 
					font-size:13px;
					}

#recrute_form label { width:40%; }
#recrute_form input { width:50%; }
#recrute_form input.court { width:80px; }

#recrute_form label.file { width:100%;
						margin-top:20px;
						}
#recrute_form input.file { width:100%;
						height:35px;
						}
					
#recrute_form textarea { height:100px; font-size:13px; }

#recrute_form .submit,
#recrute_form .reset { display:inline-block; 
							width:20%;
							min-width:80px;
							height:35px;
							margin-top:5%; 
							margin-bottom:5%; 
							padding:5px;
							background:#333; 
							color:#ccc;
							}
							
#recrute_form .submit { margin-left:20%; }
#recrute_form .reset { margin-left:10%; }



/************** PAGES 'AVIS' et 'ACTU - BLOG' (BREVES) ***************/
h3.avis_titre  { font-family:Times New Roman; font-style:italic; font-size:1.4em; }
p.avis  { font-style:italic; font-size:0.9em; text-align:justify; }
p.avis_date { font-weight:bold; }

.avis_gauche { float:left;
				width:45%;
				padding-right:2%;
				}
.avis_droite { float:left;
				width:45%;
				margin-left:2%;
				}
				
				

/* BLOC breves Parimis - colonne GAUCHE */
.breves_gauche { float:left;
				width:55%;
				padding-right:2%;
				}
.breves_droite { float:left;
				width:38%;
				margin-left:2%;
				}
				
.breve_g { position:relative;
			min-height:200px; /* à préciser pour effet 'dog-ear' */
			padding:10px 10px 10px 30px;
			margin-right:30px;
			margin-bottom:30px;
			border-top:2px solid gray;
			border-left:2px solid gray;
			border-bottom:2px solid gray;
			background-color:#eee;
			-webkit-box-shadow: 5px 5px 20px #444; 
			box-shadow:5px 5px 20px #444;
			}
.breve_g h3 { color:#555; }
.breve_g p { color:#555; text-align:justify; }
.breve_g a { color:#333; }

.breve_g:before{
    content:'';
    width:30px;
    position:absolute;
    top:-2px;
    right:-30px;
    bottom:28px;
    background-color:#eee;
    border-top:2px solid gray;
    border-right:2px solid gray;			
	box-shadow:3px 3px 15px #555;
}
.breve_g:after{
    content:'';
    right:-30px;
    bottom:-2px;
    position:absolute;
    border-bottom:30px solid transparent;
    border-left:30px solid #999;
}


/* BLOC breves générales - Colonne DROITE */
.breves_droite { float:left;
				width:38%;
				text-align:justify;
				margin-left:2%;
				}
.breves_droite h2 { margin-left:10px; }
				
.breve_d { padding:10px; }
.breve_d h4 { font-size:0.9em; margin-bottom:10px;}
.breve_d p { font-size:0.8em; }


/************* FOOTER ************/
footer   { 	width:100%; 
		padding:3% 0 1% 0; /* PADDING relatif */ 
		background:#333;
		}

#mentions { 	width:100%; margin-top:3%; }
#mentions p { text-align:right; 
			padding-right:3%; 
			color:whitesmoke; 
			}

/******** MENUS SECONDAIRES du FOOTER ********/
div.nav_sec { float:left;
			height:200px; border-right:1px solid whitesmoke;
			width:20%; /* WIDTH relative au FOOTER de 1024px */
			padding-right:1%;
			padding-left:3%;
			margin-bottom:40px; /* séparateur '#mentions' */
			}
div.nav_sec.last { border-right:none; }
	
div.nav_sec span { display:block; margin-bottom:10px; font-size:12px; color:#bbb; font-weight:bold; }
div.nav_sec li { list-style-type:none; padding-bottom:3px; font-size:12px; }

div.nav_sec a { 	color:#bbb; 
				letter-spacing:2px; 
				-webkit-transition: padding .2s;
				-moz-transition: padding .2s;
				-o-transition: padding .2s;
				-ms-transition: padding .2s;
				transition: padding .2s;
			}
div.nav_sec a:hover { text-decoration:none; 
					font-weight:bold; 
					padding-left:3px; 
					}

div#social { 	width:85%; 
			margin-top:10px; 
			padding:5px 5px 5px 10px; 
			background:#fff;
			color:#000;
			}
div#social span { display:block; }


#partage_form, 
#newsletter_form { 	margin-top:10px; 
					width:85%; 
					padding:3%; 
					background:white; 
					}
#newsletter_form a, #newsletter_form .input { color:#000; }

#newsletter_form .input, #partage_form .input  { width:72%; }
#newsletter_form .submit, #partage_form .submit { width:30px; /*22%*/ background:#333; color:#ccc; }