/*
	CSS pour Jeune pour jeunes - Tests et jeux
	Emilie - egzakt.com
	2007-08-09
*/


/* TESTS ET JEUX - LISTE
-----------------------------------------*/
#tests {
	width:951px;
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}

#tests_entete {
	background-color:#F452A7;
	font:1em/1.33em Arial, Verdana, sans-serif;
	color:#3F3F3F;
}

#tests_entete #section_nom {
	float:left;
	width:291px;
	padding:17px 0 18px 25px;
}

#tests_entete .bloc_texte {
	float:left;	
	width:600px;
	padding:17px 0 15px 25px;
	font:1em/1.42em Arial, Verdana, sans-serif;
}

#tests_entete a#retour {
	float:right;
	margin:22px 75px 0 0;
}

#tests_entete a#retour:hover {
	background:transparent;
}

#tests_entete a#retour .over {
	position:absolute;
	visibility:hidden;
}

#tests_entete a#retour:hover .over{
	visibility:visible;
}


#tests #tests_liste {
	background:url(../images/tuiles/tests.gif) repeat-y top left;
	padding-bottom:10px;
}

#tests #tests_liste .colonne_gauche {
	float:left;
	width:343px;
	margin:70px 33px 0 127px;
	display:inline; /* Pour IE6 double margin bug */
}

#tests #tests_liste .colonne_droite {
	float:left;
	width:417px;
	margin-top:30px;	
	position:relative;
}



#tests #tests_liste .colonne_gauche .liste {
	width:342px;
	position:relative;
}

#tests #tests_liste .colonne_gauche .liste ul {
	width:273px;
	padding:24px 0 0 20px;
	margin:0;
	list-style-type:none;
}

#tests #tests_liste .colonne_gauche .liste ul li {
	padding-top:14px;
}

#tests #tests_liste .colonne_gauche .liste ul li a {
	display:block;
	width:234px;
	padding:7px 0 7px 39px;
	font:bold 1.17em/1.16em Arial, Verdana, sans-serif;
	color:#F11788;
	text-decoration:none;
	background-image:url(../images/icones/liste_tests.jpg);
	background-repeat:no-repeat;
	background-position:0 center;
}

#tests #tests_liste .colonne_gauche .liste ul li a:hover {
	background-position:-271px center;
	color:#000000;
}

#tests #tests_liste .colonne_gauche .liste ul li .intro {
	font:0.92em/1.25em Arial, Verdana, sans-serif;
	color:#3F3F3F;
	margin:3px 0 0 39px;
}


/* personnalisations */
#tests #tests_liste .colonne_gauche .liste_jeux {
	background:url(../images/tuiles/liste_jeux.gif) no-repeat top left;
}

#tests #tests_liste .colonne_gauche .liste_jeux .liste_titre {
	position:absolute;
	top:-62px;
	left:-136px;
}

#tests #tests_liste .colonne_gauche .liste_tests {
	background:url(../images/tuiles/liste_tests.gif) no-repeat top left;
	margin-top:47px;
}

#tests #tests_liste .colonne_gauche .liste_tests ul {
	padding-top:40px;
}

#tests #tests_liste .colonne_gauche .liste_tests .liste_titre {
	position:absolute;
	top:-65px;
	left:-128px;
}



/* Bouton Films */
#tests .colonne_droite #films {
	margin-bottom:18px;
}

#tests .colonne_droite #films a {
	display:block;
	width:330px;
	padding:10px 43px 10px 44px;
	background:url(../images/tuiles/btn_films.gif) repeat-y top left;
	text-decoration:none;
}

#tests .colonne_droite #films a .titre {
	display:block;
	text-align:center;
	margin:0 0 5px 4px;
}

#tests .colonne_droite #films a img {
	display:block;
}

#tests .colonne_droite #films a .texte {
	display:block;
	margin:8px 0 0 4px;
}



/* BOM-343 */
#tests #tests_liste .colonne_droite #conteneur_bom343 {
	padding:18px 0 95px 0;
	background-color:#880047;
}

