@import url(http://fonts.googleapis.com/css?family=Stalemate);


body, h1, h2, h3, ul, p, img, table, li{
	margin:0;
	padding:0;
	
} 

body{
	
	font-family:arial, helvetica, sans-serif;
	background:black;
	
}

.clear{
	clear:both;
}

#wrapper{
	width:960px;
	margin:20px auto 0 auto;
}

#avertissement{
	width: 500px;
	background:white;
	height: 300px;
	padding:10px;
	position:absolute;
	top:80px;
	left: 300px; 
	z-index:1000;		/*indispensable pour mettre au dessus de tout le site, rien ne passera dessus */	
	text-align:center;
}

#masqueur{
	float:right;
	display:none;
	font-size:0.7em;
	color:black;	
}

#header{
	width:960px;
	margin: 0 auto 0 auto;
	border-radius:4px;
	background: url(images/bg_header.jpg);
}

.logo{
	float:left;
	width:250px;
	margin: 10px 0 0 10px;
}

.slogan{
	float:left;
	width:680px;
	padding: 30px 0 0 20px;	
}

.slogan p{
	font-family: 'Stalemate', cursive;
	font-size:2.5em;
	padding: 0 10px 0 60px;
	float:left;
}

.nav{
	width:510px;
	padding:0 0 0 450px;
}

.nav li{
	display:inline;
	list-style-type:none;
	
}

.nav a{
	float:left;
	display:block;
	width: 80px;
	text-decoration:none;
	font-family: 'Stalemate', cursive;
	font-size:1.7em;
	color:black;
	text-align:center;
}

#content{
	width:640px;
	margin:0 auto 0 auto;
	padding: 20px 0 0 0;
	float:left;
	/*background:red;*/
}

#diaporamaContainer{
	width:600px;
	margin:0 auto 0 auto;
	height:400px;
	overflow: hidden; /*pr cacher parties de photos hors cardres */
	position:relative; /*pour le placement des titres dessus */
}

#diaporamaContainer h2{
	position:absolute; /*pr mettre titre sur la photo */
	top:10px;
	left:20px;
	color:white;
	font-family: 'Stalemate', cursive;
	font-weight:400; /*pr enlever le gras */
	font-size:2.5em;	
}

#miniatures{
	width:640px;
	height:133px;
	margin:20px 0 0 10px;
}

#miniatures li{
	display:inline;
	list-style-type:none;
}

#miniatures a{
	float:left;
	width: 100px;
	height: 74px;
	margin: 0 0 0 20px;
	overflow: hidden; /*pr cacher la partie des photos non necessaires hors cardre */
}

#zonePages{ /* pour les pages 1/2/3/4/5.html  */
	width:600px;
	background: url(images/bg_zonepages3.jpg);
	height:480px;
	border-radius:4px;
	padding: 10px;
}

#nom, #prenom, #email, #message{ /* pr la page 5.html celle du formulaire */
	margin:10px 0 0 10px;
}

#sidebar{
	width:320px;
	float:left;
	background: url(images/plage_nu.jpg) 0px 0px no-repeat;
	margin: 20px 0 0 0;
	border-radius:4px;
	padding: 20px 0 0 0;
	height: 500px;	/* pr abaisser la side bar au niveau des petites vignettes */	
}

#nav_sidebar{
	width:320px;
	height:50px;
	margin: 0 auto 0 auto;
}

#nav_sidebar li{
	display:inline;
	list-style-type:none;	
}

#nav_sidebar a{
	float:left;
	display:block;
	width:72px;
	height:45px; /* 50-5px de padding */
	padding:5px 0 0 0;
	margin: 0 0 0 6px;
	background:#e1efef;
	box-shadow: #687578 1px 1px 2px;
	border-radius:4px;
	text-decoration:none;
	text-align:center;
	color:black;
}

#qui, #certif, #ou, #budget{
	width:278px;
	padding: 0 10px 0 10px;
	margin: 20px auto 0 auto;
}

#boutonCalculer{
	float:right;	
	background:#e1efef;
}

#carte{
	width:250px;
	height:250px;	
	margin: 10px auto 10px auto;
}

#footer{
	width:960px;
	margin:0 auto 0 auto;
	padding: 20px 0 10px 0;
	text-align:center;
	border-top: solid 1px grey;
	color:grey;
}

#footer p{
	font-size: 0.7em;	
}