body
{
width: 100%;
margin: 0 auto; padding: 0;
background-image: url("../../image/ap/body.png");
}

#en_tete
{
width: 850px;
height: 120px;
margin: 0 auto; padding: 0;
}
#en_tete a:hover
{
cursor: pointer;
}

#header
{
width: 850px;
height: 120px;
position: absolute;
margin: 0 auto; padding: 0;
background-image: url("../../image/ap/header.png");
}

#banniere
{
width: 850px;
height: 150px;
margin: 10px auto 5px auto; padding: 0;
background-image: url("../../image/ap/banniere.png");
}

/*#fond
{
width: 870px;
margin: 0 auto; padding:0;
background-image: url("../../image/ap/fond.png");
}*/

/* -------------------- Le menu : Navigation primaire pour aller dans les différentes rubriques du site -------------------- */

#sommaire
{
width: 850px;
height: 30px;
margin: 5px auto; padding: 0;
}

#accueil
{
width: 110px;
height: 30px;
position: absolute;
margin: 0; padding: 0;
background: url("../../image/bouton/menu/accueil_p1p2.png") left;
cursor: pointer;
}
a:hover #accueil
{
background: url("../../image/bouton/menu/accueil_p1p2.png") right;
}

#abri
{
width: 150px;
height: 30px;
position: absolute;
margin-left: 110px; padding: 0;
background: url("../../image/bouton/menu/abri_p1p2.png") left;
cursor: pointer;
}
a:hover #abri
{
background: url("../../image/bouton/menu/abri_p1p2.png") right;
}

#motorisation
{
width: 150px;
height: 30px;
position: absolute;
margin-left: 260px; padding: 0;
background: url("../../image/bouton/menu/motor_p1p2.png") left;
cursor: pointer;
}
a:hover #motorisation
{
background: url("../../image/bouton/menu/motor_p1p2.png") right;
}

#spa
{
width: 110px;
height: 30px;
position: absolute;
margin-left: 410px; padding: 0;
background: url("../../image/bouton/menu/spa_p3.png") left;
cursor: pointer;
}
/*a:hover #spa
{
background: url("../../image/bouton/menu/spa_p1p2.png") right;
}*/

#fabrication
{
width: 110px;
height: 30px;
position: absolute;
margin-left: 520px; padding: 0;
background: url("../../image/bouton/menu/fabrication_p1p2.png") left;
cursor: pointer;
}
a:hover #fabrication
{
background: url("../../image/bouton/menu/fabrication_p1p2.png") right;
}

#offre
{
width: 110px;
height: 30px;
position: absolute;
margin-left: 630px; padding: 0;
background: url("../../image/bouton/menu/offre_p1p2.png") left;
cursor: pointer;
}
a:hover #offre
{
background: url("../../image/bouton/menu/offre_p1p2.png") right;
}

#contact
{
width: 110px;
height: 30px;
position: absolute;
margin-left: 740px; padding: 0;
background: url("../../image/bouton/menu/contact_p1p2.png") left;
cursor: pointer;
}
a:hover #contact
{
background: url("../../image/bouton/menu/contact_p1p2.png") right;
}

/* -------------------- Le sous-menu : navigation secondaire pour aller vers SPA ou SAUNA-------------------- */

#sous_menu1
{
width: 850px;
height: 30px;
margin: 0 auto; padding: 0;
}

#spas
{
width: 425px;
height: 30px;
position: absolute;
margin: 0px;
background: url("../../image/bouton/spa/spa_p3.png") left;
cursor: pointer;
}
/*a:hover #spas
{
background: url("../../image/bouton/spa/spa_p1p2.png") right;
}
*/
#sauna
{
width: 425px;
height: 30px;
position: absolute;
margin-left: 425px;
background: url("../../image/bouton/spa/sauna_p1p2.png") left;
cursor: pointer;
border-bottom: solid 1px #fff;
}
a:hover #sauna
{
background: url("../../image/bouton/spa/sauna_p1p2.png") right;
}

abbr
{
cursor: help;
}

p
{
margin:0; padding:0;
}

/* -------------------- Texte descriptif SPA -------------------- */

#texte
{
width: 850px;
margin: 0 auto; padding: 10px 0;
background: url("../../image/ap/texte.png") bottom;
}
#texte h6
{
margin: 0 0 0 40px; padding: 0;
font-family: verdana, "times new roman", arial, serif;
font-size: 11px;
color: #fff;
text-align: left;
}
#texte ul
{
margin: 0; padding: 5px 40px;
list-style-type: square;
}
#texte li
{
line-height: 16px;
margin: 5px 0; padding: 0;
font-family: verdana, "times new roman", arial, serif;
font-size: 11px;
color: #fff;
text-align: justify;
}

