body
{

   /*width: 1280px;*/
   width: 98%;
   max-width: 1280px;
   margin: auto;
   margin-bottom: 5px; 
   background-image: url("../img/test.jpg");
}


img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto }
   
   
.tableau {
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 1 px;
	border-color: #FFFFFF;

}

tr.ligne_photo{
	height: 130px;
}

p.text0{
	color: #FFFFFF;
}

p.text1{
	color: #49D7F0;
}

div.centre{
	margin: 0 auto;
}

div.visible{
	text-align: center;
	border: 1px solid #FFFFFF;
}

span.active {
	color: #49D7F0;
	font-style: 20px;
}

span.disactive{
	color: #FFFFFF;
	font-style: 20x;
}

div.invisible{
	display: none;
}

#en_tete
{
	margin-top: 5px;
	border: 1px solid #FFFFFF;
	height: 210px;
	width: 100%;
	max-width: 1280px;
	background-image: url("../img/head.jpg");
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

#en_tete a.TAB_button span { position:absolute; top:-500px; }
#en_tete a.TAB_button { float:left; display:block; }

.TAB_accueil {
	float:left;
	margin-top: -16px;
	margin-left:-40px;
	width:142px;
	height:210px;
}

.TAB_accueil:hover {
	background-image:url('../img/home_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_accueil a {
	margin-top:100px;
	margin-left:40px;
	width:90px;
	height:100px;
}

.TAB_accueil a: hover {
	background-image:url('../img/home_hover.jpg');
} 

/*Concert*/
.TAB_concert {
	float:left;
	margin-top: -16px;
	margin-left:0px;
	width:110px;
	height:210px;
}

.TAB_concert:hover {
	background-image:url('../img/concert_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_concert a {
	margin-top:90px;
	margin-left:10px;
	width:90px;
	height:100px;
}

.TAB_concert a: hover {
	background-image:url('../img/concert_hover.jpg');
}

/*Album*/
.TAB_album{
	float:left;
	margin-top: -16px;
	margin-left:0px;
	width:100px;
	height:210px;
}

.TAB_album:hover {
	background-image:url('../img/album_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_album a {
	margin-top:100px;
	margin-left:15px;
	width:90px;
	height:100px;
}

.TAB_album a: hover {
	background-image:url('../img/album_hover.jpg');
} 

/*Livre d'or*/
.TAB_book {
	float:left;
	margin-top: -16px;
	margin-left:0px;
	width:130px;
	height:210px;
}

.TAB_book:hover {
	background-image:url('../img/book_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_book a {
	margin-top:100px;
	margin-left:20px;
	width:110px;
	height:100px;
}

.TAB_book a: hover {
	background-image:url('../img/book_hover.jpg');
}

/*Contact*/
.TAB_contact{
	float:left;
	margin-top: -16px;
	margin-left:0px;
	width:90px;
	height:210px;
}

.TAB_contact:hover {
	background-image:url('../img/contact_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_contact a {
	margin-top:100px;
	margin-left:10px;
	width:90px;
	height:100px;
}

.TAB_contact a: hover {
	background-image:url('../img/contact_hover.jpg');
}

/*Connection*/
.TAB_connection {
	float:left;
	margin-top: -16px;
	margin-left:0px;
	width:150px;
	height:210px;
}

.TAB_connection:hover {
	background-image:url('../img/connection_hover.jpg');
	background-repeat: no-repeat;
}

.TAB_connection a {
	margin-top:100px;
	margin-left:20px;
	width:120px;
	height:100px;
}

.TAB_connection a: hover {
	background-image:url('../img/connection_hover.jpg');
}  

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 190px; /* Très important : donner une taille au menu */
}

.element_menu
{
	background-image: url("../img/transparent.png");
	border: 1px solid white;
	margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* Tous les titres de menus */
{    
	color: #000000;
	font-family: "Poor Richard", "Arial Black", "Times New Roman", Times, serif;
	text-align: left;
    margin-left: 5px;
	margin-bottom: 20px;
}

.element_menu h3:after {
	color: #FFFFFF;
	display: block;
	margin-left: -2px;
	margin-top: -23px;
	content: attr(title);
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   /*list-style-image: url("images/puce.png"); 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 li {
	list-style-type: none;
	margin-bottom: 0px;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
	text-decoration: none;
	color: #FFFFFF;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
	color: #47A5B6;
}

.element_menu a img {
	border: 0px;
}

.element_menu span {
	margin-left: 5px;
	color: #FFFFFF;
}

.element_menu span.date {
	font-family: Calibri;
	color: #47A5B6;
	font-size: 20px;
}

.element_menu span.heure {
	font-family: "Calibri";
	text-align: justify;
	color: #47A5B6;
}

.element_menu span.titre {
	font-family: "Calibri", "Arial Black", "Times New Roman", "Times";
	text-align: center;
	font-size: 18px;
	font-style: italic;
}

.element_menu p.commentaire {
	margin: 5px;
	font-family: "Calibri", "Arial Black", "Times New Roman", "Times";
	text-align: left;
	color: #FFFFFF;
	font-style: 18px;
}

/*Livre d'or*/
.element_menu .book, #corps .book {
	margin: 3px;
	font-family: "Poor Richard", "Arial Black", "Times New Roman", Times, serif;
}
 .element_menu span.book_pseudo {
	font-size: 20px;
	color: #47A5B6;
}

.element_menu span.book_date {
	font-size: 16px;
	font-family: Calibri;
	color: #FFFFFF;
}

.element_menu span.book_note {
	text-align: right;
	font-family: "Calibri", "Times New Roman";
	color: #FFFFFF;
}

.element_menu p.book_message {
	margin: 3px;
	text-align: justify;
	color: #FFFFFF;
	font-family: "Calibri", "Times New Roman";
}

/* Le corps de la page */

#corps
{
   margin-left: 200px; /* 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 */
   
   color: #FFFFFF;
   background-image: url("../img/transparent.png");
   
   border: 1px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #FFFFFF;
   text-align: center;
   font-family: "Poor Richard", "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;
   background-image: url("../img/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 */
   font-family: "Poor Richard", "Times New Roman";
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

#corps h4 {
	font-family: Calibri;
	font-size: 16px;
	text-decoration: none;
}

#corps a /* Tous les liens se trouvant dans un menu */
{
	text-decoration: none;
	font-style: italic;
	color: #FFFFFF;
}

#corps a:hover /* Quand on pointe sur un lien du menu */
{
	color: #47A5B6;
}

#corps p.text {
	text-align: justify;
	font-family: Calibri;
	font-size: 16 px;
	color: #FFFFFF;
}

#corps p.text_bis {
	font-family: Calibri;
	font-size: 16 px;
	color: #FFFFFF;
}

#corps p.text_titre {
	font-family: "Calibri", "Times New Roman";
	font-size: 20 px;
	color: #47A5B6;
}

#corps div.book_message {
	margin: 5px;
	margin-bottom:10px;
	border: 1px solid #FFFFFF;
}

#corps h2.article_titre {
	font-family: "Poor Richard";
	font-size: 30 px;
	color: #47A5B6;
	border-bottom: 1px solid #FFFFFF;
}

#corps div.article {	
	border: 1px solid #FFFFFF;	
	padding: 8px;
	text-align: justify;
 	margin: 10px;
}

#corps a img {
	border: 0px;
}

#corps tr {
	border: 1px solid white;
}