/*

*/



html
{
padding:0;
margin:0;
}


body
{
   font-family: Verdana,"Trebuchet MS ","Times New Roman", Times, serif;   
   font-size:1em; 
   width:971px;
   height:95%;
   margin: auto;   
   padding-top:0;
   padding-left:10px ;   padding-right:10px ;
   background-image:url('motif2.png') ;
   
    
}

/* L'en-tête */

#en_tete
{   
   height: 155px;
   
   
   background-image:url("images/titre.png"); background-repeat: no-repeat;
     
   border:0px solid black;  
     
   margin-top: 10px;
   margin-bottom: 10px;
}


#en_tete h1, h2
{  
padding-top:10px;
font-size:150%;
text-indent:80px;
letter-spacing:1em;
white-space:nowrap;
}





#sous_en_tete
{   
   height: 30px;
   margin-bottom: 10px;    
   text-align:right;
   padding-right:15px;
   font-size:small;   
   border-right:1px dotted gray ;   
   border-bottom: 1px dotted gray ;
   background-imagex:url("images/soustitre.png"); background-repeat: no-repeat;
}



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






/* Le menu */

#menu
{
   float: left;
   width:110px;   
   height:580px;
   margin-right:10px;
   
   background-image: url("images/menu_droite1.png");
   background-repeat: no-repeat;
   
   
}



.element_menu
{    
   width:110px;
   height:179px;   
   margin: 0px;
   margin-bottom: 10px;   
   
   border:0;  
}


/* Quelques effets sur les menus */


.element_menu h4
{    
   text-align: center;
   font-size:80%;
   
   padding-top:15px;
   padding-bottom:0px;
}


.element_menu ul
{
   text-align: center;
   list-style: none;
   padding: 0px;
   padding-left: 5px;
   margin: 0px;
   font-size: small;   
  
}



/* on ajoute les styles pour les liens et le survol des liens */

.element_menu a
{
   text-decoration:none;
}

/*petit effet sympa de séparation entre les liens ... */

.element_menu li
{   
   border-bottom: 1px solid #ebe4de;   
   margin-right:2px;
}

.element_menu li:hover
{
   color:#e8e2dg;  
   background-color: #ebe4de;
   
   list-style: none;
   text-decoration:none;
   
   border-bottom: 1px solid #9eada0;  
}
















a.info{
    position:relative; 

    z-index:60;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:200;}

a.info span{display: none}

a.info:hover span{ 
/*le contenu de la balise span ne 
sera visible que pour l'état a:hover */
 display:block; 
 position:absolute; 
    
    top:2em; left:0em; width:15em;
    border:0px solid gray;
    
   background-image: url("images/bulle.gif");
   background-repeat: no-repeat;	color:black;
    text-align: justify;
    padding:1px;
	padding-top:40px;
	padding-left:30px;
	
	width:200px;
	height:78px;
    
    }
















/* Le corps de la page */

#corps
{
   overflow:auto;
   height:550px;
     
   margin-bottom: 0px;
   padding: 15px;

    
   border:0px solid white;
   background-repeat: no-repeat;	
   
   border-right: 1px dotted gray ;
   border-left: 1px dotted gray ;
   
   text-align: justify; /* La citation sera justifiée */
   
 
}


#corps a
{
   text-decoration: underline;       
}


#corps p
{
   text-indent: 15px;
   font-size: 0.8em;
   text-align: justify; /* La citation sera justifiée */
}


#corps p:first-letter
{
   float:left-top;
   color: black;
   font: 250%  "arial black";
   padding:1px;
   margin:1px;
   border:0px solid black;
}



#corps li
{
  font-size: 0.8em;
  font-style:italic;
  list-style-image: url("images/fleche.png");
}


#corps li a
{
	text-decoration:none;
}


#corps hr
{
   color:rgb(204,204,204);
   font-size:1px;
}

#corps h1
{
   color: white;
   text-align: left;
}

#corps h2
{
   color: white;
   text-align: left;
}


#corps h3
{
   text-align: left;
   background-image: url("images/bas.png");
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */   
   padding-left: 30px;
}



#corps h4
{
   text-align: left;
   font-style:italic;
   background-image: url("manu.png");
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */   
   padding-left: 50px;
   height:40px;
   

   

}

