/*Style global du site esco-da.be*/
/*Définition générale*/
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-right:auto;
	margin-left:auto;
	width:990px;
	position:relative;
	/*background-image:url(../Img/localhost.gif);*/
}

/*Style de la bannière*/
#robot {
position:absolute;
left:300px;
}

/* Style de l'en-tête*/
#up {
	position:relative;
}
#up ul {
	list-style:none;
	position:absolute;
	margin:0;
	padding:0;
}
#menu_up {
	top:0px;
	left:20px;
	z-index:2;
}
#menu_up.index {
	left:105px;
}
#menu_up li{
	float:left;
	position:relative;
}
#menu_up li a{
	display:block;
	height:19px;
	width:120px;
	background-color:#909090;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	border: 1px #909090 solid;
}
#menu_up .sous_menu{
	background-image:url(../Img/arrows.gif);
	background-repeat:no-repeat;
	background-position:center right;
}
#menu_up li a:hover {
	background-color:#B7B7B7;
}
#menu_up .actu a{
	width:30px;
}
#menu_up .next a{
	width:30px;
	background-color:#B7B7B7;
}
#menu_up .next a:hover{
	background-color:#909090;
}
#menu_up .inverse a{
	background-color:#B7B7B7;
	border: 1px #B7B7B7 solid;
}
#menu_up .inverse a:hover{
	background-color:#909090;
	border: 1px #909090 solid;
}
#menu_up .inverse li a{
	background-color:#909090;
	border: 1px #909090 solid;
}
#menu_up .inverse li a:hover{
	background-color:#B7B7B7;
	border: 1px #B7B7B7 solid;
}
#menu_up li ul{
	display:none;
	position:absolute;
	top:20px;
	left:5px;
	list-style:none;
	z-index:3;
}
#menu_up li:hover > ul {
	display:block;
}
#menu_up li ul li a {
	width:160px;
	text-align:left;
}
#menu_up li ul li ul {
	top:0px;
	left:160px;
}
/*MENU DESSOUS*/
#menu_down {
	top:169px;
	left:510px;
	z-index:1;
}
#menu_down li {
	float:left;
}
#menu_down li a {
	display:block;
	height:24px;
	width:76px;
	padding-top:5px;
	background-color:#777777;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	font-size:14px;
	border: 1px #777777 solid;
}
#menu_down li.large a {
	width:110px;
}
#menu_down li a:hover {
	background-color:#B7B7B7;
}
#menu_down_2 {
	top:169px;
	left:50px;
	z-index:1;
}
#menu_down_2 li {
	float:left;
}
#menu_down_2 li a {
	display:block;
	height:24px;
	width:300px;
	padding-top:5px;
	background-color:#777777;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	font-size:14px;
	border: 1px #777777 solid;
}
#menu_down_2 li a:hover {
	background-color:#B7B7B7;
}
/*FIN DU CSS Menu*/

/*STYLE globale à toute les pages*/
#corps {
	width:990px;
	clear:both;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:15px;
	padding-bottom:15px;
	border-left:2px solid #A9A9A9;
	border-right:2px solid #A9A9A9;
	background-color:white;
}
div#corps {
	width:986px;
}
div#corps table table{
	height:inherit;
}
img {
	border:0px;
}
#corps_centre {
	width: 750px;
	margin-right:auto;
	margin-left:auto;
}
#colonne_gauche, #colonne_centre, #colonne_droite {
	float:left;
	position:relative;
}
#colonne_gauche img, #colonne_droite img{
	position:relative;
}
#colonne_gauche {
	width: 150px;
	text-align:right;
}
#colonne_centre {
	width: 445px;
	background-color:#B7B7B7;
	padding-left:5px;
}
#colonne_droite {
	width: 150px;
	text-align:left;
}
#corps_centre #close {
	clear:both;
	text-align:center;
	padding-top:10px;
} 
/* style des barres horizontales pontillés*/
/*SYNTAX*/
/*
<hr />
*/
hr{
	border:1px dashed #444444;
	clear:both;
	width:80%;
	margin-top:5px;
	margin-bottom:15px;
}
.divgris {
	color:#000000;
	background-color:#d7d7d7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
	height:100%;
}
/*STYLE disponnible pour toutes les pages*/

/*STYLE permettant de diviser un espace en 3 colonnes de largeur identique*/
/*SYNTAX*/
/*
<div class="troiscolonnes">
[Contenu de la première colonne]
</div>
<div class="troiscolonnes">
[Contenu de la deuxième colonne]
</div>
<div class="troiscolonnes">
[Contenu de la troisième colonne]
</div>
*/
.troiscolonnes {
	margin:2% 2% 2% 2%;
	padding:0;
	width:29%;
	float:left;
	text-align:center;
}

/*STYLE permettant de diviser un espace en 2 colonnes de largeur identique*/
/*SYNTAX*/
/*
<div class="deuxcolonnes">
[Contenu de la première colonne]
</div>
<div class="deuxcolonnes">
[Contenu de la deuxième colonne]
</div>
*/
.deuxcolonnes {
	float:left;
	margin:2% 2% 2% 2%;
	padding:0;
	width:45%;
}


