/* represente les 4 boutons de menu en haut à droite avec des coeurs*/ 
#navigation1 {     
width: 205px;  /* largeur */   
list-style: none;  /* pas de puce par defaut */  
float:right;  /* float a droite */ 
margin-right:-60px; /* marge exterieure de droite */ 
}
 
#navigation1 li {        
color: #fff ;  /* couleur du texte */         
margin-bottom: 1px ; /* marge exterieure du bas */ 
}

#navigation1 li a {     
display: block ;  /* type block */           
}

a#particuliers {
background:url(images/particuliers1.png) no-repeat;
width:200px;
height:62px;
float:left;
}

a#particuliers:hover{
background:url(images/particuliershover.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */  
float:left; /* float a droite */ 
}

a#professionnels {
background:url(images/professionnels1.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}

a#professionnels:hover{
background:url(images/professionnelshover.png) no-repeat; /* image de fond */ 
width:200px; /* largeur  */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}

a#entreprises {
background:url(images/entreprises1.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}

a#entreprises:hover{
background:url(images/entrepriseshover.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}

a#travailleurs {
background:url(images/travailleurs1.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}

a#travailleurs:hover{
background:url(images/travailleurshover.png) no-repeat; /* image de fond */ 
width:200px; /* largeur */ 
height:62px; /* hauteur */ 
float:left; /* float a gauche */ 
}
/* Fin des 4 boutons */ 



/* Menu horizontal */
#menu, #menu ul {/* Liste */     
padding:0; /* pas de marge intérieure */
margin:0; /* ni extérieure */
list-style:none; /* on supprime le style par défaut de la liste */
line-height:35px; /* on définit une hauteur pour chaque élément */
text-align:center; /* on centre le texte qui se trouve dans la liste */
}

#menu { /* Ensemble du menu */
font-family:Tahoma;  /* Ecriture*/
font-weight:bold; /* texte en gras */
font-size:13px; /* hauteur du texte */	 
}
 
#menu a {/* Contenu des listes */
display:block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding:0; /* aucune marge intérieure */
background:transparent url("images/BOUTONNORMAL.png") repeat;
color:#e2e9ef; /* couleur du texte */
text-decoration:none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width:157.3px; /* largeur */
}

#menu li {/* Éléments des listes */      
float :left; 
/* pour ie qui ne reconnaît pas "transparent"
border-right :1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li{
border-right:1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul {/* Sous-listes */
position:absolute; /* Position absolue */
width:157.3px; /* Largeur des sous-listes */
left:-999em; /* Hop, on envoie loin du champ de vision */
/margin-left : 13px ;  /* Correction d'un bug décalage sur IE */

}


#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top:1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
border-top:1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul {
margin:-12px 0 0 157.3px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left:1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">"  */
html>body #menu li ul ul{
border-left:1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover {/* Lorsque la souris passe sur un des liens */  
color:#043d8b; 
background: transparent url("images/BOUTONHOVER.png") repeat;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {/* Sous-sous-listes lorsque la souris passe sur un élément de liste */
left:-999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  {/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
left:auto; /* Repositionnement normal */
min-height:0; /* Corrige un bug sous IE */
}
/* FIN Menu horizontal */




/* Menu en accordéon sur la colonne de gauche pour les particuliers, entreprises, tns... */
.navigation {       
margin: 0;        
padding: 0;       
list-style: none; /* pas de puce par defaut */       
background-color:#6187b4; /* couleur de fond */
color: #fff; /* couleur du texte */      
width: 170px;  /* largeur */     
font-family:Tahoma;  /* ecriture */
font-weight:bold; /* texte en gras */
font-size:11px;  /* taille du texte */  
}  
  
.navigation a, .navigation span {       
display: block;    /* type block */    
padding: 10px 20px;       /* marges interieures */
color: #fff;        /* couleur du texte */
text-decoration: none;  /* texte pas souligné ni rien  */     
background: #000 url(images/part1.png) left bottom no-repeat;       
} 
   
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {       
background-image: url(images/part2.png);  /* image de fond */     
}    

.navigation .open a, .navigation .open span {       
background-image: url(images/part3.png);     /* image de fond */   
}    

.navigation a:hover, .navigation a:focus, .navigation a:active {           
color:#9fb6d1; /* couleur du texte */
} 
   
.navigation.subMenu {       
font-size: .8em; 
background: #ccc url(images/part1.png) 0 0 repeat-x;       
font-size: .9em;        
margin: 0;       
padding: 0;       
border-bottom: 1px solid #666;   /* bordure du bas */    
}    

.navigation ul.subMenu a {       
background: none;       
padding: 3px 20px;      
}


/* bouton de navigation entre plusieurs pages (suivant, page2 etc...)*/
a#page{
color:black; /* couleur du passé */
background-color:#6187b4; /* couleur de fond */
font-size:13px; /* tille du texte */
font-variant:small-caps; /* caractères en petites majuscules */
border-left: 2px solid #365d8b; /* bordure gauche */
border-right: 2px solid #365d8b; /* bordure droite */
padding-left:10px; /* marge interieure gauche */
padding-right:10px; /* marge interieure droite */
display:outline; 
margin-left:190px; /* marge exterieure gauche */
}