/* CSS Document */

* {margin: 0; padding: 0; border: 0; }
hr { clear: both; visibility: hidden; }
body { background-color: black;
 }

/* ------------------------------------
          POSITIONNEMENT
------------------------------------*/
/* wrapper */
#wrapper {
position: relative;
width: 800px;
height: 600px;
margin: auto;
background-color: white;
background-repeat: no-repeat;
}
#index #wrapper { background-image: url(commun/index.jpg); }
#sites #wrapper { background-image: url(commun/web.jpg); }
#imprimes #wrapper { background-image: url(commun/print.jpg); }
#formations #wrapper { background-image: url(commun/formations.jpg); }

/* header */
#header {
height: 88px;
}


/* chapeau */
#chapeau {
position: absolute;
top: 130px;
left: 200px;
width: 500px;
height: 150px;
border-right: 1px solid #fe8d11;
border-bottom: 1px solid #fe8d11;
}
/*exemples*/
#exemples {
position: absolute;
top: 277px;
right: 100px;
height: 20px;
width: 500px;
text-align: right;
font: bolder 0.7em/11px Verdana, Arial, Helvetica, sans-serif;
color: #fe8d11;
border-bottom: 1px solid #fe8d11;
}
/*contenu*/
#contenu {
position: absolute;
top: 329px;
right: 15px;
height: 265px;
width: 375px;
padding-right: 25px;
overflow: auto;
}
#formations #contenu { width: 275px; }

/*descriptif (page Formation)*/
#descriptif {
position: absolute;
top: 329px;
left: 50px;
height: 205px;
width: 400px;
overflow: auto; 
}
/*animation*/
#animation {
position: absolute;
top: 329px;
left: 75px;
height: 225px;
width: 325px;
}
#index #animation { top: 300px;left: 0px; height: 80px; width: 430px; }
#imprimes #animation { left: 0px; width: 400px; }
#formations #animation { top: 540px; left: 0px; height: 20px; width: 450px; }

/* footer */
#footer {
position: absolute;
bottom: 0;
height: 20px;
width: 800px;
background-color: #fe8d11;
}
/* ------------------------------------
          HEADER
------------------------------------*/
#header h1 {
font: bold italic 3em/0.5em Verdana, Arial, Helvetica, sans-serif;
color: #fde582;
padding-top: 25px;
text-align: left;
}

#header h2 {
font: bold italic 0.7em/20px Verdana, Arial, Helvetica, sans-serif;
color:  #FCD432;
text-align: right;
margin-top: 19px;
margin-right: 25px;
padding-right: 15px;
height: 20px;
background-color: black;
}
#header a {
color:  #FCD432;
text-decoration: none;
}
#header a:hover { color: #fc441d; }
#index a#lien1, #sites a#lien2, #imprimes a#lien3, #formations a#lien4 { color: #fc441d; }

/* ------------------------------------
          EXEMPLES
------------------------------------*/
#exemples img {
position: relative;
top: 20px;
right: 0;
}

/* ------------------------------------
          CONTENU
------------------------------------*/
#chapeau h2 {
font: italic 1em "Times New Roman", Times, serif;
margin-bottom: 1em;
height: 150px;
}
#contenu p {
float: left;
width: 375px;
margin-top: 20px;
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
text-align: left;
clear: both;
}
#formations #contenu p { width: 275px; }
#contenu img { margin-bottom: 10px; }
#sites #contenu img { margin-top: 17px; }
#imprimes p, #sites p { text-align: right; }
p img { float: right; margin-left: 20px; }
 
 #sites #contenu a, #sites #contenu a:hover, #sites #contenu a:active, #sites #contenu a:visited { font-weight: bolder; }
 
 /* ------------------------------------
         DESCRIPTIF
------------------------------------*/
 #descriptif p {
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin-top: 5px;
}
#descriptif h3 {
font: bolder 0.7em/11px Verdana, Arial, Helvetica, sans-serif;
color: #fe8d11;
margin-top: 20px;
}
/* ------------------------------------
          FOOTER
------------------------------------*/
#footer p {
font: bold italic 0.8em "Times New Roman", Times, serif;
color: white;
text-align: center;
line-height: 20px;
}
#footer a {
color: white;
text-decoration: none;
}
#footer a:hover { color: white; }
#footer span { font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; }