* {
 margin: 0;
 padding: 0;
}

html { font-size: 100% }

body {
 padding: 0;
 margin: 0;
 background-color: #345693;
 text-align: center;
 font-family: "trebuchet ms", Verdana, Arial, Helvetica, sans-serif;
 font-size: 0.70em;
 color: #3F3F3F;
}

a         { text-decoration: none; color: #6D1D42; }
a:visited { text-decoration: none; }
a:hover   { color: #792041; }
a:active  { border-bottom: 0; color : white; }


#global {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -300px; /* moitié de la hauteur */
 margin-left: -430px; /* moitié de la largeur */
 width: 860px;
 height: 600px;
 background-color: white;
 text-align: left;
}

#fond {
 position: absolute;
 left: 0;
 top: 0;
 height: 600px;
 width: 860px;
 background: transparent url(images/fond.jpg) top left no-repeat;
}





/****** Espace principal de chaque section (avec ascenseur graphique) ********/

img#titre {
 position: absolute;
 width: 297px;
 height: 54px;
 top: 162px;
 right: 0px;
}

div#main {
 position: absolute;
 width: 824px;
 height: 336px;
 top: 196px;
 left: 18px;
 font-weight: normal;
}

div#main #contenu {
  position: absolute;
  top: 0px;
  right: 0;
  width: 465px;
  height: 296px;
  overflow: auto;
}

div#main p {
 text-align: left;
 font-size: 1.2em;
 margin: 0px 10px 10px 0;
}

div#main h1 {
 font-size: 2em;
 margin: 0 0px 15px;
}

div#main h1 span {
 font-size: 10px;
 font-weight: normal;
}

div#main h2 {
 color: #7F1B41;
 font-size: 1.4em;
 margin:  5px 0px 10px;
}

div#main ul {
 font-size: 1em;
 margin:  10px 20px;
}

div#main a {
 border-bottom: 1px solid #6D1D42;
}

div#main ul li {
 list-style-image: none;
 list-style-type: disc;
 line-height: 1.4em;
 font-size: 1.2em;
}

div#main div#slide {
 width: 336px;
 height: 336px;
 line-height: 336px;
 padding: 0;
 margin: 0;
 text-align: center !important;
}

div#main div#slide img {
 position: absolute;
 top: 0;
 left: 0;
}

#plan {
 border: 1px #B3C6E7 solid;
}

#info-js {
 display: none;
}

#intro {
 margin: 0px 50px 30px;
 font-size: 1.1em;
 font-style: italic
}

#encart {
 margin: 0 20px 0 50px;
 font-size: 0.9em;
 border: 1px white solid;
 -moz-border-radius: 10px;
}

#encart h3 {
 margin: 10px auto 5px 10px !important
}

#encart ul {
 margin: 0 0 10px 25px !important;
}

/* Les carrés */

div#main #carre {
  float:left;
  margin-left:10px;
  width: 336px;
  height: 336px;
  text-align: center;
}

div#main #carre img {
 vertical-align: middle;
}

#global.id3 #carre { background: transparent url(../../images/carres/3.jpg) 50% 50% no-repeat; }
#global.id4 #carre { background: transparent url(../../images/carres/4.jpg) 50% 50% no-repeat; }
#global.id5 #carre { background: transparent url(../../images/carres/5.jpg) 50% 50% no-repeat; }
#global.id6 #carre { background: transparent url(../../images/carres/6.jpg) 50% 50% no-repeat; }
#global.id7 #carre { background: transparent url(../../images/carres/7.jpg) 50% 50% no-repeat; }
#global.id8 #carre { background: transparent url(../../images/carres/8.jpg) 50% 50% no-repeat; }
#global.id9 #carre { background: transparent url(../../images/carres/9.jpg) 50% 50% no-repeat; }


/****************************/
/*      Les galeries        */
/****************************/

/** La liste des galeries **/

#main #liste-galeries {
 margin-left: 0;
}

#main #liste-galeries li {
 list-style-type: none;
 list-style-image: none;
 width: 150px;
 position: absolute;
 top: 0;
 right: 1px;
 text-align: right;
 z-index: 10;
 font-size: 1em;
}

#liste-galeries li a { border: 0 }

