/* CSS Loisirs et Nature - Les Amarres */
/************CSS RESET**********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* tags HTML5 qui se comportent comme des blocs */ 
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure,figcaption, footer, header, menu, nav, section, video { display: block; margin:0; padding:0; } 
/* tags de type en ligne */ 
abbr, eventsource, mark, meter, time, progress, output, bb { display:inline; }
/************************/
body {
	/*max-width: 1280px;
	min-width: 780px;
	margin-left: auto;
	margin-right: auto;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	text-align:center;
	color:#434446;
}
/*************typo************/
a:link, a:visited {
	color: #000; 
	font-weight: normal;
	text-decoration: none;
}
a.active_menu {
  color: #000;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font-weight: normal;
	font-size: 2em;
}
h2 {
	font-weight: normal;
	font-size: 1.5em;
}
h3 {
	font-weight: normal;
	font-size:1em;
	text-align: left;
}
.clr {
	clear: both;
	font-size:0;
}
.gras{
font-weight:bold;
}
/**************************SPLASH**********/
#conteneur_titre_acc{
max-width:1024px;
margin:0 auto;
position:relative;
}
#splash h2{
text-transform:uppercase;
font-weight:normal;
cursor:pointer;
font-size:1.1em;
}
#splash #menu_splash ul{
position:absolute;
bottom:70px;
right:100px;
text-align:left;
z-index:11;
}
#splash #menu_splash li{
margin:2px 0;
width:340px;
padding:4px 0 3px 10px;
color:#FFF;
}
#splash .conteneur_menu{
display:none;
padding:5px 10px 5px 0;
line-height:1.2em;
}
#splash .conteneur_menu img{
padding-bottom:5px;
}
#splash .conteneur_menu p{
text-align:justify;
}
#splash .conteneur_menu a{
background:url(../img_new/fleche_splash.png) bottom left no-repeat;
display:block;
padding:5px 5px 0 15px;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
margin-left:180px;
font-weight:bold;
font-size:0.9em;
}
#splash .conteneur_menu a:hover{
color:#325B79;
font-weight:bold;
}
#splash .amarres{
background-color:#4FA0D6;
}
#splash .adultes{
background-color:#ABCB71;
}
#splash .classes{
background-color:#D32C63;
}
#splash .centre{
background-color:#ED7A2E;
}
#titre_splash h1.titre{
z-index:8;
background-image:url(../img_new/amarres3.png);
background-position: 0 0;
background-repeat:no-repeat;
position:absolute;
top:280px;
left:570px;
width:307px;
height:63px;
z-index:10;
}
#titre_splash h1.titre em{
display:none;
}
#stitre_splash p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #365889;
font-size:1.5em;
line-height:1.3em;
text-align:left;
font-style:italic;
position:absolute;
top:350px;
left:570px;
z-index:9;
text-shadow:0 0 3px #FFF;
}
/****************************************************************************/

body.inter{
}

img.bg_splash {
 /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
		z-index:-1;
} 

