@charset "windows-1252";
		body
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0
On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body
On utilise text-align: center ; pour Internet Explorer, 
c'est la seule façon de centrer les éléments de type block avec ce navigateur
On a ajouté de quoi mettre une police de caractère et une couleur de fond */
		{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.7em "Verdana", helvetica, sans-serif ;
			color : #0e004f;
			background: #FFF8DC ;
		}
		
		#conteneur
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels
margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), 
nous centrons donc cette division.
Il faut rétablir l'alignement à gauche que nous avons changé plus haut
Une bordure grise autour de l'ensemble de la page
Une couleur blanche pour le fond de celle-ci */
		{
			width: 770px ;
			margin: 0 auto ;
			text-align: left ;
			border: 2px solid #c0c0c0 ;
			background: #fff ;
		}
		
		#wrap
/* élément qui sert à garantir le bon positionnement du pied de page
quelle que soit la hauteur du contenu de la page*/ 
		{
			overflow:hidden;
		}
		
		#header
/* On définit la hauteur de la partie header, contenant le titre du site
Une image de fond correspondant aux pixels de la hauteur */
		{
			height: 151px ;
			margin: 0 ;
			background: url("../img/logo_header.jpg") no-repeat left top ;
			background-color: #0e004f;
		}
		
		
		#header a
/* On donne les mêmes dimensions au lien, chose possible grâce à la propriété display: block ; 
qui transforme le lien en élément de type block, auquel on peut donner des propriétés de taille.
Le text-indent négatif est fait pour pouvoir cacher le texte hors de la page, ce que nous voulons.
Ainsi il reste exploitable pour les syntèses vocales */
		{
			width: 400px ;
			height: 70px ;
			display: block ;
			position: relative ;
			left: 350px ;
			top: 15px ;
			text-indent: -5000px ;
		}
		
		#menu
/* On donne une hauteur au menu, correspondant à 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 sur une seule image par décalage de niveau */
		{
			height: 35px ;
			margin: 0 ;
			padding: 0 ;
			background: url("../img/bg_menu_.gif") repeat-x 0 -25px ;
		}
				
		#menu li
/* On rend les li en flottant pour pouvoir les afficher horizontalement, 
on cache les puces, et on centre le texte */
		{
			float: left ;
			list-style-type: none ;
			text-align: center ;
		}
		
		#menu li a
/* 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 ; */
		{
			width: 190px ;
			line-height: 25px ;
			font-size: 1em ;
			font-weight: bold ;
			letter-spacing: 0.5px ;
			color: #fff ;
			display: block ;
			text-decoration: none ;
			border-right: 2px solid #0e004f ;
		}
  		
		#menu li a:hover
/* Et pour finir on décale l'image de fond au passage
de la souris pour laisser aparaître l'état survolé de l'image*/
		{
			background: url("../img/bg_menu_.gif") repeat-x 0 0 ;
		}

		#sous-menu
/* On ajoute le bloc de sous-menu sur le côté gauche 
il contient une image décorative */
		{
			padding: 17px 0px 0 0px ;
			margin-top:0px;
			background: url("../img/bg_oxade_l.jpg") no-repeat 40%;
			float:left;
			width: 180px ;
			height:450px;	
		}
		
		#sous-menu ul
/* on met en place le style de la liste du sous-menu */
		{
			margin: 0 ;
			padding: 0px 10px 0 10px ;
		}

		#sous-menu li
		/* les éléments de la liste sont alignés à gauche */
		{
			list-style-type:none;
			background-image:url("../img/next_button.gif");
			background-repeat:no-repeat;
			background-position:0 5px;
			padding-left:15px;
			text-align: left ;
			line-height: 1.7em ;
			font-weight: normal ;
			color: #ff0000 ;
			text-decoration: none ;
		}
		
		#sous-menu li a
