body {background-color:#f5f5f6;}
body a:focus {outline:0;} 


#page {width:960px; margin-left: auto; margin-right: auto; top: 0px; display: block;}
#fondpage {position: absolute; width:960px; top: 0px; display: block; background-color: #ffffff;}

#tete {position: absolute; margin-left: 20px; top: 12px; width: 250px; height: 20px; display: block; background-color: #ffffff; font-size: 10px; font-family: Arial, Gisha, Calibri; 
padding-left: 0px; padding-top: 3px; vertical-align: top;}
#slogan {position: absolute; margin-left: 380px; top: 3px; width:310px; height: 35px;}
#slogantexte {position: absolute; margin-left: 160px; top: 0px; width:540px; font-family: 'Herr Von Muellerhoff', cursive; font-size: 32px;}
#slogantexte a {text-decoration: none; color: #8C8C8C;}
#wood {position: absolute; margin-left: 704px; top: 0px; width:180px; height: 40px; background-image:url(structure/wood.jpg); background-repeat: no-repeat;}

#slideshow {position:absolute; top:40px; height:500px;}
#slideshow img {position:absolute; margin-left:0px; z-index:8; opacity:0.0;}
#slideshow img.active { z-index:10; opacity:1.0;}
#slideshow img.last-active {z-index:9;}

#pagetexte {position: absolute; width:960px; top: 585px; margin-left: 0px; padding-left: 0px; display: block; background-color: #ffffff;}

#casetitre {margin-left: 20px; width: 700px; display: block; padding-left: 0px; font-family: Verdana; font-size: 10pt;}
h1{font-family: Verdana; font-size: 14pt; color:black;}

