/****** MENU HORIZONTAL*****/

#menu-horizontal {
	width: 603px;
	height: 100px;
	margin: 20px 0 0 0;
	padding:0;
	clear: both;
}


#menu-horizontal ul {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* Placement des items sous toutes leurs variantes. Important : déclaration "inline" */

#menu-horizontal ul li.interet,
#menu-horizontal ul li.interet-actif,
#menu-horizontal ul li.spl,
#menu-horizontal ul li.spl-actif,
#menu-horizontal ul li.realisation,
#menu-horizontal ul li.realisation-actif,
#menu-horizontal ul li.bureau,
#menu-horizontal ul li.bureau-actif,
#menu-horizontal ul li.statuts,
#menu-horizontal ul li.statuts-actif,
#menu-horizontal ul li.charte,
#menu-horizontal ul li.charte-actif,
#menu-horizontal ul li.adhesion,
#menu-horizontal ul li.adhesion-actif,
#menu-horizontal ul li a,
#menu-horizontal ul li a:hover {
	display: inline;
	margin: 0;
	padding: 23px 0 0 0;
	height: 60px;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	float: left;
	text-align: center;
}

/* Le plus petit dénominateur commun */

#menu-horizontal ul li a {
	color: #8099B3;
	text-decoration: none;
}

#menu-horizontal ul li a:hover {
	color: White;
}



/***
	Commençons par le premier Item : INTERET
	4 déclarations :

***/

/* 1) Placement */
li.interet, li.interet-actif{
	width: 90px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.interet a {
	background-image: url(images/puces_horizontal/interet_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est  la rubrique active */
#menu-horizontal ul li.interet-actif a {
	background-image: url(images/puces_horizontal/interet_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.interet a:hover, #menu-horizontal ul li.interet-actif a:hover {
	background-image: url(images/puces_horizontal/interet_hover.gif);
	background-repeat: no-repeat;
}


/* MEME CHOSE POUR LES AUTRES */

/*
		SPL
*/

/* 1) Placement */
li.spl, li.spl-actif{
	width: 100px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.spl a {
	background-image: url(images/puces_horizontal/spl_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est  la rubrique active */
#menu-horizontal ul li.spl-actif a {
	background-image: url(images/puces_horizontal/spl_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.spl a:hover, #menu-horizontal ul li.spl-actif a:hover {
	background-image: url(images/puces_horizontal/spl_hover.gif);
	background-repeat: no-repeat;
}



/*
    Reéalisations
*/

/* 1) Placement */
li.realisation, li.realisation-actif{
	width: 110px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.realisation a {
	background-image: url(images/puces_horizontal/realisation_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est  la rubrique active */
#menu-horizontal ul li.realisation-actif a {
	background-image: url(images/puces_horizontal/realisation_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.realisation a:hover, #menu-horizontal ul li.realisation-actif a:hover {
	background-image: url(images/puces_horizontal/realisation_hover.gif);
	background-repeat: no-repeat;
}


/*
    BUREAU
*/

/* 1) Placement */
li.bureau, li.bureau-actif{
	width: 75px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.bureau a {
	background-image: url(images/puces_horizontal/bureau_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est la rubrique active */
#menu-horizontal ul li.bureau-actif a {
	background-image: url(images/puces_horizontal/bureau_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.bureau a:hover, #menu-horizontal ul li.bureau-actif a:hover {
	background-image: url(images/puces_horizontal/bureau_hover.gif);
	background-repeat: no-repeat;
}

/*
    STATUTS
*/

/* 1) Placement */
li.statuts, li.statuts-actif{
	width: 75px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.statuts a {
	background-image: url(images/puces_horizontal/statuts_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est  la rubrique active */
#menu-horizontal ul li.statuts-actif a {
	background-image: url(images/puces_horizontal/statuts_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.statuts a:hover, #menu-horizontal ul li.statuts-actif a:hover {
	background-image: url(images/puces_horizontal/statuts_hover.gif);
	background-repeat: no-repeat;
}


/*
    CHARTE
*/

/* 1) Placement */
li.charte, li.charte-actif{
	width: 75px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.charte a {
	background-image: url(images/puces_horizontal/charte_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est  la rubrique active */
#menu-horizontal ul li.charte-actif a {
	background-image: url(images/puces_horizontal/charte_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.charte a:hover, #menu-horizontal ul li.charte-actif a:hover {
	background-image: url(images/puces_horizontal/charte_hover.gif);
	background-repeat: no-repeat;
}



/*
    ADHESION
*/

/* 1) Placement */
li.adhesion, li.charte-adhesion{
	width: 64px;
	margin: 0;
}


/* 2) Apparence du lien quand ce n'est pas la rubrique active */
#menu-horizontal ul li.adhesion a {
	background-image: url(images/puces_horizontal/adhesion_link.gif);
	background-repeat: no-repeat;
}


/* 3) Apparence du lien quand c'est la rubrique active */
#menu-horizontal ul li.adhesion-actif a {
	background-image: url(images/puces_horizontal/adhesion_actif.gif);
	background-repeat: no-repeat;
	color: White;
}

/* 4) Rollover dans les deux cas */
#menu-horizontal ul li.adhesion a:hover, #menu-horizontal ul li.adhesion-actif a:hover {
	background-image: url(images/puces_horizontal/adhesion_hover.gif);
	background-repeat: no-repeat;
}