#tests .colonne_droite .titre {
	font:0.92em/1em Arial, Verdana, sans-serif;
	letter-spacing:6px;
	text-transform:uppercase;
	color:#FFFFFF;
	text-align:center;
}

#tests .colonne_droite #bom343 {
	width:338px;
	margin:8px auto 10px auto;
}

#tests .colonne_droite .texte {
	font:1em/1.33em Arial, Verdana, sans-serif;
	color:#FFFFFF;
	width:320px;
	margin:0 auto;
}

#tests .colonne_droite #rallye {
	width:322px;
	margin:20px auto 14px auto;
}

#tests .colonne_droite a#debuter {
	position:absolute;
	bottom:22px;
	left:14px;
}

#tests .colonne_droite a#debuter:hover {
	background:transparent;
}

#tests .colonne_droite a#debuter .over {
	position:absolute;
	visibility:hidden;
}

#tests .colonne_droite a#debuter:hover .over {
	visibility:visible;
}



/* TESTS ET JEUX - INTRO BOM-343
-----------------------------------------*/
#tests #test_bom343 {
	background-color:#880047;
	padding-bottom:15px;
}

#tests #test_bom343 #bom343 {
	float:left;
	width:407px;
	margin:25px 0 0 48px;
	padding-bottom:80px;
	display:inline; /* Pour IE6 double margin bug */
	position:relative;
}

#tests #test_bom343 #rallye {
	float:left;
	width:460px;
	margin:62px 0 0 36px;
	padding-bottom:120px;
	background-color:#BB0068;
	position:relative;
}

#tests #test_bom343 #bom343 .titre {
	margin-bottom:20px;
	font:0.92em/1em Arial, Verdana, sans-serif;
	letter-spacing:6px;
	text-transform:uppercase;
	color:#FFFFFF;
	text-align:center;
}

#tests #test_bom343 #rallye .titre {
	margin:27px 0 0 74px;
}

#tests #test_bom343 #bom343 .bloc_texte {
	font:1em/1.42em Arial, Verdana, sans-serif;
	color:#FFFFFF;
	width:320px;
	margin:35px auto 55px auto;
}

#tests #test_bom343 #rallye .bloc_texte {
	font:1em/1.42em Arial, Verdana, sans-serif;
	color:#FFFFFF;
	width:307px;
	margin:16px auto 0 auto;
}

#tests #test_bom343 #rallye ul li {
	background:url(../images/icones/rallye.gif) no-repeat 5px 4px;
	color:#000000;
}

#tests #test_bom343 a.debuter {
	position:absolute;
}

#tests #test_bom343 a.debuter:hover {
	background:transparent;
}

#tests #test_bom343 a.debuter .over {
	position:absolute;
	visibility:hidden;
}

#tests #test_bom343 a.debuter:hover .over {
	visibility:visible;
}

#tests #test_bom343 #bom343 a.debuter {
	bottom:35px;
	left:8px;
}

#tests #test_bom343 #rallye a.debuter {
	bottom:35px;
	left:38px;
}



/* TESTS ET JEUX - DÉTAIL TEST
-----------------------------------------*/
#tests #test_detail {
	background:url(../images/tuiles/tests.gif) repeat-y top left;
	padding:17px 0 105px 127px;
}

#tests #test_detail #test_detail_contenu {
	width:701px;
	padding:30px 0 0 70px;
	background:#FFFFFF url(../images/tuiles/test_detail.gif) no-repeat top left;
	position:relative;
	color:#000000;
}

#tests #test_detail #ambiance {
	position:absolute;
	top:22px;
	left:-127px;
}

#tests #test_detail_bas {
	position:absolute;
	bottom:-87px;
	left:0;
}

#tests #test_detail_entete {
	width:490px;
	line-height:1.33em;
	margin-bottom:10px;
}

#tests #test_detail h1 {
	font:bold 1.5em/1.33em Arial, Verdana, sans-serif;
	color:#F11B86;
	margin-bottom:3px;
}

#tests #test_detail form {
	margin:0;
}

#test_detail .question {
	width:607px;
	background:url(../images/tuiles/test_question.gif) no-repeat top left;
	position:relative;
	margin:0 0 5px 10px;
}

