body
{
	margin: 10px 0;
	padding: 0;
	text-align: center;
	background-color:#990000;
	color:#222222;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, sans-serif;
	font-size: 12px;
}
a{color:#FF6600; text-decoration:none;}
a:link{color:#FF6600; text-decoration:none;}
a:visited{color:#FF6600; text-decoration:none;}
a:hover{color:#FF6600; text-decoration:underline;}
/* Marges haute et basse à 10px du bord du navigateur...Marges droite et gauche à 0 */
/* Padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* Text-align: center ; pour Internet Explorer, Pour centrer les éléments de type block avec le navigateur */


div#conteneur{
	width: 770px;
	margin: 0 auto;
	text-align: left;
	background-image: url(images/arrplancontenu.jpg);
	background-repeat: repeat-y;
	padding:0;
}
/* Largeur de la zone conteneur qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; c'est la méthode correcte pour centrer les éléments de type block (comme les divisions) */
/* Rétablir l'alignement à gauche que nous avons changé plus haut */
div#conteneur2
{
	width: 760px;
	border: 1px solid #666666;
	background-color: #D9D7D8;
	background-image: url(images/arrplanimage.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* Zone de contenu effectif avec la marge grise cette zone est 10 pixels plus petite que son parent pour tenir compte de l'ombre portée */


/*************************************************************************************************************/
/*Partie header*********************************************************************************************
***************************************************************************************************************/


h1#header
{
	height: 206px;
	background-image: url(images/arrplanheader.gif);
	margin: 0px;
	padding: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FF9900;
}



/* Hauteur de la partie header et arrière plan dégradé. Cette partie comprend le logo et le slogan image */


/*************************************************************************************************************/
/*Partie navigation*********************************************************************************************
***************************************************************************************************************/
ul#menu
{
	height: 22px ;
	margin: 0 ;
	padding: 0 ;
	background: url(images/arrplannavig.gif) repeat-x 0 0px ;
	list-style-type: none ;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}
ul#menu li a
{
	width: 120px ;
	line-height: 22px ;
	font-size: 14px ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid;
}
ul#menu li a:hover
{
	background: url(images/arrplannavig_over.gif) repeat-x 0 0 ;
}
p#navigation{
	text-align: right;
	padding-right:15px;
	margin-top:5px;
	color:#990000;
	font-size: 9px;
	line-height: 16px;
	vertical-align: middle;
}
p#navigation a{
color:#990000;
text-decoration:none;
}
p#navigation a:link{
color:#990000;
text-decoration:none;
}
p#navigation a:hover {
color:#990000;
text-decoration:underline;
}



/*************************************************************************************************************/
/*Partie contenu*********************************************************************************************
***************************************************************************************************************/


pre
{
	overflow: auto ;
}

/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
	width: 636px ;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
			

div#texte{
width:560px;
float:right;
text-align: justify;
}
/* Partie droite de la zone contenu qui accueille le texte */

div#contenu h2{
	background-image: url(images/arrplanh22.gif);
	background-repeat:no-repeat;
	background-position: left;
	padding-left: 70px;
	color:#666666;
	line-height:25px;
	margin-top: 25px;
	font-family: "Trebuchet MS", "Century Gothic", Geneva, Arial, sans-serif;
	font-size: 17px;
}
/* Titre H2 avec l'image de fond et le trait de soulignement*/


div#texte p {
padding-right: 15px;	
}
/*L'alignement des paragraphes*/


/*************************************************************************************
La manchette ****************************************************************************
*************************************************************************************/

div#menugauche{
	width: 200px;
	float: left;
	background-color: #d9d7d7;
	margin-top: 0px;
	padding-left:0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	text-align: center;
}
div#menurubrique {
	margin-top:30px;
	background-image: url(images/arrplanmanchette.gif);
	background-repeat: repeat-y;
	background-position: center;
	margin-bottom: 15px;
}
#menurubrique a:link {color: #444444; text-decoration: none;}
#menurubrique a:visited {color: #333333; text-decoration: none;}
#menurubrique a:hover {color: #990000; text-decoration: underline;}

div#menurubrique h2 {
	background-image: url(images/hautmanchette.gif);
	background-repeat: no-repeat;
	background-position: center;
	color: #FFFFFF;
	line-height: 44px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
	font-size: 14px;
	font-weight: bold ;
	font-family: "Century Gothic", "Trebuchet MS", Geneva, Arial, sans-serif;
	}
div#menurubrique p{
	margin:0;
	padding-top:0px;
	padding-bottom:3px;
}
.basmanchette {
	background-image: url(images/basmanchette.gif);
	background-repeat: no-repeat;
	vertical-align: bottom;
	background-position: center bottom;
	height: 12px;
}


/* Partie gauche de la zone contenu qui accueille les menus */





/*************************************************************************************
Le Footer****************************************************************************
*************************************************************************************/

p#footer{
	text-align:center;
	margin:0;
	height:17px;
	background-color:#999999;
	clear:both;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FF9900;
	color: #FFFFFF;
}
#footer a {
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:link {
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:hover {
	color: #993300;
	/*text-decoration: underline;*/
}
/*Couleur arrière plan et alignement du footer*/



/*************************************************************************************
Mise en forme du texte et des paragraphes ********************************************
*************************************************************************************/

#texte a{
color: #FF6600;
	text-decoration: none;
}
#texte a:link {
	color: #FF6600;
	text-decoration: none;
}
#texte a:hover {
	color: #333333;
	text-decoration: underline;
}
.soustitre {
	font-size: 12px;
	font-weight: bold;
	color: #FF6600;
}
.souligne {
	text-decoration: underline;
}
.orangeclair {
color:#990000 ;
font-size:11px;
font-weight:bold;
}
#cadeau {
	width: 400px;
	border: 2px dotted #EE840E;
	text-align: right;
	vertical-align: middle;
	font-weight: bold;
	margin-left: 50px;
}
.epais {
	font-size: large;
}