body
{
   width: 760px;
   margin: 20 auto; 
   /*background-image: url("Images/fond.jpg");*/
   /*background-color: #cbe9f8;*/
   background-color: #0099cc;
}

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("Images/nounoucalin_baniere.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   
   border: 1px solid orange;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

.element_en_tete h1
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: right;
}


/* Le menu */

#menu
{
   float: left;
   width: 160px;
   /*background-color: #cbe9f8;*/
   background-color: #0099cc;
}


#menu h3
{    
   color: #f29400;
   font-family: Arial;
   font-size: +12;
   font-weight: bold;
}


#menu h4
{    
   font-family: Arial;
   font-size: +12;
   font-weight: normal;
}

.element_menu
{
   /*background-color: #B3B3B3;*/
   /*border: 2px solid black;*/
   
   margin-bottom: 5px;
   
   /*background-image: url("Images/contour.png");
   background-repeat: no-repeat;*/
}


/* Quelques effets sur les menus */



.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}


/* Le corps de la page */

#corps
{
   margin-left: 180px;
   margin-bottom: 20px;
   width: 577px;
   padding: 5px;
   background-color: white;
   
   /*color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;*/
}

.element_corps_accueil
{
   background-image: url("Images/accueil.jpg");
   background-repeat: no-repeat;
   
   height: 560px;
}

.element_corps_presentation
{
   background-image: url("Images/fond_presentation.png");
   background-repeat: no-repeat;
   width: 560px;
   
   margin-left: auto;
   margin-right: auto;
}

.element_corps_reunion
{
   background-image: url("Images/fond_reunion.png");
   background-repeat: no-repeat;
   width: 560px;
   
   margin-left: auto;
   margin-right: auto;
}

.element_corps_liste
{
   background-image: url("Images/fond_liste.png");
   background-repeat: no-repeat;
   width: 560px;
   
   margin-left: auto;
   margin-right: auto;
}

.element_corps_administration
{
   background-image: url("Images/fond_liste.png");
   background-repeat: no-repeat;
   width: 560px;
   
   margin-left: auto;
   margin-right: auto;
}

.element_corps_liens
{
   background-image: url("Images/fond_presentation.png");
   background-repeat: no-repeat;
   width: 560px;
   
   margin-left: auto;
   margin-right: auto;
}

#corps h1
{
   color: #f29400;
   text-align: center;
   font-family: Arial;
   font-size: +24;
}

#corps h2
{
   color: #0193c3;
   font-size: +14;
   margin : auto; 
}

#corps h3
{
   font-family: Arial;
   font-size: +12;
}

#corps h4
{
   color: #9acfe9;;
   text-align: center;
   font-family: Arial;
   font-size: +24;
}

body {
  font-family: Arial;
}

.image1 {
position: absolute;
left: 350px;
top: 400px;
}

.image2 {
position: absolute;
left: 800px;
top: 400px;
}

a:link {color:#0193c3}

.rss {
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.bouton {
  background: url('Images/bouton-gauche.png'); /* Bord gauche et contenu du bouton */
  float: left; /* Afin que le DIV prenne la largeur de son contenu, et non la largeur de la page, pour des raisons didactiques */
  margin: 5px; /* Espacer les boutons entre eux, rien à voir avec la technique des portes coulissantes */

  width: 110px;
  /* Ce qui change par rapport à l'exemple précédent : */
  display: block; /* Pour pouvoir assigner une taille */
  text-decoration: none; /* On utilise un lien au lieu d'un div. Un lien est souligné par défaut, mais on veut le même look qu'avant */
  cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */
}

.bouton span {
  /*background: url('Images/bouton-droite.png') 20% 0 no-repeat; /* Bord droit du bouton, aligné à droite ! */
  height: 30px; /* Hauteur des images bouton-gauche.png et bouton-droite.png */
  line-height: 30px; /* Centrer le texte verticalement sur le bouton */
  padding: 0 10px; /* S'assurer que le texte ne soit pas collé aux bordures du bouton */
  color: #f29400; /* Le bouton est bleu foncé, le texte doit être clair */

  /* Ce qui change par rapport à l'exemple précédent : */
  display: block; /* Pour pouvoir assigner une taille */
}


.bouton:hover,
.bouton:focus,
.bouton:active {
  background-color: yellow; /* On n'utilise pas la forme courte "background: ...;" car on devrait alors re-spécifier l'URL vers l'image */
  background-position: 0 -30px; /* On remonte l'image de 30 pixels (la moitié de sa hauteur) pour voir la partie jaune */
}

.bouton:hover span,
.bouton:focus span,
.bouton:active span {
  background-position: 100% -30px; /* Toujours aligné à droite, mais remonté de 30 pixels (la moitié de sa hauteur) pour voir la partie jaune */
  color: black; /* Le fond devient jaune, donc le texte doit être noir pour être visible */
}