/* Styles du site g�n�rale */
/* les styles appliqu�s au texte sont dans les paragraphes g�n�raux (p), il est inutile de rajouter text aux balises p */
p {
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: justify;
	color: PaleGreen;
	background-color: transparent;
	border : 0px;
}
p:first-letter {
	float: left;
	font-family: XmasTerpieceSwashes, "Harrington normal", Impact;
	font-size: 120%;
	font-style: normal;
	font-weight: bold;
	color: LawnGreen;
	text-transform: capitalize;
	background-color: transparent;
}
ul {
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: justify;
	color: PaleGreen;
	border : 0px;
	padding-left: 50px;
}
ol {
	padding-left: 50px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: small;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: justify;
	color: white;
}
h1 {
	font-family: "Old English Text MT", "Harrington normal", Impact;
	font-size: 200%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	text-indent: 0px;
	text-align: center;
	color : Chartreuse;
}
h2 {
	font-family: Tolkien, Arial, serif;
	font-size: 120%;
	font-style: italic;
	font-weight: bolder;
	color: Lime;
	text-decoration: underline;
	text-indent: 00px;
	text-align: center;
}
h3 {
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	color: white;
	text-decoration: underline;
	text-indent: 00px;
	text-align: center;
}

/* Style modifiant qu'une partie d'un autre style*/
.surligne {
	background-color: MediumSeaGreen;
	color: White;
}
.specfocus {
	font-weight: bold;	
	background-color: Green;
	color: White;
}
strong {
	font-weight: bold;
	color: LawnGreen;
}
/* Styles g�rants la mise en page g�n�rale*/
body {
	background-color: black;
	color: PaleGreen;
	margin-top: 20px;
	margin-bottom: 20px;
	background-image: url("/images/neant.jpg");
	background-repeat: repeat;
}
input, button {
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: PaleGreen;
	background-color: black;
	border-color: MediumSpringGreen;
	border-radius: 3px;
	}
input[readonly] {
	background-color: dimgray;
	font-weight: bold;
}
textarea {
	padding-left: 5px;
	padding-right: 5px;
	font-family:  Tolkien, Arial, serif;
	font-size: medium;
	text-align: justify;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: PaleGreen;
	background-color: black;
	width : 95%;
	}
select {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: 80%;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: PaleGreen;
	background-color: black;
	}
option {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: GreenYellow;
	background-color: Green;
	}
optgroup {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: Lime;
	background-color: Teal;
	}
option[disabled] {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-style: normal;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: Lime;
	background-color: black;
	}
label {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	text-align:center;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: MediumSpringGreen;
}
table {
	border-collapse: collapse;
	vertical-align: middle;
	margin:auto;
}
tr {
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: PaleGreen;
}
.eme {	
	color: DeepSkyBLue;
	background-color: RGBa(102,205,170,0.2);
}
td {
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid MediumSeaGreen;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
}
.cadre {
	border: 0px;
	text-align: center;
	vertical-align: top;
}
th {
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid MediumSeaGreen;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: MediumTurquoise;
}
caption {
	padding-left: 5px;
	padding-right: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: 120%;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: PaleTurquoise;
}
fieldset {
	padding-left: 5px;
	padding-right: 5px;
	border: 3px ridge MediumSpringGreen;
	border-radius: 10px;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: MediumSpringGreen;
	margin: 5px;
}
.melfieec {	 /*legend en cours*/
	font-size: normal;
	color: Red;
	font-weight: bold;
	border: 3px Red outset;
}
/* Style de fieldset pour les partie de cache cache */
.hidden {
   display: none;
}

.visible {
  display: block;
}
.visibleTR {
  display: table-row;
}

legend {
	padding-left: 5px;
	padding-right: 10px;
	border: 3px ridge MediumSpringGreen;
	border-radius: 5px;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: italic;
	line-height: normal;
	font-weight: none;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	color: MediumSpringGreen;
	padding: 2px;
} 
.mellegec {	 /*legend en cours*/
	font-size: normal;
	color: White;
	font-weight: bold;
	background-color: DarkRed;
	border: 3px Red outset;
}
img {
	margin: 5px;
	padding: 10px;
	float: left;
}
.imgblk {
	display: block;
}
.imggauche {
	float: left;
}
.imgdroite {
	float: right;
}
.avatpri {
	max-width: 400px;
	max-height: 400px;
}
.avat {
	max-width: 180px;
	max-height: 180px;
}
.carte {
	max-width: 1300px;
}
.resrech {
	max-width: 50px;
	max-height: 50px;
}
/* Styles des liens*/
a {
	color: Teal;
	text-decoration: none;
}
a:visited {
	color: Teal;
}
a:hover {
	color:Green;
	text-decoration: underline;
}
a:active {
	color: Lime;
	text-decoration: underline;
}
ul.dr:hover {
	cursor: pointer;
}
ul {
	list-style-image : url(/images/puce/drag.png);
}
/* Style de block toujours visible: cadre d'�tat */
.etat {
	background-color: #2F4F4F;
	border: 5px inset #696969;
	width: 150px;
	height: 300px;
	position: fixed;
	top : 5px;
	right: 5px;
}
/* jeu de cadres*/
header, #en_tete {
	width: 99%;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	text-align: center;
	}
