@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700italic,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
html, body{
	width:100%; height:100%; margin:0; padding:0;
	background:#000;
}
body{
	background:#000;
	font-family:Open Sans, sans-serif; font-size:9pt; color:#fff;
	background:url(../images/D55A0301blur.jpg) center top no-repeat; background-size:cover;
}
#intro{
	width:100%; height:100%; margin:0; padding:0;
}
.clear{
	clear:both;
}
.boite{
	position:relative;
	display:block; width:50%; min-width:980px; height:100%; margin:0 auto; padding:0;
	transition:width 2s ease;
}
.boite:hover{
	width:100%;
}
.accueil{
	display:inline-block; float:left;
	width:20%; height:100%; margin:0; padding:0;
	background:#000 center top no-repeat; background-size:cover;
	transition:width 2s ease;
	z-index:1;
}
.boite:hover .accueil{
	width:10%;
}
.boite:hover .accueil:hover{
	width:60%;
}
#logo{
	position:absolute; left:0; top:300px;
	width:100%; height:auto;
	text-align:center;
	z-index:2;
}
h1{
	margin:0; padding:10px 0;
	color:#fff; font-family:Gentium Book Basic, serif; font-size:40pt; font-weight:400; text-transform:uppercase; text-shadow:0 0 10px #000;
}
h2{
	color:#333; font-weight:400;
	font-size:44pt; margin:0 0 15px 0; padding:0 0 15px 0; border-bottom:1px solid #333;
}
h3{
	color:#333; font-weight:400;
	font-size:22pt; margin:0; padding:0;
}
h4{
	color:#333;
	font-size:14pt; text-transform:uppercase; margin:0; padding:0;
}
h5{
	color:#333; font-weight:400;
	font-size:12pt; margin:0; padding:0;
}
p{
	margin:10px 0; padding:0;
	font-family:Open Sans, sans-serif; font-size:9pt;
}
#logo p{
	width:280px; margin:0 auto; padding:10px 0;
	border-top:1px solid #fff;
	color:#fff; text-transform:uppercase; font-weight:300; text-shadow:0 0 10px #000;
}
#langue{
	margin:0; padding:0;
}
#langue fieldset{
	margin:0; padding:0; border:0;
}
#langue fieldset input[type=submit]{
	padding:3px 12px;
}

.centrer{
	display:block; width:980px; height:auto; margin:0 auto; padding:0;
}
#funtanamarina{
	float:right; font-size:18pt; margin-left:10px; padding-left:10px; border-left:1px solid #fff;
}
#meteo{
	float:right; max-width:115px;
	text-align:center;
	margin:0; padding:10px 0 0 0;
}
#barreblanche{
	display:block; width:100%; margin:0; padding:10px 0;
	background:#f0f0f0;
	color:#000; font-size:8pt;
}
#coordonnees{
	display:block; float:left;
}
.infos{
	display:inline-block;
	margin-right:10px;
}
.infos img{
	display:block; float:left;
}
.infos span{
	display:block; float:left;
	margin:1px 0 0 5px;
}
#barreblanche #badges{
	display:block; float:right;
}
#barreblanche #badges img{
	cursor:pointer;
}

#contenu{
	display:block; width:100%; height:auto; margin:0; padding:80px 0;
}
#enseigne{
	display:block; float:left;
	margin:0; padding:0;
}
#menu{
	display:block; float:right;
	margin:15px 0 0 0; padding:0;
	list-style-type:none;
}
#menu li{
	display:inline-block;
}
#menu li a, #menu li a:link, #menu li a:visited{
	padding:10px 20px;
	color:#fff; font-size:11pt; text-decoration:none; text-transform:uppercase;
}
#menu li a:hover, #menu li a:active, #menu li a:focus{
	border-bottom:2px solid #fff; border-top:2px solid #fff;
}
#menu li a#pageencours{
	border-bottom:2px solid #fff;
}
#conteneur{
	display:block; margin:0 auto; padding:20px 0 45px 0; height:auto; width:100%;
	background:#fff;
}
#leftcol{
	display:block; float:left; width:633px; height:auto; margin:0 20px 0 0; padding:0;
}
#rightcol{
	display:block; float:right; width:307px; height:auto; margin:0 0 0 20px 0; padding:0;
}
#conteneur p, #conteneur ul, #conteneur table{
	color:#333;
}
#menuchambres{
	list-style-image:url(../images/puce.png);
	margin:0; padding:0 0 0 40px; width:267px;
}
#menuchambres span{
	color:#666; text-transform:uppercase;
}
#menuchambres li{
	width:237px; height:auto;
	margin:0; padding:15px;
	text-decoration:none;
}
#menuchambres li:nth-child(even){
	background:#f0f0f0;
}
#menuchambres li:nth-child(odd){
	background:#fff;
}
#menuchambres li:hover, #menuchambres li:focus, #menuchambres li:active{
	background:#ccc;
	cursor:pointer;
}

