body
{
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", helvetica, sans-serif;
	font-size: 76%;
	background-color: #000;		/* fond noir */
	width: 100%;
	color: #DDD;
}

div#banniere
{								
	background: url(../images/design/corps/banniere.jpg) no-repeat left top;
	height: 145px;
}

div#fondu
{								
	background: url(../images/design/corps/fondu_h.png) repeat-x right top;
	height: 15px;
	width: 100%;
}


div#panel
{
	background: url(../images/design/corps/panel.jpg) no-repeat left top;
	height: 293px;
	width: 200px;
	position: absolute;		/* pas besoin de left float en absolu */
	left: 0;						/* précision IE */
}

div#contenu
{
	
	background: url(../images/design/corps/fondu_v.jpg) repeat-y left top;
	background-color: #222;
	margin-left: 191px;					/* chevauchement de 9px du panel */																
	font-size: 1.0em;						/* taille relative du texte à 76% (voir body) */
	color: #DDD;							/* texte gris */
	min-height:300px;						/* hauteur minimale si vide */
	/*overflow: auto;*/
	/*background-attachment: scroll;*/
}

div#contexte
{
	padding: 15px 60px 20px 80px;
	overflow-x: hidden;
	overflow-y: auto;	
	
	/*overflow : -moz-scrollbars-horizontal;*/
	/*overflow: auto;	*/			/* permet l'agencement dynamique en float left */
}

.input
{
	background-color: #1c1c1c;
	color: #CCC;
	border: 1px solid #666;
}

ul#sous_menu
{
	list-style-type: none;			
	padding: 0 0 0 0;						/* marges : H, D, B, G */
	margin: 15px 0 0 30px;
	height: 29px;		
}
ul#sous_menu li a 
{
	display: block;
	float: left;
	width: 140px;
	height: 29px;
	line-height: 27px;					/* centrage en hauteur */
	text-indent: 10px;
   text-decoration: none;			
	color: #CCC;									
	font-size: 1.2em;					
}
ul#sous_menu  li a:hover, ul#sous_menu a#actif
{
	background-image: url(../images/design/corps/sous_menu.png);
	color: #FFF;
}
ul#sous_menu li a span
{
	display: none;				
}
ul#sous_menu li a:hover span  			/* commmentaires au survol */
{
	display: block;
	width: 370px;
	height: 30px;
	padding: 5px 0 0 0;
	top: 3px;
	left: 210px;
	position: absolute;
	text-align: left;
	color: #FFF;			
	font-size: 12px;
	font-style: italic;
}

ul#menu
{
	background: url(../images/design/corps/menu.jpg) no-repeat left top;
	/*background-image: url(../images/design/corps/survol3.png);*/
	list-style-type: none;			
	padding: 0 0 0 200px;				
	margin: 0 0 0 0;
	height: 35px;		
}
ul#menu li
{
	display: inline;					/* correction pour IE */
}			
ul#menu li a 
{
	/*background: url(../images/design/survol.png) no-repeat left top;*/
	/*background: url(../images/design/bouton.jpg) no-repeat left top;*/
	display: block;
	float: left;
	width: 150px;
	height: 35px;
	line-height: 35px;				/* centrage en hauteur */
	text-align: center;
   text-decoration: none;			
	color: #CCC;									
	font-size: 1.6em;					
}

ul#menu li a:hover, ul#menu  a#actif
{
	/* Pas de background seul, car BUG sous IE */
	background-image: url(../images/design/corps/survol3.png);
	/*background-repeat: repeat-x;*/
	color: #FFF;
	padding-left: -1px;
}
ul#menu li a span 
{
	display: none;				
}
ul#menu li a:hover span  			
{
	display: block;					
	width: 370px;
	height: 30px;
	margin-top: 0px;
	padding: 5px 0 0 20px;			/* marges : H, D, B, G */
	/*top: 180px;
	left: 20em;*/
	position: absolute;				/* pas de left: x ici */
	border-left: 1px solid #999;
	text-align: left;
	color: #FFF;			
	font-size: 12px;
	font-style: italic;
}

div#pied
{								
	background: url(../images/design/corps/barre.jpg) repeat-x left top;
	height: 29px;
	line-height: 25px;
	margin: 0 0 0 206px;
	padding: 0 0 0 30px;
	color: #AAA;
}


div#coin
{
	float: left;
	background: url(../images/design/corps/coin.jpg) no-repeat left top;
	height: 29px;
	margin-left: 190px;
	padding-left: 28px;
}

div.spacer 					/* Permet une hauteur dynamique 4/4 */
{
	clear: both;
}

h1 
{
	margin: 0;				
	padding: 0 0 0 10px;		/* H D B G */
	font-size: 1.6em;
	
	/*background: url(../images/design/survol.png) repeat-x left top;*/
}

