@charset "utf-8";
/* CSS Document */

body	{
	margin: 0;
	padding: 0;
	background: #094a74 url('../images/slice_degrade_v.jpg') repeat-x 0 53px;
}

img	{
	border: 0;
}

iframe	{
	border:0;
}

li	{
	list-style-type: none;
}

/* WRAPPER DE LA PAGE AFFICHANT L'IMAGE DE FOND */
#wrapper	{
	background: url('../images/bg_tabouffe.jpg') no-repeat center 47px;
}

a	{
	color: #1f3b00;
}
a:link {
	cursor: pointer;
	text-decoration: none;
}


/* ------------------------------------------------------------------------------------------------------------ */
/* -------------------------------------  C S S - D U - C O N T E N U  ---------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------ */

/* Pour éléments utilisant la police GothamMedium */
.gotham {
	font: normal 11px 'GothamMedium';
}

#main_illustration {
	height: 547px;
	margin-top: 2px;
}


/* /////////////////// Bouton JOUER /////////////////// */

a#btn_jouer	{
	display: block;
	width: 236px;
	height:237px;
	margin-left: 226px;
	margin-top: 105px;
	background: url(../images/btnJouer.png) 0 0 no-repeat;
}

a#btn_jouer:hover {
	background: url(../images/btnJouer.png) 0 -237px;
	cursor:pointer;
}

#btn_jouer span {
	visibility: hidden;
}



/* /////////////////// Bouton Guide pédagogique /////////////////// */
.guide-btn {
    position: relative;
}

.guide-btn a {
    outline: none;
    position: absolute;
    display: block;
    width: 289px;
    height: 291px;
    left: 500px;
    top: -90px;
    background: url(../images/btn_guide_pedagogique.png) 0 0;
}

.guide-btn a:hover{
    cursor:pointer;
}




/*/////////////////// Slogan sous l'image ////////////////////////*/
#slogan {
	margin: 0;
	font-size: 32px;
	text-align: center;
	display: block;
	color: #f7f8fd;
	text-transform: uppercase;
	font-family: 'FnyderRegular';
	/* Non supporté par IE ou PIE */
	text-shadow: 
	-3px 0 0.02em #1f3b00, 
	0 3px 0.02em #1f3b00,
	3px 0 0.02em #1f3b00, 
	0 -3px 0.02em #1f3b00, 
	0 3px 0.15em rgba(0, 0, 0, 0.9), 
	0 0 0.8em rgba(0, 0, 0, 0.6);
	letter-spacing: 2px;
	margin-top: 35px;
}

/* Filtre différent sous IE9 */
.ie9 #slogan	{
	filter: progid:DXImageTransform.Microsoft.Shadow(direction=180,strength=6,color=000000);
}

.ie7 #slogan, .ie7 .ombre2, h3.ombre	{
	display: inline-block;
}

/* Filtres d'IE pour simuler un text-shadow */
.ltIE9 #slogan	{
	filter: Shadow(color=208585,direction=170,strength=5);
}

/* Ombre portée noire pour souligner le slogan sur l'ombre verte dans IE. Rendu moins pixélisé ainsi. */
.ltIE9 .ombre2	{
	display: block;
	/* filter: Shadow(color=000000,direction=220,strength=2); */
}

/*////////////////// Publicités à droite ///////////////////*/
.publicites {
	padding-top: 20px;
	position: relative;
	right: 0;
	display: block;
	float: right;
}

.publicites .pub_titres {
	width: 155px;
	font: 10px/14px Arial, Helvetica, Geneva, sans-serif;
	background-color: silver;
	border: 1px solid gray;
	border-bottom-style: none;
	padding-left: 3px;
	padding-top: 1px;
}
.publicites img {
	margin-bottom: 20px;
}

.vide {
	visibility: hidden;
}

.main_illustration_kludge {
	height: 475px;
}

#header_pub{
	background-color:black;
	color:white;
	margin-top: 518px;
}


/*//////////////////// Navigation et tutoriels vidéo ////////////////////////*/
#contenu_navig_tuto {
	/* Positionnement relatif pour rendre PIE fonctionnel */
	position:relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, rgb(247,247,247)),
		color-stop(1, rgb(227,227,227))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(247,247,247) 50%,
		rgb(227,227,227) 100%
	);
	background-image: -ms-linear-gradient(
		bottom,
		rgb(247,247,247) 50%,
		rgb(227,227,227) 100%
	);

	background-image: -o-linear-gradient(
	bottom , 
	#f7f7f7, 
	#f7f7f7 50.0%,
	#e3e3e3 100.0%
	);
	-pie-background: linear-gradient(
		center bottom,
		rgb(247,247,247) 50%,
		rgb(227,227,227) 100%
	);
	
	-moz-box-shadow: 
	-1px 0 0em rgba(0, 0, 0, 0.15), 
	0 1px 0em rgba(0, 0, 0, 0.15),
	1px 0 0em rgba(0, 0, 0, 0.15), 
	0 -1px 0em rgba(0, 0, 0, 0.15), 
	0 0 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 
	-1px 0 0em rgba(0, 0, 0, 0.15), 
	0 1px 0em rgba(0, 0, 0, 0.15),
	1px 0 0em rgba(0, 0, 0, 0.15), 
	0 -1px 0em rgba(0, 0, 0, 0.15), 
	0 0 4px rgba(0, 0, 0, 0.4);
	box-shadow: 
	-1px 0 0em rgba(0, 0, 0, 0.15), 
	0 1px 0em rgba(0, 0, 0, 0.15),
	1px 0 0em rgba(0, 0, 0, 0.15), 
	0 -1px 0em rgba(0, 0, 0, 0.15), 
	0 0 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 20px;
	background-color: rgb(247,247,247);
	behavior: url(pie/PIE.php);
}

