#quiz
{
	/* Mise en forme des questions du quiz */
}

.question_mark:before 
{
	content: url("pics/zcode_question.png");
	float: left;
	padding-top: 48px;
	padding-left: 20px;
}

body
{
	width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-image: url("pics/fond_noel_rose.jpg");
}

#en_tete /* le "#" sert à définir les propriétés d'un "id" */
{
	width: 755px; /* il faut absolument définir des dimensions pour afficher l'image car le "div" ne forme pas de cadre par défaut (760 pixels est la taille idéale pour des navigateurs en 800x600 par exemple) */
	height: 100px; /* il faut absolument définir des dimensions pour afficher l'image */
	background-image: url("pics/HeaderNIN.jpg");
	background-repeat: no-repeat; /* autant prévoir de ne pas faire répéter l'image unique du header */
	margin-bottom: 20px; /* on laisse un peu de marge en-dessous, pour aérer un peu */
	margin-top: 48px;
	border-style: outset;
	border-color: #ff8c00;
	border-width: 3px;
}

.element_menu_noel
{
	height: 300px;
	background-color: #ff8c00;
	background-image: url("pics/bandeau_noel.jpg");
	margin-bottom: 20px;
	border: 5px solid #8a99b6;
	background-repeat: repeat-x; /* l'image de fond "motif.png" ne se répète que sur la ligne (en x) */
}

.element_menu_noel img
{
	float: right;
	padding-right: 20px;
}

.element_menu
{
	height: 300px;
	background-color: #ff8c00;
	background-image: url("pics/bandeau_armoirie_normandie.jpg"); /* prendre "bandeau_basse_normandie.jpg" pour le 6ème quiz */
	margin-bottom: 20px;
	border: 5px solid #a7b4c9;
	background-repeat: repeat-x; /* l'image de fond "motif.png" ne se répète que sur la ligne (en x) */
}

.element_menu_fin
{
	height: 500px;
	background-color: #ff8c00;
	margin-bottom: 20px;
	border: 5px solid #a7b4c9;
}

#bas_de_page
{
	font-size: 0.65em;
	/* font-style: italic; */
	color: white;
	text-align: center;
	padding: 5px;
	background-color: #7f2853;
	/* background-image: url("pics/fond3.png"); */
	border-style: outset;
	border-color: #ff8c00;
	border-width: 3px;
}

.hautQuiz_start
{
	font-size: 1.25em;
	font-weight: bold;
	color: white;
	text-align: center;
	padding: 5px;
	background-color: #7f2853;
	/* background-image: url("pics/fond3.png"); */
	border-style: solid;
	border-color: #ff8c00;
	border-width: 3px;
}
.hautQuiz_correct
{
	font-size: 1.25em;
	font-weight: bold;
	color: #66ec1c;
	text-align: center;
	padding: 5px;
	background-color: #7f2853;
	/* background-image: url("pics/fond3.png"); */
	border-style: solid;
	border-color: #ff8c00;
	border-width: 3px;
}
.hautQuiz_faux
{
	font-size: 1.25em;
	font-weight: bold;
	color: red;
	text-align: center;
	padding: 5px;
	background-color: #7f2853;
	/* background-image: url("pics/fond3.png"); */
	border-style: solid;
	border-color: #ff8c00;
	border-width: 3px;
	text-decoration: blink;
}

#menu
{
	float: left;
	width: 120px;
}

