@charset "utf-8";
/* CSS Document */


body {
    font-family:Verdana, Geneva, sans-serif;
    position: relative;
	top:0px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	min-height: 100%;
}

html {
	background-color:#FFF; 
	font-family:Verdana, arial, Geneva, sans-serif;
    width: 100%;
    height: 100%;
	background-image:url(../img/html_img.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: -130px 220px;
}

#wrap {min-height: 100%;
    overflow:hidden;
}


body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}


/* -------- Liens --------  */

a {
	text-decoration: none;
	font-weight: normal;
	font-size:12px;
	color:rgb(0,122,175);
	text-decoration:none;
}

a:hover {
	color:#BA55D3;
	text-decoration:underline;
} 

.ahead {
	text-decoration: none;
	font-size:12px;
	color:#DDD;
	text-decoration:none;
    font-weight:bold;
}
.ahead:hover {
	color:#FFF;
	text-decoration:underline;
} 

.a11 {
	text-decoration: none;
	font-weight: normal;
	font-size:11px;
	color: #CCC;  /*rgb(0,122,175);*/
	text-decoration:none;
}

.a11:hover {
	color:#FFF; /* #BA55D3 */
	text-decoration:underline;
	font-size:11px;
} 

/* -------- Text --------  */

.txtleft {text-align:left;}
.txtcenter {text-align:center;}
/*.txt11 {font-size:0.688em;}
.txt12 {font-size:0.750em;}
.txt14 {font-size:0.875em;}
.txt16 {font-size:1.000em;}
.txt18 {font-size:1.125em;}
.txt24 {font-size:1.5em;}*/
.txt11 {font-size:11px;}
.txt12 {font-size:12px;}
.txt14 {font-size:14px;}
.txt16 {font-size:16px;}
.txt18 {font-size:18px;}
.txt24 {font-size:24px;}
.txtnorm {font-weight:normal;}
.txtbold {font-weight:bold;}
.txtblue {color:rgb(0,122,175);}
.txtblack {color:rgb(0,0,0);}
.txtgray {color:#FAEBFB;}
.txtwhite {color:#FFFFFF;}
.txthead {color:#ba55d3;}
.txtmaroon {color:#E0C082}
.txtp5 {padding-left:5px;} 
.txtfsitalic {font-style:italic;}  
.txtfsnorm {font-style:normal;}   

.txtAlef{ font-family:'Alef',Helvetica, Arial, sans-serif;}
.txtSalsa{ font-family:'Salsa',Helvetica, Arial, sans-serif;}
.txtCutive{ font-family:'Cutive',Helvetica, Arial, sans-serif;}

/* -------- Head 1 --------  */
#head1 {
    position: fixed;	
    height: 50px;
	width : 100%;
	top:0px;
    z-index:10;
	background-color:#BA0069; 
	margin: 0 auto;
	color:#FFF;
	text-align:center;
	vertical-align:central;
}

#cadre_head1 {
    position: relative;
	top:14px; 
	height:32px; /**/
	z-index:5; 
	margin:0 auto; 
	text-align:center; 
	width:860px;
	font-family: 'Alef',Helvetica, Arial, sans-serif;
	font-weight: bold;
}

/*
ul#menu_header1{ 
	width: 830px; 
	height: 30px;
	padding:0px;
	list-style-type : none; 
	margin: 0 auto;
    background-color : #f4f9fd;
}
 
ul#menu_header1 li {
	padding: 0 0.5em;  
	line-height:30px;
	height : 30px;
}
 
ul#menu_header1 li.gauche {float : left; font-weight:bold;}
ul#menu_header1 li.droite {float : right;width:120px}
*/

/* -------- Head 2 --------  */

#head2 {
    position: fixed;	
    height: 100px;
	width : 100%;
	top:50px;
	left:0px;
    z-index:10;
	background-color:#FFF;
	margin: 0 auto;
	color:#FFF;
	text-align:center; 
	background-image:url(../img/1.png);
	background-repeat:repeat-x;
	z-index:200;
}

#cadre_head2 {
    position: relative;
	top:0px; 
	height:100px; 
	z-index:5; 
	margin:0 auto; 
	text-align:center; 
	width:860px;
}

/*
#img_head2_left {
	float:left;
	top: 0px;
	height: 100px;
	width: 100px;
}

#img_head2_middle {
	float:left;
	top: 0px;
	left: 0px;
	height: 100px;
	width: 660px;
	text-align:center;
	background-color:#C90;
}

#img_head2_right {
	float:right;
	top:-100px; 
	height:100px;
	width:100px;
}

#blason {
    position: relative;
    width:80px;	
	height:100px;
	background-image:url(../img/blason.png);
	background-repeat:no-repeat; 
	top:10px;
	left:400px;
	z-index:100;
}
*/	

