body {
	margin: auto;
	padding: 0;
	text-align: center;
	font: 0.8em "Verdana", Geneva, Arial, Helvetica, sans-serif;
	background: #000;
}

#page{
z-index:4;
	width: 860px;
	margin: auto;
	text-align: left;
	border: 2px solid #ff00c5;
	background: #fff;
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */

#logo {
z-index:2;
height:200px;
	background: url(logo.gif) no-repeat left top;
	/* margin-top:25px;*/
    margin-top:3px;
	margin-left:3px;
	text-align:left;
	/* width: 300px; */
}

#top {
z-index:2;
	width: 860px;
	height: 110px; /* modif en cours 110px*/
	border-bottom:1px solid #ff00c5;
	text-align:left;
	/*background: url(img/anim.gif) no-repeat right top;*/
}

#menu {	
z-index:1;
margin: auto;
	width: 860px !important;
	font-family:"Verdana", Arial, Helvetica, sans-serif;
	font-size:14px;
	padding: 0 ;
	list-style-type: none ;
	height:25px;
	letter-spacing:0.02em;
	line-height: 20px;

/* Suppression du margin, du padding et des puces du <ul> */
}

#menu li
{
	float:left;
	margin: 0 0 0 0;
	padding: 0;
	text-indent: 7px ; /* On décale le texte de XX px du bord gauche */
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

#menu li a
{
	font-family:"Verdana", Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height: 25px;
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: auto;
	text-align: left;
	color:#ff00c5;

	text-decoration: none ;
/*	background: url(menu.gif) no-repeat 0 0 ;  On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ 
	border: 0;
}

#menu li a:hover
{
 color: #e500ff;
/*	background: url(menu.gif) no-repeat 0 -29px ; Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
}

/* #titre {
	position: relative;
	margin-top:29px;
	width: 510px;
	height: 150px;
        background: #fff no-repeat;
} */

#fleche {
	width:60px;
	height:44px;
	vertical-align: middle;
	margin: auto;
	text-align:center;
	letter-spacing:0em;
	margin-bottom:15px;
}
#fleche a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 60px;
	height: 44px ;
	line-height: 44px ;
	color: #000 ;
	text-align: center;
	color:#e500ff;
	text-decoration: none ;
        background: url(img/fle.gif) no-repeat 0 -44px ; /*On met une image de background, que l'on positionne à Xpx du bord gauche et 0px du bord haut */  /* btn2.gif a la place de push2.png*/
	border: 0;
	margin-bottom:15px;
}

#fleche a:hover {
 	color: #ff00c5;
 	background: url(img/fle.gif) no-repeat 0 0 ; /*Et ici on décale l'image du background de Xpx vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
	margin-bottom:15px;
}

#boutonT {
	width:220px;
	height:44px;
	vertical-align: middle;
	margin: auto;
	text-align:center;
	margin-bottom:15px;
	font-size:1em;
}
#boutonT a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: auto;
	line-height: 30px ;
	color: #000 ;
	text-align: left;
	color:#e500ff;
	text-indent: 30px ; /* On décale le texte de XX px du bord gauche */
	text-decoration: none ;
    background: url(img/btn2.gif) no-repeat 0 0 ; /*On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */  /* btn2.gif a la place de push2.png*/
	border: 0;
 	font-style:italic;
	font-weight:bold;
}

#boutonT a:hover {
 color: #ff00c5;
 background: url(img/btn2.gif) no-repeat 0 -30px ; /*Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
}


#boutonP {
	/*background: url(img/push.png) no-repeat right; */
	font-size:1em;
	letter-spacing:0.1em;
	width:240px;
	height:44px;
	vertical-align: middle;
	margin: auto;
	text-align:center;
	margin-bottom:15px;
	
}
#boutonP a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: auto;
	line-height: 30px ;
	text-align: left;
	color:#ff00c5;
	text-indent: 30px ; /* On décale le texte de XX px du bord gauche */
	text-decoration: none ;
    background: url(img/btn1.gif) no-repeat 0 0 ; /*On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ 
	border: 0;
	font-style:italic;
	font-weight:bold;
}

#boutonP a:hover {
 color: #e500ff;
 background: url(img/btn1.gif) no-repeat 0 -30px ; /*Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
}

#bouton {
	/*background: url(img/push.png) no-repeat right; */
	width:260px;
	height:30px;
	vertical-align: middle;
	margin: auto;
	margin-left: 15px;
	text-align:left;
	letter-spacing:0.08em;
}
#bouton a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: auto;
	line-height: 30px ;
	color: #000 ;
	text-align: left;
	color:#ff00c5;
	text-indent: 30px ; /* On décale le texte de XX px du bord gauche */
	text-decoration: none ;
     background: url(img/btn1.gif) no-repeat 0 0 ; /*On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ 
	border: 0;
}

#bouton a:hover {
 color: #e500ff;
 background: url(img/btn1.gif) no-repeat 0 -30px ; /*Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
}

#bouton2 {
	/*background: url(img/push.png) no-repeat right; */
	width:180px;
	height:30px;
	vertical-align: middle;
	margin: auto;
	text-align:right;
}
#bouton2 a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: auto ;
	line-height: 30px ;
	color: #000 ;
	text-align: left;
	color:#e500ff;
	text-indent: 30px ; /* On décale le texte de XX px du bord gauche */
	text-decoration: none ;
     background: url(img/btn2.gif) no-repeat 0 0 ; /*On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */ 
	border: 0;
}

