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

/* DEBUT NOTE(par France Rapp le 23/04/2010 si question : france.rapp@gmail.com)

Je pars de la boite de la page article (ex. ici pour quiz : article de la rubrique "en famille")

1. Classes générales au contenu : 

- pour la boite qui contient les questions et les scores
		box_base_principale
		colonne_01
- pour la boite qui contient les "autres quiz/tests"
		box_commentaires
		box_text_commentaire
		box_titre_commentaire
		
	=> Pour ces classes générales, on laisse les css tels quels

2. Classes propres à l'article -> concerne le contenu (= questions et scores) des quiz/tests :

	=> article_box				<=>		quiz_et_tests_box
	=> vos_questions_article	<=>		vos_questions_quiz_et_tests

Je les distingue volontairement pour qu'en cas de changement de page article, cela n'influe pas forcément les pages quiz/tests.

	Ces classes propres à l'article se trouvent dans les feuilles css suivantes
		- content.css
		- couleurs_rubriques.css
		- print.css (je ne m'en occupe pas pour le moment, car il n'y a pas de fonction imprimer spécifique aux quiz et tests)
	
	Je vais donc copier depuis les pages css citées ci-dessus les propriétés qui concernent ces 2 classes ("article_box" et "vos_questions_article"), et susceptibles de m'intéresser pour les pages quiz/test,
	et les coller sur cette page "quiz_et_tests.css" en les déclinant comme suit : 
	article_box				<=>		quiz_et_tests_box
et	vos_questions_article	<=>		vos_questions_quiz_et_tests

	Par souci d'organisation, je réunis tout sur cette page "quiz_et_tests.css", en les classant (à l'aide de commentaires) par la page css de provenance, 
	le but étant qu'en cours de développement, le développeur les coupe/colle dans les pages css correspondantes (content.css, couleurs_rubriques.css, print.css)
	pour qu'en cas de modification de charte, elles soient toutes réunies au bon endroit.
	
3. Classes concernant les onglets de couleur à coins arrondis (même raisonnement) :
	h3.services_mail, h3.vos_questions, h3.vos_sorties  <=> h1.quiz_et_tests ;
	angle_orange_hg, angle_orange_hd <=> angle_qt_hg, angle_qt_hd
	
FIN NOTE */



/* ---------------------- DEBUT COPIER/COLLER : "article_box" <=> "quiz_et_tests_box"  ET "vos_questions_article" <=> "vos_questions_quiz_et_tests" ---------------------------*/

		/*  -------------------------- a) à insérer dans "content.css"  - NB :  j'ai laissé les autres classes déjà existantes en commentaire ---------------------------*/

/*.block_a_la_une,
.vos_questions_article,*/
.vos_questions_quiz_et_tests
{
	width:600px;
	background-color:#ffffff;
	border:1px solid #EDEDED;
}
/*.vos_questions_article .retrait,*/
.vos_questions_quiz_et_tests .retrait
{
	z-index: 0;
	padding:6px;
}
/*.vos_questions_article .retrait p,*/
.vos_questions_quiz_et_tests .retrait p
{
	color:#626262;
}

/*.vos_questions_article .retrait a,*/
.vos_questions_quiz_et_tests .retrait a
{
	text-decoration:none;
	font-weight:normal;
	line-height:14px; /* avant : 30px => provoquait une hauteur de boite à outils trop importante*/
}

/*.vos_questions_article .retrait a:hover,*/
.vos_questions_quiz_et_tests .retrait a:hover
{
  text-decoration:underline;
}
/*.vos_questions_article .article_box h2,*/
.vos_questions_quiz_et_tests .quiz_et_tests_box h2
{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:normal;
  font-size:19px;
  padding:13px 0 10px 0;
  margin:0;
}
.vos_questions_quiz_et_tests .quiz_et_tests_box h2
{
  font-size:16px;
  min-height:64px;
  width:364px;
  float:left;
}

		/* --------------------------- fin a) -------------------------------------------------------------- */

		/*  -------------------------- b) à insérer dans "couleurs_rubriques.css" - NB :  j'ai laissé les autres classes déjà existantes en commentaire ---------------------------*/

