/*-----------------------------------------------------------------
------------------------CSS screen--------------------------------- 
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------
Uniformisation du rendu html
-----------------------------------------------------------------*/

/*-- reset marges --*/

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
ul, ol, li,
fieldset, form, label,
table, tr, td {
margin: 0;
padding: 0;
}

/*-- document html --*/

html { font-size: 100%; }
body {  }

/*-- div --*/

div {
overflow: hidden;
}

/*-- liens --*/

a { text-decoration: underline; }
a:active { outline: none; }
a img, a object { border: none; }

/*-- textes --*/

h1, h2, h3, h4, h5, h6 {
font-weight: normal; 
font-style: normal;
}
hr { display: none; }
sup, sub { line-height: 0; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
abbr { 
border-bottom: 1px dotted #000;
cursor: help;
}

/*-- formulaire --*/

form, fieldset { border: none; }
form label { cursor: pointer; }
input, button, select { vertical-align: middle; }

/*-- tableau --*/

table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #000;
}
td {
border: 1px solid #000;
vertical-align: top;
}

/*-----------------------------------------------------------------
Mise en forme globale
-----------------------------------------------------------------*/

/*-- document html --*/

html {
height: 100%;
background: #FFF url(../design/noir.png) repeat-x center top;
}
body {
background: transparent url(../design/refuge-siecle.jpg) no-repeat center top;
color: #000;
font: .8em/1.2em Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
}

body.__racine {
border-top: 10px solid #000;
background: transparent url(../design/refuge-siecle.jpg) no-repeat center top;
color: #000;
font: .8em/1.2em Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
}

body.mariages-receptions{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-mariage.jpg) no-repeat center top;
}

body.suites-chambres{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-suites-chambres.jpg) no-repeat center top;
}

body.repas-affaire-seminaires{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-reception-repas.jpg) no-repeat center top;
}

body.tournages{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-tournages.jpg) no-repeat center top;
}

body.galerie-photo{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-galerie-photos.jpg) no-repeat center top;
}

body.histoire{
border-top: 10px solid #000;
background: transparent url(../design/refuge-des-siecles-histoire.jpg) no-repeat center top;
}

body.mentions-legales{
border-top: 10px solid #000;
}

body.plan-contact{
background: #FFF;
}

/*-- niveaux de titre --*/

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
margin: 1em 0 .70em;
}
h1 { font-size: 1.5em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.35em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1.1em; }

/*-- listes --*/

ul, ol { margin: .75em 0 .75em 32px; }

/*-- paragraphes --*/

p { margin: .75em 20px .75em 0; }

/*-- liens --*/

a:link { color: #000; }
a:visited { color: #000; }
a:hover, a:focus, a:active { color: #383838; }

/*-----------------------------------------------------------------
Conteneurs
-----------------------------------------------------------------*/

#entete {
height: 340px;
width: 960px;
margin: 0 auto;
}
#menu{
width: 100%;
background: #000 url(../design/barre.png) repeat-x center bottom;
font: 1.15em Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
font-weight: bold;
height: 60px;
}
#contenu{
background: #FFF;
width: 960px;
margin: 0 auto;
padding: 15px 0;
overflow: hidden;
height: 1%;
}
#pied{
clear: both;
background: #000 url(../design/barre.png) repeat-x center top;	
height: 55px;
width: 100%;
overflow: hidden;
height: 1%;
}

/*-----------------------------------------------------------------
Entete
-----------------------------------------------------------------*/

#entete img{
color : #FFF;
}

#entete #langue{
display: inline;
float: right;
margin: 40px 12px 0 0;
}

#entete #langue img{
margin: 0 2px;
}

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

#menu ul{
width: 960px;
margin: 0 auto;
}
#menu li{
float: left;
}
#menu a {
font-size: 0.85em;
display: block;
padding: 19px 6px 17px 6px;
color: #FFF;
text-decoration: none;
text-align: center;
}
#menu a:hover, #menu a:focus, #menu a:active{
color: #ccc;
}
#menu a.courant, #menu a:hover {
color: #ccc;
}

/*-----------------------------------------------------------------
Contenu
-----------------------------------------------------------------*/

#contenu h1 {
margin: 20px 0;
font-family: Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
text-align: center;
}

#contenu h1 span{
display : block;
font-size: 2.5em;
line-height: 1em;
padding-bottom: 25px;
background: transparent url(../design/separateur.gif) no-repeat center bottom;
margin-bottom: 10px;
}

