body
{
width: 100%;
margin: 260px 0 0 0; padding: 0; /* margin-top de 260px pour descendre le corps*/
background-color: #fff;
}

#haut_fixe
{
width: 100%;
height: 260px;
position: absolute;
top: 0; left: 0; margin: 0; padding: 0;
background-image: url("../image/ap/haut_fixe.png");
z-index:10;
}

#en_tete
{
width: 800px;
height: 150px;
position: absolute;
top:0; left: 50%; margin-left: -400px; padding: 0;
cursor: pointer;
z-index:20;
}

#header
{
width: 800px;
height: 150px;
position: absolute;
top:0; left: 50%; margin-left: -400px; padding: 0;
background-image: url("../image/ap/header.png");
cursor: pointer;
}

/* -------------------- Début navigation primaire : Liens vers les Rubriques -------------------- */

#menu
{
width: 820px;
height: 100px;
position: absolute;
top: 0; left: 50%; margin: 209px 0 0 -410px; padding: 0;
background-image: url("../image/ap/menu.png");
z-index: 30;
}

#accueil
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 10px; padding: 0;
background: url("../image/bouton/accueil_p3.png") top;
cursor: pointer;
}
/*
#accueil:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 10px; padding: 0;
background: url("../image/bouton/accueil_p1p2.png") bottom;
cursor: pointer;
}
*/
#reference
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 110px; padding: 0;
background: url("../image/bouton/reference_p1p2.png") top;
cursor: pointer;
}
#reference:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 110px; padding: 0;
background: url("../image/bouton/reference_p1p2.png") bottom;
cursor: pointer;
}

#creation
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 210px; padding: 0;
background: url("../image/bouton/creation_p1p2.png") top;
cursor: pointer;
}
#creation:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 210px; padding: 0;
background: url("../image/bouton/creation_p1p2.png") bottom;
cursor: pointer;
}

#mailing
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 310px; padding: 0;
background: url("../image/bouton/mailing_p1p2.png") top;
cursor: pointer;
}
#mailing:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 310px; padding: 0;
background: url("../image/bouton/mailing_p1p2.png") bottom;
cursor: pointer;
}

#tarif
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 410px; padding: 0;
background: url("../image/bouton/tarif_p1p2.png") top;
cursor: pointer;
}
#tarif:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 410px; padding: 0;
background: url("../image/bouton/tarif_p1p2.png") bottom;
cursor: pointer;
}

#formation
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 510px; padding: 0;
background: url("../image/bouton/formation_p1p2.png") top;
cursor: pointer;
}
#formation:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 510px; padding:0;
background: url("../image/bouton/formation_p1p2.png") bottom;
cursor: pointer;
}

#assistance
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 610px; padding: 0;
background: url("../image/bouton/assistance_p1p2.png") top;
cursor: pointer;
}
#assistance:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 610px; padding:0;
background: url("../image/bouton/assistance_p1p2.png") bottom;
cursor: pointer;
}

#contact
{
width: 100px;
height: 40px;
position: absolute;
margin: 11px 0 0 710px; padding: 0;
background: url("../image/bouton/contact_p1p2.png") top;
cursor: pointer;
}
#contact:hover
{
width: 100px;
height: 40px;
position: absolute;
margin: 10px 0 0 710px; padding: 0;
background: url("../image/bouton/contact_p1p2.png") bottom;
cursor: pointer;
}

/* --------------------------------------------------
Début du Corps de Page qui comprend :
	- le titre [ avec image en background ]
	- la ligne de séparation
	- à gauche la partie "texte"
	- à droite la partie "menu_droite"
-------------------------------------------------- */

#corps
{
width:820px;
position: absolute;
left: 50%; margin: 0 0 0 -410px; padding: 20px 0 30px 0; /* Pas de margin-top. C'est le margin du body qui le fait descendre*/
background-image: url("../image/ap/corps.png");
}

h1
{
height: 50px;
margin: 0; padding: 0; text-indent: -10000px;
background-image: url("../image/titre/accueil_h1.png");
}

.hr1
{
width: 720px;
height: 1px;
margin: 10px auto; padding: 0;
color: #000;
background-color: #000;
border: none;
}

abbr
{
cursor: help;
}

/* -------------------- Début partie gauche : "texte" -------------------- */

#texte
{
float: left;
width: 500px;
margin: 0 0 0 30px; padding: 0;
border-right: solid 1px #ccc;
}

#texte p
{
line-height: 20px;
margin: 0 30px; padding: 10px; text-indent: 20px;
text-align: justify;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 14px;
color: #000;
}

#texte p:first-letter
{
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 16px;
font-weight: bold;
color: #336699;
}

#texte a
{
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 14px;
color: #6699cc;
text-decoration: none;
border: none; outline: none;
}

#texte a:hover
{
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 14px;
color: #999;
text-decoration: underline;
}

