/**********************************************************************************************

	Title: CSS eesac.fr / eesac.eu
	Author: MyWebCOM.fr		
	Date: 2010

***********************************************************************************************

	1. Global Reset
	
	2. General Elements
	
	3. Layout
		3.1 HEADER
		3.2 MAIN CONTENT
		3.3 Footer


		
***********************************************************************************************/



/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	ol, ul {list-style: none;}
	
	table {border-collapse: separate; border-spacing: 0;}
		
	
/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
html,body{height: 100%;}

body  {
	font-family:Calibri; color: #000080; letter-spacing: 0; font-size:medium; font-style:normal; line-height: 1;
	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	/*background-image:url(images/bg.gif);
	background-repeat: repeat-y;
	background-position: center;*/
	background-color: #FFFFFF;
    }
    
.text-copyright {
	text-align: center;
	font-family: Calibri;
	font-size: x-small;
}  


.text-titre {	
	color: #ff9e06;
	font-weight:bold;
	font-size:large;

}

div {
		font-family:Calibri; color: #000080; letter-spacing: 0; font-size: 100%; font-style: normal; line-height: 1.5;

}

a:link {font-family:Calibri; color: #000080; letter-spacing: 0; font-size: 100%; font-style: normal; line-height: 1.5;
 text-decoration:none;}
a:visited {font-family:Calibri; color: #000080; letter-spacing: 0; font-size: 100%; font-style: normal; line-height: 1.5;
 text-decoration:none;}
a:hover {font-family:Calibri; color: #ff9e06; letter-spacing: 0; font-size: 100%; font-style: normal; line-height: 1.5;
 text-decoration:underline;}
a:active {text-decoration:underline;}

a img {	border: none;}