#liste-galeries li#id10 { top:   0px; height: 120px; }
#liste-galeries li#id11 { top: 120px; height: 102px; }
#liste-galeries li#id12 { top: 222px; height: 114px; }

#liste-galeries li#id10 a { background-position: left top }
#liste-galeries li#id11 a { background-position: left -120px  }
#liste-galeries li#id12 a { background-position: left bottom }

#main #liste-galeries li.here#id10 a,#main #liste-galeries li#id10 a:hover { background-position: right top }
#main #liste-galeries li.here#id11 a,#main #liste-galeries li#id11 a:hover { background-position: right -120px }
#main #liste-galeries li.here#id12 a,#main #liste-galeries li#id12 a:hover { background-position: right bottom }

#liste-galeries li.here a span { color: #752444 }

#liste-galeries li a {
 display: block;
 width: 100%;
 height: 100%;
 color: #8DC6D9;
 background: transparent url(images/menu-galeries.jpg) top left no-repeat;
}

#liste-galeries li a span {
 position: absolute;
 top: 60px;
 right: 20px;
 display: block;
 font-weight: bold;
 font-size: 1.2em;
 text-align: right;
 color: #345693
}

#liste-galeries li#id11 a span, #liste-galeries li#id12 a span { top: 43px; }


/** Liste des miniatures d'une galerie **/

#menu_galerie {
 width: 290px;
 position: absolute;
 top: -10px;
 left: 0px;
}

#main #menu_galerie li {
 float: left;
 list-style-type: none;
 list-style-image: none;
 width: 50px;
 height: 50px;
 border: 0px #345693 solid;
 margin: 3px;
}

#menu_galerie li a {
 display: block;
 width: 100%;
 height: 100%;
 border: 0
}

#menu_galerie li a img {
 border: 0;
 width: 50px;
 height: 50px;
}

/** Liste des miniatures d'une carte postale **/

div.id14 ul#menu_galerie {
 position: inherit;
 width: 240px;
 float: right;
 margin: 0;
}

/** Une image taille réelle de la galerie **/

#main #galerie {
 position: relative;
 width: 336px;
 margin: 0;
}

#main #galerie li {
 left: 0;
 list-style-type: none;
 list-style-image: none;
 text-align: center;
}

#main #reference {
 margin-top: 10px;
}

#main #reference .titre {
 font-weight: bold;
}

/****************************************/
/****** Le retour vers l'accueil ********/

div#accueil {
 position: absolute;
 top: 17px;
 left: 19px;
 width: 260px;
 height: 178px;
}

div#accueil a {
 display: block;
 width: 100%;
 height: 100%;
}

div#accueil a span {
 position: absolute;
 left: -3000px;
 top: -3000px;
}

/****** Le menu ********/

#menu ul {
 position: absolute;
 top: 80px;
 right: 30px;
}

#menu ul li {
 display: inline;
 list-style-type: none;
 list-style-image: none;
 font-size: 1.2em;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

#menu ul li.here a {
 color: white;
}

#menu a {
 display: block;
 float: left;
 padding: 0px 10px 5px;
}




/*************************/
/* La Boutique           */
/*************************/

table {
 border-collapse: collapse;
 margin: 10px 0;
}

table td {
 text-align: right
}

table td.bt {
 border-top: 1px white solid;
}

table td.bb {
 border-bottom: 1px white solid;
}

table .col1 {
 font-weight: bold;
 padding: 0 3px 0 0;
 width: 120px;
 text-align: left;
 border-top: 1px white solid;
 border-bottom: 1px white solid;
}


/* Base line */

div#baseline {
 position:  absolute;
 bottom: -2px;
 left: 22px;
 width: 815px;
}

div#baseline ul {
 float: left;
 width: 50%;
}

div#baseline li {
 display: inline;
 padding: 0 5px;
 border-right: 0px #17315F solid;
}

div#baseline li.last {
 border-right: 0;
}

div#baseline li a {
 color: white
}

div#baseline #credits {
 float: right;
 width: 40%;
 text-align: right;
 color: white;
}

div#baseline #credits a {
 color: white;
}

div#baseline #credits a:hover, div#baseline li a:hover {
 color: #B0C5CB;
}

/******************/
/* Classes utiles */
/******************/
.centrage { text-align: center; }
.droite { float: right }
.gauche { float: left }
.spacer { clear: both; }