#ruban{
position:absolute;
top:0;
left:0;
z-index:7;
width:848px;
height:198px;
background:url(../img_new/ruban2.png) 0 0 no-repeat;
}
#conteneur_main{
width:970px;
text-align:left;
margin:0 auto;
}
#conteneur_main h1.titre{
z-index:8;
background-image:url(../img_new/amarres_inter.png);
background-position: 30px 30px;
background-repeat:no-repeat;
position:relative;
padding: 30px 0 0 25px;
width:945px;
height:50px;
}
#conteneur_main h1.titre em{
display:none;
}
#conteneur_main h1.titre span{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size:0.7em;
font-style:italic;
text-align:right;
position:relative;
float:right;
padding-top:40px;
}
#page{
margin:20px 0 0 0;
background-color:#FFF;
position:relative;
padding:10px;
line-height:1.2em;
-moz-box-shadow: 0px 0px 10px 0px #9b9b9b;
-webkit-box-shadow: 0px 0px 10px 0px #9b9b9b;
-o-box-shadow: 0px 0px 10px 0px #9b9b9b;
box-shadow: 0px 0px 10px 0px #9b9b9b;
}
header{
width:970px;
height:220px;
position:relative;
top:10px;
left:0;
z-index:6;
-moz-box-shadow: 0px 3px 5px 0px #9b9b9b;
-webkit-box-shadow: 0px 3px 5px 0px #9b9b9b;
-o-box-shadow: 0px 3px 5px 0px #9b9b9b;
box-shadow: 0px 3px 5px 0px #9b9b9b;
}
nav.menu_principal{
position:absolute;
bottom:0;
padding: 3px 0 5px;
width:100%;
left:0;
z-index:10;
}
header.centre_css {
background:url(../img_new/header_centre.png) 0 0 no-repeat;
/*background-color:#ED7A2E;*/
}
header.centre_css nav.menu_principal{
background-color:#ED7A2E;
}
header li{
display:inline;
font-size: 1em;
color:#FFF;
padding:0 10px;
}
nav.menu_principal ul{
position:relative;
z-index:15;
}
nav.menu_principal li a:link, nav li a:visited {
color:#FFF;
text-decoration:none;
background:url(../img_new/puce_menu.gif) 0 5px no-repeat;
padding:0 10px 0 12px;
}
nav.menu_principal li a:hover{
text-decoration:none;
color:#3A3A3A;
background-color:#FFF;
padding:10px 10px 10px 12px;
background-image:none;
-moz-box-shadow: 3px 3px 4px 0px #656565;
-webkit-box-shadow: 3px 3px 4px 0px #656565;
-o-box-shadow: 3px 3px 4px 0px #656565;
box-shadow: 3px 3px 4px 0px #656565;
}
header.adultes_css{
background:url(../img_new/header_adulte.jpg) 0 0 no-repeat;
background-color:#ABCB71;
}

header.global_css{
background:url(../img_new/header_st_gilles.jpg) 0 0 no-repeat;
background-color:#4FA0D6;
}
header.classes_css {
background:url(../img_new/header_classes.jpg) 0 0 no-repeat;
background-color:#D32C63;
}
header.contact_css {
background:url(../img_new/header_05.jpg) 0 0 no-repeat;
background-color:#4FA0D6;
}
#menu_g {
	float: left;
	width: 180px;
	font-size: 0.9em;
	margin:0 20px 20px 0;
	background-color: #F5F5F5;
}

