body
{
width: 954px;
margin-top: -285px;
margin-bottom: 0px;
margin-left:  auto;
margin-right:  auto;
background-color:#663333;
font-family:  "Comic Sans Ms", Arial, "Arial Black", "Times New Roman", Times, serif;
font-size: 0.8em;
}

#menu_admin, #menu, #pied_de_page, #corps
{
width: 1024px;
padding-top:10px;
padding-bottom:10px;
margin-left:  auto;
margin-right:  auto;
}

#menu
{
background: url("../image/new_design/fond_menu.png") no-repeat;
}

#menu_admin, #corps, #pied_de_page
{
background: url("../image/new_design/fond.png") repeat-y center;
}

h1, h3, p {
color:#000000;
}

table, textarea, form, h1, h3, p, h5, h4 {
width: 585px;
margin-left:  auto;
margin-right:  auto;
}

h2, .blocknews, .blockcontact, .blockevenement, .elementmenu, .blockindex, .filet {
width: 600px;
margin-left:  auto;
margin-right:  auto;
}

#corps
{
text-align : justify;
}

a
{
color:#377ad1;
}

a:hover
{
font-style:italic;
}

#en_tete
{
width: 1024px;
height:277px;
}

#pied_de_page
{
text-align:center;
}

.filet{
border-top:1px ridge #f3f2cb;
}

ul
{
margin: auto;
padding:0;
}

li
{
margin : auto;
width: 100px;
height:40px;
margin-top:5px;
margin-bottom:5px;
padding-top:0px;
list-style-type: none;
text-align:center;
vertical-align:middle;
background-repeat: no-repeat;
}

.elementmenu p, .elementmenu a
{
text-align:center;
overflow:auto;
}

h1
{
text-align: center;
font-size:huge;
}

h2
{
margin-top:0px;
text-align: center;
background:#663333;
color:#66CCCC;
}

h3{
font-size:huge;
}


.blocknews, .blockevenement
{
margin :auto;
margin-bottom:10px;
padding-bottom:75px;
border: 1px ridge #000000;
}

.blocknews img
{
float:left;
margin-right:15px;
}

.date_et_auteur
{
font-size:0.8em;
margin:10px;
text-align:right;
}

.gauche
{
margin-right:10px;
float:left;
}

.droite
{
margin-left:10px;
float:right;
}

.blockcontact
{
border: 1px ridge #000000;
}

.blockcontact p
{
text-align: center;
overflow:hidden;
}

.blockevenement p
{
margin:10px;
}

.image
{
text-align:center;
}

.news
{
margin :10px;
}

.affichage_photo
{
text-align:center;
}


#corps .affichage_photo a
{
margin:40px;
}

/**********************************************
*                                             *
*                 MENU                        *
*                                             *
***********************************************/



#test_menu {
 /* 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 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:1024px;
  height:150px;
}

/** LA BALISE A **
 * ------------- *
 * La balise A va nous permettre de définir les attributs communs à chaque element du menu
 */
#test_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:170px;
  height:155px;

 /* 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 **
 * ------------------------ *
 * 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
 */
ul a:hover{
 /* On redéfinie les attributs de la police typographique */
  font-size:18px;
  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:170px;
  height:155px;
}

#lien1 {
 /* Cet element de menu sera placé à 23px du bord haut de son conteneur : la balise UL */
 /* top: 23px;

 /* Cet element de menu sera placé à 42px du bord gauche de son conteneur : la balise UL */
 /* left: 42px;

 /* 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: 10px 0px 0px 10px;

 /* On redéfinie le background de la balise */
  background: url(../image/new_design/accueil.png) no-repeat;
}

#lien1: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:13px;
  left:1px;

 /* La taille du texte et de l'image de fond etant différant, il faut modifier le décalage du texte */
/*	padding: 14px 0px 0px 15px;

 /* 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(../image/new_design/accueil_sel.png) no-repeat;
}

#lien2 {
  left:122px;
  background: url(../image/new_design/evenement.png) no-repeat;
}

#lien2:hover {
  background: url(../image/new_design/evenement_sel.png) no-repeat;
}

#lien3 {
  left:244px;
  background: url(../image/new_design/news.png) no-repeat;
}

#lien3:hover {
  background: url(../image/new_design/news_sel.png) no-repeat;
}
#lien4 {
  left:355px;
  background: url(../image/new_design/contact.png) no-repeat;
}

#lien4:hover {
  background: url(../image/new_design/contact_sel.png) no-repeat;
}