/* -------- Menu Page --------  */

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	top:40px;
}

/* Menu */
.menu {	
	height: 40px;
	width: 700px;
	margin:0 auto;
	
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
	left:0px;
}

/* Links */

.menu li a {
	display: block;
	padding: 0 14px;
	line-height: 40px;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size: 14px;
    color: #000000;
	/* plus*/
   	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { 
     color: #FFF;
     background:#67457B ;/*#67457B  70327F   #BA0069;*/ 
}

/* Sub Menu */

.menu ul {
	clear:both;
	z-index:200;
	position: absolute;
	top: 38px;
	left: 0;/**/
	height:40px;
}

.menu li:hover > ul { opacity: 1; z-index:500; }

.menu ul li {
	position: relative;
	height: 0px;
	/****/
	white-space: nowrap;
	top:5px;
	color:#67457B;/*#70327F      #BA0069;*/
	overflow: hidden;
	padding: 0px;
	font-family: 'Alef',Helvetica, Arial, sans-serif;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
	/* plus*/
   	-webkit-border-radius: 0 0 0 0;
	-moz-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
}

.menu ul li a {
	width: 150px;
	padding: 30px 0 4px 40px;
	margin: 0;
	top:0;
	font-weight:normal;
	border: none;
	/* plus*/
   	-webkit-border-radius: 0 0 0 0;
	-moz-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
}

.menu ul li:last-child a { border: none;z-index:500; }

/* Fin de menu */

#head3 {
    position: fixed;	
    height: 60px;
	width : 100%;
	top:150px;
	left:0px;
    z-index:10;
	background-color:#FFFFFF;/**/
	clear:both;
	margin: 0 auto;
}

/* Ligne */
#head3_1 {
    position: fixed;	
    height:2px; 
	width :100%;
	top:180px; 
	left:0px;
    z-index:9;
	background-color:#3E7C98;
	/*clear:both;*/
	margin: 0 auto;
	color:#FFF;
	text-align:center;
	vertical-align:central;
}

#head3_2 {
    width:860px;
	position: relative;
	top:0px;
	margin: 0 auto;
	z-index: 6;
	clear:both;
	height: 50px;

}

#head3_label {
    width:180px;
	position: relative;
	top:-14px;/*-4*/
	height:21px;
	z-index: 14;
	background-color:#F7F9FF;
	font: 14px 'Salsa',Helvetica, Arial, sans-serif;
	color:#414A50; 
	vertical-align:middle;
	padding-top:4px;
	text-align:center;
	border-width:2px ;
	border-style:solid;
	border-color:#3E7C98;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;

}

#head3_message {
    width:476px;
	position: relative;
	left:280px;
	top:-44px;/*-4*/
	height:24px;
	z-index: 15;
	background-color:#FFF; /*F9E7FE*/
	font: 18px 'Alef', Helvetica, Arial, sans-serif;
	color:#3E7C98;  /*#ba55d3;*/  
    text-align:center;
	vertical-align:middle;
	font-style:italic;
	clear:both;
}


section {
	float: left;
	width : 600px;
	background-color:#FFF;/**/
    border:0;
    margin:0;
    padding:0;
    padding-left:10px;
	top:0px;
	overflow:hidden;
	text-align:top;
    font-family:Verdana, Geneva, sans-serif;
	
}

section2 {
    float: left;
    width : 600px;
    background-color:#FFF;/**/
    border:0;
    margin:0;
    padding:0;
	padding-left:10px;
	top:0px;
    overflow:hidden;
    text-align:top;
}

section3 {
    float: left;
    width : 600px;
    background-color:#FFF;/**/
    border:0;
    margin:0;
    padding:0;
	padding-left:10px;
	top:0px;
    overflow:hidden;
    text-align:top;
}

section4 {
    float: left;
    width : 590px;
    background-color:#FFF;/**/
    border:0;
    margin:0;
    padding:0;
	padding-left:10px;
	top:0px;
    overflow:hidden;
    text-align:top;
	clear:both;
}

aside {
	float: right;
	width : 248px;
	border:0;
    margin:0;
    padding:0;
	font-family:Verdana, Geneva, sans-serif;
}

footer {
	position: relative;
	background-color:#67457B; /*5D4E66   292929 */ 
	margin:0;
    padding:0;
	left:0;
	width:100%;
	/* reste en bas de page  */
	margin-bottom:-200px;
	height:50px;
	text-align:center;
	vertical-align:central;
	font-size:11px;
	line-height: 4.4em;
	color:#FFF;
	clear:both;
}