#menu_g  h1{
color:#000;
font-size:1.5em;
font-weight:bold;
padding:0 10px 10px 5px;
}
/***********sous-menu de presentation********/
#menu_g.smenu_presentation{
border-top:1px dashed #4FA0D6;
border-bottom:1px dashed #4FA0D6;
padding:10px 0;
}
#menu_g.smenu_presentation a{
color:#4FA0D6;
font-weight:bold;
padding:2px 5px;
display:block;
margin:0;
background-image:none;
}
#menu_g.smenu_presentation a:hover{
background-color:#4FA0D6;
color:#FFF;
text-decoration:none;
background-image:none;
}
#menu_g.smenu_presentation a.active{
background-color:#4FA0D6;
color:#FFF;
}
/***********sous menu de classes*********/
nav.smenu{
width:180px;
float:left;
margin-right:20px;
}
#menu_g.smenu_classes{
border-top:1px dashed #D32C63;
border-bottom:1px dashed #D32C63;
padding:10px 0;
}
#menu_g.smenu_classes a{
color:#D32C63;
font-weight:bold;
padding:2px 5px;
display:block;
background-image:none;
}
#menu_g.smenu_classes a:hover{
background-color:#D32C63;
color:#FFF;
text-decoration:none;
background-image:none;
}
#menu_g.smenu_classes a.active{
background-color:#D32C63;
color:#FFF;
}
#contenu_d {

}
#page p{
padding:0 0 10px 0;
}
#page p.chapeau{
color: #000;
font-weight:bold;
}
/*****************contenu page ************/
.decalage{
margin-left:200px;
}
.decalage_verti{
margin-bottom:100px;
}
section.presentation h1{
color:#4FA0D6;
text-transform:uppercase;
padding:10px 20px 20px 20px;
line-height:1em;
}
section.presentation h2{
color:#4FA0D6;
padding:10px 20px 10px 0px;
line-height:1em;
}
section.presentation blockquote{
margin-left:50px;
}
section.partners a{
display:block;
padding-right:10px;
float:left;
}
section.classes h2{
color:#D32C63;
padding:0px 20px 10px 0px;
line-height:1em;
cursor:pointer;
}
section.classes h2 span{
display:block;
float:left;
padding:0 10px 0 0;
font-size:0.9em;
}
section.classes h2 span.ouvert{
}
section.classes h2:hover{
color:#868686;
}
#page section.classes p.duree{
color:#D32C63;
padding:0 0 3px 0;
}
section.classes h1{
color:#D32C63;
text-transform:uppercase;
padding:10px 20px 20px 20px;
line-height:1em;
}
section.adultes h1{
color:#ABCB71;
text-transform:uppercase;
padding:10px 20px 10px 0px;
line-height:1em;
}
section.adultes h2{
color:#ABCB71;
padding:0 20px 10px 0px;
line-height:1em;
}
section.acces{
margin-left:10px;
}
section.acces h1{
color:#4FA0D6;
text-transform:uppercase;
padding:10px 20px 10px 0px;
line-height:1em;
}
section.acces h2{
color:#4FA0D6;
padding:10px 20px 10px 0px;
line-height:1em;
}
section.vacances{
margin-left:10px;
}
section.vacances h1{
color:#ED7A2E;
text-transform:uppercase;
padding:10px 20px 20px 0px;
line-height:1em;
}
section.vacances h2{
color:#ED7A2E;
padding:10px 20px 20px 0px;
line-height:1em;
}
section.contact h1{
color:#4FA0D6;
text-transform:uppercase;
padding:10px 20px 20px 0px;
line-height:1em;
}
section.contact h2{
color:#4FA0D6;
padding:0 20px 10px 0px;
line-height:1em;
}
section.contact_devis h1{
color:#FFF;
text-transform:uppercase;
padding:10px 20px 20px 0px;
line-height:1em;
}
section.contact_devis h2{
color:#FFF;
padding:20px 20px 10px 0px;
line-height:1em;
text-transform:uppercase;
}
section.presentation ul,
section.vacances ul{
list-style:disc;
padding-bottom:10px;
}
section.presentation ul li,
section.vacances ul li{
list-style: inside;
}
section.classes ul,
section.classes div.col_d ul{
list-style: inside;
padding-bottom:10px;
list-style-type:disc;
}
section.classes ul li,
section.classes div.col_d ul li{
list-style: inside;
}
div.col_centre{
margin:0 0 0 200px;
}
.rouge_classes{
color:#D32C63;
}
div.col_d{
width:38%;
float:right;
background-color:#F5F5F5;
padding:10px;
}
div.col_d h2:hover{
color:#D32C63;
}
div.col_d_45{
width:45%;
float:right;
}
div.col_g{
width:35%;
float:left;
padding-right:20px;
}
div.col_g_45{
width:45%;
float:left;
margin-left:60px;
}
.clr {
	clear: both;
	font-size:0;
}
footer{
clear:both;
margin-top:15px;
}
#footer_contact{
	position:relative;
	background-color: rgb(255, 255, 255);
    background-color: rgba(255,255, 255, 0.8);
	-moz-box-shadow: 0px 0px 10px 0px #656565;
	-webkit-box-shadow: 0px 0px 10px 0px #656565;
	-o-box-shadow: 0px 0px 10px 0px #656565;
	box-shadow: 0px 0px 10px 0px #656565;
}
#ancre{
position:absolute; 
right:0;
bottom:-25px;
z-index:10;
width:68px;
height:68px;
background:url(../img_new/ancre.png) 0 0 no-repeat;
}
#footer_contact p.centre_css{
background: url(../img_new/footer_centre.png) 0 0 no-repeat;
}
#footer_contact p.adultes_css{
background: url(../img_new/footer_adulte.png) 0 0 no-repeat;
}
#footer_contact p.classes_css{
background: url(../img_new/footer_classes.png) 0 0 no-repeat;
}
#footer_contact p.global_css{
background: url(../img_new/footer_global.png) 0 0 no-repeat;
}
#footer_contact p.agrement{
	color: #FFF;
	font-size: 1em;
	width:482px;
	float:left;
	padding:8px 10px  8px 8px;
	line-height:1.5em;
	font-weight:bold;
	  
}
#footer_contact p.adresse{
	color: #77767B;
	font-size: 1em;
	font-weight:bold;
	float:right;
	padding:8px 40px  8px 8px;
	line-height:1.5em;
}
#footer_contact p.tel{
	color: #77767B;
	font-size: 1.8em;
	font-weight:bold;
	text-align:center;
	padding:5px;
	clear:both;
}
footer p.credits{
padding:5px;
text-align:center;
background-color: rgb(45, 50, 88);
background-color: rgba(45,50, 88, 0.2);
color:#FFF;
font-size: 0.8em;
}
footer p.credits a:link, footer p.credits a:visited{
color:#FFF;
text-decoration :none;
}
footer p.credits a:hover{
text-decoration:underline;
}

