body{
margin 			: 10px 0;
padding 		: 0;
text-align 		: center;
background-color: black;
font			: medium "Trebuchet MS", helvetica, sans-serif;
}
#conteneur{
width		: 900px;
height		: auto;
min-height	: 800px;
margin 		: 0 auto;
text-align	: left;
border		: 2px solid red;
background	: #fff url("css_image/ginga_animation.gif") no-repeat right bottom;
}

h1#header{
height		: 180px;
}

h1#header a
{
width		: 900px ;
height		: 200px ;
display		: block ;
background	: url("css_image/banniere.png") no-repeat;
text-indent	: -5000px;
}

div#entete{

background		: url("css_image/header_pic.gif") repeat-x 0 0;
height 			: 36px;
width 			: auto;
float 			: top;
font-size		: small; 
font-weight		: bold ;
color			: white ;
padding-right	: 5px;
text-align		: right;
}

ul#menu
{
border: 2px solid black ;
background:  #c61d0e url("css_image/berimbau.png") no-repeat 0 0;
height: 600px; /*obligatoire sinon le contenu descend tout en bas*/
width: 140px ; /* sup ou egal  au "menu li a"*/
margin: 0 ;  /*obligatoire sinon il y a un margin par default*/
padding: 0 ; /*obligatoire sinon il y a un padding par default*/
list-style-type: none ;
position : absolute;
}

/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
text-align: center ;
}

/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */
ul#menu li a
{
width: 135px ;
line-height: 35px ;
font-size: large!important;
font-size: medium;
letter-spacing: 2px ;
color: white;
display: block ;
text-decoration: none ;
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */


ul#menu li a:hover
{
  font-weight: bolder;
}
/*fin menu*/

#contenu{
  height			: auto;
  width				: auto;
  margin-left		: 150px;
  margin-right		: 25px;
  margin-bottom 	: 25px;
  min-height		: 550px; /*taille minimale prise en compte pour firefox*/  
  float: left;

}


div#contenu{

  height: auto;
  font-size: small!important;
  font-size: x-small;
  font-family: Verdana;
  color: gray;
  line-height: 1.5em;
}

div#contenu h2
{

  line-height	: 25px ;
  margin-bottom : 10px;
  font-size		: x-large!important;  
  font-size		: large;
  font-family	: Arial;
  text-align 	: center;
  background	: url("css_image/barre_logo.png") no-repeat left bottom ;
  color: white ;
}

div#contenu h3
{
  line-height	: 25px ;
  padding-left	: 20px ;
  margin-bottom : 10px;
  font-family 	: Arial;
  font-size		: small!important;
  font-size		: x-small;
  background	: url("css_image/barre.png") no-repeat left bottom ;
  vertical-align: text-bottom;
  color: white;
}

div#contenu h4
{
  border-bottom	: 2px solid red ;
  font-size		: small ;	
  color: black ;
}


div#contenu img{
vertical-align: middle;
margin :5px;
}

div#contenu a
{
color: blue ;
}
div#contenu a:hover
{
color: lightblue;
}

div#contenu a:visited
{
color: purple;
}

/*-------------------------------------------------------*/
.news{
  float:left;
  width: 700px;
  border: 1px solid gray ;
  margin-bottom : 15px;
  margin-top 	: 15px;

  padding : 5px;
  font-size: small!important;
  font-size: x-small;
}

/*-------------------------------------------------------*/

.news img{
  float:left;	
}

/*-------------------------------------------------------*/
.message {
	border			: 1px solid gray; 
	margin-bottom	: 20px;	
	margin-bottom	: 20px;	
	padding			: 5px;
	 color			: black;
}

.message h4{
	text-align: left;
	margin: 5px;
}


/*-------------------------------------------------------*/
p#footer
{
border-top: 2px solid red;
margin-top :25px;
padding-left : 30px;
line-height: 30px;
text-align: center;
color: black;
font-size: x-small;
float : bottom;
left : clear;
}


.texterouge{ 
color: #c00; 
font-style: bold;
}