/* -------- Styles génériques --------- */

img{border:0 none;}
.espaceTexte{display:block; margin-top:8px;}

/* ---------------------------- */

body{
	position:relative;
	margin:0 auto;
	padding:0;
	background:url(images/fond_body.jpg) repeat-x scroll 0 0 #f3f7fd;
	font-size: 18px;
	text-align: center;
}

#fond{
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	width:100%;
	height:6500px;
	margin:0 auto;
	padding:0;
	background:url(images/barres_nuages6.png) repeat-y fixed center top transparent;
}

#contenu{
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
	margin:0 auto 0;
	padding:0 0 10% 0;
	text-align:left;
}

#contenu #menu{
	width:960px;
	height:600px;
	margin:0 auto;
}

#contenu #menu h1{
	background:url(images/logo_kj.png) no-repeat scroll 0 83px transparent;
	font-family: "DinLight", Verdana, Helvetica, Arial, sans-serif;
	font-size: 60px;
	line-height: 56px;
	margin:0 auto; /* la div doit etre collee en haut pour l'effet parallax, donc on met un padding et non un margin */
	padding:80px 0 0 115px;
	color:#2a2a2a;
	width:825px;
}

#contenu #menu h1 .principal{
	font-family: "DinBold", Verdana, Helvetica, Arial, sans-serif;
}

#contenu #menu ul{
	margin:60px auto 0 25px;
	list-style-type: none;
	padding:0;
}

#contenu #menu ul li#leconUne a{
	background:url(images/bg-menu1.png) no-repeat scroll 0 0 transparent;
}
#contenu #menu ul li#leconDeux a{
	background:url(images/bg-menu2.png) no-repeat scroll 0 0 transparent;
}
#contenu #menu ul li#leconTrois a{
	background:url(images/bg-menu3.png) no-repeat scroll 0 0 transparent;
}
#contenu #menu ul li#leconQuatre a{
	background:url(images/bg-menu4.png) no-repeat scroll 0 0 transparent;
	margin-left: 163px;
}
#contenu #menu ul li#leconCinq a{
	background:url(images/bg-menu5.png) no-repeat scroll 0 0 transparent;
}

#contenu #menu ul li a{
	display:block;
	float:left;
	/*width:205px;
	height: 85px;*/
	width:205px;
	height: 114px;
	background-color: #ffffff;
	text-decoration: none;
	margin: 3px 12px;
	border-radius: 5px;
	padding:15px 0 0 75px;
	/*box-shadow: 0 14px 23px 0 #989898;*/
}

#contenu #menu ul li a .numeroLeconMenu{
	font-family:"Museo500", Verdana, sans-serif;
	color:#0068ca;
	font-size:16px;
}

#contenu #menu ul li a .menuTitreUn{
	font-family:"DinLight", Verdana, sans-serif;
	color:#2a2a2a;
	font-size:26px;
	line-height: 25px;
}

#contenu #menu ul li a .menuTitreDeux{
	font-family:"DinBold", Verdana, sans-serif;
	color:#2a2a2a;
	font-size:26px;
	line-height: 25px;
}


#contenu #menu ul li#leconQuatre a .menuTitreDeux{
	font-size:24px;
}

#contenu #menu p{
	clear: both;
    text-align: center;
	font-family:"DinBold", "Myriad Pro", Verdana, sans-serif;
	font-size: 14px;
	color:#2a2a2a;
	line-height: 20px;
}

#contenu #menu p .contactEmail{
	display: inline-block;
	line-height: 13px;
	background: url(images/contactEmail.png) no-repeat left bottom transparent;
	padding-left: 20px;
}

#contenu #menu p .contactTel{
	display: inline-block;
	line-height: 19px;
	background: url(images/contactTel.png) no-repeat left bottom transparent;
	padding-left: 23px;
}

#contenu #menu p a{
	color:#2a2a2a;
	text-decoration: none;
}

#contenu #menu p a:hover{
	text-decoration: underline;
}

#contenu .leconKJ{
	position:relative;
	width:960px;
	height:600px;
	margin:0 auto;
	padding:0;
	margin-top: 485px;
	background-color:#82c101;	
	/*padding: 200px 0 0 50px;
    width: 910px;*/
    width: 895px;
	padding: 200px 15px 0 50px;
    height: 400px;
}

#contenu .imageLeft{
	/*padding: 170px 15px 0 0;*/
}