/****************formulaire*************/
.contact_devis{
width:910px;
background-color:#4FA0D6;
padding:20px;
color:#FFF;
}
address {
color:#000;
padding:0 0 0 0;
}
#page section.contact address p{
line-height:1.4em;
}
address img{
float:right;
}
#page section.contact address p.titre_asso{
padding:0 0 10px 0;
color:#4FA0D6;
font-weight:bold;
font-size:1.3em;
}
fieldset{
border:none;
background-color:transparent;
}
fieldset label{
color:#000;
font-weight:bold; 
padding:0 0 10px 0;
display:block;
width:250px;
}
#page section.contact_devis p{
padding:0 0 5px 0;
}
#page section.contact_devis h3{
font-size:1.3em;
padding:3px 0;
font-weight:bold;
}
.contact_devis fieldset label{
padding:0 0 3px 0;
font-weight:normal;
}
.contact_devis fieldset input,
.contact_devis fieldset textarea{
border:none;
}
input:focus,
textarea:focus, 
select:focus{
background-color:#F5F5F5;
}
input.submit{
border:none;
background-color:#4FA0D6;
color:#FFF;
text-transform:uppercase;
letter-spacing:0.1em;
width:100px;
cursor: pointer;
}
input.submit2{
border:none;
background-color:#FFF;
color:#4FA0D6;
text-transform:uppercase;
letter-spacing:0.1em;
width:150px;
cursor: pointer;
font-weight:bold;
margin-right:25px;
    -moz-box-shadow: 1px 1px 7px 0px #656565;
	-webkit-box-shadow: 1px 1px 7px 0px #656565;
	-o-box-shadow: 1px 1px 7px 0px #656565;
	box-shadow: 1px 1px 7px 0px #656565;
}
input:hover.submit2{
	 -moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}