#bouton2 a:hover {
 color: #ff00c5;
 background: url(img/btn2.gif) no-repeat 0 -30px ; /*Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0;
}

div#contenu {
	padding: 0 10px 0 10px ; /* ici pour le paragraphe*/
	background: #FFF no-repeat 15px 15px ;
}

div#contenu h2{ /* phrase titre en rose */
	color: #ff00c5;
	text-align: center;
	font: 1.0em "Verdana", Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.5em ; 	
	font-weight: bold;
}

div#contenu h3 /* titre part, prof */
{
	text-transform:uppercase;
	text-align: center ;
	text-indent: 2em ;
	line-height: 1.7em ;
	font-size:0.9em;
	font-family: "Verdana", Helvetica, sans-serifArial;
}

div#contenu h4 /* titres */
{
	text-align: center ;
	text-indent: 2em ;
	line-height: 1.7em ;
	font-size:1.3em;
	font-family: "Verdana", Arial, Helvetica;
}

h3:first-letter {
text-transform:uppercase;
font-family: "Verdana", Arial, Helvetica;
font-size:1em;
}

div#contenu p
{
/* 	text-align: center ; */
	text-indent: 2em ;
	line-height: 1.6em ; 
	font-family: "Verdana", Arial, Helvetica;
}

div#contenu ul
{
	/*line-height: 2.5em ; */
	font-family: "Verdana", Arial, Helvetica;
	text-align: left;
	list-style-type:none;
}
li:first-letter {
text-transform:uppercase;
color:#ff00c5;
font-weight: bold;
font-family: "Verdana", Arial, Helvetica;
font-size: 1.4em;
}

div#contenu a
{
	color: #ff00c5;
	text-decoration:none;
 	font-style:italic;
	font-weight:bold;
}

div#contenu a:hover
{
	color: #e500ff;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
}
div#autre a
{
	color: #000000;
	text-decoration:none;
 	font-style:normal;
	font-weight:normal;
}

div#autre a:hover
{
	color: #e500ff;
	text-decoration:none;
	font-style:normal;
	font-weight:normal;
}
/* On met en forme les liens contenu dans la page */

div#lienprof a
{
	color: #e500ff;
	text-decoration:none;
 	font-style:italic;
	font-weight:bold;
}

div#lienprof a:hover
{
	color: #ff00c5;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
}
div#lienpart a
{
	color: #ff00c5;
	text-decoration:none;
 	font-style:italic;
	font-weight:bold;
}

div#lienpart a:hover
{
	color: #e500ff;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
}
/* On met en forme les liens contenu dans la page */

td {
	font: 0.9em "Arial", Geneva, Arial, Helvetica, sans-serif;
}

#footer {
	width: 860px;
	margin: auto;
	text-align: center;
	margin-top: 3px;
	border: 2px solid #ff00c5;
	background: #fff;
 	color: #FF00FF;
	height: 40px;
	padding:11px 0 0 0;
	vertical-align: middle;
	font: 0.7em "Verdana", Geneva, Arial, Helvetica, sans-serif;
}

#starkz {
width: 860px;
margin: auto;
text-align: right;
margin-top: 3px;
border: 0;
background: #000;
color: #828282;
line-height:10px;
bottom:15px;
height: 25px;
vertical-align: middle;
font: 0.9em "Tahoma", arial;
}

#starkz a {
color: #828282;
text-decoration: none;
}

#starkz a:hover {
color: #C3C3C3;
text-decoration: none;
}