.chambres{
	width:940px; height:auto; margin:0; padding:20px;
	background:#f0f0f0;
}
.descchambres{
	width:620px; display:block; float:right;
	margin:0; padding:0;
}
#tarifs{
	text-align:center;
}
#tarifs th{
	background:#333; color:#fff;
}
#envoyer{
	margin:0; padding:0;
}
#envoyer fieldset{
	width:45%; float:left; display:inline-block;
	margin:0; padding:0;
	border:none;
}
#envoyer fieldset p input[type=text], #envoyer fieldset p textarea, #envoyer fieldset p select, #envoyer fieldset p input[type=number]{
	width:90%; height:auto; margin:0; padding:7px; border:1px solid #999; border-bottom-color:#ccc; border-left-color:#ccc;
	font-family:Open Sans, sans-serif;
}
.gallery{
	cursor:pointer;
}
#basdepage{
	margin:40px 0 0 0; padding:10px 0 0 0;
	border-top:1px solid #999;
	color:#999; font-size:8pt; text-align:center;
}
#basdepage a, #basdepage a:link, #basdepage a:visited{
	color:#999; text-decoration:none;
}
#basdepage a:hover, #basdepage a:active, #basdepage a:focus{
	text-decoration:underline;
}

#promos{
	background:#A60002;
	padding:15px 0;
	text-align:center;
}
#promos h3{
	color:#fff;
}
#promos p{
	margin:0;
}
#promos p a{
	color:#FFED00;
}
@media (max-width:980px){
	.accueil{
		display:none;
	}
	#logo{
		position:relative; left:0; top:0; clear:both; margin:0 auto; padding:50px 0 0 0;
	}
	#logo p{
		width:100%;
	}
	.boite{
		width:100% !important; min-width:100% !important;
	}
	.centrer{
		width:100%;
	}
	#meteo{
		display:none; height:0; margin:0; padding:0;
	}
	#enseigne{
		float:none;
		text-align:center;
		margin:0; padding:0;
	}	
	#funtanamarina{
		float:none; font-size:4em; margin:5px 0 -50px 0; padding:0; border:none;
	}
	#menu{
		float:none;
		margin:0; padding:0;
		list-style-type:none;
	}
	h2{
		text-align:center;
	}
	#menu li{
		display:block; text-align:center; margin:5px 0;
	}
	#menu li a{
		font-size:2em !important;
	}
	#pageencours{
		border:none !important; background:#000; color:#fff;
	}
	#coordonnees, #badges{
		display:block; width:100%;
		float:none; text-align:center;
	}
	#leftcol{
		float:none;
		width:100%; margin:0; padding:0;
	}
	#rightcol{
		display:none;
	}
	#video{
		display:none;
	}
	#ilerousse{
		width:100% !important; height:auto !important; 
	}
	.chambres{
		width:98%; height:auto; margin:0; padding:10px 1%;
		background:#f0f0f0;
	}
	.descchambres{
		width:auto; display:block; float:none;
		margin:0; padding:0;
	}
	#phototarif{
		text-align:center;
	}
	#phototarif img{
		width:45%; height:auto; margin:5px 2%;
	}
	#envoyer fieldset{
		width:98%; float:none; padding:1%; margin:0 auto;
	}
	
}