/* ________________   DEBUT ---  EN_FAMILLE  ______________________ */
/*.content .couleur_en_famille,
.content .couleur_en_famille a,
.content .couleur_en_famille a:hover,
.en_famille span.titre_span,
.en_famille span.titre_span a,
.en_famille .vos_questions_article h1,
.en_famille .vos_questions_article .article_box h2,
.en_famille h2.titre_h2,
.en_famille .box_text_commentaire h4,
.en_famille .box_text_commentaire h4 a,
.en_famille .vos_questions_article a,
.en_famille .vos_questions_article a:hover,
.en_famille .vos_questions_article  .signature,
.en_famille .box_tranches_ages a,
.en_famille .box_tranches_ages a:hover,*/
.en_famille .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* correspond aux questions ou score-titre des quiz/tests */
.en_famille .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.en_famille .vos_questions_quiz_et_tests a:hover
{
	color:#918E24;
}
.en_famille .question_quiz_et_tests .filet{
	border-bottom:1px solid #918E24;
}

/* ________________   FIN ---  EN_FAMILLE  ______________________ */



/* ________________   DEBUT ---  SCOLARITE  ______________________ */
/*.content .couleur_scolarite,
.content .couleur_scolarite a,
.content .couleur_scolarite a:hover,
.scolarite span.titre_span,
.scolarite span.titre_span a,
.scolarite .vos_questions_article h1,
.scolarite .vos_questions_article .article_box h2,
.scolarite h2.titre_h2,
.scolarite .box_text_commentaire h4,
.scolarite .vos_questions_article a,
.scolarite .vos_questions_article a:hover,
.scolarite .vos_questions_article .signature,
.scolarite .box_tranches_ages a,
.scolarite .box_tranches_ages a:hover,*/
.scolarite .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* correspond aux questions ou score-titre des quiz/tests */
.scolarite .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.scolarite .vos_questions_quiz_et_tests a:hover,
.scolarite .box_text_commentaire h4 a /* ATTENTION : j'ai remarqué que cette classe pour les liens manquait dans toutes le rubriques sauf en famille -> etait-ce voulu ou un oubli ? => je la rajoute */
{
	color:#499687;
}
.scolarite .question_quiz_et_tests .filet{
	border-bottom:1px solid #499687;
}
/* ________________   FIN ---  SCOLARITE  ______________________ */



/* ________________   DEBUT ---  LOISIRS  ______________________ */
/*.content .couleur_loisirs,
.content .couleur_loisirs a,
.content .couleur_loisirs a:hover,
.loisirs span.titre_span,
.loisirs span.titre_span a,
.loisirs .vos_questions_article h1,
.loisirs .vos_questions_article .article_box h2,
.loisirs h2.titre_h2,
.loisirs .box_text_commentaire h4,
.loisirs .vos_questions_article a,
.loisirs .vos_questions_article a:hover,
.loisirs .vos_questions_article .signature,
.loisirs .box_tranches_ages a,
.loisirs .box_tranches_ages a:hover,*/
.loisirs .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* correspond aux questions ou score-titre des quiz/tests */
.loisirs .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.loisirs .vos_questions_quiz_et_tests a:hover,
.loisirs .box_text_commentaire h4 a /* ATTENTION : j'ai remarqué que cette classe pour les liens manquait dans toutes le rubriques sauf en famille -> etait-ce voulu ou un oubli ? => je la rajoute */
{
	color:#C11A7D;
}
.loisirs .question_quiz_et_tests .filet {
	border-bottom:1px solid #C11A7D;
}
/* ________________   FIN ---  LOISIRS  ______________________ */



/* ________________   DEBUT ---  INTERNET  ______________________ */
/*.content .couleur_internet,
.content .couleur_internet a,
.content .couleur_internet a:hover,
.internet span.titre_span,
.internet span.titre_span a,
.internet .vos_questions_article h1,
.internet .vos_questions_article .article_box h2,
.internet h2.titre_h2,
.internet .box_text_commentaire h4,
.internet .vos_questions_article a,
.internet .vos_questions_article a:hover,
.internet .vos_questions_article .signature,
.internet .box_tranches_ages a,
.internet .box_tranches_ages a:hover,*/
.internet .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* correspond aux questions ou score-titre des quiz/tests */
.internet .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.internet .vos_questions_quiz_et_tests a:hover,
.internet .box_text_commentaire h4 a /* ATTENTION : j'ai remarqué que cette classe pour les liens manquait dans toutes le rubriques sauf en famille -> etait-ce voulu ou un oubli ? => je la rajoute */
{
	color:#C0232F;
}
.internet .question_quiz_et_tests .filet {
	border-bottom:1px solid #C0232F;
}
/* ________________   FIN ---  INTERNET  ______________________ */