#test_detail .question .padding {
	padding:12px 25px 8px 30px;
}

#test_detail .question .numero {
	position:absolute;
	top:10px;
	left:-11px;
	width:32px;
	height:27px;
	padding-top:5px;
	text-align:center;
	font:bold 1.58em/1.20em Arial, Verdana, sans-serif;
	color:#FFFFFF;
	background-image:url(../images/icones/question_off.gif);
	background-repeat:no-repeat;
	background-position:top left;
}

#test_detail .question .numero_erreur {
	background-image:url(../images/icones/question_erreur.gif);
}

#test_detail .question .numero_repondue {
	background-image:url(../images/icones/question_on.gif);
}

#test_detail .question span {
	font-weight:bold;
	line-height:1.25em;
}

#test_detail .question ul {
	list-style-type:none;
	padding:0;
	margin:6px 0 0 0;
}

#test_detail .question ul input {
	border:0;
}

#test_detail .question ul div {
	float:left;
	width:38px;
	color:#9D0056;
}

#test_detail .question ul li label {
	float:left;
	width:510px;
	line-height:1.33em;
	margin-top:2px;
}

#test_detail #soumettre {
	padding:10px 0 0 500px;
	height:25px;
}

#test_detail #soumettre a {
	position:absolute;	
}

#test_detail #soumettre a:hover {
	background:transparent;
}

#test_detail #soumettre a .over {
	position:absolute;
	visibility:hidden;
}

#test_detail #soumettre a:hover .over {
	visibility:visible;
}

#test_detail .conclusion {
	color:#9D0056;
	width:600px;
	padding:10px 10px 10px 22px;
	margin-bottom:5px;
	line-height:1.25em;
}

#test_detail .conclusion_selected {
	background:url(../images/tuiles/test_conclusion.gif) no-repeat top left;
	color:#000000;
}

#test_detail .total_lettre {
	float:left;
	width:112px;
	margin:0 8px 8px 0;
	font:bold 12px/14px Arial, Verdana, sans-serif;
}

#test_detail .total_lettre .lettre {
	float:left;
	width:80px;
	padding:3px 0 3px 7px;
	background-color:#FDD0E6;
	color:#9D0056;
}

#test_detail .total_lettre .nombre {
	float:left;
	width:23px;
	text-align:center;
	padding:3px 0;
	background-color:#F11B86;	
	color:#FFFFFF;
	border-left:2px solid #FFFFFF;
}

#tests #test_detail h3 {
	font:bold 1.5em/1.33em Arial, Verdana, sans-serif;
	color:#000000;
	margin-bottom:3px;
}

#test_detail a#carriere_liee, #jeu_detail a#carriere_liee {
	display:block;
	width:371px;
	height:17px;
	padding:1px 0 0 4px;
	margin:30px 0 0 22px;
	color:#FFFFFF;
	font:bold 10px/12px Arial, Verdana, sans-serif;
	text-decoration:none;
	background-image:url(../images/boutons/test_carriere_liee.gif);
	background-repeat:no-repeat;
	background-position:0 -16px;
	text-align:center;
}
#jeu_detail a#carriere_liee {
	margin-left:115px;
	background-image:url(../images/boutons/jeu_carriere_liee.gif);
}

#test_detail a#carriere_liee:hover, #jeu_detail a#carriere_liee:hover {
	background-position:0 -58px;
	width:367px;
	height:14px;
	padding:4px 0 0 8px;
}

#test_detail a#carriere_liee span, #jeu_detail a#carriere_liee span {
	color:#FFFF00;
}


/* TESTS ET JEUX - DÉTAIL JEU
-----------------------------------------*/
#tests #jeu_detail {
	background-color:#9D0056;
	position:relative;
}

#tests #jeu_detail #ambiance {
	position:absolute;
	top:12px;
	left:0;
}

#tests #jeu_detail_contenu {
	padding:40px 0 20px 180px;
	color:#FFFFFF;
}

#tests #jeu_detail_contenu h1 {
	font:bold 1.5em/1.33em Arial, Verdana, sans-serif;
	color:#FFFFFF;
	margin-bottom:3px;
}