@import url('http://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic|Port+Lligat+Slab');
@import url('fontello.css');


/*
*
*	ref couleur : vert = rgb(145,150,110) / #91966e
*	ref couleur : vertclair = rgb(175,179,140) / #afb38c
*	ref couleur : Rouge = rgb(127,17,32) / #7f1120
*	ref couleur : Rouge clair = rgb(163,53,70) / #a33546
*	ref couleur : Gris = rgb(187,187,187) / #bbbbbb
*	ref couleur : Gris clair = rgb(218,218,218) / #dadada
*
*/


/*#####################  -- RESET CSS --  ##########################*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*##################################################################*/

/*########################### - GENERAL - ##########################*/

html{
  position: relative;
background-color: rgb(227,216,195);
}

body{
position:fixed; top: 50%; left:50%;
width: 1000px; height: 680px;
margin-left: -500px; margin-top: -350px;
box-sizing:border-box;
-moz-box-sizing:border-box;
font-family: 'Arimo', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: rgb(50,50,50);
overflow: hidden;
}

@media only screen 
and (max-device-width : 980px){
  body{
   position:absolute; top: 0px; left:0px;
   margin-top: 10px; margin-left: 10px; margin-right: 10px;
   width: 1000px; height: 100%;
  }

  }

p,ul,ol,blockquote{margin-bottom: 1.5em}

a{color: rgb(80,80,80); text-decoration: none;}
a:hover{color: rgb(120,120,120); text-decoration: underline;}

em{font-style: italic; font-size: 0.8em;}

h1,h2,h3,h4{
font-family: 'Port Lligat Slab', Helvetica, Arial, sans-serif;
margin-bottom: 24px;
}

h5,h6{
  font-family: 'Arimo', Helvetica, Arial, sans-serif;
}

h1{font-size:2.7em; color: rgb(20,20,20);}
h2{font-size:2.1em; color: rgb(30,30,30);}
h3{font-size:1.9em; color: rgb(40,40,40);}
h4{font-size:1.5em; color: rgb(40,40,40);}
h5, h6{font-size:1.1em; color: rgb(50,50,50);}

h3 em{font-style: italic; font-size: 0.6em;}

ul,ol{margin-left: 20px;}
ul{list-style:disc inside;}
ul ul, ul ol{list-style: disc inside; margin-bottom:0;}
ol{list-style:decimal inside; overflow: hidden;}
ol ol, ol ul{ list-style:lower-roman inside; overflow: hidden; margin-bottom:0;}

strong{color: rgb(10,10,10); font-weight: bold;}

.hidden{
  display: none;
}
.voile-sombre{
  position: fixed; top:-5%; left:-5%; z-index: 80;
  width: 110%; height: 110%;
  background-color: rgb(0,0,0);
  opacity: 0.3;
  cursor: alias;
}

/* ------------- nav ----------------*/
#blockmenu{
display: block;
width: 1000px; height: 210px;
overflow: hidden;
position: relative;
}
#titre-site{
width: 550px;
height: 30px;
cursor: pointer;
}
#titre-site h1{
position: absolute; top: -15px; left: 50px;
margin: 0px;
}

#titre-site img{
  display: inline-block;
  height: 30px;
  margin-right: 10px;
  position: absolute; top: 0px;
}

#sous-titre{
  position: absolute; top:13px; right: 0px;
  cursor: pointer;
}

#sous-titre a{
    color: rgb(50,50,50);
  text-decoration: none;
  font-family: 'Port Lligat Slab', Helvetica, Arial, sans-serif;
}

nav h1, h3, h2{
  display: inline-block;
  margin: 0px;
}

nav h3{color: rgb(240,240,240);}

.btn-menu{
  position: absolute;
  width: 184px; height: 150px;
  text-align: center;
  bottom: 0px;
  transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  cursor: pointer;
}
.btn-menu:hover{
height: 160px;
}
.btn-menu h3{
  width: 184px;
  position: absolute; bottom: 10px; left: 0px;
}


#btn-1{
left: 0px;
  background-color: rgb(158,45,20);
}
#btn-2{
left: 204px;
  background-color: rgb(164,142,110);
}
#btn-3{
left: 408px;
  background-color: rgb(86,66,59);
}
#btn-4{
right: 204px;
  background-color: rgb(172,85,33);
}
#btn-5{
right: 0px;
  background-color: rgb(20,87,0);
}

/* ------------- PAGES ----------------*/

#page{
  position: relative;
	width: 100%; height: 470px;
  overflow:hidden;
  /*background-color: rgb(200,200,200);*/
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.cadre-gauche{
position: absolute; top:10px; left: 0px;
width: 592px; height: 455px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.cadre-droite{
position: absolute; top:10px; right: 0px;
width: 388px; height: 455px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
/*------------ACCUEIL-------------*/
#accueil_gauche p{
  margin-bottom: 25px;
  text-align: justify;
}

#images-accueil{
width: 100%; height:200px;
}

#image-france{
position: absolute; right: 0px; bottom: 0px;
}

#face-gite{
position: absolute; left: 0px; bottom: 0px;
border: 4px solid rgb(240,240,240);
}

