body {
/*  background-color: #CCCCCC;	*/
  background-image: url(images/fond11.jpg); 
  /* background-repeat:  no-repeat; */
  margin: 0;
  padding: 0;
  text-align:center;
}

body, td {
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  font-size: 10pt;
}
img {border: none;}
h1 {font-size: 150%; color : #0000CC;}
h2 {font-size: 130%; color : #CC0000;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}

a {
	color: #0033CC;
	text-decoration: none;
}
a:hover {
	color: #CC0000;
	text-decoration: underline;
}

#page {
	background-color:#E1E1E1;
	border: solid 1px #CCC;
	border-top: none;
	border-bottom: none;
	width: 900px;
	margin: 0 auto 16px auto;
/*	border-left: 1px solid #777;
	border-right: 1px solid #777; */
	padding: 0;
	text-align: left;
}

#top {
	width: 900px;
	height: 470px;
	background-color: #E1E1E1;
	border-top: 1px solid #CCCCCC; 
	border-bottom: none;
	margin:0;
	padding: 0px 0 0 0;
}

#mid {
	width: 900px;
	/* border-bottom: 1px solid #CCC;
	 background-image: url(images/bg2.png); 
	background-image: url(images/fond1.jpg);*/
	margin:0;
	padding: 0;
}

#side {
	/*background-image: url(images/fond1.jpg); */
	width: 10px;
	float: left;
	margin:0;
	padding: 0px 5px 5px 0px;
}


#main {
/*	background-image: url(images/fond1.jpg); */ 
	background-color: #E1E1E1;
	width: 800px;
	float: right;
	margin:0;
	padding: 0px 10px 0px 0px;
	text-align: left;
}

#break {
	clear: both;
}

#bot {
	width: 900px;
	background-image: url(images/bot1.jpg);
	border-bottom: 1px solid #777;
	/* background-color: #E1E1E1; */
	font-weight: bold;
	font-size: 120%;
	text-align: left;
	margin:0;
	padding: 10px 0px 0px 0px;
	color: #0000CC;
}

#bot1 {
	width: 900px;
	background-color: #e1e1e1;	
	
	/*background-image: url(images/bot1.jpg);
    border-bottom: 1px solid #777;
	font-weight: bold;
	font-size: 120%;*/
	
	text-align: center;
	margin:0;
	padding: 10px 0px 0px 0px;
	color: #0000CC;
}
#top h1 {
	margin: 0;
	padding: 0 0 0 10px;
	color: #000000;
	font-size: 22px;
}
#main h1 {
	margin: 0;
	padding: 0 0 0 10px;
	color: #000000;
	font-size: 22px;
}


#top h2 {
	margin: 0;
	padding: 4px 0 5px 10px;
	color: #666666;
	font-size: 15px;
}

.centered1 {
   display: block;
   margin-left: 410px;
}
.centered2 {
   display: block;
   margin-left: 280px;
}
.titre_rouge1 {font-size: 170%; color : #CC0000;}
.titre_bleu {font-size: 200%; color : #0000CC;}
.titre_bleu1 {font-size: 16px; color : #0000CC;}
.titre_rouge {font-size: 22px; color : #CC0000;}
.stitre_rouge {font-size: 17px; color : #CC0000;}
.petit {font-size: 10px;}

#sous-menu {
  background: #E1E1E1 url('images/sous-menu.png') repeat-y; /* Fond noir si images non chargées, mais il faut remettre l'image de fond de #page */
  float: left; /* Colonne de gauche sur la page */
  width: 222px; /* Largeur de l'image sous-menu-lien.png */
  list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
  margin: 2; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}

#sous-menu a {
  display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
  height: 32px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
  line-height: 30px; /* Centrer le texte verticalement sur la ligne */
  background: url('images/bouton41.jpg'); /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
  text-align: center; /* Centrer le texte sur la colonne du sous-menu */
  text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: #FFFFFF; /* Le fond devient bleu, donc le texte doit être blanc pour être visible */
  margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
}

#sous-menu a:hover, /* Au survol de la souris */
#sous-menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#sous-menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
   color: #000000; /* Le texte est bleu */
  background-color: #FFB400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
  background: url('images/bouton31.jpg');
}

#sous-menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}