/* Général */
html{
    height: 100%; /* Voir -> Note 1 ci-dessous */
    font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */	
}

body{
    height: 100%; /* Voir -> Note 1 ci-dessous */
    margin: 0px;
	padding: 0px; /* Note -> 2 */
	font-family: Arial, Helvetica, FreeSans, sans-serif; /* 3 */
	font-size: 12px; /* -> 4 */
	color: #000000;
	background-color: #9b9b9b;
}

h1, h2, h3, h4, h5, h6{
	margin: 0px; /* -> 6 */
    padding: 0px;
}

p{
	margin: 0px;
    padding: 0px;
}

a{
	color: #000000;
}

a:hover, a:focus{
	color: #000000;
}

a img{
	border: none; /* -> 10 */
}

/*ul, ol{
	margin: 0px;
    padding: 0px;
}*/

#fond_haut{
    background: url(/images/fond_haut.gif) top left repeat-x;
}

#fond_contenu{
    background: #acacac url(/images/fond_contenu.png) top left repeat-x;
}

#fond_kawneer{
    background: url(/images/fond_kawneer.png) center top no-repeat;
}

#fond_pied{
   background: #9b9b9b url(/images/fond_pied.gif) top left repeat-x;
}

/* Entête */
#entete{
    height: 100px;
	padding: 0px 10px 0px 0px;
    margin: 0px;
}

#logo_haut{
    float: left;
    padding: 0px;
}

#header_droit{
    float: right;  
    padding: 0px 0px 0px 0px; 
}

/* Page */
#global_entete{
	height: 100px;
	width: 994px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

#global_contenu{
	width: 994px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

#global_pied{
    height: 190px;
    width: 994px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

/* Contenu */
#contenu{
	padding: 0px;
    margin:  0px;
}

#titre_accroche{
    position: absolute;
    margin:  70px 0px 0px 313px;  
    color: #ffffff;
    font-size: 19px;
    font-weight: normal;
}

#description{
    height: 383px;    
}

#description_texte h2{
    font-size: 21px;  
    font-weight: normal; 
    color: #303030; 
    line-height: 23px;
}

#description_texte{
    background: url(/images/fond_description.png) top left no-repeat;
    position: absolute;
    padding: 35px 25px 35px 25px;
    width: 240px;
    height: 302px;     
}

#animation{
    position: relative;
    margin:  0px 0px 0px 297px; 
}

#type_public{
    height: 265px;
}

#bloc_pro{
    background: url(/images/fond_pro.jpg) top left no-repeat;
    padding: 20px 0px 0px 200px;
    position: absolute;
    width: 295px;
    height: 235px;
}

#bloc_pro h1 a{
    color: #2e759f;
    font-size: 22px;
    font-weight: normal;
    text-decoration: none;    
}

#bloc_pro h1 a:hover{
    text-decoration: underline;    
}

#bloc_particulier{
    background: url(/images/fond_particulier.jpg) top left no-repeat;
    position: relative;
    margin:  0px 0px 0px 505px;
    padding: 20px 0px 0px 200px;
    width: 289px;
    height: 235px;
}

#bloc_particulier h1 a{
    color: #e00d18;
    font-size: 22px;
    font-weight: normal;
    text-decoration: none;    
}

#bloc_particulier h1 a:hover{
    text-decoration: underline;    
}

.texte{
    padding: 10px 20px 0px 20px;
    font-size: 11px;
}

.conclusion{
    font-size: 12px;
    margin: 30px 20px 0px -170px;
}

a.lien_conclusion{
    color: #ffffff;  
    font-weight: bold;
    text-decoration: none;  
}

a.lien_conclusion:hover{
    text-decoration: underline;  
}

/* Pied de page */
#pied{
	margin: 0px;
    padding: 18px 0px 0px 50px;
    color: #ffffff;
    font-size: 11px;
}

#pied_texte{
    position: absolute;    
}

#pied_logo{
    float: right;
}

a.lien_footer{
    color: #ffffff;
    text-decoration: none;
}

a.lien_footer:hover{
    text-decoration: underline;
}

/* --- NOTES ---

1.	Pour pouvoir utiliser une hauteur (height) ou une hauteur minimale
	(min-height) sur un bloc, il faut que sont parent direct ait lui-même une
	hauteur déterminée (donc toute valeur de height sauf "auto": hauteur en
	pixels, em, autres unités...).
	Si la hauteur du parent est en pourcentage, elle se réfère alors à la
	hauteur du «grand-père», et ainsi de suite.
	Ainsi, pour pouvoir utiliser un "min-height: 100%" sur div#contenu, il nous
	faut:
	- un parent (body) en "height: 100%";
	- le parent de body également en "height: 100%".

2.	Il faut éviter que les marges des enfants de div#global ne se transmettent
	à leur parent. Notamment, le margin-top du premier enfant (ici, div#entete),
	et le margin-bottom du dernier enfant (ici, div#pied).
	On évite ce problème grâce à la propriété CSS overflow, qui bloque la
	fusion des marges. En savoir plus sur la fusion des marges:
	http://web.covertprestige.info/test
		04-blocs-imbriques-et-fusion-des-marges.html

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

*/