h2
{
	background: url(../images/design/icones/cloche1.png) no-repeat left top;
	margin-top: 20px;
	padding-left: 30px;
	border-bottom: 1px solid #DDD;
	font-size: 1.4em;
}

h3
{
	margin: 0;
	padding: 0;
	font-size: 1.2em;
}

h3 a
{
	/*background: url(../images/design/puces/screw.png) no-repeat left top;*/
	padding-left: 40px;
	line-height: 25px;
	background: url(../images/design/puces/fleche.png) no-repeat left top;
}

h3 a:hover
{
	background-position: 10px 0px;
	/*background: none;*/
}

p
{
	margin: 0 0 0 0;
	padding-top: 20px;
	text-align: justify;	
}

p.carte
{
	line-height: 48px;
	float: left; 
	padding: 0;
}


a
{
	text-decoration: none;
	/*font-weight: normal;*/
	color: #949749;				/* Vert kaki */
}

a:hover 
{
	color: #ccd092;				/*vert kaki clair	ancien #97AE66 */
}

span.grey			
{
	color : #666;
}

span.red		
{
	color : #c8463c;
}

span.green
{
	color : #40ff40;
}

span.italic		/* Remplace la balise <em> déconseillé */
{
	font-style: italic;
}

span.bold		/* Remplace la balise <b> déconseillé */
{
	font-weight: bold;
}

img.img_lien	
{
	border: 0;
	padding: 0;
	vertical-align: middle;
}

.puce_carre
{
	list-style-type: square;		
}

.puce_carre li
{
	margin: 0 0 30px 0;					/* H, D, B, G */	
}

.center
{
	margin-top: 20px;
	margin-left: auto;
   margin-right: auto;
	text-align: center;
}

dl
{
	width: 100%;		/* précision pour IE */
}

dt
{	
	font-weight: bold;	
	height: 2px;
	width: 100px;
	padding: 0;
	margin: 0;
}

dd
{
	padding-left: 10px;
	padding-bottom: 10px;
	margin-top: -2px;
}

ul.legende
{
	padding: 10px 0 0 0;				/* H, D, B, G */
	list-style-position: outside;		/* Alignement */
	list-style-type: none;				/* style de la puce */
	margin: 0;	
}

ul.legende li
{
	padding: 0;
	margin: 0;					/* 2px ? */	
}


table.table_type
{
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

table.table_type td
{
	padding: 0 0 0 5px;
	border: 1px solid #555;
	border-width: 0 1px 1px 0;
	text-align: left;
	height: 40px;
}



div.popup
{
	margin: 5px 5px 0 0;			/* H, D, B, G */
	padding-bottom: 10px;			/* H, D, B, G */
	
	min-width: 400px;
	width: 100%;
}

div.popup p
{
	padding: 30px 45px 20px 20px;		
}

table.popup
{
	border-collapse: collapse;
	border-spacing: 0;
	float: left;
	/*width: 750px;*/
	width: 50%;
	
	/* centrage horizontal */
	/*margin-left: auto; 
	margin-right: auto;*/
}

table.popup p
{
	padding: 20px 20px 0px 20px;		/* H, D, B, G */
}

table.popup td
{
	vertical-align: top;		/* centrage en hauteur des cellules */
}

/* top row */	
.hgauche
{
	background: url(../images/design/popup/hgauche.gif) no-repeat left top;
	width: 11px;
}

.haut
{
	background: url(../images/design/popup/haut.gif) repeat-x left top;
	height: 12px;
}

.hdroit
{
	background: url(../images/design/popup/hdroit.gif) no-repeat left top;
	width: 14px;
}

/* middle row */	
.gauche
{
	background: url(../images/design/popup/gauche.gif) repeat-y left top;
	/*height: 13px; */ /* hauteur minimal */
}

.milieu
{
	padding-bottom: 20px;
}

.droit
{
	background: url(../images/design/popup/droit.gif) repeat-y left top;
}

/* bottom row */				
.bgauche
{
	background: url(../images/design/popup/bgauche.gif) no-repeat left top;
}

.bas
{
	background: url(../images/design/popup/bas.gif) repeat-x left top;
	height: 13px;
}

.bdroit
{
	background: url(../images/design/popup/bdroit.gif) no-repeat left top;
}







/* Infobulle personnalisée     http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html */
a.info 
{
   position: relative;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span 
{
   display: none; 	/* on masque l'infobulle */
}
a.info:hover 
{
   background: none; /* correction d'un bug IE */
   z-index: 500; 		/* on définit une valeur pour l'ordre d'affichage */

   cursor: help; 		/* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span 
{
   display: inline; 		/* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; 				/* on positionne notre infobulle */
   left: 30px;
	width: 266px;
	height: 209px;

  /*opacity:0.9; */
	background:  url(../images/design/infobulle/infobulle12.png) no-repeat left top;
	
	/*background: #222;
   border: 1px solid #999;
   border-left: 4px solid #999;*/
   
	color: white;
   padding: 10px;
}