/* Navigation et liens de réseaux sociaux */
.menu  {
	/* Positionnement relatif pour rendre PIE fonctionnel */
	position:relative;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	
	border-radius: 5px 5px 0px 0px;
	
	background-color: #82bc33;
	background-image: -moz-linear-gradient(center bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -ms-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -o-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -webkit-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	-pie-background: linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%); 
	behavior: url(pie/PIE.php);
	padding: 5px;
}

/* Navigation */
ul.titres	{
	text-transform: uppercase;
	color: #92e8e6;
	font: 21px 'FnyderRegular';
	display: block;
	letter-spacing: .03em;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-left: 10px;
}


.win.gecko .titres,
.ie .titres,
.opera .titres {
	letter-spacing:  .01em;
}

.menu ul#nav_principale {
	padding: 0 0 0 10px;
	margin: 0;
}

/* Navigation : PROFS-PARTENAIRES et boutons réseaux sociaux : FB-Twitter-G+ */
.menu ul#nav_principale li	{
	font-size: 18px;
	display: inline-block;
	margin: 0;
}

/* Liens de la navigations */
.menu li a {
	display: block;
	padding: 10px 57px 10px 47px;
	letter-spacing: 0.01em;
	/* Ligne semblant en relief à droite des éléments de navig */
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
	-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
}
.menu li a:visited	{
	text-decoration: none;
}
.ie .menu a {
	border-right: 1px solid #124c4c;
}

.menu a:hover {
	color: white;
}

.menu li#partager  {
	padding-left: 4px;
	padding-right: 4px;
}

/* Réseaux sociaux */
.menu li.link {
	padding: 0;
	padding-right: 10px;
}
.menu li.link a {
	height: 24px;
	width: 24px;
	padding: 0;
	border: none;
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0);
	-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0);
	-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0);
}

.ie7 li#partager, .ie7 li.link	{
	padding-top: 10px;
}

.ie7 li.gplus	{
	padding-top: 15px;
}


/* Filtre permettant d'afficher l'ombre portée dans IE 8 et précédents */
.ltIE9 .ombre, .ltIE9 .ombre a	{
	/* filter: progid:DXImageTransform.Microsoft.Shadow(direction=200,strength=5,color=092e3b); */
}


/* Espaces des cônes de réseaux sociaux (bg-img) */
.menu li.link span {
	visibility: hidden;
}

.link.twitter a {
	margin-left:42px;
	background: url('../images/icone_twitter.png') no-repeat;
}
.link.twitter a:hover {
	background: url('../images/icone_twitter.png') no-repeat 0 -24px;
}

.link.facebook a {
	background: url('../images/icone_facebook.png') no-repeat;
}
.link.facebook a:hover {
	background: url('../images/icone_facebook.png') no-repeat 0 -24px;
}

.link.mail a {
	background: url('../images/icone_email.png') no-repeat;
}
.link.mail a:hover {
	background: url('../images/icone_email.png') no-repeat 0 -24px;
}


/*/////////////////// Captures d'écran ///////////////////////*/
.ie7 ul	{
	margin-left: 0;
}

#tutoriels ul {
	padding-left: 15px;
	margin-top: 20px;
	margin-bottom: 16px;
}

#tutoriels ul li {
	display: inline-block;
	margin-left: 25px;
	margin-right: 25px;
}

.ie7 #tutoriels ul li,
.ie7 .menu ul#nav_principale li,
.ie7 #nouvelles ul li
{
	float: left;
}

.ie7 .menu ul#nav_principale li	{
	margin-left: 11px;
}

