body{
	background-color:#437BB5;
	background-repeat: no-repeat;
	font-family: "Times New Roman", Times, serif;
	font-size: 11px;
	color: #FFFBF0;
	margin:0 auto;
	/* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	text-align:center;
	padding: 0;
}
.container{
	height: auto;
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(location-ile-reunion.jpg);
	background-repeat: no-repeat;
	margin-top: -11px;
    } 
	

.header{
	height:400px;
	width: 840px;
	text-align: center;
	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
	padding-bottom:15px;
	padding-right: 15px;
    } 

.header-1{
	width: 840px;
	color: #FFFFFF;
	height: auto;
	
}
.header-2{
	width: auto;
	font-size: 12px;
	text-align: left;
	height: auto;
	margin:0 auto;
	padding-top: 35px;
	padding-left: 18px;
	
}
.menu{
	height: auto;
	width: 25em;
	float: left;
	margin-left:30px;
	left: 10px;
	top: 360px;
	text-align:left;
	display: inline;
}
.menu1{
	height: auto;
	width: auto;
	float:right;
	padding-right: 25px;
	right: 10px;
	top: 360px;
	text-align: right;
}
.maincontent{
	width: auto;
	padding-bottom: 5px;
	margin: 5px;
	height: auto;
	margin-top: 50px;
	text-align: center;
	
}

.col{
	height:10em;
	width:28em;
	float:right;
	padding: 5px;
	margin : 30px 45px 5px 5px;
	text-align: justify;
}	
.column{
	height:auto;
	width:32em;
	float:right;
	padding: 5px;
	margin : 30px 8px 0 1px;
	text-align: justify;
}

.columndl{
	height:auto;
	width:32em;
	float:right;
	padding: 5px;
	margin : 40px 8px 0 1px;
	text-align: justify;
}		
.column1{
	height:auto;
	width:40em;
	float:left;
	padding: 5px;
	margin : 30px 2px 5px 5px;
	background-color: #3E78B7;
	color: #FFFFFF;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: outset;
	border-top-color: #538CBA;
	border-right-color: #538CBA;
	border-bottom-color: #538CBA;
	border-left-color: #538CBA;
	display: inline;
	text-align: left;
	
	}
	
	.col1{
	height:auto;
	width:40em;
	float:right;
	padding: 5px;
	margin : 10px 2px 5px 5px;
	background-color: #3E78B7;
	color: #FFFFFF;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: outset;
	border-top-color: #538CBA;
	border-right-color: #538CBA;
	border-bottom-color: #538CBA;
	border-left-color: #538CBA;
	display: inline;
	text-align: justify;
	
	}
.column21{
	height:auto;
	width:300px;
	float:right;
	margin-right:5px;
	text-align:center;
	padding-left: 10px;
	
	
}	
	
	.content {
	text-align: justify;
	margin-top: 1em;
	padding-top: 2em;
	height: auto;
	float: none;
	
    }
	.wrap {
	text-align: justify;
	margin-top: 1em;
	padding-top: 2em;
	height: auto;
	float: none;
	
    }
	
.wrapper {
	text-align: justify;
	margin-top: 1em;
	padding-top: 2em;
	height: 24em;
	float: none;
	
    }
.wrapper1{
	height: auto;
	width: 500px;
	float:right;
	padding-right: 25px;
	right: 10px;
	top: 360px;
	text-align: justify;
	overflow: hidden;
}

a {
	color:#ffffff;
	font-weight: bold;
	font-size: 14px;

}
a:hover{

	color: #626F80;
}


.p3{
	font-size:14px;
	margin-top:10px;
	text-decoration: underline;
	font-weight: bold;
	text-align: justify;
}

.more {margin:26px 0 0 0;}
.more li {
	font-size:1.56em;
	font-family:arial;
	padding:0 10px 0 10px;
	float:left;
	background-image: url(images/more2_bg.gif);
	background-repeat: no-repeat;
}
.more li a { color:#f2f6f9; line-height:1.1em; text-decoration:none; font-weight:bold;}
.more li a:hover {color:#d2d6d9;}
.more .first {background:none; padding:0 10px 0 10px;}
.more .last {padding:0 5px 0 5px;}

.more2 {
	color:#f7cb1d;

}
.maure {
	color:#f7cb1d;
	text-decoration: underline;
	font-size: 12px;

}

.mare {
	color:#f7cb1d;
	text-decoration: underline;
	font-size: 16px;
	text-align: center;
	margin-top: 50px;

}
h2{
	font-size: 10px;
	color: #FFFBF0;
}


h1{
	font-family: "Black Chancery";
	font-weight: bold;
	font-size: 36px;
	color: #FFFFFF;
	margin-bottom: 190px;
}

h3{
	color:#f7cb1d;
	text-decoration: underline;
	font-size: 16px;
	text-align: center;
	}
	
h4{
	font-size: 14px;
	color: #FFFFFF;
	margin-bottom: 45px;
	margin-top: 15px;
	}	
	
 .mn {
	width: 21em;
	float: left;
	display: inline;
	margin-top:1em;
	margin-bottom: 5px;
	text-align: justify;
	padding-left: 1em;
	margin-right: 25px;
    }
	
   .main {
	width: 35%;
	margin-bottom: 5px;
	margin-left:auto;
	text-align: justify;
	float: none;
	padding-right: 10px;
    }



.im{
	border:0px;
	float: left;
	margin-bottom:20px;
	margin-top: 20px;
	clear: both;
	margin-left: 20px;
	margin-right: 20px;
   
}
.imm{
	width:70%;
	top: -10px;
	z-index: 10;
}
.img{
	border:#ffffff solid 2px;
	margin-top:35px;    
}


.imag{
	border:#ffffff solid 2px;
	margin-top: 25px;
	margin-left: 25px;
}
.imgc{
	float:right;
	margin-bottom:45px;
	border:0;
	margin-top: 10px;
	margin-right: 30px;
}



.Tittle{
	font-family: "Times New Roman", Times, serif;
	font-size:16px;
	color:#FFFFFF;
	text-decoration: underline;
	font-weight: bold;
	
	
}
  .clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

/* lightbox */
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	height: inherit;
}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #FFFFFF;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#imageContainer{
	padding: 10px;
}

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{
	left: 0;
}
#hoverNav a{ }

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(images/gif); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 20%; float: left;}
#nextLink { right: 20%; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	display: block;
	
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; }	 	


#overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 100;
	width: 150%;
	height: 500px;
	
}

/* fin de lightbox */ 
 		
#footer{
	background-image: url(footer.jpg);
	width: 850px;
	text-align: center;
	height: 100px;
	margin: 0 auto;
}
#footer .indent {
	color:#FFFFFF;
	font-family:"Times New Roman", Times, serif;
	padding-top: 50px;
	padding-right: 0;
	padding-left: 29px;
	font-size: 9px;
	text-align:center;
}
#footer span {
	font-family:tahoma;
	color: #FFFFFF;
	text-align: center;
}
#footer a {
	color:#FFFFFF;
	font-size: 9px;
}