html {
font-size: 100%;
}
html, body {
margin: 0; /* pour eviter les marges à l'exterieur */
padding:0; /* pour eviter les marges à l'interieur du conteneur*/
}
body {
text-align: center;       /* pour centrer la page ds le navigateur (IE) */
margin:5px;               /* marge haut exterieur au conteneur */
border:0;                 /* pas de bordure */
line-height:150%;         /* taille entre chaque ligne de caracteres 150% de la taille des caracteres */ 
font-size:0.79em;        
font-family: Arial, Helvetica, sans-serif;
color : #000000;          /* couleur noir par défaut pour la police de caracteres */
background-color:#CCCCCC;/*#ebecec  couleur d'arriere plan Gris de la page */

}
a {color:#000000; font-weight : bold; text-decoration : underline;} 
a:hover {color:#CC0033;text-decoration:none;}
h1 {margin : 5px 0 10px 0; font-size:2em;}  /* haut droite bas gauche */
h2 {margin : 5px 0 15px 0; font-size:1.5em;}  
h3 {margin : 5px 0 10px 0; font-size:1.25em;}  
h4 {margin : 5px 0 10px 0; font-size:1em;}  
p {margin : 0 0 10px 0;} /* marge top right bottom left */
img {border:none;}

.texteRouge {
color: #CC0033;
}  
.gras{
font-weight:bold;
}
.grasGros{
font-weight:bold;
font-size:1.2em; 
}
.listepuce{
list-style-type : square; /* type de liste à puce â défaut (carre) */
}
.alignerDroite{
text-align: right;       /* pour aligner un texte sur la droite*/
}

/* ==================*/
/* conteneur général */
/* ==================*/
div#conteneur {
width:760px; /* définition de la largeur*/
/* on remarque qu'il n'y a pas de hauteur de définit afin que la taille s'adapte au contenu*/
text-align:left;
background:#FFFFFF; /* blanc */
border-top:1px solid #555; /* gris foncé */
border-right:1px solid #555; 
border-left:1px solid #555; 
border-bottom:1px solid #555; 
margin:0 auto; /* pour centrer le site dans la fenêtre, associé à une largeur fixe */
position:relative; /* Le conteneur est la reference par rapport au positions absolues utilisées */
}
/* ================*/
/* Partie banniere */
/* ================*/
div#haut { 
width: 760px; /* hauteur de la nanniere */
height:160px; /* largeur de la banniere */
background-color: #a1779b; /* couleur violet clair */
}
/***** menu textuel horizontal présent dans la banniere*/
div#hautMenuBanniere {
width : 350px;
height:26px;
overflow : hidden; /* pour empecher le texte de sortir de la boite */
top: 114px;
right: 39px;
text-align:right;
background-color: transparent;
position:absolute;
}
div#hautMenuBanniere a {
color:#FFFFFF;
background-color: transparent;
text-decoration:none;
}
div#hautMenuBanniere a:hover {
color:#000000;
background-color: transparent;
}
/****** menu drapeaux horizontal présent dans la banniere */
div#hautMenuDrapeaux {
width : 120px;
height:29px;
overflow : hidden; /* pour empecher le texte de sortir de la boite */
top: 81px;
right: 26px;
text-align:right;
background-color: transparent;
position:absolute;
}
div#hautMenuDrapeaux a {
color:#FFFFFF;
background-color: transparent;
text-decoration:none;
border:none;
}
div#hautMenuDrapeaux a:hover {
color:#000000;
background-color: transparent;
}
/***** slogan dans la banniere */
div#haut h1 {
margin : 0;
width: 269px;
height: 68px;
overflow : hidden; /* pour empecher le texte de sortir de la boite */
top:32px;
left:375px;
color:#FFFFFF;
font : 140% Arial, Helvetica, sans-serif;
position:absolute;
}
/*****/
/***** partie gauche */
/*****/
div#gauche {
float : left;
width : 160px; 
background-color :#FFFFFF; 
text-align : left;
border-style: double;
border-color:#CCCCCC;
}
/* menu vertical sur la gauche */
#nav_g { 
margin: 0; /* remise à zéro les marges et padding, afin d'obtenir le même rendu sous tous les navigateurs. */
padding: 0;
list-style: none; /* supresssion des puces */
width: auto; 
text-align : left ;
margin-bottom:1px;
}
#nav_g li {
margin:0;
padding : 0;
line-height: 1.2em; /* taille entre chaque ligne de caracteres */
} 
#nav_g ul { 
list-style: none; 
margin:  0; 
padding: 0; 
width: auto; 
} 
#nav_g li a { 
color:#FFFFFF; 
text-decoration: none; 
display:block; /* pour avoir la même largeur sur ts les boutons */
padding : 10px 5px ; 
background-color:#CCCCCC; 
margin-top : 1px 
} 
#nav_g a:hover { 
color:#FFFFFF ;
background-color:#AAAAAA; /* gris foncé */
}
/* boite pour image immeuble ccm sur la gauche */
.boiteBas_g {
width : auto; /*170px;*/
height : 230px; /*158px; /*hauteur de la photo*/
background:url(../images/photo_batiment_ccm2C.jpg) no-repeat;
}
/*****/
/***** partie droite */
/*****/
div#droite {
background-color : #FFFFFF;
width : auto; 
margin: 0px 0px 0px 165px;/*175px;*/
padding-top : 15px; 
padding-left: 17px; 
padding-right: 16px; /*12px; */
text-align : justify;
padding-bottom: 17px;
} 
/* =============*/
/* pied de page */
/* =============*/
div#piedpage {
clear:both; /* astuce permettant de positionner le bas de page tt en bas qq soit la longueur des partie au dessus -> ds notre cas les boites en float du centre peuvent déborder, cette astuce permet de placer le pied de page tj en dessous des boites float*/
width :760px;
margin:0;
text-align:center;
color:#FFFFFF;
font-size:95%;
line-height:190%; /* taille entre chaque ligne de caracteres 190% de la taille des caracteres*/ 
background-color :#CC0033; /* rouge */
/*margin-top: 5px;*/
}
div#piedpage a{color:#FFFFFF; text-decoration : none;} 
div#piedpage a:hover {color:#FFFFFF;text-decoration:underline;}