img.img_accueil	{
	border: 1px solid #AAAAAA;
}
/*///////////// Bas de certains encadrés ///////////////*/
.section_footer {
	/* Positionnement relatif pour rendre PIE fonctionnel */
	position:relative;
	
	height: 20px;
	vertical-align: middle;	
	padding: 5px 12px;
	
	-webkit-border-bottom-left-radius-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-radius: 0px 0px 5px 5px;
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #EAEAEA),
		color-stop(0.5, #EEEEEE),
		color-stop(1, #D3D6D8)
	);
	background-image: -moz-linear-gradient(
		center bottom,
		#EAEAEA 0%,
		#EEEEEE 50%,
		#D3D6D8 100%
	);
	background-image: -ms-linear-gradient(
		bottom,
		#EAEAEA 0%,
		#EEEEEE 50%,
		#D3D6D8 100%
	);
	background-image: -o-linear-gradient(
		bottom,
		#EAEAEA 0%,
		#EEEEEE 50%,
		#D3D6D8 100%
	);
	-pie-background: linear-gradient(
		center bottom,
		#EAEAEA 0%,
		#EEEEEE 50%,
		#D3D6D8 100%
	);
	/*background: #e3e3e3 url(../images/degrade_basDeSection.gif);*/
	border-top: 1px solid #bbbaba;
	
	clear: left;
	behavior: url(pie/PIE.php);
}


/* ////////////////////// Lien Facebook indiquant "J'aime" //////////////////////// */
#facebook_like	{
	width:60px;
	display:block;
	float:right;
	margin-right:60px;
	margin-bottom:5px;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------  S E C T I O N - D E S - PA R T E N A I R E S  ------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */

/* Encadré comme tel */
.section	{
	/* Positionnement relatif pour rendre PIE fonctionnel */
	position: relative;
	box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.15), 1px 0 0 rgba(0, 0, 0, 0.15), 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.4);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	
	border-radius: 5px 5px 5px 5px;
	
	background-color: #F7F7F7;
	background-image: -moz-linear-gradient(center bottom , #F7F7F7 50%, #E3E3E3 100%);
	background-image: -ms-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	background-image: -o-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	background-image: -webkit-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	-pie-background: linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%); 
	
	margin-bottom: 20px;
	
	behavior: url(pie/PIE.php);
}

/* Encadrés verts avec titres h3 */
.menu_2	{
	/* Positionnement relatif pour rendre PIE fonctionnel */
	position: relative;
	border-radius: 5px 5px 0px 0px;
	background-color: #82bc33;
	background-image: -moz-linear-gradient(center bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -ms-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -o-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	background-image: -webkit-linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%);
	-pie-background: linear-gradient(bottom , #609b2a 0%, #82bc33 50%, #a7e13c 100%); 
	behavior: url(pie/PIE.php);
}

/* Titres h3 */
.titres_2	{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: #1f3b00;
	font: 18px 'FnyderRegular';
	/* text-shadow: 0 0 0 rgba(0, 0, 0, 0.3), 0 1.5px 3px rgba(0, 0, 0, 0.9); */
	letter-spacing: .03em;
	padding-top: 8px;
	padding-bottom: 9px;
	padding-left: 10px;
	letter-spacing: 0.01em;
}


.titres_2>a:hover	{
	color: #fff;
}

/* ---------------------------------------------------------------------------------------- */
/* -----------------------------------  SECTION MILIEU  ----------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.section2{
	margin:auto;
	/* 850px avec espace à droite */
	width:925px;
	padding-bottom: 40px;
	/*padding:2px;*/
}
.section2 .bloc{
	display:inline;
	float:left;
	/* 270px avec espace à droite */
	width:295px;
	text-align:center;
	margin-bottom: 15px;
}
.section2 .bloc .bloc_txt{
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size:16px;
	text-align:left;
}
.section2 .bloc .bloc_txt p{
	padding-left: 25px;
	padding-right: 20px;
	line-height: 21px;
}

#bloc_metiers	{
	text-align: center;
	width:600px;
	position: relative;
	background-color: #F7F7F7;
	background: -moz-linear-gradient(center bottom , #F7F7F7 50%, #E3E3E3 100%);
	background: -ms-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	background: -o-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	background: -webkit-linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%);
	-pie-background: linear-gradient(bottom , #F7F7F7 50%, #E3E3E3 100%); 
	behavior: url(pie/PIE.php);
	z-index: 400;
}

#div_bg_metiers	{
	padding: 0;
	margin: 0;
	min-height: 438px;
	height:450px;
	background: url('../images/bg_metiers.png') bottom left no-repeat;
	z-index: 500;
}
#div_liste_metiers{
	margin-top:20px;
}
#div_liste_metiers ul, #div_liste_metiers img	{
	float: left;
}

#div_liste_metiers ul.align_right	{
	text-align: right;
	text-shadow: -2px -2px 5px #ffffff;
}
.ltIE9 #div_liste_metiers ul.align_right	{
	/* filter: dropshadow(color=#ffffff, offx=-2, offy=-2); */
}

#div_liste_metiers ul	{
	width: 240px;
	padding: 0;
	margin-top: 25px;
}

#div_liste_metiers ul.no_margin_bottom	{
	margin-bottom: 0;
}

#div_liste_metiers ul li a:hover	{
	text-decoration : underline;
}

#div_liste_metiers img	{
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
}
#div_liste_metiers a	{
	text-decoration: underline;
}
#bloc_quoi	{
	margin-right: 30px;
	margin-left:-10px;
	height:450px;
}

#bloc_qui	{
	margin-left: -10px;
	margin-top: -35px;
	margin-bottom: 50px;
	width: 925px;
	height:220px;
}


.ie7 #message_division	{
	clear: both;
	height: 0px;
	overflow: hidden;
}