/* -------------------- Tableau : | Modèle | Photo | Descriptif | -------------------- */

table
{
width: 850px;
height: 25px;
margin: 2px auto; padding: 0;
font-family: verdana, "times new roman", arial, serif;
font-size: 10px;
color: #000;
background-image: url("../../image/ap/entete_tableau.png");
border-collapse: collapse;
}
.col1{width:170px; margin: 0; padding: 0 0 2px 0;}
.col2{width:202px; margin: 0; padding: 0 0 2px 0;}
.col3{width:468px; margin: 0; padding: 0 0 2px 0;}

/* -------------------- Début des tableaux explicatifs  + photo + galeries photos -------------------- */

.tab
{
width: 830px;
height: 280px;
margin: 0 auto; padding: 10px;
background-image: url("../../image/ap/tableau.png");
}

.cel1
{
width: 365px;
height: 20px;
margin: 20px 0 0 0; padding: 0;
text-align: center;
font-family: verdana, "times new roman", arial, serif;
font-size: 16px;
font-variant: small-caps;
color: #003;
}

.cel2
{
width: 360px;
height: 215px;
margin: 0; padding: 5px;
}
.cel2 p
{
margin: 0; padding: 5px;
text-align: center;
font-family: verdana, "times new roman", arial, serif;
font-size: 10px;
color: #000;
}
.cel2 p a
{
text-decoration: none;
border: none; outline: none;
}
.cel2 p a img
{
width: 240px;
height: 190px;
border: none;
}

.cel3
{
width: 415px;
height: 270px;
margin: -255px 0 0 380px; padding: 10px 20px 5px;
list-style-type: square;
}
.cel3 li
{
font-family: verdana, "times new roman", arial, serif;
font-size: 11px;
color: #000;
line-height: 18px;
text-align: justify;
}
.cel3 li a
{
font-family: verdana, "times new roman", arial, serif;
font-size: 11px;
color: #039;
text-decoration: underline;
outline: none; border: none;
}
.cel3 li a:hover
{
font-family: verdana, "times new roman", arial, serif;
font-size: 11px;
color: #3cf;
text-decoration: underline;
}
.ligne_bold
{
font-size: 12px;
font-weight: bold;
}

/* -------------------- Debut du Pied de Page qui comprend : ----------------------------------------*/
/*				- dans le Bas de page							*/
/*					- plan | mentions légales | url ABRIPACA			*/
/*					- le retour haut de page [ la flèche en image png ]		*/
/*				- dans le footer :								*/
/*					- url pyrprod							*/
/*-------------------------------------------------------------------------------------------------------------*/

#fleche
{
width: 90px;
height: 15px;
margin: 3px 0 0 180px; padding: 0;
position: absolute;
background: url("../../image/icone/retour_p1p2.png") left;
cursor: pointer;
}
a:hover #fleche{background: url("../../image/icone/retour_p1p2.png") right;}

#bas_de_page
{
width: 870px;
height: 40px;
margin: 0 auto; padding: 0;
background-image: url("../../image/ap/footer.png");
border-top: double 3px #000033;
}
#bas_de_page p
{
color: #000;
margin: 3px auto; padding: 0;
text-align: center;
}
#bas_de_page p a
{
color: #000;
font-family: verdana, "times new roman", arial, serif;
font-size: 10px;
text-decoration: none;
outline: none;
border: none;
}
#bas_de_page p a:hover
{
color: #999;
}
#footer
{
width: 870px;
margin: 10px auto; padding: 0;
}
#footer p
{
margin: 0; padding: 0;
text-align: center;
}
#footer p a
{
font-family: verdana, "times new roman", arial, serif;
font-size: 10px;
color: #999;
text-decoration: none;
outline: none;
border-top: solid 1px #999;
}

/* -------------------- LightBox v2.04 -------------------- */

#lightbox
{
width: 100%;
position: absolute;
left: 0;
line-height: 0;
text-align: center;
z-index: 100;
}

#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 50px; height: 10%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; background: url(../../image/lightbox/prev_p1.png) left bottom no-repeat;}
#nextLink { right: 0; float: right; background: url(../../image/lightbox/next_p1.png) right bottom no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../image/lightbox/prev_p2.png) left bottom no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../image/lightbox/next_p2.png) right bottom no-repeat; }

#imageDataContainer{ font: 11px Verdana, Helvetica, sans-serif; background-image: url(../../image/lightbox/ap_texte.png); margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:5px 10px 0 10px; color: #fff; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 20px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
margin: 0; padding: 0;
background-color: #000;
z-index: 90;
}