/* ________________   DEBUT ---  LECTURE  ______________________ */
/*.content .couleur_lecture,
.content .couleur_lecture a,
.content .couleur_lecture a:hover,
.lecture span.titre_span,
.lecture span.titre_span a,
.lecture .vos_questions_article h1,
.lecture .vos_questions_article .article_box h2,
.lecture h2.titre_h2,
.lecture .box_text_commentaire h4,
.lecture .vos_questions_article a,
.lecture .vos_questions_article a:hover,
.lecture .vos_questions_article .signature,
.lecture .box_tranches_ages a,
.lecture .box_tranches_ages a:hover,*/
.lecture .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* h2 correspond aux questions ou score(-intitulé) des quiz/tests */
.lecture .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.lecture .vos_questions_quiz_et_tests a:hover,
.lecture .box_text_commentaire h4 a /* ATTENTION : j'ai remarqué que cette classe pour les liens manquait dans toutes le rubriques sauf en famille -> etait-ce voulu ou un oubli ? => je la rajoute */
{
	color:#1C8BB2;
}
.lecture .question_quiz_et_tests .filet {
	border-bottom:1px solid #1C8BB2;
}
/* ________________   FIN ---  LECTURE  ______________________ */

/* ________________   DEBUT ---  VOS QUESTIONS  ______________________ */
.vos_questions .vos_questions_quiz_et_tests .quiz_et_tests_box h2, /* h2 correspond aux questions ou score(-intitulé) des quiz/tests */
.vos_questions .vos_questions_quiz_et_tests a, /* a priori pas de lien-texte dans les quiz/test, mais au cas où... */
.vos_questions .vos_questions_quiz_et_tests a:hover,
.vos_questions .box_text_commentaire h4 a /* ATTENTION : j'ai remarqué que cette classe pour les liens manquait dans toutes le rubriques sauf en famille -> etait-ce voulu ou un oubli ? => je la rajoute */
{
	color:#E15918;
}

.vos_questions .question_quiz_et_tests .filet {
	border-bottom:1px solid #E15918;
}

/* ________________   FIN ---  VOS QUESTIONS  ______________________ */


		/* --------------------------- fin b) -------------------------------------------------------------- */


/*
h2.txt_img,
h3.services_mail,
h3.vos_questions,
h3.vos_sorties,*/
h1.quiz_et_tests
{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#000000;
	font-style:italic;
	font-weight:normal;
	margin:0;
	padding:0;
}
/*h3.services_mail,
h3.vos_questions,
h3.vos_sorties,*/
h1.quiz_et_tests
{
	display:block;
	position:relative;
  	width:100%;
	height:37px;
}
h1.quiz_et_tests /* nouveau et propore à Q&T */ 
{
	color:#FFFFFF;
	font-size:22px;
	font-style:normal;
	width:603px;
}

/*h3.services_mail span.retrait,
h3.vos_questions span.retrait,*/
h1.quiz_et_tests span.retrait
{
	display:block;
}
/*h3.vos_questions span.retrait,*/
h1.quiz_et_tests span.retrait
{
	padding: 5px 0 0 10px;
}
/*h3.vos_questions span.angle_orange_hg,
h3.vos_questions span.angle_orange_hd,*/
h1.quiz_et_tests span.angle_qt_hg,
h1.quiz_et_tests span.angle_qt_hd
{
	position:absolute;
	width:8px;
	height:37px;
	top:0;
}
h1.quiz_et_tests span.angle_qt_hg
{
	left:0;
}
h1.quiz_et_tests span.angle_qt_hd
{
	right:0;
  _right:-1px;
}
				/* ------------------------ fin a) ------------------------------------*/
				
				/* 
				b) NOUVEAU : changement de couleur de l'onglet / du carré en fonction de la rubrique 
				=> à insérer dans "couleurs_rubriques.css" ?  
				*/
				