#cadre_footer {
   	position: relative;
	margin:0 auto;
    padding:0;
	height:50px;
	width:860px;
}

#circle {
    position: relative;	
	height: 40px;
	width: 40px;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	border-radius: 35px;
	background-color:#67457B;
	top:5px;
	float:right;
	left:-20px;
	background-image:url(../img/up0.png);
	background-repeat: no-repeat;
	background-position:center center;
	z-index:150;
} 

#circle:hover {
    position: relative;	
	height: 40px;
	width: 40px;
	top:5px;
	float:right;
	left:-20px;	
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	border-radius: 35px;
	background-color:#B17BD2;
	background-image:url(../img/up.png);
	background-repeat: no-repeat;
} 

#_page {
	width:860px;
	position: relative;
	top:230px;/*215*/
	margin: 0 auto;
	z-index: 5;
	background-color: #FFF;/**/
	height: auto; 
	border: 5px solid #FFF;
 
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;	

	box-shadow: 0px 0px 10px 4px rgba(226, 226, 226, 0.75);
	-moz-box-shadow: 0px 0px 10px 4px rgba(226, 226, 226, 0.75);
	-webkit-box-shadow: 0px 0px 10px 4px rgba(226, 226, 226, 0.75);
}

.divtext {
	position: relative;
	left: 20px;
	top: 15px;
	width: 540px;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border-width: 1px;
	border-style: solid;
	background-color:#C6F2FE;
	border-color: #1CBDE9 ;
}	

.divtext:hover {
	position: relative;
	left:20px; 
	top:15px;
	width:540px; 
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-border-radius:10px 10px 10px 10px;
    -moz-border-radius:10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
	border-width:1px;
	border-style:solid;
	border-color:#FFF;
	background-color:#FFF;
}	

.divtextgray {
	position: relative;
	margin: 0 auto;
	top: 15px;
	width: 540px;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;/**/
	background-color:#F8F8F8;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}	

.divtextonly {
	position: relative;
	left: 0px;
	top: 5px;
	width: 540px;
	padding-left: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
}	

.divtextacc {
	position: relative;
	left: 5px;
	top: 5px;
	width: 260px;
	height:150px;
	 background-image:url(../img/pap.png);
	background-repeat: repeat-x;
}


#titre_carre {
	/*position: relative;
	top: 5px;
	left: 0px;
	width: 410px;
	height: 15px;
	background-image: url(../img/carre10.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	text-align:left;
	padding-left: 20px;
	font-weight: bold;
	/*line-height: 1.6em;
	font-family:Verdana, helvetica arial, Geneva, sans-serif;
	font-size:12px;
	color:#000;*/
	position: relative;
	top: 5px;
	left: 0px;
	width: 554px;
	height: 30px;
	text-align:left;
	padding-left: 15px;
	font-weight: bold;
	line-height: 2.4em;/**/
	font-family:Verdana, helvetica arial, Geneva, sans-serif;
	font-size:12px;
	color:#000;
	background-color:#C1E79C /*67457B   0093D0    504F4F    E85F1C #*/;
	
	background-image:-moz-linear-gradient(right, white, #C1E79C);
    background-image:-webkit-linear-gradient(right, white, #C1E79C);
    background-image:-o-linear-gradient(right, white, #C1E79C);
    background-image:linear-gradient(right, white, #C1E79C);

	-webkit-border-radius:10px 10px 10px 10px;
    -moz-border-radius:10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;

}

#rubrique {
	position: relative;
	top: 10px;
	left:10px;
	width: 530px;
	height: 20px;
	text-align:left;
    color:rgb(0,122,175);
	font-weight:normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; line-height:1.6em; 
	background-image:url(../img/pdf.png);
	background-repeat:no-repeat;
	background-position:left center; 
	padding-left:20px;
	border-left:10px;
}

#rubriquesite {
	position: relative;
	top: 10px;
	left:0px;
	width: 530px;
	height: 20px;
	text-align:left;
    color:rgb(0,122,175);
	font-weight:normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; line-height:1.6em; 
	background-image:url(../img/site.png);
	background-repeat:no-repeat;
	background-position:left center; 
	padding-left:20px;
	border-left:0px;
}

#rubriquenul {
	position: relative;
	top: 10px;
	left:0px;
	width: 530px;
	height: 20px;
	text-align:left;
    color:rgb(0,122,175);
	font-weight:normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; line-height:1.6em; 
}

 /* -------- Contact --------  */

#tableC {
	font-weight:normal; 
	border:none;
    border-collapse: collapse;
    border-spacing: 0; 
    font-size:11px;
    width:450px;
	text-align:left;
	top:200px;
	background-color:#F8F8F8  ;
	-webkit-border-radius:20px 20px 20px 20px;
    -moz-border-radius:20px 20px 20px 20px;
    border-radius:20px 20px 20px 20px;
	box-shadow: 6px 6px 12px #888; 
	-moz-box-shadow:6px 6px 12px #888; 
	-webkit-box-shadow: 6px 6px 12px #888; 
}