#corps h5
{
   background-image: url("images/binouze.png");
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */  
   background-color:#fbd13a ;     
   padding-left: 20px;
 
   text-align: left;
   font-style:italic;
   
   background-color: white;

   padding-left: 30px;
}

#corps h6
{
   font-size:80%;
   padding-left:10px;
}


#corps input, textarea
{
   background-color: white;
   margin-left: 20px;
   border: 1px solid black;
}
 
#corps input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
   background-color: #ffcf3c;
}
 
#corps label
{
   color: blue; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
}
 
#corps legend /* On met un peu plus en valeur les titres des fieldset */
{
   color: #FF9933;
   font-weight: bold;
}
 
#corps fieldset
{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: #FFFFCC;
}

#corps form
{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: white;
   border: 1px dotted silver;
   margin-right: 10px;
   margin-left: 10px; 
}





.cadre
{
float:left;
width:200px;
height:166px;

background-image: url("images/fondcadre.png");
background-repeat: no-repeat;

border: 0px solid black;

margin:5px;

}

.cadre img
{
margin:15px;
}

.cadrealbum
{
float:left;
width:165px;
height:196px;

background-image: url("images/cadrealbum.jpg");
background-repeat: no-repeat;

border: 0px solid black;
}

.cadrealbum img
{
margin-left:10px;
margin-top:14px;
margin-bottom:5px;

border:1px solid gray;
}







.cadrededicaces
{
float:left;
width:191px;
height:225px;

margin:10px;

background-image: url("images/dedicaces/cadrededicaces.png");
background-repeat: no-repeat;

border: 0px solid black;
}

.cadrededicaces img
{
margin-left:27px;
margin-top:23px;
margin-bottom:5px;

border:0px solid gray;
}









.cadrealbumdetail
{
float:left;
width:133px;
height:178px;

background-image: url("images/cadrealbumdetail.jpg");
background-repeat: no-repeat;

border: 0px solid black;

margin-left:58px;



}

.cadrealbumdetail img
{
margin-left:0px;
margin-top:13px;
margin-bottom:5px;

border:1px solid gray;
}







  .dedicace
{
	 border: 1px solid black;

	 float:left;
	 width:146px;
	 height:180px;
	 
	 text-align:center; 
	 margin:15px;

 }


.details
{
   color: #444343;
   text-align: left;
   font-style: italic;
   font-size: 0.8em;
}

.questions
{
   color: #979491;
   text-align: left;
   font-weight: bold;
   font-size: 0.8em;
}

.citations
{
   text-align: justify;
   font-style: italic;
   font-size: 0.8em;
   text-indent: 10px;
}

.imageflottantegauche
{
   float: left;
   padding-right: 10px;
   padding-bottom: 5px;  
   border:0px ;   
}


.imageflottantedroite
{
   float: right;
   padding-left: 10px;
   padding-bottom: 5px;
   border:0px ; 
}

.dessous
{
   clear: both;
}

.pseudo
{
   color: red;
   text-align: left;
   font-weight: bold;
   font-size: 0.8em;
   text-indent: 0px;
}

.album
{
 background-image:url('motif2.png') ;
 padding:15px;
 
 }
 
 
.resume 
{ 
 min-height:250px;
 
 clear:both;
 
 padding:15px;
 padding-right:165px;
 }
 

 
 


 
 
 .couverture
{
 
 width:212px;
 height:350px;
 
 background-color:silver;

background-image: url("images/couverture.jpg");
background-repeat: no-repeat;


  float:left;
  
  padding-top:0px;


 text-align:center;


 }
 
.couverture img
{
	border:1px solid black;
	margin:20px;
 }
 
 

 
 
 
 
 
 .liste
{
  width:400px;
 height:400px;
 
 float:right;
 
background-image: url("images/liste.jpg");
background-repeat: no-repeat;
 

 padding:0px;

 }
 
  .liste ul
{
   padding: 0px;
   padding-left: 0px;
   margin: 0px;
   font-size: small;    
}


 .heros
		{
			 background-color:white;
			 border: 1px dotted silver; 
			 padding:5px;
			 text-align:center;
			 margin:5px;
			 clear:both;
		}



 .nouvelles
{
 background-color:white;
 border: 1px dotted gray; 
 padding:15px;
 margin-top:5px;
 margin-bottom:35px;
 }
 
  .nouvelles img
{
 margin-top: 0px;
 margin: 2px;
 border: 1px solid black; 
 }
 
 