#boitephoto {margin-left:20px; width: 720px; padding-right: 0px; display: block; font-family: Verdana; font-size: 10pt; background-color: #ffffff;}
#boitephoto a {text-decoration: none;}
#boitephoto a:hover {text-decoration: none; color: #e98c00;}
.photoarticle a {float: left; margin-right:20px;  margin-bottom:20px; width: 220px; height: 27px; display: block; padding-left: 0px;  padding-top: 138px; 
font-family: Verdana; font-size: 13pt; text-decoration: none; text-align:center; color: #ffffff;}
.photoarticle a:hover {color: #e98c00;}
.videoarticle a {float: left; margin-right:20px;  margin-bottom:20px; width: 220px; height: 25px; display: block; padding-left: 0px;  padding-top: 100px; font-family: Verdana; font-size: 10pt; 
text-decoration: none; text-align:center; color: #ffffff;}
.videoarticle a:hover {color: #e98c00;}

.texte {margin-left: 20px; width: 700px; display: block; padding-left: 0px; font-family: Verdana; font-size: 10pt;}
.texte a {text-decoration: none; color: #e98c00;}
.texte a:hover {text-decoration: none; color: #965b00;}
.textepc {margin-left: 20px; width: 700px; display: block; padding-left: 0px; font-family: Verdana; font-size: 10pt;}
.textepc a {text-decoration: none; color: #e98c00;}
.textepc a:hover {text-decoration: none; color: #965b00;}
h2{font-family: Verdana; font-size: 12pt; color:black;}
h3{font-family: Verdana; font-size: 11pt; color:#666666;}
h4{font-family: Verdana; font-size: 10pt; color:#666666;}
.citation{color: #7774a8;}
.rouge{color: #f42121;}
.note {font-size: 8pt;}

.boitevideo {margin-left:20px; width: 700px; height: 394px; display: block;}
.boitevideo525 {margin-left:20px; width: 700px; height: 525px; display: block;}

#bandeau100voile {position: relative; margin-left: 410px; width: 138px; height:127px; display: block; background-image:url(structure/nature.png); background-repeat: no-repeat;}
#bandeaupoisson {position: relative; margin-left: 0px; width: 960px; height:89px; display: block; background-image:url(structure/bandeaupoisson.png); background-repeat: no-repeat;}

#pied1 {margin-left: 0px; width: 960px; display: block; background-color:#fff3e0; padding-left: 0px;  padding-top: 0px; font-family: Arial, Gisha, Calibri; 
font-size: 9px; text-decoration: none; text-align:center;}
#pied1 a {text-decoration: none; color: #965b00;}
#pied1 a:hover {color: #e98c00;}
#en {width:35px; height: 15px; display: block; float: right; padding-right: 10px;}
#pied2 {margin-left: 0px; width: 960px; height:15px; display: block; background-color:#e2b570; padding-left: 0px;  padding-top: 5px; font-family: Arial, Gisha, Calibri; 
font-size: 9px; text-decoration: none; text-align:center; vertical-align:middle;}

#colonnedroite{position: absolute; margin-left: 740px; top: 590px; width:200px; background-color: #fff3e0; font-family: Arial, Gisha, Calibri; font-size: 1pt;}
.rubrique{height: 13px; width: 195px; display: block; background-color: #e2b570; border-bottom: #000000 1px solid; padding-left: 5px; padding-top: 2px; font-family: Arial, Gisha, Calibri;
 font-size: 8pt; color:#000000;}
.texte0 a{height: 14px; width: 195px; display: block; background-color: #fff3e0; padding-left: 5px; padding-top: 1px; font-family: Arial, Gisha, Calibri; font-size: 8pt; color:#000000;
text-decoration:none;}
.texte0 a:hover {background-color: #e2b570;}
.texte1 a{height: 14px; width: 192px; display: block; background-color: #fff3e0; padding-left: 8px; padding-top: 1px; font-family: Arial, Gisha, Calibri; font-size: 8pt; color:#666666;
text-decoration:none;}
.texte1 a:hover {background-color: #e2b570;}
.imagefb a{height: 84px; width: 200px; display: block; background-image:url(structure/fb.jpg); background-repeat: no-repeat;}
.imagefb a:hover {height: 84px; width: 200px; display: block; background-image:url(structure/fbover.jpg); background-repeat: no-repeat;}
.tumb a{height: 113px; width: 200px; display: block; background-image:url(structure/tumb.png); background-repeat: no-repeat;}
.tumb a:hover {background-color: #e28900;}
.imgcoldr a{height: 23px; width: 200px; display: block; padding-top: 112px; font-family: Arial, Gisha, Calibri; font-size: 11pt; text-decoration: none; 
text-align:center; color: #ffffff;}
.imgcoldr a:hover {color: #e98c00;}

#tortue1 {position: absolute; margin-left: 815px; top: 540px; width:142px; height: 70px; background-image:url(structure/tortue1.png); background-repeat: no-repeat;}
#tortue2 {position: absolute; margin-left: 885px; top: 610px; width:89px; height: 67px; background-image:url(structure/tortue2.png); background-repeat: no-repeat;}

#casemenu{position: absolute; margin-left:20px; top:550px; width:805px; height:30px;}
#menu ul {margin:0; padding:0; list-style-type:none; text-align:left;}
#menu li { float:left; margin:auto; padding:0; background-color:#e98c00;}
#menu li a { display:block; height:27px; color: #ffffff; text-decoration:none; padding-left:10px; padding-top:3px; font-size: 13pt; font-family: Verdana;}
#menu li li{opacity:0.95}
#menu li li a{ display:block; padding-top:2px; height:22px; font-size: 11pt;}
#menu li a:hover {background-color: #e2b570;}
#menu ul li ul { display:none;}
#menu ul li:hover ul { display:block;}
#menu li:hover ul li { float:none;}
#menu li ul {position:absolute;}

.photogauche {float: left; margin-top:20px; margin-right:20px; margin-bottom:10px;}
.photodroite {float: right; margin-top:20px; margin-right:0px; margin-bottom:10px; margin-left:20px;}
.notephoto {font-size: 8pt; color:#8c8c8c; margin-bottom:5px;}

.soustitrelivre {color: #965b00; font-weight:bold; font-size: 10pt; font-family: Verdana;}



@media (min-width:1015px) {

#slidemobile {display:none}
#boitephotomobile {display:none}
.textemobile {display:none}

}



@media (max-width:1014px) {

#page {width:480px; margin-left: auto; margin-right: auto; top: 0px; display: block; background-color: #ffffff;}

#fondpage {display:none}
#tete {display:none}
#slogan {display:none}
#slogantexte {display:none}
#wood {display:none}
#slideshow {display:none}

#slidemobile {position:absolute; top:0px; height:260px;}

#pagetexte {position: absolute; width: 480px; top: 260px; margin-left: 0px; padding-left: 0px; display: block; background-color: #ffffff;}

#casetitre{position: relative; margin-left: 10px; margin-top: 10px; margin-bottom: 12px; padding-left: 5px; padding-bottom: 2px; height: 20px; width:455px; 
background-color: #e98c00;}
h1{font-family: Trebuchet MS, Arial; font-size: 14pt; color:black;}

#boitephotomobile {margin-left: 10px; width: 470px; display: block; font-family: Verdana, Arial; font-size: 11pt; background-color: #ffffff;}
#boitephotomobile a {text-decoration: none; font-size: 11pt;}
#boitephotomobile a:hover {text-decoration: none; color: #e98c00;}

.photoarticle a {float: left; margin-right:5px; margin-bottom:5px; width: 150px; height: 20px; display: block; padding-left: 0px;  padding-top: 80px; 
font-family: Verdana; font-size: 12pt; text-decoration: none; text-align:center; color: #ffffff;}
.photoarticle a:hover {color: #e98c00;}
.photoarticleselect a {float: left; margin-right:5px; margin-bottom:5px; width: 150px; height: 20px; display: block; padding-left: 0px;  padding-top: 80px; 
font-family: Verdana; font-size: 12pt; text-decoration: none; text-align:center; color: #e98c00;}

.texte_menu_mobile a {float: left; margin-right:5px; margin-bottom:5px; width: 150px; height: 25px; display: block; padding-left: 0px;  padding-top: 5px; 
font-family: Verdana; font-size: 12pt; text-decoration: none; text-align:center; color: #ffffff; background-color: #9c9c9c}
.texte_menu_mobile a:hover {color: #e98c00;}
.texte_menu_mobile_select a {float: left; margin-right:5px; margin-bottom:5px; width: 150px; height: 20px; display: block; padding-left: 0px;  padding-top: 0px; 
font-family: Verdana; font-size: 12pt; text-decoration: none; text-align:center; color: #e98c00;}

#boitephoto {display:none}

.texte {margin-left: 10px; width: 460px; display: block; font-family: Verdana, Arial; font-size: 11pt;}
.texte a {text-decoration: none; color: #e98c00;}
.texte a:hover {text-decoration: none; color: #965b00;}
.textemobile {margin-left: 10px; width: 460px; padding-right: 10px; display: block; font-family: Verdana, Arial; font-size: 11pt; background-color: #ffffff;}
.textemobile a {text-decoration: none; color: #e98c00; height:8px; display: block;}
.textemobile a:hover {text-decoration: none; color: #965b00;}
h2{font-family: Verdana, Arial; font-size: 12pt; color:black;}
h3{font-family: Verdana, Arial; font-size: 11pt; color:#666666;}
h4{font-family: Verdana, Arial; font-size: 10pt; color:#666666;}
.citation{color: #7774a8; font-size: 10pt;}
.note {font-size: 8pt;}
.textepc {display:none}

.boitevideo {margin-left:10px; width: 460px; height: 260px; display: block;}
.boitevideo525 {margin-left:10px; width: 460px; height: 345px; display: block;}

#bandeau100voile {display:none}
#bandeaupoisson {width:480px; height: 61px; display: block; background-image:url(structure_mobile/coffres_pied.jpg);}

#pied1 {margin-left: 0px; width: 480px; display: block; background-color:#fff3e0; padding-left: 0px;  padding-top: 5px; font-family: Arial, Gisha, Calibri; 
font-size: 12px; text-decoration: none; text-align:center;}
#pied1 a {text-decoration: none; color: #965b00;}
#pied1 a:hover {color: #e98c00;}
#en {width:35px; height: 15px; display: block; float: right; padding-right: 10px;}
#pied2 {margin-left: 0px; width: 480px; height:15px; display: block; background-color:#e2b570; padding-left: 0px;  padding-top: 5px; font-family: Arial, Gisha, Calibri; 
font-size: 10px; text-decoration: none; text-align:center; vertical-align:middle;}

#colonnedroite {display:none}

#tortue1 {position: absolute; margin-left: 387px; top: 260px; width: 92px; height: 48px; background-image:url(structure_mobile/tortue1.png); background-repeat: no-repeat;}
#tortue2 {position: absolute; margin-left: 432px; top: 308px; width: 55px; height: 37px; background-image:url(structure_mobile/tortue2.png); background-repeat: no-repeat;}

#casemenu {display:none}

.photogauche {float: left; margin-top:20px; margin-right:20px; margin-bottom:10px;}
.photodroite {float: right; margin-top:20px; margin-right:0px; margin-bottom:10px; margin-left:20px;}
.notephoto {font-size: 9pt; color:#8c8c8c; margin-bottom:5px;}

}