.ul-rond {list-style:circle;}
.ul-droit {list-style:square;}

 /* 3. Layout
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
 #container {
	width: 861px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
	background: #FFFFFF;
	/*margin: 0 auto;  les marges automatiques (et dotées d'une largeur positive) centrent la page */
    border: 0px solid #666666;
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	/*pour garder le footer en bas de page*/
		/*min-height: 100%;*/
		/*margin-bottom: -36px;*/
	position: relative;

	height: auto !important;
	height: 100%;
	/*margin: 0 auto -4em;*/
	margin: 10px auto 10px;
	background-image:url('images/line_footer.png');
	background-position:center top;
	background-repeat:no-repeat;
    } 

			/* 3.1 HEADER
			------------------------------------------------------------------------------------------------ */
			#header_top {     	
			    	padding: 0 0px 0 0px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
			    	background-image:url('images/top.png');
			    	width:861px;
			    	height:100px;
			    	} 
			 #header_home {     	
			    	padding: 0 0px 0 0px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
			    	background-image:url('images/top.png');
			    	width:861px;
			    	height:100px;
			    	} 

			
			#header {     	
			    	padding: 0 0px 0 0px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
			    	} 
			    
			    
			#header_content {
					position:inherit; 	
			    	padding: 20px 0px 0px 0px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
			        width:861px;
			       /* height:100%;*/
			        margin:0px 0px 0px 0px;
			        min-height: 350px;
			        } 
			

			/*--------------LANGUE MENU TOP----------------------*/		
			#nav_langue {
				height:11px;
				margin: 0 ;
				position:relative;
				}
			
			
			#nav_langue ul {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
				}
				
			#nav_langue li {
				display: inline;
				margin: 0px;
				padding: 0px;
				}
				
			#nav_langue li a {
				background-repeat: repeat-x;
				display: block;
				clear: none;
				float: right;
				height: 11px;
				width: 16px;
				padding-top: 6px;
				padding-right: 0px;
				padding-bottom: 0px;
				padding-left: 0px;
				margin: 0px;
				margin-right: 21px;
				margin-top: 21px;
				}
				
			
			/* DRAPEAUX LANGUES */
			#nav_langue li a.en {background-image: url('images/flags/uk.png');}
			#nav_langue li a.en:hover {background-image: url('images/flags/uk.png');}
			#nav_langue li a.en_active {background-image: url('images/flags/uk.png');}
			
			#nav_langue li a.fr {background-image: url('images/flags/fr.png');}
			#nav_langue li a.fr:hover {background-image: url('images/flags/fr.png');}
			#nav_langue li a.fr_active {background-image: url('images/flags/fr.png');}
			
			#nav_langue li a.de {background-image: url('images/flags/de.png');}
			#nav_langue li a.de:hover {background-image: url('images/flags/de.png');}
			#nav_langue li a.de_active {background-image: url('images/flags/de.png');}
			
			/*--------------MENU TOP ----------------------*/		
			#nav
			{
				height:30px;
				margin: 0 ;
				position:relative;

			}
			
			
			#nav ul {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
			}
			#nav li {
				display: inline;
				margin: 0px;
				padding: 0px;
			}
			#nav li a {
				background-repeat: repeat-x;
				display: block;
				clear: none;
				float: left;
				height: 30px;
				width: 119px;
				padding-top: 1px;
				padding-right: 0px;
				padding-bottom: 0px;
				padding-left: 0px;
				margin: 0px;
				margin-left: 25px;
				margin-right: 25px;
			}
			
			
			#nav li a.line {
				background-image: url('images/line_blue.png');
				color:#000080;     
				text-decoration:none;   
				font-weight: bold;
				font-family: Calibri;
				font-size:medium;
				text-align:center;
			
				}
				
			#nav li a.line:hover {
				background-image: url('images/line_color.png');
				color: #ff9e06;     
				text-decoration:none;   
				font-weight: bold;
				font-family: Calibri;
				font-size:medium;
				text-align:center;
				}
			
			#nav li a.line_active {
				background-image: url('images/line_color.png');
				/*color: #41ADFE;     */
				color: #ff9e06; 
				text-decoration:none;   
				font-weight: bold;
				font-family: Calibri;
				font-size:medium;
				text-align:center;
				}	

			
			/* 3.2 MAIN CONTENT
			------------------------------------------------------------------------------------------------ */
			#sidebarPicture {
			    	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			    	width: 250px; /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
			    	/*background: #EBEBEB;*/ /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
			    	/*height: 350px;*/
			    	padding: 0px 0px;
					margin: 20px 0 0 10px;			
					background-position:left top;
					background-repeat:no-repeat;					
					}
								
			#sidebarMenu {
					font: 12px Calibri;
			    	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
			    	width: 200px; /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
			    	/*background: #EBEBEB;*/ /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
			    	/*height: 350px;*/
			    	padding: 0px 0px;
					margin: 0 0 0 21px;
					position: relative;
					}
	
								#sidebarMenu ul.ULlevel1 {
									margin: 0px 0 0 0;
									padding: 0px;
									list-style-type: none;
									width: 200px;				
								}
								
								#sidebarMenu li.ULlevel1  {
									display: table;
									margin: 10px 0px 0px 0px;
									padding: 0px 0px 0px 0px;									
									border-bottom:2px #000080 solid;
									border-spacing:0px 10px ;							
									width: 200px;
								}
								#sidebarMenu li.ULlevel1_active  {
									display: table;
									margin: 20px 0px 0 0px;
									padding: 0px 0px 0px 0px;															
									width: 200px;
								}

								#sidebarMenu li a.level1 {
									background-image: url('images/arrows-sidemenu-level1-off.png');
									background-position:left;
									background-repeat:no-repeat;
									color:#000080;     
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;	
									padding-left:20px;
									}
									
								#sidebarMenu li a.level1:hover {
									background-image: url('images/arrows-sidemenu-level1-on.png');
									background-position:left;
									background-repeat:no-repeat;
									color: #ff9e06;     
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;
									padding-left:20px;
									}
								
								#sidebarMenu li a.level1_active {
									background-image: url('images/arrows-sidemenu-level1-active.png');
									background-position:left;
									background-repeat:no-repeat;

									/*color: #41ADFE;     */
									color: #ff9e06; 
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;
									padding-left:20px;
									}
																	
							/* ============================= NIVEAU 2 ============================= */
								#sidebarMenu ul.ULlevel2 {
									margin: 10px 0 0 0;
									padding: 0px;
									list-style-type: none;
									width: 200px;
									background-color:#fffdce;
									border-top:2px #000080 solid;
												
								}
								
								#sidebarMenu li.ULlevel2  {
									display: table;
									margin: 0px 0px 0 0px;
									padding: 0px 0px 0px 0px;															
									width: 200px;
								}
								#sidebarMenu li a.level2 {
									background-image: url('images/arrows-sidemenu-level2-off.png');
									background-position:left;
									background-repeat:no-repeat;
									color:#000080;     
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;	
									padding-left:20px;
									}
									
								#sidebarMenu li a.level2:hover {
									background-image: url('images/arrows-sidemenu-level2-on.png');
									background-position:left;
									background-repeat:no-repeat;
									color: #ff9e06;     
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;
									padding-left:20px;
									}
								
								#sidebarMenu li a.level2_active {
									background-image: url('images/arrows-sidemenu-level2-on.png');
									background-position:left;
									background-repeat:no-repeat;

									/*color: #41ADFE;     */
									color: #ff9e06; 
									text-decoration:none;   
									font-weight: bold;
									font-family: Calibri;
									font-size:small;
									padding-left:20px;
									}
									

			#mainArbo { 
			    	margin: 5px 0px 0 260px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
			    	padding: 0 20px 20px 0; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
					/*font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;*/
					font-size: small;
					text-align:left;
					height:10px;
					color: #ff9e06;
					} 
					
								#mainArbo a.arbo {
									color:#000080;     
									text-decoration:none;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;	
									}
									
								#mainArbo a.arbo:hover {
									color: #ff9e06;     
									text-decoration:underline;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;

									}
								
								#mainArbo a.arbo_active {
									color: #ff9e06; 
									text-decoration:none;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;

									}
												
									
							#mainArboNoPicture { 
							    	margin: 0 0px 0 0; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
							    	padding: 0px 20px 20px 30px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
									/*font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;*/
									font-size: small;
									text-align:left;
									height:10px;
									color: #ff9e06;
									} 
					
					
					
								#mainArboNoPicture a.arbo {
									color:#000080;     
									text-decoration:none;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;	
									}
									
								#mainArboNoPicture a.arbo:hover {
									color: #ff9e06;     
									text-decoration:underline;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;

									}
								
								#mainArboNoPicture a.arbo_active {
									color: #ff9e06; 
									text-decoration:none;   
									font-weight: normal;
									font-family: Calibri;
									font-size:small;

									}



			    
			#mainContent { 
			    	margin: 0 0 0 280px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
			    	padding: 0 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
					/*font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;*/
					font-size: 1em;
					} 
			
			#mainContentWithPicture { 
			    	margin: 5px 0px 0 260px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
				    padding: 0 20px 0px 0; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
					/*font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;*/
					text-align:justify;
					/*width: 861px;*/
					} 
			
			
			#mainContentSimple { 
			    	margin: 0 0px 0 0; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
			    	padding: 0px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
					/*font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;*/
			    	} 
												
			
			
			#boxPicture {
					border:0px;
					margin:0px;
					padding:0px;
					width:100%;				
	
			}
			

		    	
			#boxPicture_top {
					border:0px;
					margin:0px;
					padding: 10px 2px 2px 2px; 
					background-color:#fffdce;		
					width:176px;	
					background-image:url('images/box_top.png');
					background-position:center top;
					background-repeat:no-repeat;
					color: #ff9e06;
					font-weight:bold;
					text-align:center;
	
			}
					#boxPicture_top  a.box{
							color: #000080;
							font-weight:bold;
							text-align:center;	
							text-decoration:none;		
					}
					
					#boxPicture_top  a.box:hover{
							color: #ff9e06;
							font-weight:bold;
							text-align:center;
							text-decoration:none;
		
					}


			
			#boxPicture_bot {
					border:0px;
					margin:0px;
					padding: 2px 2px 10px 2px; 
					background-color:#fffdce;		
					width:176px;
					background-image:url('images/box_bot.png');
					background-position:center bottom;
					background-repeat:no-repeat;		
					text-align: center;
			}
			#boxPicture_mid {
					border:0px;
					margin:0px;
					padding:0px; 
					background-color:#fffdce;		
					width:180px;	
					height:142px;	

			}
			#boxPicture_mid_LARGE {
					border:0px;
					margin:0px;
					padding:0px; 
					background-color:#fffdce;		
					width:180px;	
					height:250px;	

			}

			
			#boxExample { 
		    	padding: 0; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
		    	background:#fffdce;
		    	background-image:url('images/line_footer.png') ;
		    	background-position:center top;
		    	background-repeat:no-repeat;
				position: relative;
			    margin: 5px 0px 0px 260px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
				padding: 10px 20px 20px 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
				text-align:justify;
			
		    } 
		    
		    #boxExample_small { 
		    	padding: 0; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
		    	background:#fffdce;
		    	background-image:url('images/line_footer.png') ;
		    	background-position:center top;
		    	background-repeat:no-repeat;
				position: relative;
			    margin: 5px 0px 0px 300px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
				padding: 10px 20px 20px 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
				text-align:justify;
			
		    }
		    
		    #boxSup { 
		    	padding: 0; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
				position: relative;
			    margin: 5px 0px 0px 260px; /* La marge droite de cet élément div crée la colonne qui s'étend sur le côté droit de la page - quel que soit le contenu de l'élément div sidebar1, l'espace de cette colonne reste intact. Vous pouvez supprimer cette marge si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine. */
				padding: 0 20px 0px 0; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
				text-align:justify;
			
		    }


			
			
			/* 3.3 FOOTER
			------------------------------------------------------------------------------------------------ */
		
		    #footer { 
		    	padding: 0; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
		    	background:#fffdce;
		    	background-image:url('images/line_footer.png') ;
		    	background-position:center top;
		    	background-repeat:no-repeat;
				/*height: 36px;*/
				position: relative;
				height: 4em;
				width: 861px;
				margin: 0px auto;			
				padding-top:10px;
				text-align:center;
				font-size:small;
				
		    }