/* ----------------------------------------------------------
Tutorial de cssdebutant.com (merci de laisser ce commentaire)
------------------------------------------------------------ */
body {
	background-color: #DCDC98;
	background-position: center top;
	background-image: url(../images/tableau.png);
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	font-family: "Comic Sans MS", cursive;
	font-size: 1em;
	/*line-height: 2em;*/
	margin: 0;
	padding: 0;
	text-align: center;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif;
}


#container{
	width:70%;
	margin: auto;
	text-align: left;
	/*border: 2px solid #996633;
	background: #fff url(../images/tableau.png) repeat;
	height: 800px;*/
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */
#topbar{
   width:auto; 
   display:block; 
   height:150px;
}
#main{width:auto; display:block;}
#column_left{width:2cm; margin-right:10px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, permet de faire deux colonne dans #container
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{
	width:auto;
	display:block;
	height:24px;
	color: #000;	
}
div#hsp_bandeau {
    background-image: url(../images/bandeau_txt.jpg);
	height: 100px;
	width: 700px;
	left: 5mm;
	top: -30px;
	float: left;
	position: relative;
	border: thin solid #000;
}
/* ----------------------------------*/
/* Mise en forme du text p3, p4, p5  */
/*---------------------------------- */
div#p3_contact
{
	font-weight: normal;
	text-align: left;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/bgs.gif);
	border: thin solid #FFF;
	left: 25mm;
	top: 5mm;
	right: 5mm;
	bottom: 5mm;
	padding: 10px 10px 50px 100px;
    margin:  0    0    0    50px ;
	height: 200px;
	width: 500px;
}
.p3_titre
{
	font-size: 24px;
	font-weight: bold;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	padding-left: 15px;
	border-bottom: 1px solid #9b2;
}
.p4_titre
{
	font-size: 18px;
	font-weight: bold;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	padding-left: 15px;
	border-bottom: 1px solid #9b2;
}
div#p3_gauche
{
    overflow: visible;
	text-align: left;
	line-height: normal;
    background-image: url(../images/bgs.gif);
    position: relative;
	width: 700px;
	left: 5mm;
	bottom:8mm;
	top:-20px;
	float: left;
	color: #333;
	border: thin solid #FFF;
}
.p3_deco
{
	font-size: 14px;
	font-style: italic;
	text-align: justify;
	text-indent: 0em;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left: 5mm;
	top: 5mm;
	right: 5mm;
	bottom: 25mm;
	padding: 5mm;
}
/* -----------------------*/
/* Mise en forme du text  */
/*----------------------- */
.p_deco
{
	font-size: 16px;
	font-weight: normal;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/bgs.gif);
	border: thin solid #FFF;
	left: 5mm;
	top: 5mm;
	right: 5mm;
	bottom: 5mm;
	padding: 5mm;
}