nav, #gauche {
	width: 19%;
	height: 84%;
	background-repeat: no-repeat;
	margin-top: 25px;
	margin-bottom: 1px;
	margin-right: 1px;
	float: left;
	overflow: auto;
	text-align: center;
	}
section, #corps {
	width: 80%;
	margin-top: 25px;
	background-repeat: no-repeat;
	margin-bottom: 1px;
	overflow: visible;
	float: right;
	text-align: center;
	}

/*menu javascript plac� � gauche*/
#thmenugauche	{
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 auto;
	font-family: "Times new Roman", "Matura MT Script Capitals", "Time New Roman", serif;
	font-size: small;
	color: #00FFFF;
	font-weight: bold;
	border: 0px solid RoyalBlue;
	border-collapse: inherit;
}
#tdmenugauche	{
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 auto;
	font-family: "Times new Roman", "Matura MT Script Capitals", "Time New Roman", serif;
	font-size: small;
	color: #0000FF;
	font-weight: normal;
	border: 0px solid RoyalBlue;
	border-collapse: inherit;
}
.nobord {	
	border: 0px solid RoyalBlue;
	border-collapse: inherit;
}

/*Boutons*/
.submit {
	font-size: small;
	color: DarkGreen;
	font-weight: bold;
	background-image: url("/images/boutons/tun_na.jpg");
	background-repeat: no-repeat;
	border: 3px outset darkgreen;
}
.submit:hover { /*souris au dessus*/
	font-size: small;
	color: crimson;
	border: 3px inset crimson;
	background-image: url("/images/boutons/tun_ov.jpg");
	background-repeat: no-repeat;
	background-position:center center;
}
.submit:active {	 /*bouton appuy�*/
	font-size: small;
	color: LawnGreen;
	font-weight: bold;
	border: 3px inset LawnGreen;
	background-image: url("/images/boutons/tun_ap.jpg");
	background-repeat: no-repeat;
	background-position:center center;
}
.submit:focus {	/*bouton selectionn� grace � "tab"*/
	font-size: small;
	color: crimson;
	font-weight: bold;
	border: 3px inset crimson;
	background-image: url("/images/boutons/tun_ov.jpg");
	background-repeat: no-repeat;
	background-position:center center;
}