.en_famille h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_famille_g.gif) no-repeat 0 0;
}
.en_famille h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_famille_d.gif) no-repeat 0 0;
}
.en_famille h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_famille_m.gif) repeat-x 0 0;
}
.en_famille .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_famille.gif) no-repeat 0 0;
}

.scolarite h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_scolarite_g.gif) no-repeat 0 0;
}
.scolarite h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_scolarite_d.gif) no-repeat 0 0;
}
.scolarite h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_scolarite_m.gif) repeat-x 0 0;
}
.scolarite .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_scolarite.gif) no-repeat 0 0;
}

.loisirs h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_loisirs_g.gif) no-repeat 0 0;
}
.loisirs h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_loisirs_d.gif) no-repeat 0 0;
}
.loisirs h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_loisirs_m.gif) repeat-x 0 0;
}
.loisirs .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_loisirs.gif) no-repeat 0 0;
}

.internet h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_internet_g.gif) no-repeat 0 0;
}
.internet h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_internet_d.gif) no-repeat 0 0;
}
.internet h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_internet_m.gif) repeat-x 0 0;
}
.internet .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_internet.gif) no-repeat 0 0;
}

.lecture h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_lecture_g.gif) no-repeat 0 0;
}
.lecture h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_lecture_d.gif) no-repeat 0 0;
}
.lecture h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_lecture_m.gif) repeat-x 0 0;
}
.lecture .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_lecture.gif) no-repeat 0 0;
}
.vos_questions h1.quiz_et_tests span.angle_qt_hg
{
	background:transparent url(/images/tests/qt_cartouche_vosquestions_g.gif) no-repeat 0 0;
}
.vos_questions h1.quiz_et_tests span.angle_qt_hd
{
	background:transparent url(/images/tests/qt_cartouche_vosquestions_d.gif) no-repeat 0 0;
}
.vos_questions h1.quiz_et_tests
{
	background:transparent url(/images/tests/qt_cartouche_vosquestions_m.gif) repeat-x 0 0;
}
.vos_questions .question_quiz_et_tests #carre_qt{
	background:transparent url(/images/tests/qt_carre_grand_vosquestions.gif) no-repeat 0 0;
}

		/* -------------------------- fin b) changement de couleur de l'onglet en fonctions de la rubrique --------------------------------- */
/* ----------------------------------------- FIN ONGLET DE COULEUR AUX COINS ARRONDIS POUR TITRE QUIZ/TEST ------------------------------------------------ */

/* ---------------------- FIN COPIER/COLLER : "article_box" -> "quiz_et_tests_box"  ET "vos_questions_article" -> "vos_questions_quiz_et_tests" ---------------------------*/



/* ------------------------------------------------------------------------ DEBUT NOUVEAU QUIZ ET TESTS ------------------------------------------------------------------------- */

		 /* ------------------ général ---------------------- */
		 
.visuel_quiz_et_tests{
	margin-bottom:6px;
}
.outils_quiz_et_tests{
	padding:1px;
	font-size:9px;
}	
/*.mise_en_avant_box,*/ /* même style que boite à outils page article */
.outils_quiz_et_tests {
	border:1px solid #D8D7B2;
}
.outils_quiz_et_tests {
	width:215px; /* précision pour la page question sous IE6*/
	color:#626262;
	text-align:center;
}

.outils_quiz_et_tests ul li{
	display:inline;
}

.outils_quiz_et_tests img{
	vertical-align:middle;
}	
									/* -------- BOUTONS (idem que parcours utilisateur) ------------- */
/*.bt_valider, .bt_retour,*/
#bt_quiz_et_tests
{ 
  	text-align:center;
	margin-bottom:10px;
}

		 /* ------------------------------ spécifique page INTRO quiz et tests ------------------------------- */
		 
.box_visuel_outils { /* boite comprenant le visuel et la boite à outils */
	float:right;
	margin-left:10px;
	z-index:2; /* sinon images de la boite à outils non cliquables sous firefox */
	clear:right;
}
.chapo_quiz_et_tests
{
	font-weight:bold;
	text-align:justify;
	height:150px; /* <=> hauteur du visuel */
	position:relative;
	top:30px;
}
		 /* ------------------------------- spécifique pages QUESTION/SCORES quiz et tests ---------------------- */

