* {
	margin : 0px;
	padding : 0px;
	font-size : 12px;
	font-family : arial, sans-serif;
}



body {
	background-image:url('../images/header.png');
	background-repeat:repeat-x;
}

#page {
	margin : auto;
	width : 1000px;

}

#header {
	width : 1000px;
	height : 200px;	
	position : relative;
}

#liens {
	float : right;
	margin-top : 20px;
	list-style-type : none;
	color : #000;
	
	
}

#liens li {
	float : right;
	margin-left : 10px;
}

#liens a {
	color : #000;
}

#menuhaut {
	clear : both;
position : absolute;
	z-index : 3;
	right : 0;
	top : 50px;
	
}

#menuhaut p {
	
	width : 150px;
	height : 30px;
	background-color: rgba(255, 255, 255, 1.0);
	
	border-radius : 10px;
	overflow : hidden;
	padding : 5px 10px 10px 10px;
	text-align : justify;
	box-shadow: 1px 1px 12px #555;
}

#menuhaut p:hover{
	transition-property: width, height, background-color;  
	transition-duration: 0.5s;
	height : 530px;
	width : 500px;
	background-color: rgba(255, 255, 255, 1.0);	
	
}

#menuhaut p strong {
	float : left;
	margin-bottom : 5px;
	margin-top : -5px;
	margin-right : -5px;
	display : block;
}

#menuhaut p a {
	margin-left : 5px;
	text-decoration : none;
	color : #000;
}

#menuhaut img {
	float : right;
	border-radius : 10px;
	margin-bottom : 5px;
	margin-top : -5px;
	margin-right : -5px;
	/*margin-right : 5px;*/
}

#menuhaut span img {
	float : left;
	border-radius : 10px;
	width : 20%;
	margin : 10px 5px 0px 0px;
	/*margin-right : 5px;*/
}

#menuhaut span img:hover {
	box-shadow: 1px 1px 7px #111;
}

.container01 {
	height : 500px;
	list-style-type : none;
	position : relative;
}

.urbana {
	height : 520px;
}

.rustica {
	height : 470px;
}

.container01 p {
	width : 830px;
	color : #fff;
	position : absolute;
	top : 450px;
	padding-left : 67px;
	text-shadow: 1px 1px 12px #000;
}

.container01 li {
	position : absolute;
	width : 20px;
	height : 20px;
	
}

.container01 li a{
	background-image:url('../images/point.png');
	background-repeat : no-repeat;
	background-position : top;
	display : block;
	width :20px;
	height : 20px;
	text-indent : -10000px;
}

#info{
	background-image:url('../images/point2.png');
	background-repeat : no-repeat;
	background-position : top;
	display : block;
	width :50px;
	height : 50px;
	text-indent : -10000px;
}

.container01 li a:hover{
	background-image:url('../images/point.png');
	background-repeat : no-repeat;
	background-position : bottom;

}

#menubas{
	width : 1000px;
	height : 100px;
	padding-left : 50px;
}





/*-- survol --*/
	
.point {
	max-height:100px;
	height:auto;
	max-width:150px;
	width:auto;
	margin-top:15px;
}
	
li.img {
	height:100px;
}

.survol, .survol1, .survol2, .survol3 {
	display:none;
}

li:hover .survol, li:hover .survol1, li:hover .survol2, li:hover .survol3 {
	display:inline;
}

.survol, .survol1, .survol2, .survol3 {
	position:absolute;
	background:#fcfcfc;
	padding:5px;
	border:1px solid #D8D8D8;
	border-radius: 5px;
	z-index:1;
}

.survol  img, .survol1  img, .survol2  img, .survol3  img {
	height:auto;
	width:auto;
	max-height:350px;
	max-width:500px;
}

.survol .legende, .survol1 .legende, .survol2 .legende, .survol3 .legende {
	font-size:12px;
	color:#000;
}

.survol {
	top:-1px;
	left:50px;
}

.survol1 {
	top:-1px;
	right:50px;
}

.survol2 {
	top:-200px;
	left:50px;
}

.survol3 {
	top:-200px;
	right:50px;
}


	
/*-------- fin -----------*/


/*-------- container01 -----------*/
/*-------- Homepage -----------*/
.parse_urbana {
	left : 700px;
	top : 110px;
}

.parse_rustica {
	left : 500px;
	top : 270px;
}

.ferme {
	left : 730px;
	top : -5px;
}

.environnement {
	left : 950px;
	top : 40px;
}

.tombes {
	left : 635px;
	top : 20px;
}

/*-------- parse rustica -----------*/

.parse_urbana2 {
	left : 170px;
	top : 20px;
}

.bat1 {
	left : -60px;
	top : 240px;
}

.bat2 {
	left : 1020px;
	top : 130px;
}

/*-------- parse urbana -----------*/


.parse_rustica2 {
	left : -70px;
	top : 420px;
}

.porte{
	left : 145px;
	top : 215px;
}

.gdbat {
	left : 585px;
	top : 70px;
}


/*-------- Menu Bas -----------*/

.menu_btn {
	float : left;
	width : 210px;
	height : 100px;
	margin-right : 20px;
	list-style-type : none;
	text-indent : -10000px;
	background-position : top center;
}

.menu_btn:hover {
	background-position : bottom center;
	background-repeat : no-repeat;
}

.menu_btn a{
	display : block;
	width : 210px;
	height : 100px;
}

.presentation {
	background-image :url(../images/presentation_btn.png);
}

.ensavoirplus {
	background-image :url('../images/en-savoir_btn.png');
}

.video3d {
	background-image :url('../images/video3d_btn.png');
}

.documentaire {
	background-image :url('../images/docu_btn.png');
}

/*-------- fin -----------*/
#footer {
	margin-top : 10px;
	height : 20px;
	list-style-type : none;
	color : #fff;
	margin-bottom : 20px;
}

#footer li {
	float : right;
	margin-left : 10px;
}

#footer a {
	color : #fff;
}

/*-------- pop up -----------*/

.div_popup {
	margin-left : 100px;
	padding : 10px;
	width : 800px;
	height : 510px;
	position : absolute;
	background-color: rgba(255, 255, 255, 1);	
	box-shadow: 1px 1px 80px #000;
	top : 135px;
	z-index : 2;
	border-radius : 30px;
}

.div_popup .x {
	display : block;
	float : right;
	margin-top : 2px;
	width : 30px;
	height : 30px;
	background-image:url('../images/btn_x.png');
	text-indent : -10000px;
	background-position : top center;
}

.div_popup .x:hover {
	background-position : bottom center;
}

.div_popup .gauche {	
	float : left;
	margin-right : 10px;
	width : 270px;
	padding-top : 28px;
	height : 500px;
}

.div_popup img {	
	margin-top : 2px;
	width : 270px;
	/*border-radius : 30px 0 0 0;
	box-shadow: 0px 0px 2px #000;*/
}

.div_popup span img {	
	margin-top : 5px;
	border-radius : 0;
	width : 24%;
	box-shadow: 0px 0px 0px #000;
}

.div_popup  img:hover {	
	box-shadow: 1px 1px 7px #111;
}

.div_popup .droite {	
	padding : 0 10px 10px 10px;
	text-align : justify;
}

.div_popup .droite h2 {	
	margin-bottom : 10px;
	font-size : 14px;
}