@charset "utf-8";
/* CSS Document */
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #e5dfdc;
	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000000;
}
h1, h2, h3, h4, h5, h6, p {
    margin: .0em 0 .2em 0; /* Rapproche le titre du texte. (5) */
}
#container { 
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	position:absolute;
	width:955px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
	height:590px;
	background: #FFFFFF;
	top:50%;
	left:50%;
	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
/*	border: 1px solid #000000;
*/	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	margin-left:-477px;
	margin-top:-292px;
	font-size:.8em;
	} 
#header { 
	background: url(images/bandeau-haut.jpg) no-repeat; 
	height:194px;
	width:955px;
} 
#header ul, #footer ul {
	padding:0;
	margin:0;}
#rappel{
	margin-left:855px;
	top:60px;
	border:0px;}
#zonedroite{
	float:right;
	width:370px;
	height:390px;
	}
#simulation {
	position:absolute;
 	height:190px;
	padding: 0px 5px;
	}
#mainContent { 
	position:absolute;
	float:left;
	background:url(images/fond-gauche.jpg) no-repeat left;
	width:580px;	
	height:390px;

	} 
#footer { 
	padding: 0 10px 0 20px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	background:url(images/fond-nav-bas.gif) no-repeat;
} 
#footer a {
	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
	color:#FFF;
	font-weight:bold;
	text-decoration:none;

}
.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

div#nav{
	position:absolute;
	top:167px;
	width:955px;
	z-index:200;
	left:0px;
	}

	/* ----------------------------- start #nav ----------------------------- */
#nav img { border: none;}
#nav li { display: inline; list-style:none; }
#nav li a{ float: left; display:block;  height: 27px; }
#nav li a img {  border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; }
#nav li a:hover img { visibility:visible; }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #nav ----------------------------- */


/* ----------------------------- start #nav ids ----------------------------- */
#one { background:url(images/bt-accueil-over.gif) no-repeat left bottom; }
#two { background:url(images/bt-pourquoi-over.gif) no-repeat left bottom; }
#three { background:url(images/bt-avantages-over.gif) no-repeat left bottom; }
#four { background:url(images/bt-simulation-over.gif) no-repeat left bottom; }
#five { background:url(images/bt-contact-over.gif) no-repeat left bottom; }
#six { background:url(images/bt-parrainage-over.gif) no-repeat left bottom;}
#seven { background:url(images/bt-infos-over.gif) no-repeat left bottom; }
#nine { background:url(images/bt-lexique-over.gif) no-repeat left bottom; }

div#navBas{
	position:absolute;
	top:574px;
	left:650px;
	width:300px;
	}
*html div#navBas{top:582px;}
*+html div#navBas{top:584px;}
	/* ----------------------------- start #nav ----------------------------- */
#navBas img { border: none; }
#navBas li { display: inline; list-style:none; }
#navBas li a{ float: left; display:block;  height: 13px; }
#navBas li a img {  border:none; vertical-align:bottom; /* for IE6 */}
#navBas li a:hover { visibility:visible; }
#navBas li a:hover img { visibility:visible; }
#navBas li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #nav ----------------------------- */
*+html #navBas li a{ height: 15px; }

/* ----------------------------- start #nav ids ----------------------------- */
#un { background:url(images/bt-rejoindre-over.gif) no-repeat left bottom; }
#trois { background:url(images/bt-mentions-over.gif) no-repeat left bottom; }

#liensBas{
		width:955px;
		color:#b1a7a2;
		font-size:.8em;
		text-align:center;	background: #e5dfdc;
}

#liensBas a{
	color:#908884;
	text-decoration:none;
}
#liensBas a:hover{
		color:#b1a7a2;
	text-decoration:underline;
}
	
	
/*************************************************SCOLLBAR*/
div#scrollbar {
    display:none; /* hide from incapable */
    }
#droite{
	background:url(images/fond-texte-acc.gif) no-repeat top;
	width:346px;
	height:171px;
	padding:10px 10px 0px 10px;
	margin-top:10px;
	}
#droite p{
	position:absolute;
	padding-right:20px;
	overflow:auto;
	height:140px;
	margin:10px 20px 10px 30px;
	font-size:.8em;
	width:300px;
	text-align:justify;}
#droite a{
	color:#000;
	text-decoration:none;}
#droite a:hover{
	color:#000;
	text-decoration:underline;}