.question_quiz_et_tests .visuel_quiz_et_tests, .score_quiz_et_tests .visuel_quiz_et_tests {
	width:100px;
	float:right;
}
.question_quiz_et_tests .outils_quiz_et_tests, .score_quiz_et_tests .outils_quiz_et_tests {
	float:right;
	margin-right:6px;
}

					/* -------------------- carré ----------------------- */
#carre_qt{
	float:left;
	width:115px;
	height:110px;
	text-align:center;
	color:#FFFFFF;
}
#carre_qt .numero, #carre_qt .resultat{
	color:#FFFFFF;
	position:relative;
	top:10px;
	left:-7px;
	
}
.filet{
	clear:both;
	margin-left:115px;
}

					/* -------------------- carré spécifique pages QUESTION ----------------------- */

#carre_qt .numero{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-style:italic;
}


					/* -------------------- carré spécifique pages SCORES ----------------------- */

.score_quiz_et_tests .quiz{
	background:transparent url(/images/tests/qt_carre_grand_score.gif) no-repeat 0 0;
}
.score_quiz_et_tests .test{
	background:transparent url(/images/tests/qt_carre_grand_bilan.gif) no-repeat 0 0;
}
#carre_qt .resultat{
	color:#626262;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	line-height:80px;
	font-style:italic;

}
					/* -------------------- formulaire page QUESTION ----------------------- */
.question_quiz_et_tests form {
	position:relative;
	top:-15px;
	color:#626262;	
}
.question_quiz_et_tests form input{
	width: 20px;
	height: 20px;
	display: block;
    clear: left;
    float: left;
	margin-bottom:8px;
	position:relative;
	top:-5px;
}
.question_quiz_et_tests form ul {
	margin: 20px 0 0 50px;
}
.question_quiz_et_tests form ul li{
	margin: 0 0 20px 0;
}
					/* -------------------- boutons et avertissement si pas coché page QUESTION ----------------------- */


#bt_quiz_et_tests span.avertissement 
{ 
	background:none;
	border:0;
	color:#FF0000;
  cursor:default;
	font-weight:normal;
	padding:0; 
	float:right;
	position:relative;
	top:-20px;
}

		 /* ------------------ spécifique pages SCORES quiz et tests ---------------------- */

.vos_questions_quiz_et_tests .quiz_et_tests_box .score_quiz_et_tests h2{ /* intitule score final */ 
	color:#626262;
	font-weight:normal;
}
.vos_questions_quiz_et_tests .quiz_et_tests_box .score_quiz_et_tests h3{ /* détail score final */ 
	color:#313131;
	font-size:11px;
	font-weight:normal;
	padding-left:5px;
	margin-bottom:20px;
	text-align:justify;
}		 
.score_quiz_et_tests .filet{
	border-bottom:1px dotted #C4C3C0;
}
						/* ------------- envoi par email ------------- */

.score_quiz_et_tests .email img {
	margin:2px 5px 0 5px;
	float:left;
}
.score_quiz_et_tests .email p {
	color:#000000;
	font-style:italic;
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	margin-bottom:10px;
}
.score_quiz_et_tests .email li{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin:5px 0 0 44px;
	color:#626262;
	list-style-type:square;
}
.champ_email{
	margin:0 0 10px 30px;
}
.champ_email label{
	color:#626262;
}
.champ_email input{
	font-size:11px;
	color:#626262;
}
.champ_email .text_droite{
	text-align:right;
}
				/* ------ lien "tous les quiz", dans le tableau autre autres quiz ----- */
h4#tous_les_quiz_et_tests  {
	padding-top:20px;
}
h4#tous_les_quiz_et_tests a { 
	color:#000000;
}
					/* -------------------- divers ----------------------- */

.question_quiz_et_tests #carre_qt, .question_quiz_et_tests form, .score_quiz_et_tests #carre_qt, .score_quiz_et_tests form {
	position:relative;
	top:13px;
}
.esperluette{
	font-size:14px;
	font-weight:bold;
}

/* ---------------------------------------------------------- FIN NOUVEAU QUIZ ET TESTS ------------------------------------------------------------------------------ */