#tableC th {
	color:rgb(0,122,175);
	font-size:11px;
	padding-left:0px;
	text-align:center;
	color:#FFF;
	background-color:#BA0069;
	-webkit-border-radius:20px 20px 0 0;
    -moz-border-radius:20px 20px 0 0;
    border-radius:20px 20px 0 0; 
} 

#tableC td {
	padding-left:0px;
	-webkit-border-radius:20px 20px 0 0;
    -moz-border-radius:20px 20px 0 0;
    border-radius:20px 20px 0 0;
} 

      /* Images */

.divmap {
    left:0px; 
    top:2px; 
    width: 565px; 
    height: 260px;
    border-width:1px ;
    border-style:solid;
    border-color:#CAC9C9;
		-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC
}

#header_photo_accueil {
	position: relative;
	top: 7px;
	left: -4px;
	width: 600px;
	height: 450px;
	background-image:url(../img/3.png);
	margin:auto;
	box-shadow: 5px 5px 5px #888888;/**/
	-webkit-border-radius: 10px 0 0 0;
	-moz-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;	
}

#img_infos {
	position:relative;
	background-image:url(../img/infos.jpg); 
	background-repeat:no-repeat; 
	height:311px;width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_marees {
	position:relative;
	background:url(../img/marees.jpg); 
	background-repeat:no-repeat; 
	height:311px;width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_loisirs {
	position:relative;
	background-image:url(../img/loisirs.jpg); 
	background-repeat:no-repeat; 
	height:311px;width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_lecture {
	position:relative;
	background-image:url(../img/lecture.jpg); 
	background-repeat:no-repeat; 
	height:311px;
	width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_liens {
	position:relative;
	background-image:url(../img/liens.jpg); 
	background-repeat:no-repeat; 
	height:311px;
	width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_mail {
	position:relative;
	background-image:url(../img/mail.jpg); 
	background-repeat:no-repeat; 
	height:311px;
	width:233px;
    margin:0 auto;
	top:10px;
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

.divpubrightinfos {
	position:relative; 
	width:233px; 
	height:221px; 
	top:40px; 
	background-image:url(../img/partir.png);  
	background-repeat :no-repeat; 
    margin:0 auto;
	background-color:#FFFFFF;
	border: 1px solid #DDD;
	
	webkit-border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
    border-radius:0px 10px  0px 0px;
	
	-webkit-box-shadow: 0 8px 6px -6px #CCC;
	-moz-box-shadow: 0 8px 6px -6px #CCC;
	box-shadow: 0 8px 6px -6px #CCC;
}

#img_404 {
	position:relative;
	background-image:url(../img/404.jpg); 
	background-repeat:no-repeat; 
	height:250px;
	width:233px;
    margin:0 auto;
	top:10px;
}

#img_403 {
	position:relative;
	background-image:url(../img/403.jpg); 
	background-repeat:no-repeat; 
	height:250px;
	width:233px;
    margin:0 auto;
	top:10px;
}

#_logo {
	position:relative;
	left:34px;
	top:0px;
	width:175px;
	height:86px;
	background-image:url(../img/logo.png);
	z-index:600;
}

a.info {
   position:relative;
   color: black;
   text-decoration: none;
}

a.info span {
   display: none; /* On masque l'infobulle. */
}

a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
  /* cursor: help;  On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   height:24px;
   position: absolute;
   white-space: nowrap;  /*On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
   top: -55px; /* On positionne notre infobulle. */
   left: 90px;
   /*background: white;*/
   color:#000000;
   padding: 0px;
   font-size:11px;
   font-style:italic;
}

span[data-tip]{
 /* border-bottom: 2px dotted #888;
  cursor: help;*/
}

circle[data-tip]{}

[data-tip]{
  display: inline-block;
  position: relative;
}

[data-tip]:hover:before{
  content: attr(data-tip);
  position: absolute;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  background-color: rgba(103,69, 123, 0.9);
  left: -10px;
  top: -38px;
  font-size: 14px;
  border-radius: 3px;
  white-space: nowrap;/**/
  color: #FFF;
  font-size: 11px;
}

[data-tip]:hover:after {
  content: "";
  position: absolute;
  border-top: 8px solid rgba(103,69, 123, 0.9);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 0;
  top: -10px;
}