@charset "UTF-8";


/* CSS Document */
body
{
	background-color: #000;
	margin: 0;
	color: #fff;
	font-family: Times New Roman, Times;
	font-size: 15px;
	background-image: url(img/layout/bg_content.jpg); background-position: center top;
}

.clear {clear: both;}

h1 {font-size: 20px; font-weight:normal; margin:0 0 16px 0;padding:0; font-style: italic;}
	h1 strong {font-size: 24px; font-weight: bold;}
h2 {font-size: 20px; font-weight: normal; margin:0; padding: 0; font-style: italic}
h3 {font-size: 17px; font-weight: normal; margin: 0; padding: 0;}
h4 {}
p {margin: 0 0 14px 0; line-height: 17px;}
p.note {font-size: 20px; color: #ccc; font-style: italic;}
p.quote {font-style: italic;}
p.quote .signature {font-style: normal; font-weight: bold;}
.nomargin {margin:0;}

a {color: #fff; text-decoration: none}
a:hover {text-decoration: underline;}
a.button {clear: both; width: 237px; display: block; background-color: #000; padding: 8px; text-align: center; margin-bottom: 10px;}
a.galerie {position:absolute; top: 237px;}
a.plus {float: right;}
.wrap {width: 975px; margin: 0 auto 0 auto; position: relative;}

#top {height: 102px; background-image: url(img/layout/bg_top.jpg); background-repeat: repeat-x; background-position: center top;}

#logo {position: relative; float: left; width: 212px; height: 121px; padding: 25px 20px 20px 20px; background-image: url(img/layout/bg_logo.jpg); background-repeat: no-repeat;}

#nav {float: left; list-style: none; margin: 30px 0 0 30px; padding: 0; font-size: 20px; font-weight: normal;}
#nav li {float: left; border-left: 1px solid #f00; padding: 0 15px 0 15px; margin-bottom: 10px;}
#nav li.first {border: none; clear: left;}
#nav li a {color: #fff; text-decoration: none;}

#panel {height: 428px; background-position: center top;}
	body.accueil #panel {background-image: url(img/layout/panel_accueil.jpg);}
	body.activites #panel {background-image: url(img/layout/panel_activites.jpg);}
	body.boisrond #panel {background-image: url(img/layout/panel_boisrond.jpg);}
	body.chalets #panel {background-image: url(img/layout/panel_chalets.jpg);}
	body.evenements #panel {background-image: url(img/layout/panel_evenements.jpg);}
	body.nousjoindre #panel {background-image: url(img/layout/panel_nousjoindre.jpg);}
	body.relax #panel {background-image: url(img/layout/panel_relax.jpg);}
	body.ruisseau #panel {background-image: url(img/layout/panel_ruisseau.jpg);}
	body.temoignages #panel {background-image: url(img/layout/panel_temoignages.jpg);}
	body.photos #panel {background-image: url(img/layout/panel_photos.jpg);}
	body.forfaits #panel {background-image: url(img/layout/panel_forfaits.jpg);}
	body.regions #panel {background-image: url(img/layout/panel_regions.jpg);}

#content {padding-top: 30px; background-image: url(img/layout/top_content.jpg); background-position: center top; background-repeat: no-repeat}
#content #nav {font-size: 16px;}
#content #nav li {}
#content #nav li a {}
#content .col_1tier {width: 261px; float: left; margin-right: 10px; position: relative;}
#content .col_1tier img.photo {position:relative; top:-17px; left: -40px; border: none; height: auto; width: auto;}

#content .col_2tier {width: 665px; display: block; float: left;}
#content .col_2tier #nav {margin: 0px 0 15px 0;}
#content .col_2tier #nav li.first {padding-left: 0;}

#content .col_2tier table {font-size: 15px; margin-bottom: 20px; border-spacing: 0px; border-collapse: collapse;}
#content .col_2tier table.line_border tr {background-image: url(img/layout/separ.png); background-repeat: repeat-x; background-position: left bottom; }
#content .col_2tier table tr td {vertical-align: top; padding: 5px;}
#content .col_2tier table tr.prix {background-image: url(img/layout/separ_plein.png); background-repeat: repeat-x; background-position: left bottom;}
#content .col_2tier table tr td.pair, #content .col_2tier table tr td.impair {width: 60px;}
#content .col_2tier table tr td.pair {background-image: url(img/layout/white_8.png);}
#content .col_2tier table tr td.impair {background-image: url(img/layout/white_16.png);}

#content .col_2tier .col1, #content .col_2tier .col2 {width: 261px; float: left;}
#content .col_2tier .col1 {margin-right: 10px;}
#content .col_2tier .col2 {}

#content .liste {}
#content .liste img {}
#content .liste p {font-size: 12px;}
#content .liste .chalet_description {display: block; width: 280px;}

#content .black_box {background-image: url(img/layout/black_65.png); display: block; position: relative; margin-bottom: 20px; height: 253px;}
#content .black_box h3 {border-bottom: 1px solid #f00; margin: 15px 0 15px 0;}
#content .black_box .place {width: 165px; float: left;}
#content .black_box .desc {float: left; width: 385px;}
	#content .black_box .desc ul {margin:0; padding:0; list-style: none;}
	#content .black_box .desc ul li {}
	#content .black_box .desc a {font-weight: bold;}
#content .black_box .distance {float: left;width: 75px;}
#content .black_box hr {clear: both; margin: 15px 0 15px 0; float: left; width: 100%; height: 1px; border:0; background-image: url(img/layout/separ.png);}

#content .black_box .credit_photo {display: block; position: absolute; bottom: 10px; left: 283px; font-size: 10px;}

#content #show.slideshow, #content .black_box img, #content .col_1tier img, a.photo img {float: left; border: 8px solid #000; height: 237px; width: 237px; margin-right: 30px; margin-bottom: 10px;}

a.photo div.gros {display: none;}
a.photo:hover div.gros {display: block;}
a.photo:hover div.gros img {width: 500px; height: auto; position: absolute; left: -50px; bottom:100px; z-index: 100;}
a.photo {position:relative; height: 300px; width: 237px; display:block; float: left; margin-right: 35px; margin-bottom: 35px;}
a.photo div.legende {position:absolute; top: 260px;left:5px;}

table.calendrier {width: 665px;}
table.calendrier th.cal_annee {text-align:center; font-size: 20px;}
table.calendrier th.cal_annee a {padding: 0 20px 0 20px; font-size: 12px; font-style: italic;}
table.calendrier table.cal_mini {}
table.calendrier table.cal_mini th.cal_mois {}

table.calendrier table.cal_mini td {text-align: center; font-size: 12px;}
table.calendrier table.cal_mini td .cal_jour_label {}
table.calendrier table.cal_mini td .cal_jourfs_label {}
table.calendrier table.cal_mini td .cal_jour {}
table.calendrier table.cal_mini td .cal_jourfs {color: #ccc;}

table.calendrier table.cal_mini td.cal_aujourdhui, table.legende td.cal_aujourdhui {border: 2px solid #fff;}
table.calendrier table.cal_mini td.cal_reserve, table.legende td.cal_reserve {background-color: #ff0000;}

#content .col_2tier table.legende {border-spacing:5px; border-collapse: separate;}
#content .col_2tier table.legende th {text-align:left;}
#content .col_2tier table.legende td {padding:0; }
#content .col_2tier table.legende td.cal_reserve, table.legende td.cal_aujourdhui {width: 15px; height: 15px; text-align: center;}

input.titre {width: 500px;font-size: 20px; font-weight:normal; margin:0;padding:0; font-style: italic;}
textarea.contenu {width: 650px; height: 400px;}
textarea.description {width: 250px; height: 400px; font-size: 20px; color: #ccc; font-style: italic;}

#footer {font-family: Arial; font-size: 11px; text-align: center; padding:30px 0 20px 255px;}
#footer #nav {clear: both; margin: 10px 0 0px 0;  margin-left: 75px; font-size: 9px;}
#footer #nav li {padding: 0 5px 0 5px;}
#footer #credits {clear: both;}
#footer #credits .copyright {font-size: 8px; line-height: 18px;}

body.information {background-image: url(img/layout/bg_form.jpg); background-position: top center;}
body.information #wrapper {width: 300px; margin: 0 auto 0 auto;}
body.information h1 {padding-top: 20px; height: 35px;}
body.information p {margin: 15px 0 15px 0;}
body.information input {width: 290px;}
body.information input.small {width: 142px;}
body.information textarea {width: 290px;}

.videovisite{position:absolute; width:211px ;height:37px; top:-65px; right:50px;}
.videovisite img:hover {opacity:0.8;}
.animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both;  animation-fill-mode: both; } 
@-webkit-keyframes bounceInRight { 0% { opacity: 0;-webkit-transform: translateX(1000px); }60% {opacity: 1;-webkit-transform: translateX(0px);}80% {-webkit-transform: translateX(0px);}100% {-webkit-transform: translateX(0); } } 
@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(1000px);}60% {opacity: 1;transform: translateX(0px); } 80% {transform: translateX(0px); }100% { transform: translateX(0); } } 
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }

.video{width:300px; height:300px; float:left; margin-right:30px;}
.video2{width:300px; height:300px; float:left; margin-right:30px;}
.video3{width:300px; height:300px; float:left; margin-right:0px;}

.video p, .video2 p, .video3 p{text-transform:uppercase; margin-top:15px;}