/* on met en place le style des liens de la liste du sous-menu */
		{
			line-height: 1.7em ;
			font-weight: bold ;
			color: #990000 ;
			text-decoration: none ;
		}
		
		#sous-menu li a:hover
		/* on définit le comportement lorsque la souris passe sur le lien */
		{
			color: #EE0000 ;
		}

		.logoo
		/* logo avec O en rouge */
		{
			color: #cc0000 ;
		}
		
		.logox
		/* logo avec XADE Consulting en bleu */
		{
			color: #0e004f ;
		}
		
		#contenu
		/* le bloc du contenu est créé à la suite du bloc du sous-menu
		on crée un espace à gauche et à droite du contenu */
		{
			margin-left:180px;
			padding: 15px 10px 0 10px ;
			width: 560px ;
		}
		
		.titre1
/* Mise en forme du titre de page, (une petite image optionnelle), on décale le texte en fonction de l'image,
on donne un couleur au texte et on met une bordure basse */
/* on met en place une image de fond, style "bannière" derrière le titre */
		{
			padding: 0px 0px;
			line-height: 60px;
			font-size: 1.3em ;
			color: #0e004f ;
			font-weight: bold;
			margin: 0 ;
			/* background: url("../img/titre1.jpg") no-repeat right top ; */

		}
		
		.index_texte_large 
/* Paragraphe en large (page index) */ 
		{
			font-size: 1.3em; 
		}
		
		.index_texte_xlarge 
/* Paragraphe en large (page index) */ 
		{
			font-size: 1.4em; 
			font-weight: bold; 
			font-style: italic
		}
		
		.index_texte 
/* Paragraphe en normal (page index) */ 
		{
			font-size: 1.2em; 
		}
		#contenu h3
/* Titres de paragraphes de page, idem que pour le titre h2 avec une ligne sous le titre */
		{
			margin-left: 0px ;
			padding-left: 0px ;
			font-size: 1em ;
			border-bottom: 1px solid #0e004f ;
			color: #0e004f ;
		}
		
		#contenu p
/* On rend les paragraphes plus propres, alignement justifié,
 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
		{
			text-align: justify ;
			text-indent: 0em ;
			line-height: 1.7em ;
		}
		
		#contenu ul
/* on met en place le style de la liste du contenu */
		{
			margin: 0 ;
			padding: 0 0px 0 25px ;
		}
		#contenu li
		{
			list-style-type:none;
			background-image:url("../img/puce_bleue_carree_5.gif"); /* puce graphique */
			background-repeat:no-repeat;
			background-position:0 7px;
			padding-left:15px;
			margin-left: -2em ;
			line-height: 1.5em ;
			text-align: justify ;
		}
		
		#contenu a
/* On met en forme les liens contenu dans la page */
		{
			color: #0e004f ;
			font-weight: bold;
			text-decoration: none;
		}
		#contenu a:hover
		{
			color: #0000ff ;
			font-weight: bold;
			text-decoration: underline;
		}
		
		#contenu table 
/* les tableaux dans la page du site */		
		{
			border-collapse:collapse;
			width:100%;
			margin:auto;
		}
		#contenu caption /* titre du tableau */ 
		{
			font-weight:bold
		}
		#contenu th, td  /* les cellules */
		{
			border:1px solid #c0c0c0;
		}
		#contenu td /* le contenu */
		{
			text-align:left;
			padding:10px 10px 10px 10px;
		}

		#pied_page
/* On met en forme le pied de page
avec une image de fond qui se répète */
		{
			position: relative ;
			width: 770px ;
			height: 17px ;
			text-align: center ;
			margin: 0px auto ;
			background: url("../img/bg_footer.gif") repeat-x;
			padding: 17px 0px 0px 0px;
			color: #fff ;

		}
		
		#pied_page a
/* On met en forme les liens du pied de page */
		{
			width: 770px ;
			height: 17px ;
			color: #fff ;
			font-weight: bold;
			text-decoration: none;
		}
		
		#pied_page a:hover
		{
			width: 770px ;
			height: 17px ;
			color: #fff ;
			font-weight: bold;
			text-decoration: underline;
		}									   
		
		pre
/* On met en forme le style "pre" qui sert à un "encart" */
		{
			overflow: auto ;
			background: #eeeeee ;
			border: 2px solid #c0c0c0 ;
			padding: 5px 0 0 5px ;
			font-size: 1.2em ;
		}

		pre span
		{
			color: #560 ;
		}
		
		pre span.comment								 
/* On met en forme les commentaires du pre */
		{
			color: #b30000 ;
		}