/*---------------------------------------------------*/
/*----------- le style général de la page -----------*/
/*---------------------------------------------------*/
body {
    margin: 0;
	font-family: verdana, arial, sans-serif;
	font-size: 75%;
	text-align:center;
/*---------------------------------------------------*/
/*--- on définit ici les couleurs de la scrollbar ---*/

	}
/*---------------------------------------------------*/
/*------- le style global qui centre la page --------*/
/*---------------------------------------------------*/
.global {
	width: 762px;
	margin-right:auto;
	margin-left:auto;
	margin-top:10px;
	padding:0px;
	text-align:left;
	}
/*---------------------------------------------------*/
/*------------ les divers style de bloc -------------*/
/*---------------------------------------------------*/
.leblocheader {
	width:760px;
	height:240px;
	background-image: url('image/image_03.jpg');
	border: 1px solid #000000;
	}

.leblocmenuheader {
	background-image: url('image/image_07.jpg');
	width: 760px;
	height: 17px;
	border-top: 1px solid #000000;
	margin-top:240px;
	margin-bottom:0px;
	}
.leblocmenu {
	background-image: url('image/image_13.jpg');
	border: 1px solid #000000;
	margin-top:20px;
	margin-bottom:0px;
	width: 184px;
	height: 1200px; /* cette ligne indique la hauteur du bloc menu */
	float:left;
	}
.lebloccontenu {

	margin-top:20px;
	margin-left:5px;


	}
	
.lebloctitrecontenu {
	border-bottom: 1px solid #000000;
	background-image: url('image/image_07.jpg');
	height: 15px;
	margin-left: 182px;
	margin-top: 20px;
	}
	
.lebloctitre {
	border-bottom: 1px solid #000000;
	background-image: url('image/image_09.jpg');
	height: 15px;
	
	}
/*---------------------------------------------------*/
/*------------ Et maintenant les textes -------------*/
/*---------------------------------------------------*/
.menutitre {
	text-align: left;
	font-weight: bold;
	margin-left:10px;
	}
.titre {
	
	font-weight: bold;

	}
.texte {
	text-align: left;
	height:340px;
	overflow:auto;
	padding-left:10px;
	padding-right:10px;
	}

a:hover {
	color: #000000;
	text-decoration: underline;
	}
/*---------------------------------------------------*/
/*-     et voilà c'est pas bien dur à faire...      -*/
/*-                                                 -*/
/*-                                       Rorschach -*/
/*---------------------------------------------------*/

ul
{
   font-size: 11px;
}

p
{
   color: black;
   font-size: 12px;
   text-align: right;
}
blockquote
{
	text-align: justify;
}
h1,h2
{
   color: black;
}
.important
{
  color:green;
  font-size: 22px;
}
.droite
{
   float: left;
   text-align: justify;
   padding-left: 5px;
}
.nom
{
   color: black;
}
h3 em /* => tous les em situés à l'intérieur d'un h3 */
{
   color: blue;
}
body
{
   width: auto;
   margin: auto;
   background-image: url("fond.jpg");
   background-color: #d7dcd7;
   background-attachment: scroll;
   
}

#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("banniere naruto.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}
#menu
{
   float: left;
   height: 267%;
   width: auto;   /* Très important : donner une taille au menu */
   background-image: url("image/image_13.jpg");
   border-left: 3px solid #868789;
   border-right: 3px solid #868789;
}

.element_menu
{
    height: auto;
   background-color: white;
   background-image: url("image/image_13.jpg");
   background-repeat: repeat-x;
   margin-bottom: 20px;/* Pour éviter que les éléments du menu ne soient trop collés */
   text-align: left;
}
.element_menu h1 /* Tous les titres de menus */
{    
   color: black;
   font-family: Papyrus,Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("puce.gif"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left:20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   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: black;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   
   color: #FF7E00;
}
#corps
{
   height: 267%;
   width:auto;
   margin-top:0px;
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   color: #000000;
   background-color:white; /* Une couleur de fond pour le corps */
   background-image: url("image/image_14.jpg");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}
#corps h1 /* Tous les titres h1 du corps */
{
   color: #7CBFF7;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

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

   background-image: url("images/titre.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 */
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}
#pied_de_page
{
    margin-top:20px;
   padding: 0px;

   text-align: center;

   color: #B3B3B3;
   background-color: white;
   background-image: url("image/image_17.jpg");
   background-repeat: repeat-x;
   width: 760px;
   height: 100px;
   border: 1px solid black;
}