.annonce{
	color: White;
	font-weight: bold;
	background-color: #A3C91D;	
}
textarea {
	width:250px;
	height: 50px; 
	color: #000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	padding:2px;
}
select {
	width:250px;
	border:none; 
	padding:2px;
}
input {
	color: #000;
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
	width:250px;
	font-size:1em;
	padding:2px;
	
}
input.cases {
	width: 249px;
}
input.court {
	width: 50px;
	margin-right: 199px;
}
input.verif {
	width: 150px;
	border: ridge;
	cursor: pointer;
}
div.c3 {
	text-align:center;
	margin-top:2em;
}
#page p.rouge{
color:#FF0000;
background-color:#FFF;
padding:5px 5px 2px 5px;
text-align:center;
}
.etoile{
color:#FF0000;
font-size:1.5em;
vertical-align: baseline;
}
/*.c2 {
	color: #f00; 
	background-color: inherit; 
	text-align: center; 
	font-weight: bold; 
	display: inline;
}
.c1 {
	color: #f00; 
	background-color: inherit; 
	font-weight: bold;
}*/
/********************diaporama**********/
section.presentation .bx-captions{
text-align:center;
color:#4fa0d6;
font-size:0.9em;
font-weight:bold;
}
section.classes .bx-captions{
text-align:center;
color:#D32C63;
font-size:0.9em;
font-weight:bold;
}
section.adultes .bx-captions{
text-align:center;
color:#ABCB71;
font-size:0.9em;
font-weight:bold;
}
#conteneur_diapo_centre{
float:right;
width:400px;
background-color:#FFF;
margin: 0 0 10px 10px;
}

#conteneur_diapo{
float:right;
width:350px;
background-color:#FFF;
margin: 0 0 10px 10px;
clear:right;
}
#conteneur_diapo .bx-prev,
#conteneur_diapo_centre .bx-prev {
    background: url("../img_new/icon_arrow_left.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    left: 0;
    position: absolute;
    text-indent: -999999px;
    top: 78px;
    width: 25px;
	z-index:100;
}
#conteneur_diapo .bx-next,
#conteneur_diapo_centre .bx-next {
    background: url("../img_new/icon_arrow_right.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    position: absolute;
    right: 0;
    text-indent: -999999px;
    top: 78px;
    width: 25px;
	z-index:101;
}
#conteneur_diapo_centre .bx-prev,
#conteneur_diapo_centre .bx-next  {
top:125px;
}
#conteneur_diapo ul{
list-style:none;
}
/*********************plan acces****************/
.gmap{
float:right;
width:400px;
background-color:#FFF;
margin: 0 0 0 20px;
}
.col_css{
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
-moz-column-gap:30px;
-webkit-column-gap:30px;
-o-column-gap:30px;
column-gap:30px;
}
/***********STYLE POUR MOBILE***************************/
/******************************************************/

@media screen and (max-width: 640px) {
/*************image de fond etiree*********/
img.bg_splash {
                left: 50%;
                margin-left: -320px;   /* 50% */
        }

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, #conteneur_main, #conteneur_main h1.titre, header, .contact_devis {
   width: auto;
   margin: auto;
   padding: auto;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* césure forcée */
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
.col_d_45, .col_g_45, #footer_contact p.adresse, #footer_contact p.agrement,.gmap, .col_centre{
   float: none !important;
   width: auto !important;
   margin: auto !important;
 }
 div.col_d, div.col_g{
 float: none !important;
  width: auto !important;
}

 /* masquer les éléments superflus */
#conteneur_main h1.titre span {
   display: none !important;
 }

 /* Un message personnalisé */
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #FFF;
   text-align: center;
   font-style: italic;
 }
 /*page accueil*/
 #titre_splash h1.titre{
left:20%;
top:15px;
width:307px;
height:63px;
}
#stitre_splash p{
left:20%;
top:85px;
}
#splash #menu_splash ul{
right:20%;
}
/*menu inter*/

nav.menu_principal ul{
width:100%;
padding:0;
}
nav.menu_principal li{
font-size:0.9em;
padding:0;
}
nav.menu_principal li a:link, nav li a:visited{
background-image:none;
padding:0 4px;
}
nav.menu_principal li a:hover{
padding:5px 4px;
}
section.classes h1{
padding:10px 20px 20px 0;
}
section.presentation h1{
padding: 0;
}
div.c3{
text-align:left;
}
.decalage{
margin-left:0;
}
.decalage_verti{
margin-bottom:0;
}

#menu_g{
margin: 0 20px 10px 0;
}
}