#contenu h1 span.baseline{
display : block;
font-size: 1em;
line-height: 1.1em;
padding-bottom: 25px;
background: transparent url(../design/separateur.gif) no-repeat center bottom;
}

span.separation{
display: block;
height: 15px;
background: transparent url(../design/separateur.gif) no-repeat center center;
clear: both;
padding: 5px 0;
}

#contenu h2 {
background: transparent url(../design/puce-h2.gif) no-repeat left center;
margin : 20px 10px 15px;
font-size: 1.6em;
line-height: 1.3em;
}

#contenu h3 {
margin : 20px 10px 15px;
font-size: 1.4em;
line-height: 1.2em;
}

#contenu p{
margin : 15px 10px;
word-spacing: 0.2em;
font-size: 1.05em;
}

#contenu ul{
list-style: disc;
}

#contenu li{
margin : 10px;
}


#video{
text-align: center;
}

.droite {
float: right;
margin: 5px 10px;
}

.gauche {
float: left;
margin: 5px 10px;
}

.centre {
display: block;
text-align: center;
margin: 0 auto;
}

/*-----------------------------------------------------------------
Page de contact
-----------------------------------------------------------------*/

#contact-page{
background: #FFF url(../design/pagecontact.png) no-repeat center top;
width: 960px;
height: 900px;
margin: 0 auto;
overflow: hidden;
}

#entete_contact {
width: 960px;
margin: 2px auto 0;
}

#entete_contact #langue{
display: inline;
float: right;
margin: 2px 12px 0 0;
}

#entete_contact #langue img{
margin: 0 2px;
}

/* colonne 1 */

#contact-page #col1{
float: left;
width: 460px;
margin: 10px 0;
}

#contact-page #col1 h2{
margin : 20px 20px 15px;
font-size: 2em;
line-height: 1.3em;
}

#contact-page #col1 p{
margin : 15px 20px;
word-spacing: 0.1em;
line-height: 1.1em;
}

#contact-form .important{
color : #b83b03;
}

#contact-form p{
margin : 10px;
}

#contact-form label{
float:left;
font-weight: bold;
text-align:right;
width: 100px;
padding: 3px 10px 9px 0;
}

#contact-form textarea {
border:1px solid #808080;
}

#contact-form input.textfield {
border:1px solid #808080;
padding: 2px;
width: 170px;
}

#contact-form input.textfield:focus, #contact-form textarea:focus {
background: #e9e9e9;
}

#contact-form #submit {
margin-left: 108px;
}

/* colonne 2 */

#contact-page #col2{
float: right;
width: 500px;
margin: 10px 0;
}

#contact-page #col2 h2{
margin : 20px 10px 15px;
font-size: 2em;
line-height: 1.3em;
}

#contact-page #col2 img{
margin-left: 3px;
}

/*-----------------------------------------------------------------
Galerie
-----------------------------------------------------------------*/

#contenu .galerie ul {
margin: 0;
padding: 0;
}

#contenu .galerie li {
float: left;
margin: 5px 10px 10px 10px;
width: 134px;
text-align: center;
display: inline;
}

.galerie li span{
height: 30px;
font-weight: bold;
display: block;
width: 134px;
text-align: center;
}

.galerie a {
text-decoration: none;
}

.galerie li a img{
display: block;
border: solid 2px #bdbec0;
}

.galerie li a:hover img{
border: solid 2px #7c2423;
}

.galerie li a span{
color : #FFF;
}

.galerie li a:hover span{
color : #cdcdcd;
}

/*-----------------------------------------------------------------
Light-box
-----------------------------------------------------------------*/
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 16px; 
	float: right;
	padding-bottom: 0.7em;	
}

/*-----------------------------------------------------------------
Pied de page
-----------------------------------------------------------------*/

#pied p{
font-weight: bold;
color: #FFF;
width: 960px;
margin : 20px auto 15px;
text-align: right;
}

#pied a {
color: #FFF;
}

#pied a:hover, #pied a:focus, #pied a:active{
color: #ccc;
}

#pied a.actif, #pied a:hover .courant {
color: #ccc;
}

#studio-en-tete {
font-size: 0.9em;
padding: 1px 0;
padding-left: 25px;
background: url(../design/studio-en-tete.gif) no-repeat left center;
}