/* CSS Document */

/* LA PAGE HTML 

RAPPEL: la couleur de fond de la page est: #CCCCFF
        la couleur de fond des panneaux est

RAPPEL: la largeur d'un bloc (et sa hauteur) correspond à la largeur du contenu, hors padding, bordure et marges

|
|-body
    |
    |-id=container L=900
         |
         |-id=logo L=180  H=93 
         |-id=bandeau L=720  H=93
         |       |-id=banniere
         |-id=menuHorizontal L=100% 
         |-id=totemLeft  L=180 H=100% (recalculée via javascript)
         |       |
         |       |-id=login 
         |       |-id=menuGeneral
         |       |        |
         |       |        |-class="entreeGenerale entreeGenerale1"
         |       |        |-class="entreeGenerale entreeGenerale2"
         |       |        |-class="entreeGenerale entreeGenerale3"
         |       |        |-class="entreeGenerale entreeGeneraleN"
         |       |-id=menuPerso
         |                |-class=entreePerso
         |-id=middle L=490  (padding:5 soit largeur réelle: 500)
         |       |
         |       |-id=menuCentre
         |       |        |
         |       |        |-class="titre"
         |       |        |-class="article"
         |       |-id=infoCentre
         |       |-class="module"
         |-id=totemRight L=220
                 |
                 |-class="module right"


*/

/*IE ne semble pas prendre en compte cette balise et firefox ne prend pas toute la marge du body ... */
html {
	margin:0px;
}

body {
	text-align:center; 
	__background-color__:  #CCCCFF;  /* la couleur de fond de la page */
	background: transparent url(images/body_bgy.png) repeat-x top left; /* l'image de fond est alignée en haut à gauche */
	padding:0; 
	margin:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight:normal;
	color: black;
	}


/* les classes qui peuvent servir pour les largeurs */
.left {width:	180px; }
.middle {width:	490px; }
.right {width:	210px;}


#container {
	background-color:transparent; 
	width:960px; /*ne pas mettre en auto: la fixer */
	_height:auto; /*se redimensionnera en fonton des autres */
	margin:0 auto 0 auto; 
	padding:0px 0px 0px 0px;
	text-align:left;
}

/* **********************  LE HEADER ******************
il comprend le logo suivi d'un bandeau 
*/
#header {
	height: 200px; 
	width: 100%; 
	background: url(images/header.png) no-repeat 2px 0px; 
	float:left /* alignement d'office à gauche toute  */
}

#search {
	margin-top:147px;
	height: 52px; /* largeur de l'image de fond... */
	width: 354px; /* hauteur de l'image de fond... */
	background: url(images/search.png) no-repeat; /* l'image en fond de la balise: peut être affectée par un effet, ... */
	float:right /* alignement d'office à gauche toute  */
}
#bandeau {
	
	background: transparent url(../images/banniere.gif) no-repeat top left; /* l'image de fond est alignée en haut à gauche */
	width:720px;
	height:93px;
	text-align:left; /* alignement important pour le positionnement de la banniere */
	float:left;
}


/* la ligne de séparation qui suit le header */
#menuHorizontal {
	clear:both; /* rien à droite et à gauche */
	display:none;
	width:100%;
	height:2px ;
	font-size:1px;
	background-color:white;
}

#center {
	float:left; 
	width:960px;
	height:100%;
	background: url(images/bg_middle.png) repeat-y;
}


/*  DEBUT   bandeau de gauche (totem)      */
#totemLeft {
			float:left; 
			width:240px; /* la largeur du bandeau */
			height:100%;
			margin-left:55px;

}



/* DEBUT des menus communs */
#menuGeneral {
			float:left;
			background-color: __green; /* si pas de couleur: transparent sur le fond du totem */
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 0px; /* 10 pixels pour séparer du menu perso */
 			width:215px;
 			
}

#menuGeneral  H3 { height:24px; width:185px; 
				background: url(images/titre_menu.png) no-repeat;
			 	margin:0px;
			   	font-size:1.05em; 
			   	padding:24px 0 0 30px; 
			   	color:White}
#menuGeneral	 .menu_footer {background: url(images/bottom_menu.png) no-repeat; height:22px; width:100%}
							

