/* Ce style pour fond noir ou fonce */
@font-face {font-family: FCopperplate; src: url(Typo/Copperplate.ttf);}
H1 {
	color: white;
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 250%;
	text-align: center;
	}
H1.copper {font-family: FCopperplate;}
H2 {
	color: #CCF;
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 160%;
	text-align: center;
	}
H2.agauche {
	text-align: left ! important;
	}
BODY {
	font-family: Trebuchet, "Trebuchet MS", sans-serif;
	font-size: 13px;
	color: white;
	margin: 0;
	padding: 0;
	}
TD, P {
	color: white;
	margin-left: 1em;
	margin-right: 1em;
	}
A:hover IMG {
	opacity: 0.80; 
	border-color: #B00;
	}
IMG { max-width: 100%; height: auto; }

.bleu {color: #99F}
.bleu2 {color: #DDF}
.bloc {clear: both;}
.cadre {position: relative;}
.centre {
	font-size: 133%; 
	text-align: left; 
	margin-left: 35%; 
	}
.droite {
	float: right;
	margin: 10px;
	}
.gauche {
	float: left;
	margin: 10px;
	}
.gris_clair {color: #EEE}
.ital {font-style: italic;}
.justif {text-align: justify;}
.legend {
	margin-top: 2px; 
	margin-bottom: 40px;
	}
.lettrine {
	float:left;
	width:0.7em;
	font-size:280%;
	font-family: "Courier New", Courier, monospace;
	line-height: 71%;
	font-weight: bold;
	margin-top: -0.30em;
	}
.pasgras {font-weight: normal}
.petit {
	font-weight: normal; 
	font-size: 90%;
	}
.petitbleu {
	font-weight: normal; 
	font-size: 90%; 
	color: #CCF
	}
.petitgris {
	font-weight: normal; 
	font-size: 90%; 
	color: #AAA;
	margin: 6px ! important;
	}
.plusgrand {font-size: 133%;}
.pluspetit {font-size: 80%;}
.moyen {font-size: 150%;}
.milieu {text-align: center;}
.moyengras {
	font-size: 166%;
	font-weight: bold;
	}
.grand {
	font-weight: bold; 
	font-size: 200%;
	}
.tresgrand {
	font-weight: bold; 
	font-size: 400%;
	}
.trespetit {font-size: 50%;}
.indent00 {margin-left: 0px ! important;}
.indent10 {margin-left: 10px;}
.indent25 {margin-left: 25px;}
.indent40 {margin-left: 40px;}
.indent60 {margin-left: 60px;}
.to_top {
	float: right;
	margin-right: 1.3em; 
	border: 0px;
	}
.pad25 {padding-left: 2em;}

.updates {
	color: #999;
	font-size: 80%;
	}
DIV#Auteur {
	font-size: 360%;
	color: #EEF;
	font-family: FCopperplate;
	font-weight: bold;
	text-shadow: #99B 4px 4px 3px;
	margin-top: 0.4em;
	}
DIV#fleches { 
	position: fixed; 
	background: transparent; 
	line-height: 1.4;
	right: 3px; 
	bottom: 125px; 
	font-size: 80%;
	color: #222;
	text-align: center;
	z-index: 12; 
	}
DIV.musique {
	color: #AAA;
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: center;
	}
DIV.update {
	color: #AAA;
	position: absolute;
	top: 10px;
	left: 10px;
	text-align: center;
	}
DIV.piedcentre {
	text-align: center;
	color: #AAA;
	margin: auto;
	width: 80%;
	}
DIV.pieddroit {
	position: absolute;
	color: #AAA;
	right: 10px;
	text-align: center;
	}
DIV.piedgauche {
	position: absolute;
	color: #AAA;
	left: 10px;
	text-align: center;
	}
HR.tube	{
	clear: both;
	background: #AAF url(images/Tube1.gif) repeat-x;
	height: 10px;
	margin: 0; padding: 0;
	border-style: none;
	}
OL.romain {list-style-type: upper-roman;}
A:link    {color:#AAF;}
A:visited {color:#DDD;}
A:hover   {color:#E66;}
A:active  {color:#6F6;}

.center40nj {
	margin-left: 30%;
	margin-right: 25%;
	}
.center60nj {
	margin-left: 25%;
	margin-right: 15%;
	}
.center80 {
	margin-left: 10%;
	margin-right: 10%;
	}
/* container for "Boxes" */
DIV.container {
	clear: both;
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	}

.boxes, .boxes_h {
	display: inline-block;
	text-align: left;
	vertical-align: top; 
	padding: 4px;
	margin: 4px;
	}

/*****************************************/
@media screen and (max-width: 500px) {
	H1 {font-size: 160%; margin-left: 12%; margin-right: 12%;}
	H2 {font-size: 130%; margin-left: 10%; margin-right: 10%;}
	DIV.musique {max-width: 3em;}
	DIV.update {max-width: 4em;}
	DIV#Auteur {font-size: 160%}
	.gauche, .droite {float: none;}
	.moyengras {font-size: 110%}
	.plusgrand {font-size: 110%}
	DIV.main {margin-left: 5%; margin-right: 5%;}
	.center80, .center70, .center70nj, .center60, .center60b, .center60nj {
		margin-left: 3%; margin-right: 3%;
		}
	.center50 {margin-left: 6%; margin-right: 6%;}
	TABLE.bordgris, DIV.bordgris {border-width: 3px;}
	}