body
{
   width: 900px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url("fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}

header
{
width: 660px;
margin-left: 220px;
border: 4px black solid;
font-size: 40px;
text-align: center;
background-color: white;
margin-bottom : 20px;
}

.maxence
{
display: block;
width: 81px;
height: 122px;
margin: auto;
border: 2px solid black;
}

#en_tete
{
   width: 890px;
   height: 100px;
   background-image: url("banniere3.png");
   background-repeat: no-repeat;
   background-color: white;
   margin-bottom: 10px;
   border: 6px ridge rgb(204,0,51);
}

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 200px; /* Très important : donner une taille au menu */
   margin-top: 40px;
}

#menu2
{
   float: left; /* Le menu flottera à gauche */
   width: 200px; /* Très important : donner une taille au menu */
}

.element_menu
{
   background-color: rgb(204,0,51);
   background-image: url("motif.png");
   background-repeat: repeat-x;
   border: 6px ridge rgb(204,0,51);
   padding: 5px;
   padding-top: 0px;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

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

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

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: black;
   font-weight: bold;
   text-decoration: none;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: white;
   color: rgb(204,0,51);
   text-decoration: none;
   font-weight: bold;
}

#bandeau
{
   margin-left: 220px;
   margin-bottom: 10px;
   padding: 5px;
   height: auto;
   text-align: center;
   font-weight: bold;
   color: white;
   background-color: rgb(204,0,51);
   background-image: url("motif.png");
   background-repeat: repeat-x;
   border: 6px ridge rgb(204,0,51);
}

#corps
{
   margin-left: 220px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 60px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: black;
   background-color: white; /* Une couleur de fond pour le corps */
   background-image: url("motif2.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   text-align: justify;
   border: 6px dotted rgb(204,0,51); /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-indent: 0px;
   font-size: 0.9em;
}

#corps2
{
   margin-left: 60px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 60px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: black;
   background-color: white; /* Une couleur de fond pour le corps */
   background-image: url("motif2.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   text-align: justify;
   border: 6px dotted rgb(204,0,51); /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-indent: 0px;
   font-size: 0.9em;
}

#corps3
{
   margin-left: -200px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 60px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: black;
   background-color: white; /* Une couleur de fond pour le corps */
   background-image: url("motif2.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   text-align: justify;
   border: 6px dotted rgb(204,0,51); /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-indent: 0px;
   font-size: 0.9em;
}

.retrait
{
padding: 10px;
}

#corps h2 /* Tous les titres h1 du corps */
{
   font-size: 1.4em;
   font-variant: small-caps;
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 .min
{
font-variant: normal;
}

#corps h3
{
   height: 30px;
   background-image: url("titre.png");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: rgb(204,0,51);
   text-align: left;
}

#corps2 h2 /* Tous les titres h1 du corps */
{
   font-size: 1.4em;
   font-variant: small-caps;
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps2 h2 .min
{
font-variant: normal;
}

#corps2 h3
{
   height: 30px;
   background-image: url("titre.png");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: rgb(204,0,51);
   text-align: left;
}

#corps3 h2 /* Tous les titres h1 du corps */
{
   font-size: 1.4em;
   font-variant: small-caps;
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps3 h2 .min
{
font-variant: normal;
}

#corps3 h3
{
   height: 30px;
   background-image: url("titre.png");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: rgb(204,0,51);
   text-align: left;
}

h4
{
font-size: 11px;
color: grey;
}

h5 
{
   height: 14px;
   padding-left: 10px;
   color: white;
   text-align: left;
   font-weight: bold;
}

h6
{
font-size: 16px;
}

#corps ul 
{
   list-style-image: url("puce2.png");
   padding: 0px; 
   padding-left: 60px; 
   margin: 0px; 
   margin-bottom: 5px;
}

#corps ol 
{
   padding: 0px; 
   padding-left: 60px; 
   margin: 0px; 
   margin-bottom: 5px;
}

#corps p
{
   margin: 30px;
}

#corps h4
{
	color: rgb(204,0,51);
	font-family: Georgia, "Times New Roman", Times, serif;
}


.lien
{
   text-align: center;
}

.lien2
{
font-size: 10px;
text-align: right;
}

#corps a
{
   color: rgb(204,0,51);
   font-weight: bold;
   text-decoration: none;
}

#corps a:hover
{
   background-color: rgb(204,0,51);
   color: black;
   text-decoration: none;
   font-weight: bold;
}

#pied_de_page
{
   padding: 5px;
   height: auto;
   text-align: center;
   font-weight: bold;
   color: white;
   background-color: rgb(204,0,51);
   background-image: url("motif.png");
   background-repeat: repeat-x;
   margin-left: 220px;
   margin-bottom: 10px;
   border: 6px ridge rgb(204,0,51);
}

#pied_de_page a
{
	color: black;
   font-weight: bold;
   text-decoration: none;
}

#pied_de_page a:hover
{
   background-color: white;
   color: rgb(204,0,51);
   text-decoration: none;
   font-weight: bold;
}


table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
   margin: auto; /* Centre le tableau */
   border: 4px outset rgb(204,0,51);
   margin-bottom: 10px;
}

td, th
{
   border: 1px solid black;
}

caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1em;
   color: rgb(204,0,51);
   margin-bottom: 10px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}

th /* Les cellules d'en-tête */
{
   background-color: rgb(204,0,51);
   color: white;
   font-size: 0.8em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   text-align: center;
}

td /* Les cellules normales */
{
   font-family: "Trebuchet MS", Times, "Times New Roman", serif;
   font-size: 12px;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

td em
{
   font-style: normal;
   color: rgb(204,0,51);
   font-weight: bold;
}

.justifier
{
text-align: justify;
}

.centrer
{
text-align: center;
}


.lieu
{
   color: green;
}

.personnage
{
   color: red;
}

.action
{
   color: purple;
}

.temps
{
   color: navy;
}

em
{
   color: gray;
}

strong
{
   color: maroon;
}

.petit_texte
{
    font-size: 0.8em;
	font-family: Verdana, Times, "Times New Roman", serif;
}

.petit_texte2
{
    font-size: 0.8em;
	font-family: Verdana, "Trebuchet MS", Times, "Times New Roman", serif;
	border: 1px solid rgb(204,0,51);
}

form
{
    border: 4px solid rgb(204,0,51);
	background-color: rgb(255,198,206);
	font-family: Verdana, "Trebuchet MS", Times, "Times New Roman", serif;
	font-size: 0.9em;
	padding: 10px;
}

.resultatbon
{
    color: green;
	padding-top: 20px;
}

.resultatfaux
{
    color: red;
	padding-top: 20px;
}

.bonhomme
{
display: block;
width: 51px;
height: 87px;
margin-right: 5px;
float: left;
}

.dessous
{
   clear: left;
}

.bleu
{
    color: blue;
    font-weight: bold;
}

.gris
{
    color: #969696;
    font-weight: bold;
}

.vert
{
    color: green;
    font-weight: bold;
}

.vertclair
{
    color: #7FFF00;
    font-weight: bold;
}

.rouge
{
    color: red;
	font-weight: bold;
}

.rose
{
    color: rgb(248,113,243);
	font-weight: bold;
}

.mauve
{
    color: #9999FF;
	font-weight: bold;
}


.noir
{
	color: black;
	font-weight: bold;
}

.violet
{
	color: purple;
	font-weight: bold;
}

.dore
{
	color: #FFD700;
	font-weight: bold;
}

.orange
{
	color: #FFA510;
	font-weight: bold;
}

.turquoise
{
	color: #40E0D0;
	font-weight: bold;
}

.marron
{
	color: Sienna;
	font-weight: bold;
}

.trait
{
	border-bottom: 2px solid rgb(204,0,51);
	border-color: rgb(204,0,51);
}

#outils 
{
        width: 40px;
		height: 28px;
        background: white;
        border: 1px solid rgb(204,0,51);
        margin: auto;
        text-align:center;
		display: inline;
}

.out 
{
        background: black; 
        border: 1px solid black;
        margin: 1px; 
}

.over 
{ 
        background: black;
        border-top: 1px solid rgb(204,0,51);
        border-left: 1px solid rgb(204,0,51);
        border-bottom: 1px solid rgb(204,0,51);
        border-right: 1px solid rgb(204,0,51);
        margin: 1px;
}

div.Titles{
	padding: 10px;
	text-align: center;
	color: #ffffff;
}

button{
	display: inline;
}

.ExerciseTitle{
	font-size: large;
	color: rgb(204,0,51);
}

.ExerciseSubtitle{
	color: rgb(204,0,51);
}

div.StdDiv{
	background-color: #ffffff;
	text-align: center;
	font-size: 0.8em;
	color: #000000;
	padding: 8px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #000000;
	margin: 1px;
}

/* EndCorePageCSS */

.RTLText{
	text-align: right;
	font-size: 151%;
	direction: rtl;
	font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial; 
}

.CentredRTLText{
	text-align: center;
	font-size: 151%;
	direction: rtl;
	font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", Geneva,Arial; 
}

button p.RTLText{
	text-align: center;
}

.RTLGapBox{
	text-align: right;
	font-size: 151%;
	direction: rtl;
	font-family: "Times New Roman", Geneva,Arial;
}

.Guess{
	font-weight: bold;
}

.CorrectAnswer{
	font-weight: bold;
}

div#Timer{
	padding: 6px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #ffffff;
}

span#TimerText{
	padding: 6px;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	display: none;
	color: #ffffff;
}

span.Instructions{

}

div.ExerciseText{

}

.FeedbackText{
	color: #000000;
}

span.LeftItem{
	font-size: 1.2em;
	color: #000000;
}

.LeftItem{
	font-size: 1em;
	color: #000000;
}

span.RightItem{
	font-weight: bold;
	font-size: 0.8em;
	color: #000000;
}

.RightItem{
	font-weight: bold;
	font-size: 1em;
	color: #000000;
}

span.CorrectMark{

}

.CorrectMark{
	font-size: 1em;
}

div.Feedback {
	background-color: #ffffff;
	left: 33%;
	width: 34%;
	top: 33%;
	z-index: 1;
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	text-align: center;
	color: #000000;
	position: absolute;
	display: none;
	font-size: 0.8em;
}




div.ExerciseDiv{
	color: #000000;
}

/* JMatch flashcard styles */
table.FlashcardTable{
	background-color: transparent;
	color: #000000;
	border-color: #000000;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2em;
	margin-bottom: 2em;
	width: 90%;
	position: relative;
	text-align: center;
	padding: 0px;
}

table.FlashcardTable tr{
	border-style: none;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
}

table.FlashcardTable td.Showing{
	font-size: large;
	text-align: center;
	width: 90%;
	display: table-cell;
	padding: 2em;
	margin: 0px;
	border-style: solid;
	border-width: 1px;
	color: #000000;
	background-color: #ffffff;
}

table.FlashcardTable td.Hidden{
	display: none;
}

/* JMix styles */
div#SegmentDiv{
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
}

a.ExSegment{
	font-size: medium;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

span.RemainingWordList{
	font-style: italic;
}

div.DropLine {
	position: absolute;
	text-align: center;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ffffff;
	width: 80%;
}

/* JCloze styles */

input{
	font-family: Geneva,Arial;
	font-size: larger;
}

.ClozeWordList{
	text-align: center;
	font-weight: bold;
}

div.ClozeBody{
	text-align: justify;
	margin-top: 2em;
	margin-bottom: 2em;
	line-height: 2.0
}

span.GapSpan{
	font-weight: bold;
}

/* JCross styles */

table.CrosswordGrid{
	margin: auto auto 1em auto;
	border-collapse: collapse;
	padding: 0px;
}

table.CrosswordGrid td{
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	vertical-align: middle;
	font-size: large;
	padding: 0px;
	margin: 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}

table.CrosswordGrid td.BlankCell{
	background-color: #000000;
	color: #000000;
}

table.CrosswordGrid td.LetterOnlyCell{
	text-align: center;
	vertical-align: middle;
	background-color: #ffffff;
	color: #000000;
	font-weight: bold;
}

table.CrosswordGrid td.NumLetterCell{
	text-align: left;
	vertical-align: top;
	background-color: #ffffff;
	color: #000000;
	padding: 1px;
	font-weight: bold;
}

.NumLetterCellText{
	cursor: pointer;
}

.GridNum{
	vertical-align: super;
	font-size: 0.8em;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

table#Clues{
	margin: auto;
	vertical-align: top;
}

table#Clues td{
	vertical-align: top;
}

table.ClueList{
  margin: auto;
}

td.ClueNum{
	text-align: right;
	font-weight: bold;
	vertical-align: top;
}

td.Clue{
	text-align: left;
}

div#ClueEntry{
	text-align: left;
	margin-bottom: 1em;
}

/* Keypad styles */

div.Keypad{
	text-align: center;
}

div.Keypad button{
	font-family: Geneva,Arial;
	font-size: 120%;
	background-color: #ffffff;
	color: #000000;
	width: 2em;
}

/* JQuiz styles */

div.QuestionNavigation{
	text-align: center;
}

.QNum{
	margin: 0em 1em 0.5em 1em;
	font-weight: bold;
	vertical-align: middle;
}

textarea{
	font-family: Geneva,Arial;
	font-size: larger;
}

.QuestionText{

}

.Answer{
	font-size: 120%;
	letter-spacing: 0.1em;
}

.Highlight{
	color: #000000;
	background-color: #ffff00;
	font-weight: bold;
	font-size: 120%;
}

ol.QuizQuestions{
	text-align: center;
	list-style-type: none;
	padding: 10px;
	text-align: left;
}

li.QuizQuestion{
	border-style: solid;
	border-width: 0px 0px 1px 0px;
}

ol.MCAnswers{
	text-align: left;
	list-style-type: upper-alpha;
	padding: 1em;
}

ol.MCAnswers li{
	margin-bottom: 1em;
}

ol.MSelAnswers{
	text-align: left;
	list-style-type: lower-alpha;
	padding: 1em;
}

div.ShortAnswer{
	padding: 1em;
}

.FuncButton {
	text-align: center;
	border-style: solid;
	color: #000000;
	background-color: #ffffff;
	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}

.FuncButtonUp {
	color: #000000;
	text-align: center;
	border-style: solid;

	border-left-color: rgb(204,0,51);
	border-top-color: rgb(204,0,51);
	border-right-color: rgb(204,0,51);
	border-bottom-color: rgb(204,0,51);

	background-color: #ffffff;
	color: #000000;
	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}

.FuncButtonDown {
	color: #000000;
	text-align: center;
	border-style: solid;

	border-left-color: rgb(204,0,51);
	border-top-color: rgb(204,0,51);
	border-right-color: rgb(204,0,51);
	border-bottom-color: rgb(204,0,51);
	background-color: #ffffff;
	color: #000000;

	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}

/*BeginNavBarStyle*/

div.NavButtonBar{
	background-color: #ff80ff;
	text-align: center;
	margin: 2px 0px 2px 0px;
	clear: none;
	font-size: 0.8em;
}

.NavButton {
	border-style: solid;
	
	border-left-color: #ffbfff;
	border-top-color: #ffbfff;
	border-right-color: #7f407f;
	border-bottom-color: #7f407f;
	background-color: #ff80ff;
	color: #000000;

	border-width: 2px;
	cursor: pointer;	
}

.NavButtonUp {
	border-style: solid;

	border-left-color: #ffbfff;
	border-top-color: #ffbfff;
	border-right-color: #7f407f;
	border-bottom-color: #7f407f;
	color: #ff80ff;
	background-color: #000000;

	border-width: 2px;
	cursor: pointer;	
}

.NavButtonDown {
	border-style: solid;

	border-left-color: #7f407f;
	border-top-color: #7f407f;
	border-right-color: #ffbfff;
	border-bottom-color: #ffbfff;
	color: #ff80ff;
	background-color: #000000;

	border-width: 2px;
	cursor: pointer;	
}

/*EndNavBarStyle*/


div.CardStyle {
	position: absolute;
	font-family: Geneva,Arial;
	font-size: 0.8em;
	padding: 5px;
	border-style: solid;
	border-width: 1px;
	color: #000000;
	background-color: #ffff80;
	left: -51px;
	top: -51px;
	overflow: visible;
}

.rtl{
	text-align: right;
	font-size: large;
}

.blog
{
border: 1px solid black;
font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
font-size: 14px;
color: rgb(204,0,51);
}

h4
{
width: 400px;
margin: auto;
}

#corps .etymo
{
width: 540px;
margin-left: 30px;
border: 8px double orange;
background-color: LemonChiffon;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-size: 16px;
padding: 10px;
margin-bottom: 10px;
}

#corps .etymo h4
{
color: Crimson;
font-size: 20px;
margin-bottom: 6px;
}

#corps .etymo strong
{
color: #700000;
font-weight: bold;
}
#corps .etymo em
{
color: #206000;
font-weight: bold;
}

#corps .etymo ul
{
list-style-image: url("puce3.png");
 margin: 20px;
 padding: 5px;
}

.blanc
{
color: white;
}

::selection {
background: rgb(204,0,51);
color:#fff;
}

::-moz-selection {
background: rgb(204,0,51);
color:#fff;
}

::-webkit-selection {
background: rgb(204,0,51);
color:#fff;
}

.consigne {
background: rgb(204,0,51);
color:#fff;
}

.audio
{
margin: auto;
border: 1px red solid;
width: 400px;
padding: 10px;
text-align: center;
}

.conjugaison2
{  
	display: none;
	position: fixed;
	margin: auto;
	top: 500px;
	border: solid 4px Indigo;
	width: 200px;  
	height: auto;
	color: Indigo;
	background: white;
	padding: 10px;
	text-indent: 0cm;
} 

a:hover .conjugaison2
{
display:block;
} 

.bleu2
{
color: blue;
}

.reponse
{
color: white;
}

.reponse:hover
{
color: blue;
font-weight: bold;
}