/* Paramétrage commun des menu. Nécessité de mettre float:left */
#menuGeneral .menu {
			float:left;
			margin-top:10px; 
			width:100%;
			_background-color:#006699; /* si pas de couleur: transparent sur le fond du menu général */
}


/* le format général des titres pour les menus */
.entreeTitre { }

/* paramétrage des liens des menus: menu general et menu perso */
#menuGeneral ul {margin:0px;
				padding:5px 0px 0px 0px; 
				background: url(images/bg_menu.gif) repeat-y;}
#menuGeneral li {
	margin:0px;
	padding:0px 0px 0px 40px;
	list-style-type:none;
	font-size:1em;
	 color: black;
	 list-style-type: none;
	 background: url(images/puce_menu2.gif) no-repeat;
}

#menuGeneral li:hover{
	 background: url(images/puce_menu2_hover.gif) no-repeat center left;
}

#menuGeneral li a {
	margin:0px;
	padding: 2px 0px 2px 5px;	
	display:block;
	background-color:transparent;
	color:black;
	text-decoration:none;
	font-weight:normal;
	width:175px;

}



/* FIN du totemLeft   */


/* la zone du milieu qui contient les articles, news, ... */
#middle {
			float:left; 
			width:616px;
			height:100%;
			margin: 10px 0px 0px 0px;
}

#middle_header { float:left;
				 height:16px; width:100%; 
				background: url(images/art_haut.png) no-repeat;
				}
#middle_footer {float:left; height:16px; width:100%;
				background: url(images/art_bas.png) no-repeat;
				margin-bottom:20px}
							

/* la première zone: celle des news */
#menuCentre {
	float:left;
	background: url(images/art_mid.png) repeat-y;
	padding:10px;
	width:596px;
}
/* format du titre de la zone des News 
   l'image de fond peut être le titre complet
*/
#menuCentre .titre {
			background:transparent url(images/bullet_titre_3.png) no-repeat left; /* top ; no-repeat fondamental */
			padding:0px 0px 2px 30px;    /* le padding tient compte de la largeur de l'image de fond si c'est une puce ! */
			/* définition de la fonte si le titre est sous orme de texte */
			font-size:1.8em;   
			font-family: Verdana, Arial, Helvetica, sans-serif;
			color:#CB1804;
			margin:-10px 0px 5px 0px;

}

/* la zone d'info supplémentaire */
#infoCentre {
	background-color:white;
}

#menuCentre .info {
	margin-bottom:25px;
}

/* la définition par défaut d'un module */
.module {
			float:left; 
			background-color: #E2E2E2;
			overflow:hidden;
			margin-top:5px;
			margin-bottom:5px;
			padding-bottom:5px;
}

/* définition des modules du centre (à revoir ?) */
#middle .module {width:220px; height:140px}


/* DEBUT le bandeau de droite  (totem) */
#totemRight {
			float:left; 
			width:220px;
			height:100%;
			background-color: white;
			padding: 0px;
			margin: 0px;
}


#totemRight .module { margin-left:2px }

#totemRight .module .titreModule {
	background:transparent url(images/titre_module.gif) no-repeat left top ;
	font-size:1em;
	font-weight:bold;
	line-height:1.2em;
	color:white;
	width:200px;
	padding:2px 0px 2px 10px;
}

#footer {
	text-align:center;
	clear:all;
	float:left;
	width:100%; 
	height:88px;
	background: url(images/footer.png) no-repeat; 

}

/*        ***********   DIVERS    ***********       */

.desactive {display:none }
.active {display:block }


/* balises supplémentaires permettant d'afficher du texte ou des infos 
   par défaut, elles sont cachées.
*/
#infoPlus1 {
	position:absolute;
	left:300px;top:100px;width:500px;height:auto;
	line-height:100px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:2.5em;
	font-weight:bold;
	background-color:#FF0000;
	opacity: .8;
	filter: alpha(opacity=80);
	display:none; 
	z-index:100
}
#infoPlus2 {
	position:absolute;
	left:300px;top:100px;width:500px;height:auto;
	line-height:100px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:2.5em;
	font-weight:bold;
	background-color:#FF0000;
	opacity: .8;
	filter: alpha(opacity=80);
	display:none; 
	z-index:100
}