/*STYLE permettant de diviser un espace en 2 colonnes de largeur identique*/
/*SYNTAX*/
/*
<div class="deuxcolonnes">
[Contenu de la première colonne]
</div>
<div class="deuxcolonnes">
[Contenu de la deuxième colonne]
</div>
*/
.texte_download {
}
.colonne_texte {
	float:left;
	margin:2px 2px 2px 2px;
	padding:0;
	width:620px;
}
.colonne_download {
	float:left;
	margin:2px 2px 2px 2px;
	padding:0;
	padding-bottom:30px;
	width:150px;
	background-color:#d7d7d7;
}

/*STYLE defini pour une case de tableau, elle aura un fond gris et une ecriture blanche sauf pour un lien*/
/*Si on veut l'écriture en gras, utilisé la classe tdgrisbold*/
/*SYNTAX*/
/*
<td class="tdgris">
<td class="tdgrisbold">
*/
tr.tdgris td {
	color:#000000;
	background-color:#d7d7d7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tdgris {
	color:#000000;
	background-color:#d7d7d7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tdgrisclair {
	color:#000000;
	background-color:#E7e7e7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tdgrisbold {
	color:#000000;
	background-color:#d7d7d7;
	font-weight: bold;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tdbold {
	font-weight: bold;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tablebordure {
	border-spacing: 1px;
	border-collapse: separate; 
}
.tablebordure td {
	color:#000000;
	background-color:#E7e7e7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.tablebordure tr th {
	color:#000000;
	background-color:#D7D7D7;
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
.download_box {
	display:block;
	background-color:#D7D7D7;
	width:80%;
	margin-right:auto;
	margin-left:auto;
}

.table_center {
	margin-left:auto;
	margin-right:auto;
}

.table_product {
	background-color:white;
}
.table_product td, .table_product th {
	background-color:#D7D7D7;
}
.table_product td {
	text-align:center;
}
.table_product thead th {
	text-align:center;
}

/*STYLE des titres et paragraphes*/
/*
INTRODUCTION
Le HTML, fourni 7 balise de mise en page automatique: <h1>, <h3>, <h2>, <h3>, <h5>, <h6>, <p>
Elle sont entièrement paramètrable, mais elle ont une hierarchie prédéfinie.  
Les balise h1 à h5, définisse les titres selon 5 niveau différent, et la balise p défini un paragraphe.
Ici ce trouve la css défini pour chacune des 4 balises utilisé dans le site : <h1>, <h3>, <h2>, <p>
Les utilisez garanti une uniformité dans toues les pages du site
h1 correspond à l'ancienne clase TitreChap
h3 correspond à l'ancienne clase DebutTexte
p correspond à l'ancienne clase texte
Il est encore possible d'utiliser les 2 Syntaxe, mais il vaut mieux priviliégié la syntax ci-dessous
<h1>Titre 1</h1>
<h3>Titre 2</h3>  //titre sans lien
OU 
<h3><a href="LIEN">Titre 2</a></h3>   //titre avec lien
<h2>Titre 3</h2>
<p>Paragraphe</h1>

A titre indicatif, voici l'ancienne syntax
DANS UN TABLEAU
<td><h1>Titre 1</h1></td>
OU HORS D'UN TABLEAU
<div class="TitreChap">Titre 1</div>

<p><h2>Titre du paragraphe</h2>Texte du paragraphe</p>
Il se peut que du code parasite se soit inserer dans la syntax, cependant il est dans la plupart des cas inutiles

Le titre 2 a été ajouté par rapport à l'ancien style, il sert essentiellement pour les titres de la page home, mais il peut servir dan le site entier.  
Le titre 2 peut s'utiliser avec ou sans lien, Seul le titre avec lien, change de couleur lors du survol, si vous voulez un titre qui change de couleur au survol mais qu'il n'a pas besoin d'un lien, fate pointer le lien vers'#' ce qui donne
<h3><a href="#">Titre 2</a></h3>
*/

h1, .TitreChap {
	color:#FFFFFF;
	font-size:16px;
	font-style: italic;
	font-weight: bold;
	height:30px;
	width:auto;
	border: 2px solid #777777;
	background-color:#909090;
	margin-top:50px;
	margin-bottom:20px;
}
h1.center {
	text-align:center;
}
#corps_centre h1 {
	margin-top:10px;
	margin-bottom:10px;
}
td h1 {
	margin-top:0px;
	margin-bottom:0px;
}
/*couleur: blanc, taille:16px, italic, gras
Il forme un cadre de hauteur 30px, largeur 100% de la largeur disponnible, bordure de 2px pleine et grise, fond coloré en gris (plus pale)
Une marge supérieur de 50 pixel est appliqué*/

h3 ,h3 a{
	text-align:left;
	width:auto;
	padding-left:5%;
	color:#0C1C8C;
	font-size:12px;
	font-weight:normal;
}
h3 {
	text-decoration:none;
}
h3 a:hover{
	color:#98A0CA;
}
/*titre aligné à gauche, large de 90% de la largeur disponnible, espace à gauche de 5% de la largeur disponnible, couleur bleu, taille 12px, ni gras ni italic
les titres sans lien ne sont pas souligné
Les lien survolé change de couleur (bleu plus claire)*/

h2, .DebutTexte  {
	color:#0C1C8C;
	font-size:14px;
	font-weight:bolder;
	font-style:italic;
	text-align:left;
	margin:5px 0 0 0;
	padding-left:15px;
}
/*couleur bleu, taille 14px, gras et italic, aligné à gauche, marge supérieur de 5px, espace à gauche de 15 px*/

p, .texte, p li, #corps li, td, th {
	font-size:12px;
	text-align:left;
	margin:3px 0 0 0;
}
p.center {
	text-align:center;
}
/*taille 12px, alignée à gauche, marge supérieur de 3pixel*/

/*bouton changeant de couleur avec un survol*/
/*<a href="lien" class="bouton">texte du bouton</a>*/
.bouton a, .bouton a:link, .bouton a:visited {
	display:block;
	height:20px;
	width:90%;
	color:#FFFFFF;
	text-align:center;
	line-height:20px;
	text-decoration:none;
	background-color:#0C1C8C;
	font-size:12px;
	margin-left:5%;
}
.bouton a:hover {
	color:#FFFFFF;
	background-color:#98A0CA;
}

.ici {
	background-color:#909090;
}
#login, #dem_login {
    width:300px;
	margin-left:auto;
    margin-right:auto;
	padding-top:30px;
}
#dem_login {
	width:400px;
	padding-top:0px;
}
#login p, #dem_login p {
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}
#login .tdgris, #dem_login .tdgris {
	margin-top:30px;
}
.attention {
	color:#FF0000;
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:center;
}
.bordure {
    width:80%;
    border:solid 2px black;
    margin-left:auto;
    margin-right:auto;
}
.bordure form {
	text-align:center;
}
.bordure h2 {
    margin-bottom:15px;;
}
#dem_login input{
	width:250px;
	margin-left:auto;
	margin-right:auto;
}
#dem_login input.TitreChap {
	width:120px;
}
.icone {
	vertical-align: text-bottom;
}

