#cquoico {
	position:relative;
	list-style:none inside;
	padding: 0px;
	margin: 10px;
	background: no-repeat;
	height: 396px;
	width: 580px;
	float: none;
	text-align: center;
	clip:  rect(0px, 0px, 0px, 0px);
}
 #cquoico ul{
	position:relative;
	list-style:none inside;
	padding: 0px;
	margin: 0px;
	background: url(images/fond_c_quoi_la_co.png) no-repeat center;
	height: 396px;
	width: 580px;
	clip: rect(0px, 0px, 0px, 0px);
	float: none;
	text-align: center;
}
 #cquoico li{
	list-style-image: none;
	list-style-type: none;
	
}
/* les attributs communs à chaque element du menu */
#cquoico 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;
	
 /* NOTE : dépend de l'image de fond qui sera utilisée. */
  width:105px;
  height:105px;
	
 /* 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;
}

#cquoico a:hover{
 /* On modifie la largeur et la hauteur de la balise 
  * NOTE : Cette largeur dépend de l'image de fond utilisée.
  */
  width:105px;
  height:105px;
}


/** LE CAS PAR CAS **
 * ---------------- *
 * Les modifications globals de balises etant définies, nous allons maintenant nous attaquer
 * aux cas particuliers grace à l'utilisation des identifiants uniques de classes
 * NOTE : Tous les identifiants suivant sont appliqués à des balises A, ils héritent donc tous des
 *        comportements definis ci-dessus pour la balise A et pour la pseudo-classe associée :hover
 */

#lien_precision {
  top: 39px;
  left: 70px;
}
#lien_precision:hover {
  background: url(images/picthandi.png) no-repeat;
}

#lien_vtt {
	top:10px;
	left:427px;
}
#lien_vtt:hover {
	background: url(images/picvtt.png) no-repeat;
}

#lien_pedestre {
  top:271px;
  left:63px;
}
#lien_pedestre:hover {
  background: url(images/pictped.png) no-repeat;
}

#lien_ski {
  top:268px;
  left:418px;
}
#lien_ski:hover {
  background: url(images/pictski.png) no-repeat;
}