/* Le menu de droite */

#menud
{
   float: right;
   width: 120px;
   height:580px;
   margin-left:10px; margin-right:10px;    
}




#menud ul
{
padding-left: 25px;
}






.element_menud
{
    
   margin-bottom: 10px;    
   
   background-image: url("images/menu_gauche1.png");
   background-repeat: no-repeat;  
 
   
   width:120px;
   height:121px;
   overflow:hidden;  

   
}








/* le menu de droite, en bas */





.element_menuliens
{    
   background-image: url("images/menu_gauche2.png");
   background-repeat: no-repeat;  
 
   width:120px;
   height:221px;   
   margin: 0px;
   margin-bottom: 0px;   
   border:0px solid black;
   list-style: none;
 
}




.element_menuliens h4
{    
   text-align: center;
   font-size:80%;
   
   padding-top:15px;
   padding-bottom:0px;
}


.element_menuliens ul
{
   
   list-style: none;
   text-decoration:none;
   padding: 0px;
   margin: 0px;
   font-size: small; 
   border:0px solid blue;   
  
}



/* on ajoute les styles pour les liens et le survol des liens */

.element_menuliens a
{
   text-decoration:none;
   list-style: none;
   text-align: left;
}

/*petit effet sympa de séparation entre les liens ... */

.element_menuliens  ul li
{   
   
   border:0px solid black;
   border-bottom: 1px solid #ebe4de;   
   
   margin:0;
   padding:0;
   list-style:none; 
   
}

.element_menuliens ul li:hover
{
   color:#e8e2dg;  
   background-color: #ebe4de;
   
   list-style: none;
  
   border-bottom: 1px solid #9eada0; 
   list-style:none;   
}






.or
{   
     
   margin-bottom: 10px;    
   
   background-image: url("images/fond_or.png");
   background-repeat: no-repeat;  

 
   
   width:120px;
   height:140px;
   overflow:hidden;


    
    
}

.or p
{ 
   font-size: 0.8em;
   text-align:left;
   
   padding:5px; 

   width:110px;
   height:135px;       
}


.message
{
 background-color:white;
 border: 1px dotted silver;
 font-size:small;
 
 padding:10px;
 margin:10px;
 }






/* Quelques effets sur les menus */


.element_menud h3
{    
   text-align: center;
}

.element_menud h4
{    
   text-align: center;
   font-size:80%;
   
   padding-top:15px;
   padding-bottom:0px;
}

.element_menud h5
{    
   text-align: center;
}

.element_menud ul
{
   list-style-image: url("images/fleche.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
   font-size: 0.8em;
}


.element_menud li:hover
{
   list-style-image: url("images/fleche2.png");
}



a
{
   color: black;
}

.element_menud a:hover
{
   background-color: black;
   color: #FFD446;
}














.element_menu_image
{
   background-image: url("images/bandelucien.jpg");
   background-repeat: repeat-x;
   
   border: 1px solid black;
   
   margin-bottom: 1px;
}



.element_menu_compteur
{
   height:55px;
   background-image: url("images/compteur.png");
   background-repeat: no-repeat;  
   
   border: 0px solid black;   
   color: white;
   text-align: left;

   font-style: italic;
   font-size: 0.8em;
   text-indent: 10px;
   
   margin-bottom: 1px;
}



.copyright p
		{
			padding:10px;
			padding-top:5px;
			font-size:60%;
			color:black;
			text-align:right;
		}	


.inventaire ul ol li
{
list-style-image:none;
}

.videos
{
text-align:left;
margin-left:90px;
}


/* Le pied de page  */

#pied_de_page
{
   
   height: 30px;
   background-color: white; 
   margin-top: 15px;
   margin-bottom:10px;
   border:1px solid #a29c9c;   

}



form input
{
	margin:3px;
	background-color:white;
	margin-bottom:2px;
	font-size:xx-small;

	border:1px dotted black;
	padding:3px;
}

em
{
text-decoration:underline;
}

a
{
   color: black;
}