.hr2
{
width: 450px;
height: 1px;
margin: 30px auto; padding: 0;
color: #000;
background-color: #000;
border: none;
}

/* -------------------- XiTi -------------------- */

#xiti_logo
{
width: 80px;
height: 15px;
margin: 0 auto; padding: 0;
}

/* -------------------- Début partie droite : "menu_droite" -------------------- */

#menu_droite
{
width: 245px;
margin: 0 0 0 535px; padding: 0;
background-image: url("../image/ap/menu_droite.png");
}

#menu_droite p
{
line-height: 16px;
margin: 0 5px; padding: 5px; text-indent: 0;
text-align: justify;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 12px;
color: #000033;
}

#menu_droite a
{
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 12px;
color: #6699cc;
text-decoration: none;
border: none; outline: none;
}

#menu_droite a:hover
{
color: #999;
text-decoration: none;
}

#menu_droite h4
{
line-height: 20px;
margin: 10px auto; padding: 0; text-indent: 0;
text-align: center;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 15px;
font-variant: small-caps;
color: #003366;
border: solid 1px #000033;
}

.date
{
font-weight: bold;
text-decoration: underline;
}
#menu_droite #portfolio
{
width: 150px;
height: 150px;
margin: 10px 0 10px 47px; padding: 0;
cursor: pointer;
}

#menu_droite #outils
{
width: 245px;
height: 30px;
text-align: center;
margin: 10px auto 20px auto; padding: 0; text-indent: 0;
}

#menu_droite #outils img
{
margin: 0; padding: 3px;
text-decoration: none;
border: none;
outline: none;
}

#menu_droite #outils a.icone_outil
{
position: relative;
}
#menu_droite #outils a.icone_outil span
{
display: none;
}
#menu_droite #outils a.icone_outil:hover
{
background: none;
z-index: 70;
cursor: pointer;
}
#menu_droite #outils a.icone_outil:hover span
{
display: inline;
position: absolute;
white-space: nowrap;
top: 40px;
left: -10px;
background-image: url('../image/icone/icone_outil.png');
padding: 3px;
border: solid 1px #000033;
}

#menu_droite #recherche
{
width: 245px;
height: 30px;
margin: 10px auto; padding: 0;
}
#menu_droite #recherche p
{
margin: 0; padding: 0;
text-align: left;
}
#menu_droite input
{
display: block;
margin: 0; padding: 0;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
color: #000033;
border: solid 1px #ccc;
}

#menu_droite #recherche #champ
{
float:left;
width: 213px;
height: 21px;
padding: 4px 0 0 0;
text-align: center;
background-image: url("../image/bouton/champ.png");
}
#menu_droite #recherche #submit
{
width: 30px;
height: 27px;
text-align: center;
color: #6699cc;
background-color: #d3d3d3;
cursor: pointer;
}
#menu_droite #recherche #submit:hover
{
color: #999;
text-decoration: none;
border: none; outline: none;
}

/* --------------------------------------------------
Début Footer fixe comprenant 3 parties :
	- partie bas_gauche : plan et mentions
	- partie bas_milieu : retour haut de page
	- partie bas_droite : url pyrprod + validations
-------------------------------------------------- */

#footer
{
width: 100%;
height: 20px;
position: fixed;
bottom: 0; left: 0; margin: 0; padding: 0;
background-image: url("../image/ap/bas_fixe.png");
}
#bas_gauche
{
width: 25%;
height: 20px;
position: absolute;
bottom: 2px; left: 0; margin: 0; padding: 0;
}
#bas_gauche  p
{
margin: 0; padding: 0;
color: #999;
text-align: center;
}
#bas_gauche a
{
color: #999;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 11px;
text-decoration: none;
border: none; outline: none;
}
#bas_gauche a:hover
{
color: #6699cc;
text-decoration: none;
}

#bas_milieu
{
width: 50%;
height: 20px;
position: absolute;
bottom: 3px; left: 50%; margin: 0 0 0 -25%; padding: 0;
}
#bas_milieu  p
{
margin: 0; padding: 0;
text-align: center;
}
.haut_de_page
{
width: 80px;
height: 15px;
position: absolute;
bottom: 0; left: 50%; margin: 0 0 0 -40px; padding: 0;
background: url("../image/icone/haut_de_page.png") right;
cursor: pointer;
}
a:hover .haut_de_page
{
background: url("../image/icone/haut_de_page.png") left;
}

#bas_droite
{
width: 25%;
height: 20px;
position: absolute;
bottom: 2px; right: 0; margin: 0; padding: 0;
}
#bas_droite  p
{
margin: 0; padding: 0;
color: #999;
text-align: center;
}
#bas_droite a
{
color: #999;
font-family: "trebuchet ms", verdana, "times new roman", arial, serif;
font-size: 11px;
text-decoration: none;
border: none; outline: none;
}
#bas_droite a:hover
{
color: #6699cc;
text-decoration: none;
}