div#deco-haut
{
	border: medium #CC6666;
	position: relative;
	height: 15cm;
	width: 90%;
	left: 0cm;
	float:left;
	bottom: 10px;
}
div#deco-table
{
	border: medium #CC6666;
	position: relative;
	height: 15cm;
	width: 22cm;
	left: 0cm;
	float:left;
	bottom: 25px;
	
}
div#deco-gauche
{
	overflow: visible;
	text-align: center;
	line-height: normal;
	position: relative;
	width: 11cm;
	height: 15cm;
	left: 5mm;
	float: left;	
}
div#photo-gauche
{
	background: url(../images/chandelier.jpg) no-repeat -1cm -1cm;
	overflow: auto;
	text-align: left;
	line-height: normal;
	position: relative;
	width: 11cm;
	height: 9cm;
	visibility: visible;
	border: thin none #FFF;
}
div#p_gauche
{
	position: relative;
	width: 10cm;
	height: 5cm;
	float: left;
	bottom: 4cm;
}
div#deco-droite
{
	overflow: visible;
	text-align: center;
	position: right;
	width: 11cm;
	height: 15cm;
	float: right;
	right: 5cm;
}
div#photo-droite
{
	background: url(../images/salon.jpg) no-repeat left;
	overflow: visible;
	text-align: right;
	position: relative;
	width: 11cm;
	height: 9cm;
}
div#p_droite
{
	position: relative;
	width: 10cm;
	height: 5cm;
	bottom: 2cm;
}
/* ---------------------- */
/* MISE EN FORME DU TEXT  */
/* ---------------------- */
div#contenu
{
	padding: 0 30px 0 1px;
	left: auto;
}
div#p3-contenu
{
	padding: 0 0 0 1px;
	left: auto;
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */
div#contenu h1
{
	line-height: 30px;
	font-size: 1.4em;
	color: #FFFFFF;
	border-bottom: thin solid #FFFFFF;
	padding-left: 10px;
}
div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #9b2 ;
	border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image,
 on décale le texte en fonction de l'image, on donne une couleur au texte et
 on met une bordure basse */
div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on
 ne donne pas d'image décorative cette fois ci */
div#contenu p
{
	text-align: justify;
	text-indent: 2em;
	line-height: 1.7em;
	font-size: 14px;
	color: #333;
	position: relative;
	top: 1px;
	right: 20px;
	left: 1px;
	font-style: italic;
	font-weight: normal;
}
/* On rend les paragraphes plus propre, alignement justifié,
 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
div#contenu a:hover
{
	color: #9b2;
}

/* Mise en forme de la partie pied de page */
div#footer
{
	position:absolute;
	top: 800px;
	padding-right: 10px;
	line-height: 30px;
	text-align: center;
	color: #000;
	float: center;
}
/* Mise en forme de la partie pied de page, page hs_prestation */
div#hsp_footer
{
	position:absolute;
	top: 1910px;
	padding-right: 10px;
	line-height: 30px;
	text-align: center;
	color: #000;
	float: center;
}
.hsp_p_1{
	font-size: 46px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: 100px;
	top: -20px;
	font-family: Arial, Helvetica, sans-serif;
	}
	
.hsp_p_2{
	font-size: 46px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: 300px;
	top: -20px;
	font-family: Arial, Helvetica, sans-serif;
	}
	
.hsp_p_3{
	font-size: 46px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: 530px;
	top: -20px;
	font-family: Arial, Helvetica, sans-serif;
	}
	
.hsp_p_c{
	font-size: 32px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: -20px;
	top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	}
.hsp_p_r{
	font-size: 32px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: 70px;
	top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	}
.hsp_p_d{
	font-size: 32px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	float: left;
	position: relative;
	left: 130px;
	top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	}
pre
{
	overflow: auto ;
	background: #CC9966;
	border: 2px solid #33CC99;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
 et un léger espace entre le texte et les bords du pre */
pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */
pre span.comment
{
	color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
 utilisés pour les commentaires */
h1.header
{
	height: auto;
	background-image: url(../images/handm_bg-negatif.png);
	background-repeat: no-repeat;
	background-position: left;
}
h1#header p
{
	width: 300px;
	height: 150px;
	display: block;
	background: url(../images/Logo_text.png) no-repeat;
	position: relative;
	left: 155px;
	top: -1px;
	text-indent: 50px;
}/* Mise en place de l'image correspondant au text du logo utilisant la balise p */
h1#header a
{
	width: 150px;
	height: 135px;
	display: block;
	background: url(../images/Logo3.png) no-repeat;
	position: relative;
	left: 15px;
	top: -20px;
	text-indent: 50px;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */

h2#header {
	font-size: 12px;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	top: 9px;
	right: 600px;
	background-position: right;
	height:	100px;
	width: 234px;
	position: absolute;
	left: 800px;
	color: #666666;
}
h2 {
	color: #CCCCCC
	}
h3 {	
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1.15em;	
	background-color: #006666;  	
	color: #DCDCDC
	}
td, th {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 2em;
	color: #333333
}
textarea {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em
}
ul {	
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em;	
	font-size: 14px;
	font-style: italic;
	list-style-type: square;	
	list-style-position: outside;
	padding-left: 110px;
}
#navbar{
	display:block;
	padding-left: -10px;
	padding-bottom: 20px;
	height: 35px;
	float:center;
	bottom: 30px;
	position: relative;
}
#menu1, #menu1 ul /* Liste */     
{
	font-size: 1em;	
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 25px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu1 /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu1 a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond , actuellement noir*/        
        color : #fff; /* couleur du texte, actuellement blanc */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
		background     : transparent url("../images/menu9.gif") repeat ;
}
#menu1 li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu1 li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu1 li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu1 li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
        width : 244px; /* Double largeur */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu1 li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
        width : 244px; /* Double largeur */
}
#menu1 li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu1 li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu1 a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu1 li:hover ul ul, #menu1 li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu1 li:hover ul, #menu1 li li:hover ul, #menu1 li.sfhover ul, #menu1 li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément 
de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#menu1 li ul li a 
{
         background     : transparent url("../images/menu9.gif") repeat ;
         width : 185px; /* Double largeur */
}


/* tableau description des packs hsp_prestation */
.hsp_table{
	border-collapse: separate;
   border-spacing : 1px;
   left:5px;
}
.hsp_td_vide{
	empty-cells:hide;
	height : 6px;
	}
.hsp_td_titre{
	border: 1px solid black;
	width : auto;
	height : 6px;
	text-align: center;	
}
.hsp_td_description{
	border: 1px none black;
	width : 270px;
	height : 10px;
	bgcolor: #999999;
	text-align: left;
	vertical-align: baseline;
	white-space: normal;
	background-color: #CCC;
}
.hsp_td_act{
	width : 100px;
	height : 8px;
	font-size: 18px;
	text-align: center;
	color: #000;
	font-style: normal;
	font-weight: bold;
	text-decoration: overline;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: black;
	border-right-color: black;
	border-bottom-color: black;
	border-left-color: black;
}
.hsp_td_desact{
	width : 5px;
	height : 10px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: black;
	border-right-color: black;
	border-bottom-color: black;
	border-left-color: black;
}

/* tableau de photos page hs_realisation */
.hsr_table{
   border-collapse: separate;
   border-spacing : 2em;
   
}
.hsr_td_g_1{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align: baseline;
	background-image: url(../images/ph_1_av.jpg); background-repeat:no-repeat;
	}
.hsr_td_d_1{
	border: 1px solid black;
    width : 200px;
    height : 150px;
    vertical-align: top;
    background-image: url(../images/ph_1_ap.jpg); background-repeat:no-repeat;
	}
.hsr_td_g_2{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align: bottom;
	background-image: url(../images/ph_2_av.jpg); background-repeat:no-repeat;
 	}
.hsr_td_d_2{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align:middle;
	background-image: url(../images/ph_2_ap.jpg); background-repeat:no-repeat;
	}
.hsr_td_g_3{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align: bottom;
	background-image: url(../images/ph_3_av.jpg); background-repeat:no-repeat;
 	}
.hsr_td_d_3{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align:middle;
	background-image: url(../images/ph_3_ap.jpg); background-repeat:no-repeat;
	}
.hsr_td_g_4{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align: bottom;
	background-image: url(../images/ph_4_av.jpg); background-repeat:no-repeat;
 	}
.hsr_td_d_4{
	border: 1px solid black;
    width : 200px;
    height : 150px;
	vertical-align:middle;
	background-image: url(../images/ph_4_ap.jpg); background-repeat:no-repeat;
	}

.hsr_td_titre{
    vertical-align: top;
	height : 20px;
	border: none;
}

/* tableau de photos page hs_accueil */
.hsa_table{
	border-collapse: separate;
	border-spacing : 1em;
	   
}
.hsa_td_g_1{
	width : 11cm;
	height : 8cm;
	vertical-align: top;
	background: url(../images/chandelier.jpg) no-repeat -1cm -1cm;
}
.hsa_td_d_1{
	width : 11cm;
    height : 8cm;
    vertical-align: top;
    background-image: url(../images/salon.jpg); background-repeat:no-repeat;
}
.hsa_td_g_2{
	width : 11cm;
    height : 5cm;
 	vertical-align: top;
	
}
.hsa_td_d_2{
	width : 11cm;
    height : 5cm;
 	vertical-align: top;
	
}
.hsa_td_titre{
    vertical-align: top;
	height : 20px;
	border: none;
}
.hsa_p_deco
{
	font-size: 16px;
	font-weight: normal;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/bgs.gif);
	border: thin solid #FFF;
	position: relative;
	padding-right: 5px;
	padding-left: 5px;
	
}