html {
  font-family:"Myriad","Myriad Pro",Georgia,Helvetica,Sans-serif; 
/*  background:url(../images/fond/bleu.jpg);*/
/*   background-color: rgb(108,171,215); couleur bleu plus fonce du fond de la page */
  background-color: rgb(172,218,241); /* couleur bleu du fond de la page */
  height:100%;
  padding:0;
  margin:0;
}

body {
  height:100%;
  padding:0;
  margin:0;
}

hublot2 {
  width:100%;
  height:600;
  z-index:1;
}

.Arial { 
	font-family: Arial;
	color: #fcff17;
	font-size: 13px;
	font-weight: bold;
}

/* styles changeants au survol et focus */  
/* .navigation a:hover,   */

/* style du bloc ul ---  navigation   */
  

.navigation {
  border-radius: 8px; /*bords arrondis*/
  margin: 0; /* on annule les marges */  
  padding: 2px; /* on fait un peu de place autour des liens */  
  list-style: none; /* supprime les puces de liste */  
  background: #F2F2F2;   /* couleur des marges et fond */
  color: #ACDAF1;
  width: 220px;
  font: 1.2em "Trebuchet MS", sans-serif;
}


.navigation a, .navigation span {
  border-radius: 8px; /*bords arrondis*/
  display: block;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  text-align: left;
  background: #000 url(../images/boutons/livret/bouton.png) center bottom no-repeat;
/*menu-item.png*/
}


/* styles des liens */  
.toggleSubMenu a {  
 /* margin: 1px 0;  espace les liens d'1 px */  
  border-radius: 8px; /*bords arrondis*/
  padding: 8px 10px; /* marges internes pour aérer */   
  color: #000276; /* couleur du texte des boutons */
  background: #FFF; 
  font-size: .9em; 
/*  text-decoration: none;  on vire le soulignement */  
  
  /* on définit la transition pour les navigateurs */  
  -webkit-transition: all .3s; /* Chrome/Safari */  
  -moz-transition: all .3s; /* Firefox (plus trop nécessaire) */  
  transition: all .3s; /* syntaxe officielle */  
}  


.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
/*  background-image: url(../images/boutons/livret/bouton_deroule_bas2.png); */
  background: #000 url(../images/boutons/livret/bouton.png) center bottom no-repeat;
  
  text-shadow: 0px 1px 0px rgba( 255, 0, 0, 0.4); /*texte avec un léger liseré d'éclairage rouge*/
/*menu-item-deroule.png*/
}
.navigation a:hover, .navigation a:focus {
  text-decoration:  none; /* on vire le soulignement */ 
  color: #f6e209;  /* couleur du texte quand on passe la souris au-dessus */
  padding-left: 15px; /* décalage du contenu de 10px vers la droite (30-20 = 10) */  
  background: url(../images/boutons/livret/bouton_deroule_bas.png) center bottom no-repeat;
}

.navigation a:active {
  text-decoration:  none; /* on vire le soulignement */ 
  color: #f6e209;  /* couleur du texte quand on passe la souris au-dessus */
  padding-left: 15px; /* décalage du contenu de 10px vers la droite (30-20 = 10) */  
  background: url(../images/boutons/livret/bouton_deroule_bas.png) center bottom no-repeat;
  box-shadow: 1px 1px 10px rgba( 100, 0, 0, 0.9) inset, 0 1px 0 rgba( 255, 0, 0, 0.4); /*effet de bouton enfoncé avec ombrage*/
}



.navigation .open a, .navigation .open span {
  background-image: url(../images/boutons/livret/bouton_deroule_haut.png);
/*menu-item-enroule.png*/
}


.navigation .subMenu {
  border-radius: 8px; /*bords arrondis du sous-menu*/
/* font-size: .8em;*/
  background: #56A0EA /* url(../images/boutons/livret/subMenuN600_1.png) 0 0 repeat */;
/*subMenu.png*/
/*  font-size: .9em;*/
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666; 
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}
.navigation ul.subMenu2 a:hover, .navigation ul.subMenu2 a:focus {
  font-size: 1.0em;
}
.navigation .subMenu2 {
/*  font-size: .8em;*/
  background: ActiveCaption url(../images/boutons/livret/subMenuN600_2.png) 0 0 repeat;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.navigation ul.subMenu2 a {
  background: none;
  padding: 3px 30px;
}

#affiche  img{
  -webkit-transition:-webkit-transform .9s; // Chrome Safari
  -moz-transition:-moz-transform .9s;       // Mozilla
  -o-transition:-o-transform .9s;           // Opéra
  -ms-transition:-ms-transform .9s;         // IE
  transition:transform .9s;
}
 
#affiche  img:hover{
	-webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
}

#affiche  img:active{
	-webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
}