.element_menu_noel h3 /* Tous les titres "h3" de menus */
{    
   color: white;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu_noel ul
{
	color: #7f2853;
	font-weight: bold;
	padding-top: 60px;
	padding-left: 100px;
	padding-right: 20px;
	text-align: justify;
}

.element_menu_fin ul
{
	color: #7f2853;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 100px;
	padding-right: 20px;
	text-align: justify;
}

.element_menu_noel li /* Toutes les listes à puces se trouvant dans un menu */
{
   font-weight: normal;
   list-style-image: url("pics/puce.gif"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 25px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin-top: 20px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-left: 100px;
   margin-bottom: 0px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu_fin li /* Toutes les listes à puces se trouvant dans un menu */
{
   font-weight: normal;
   list-style-image: url("pics/puce.gif"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 25px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin-top: 5px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-left: 100px;
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu h3 /* Tous les titres "h3" de menus */
{    
   color: white;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
	color: #7f2853;
	font-weight: bold;
	padding-top: 60px;
	padding-left: 100px;
	text-align: justify;
	padding-right: 20px;
}

.element_menu li /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("pics/puce.gif"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 25px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin-top: 20px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-left: 100px;
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.wrong
{
	/* background-image: url("pics/zcode_erreur.png");
	background-position: 100px; */
	background-color: #ff8c00;
	border: 5px solid red;
	background-repeat: no-repeat;
	margin: 50px;
	padding: 50px;
	text-align: center;
	color: red;
	font-style: Arial, "Times New Roman", "Arial Black", serif;
	font-weight: bold;
}

.element_menu_noel a /* Tous les liens se trouvant dans un menu */
{
   color: #7f2853;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #7f2853;
}

.element_menu_noel a:hover /* Quand on pointe sur un lien du menu */
{
   /* background-color: #B3B3B3; */
   color: white;
   font-style: italic;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   /* background-color: #B3B3B3; */
   color: white;
   font-style: italic;
}

#bloc_principal
{
	height: 620px;
	/* margin-left: 140px; on choisit un décalage (marge extérieure gauche) au moins égal à la taille du menu que l'on a fait flotter à gauche du bloc principal */
	margin-bottom: 15px; /* on laisse un peu de place en-dessous */
	padding: 20px; /* on laisse également un peu de marge intérieure tout autour du bloc principal */
	color: #ff8c00; /* #f5eef5; */
	/* font-weight: bold; */
	font-variant: small-caps;
	font-size: 18px;
	font-family: Verdana, Yahoo, "28 Days Later", serif;
	background-color: #7f2853;
	/* background-image: url("pics/csi.jpg"); */
	background-repeat: no-repeat;
	border-style: outset;
	border-color: #ff8c00;
	border-width: 3px;
	text-align: center;
}

/* #bloc_principal img
{
	float: left;
} */

/* maintenant qu'on a fait le principal sur le bloc, on va détailler par type de paragraphe*/
#bloc_principal h1
{
	color: #ff8c00;
	text-align: center;
	text-decoration: underline;
	font-family: "28 Days Later", Verdana, Arial, serif;
}

#bloc_principal h2
{
	/* height: 30px;
	background-image: url("pics/titre.png"); 
	background-position: 300px 0px;
	background-repeat: no-repeat;
	padding-left: 30px; */
	color: #ff8c00;
	font-family: "28 Days Later", Verdana, Arial, serif;
	text-align: center;
}

a
{
	color: white;
}

a:hover
{
	color: #8c6635;
}

.txt_centre
{
	height: 200px;
	background-image: url("pics/Entrer.gif");
	background-repeat: no-repeat;
	background-position: 220px 0px;
	margin-top: 15px;
	font-size: 1.5em;
	text-align: center;
}

.indice
{
	text-align: center;
	font-size: 48px;
	font-family: "28 Days Later", Verdana, Arial, serif;
	color: #000080;
	text-decoration: blink;
	margin-top: 150px;
}

.indice2
{
	text-align: center;
	font-size: 36px;
	font-family: "28 Days Later", Verdana, Arial, serif;
	color: #000080;
	margin-top: 130px;
}

.indice_image
{
	height: 110px;
	background-image: url("pics/sapin_anime.gif");
	background-repeat: no-repeat;
	background-position: 330px 0px;
}

.finQuiz
{
	text-align: center;
	font-size: 22px;
	font-style: italic;
	font-family: Verdana, "Times New Roman", Arial, serif;
	margin-top: 50px;
	color: red;
}

.phrase
{
	margin-top: 50px;
	text-align: center;
	font-size: 18px;
	text-decoration: underline;
	font-family: verdana, serif;
	color: #7f2853;
}

.phrase2
{
	margin-top: 20px;
	text-align: center;
	font-size: 16px;
	font-family: verdana, serif;
	color: #7f2853;
}

.transparent a
{
	margin-left: 300px;
	color: #ff8c00;
}

.transparent a:hover
{
	margin-left: 300px;
	color: red;
}