*{
margin:0;
padding:0;
border:0;
}

body{
background:#006699 url(img/bg-bleu.jpg) repeat-x top;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:0.8em;
line-height:150%;
padding-bottom:10px;
}

acronym{
cursor:help;
}

/* ######################################### GRANDES DIVISIONS DE LA PAGE ######################################### */
#page{
position:relative;
width:750px;
margin:10px auto;
padding-bottom:10px;
background:#FFFFFF;
border-bottom:#CAD9E0 8px solid;
}

#access{
position:relative;
width:750px;
height:1.8em;
text-align:center;
background-color:#CAD9E0;
color:#000000;
}

#header{
position:relative;
width:750px;
margin:0 auto;
background:#FFFFFF;  
}

#menu{
width:100%;
margin:10px 0;
padding-top:10px;
}

#contenu{
padding:1em 0;
color:#000000;
font-size:0.9em;
clear:both;
background:#FFFFFF;
}

#footer{
width:100%;
clear:both;
text-align:center;
font-size:0.9em;
color:#000000;
background:#FFFFFF url(img/bg-footer.jpg) repeat-x top; /* corrige un espace blanc quand la valeur du li (voir partie div #footer) est de 25% */
}

/* ######################################### DIV #ACCESS ######################################### */
#access ul{
margin:0 auto;
padding-bottom:0.2em;
}

#access li{
display:inline;
list-style-type:none;
margin-right:0;
font-size:0.7em;
letter-spacing:0.1em;
}

#access li a{
color:#000000;
text-decoration:none;
}

#access li a:hover{
color:#006699;
}

/* ######################################### DIV #HEADER ######################################### */
#header img{
margin:10px 4px 0 10px;
float:left;
}

#header ul{
float:left;
color:#000000;
list-style-image:url(img/header-li.jpg);
font-size:0.9em;
font-family:Courier, Arial, Verdana, Helvetica, sans-serif;
}

#header-prestas{
width:210px;
padding:0.8em 0 0.8em 40px;
}

#header-prestas li{
color:#990066;
}

#header-contact{
width:200px;
padding:0.8em 0 0.8em 40px;
}

#header-contact li{
color:#006699;
}



/* ######################################### DIV #MENU ######################################### */
#menu{
clear:both;
font-size:0.9em;
}

#menu ul{
width:100%;
}

#menu li{
float:left;
list-style:none;
width:20%;
text-align:center;
letter-spacing:0.1em;
}

#menu li a{
height:2.3em;
line-height:2.3em;
padding-bottom:0.2em;
color:#000000;
font-weight:bold;
display:block;
text-decoration:none;
background:#FFFFFF url(img/bg-menu.jpg) repeat-x bottom;
border-bottom:2px solid #446B7E;
}

#menu li a:hover, #menu li a.current{
display:block;
text-decoration:none;
background:#FFFFFF url(img/bg-menu-hover.jpg) repeat-x bottom;
}


/* ######################################### DIV #CONTENU ######################################### */
#contenu p{
margin-top:10px;
}

#contenu a{
color:#003366;
text-decoration:none;
border-bottom:#CC0099 1px dashed;
}

#contenu a:visited{
color:#000000;
}

#contenu a:hover{
color:#CC0099;
}

acronym{
border-bottom:#CCCCCC dotted 1px;
}

#contenu li>a:hover, #contenu p>a:hover{   /* Hack IE pour contourner un problème de décalage sur un :hover */
border-bottom:#CC0099 1px solid;
}

#contenu #fil-ariane{
margin:0 20px;
color:#666666;
font-size:0.9em;
margin-top:0;
}

#fil-ariane a, #fil-ariane a:visited{
color:#666666;
border-bottom:#666666 1px solid;
}

#contenu #fil-ariane a:hover{
border-bottom:#666666 1px solid;
}

#contenu .suite{
text-align:right;
color:#333333;
font-size:0.9em;
}

#article{
float:left;
width:435px;
margin:0.5em 10px 1em 10px;
padding:0.2em 10px 1em 10px;
border-top:1px dashed #CCCCCC;
border-bottom:1px dashed #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
}

#contenu>#article{
width:440px;
margin:0.5em 10px;
}

h1{
margin:0 2% 1em 5%;
padding:0.3em 0 0.3em 25px;
font-size:1.6em;
font-family:"Century Gothic", Verdana, Arial, Helvetica, sans-serif;
clear:both; /* Placement du titre sous le menu */
color:#000000;
background:transparent url(img/bg-hn.jpg) no-repeat left center;
border-bottom:#000 1px solid;
}

h2{
width:93%;
margin:2em 0.1em 0.8em 1em;
font-size:1.1em;
color:#006699;
border-bottom:#CCCCCC 1px solid;
}

h3{
margin:0.5em 0 0 1.5em;
font-size:1em;
letter-spacing:0.2em;
font-family: arial, Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
}

#article ul{
list-style-type:square;
margin-left:20px;
}

#article ol{
margin-left:20px;
}

#article li span, .racc{
color:#990066;
}

.bloc-droite{
float:right;
margin:0.5em 10px;
padding:1em 10px 1.3em 10px;
width:206px;
background:#FFFFFF url(img/bg-nav.jpg) repeat-y;
border-top:1px dashed #990066;
border-bottom:1px dashed #990066;
border-left:1px solid #990066;
border-right:1px solid #990066;
clear:right;
}

#contenu>.bloc-droite{
width:226px;
margin:0.5em 10px;
}

.bloc-droite ul{
list-style:none;
}

.bloc-droite h3{
margin:0.5em 0 1em 0.5em;
font-size:1em;
letter-spacing:0.2em;
font-family: arial, Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#990066;
}

#nav ul{
margin-top:1em;
text-align:center;
line-height:2em;
}

#nav li{
width:100%;
border-bottom:1px solid #CCCCCC;
margin-top:0.5em;
text-align:right;
}

#nav li a{
border:0;
}

#nav li a:visited{
color:#003366;
}

#nav li a:hover{
color:#990066;
border:0;
}


/* ######################################### DIV #RECHERCHE ET CONTACT ######################################### */
#recherche form{
text-align:center;
}

#recherche input, #contact input, #contact textarea{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
border:1px solid #CCCCCC;
padding:2px;
margin:3px;
}

#recherche input:focus, #contact input:focus, #contact textarea:focus{
background-color:#CAD9E0;
border:1px solid #006699;
}

#contact{
margin:1em 0;}

.mail-sent{
border:1px solid #006699;
background-color:#CAD9E0;
padding:6px;
}

/* #########################################  #PAGES REALISATIONS
######################################### */
img.rea{
width:220px;
float:left;
padding:0 1em 0.3em 0;
}

#contenu .notes{
color:#666666;
font-size:0.8em;
padding-left:2%;
}


/* ######################################### DIV #FOOTER ######################################### */
#footer ul{
margin:0 auto;
padding:0;
width:100%;
border-top:2px solid #446B7E;
text-align:center;
background:#FFFFFF url(img/bg-footer.jpg) repeat-x top;
}

#footer li{
display:inline;
list-style:none;
letter-spacing:0.1em;
padding:0;
font-size:0.9em;
}

#footer li a{
color:#000000;
text-decoration:none;
}

#footer li a:hover{
color:#006699;
}

#footer-info{
clear:both;
padding-top:10px;
color:#999999;
}

#footer-w3c{
text-align:right;
color:#999999;
font-size:0.9em;
padding-right:5px;
}

#footer-w3c a{
color:#999999;
}