/*pour menu niv 1*/
.submitlt1 {
	max-width: 250px;
	height: 25px;
	font-size: 1em;
	color: DarkGreen;
	font-weight: bold;
	background-image: url("/images/boutons/tun_na.jpg");
	background-repeat: no-repeat;
	border: 2px outset darkgreen;
	background-color: none;
}
.submitlt1:hover { /*souris au dessus*/
	color: lime;
	font-weight: bold;
	background-image: url("/images/boutons/tun_ap.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px inset ForestGreen;
	background-color: none;
}
.submitlt1:focus {	/*bouton selectionn� grace � "tab"*/
	color: limeGreen;
	font-weight: bold;
	background-image: url("/images/boutons/tun_ap.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px inset Lime;
	background-color: none;
}

.submitlt {
	max-width: 230px;
	height: 25px;
	cursor: pointer;
	font-size: 0.9em;
	color: White;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ov.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px outset orangered;
}
.submitlt:hover { /*souris au dessus*/
	font-size: 0.9em;
	color: red;
	border: 2px inset red;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ov2.jpg");
	background-repeat: no-repeat;
	background-position:center center;
}
.submitlt:focus, .submitltac {	/*bouton selectionn� grace � "tab"*/
	cursor: pointer;
	font-size: 0.9em;
	color: red;
	font-weight: normal;
	border: 2px inset crimson;
	background-image: url("/images/boutons/tun_ov2.png");
	background-repeat: no-repeat;
	background-position:center center;
}



/*pour menu niv 2 a appuyer*/
.submitlt2 {
	max-width: 230px;
	height: 25px;
	font-size: 1em;
	color: limeGreen;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ap.jpg");
	background-repeat: no-repeat;
	border: 2px inset ForestGreen;
	background-color: none;
}
.submitlt2:hover { /*souris au dessus*/
	color: Green;
	font-weight: normal;
	background-image: url("/images/boutons/tun_na.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px outset darkgreen;
	background-color: none;
}
.submitlt2:focus {	/*bouton selectionn� grace � "tab"*/
	color: darkGreen;
	font-weight: normal;
	background-image: url("/images/boutons/tun_na.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px inset teal;
	background-color: none;
}

/*pour menu niv 3*/
.submitlt3 {
	max-width: 210px;
	height: 25px;
	font-size: 0.7em;
	color: red;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ov2.jpg");
	background-repeat: no-repeat;
	border: 2px inset tomato;
	background-color: none;
}
.submitlt3:hover { /*souris au dessus*/
	color: orangered;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ov.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px outset Darkred;
	background-color: none;
}
.submitlt3:focus {	/*bouton selectionn� grace � "tab"*/
	color: maroon;
	font-weight: normal;
	background-image: url("/images/boutons/tun_ov.jpg");
	background-repeat: no-repeat;
	background-position:center center;
	border: 2px inset weight;
	background-color: none;
}

.plus { /*bouton plus laissant apparaitre le contenu cach� d'un contenant*/
	background-image: url("/images/boutons/mei_plus.png");
}

/*Bouton pour le module m�l�e gauche*/
.melgau {
	font-size: normal;
	color: Green;
	font-weight: bold;
	border-radius: 10px;
	background-color: Black;
	border-color: Green;
	border-radius: 5;
}
.melgau:hover { /*souris au dessus*/
	font-size: normal;
	color: DarkGreen;
	font-weight: bold;
	border-radius: 10px;
	background-color: White;
	border-color: Green;
	border-radius: 5;
	
}
.melgau:active {	 /*bouton appuy�*/
	font-size: normal;
	color: White;
	font-weight: bold;
	border-radius: 10px;
	background-color: DarkRed;
	border-color: Red;
	border-radius: 5;
}
.melgau:focus {	/*bouton selectionn� grace � "tab*/
	font-size: normal;
	color: DarkGreen;
	font-weight: bold;
	border-radius: 10px;
	background-color: White;
	border-color: Green;
	border-radius: 5;
}
.melgauec {	 /*bouton en cours*/
	font-size: normal;
	color: White;
	font-weight: bold;
	border-radius: 10px;
	background-color: DarkRed;
	border-color: Red;
	border-radius: 5;
}
.loupe { /*bouton plus laissant apparaitre le contenu cach� d'un contenant*/
	background-color: grey;
	color: black;
	font-weight: bold;
	font-size: normal;
}
/*menu du haut*/
#barrehaut {
	border: ridge 4px  MediumSeaGreen;
	}
#tdl {
	border-right: ridge 3px  MediumSeaGreen;
	border-collapse: inherit;
	}
#trb {
	border-bottom: ridge 3px  MediumSeaGreen;
	border-collapse: inherit;
	}
#tdb {
	border-bottom: ridge 3px MediumSeaGreen;
	border-collapse: inherit;
	}
#tdbl {
	border-bottom: ridge 3px MediumSeaGreen;
	border-right: ridge 3px MediumSeaGreen;
	border-collapse: inherit;
	}
/* divers addons*/
#haut {
	font-size: small;
}
#ht {
	width: 100%;
}
#rech {
	width: 400px;
	text-align: center;
	}
#recht, .recht {
	border: 0px;
	border-collapse: inherit;
	}
#evo {
	border: 1px, white;
	background: white;
}

/* Styles des parties Zylna�el*/
.NormalZylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	text-indent: 30px;
	font-size: 80%;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: justify;
	color: white;
	border-style: none;
}
.titre1zylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: 120%;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FF0000;
	text-indent: 40px;
	text-align: left;
}
.TitreZylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: 150%;
	font-style: normal;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	text-align: center;
}
.titre2zylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #0099FF;
	text-indent: 50px;
	text-align: left;
}
.TitreeauZylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: 150%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-align: center;
}
.Titre2Zylnaieleau {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: medium;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-indent: 50px;
	text-align: left;
}
.EGZylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: 80%;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color: #00FF00;
	text-indent: 20px;
	text-align: justify;
	text-decoration: none;
}
.Titre3zylnaiel {
	font-family: ForgottenUncial, Harrington, "Arial Narrow", Arial, serif;
	font-size: medium;
	font-style: italic;
	line-height: normal;
	color: #00CC00;
	text-decoration: underline;
	white-space: normal;
	position: static;
	text-indent: 60px;
	text-align: left;
}
/* Styles des parties Aarazels*/
.titreaarazel {
	font-family: "Tribal Two Normal", "Viner Hand ITC Normal", "Times New Roman", serif;
	font-size: 150%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: red;
	text-align: center;
}
.normalaarazel {
	font-family: "Tribal Two Normal", "Viner Hand ITC Normal", "Times New Roman", serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: red;
	text-align: justify;
	border-style: none;
}
/*Style des parties Unyalas*/
.titreunyala {
	font-family: "the King & Queen font", "Comic sans MS", serif;
	font-size: 150%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #228B22;
	text-align: center;
}
.normalunyala {
	font-family: Papyrus, "Comic sans MS", serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: LimeGreen;
	text-align: justify;
	border-style: none;
}
/*Style des parties Irhyians*/
.titreirhyian {
	font-family: "Times new roman", serif;
	font-size: 150%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: aqua;
	text-align: center;
}
.normalirhyian {
	font-family: "Times new roman", serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: aqua;
	text-align: justify;
	border-style: none;
}
/*Style des parties Zorlacks*/
.titrezorlack {
	font-family: "Dwarven Stonecraft", Aniron, "Times new roman", serif;
	font-size: 120%;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: grey;
	text-align: center;
}
.normalzorlack {
	font-family: Aniron, "Times new roman", serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: grey;
	text-align: justify;
	border-style: none;
}
.titresoufean {
	font-family: ForgottenUncial, Harrington, "Lucida Calligraphy", "Arial Narrow", Arial, serif;
	font-size: 130%;
	font-style: normal;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
}
.normalsoufean {
	padding-left: 5px;
	padding-right: 5px;
	font-family: ForgottenUncial, Harrington, "Lucida Calligraphy", "Arial Narrow", Arial, serif;
	font-size: small;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	text-align: justify;
	color: black;
}
/*STYLE DU CHAT*/