#images-accueil img{
height:200px; width: auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
}

#news{
overflow:auto;
}
.block-new{
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2px dotted rgb(50,50,50);
}

.titre-news{
margin: 0px;
}

.corps-news{
margin: 0px;
}

.block-new a{
color: rgb(20,87,0);
}

/*------------- Le Gite-------------*/
#text_gite p{
  text-align: justify;
}
#images-gite{
  position: absolute; bottom: 0px; left: 0px;
  height:250px; width: 1000px;
  overflow-x:auto;
  overflow-y:hidden;
}
#glissiere-gite{
  height:250px;
  padding: 0px;
margin: 0px;
text-align: left;
white-space: nowrap;
}
#glissiere-gite img{
display: inline-block;
max-height: 100%; width: auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#gite-details .col-infos{
  font-size: 14px;
  font-style: italic;
  padding-left: 15px;
}
#btn-equipmt-gite{
  position: absolute; right: 0px;
    height: 25px; width: 100px;
  border: 1px solid rgb(200,200,200);
  background-color: rgb(240,240,240);
  text-align: center;
  line-height: 25px;
  cursor: pointer;
}

#equipmt-gite{
cursor: help;
}

#liste-equipmt-gite{
position: fixed; top: 50%; left: 50%; z-index: 100;
height: 400px; width: 300px;
margin-top: -200px; margin-left: -150px;
padding: 20px 10px;
border: 1px solid rgb(200,200,200);
background-color: rgb(240,240,240);
text-align: center;
line-height: 25px;
cursor: help;
box-sizing:border-box;
-moz-box-sizing:border-box;
}

/*------------- ACCES-------------*/
.fluid-wrapper iframe {
position: absolute;
top: 0px;
left: 0px;
width: 592px; height: 455px;
border: none;
}


#liste-acces{
position: absolute; top:10px; right: 0px;
width: 388px; height: 455px;
padding: 15px;
overflow: hidden;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#liste-acces table{
width: 388px; height: 455px;
}

#liste-acces td{
padding: 0px; margin: 0px;
vertical-align: middle;
}

/*------------- Alentours-------------*/
#ss-menu{
  background-color: rgb(164,142,110);
  width: 100%;
  color: rgb(240,240,240); 
  padding-top: 15px;
}
#ss-menu h5{
  color: rgb(240,240,240);
}
#ss-menu table{
  width: 100%;
  text-align: center;
}
#ss-menu td{
  width: 20%;
  cursor: pointer;
}

.cadre-Alentours{
  width: 100%;
  max-height: 428px;
  min-height: 100px;
  text-align: justify;
  overflow:auto;
}

.Alentours{
  width: 592px;
  min-height: 150px;
  margin: 10px 0px;
  box-sizing:border-box;
-moz-box-sizing:border-box;
}
.Alentours p, .Alentours h3{
  margin: 0px;
}
.AlentoursImg{
position: absolute; left: 612px;
padding: 0px;
margin: 15px 0px;
display: block;
height: 400px; width: 370px;
overflow-x:auto;
overflow-y:hidden; 
text-align: center;
  box-sizing:border-box;
-moz-box-sizing:border-box;
}

.AlentoursImg img{
  display: inline-block;
max-width: 180px; height: auto;
vertical-align: middle;
margin: 2px 0px;
}

/*------------- Contacts & Tarifs -------------*/
#contacts, #tarifs{
font-size: 1.2em;
margin-top: 50px;
text-align: center;
width: 100%; min-height: 20px;
}

#partages{
  display: inline-block;
  text-align: center;
  width: 100%;
}

.btn-partage{
  display: inline-block;
  width: 200px;
}

/*##################################################################*/

/*########################### - FOOTER - ##########################*/
#copyright{
font-family: sans-serif;
opacity : 0.4;
position: fixed; left: 0; bottom: 0; z-index: 900;
width: 100%; height: 20px;
line-height: 18px;
font-size: 0.6em;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
text-align: center;
}

#copyright a{
  color: rgb(80,80,80);
}

#copyright:hover
{ opacity : 0.9; }

/*##################################################################*/

/*########################### - DEBUG - ##########################*/
#debug{
position: fixed; top: 10px; left: 0px;
height:40px; width: 40px;
padding-left: 100px;
background-color: rgb(150,150,150);
color: rgb(0,0,0);
font-family: "Courier New", Courier, monospace;
font-size: 0.8em;
moz-border-radius: 0px 18px 18px 0px;
-webkit-border-radius: 0px 18px 18px 0px;
border-radius: 0px 18px 18px 0px;
overflow: hidden;
text-align: justify;
box-sizing:border-box;
-moz-box-sizing:border-box;
}

#debug:hover{
position: fixed; top: 0px; left: 0px;
height: 100%;
padding: 10px;
max-height: 500px;
overflow: auto;
width: 100%;
}

#debug h1,h6{
font-family: "Courier New", Courier, monospace;
}

.debugcol{
display: inline-block;
width: 48%;
padding:5px;
margin:1px;
border:solid 1px #000000;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
background-color: rgb(255,200,200);
box-sizing:border-box;
-moz-box-sizing:border-box;
text-align: left;
}