/*Style propre au page possédant un formulaire de recherche

/admin/gestion_dowload.php
/Download/Download.php
*/
#recherche {
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#recherche form {
	padding-left:30px;
	margin-top:-11px;
	background-color:#909090;
	height:80px;
}
#recherche td {
	color:#FFFFFF;
}
#recherche h1 {
	text-align:center;
}
form {
	text-align:left;
}

select{
	width:150px;
	margin-bottom:3px;
}

form p {
	position:relative;
}

#form_file_dd {
	float:left;
	margin-right:60px;
}

#form_file_ftp {
	float:left;
	margin-top:70px;
	margin-left:-600px;
	clear:right;
}
#file_ftp {
	width:300px;
}
#form_renom {
	float:left;
	margin-top:100px;
	margin-left:-250px;
}
#renom {
	width:200px;
}
#form_submit {
	clear:both;
}
#form_left {
	float:left;
	clear:left;
	width:400px;
}

#form_right {
	float:left;
}

#pages {
	width:400px;
}
#year {
	width:50px;
}
#month {
	width:80px;
}
.ordre_download {
	float:right;
	margin-top:0px;
}
a.ordre_download {
	margin-top:5px;
}
#prime_cube_div {
	clear:both;
	position:relative;
	display:block;
	height:420px;
}
#img_prime {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
.prime_cube_encadre {
	width:300px;
	text-align:center;
	padding-top:10px;
	position:absolute;
	top:335px;
	left:240px;
	z-index:0;
}

/*STYLE propre au titre des colonnes de la page Home*/
.swap a{
	display:block;
	height:38px;
	background-repeat:no-repeat;
	background-position:center;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.swap a:hover > img{
	visibility:hidden;
}
/*STYLE pour le bas-de-page*/
#down {
	margin:0 0 0 0;
	padding:0 0 5px 0;
	clear:both;
	height:30px;
	background-image:url(../Img/fond_cadre.png);
	background-repeat:no-repeat;
	background-position: bottom;
}

#down #addresse {
	width:974px;
	margin: -3px 0 0 0;
	padding-left: 12px;
	padding-top: 8px;
	color:#444444;
	font-weight: bold;
	font-family: Tahoma, Geneva, arial, sans-serif;
	font-size:11px;
	height:30px;
	background-image:url(../Img/logo_tournant.gif);
	background-position:456px;
	background-repeat:no-repeat;
}
#first {
	font-size:14px;
	color:#0C1C8C;
}
.partie_2 {
	margin-left:70px;
}
#logo_tournant {
	height:20px;
	width:65px;
	margin-bottom:-5px;
}
.legal {
	font-size: 10px;
	padding-left: 10px;
	text-decoration: none;
}