body{
padding: 0px;
margin: 0px;
text-align: center;
}

p{
font-variant: small-caps;
color: gray;
font-size: 1em;
padding-left: 70px;
}

#centre a {
display: inline;
margin-left: -2%;
margin-right: auto;
width:90px;
height:31px;
}
#centre a:hover {
width:90px;
height:31px;
}
#centre img {
border: 0;
margin-left: 40px;
}


#global {
margin-top: 3%; /* un pseudo-centrage en vertical */
margin-left: auto;
margin-right: auto;
width: 750px;
}

#disparu {   /* PRELOAD DES IMAGES */
position: absolute;
display: none;
left: 0;
top: -5000px;
}

/* La balise UL va servir de conteneur global pour le menu 
 * NOTE : Dans le cadre de ce menu, les balises LI ne nous servent
 *        a rien, elle ne seront donc pas redefinie */
 ul{
 /* La balise est déclaré en position "relative" afin que les futurs balises A
  * utilisent la balise UL comme point de repère de leurs propres coordonnés absolus
  * NOTE : la position "relative" est preférée a la position "absolute" afin 
  *        de conserver le menu dans le flux HTML */
	position:relative;
 /* On supprime les puces pour les elements LI de la balise */
	list-style:none;
 /* On s'assure qu'il n'y aura aucun décalage autour du menu
  * NOTE : il faut définir le padding ET le margin car dans le cadre des listes à
  *        puces. Les différents navigateurs utilisent l'une ou l'autre des valeurs
  *        pour afficher les puces et assurer les retraits des elements.*/
  padding: 0px;
  margin: 0px;	
 /* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond	*/
  width:750px;
  height:550px;
 /* On definit le background de la balise */
  background: url(logo_philip.jpg) no-repeat;
  background-position:top;
}


/* La balise A va nous permettre de définir les attributs communs à chaque element du menu */
a{
 /* La balise est déclarée en position "absolute" afin de pouvoir positionner nos elements
  * de menu au pixel près à l'interieur de la balise UL */
  position:absolute;
 /* En temps normal, la balise A est une balise "inline". Pour les besoin de ce menu, nous
  * la transformons en balise "block" */
  display:block;	
 /* Quoi qu'il arrive, les balises A auront toutes une hauteur de base de 29px et une largeur de base de 80px
  * NOTE : Cette hauteur dépend de l'image de fond qui sera utilisée. */
  width:145px;
  height:100px;	
 /* On supprime le soulignement par défaut des liens */
  text-decoration:none;	
 /* On definie les valeurs typographiques du texte de la balise */
  font: bold 9px Verdana,Arial,Helvetica,sans-serif;
  color:#000000;
}


/* La pseudo-class :hover va nous permettre de définir les attributs communs à chaque balise A 
 * survolée par la souris
 * NOTE : IE comprend la pseudo-class :hover uniquement lorsqu'elle est appliquée a la balise A */
a:hover{
 /* On redéfinie les attributs de la police typographique */
  font-size:12px;
  color:#660000;
 /* On modifie la largeur et la hauteur de la balise 
  * NOTE : Cette largeur dépend de l'image de fond utilisée. */
  width:145px;
  height:150px;
}


#menu1{
 /* Cet element de menu sera placé à 23px du bord haut de son conteneur : la balise UL */
  top: 460px;
	
 /* Cet element de menu sera placé à 42px du bord gauche de son conteneur : la balise UL */
  left: -30px;
 /* Le texte sera décallé de 10px vers le bas et de 10px vers la droite tout en laissant 
  * apparaitre le background de la balise 
  * NOTE : La syntaxe courte de padding dans l'ordre est : 
  *        padding: padding-top padding-right padding-bottom padding-left */
  padding: 5px 0px 0px 0px;
 /* On redéfinie le background de la balise */
  background: url(images/img11.jpg) no-repeat;
  border: 2px solid black;
}

#menu1:hover{
 /* Lors du survol de la balise, la portion de background visible sera plus importante, on modifie donc
  * la proriété top et left de la balise */
  top:460px;
  left:-30px;	
 /* La taille du texte et de l'image de fond etant différant, il faut modifier le décalage du texte */
	padding: 5px 0px 0px 0px;	
 /* Dans le cas spécifique de cet element de menu, la largeur est inférieur à celle normalement prévue */
 /* width:135px; */	
 /* On redéfinie le background de la balise */
  background: url(images/img1.jpg) no-repeat;
  border-style: none;
}

/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */

#menu2{
  top:460px;
  left:140px;
  background: url(images/img22.gif) no-repeat;
  padding: 5px 0px 0px 0px;
  border: 2px solid black;
}

#menu2:hover{
  top:460px;
  left:140px;
  padding: 5px 0px 0px 0px;
  background: url(images/img2.jpg) no-repeat;
  border-style: none;
}

#menu3{
  top:460px;
  left:540px;
  padding: 5px 0px 0px 0px;
  background: url(images/img33.gif) no-repeat;
  border: 2px solid black;
}

#menu3:hover{
  top:460px;
  left:540px;
  padding: 5px 0px 0px 0px;
  background: url(images/img3.jpg) no-repeat;
  border-style: none;
}


#menu4{
  top:460px;
  left:355px;
  padding: 0px 0px 0px 0px;
  background: url(images/logo_certif_NB.png) no-repeat;
}

#menu4:hover{
  top:460px;
  left:355px;
  padding: 0px 0px 0px 0px;
  background: url(images/logo_certif.png) no-repeat;
}

#menu5{
  top:460px;
  left:710px;
  padding: 5px 0px 0px 0px;
  background: url(images/img44.gif) no-repeat;
  border: 2px solid black;
}

#menu5:hover{
  top:460px;
  left:710px;
  padding: 5px 0px 0px 0px;
  background: url(images/img4.jpg) no-repeat;
  border-style: none;
}


#menu63{
	top:330px;
	left:350px;
	width:0px;
	height:0px;
	color: black;
	font: bold 20px Arial,Helvetica,sans-serif;
}
#menu63:hover{
	top:331px;
	left:351px;
	width:0px;
	height:0px;
	color: #660000;
	text-decoration: none;
	padding: 0px 0px 0px 0px;
	font: bold 20px Arial,Helvetica,sans-serif;
}