#contenu .imageLeft .texteLecon{
	float:right;
	margin-right: 40px;
}

#contenu .texteLecon .introLecon{
	font-family: "Museo300", Verdana, sans-serif;
	font-size:23px;
	color:#0068ca;
	margin:0;
	letter-spacing: 5px;
}

#contenu .texteLecon .introLecon .dateEtape{
	font-size:18px;
	color:#90969e;
	letter-spacing: 1px;
}

#contenu .texteLecon .numeroLecon{
	font-family: "Museo700", Verdana, sans-serif;
}

#contenu .texteLecon h2{
	font-family: "DinLight", Verdana, sans-serif;
	font-size: 56px;
	color:#2a2a2a;
	line-height:50px;
	margin:10px 0 0;
	text-transform: uppercase;
}

#contenu .texteLecon h2 .grasH2{
	font-family: "DinBold", Verdana, sans-serif;
}

#contenu .texteLecon .argumentLecon{
	font-family: "Museo300", Verdana, sans-serif;
	color:#5fa7d9;
}

#contenu .texteLecon .argumentLecon .argumentBold{
	font-family: "Museo700", Verdana, sans-serif;
}

#contenu .texteLecon sup{
	font-size:10px;
}

#contenu .leconKJ ul{
	position:absolute;
	top:182px;
	right:0;
	padding: 0;
	/*margin: 0 15px 0 0;*/
	margin: 0;
}

#contenu .leconKJ ul li{
	display: block;
	width:20px;
	height:20px;
	margin-top:20px;
}

#contenu .leconKJ ul li a img{
	border:0 none;
}

/* ---------- chaque lecon specifiquement ---------------------- */

#contenu #lecon1{
	background:url(images/lecon1-2.png) no-repeat scroll 0 bottom transparent;
	margin-top: 333px;
	height: 480px;
    padding-top: 120px;
}

#contenu #lecon1 .texteLecon{
	/*background: url(images/picto_lecon1.png) no-repeat left bottom transparent;*/
	float:left;
}

#contenu #lecon1 .texteLecon .argumentLecon{
	background: url(images/picto_lecon1.png) no-repeat left 2px transparent;
	margin: 10px 0 0;
	padding:0 0 5px 50px;
}

/* ----------- */

#contenu #lecon2{
	background:url(images/lecon2.png) no-repeat scroll left 0 transparent;
	margin-top: 533px;
	padding: 120px 15px 0 0;
	width: 945px;
	height:450px;
}

#contenu #lecon2 .texteLecon{
	background: url(images/picto_lecon2.png) no-repeat left bottom transparent;
	margin-right:30px;
}

#contenu #lecon2 .texteLecon .argumentLecon{
	margin-bottom: 0;
	padding-left:45px;
}

/* ----------- */

#contenu #lecon3{
	background:url(images/lecon3.png) no-repeat scroll 520px 0 transparent;
	margin-top: 633px;
	padding-top:160px;
	height: 440px;
}

#contenu #lecon3 .texteLecon{
	padding-left: 15px;
	float:left;
}

#contenu #lecon3 .texteLecon .argumentLecon{
	background: url(images/picto_lecon3.png) no-repeat left top transparent;
	padding-left:65px;
}

/* ----------- */

#contenu #lecon4{
	background:url(images/lecon4.png) no-repeat scroll 0 0 transparent;
	margin-top: 733px;
	height: 450px;
	padding-top: 150px;
}

#contenu #lecon4 .texteLecon{
	background: url(images/picto_lecon4-2.png) no-repeat left 140px transparent;
	margin-right:25px;
}

#contenu #lecon4 .texteLecon .introLecon, #contenu #lecon4 .texteLecon h2{
    padding-left: 20px;
}

#contenu #lecon4 .texteLecon .argumentLecon{
	margin-bottom: 0;
    padding-left: 60px;
}

/* ----------- */

#contenu #lecon5{
	background:url(images/lecon5.png) no-repeat scroll 470px 0 transparent;
	margin-top: 633px;
	padding-top: 180px;
	height:420px;
}

#contenu #lecon5 .texteLecon{
	float:left;
}

#contenu #lecon5 .texteLecon .argumentLecon{
	background: url(images/picto_lecon5.png) no-repeat left top transparent;
	margin: 15px 0 0;
    padding:0 0 5px 50px;
}