body
{
   width: 780px;
   margin: auto;
   Margin-bottom: 5px;
}

/* L'en-tête */
#en_tete
{
   width: 780px;
   height: 150px;
   background-image: url("../images/banniere_JBC.jpg");
   margin-bottom: 10px;
}

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 170px; /* Très important : donner une taille au menu */
   margin-left:6px;
   margin-right:6px;
   margin-top:6px;
   padding-left: 5px;

}

.element_menu
{
   border: none;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   font-family: Georgia, Arial, "Arial Black", "Times New Roman", Times, serif;
   }

/* Quelques effets sur les menus */

.element_menu ul  /* Toutes les listes à puces se trouvant dans un menu */
{
  position:relative;
   list-style:none;
  padding: 0px;/* Tous les côtés ont une marge intérieure de 0 pixels */
  margin: 0px; /*Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   padding-left: 5px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}   


.element_menu a/* Tous les liens se trouvant dans un menu */
{

    color: #8c2021;
	text-decoration: none;
}
.element_menu a:visited   /* Quand le visiteur a déjà vu la page concernée */
{
   text-decoration: none;
   color: #8c2021;
}
.element_menu a:active, a:focus /* Appliquer le même style aux liens actifs et focus */
{
   background-color: #8c2021;
   color: #FFFFFF;
}
.element_menu a:hover   /* Quand on pointe sur un lien du menu */
{
  text-decoration: underline;
  color: #de1818;
}


#corps
{
   margin-left: 95px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-right:5px;
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   color: black;
   border: none;
} 


p
{
   font-size: small;
   font-family: Arial, "Trebuchet MS", Georgia, serif;
   text-align: justify; /* Les paragraphes seront justifiés */
   border: none;
}



#corps h1, h2, h3, h4, h5 /* Tous les titres h1 et h2 du corps */
{
   font-size: 1.3;
   font-family: Georgia, Century, Arial, "Trebuchet MS", serif;
   text-align: left; /* Pour mettre le titre a gauche*/
   font-weight: bold; /*Les titres seront en gras*/
}

#fondecran
{
  background-image: url("../images/photos/fond_burgundy_home.jpg");
  background-repeat: no-repeat;
}

#fondecran1
{
  background-image: url("../images/photos/fond_ecran.jpg");
    background-repeat: no-repeat;
}
#fondecran3
{
  background-image: url("../images/photos/fond_natural.jpg");
  background-repeat: no-repeat;
}
#fondecran4
{
  background-image: url("../images/photos/fond_brown.jpg");
  background-repeat: no-repeat;
}
.picture
{
   text-align: right;
   color: grey;
}

.element_photos
{
   border: none;
   font-family: Arial, "Trebuchet MS", Georgia, serif;
   font-size: small;
}
.element_photos a img /*Toutes les images doivent etre decorees*/
{
border:none;
}
.element_photos a /* Tous les liens se trouvant dans un menu */
{
    border: none;
	color: #8c2021;
	text-decoration: none;

}
.element_photos a:active, a:focus /* Appliquer le même style aux liens actifs et focus */
{
   border: none;
   color: black;
}

.element_photos a:visited /* Quand le visiteur a déjà vu la page concernée */
{
border: none;
text-decoration: none;
color: #8c2021;
font-weight: none;
 font-style: none;
}

.element_photos a:hover /* Quand on pointe sur un lien du menu */
{
   color:grey;
}

.date
{
 text-align: center;
 font-size: 5px;
}

.red
{
color:#8c2021;
}

.small
{
   font-size: small;
}
.center
{
text-align: center;
}

.element_cat
{
 border: none;
   font-family: Arial, "Trebuchet MS", Georgia, serif;
   font-size: small;
}
.element_cat a img /*Toutes les images doivent etre decorees*/
{
border:none;
}
.element_cat a /* Tous les liens se trouvant dans un menu */
{
    border: none;
	color: #8c2021;
	text-decoration: none;
	font-weight: bold;
}
.element_cat a:active, a:focus /* Appliquer le même style aux liens actifs et focus */
{
   border: none;
   color: black;
}

.element_cat a:visited /* Quand le visiteur a déjà vu la page concernée */
{
border: none;
text-decoration: none;
color:#8c2021;
font-weight: none;
 font-style: none;
}

.element_cat a:hover /* Quand on pointe sur un lien du menu */
{
   font-style: italic;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 15px;
   text-align: center;
   background-image: url("../images/pied_de_page_JBC.jpg");
   background-repeat: no-repeat;
   color: #39758c;
   border: none;
}