/* Conteneur principal des blocs de la page */
#container {
	width: 80%;
	margin: 50px auto;
	padding: 2px 20px 20px 20px;
}

/* Bloc contenant la zone de texte et bouton */
.post_message  {
	width: 95%;
	margin: auto;
	border: 1px solid #d2d2d2;
	padding: 3px;
}
/* Zone de texte */
.post_message #message {
	width: 80%;
}
/* Bouton d'envoi */
.post_message #post {
	width: 18%;
}

/* La zone o� sont affich�s les messages
et utilisateurs connect�s */
.chat {
	width: 95%;
	margin: 10px auto;
	border: 1px solid #d2d2d2;
	padding: 0px;
}
/* Bloc de chargement */
.chat #loading {
	margin-top: 50px;
}
/* Annonce */
.chat #annonce {
	margin: -6px -7px 5px -7px;
	padding: 5px;
	height:20px;
}
/* Zone des messages */
.chat #text-td {
	margin: 0px; 
	padding: 5px; 
	width: 100%; 
}
/* Zone des utilisateurs connect�s */
.chat #users-td, .chat #users-chat-td {
	margin: 0px; 
	padding: 5px; 
	width: 20%; 
}
.chat #text, .chat #users, .chat #users-chat {
	height:800px; 
	overflow-y: auto;
}

/* Modification du statut */
.status {
	width: 95%;
	border: none;
	margin: auto;
	text-align: right;
}

.info {
	color: Green;
}
/*----------------------------------------------------------------------------- FRISE ------------------------------------------------------------------------------------*/
/* INTRO SECTION
�������������������������������������������������� */

.intro {
  background: none;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: justify;
}


/* TIMELINE
�������������������������������������������������� */

.timeline textarea {
	text-align: justify;
	font-family: Tolkien, Arial, serif;
	font-size: small;
	font-style: normal;
	line-height: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: DarkSlateGray;
	background-color: transparent;
	width : 95%;
	border: none;
}

.timeline a {
	text-align: center;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: none;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	color: teal;
	background-color: transparent;
	border: none;
}


.timeline a:hover {
	text-align: center;
	font-family: Tolkien, Arial, serif;
	font-size: medium;
	font-style: normal;
	line-height: none;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	text-decoration: underline;
	color: teal;
	background-color: transparent;
	border: none;
}

.timeline ul li { /*Dessine la ligne et Positionne le tout et supprime les puces normales*/
  list-style-image : none;
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: PaleGreen;
}

.timeline ul li::after { /*ROND*/
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div { /*rectangle*/
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: PaleGreen;
  border-radius: 10px;
}

.timeline ul li div::before { /*triangle*/
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div { /*position des bulles  de droite*/
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before { /*positionne le triangle de droite*/
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent PaleGreen transparent transparent;
}

.timeline ul li:nth-child(even) div { /*positionne la bulle de gauche*/
  left: -470px;
}

.timeline ul li:nth-child(even) div::before { /*triangle de gauche*/
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent PaleGreen;
}

time { /*date de la bulle*/
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 2px;
  color: black;
}

.rond-rouge {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 50%;
}

.etat-init-0 { color: white; background-color: black; }
.etat-init-2 { color: black; background-color: yellow; }
.etat-init-3 { color: black; background-color: orange; }
.etat-init-4 { color: gray; }
/* etat 1 ou par défaut : pas de classe = style normal */