body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url("../img/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-repeat: repeat-y;
}

/* L'en-tête */

#entete
{
   width: 760px;
   height: 100px;
   background-image: url("../img/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


/* Le menu */

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 123px; /* Très important : donner une taille au menu */
  /* border-top: 2px solid black;*/
   background-image: url("../img/petit_tkdman.png");
   background-repeat: no-repeat;
   text-align: right;
}

#menu h3 a 
{
color:#3366FF;
text-decoration:none;
}

.element_menu
{
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: small;
   background-image: url("../img/motif_YY.png");
   background-repeat: repeat-x;
   border: 2px solid black;
   background-color: #FF7B6E;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.compteur
{
  font-family: "Times New Roman", Times, serif;
  font-size: small;
  border: 2px solid black;
  /*background-color: #A7BEF1;*/
  background-color: black;
  margin-bottom: 2px; 
  color white;
}

.news
{
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: small;
   background-image: url("../img/news.gif");
   background-repeat: no-repeat;
   background-color: #FF7B6E;
   text-align: left;
   border: 2px solid black;
   margin-bottom: 20px;
}

.raccourci
{
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: x-small;
   background-image: url("../img/motif_YY.png");
   background-repeat: repeat-x;
   background-color: #FF7B6E;
   text-align: left;
   border: 2px solid black;
   margin-bottom: 20px;
}

/* Quelques effets sur les menus */

/* menulist */
ul#menulist
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menulist li
{
	margin: 0;
  margin-left: 1px;
  margin-bottom: 2px;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menulist li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 114px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 30px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url("../img/imgmenu.png") no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}

ul#menulist li a:hover
{
	background: url("../img/imgmenu.png") 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: 1px solid #f97 ;
}
		

/* Le corps de la page */

#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: medium;   
   color: #000099;
   background-color: #FFCC66; /* Une couleur de fond pour le corps */
   background-image: url("../img/presentation.jpg");
   background-repeat: no-repeat;
   
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   
}

#corps h1 /* Tous les titres h1 du corps */
{
   font: bold 25px/25px verdana; /*, sans-serif;*/
   color: #0000E8;
   text-align: center;
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
}

/* pour donner une impression d'ombre au titre, on ecrit en rouge par dessus */
#corps h1:after {
  display: block;
  text-align: center;
  margin-left: -2px;
  margin-top: -26px;
  color: red;
  content: attr(title);
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;

   background-image: url("../img/petit_yop_G.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   font-size: medium;
   padding-left: 33px;
   color: #0000E8;
   text-align: left;
}

#corps h3 /* Tous les titres h3 du corps */
{
   height: 10px;
   padding-left: 33px;
   color: #0000E8;
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: small;  
   text-align: left;
}

#corps h6 /* Tous les titres h6 du corps */
{
   color: #C86464;
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: xx-small;  
   text-align: left;
}

.p1 /* pour faire une ligne de s‚paration en haut d'un õ */
{
  border-top:  2px solid #808080;
  /* overflow: auto; ne fonctionne que si le õ a une taille d‚finie */ 
}

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

#piedpage
{
   width: 760px;
   height: 100px;
   
  /* margin-left: 140px;*/
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: small;  
   text-align: right;
   color: #0000E8;

   background-color: #FFCC66;
   background-image: url("../img/logopiedpage.jpg");
   background-repeat: no-repeat;
   
   border: 2px solid black;
   
}

.fanGauche
{
  float: left;
	margin-right: 5px;
}

.fanDroite
{
    float: right;
}

.fanCentre
{
    float: center;
}

.fanDroite p
{
  /* permet de centrer une legende sous l'image en fanDroite */
   font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: x-small;  
   font-style: italic;
   color: black;
   text-align: center;
}

.centre
{
	width: 400px; /* on fixe une taille au bloc DIV pour pouvoir le centrer */
	margin: auto; /* centrage AUTOmatique */
}

/* tableau */
table
{
   margin: auto;
   border: 4px outset blue;
   border-collapse: collapse;
}

th
{
   background-color: #3333FF;
   border: 1px solid black;
   color: white;
   font-size: 1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td
{
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center;
   padding: 5px;
}

.sanscadre
{
   margin: auto;
   border: none;
   border-collapse: collapse;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center;
}

.sanscadre a img /* Toutes les images du tableau sans cadre contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

/* table de l'album */

.album
{
   background-image: url("../img/combat_aqua_pale.jpg");
   background-repeat: repeat;
}

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}