/* TRBL*/

 html, body {
 height: 100%; /* site occupe toute la hauteur de la fenêtre*/
 margin: 0 auto; text-align: center; /* pour IE, pour centrer*/
 padding: 0 ; /* pour Opéra qui défini des marges par défaut au body */
 background : #ffcc66 ;}
 
 #global {
 min-height: 100%;
 width:850px;
 padding: 0 10px;
 margin: 0 auto; 
 text-align: center;
} 
 
#global img {
border : 0 none;} /* elimine le cadre bleu entourant les images cliquables*/

#global li{list-style-type:none;}
 
 /* 3 colonnes de corps : une pour photos, une pour contenu, une pour menu, hauteur illimitée ---------------------------------------------------*/
  
#corps { 
padding-bottom: 10px; /* Pour éviter la superposition du pied de page et du contenu */
overflow: auto; }/* oblige à englober les div flottant dans calcul de sa hauteur = contexte de formatage*/

 /* colonne album photo-------------------------------*/
 #photos { float: left; width:110px ; margin: 130px 0 0 0 ; }
 
 /* colonne contenu-------------------------------*/
 #contenu {
 float: left;
 width: 525px; 
 margin: 0 0 0 0 ; 
 text-align: center; }
 
 #contenu img { margin: 0 0 20px 0 ;}
 
 /* colonne sidebar-------------------------------*/
 ul#menugeneral {
 float: right; 
 width: 130px; 
 height: auto; 
 background:right #CC0033 ; 
 margin:170px 30px 0 0; 
 padding: 0; 
 background-position: bottom; 
 font:bold 90% Verdana, Arial, Helvetica, sans-serif; 
 list-style-type: none; text-align: left; }
 
 #menugeneral li {
  display: inline; 
  margin:0 2px; 
  color: black }
  
 #menugeneral a {
 display: block; 
 margin: 5px 5px 5px 5px; 
 color : black;
 text-decoration: none; 
 line-height: 20px; 
 text-align: right; }
 
 #menugeneral a:hover { color: #AA0000; }
 
/* pied de page ----------------------------------------------------------------*/
div#footer{
width : 830px;
margin : 0 auto;
text-align: center;
}

/* menu vertical, texte brun */
ul#menuvertical {
margin:10px auto; padding: 0;
background-position: bottom;
font: 55% Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: center; 
}

#menuvertical li {
display: inline; margin:0 2px; color: #bf9fac }

#menuvertical a {
color : #800000; text-decoration: none; }

#menuvertical a:hover {
color: #cc0033; }

/*remarque texte blanc*/
#remarque {
	margin:10px auto; padding: 0;
    font: 60% Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: center; 
		}

#remarque a { color : #fff; text-decoration: none; }
#remarque a:hover { color: #cc0033; }
}

/*titres et paragraphes----------------------------*/

h2 { /*titre brun aligné centre*/
margin: 0 auto 50px auto;
font: bold 120% 'Trebuchet MS', 'Comic sans MS', sans-serif;
color: #ad0000;
text-align: center; }

/* fond rouge texte blanc centré 100, largeur 400px%*/
.ectindex { 
width: 400px;
margin: 0 auto;
padding:2px;
background: #cc0033 ; 
font: bold 90% Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
}

.annonce {
margin: 2px auto;
padding:2px;
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #fff; text-align: center; }
.annonce a {text-decoration:none; color: #fff;}
.annonce a:hover {text-decoration:none; color: #faefb9;}

.annoncerouge {
margin: 2px auto;
padding:2px;
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; text-align: center; }
.annoncerouge a {text-decoration:none; color: #cc0033;}
.annoncerouge a:hover {text-decoration:none; color: #faefb9;}

.contact {
margin: 2px auto;
padding:2px;
font: bold 80% Verdana, Arial, Helvetica, sans-serif;
color: #fff; text-align: center; }
.contact a {text-decoration:none; color: #fff;}
.contact a:hover {text-decoration:none; color: #faefb9;}

/* divers-------------------------------------*/
.rouge { color: #cc0033;} 
.t120 { font-size:120%;}
.lettrine2 {font-size:130%;}