/*****************************************************
*                                                    *
*               Body et Container                    *
*                                                    *
******************************************************
*
* Ces deux styles, Body et Container, sont communs à
* toutes les pages.*/

body
	{padding:0;
	margin:0;
	background-color:RGB(231,206,214);
	background-image:url("img/fond.jpg");
	background-repeat:repeat-x;
	background-attachment:fixed;
	font-family:"times";
	text-align:justify;
	font-weight:normal;
	font-style:normal;
	font-size:13pt;
	color:#000088;}			/* Couleur des caractères de la page (bleu foncé) */

div.container
	{width: 900px;
	margin-top: 30px;
	margin-bottom:40px; 
	margin-left: auto;
	margin-right: auto;
	vertical-align:top;}



/*****************************************************
*                                                    *
*               Mise en forme de la page             *
*                                                    *
******************************************************
*
* Le container de la page entière contienent 3 sections :
* TOP, MIDDLE et BOTTOM.	
* Les motifs sont des petites bandes horizontales répétées
* "n" fois de façon à créer un fond de page. */


/********** TOP : Contient l'image du haut (clavier, patineurs...) **********/
div.top
	{height:320px;
	margin:0px;
	background-image:url("img/index.jpg");}


/********** MIDDLE : Contient les boutons de navigation et l'article **********/
div.motif_middle
	{background-image:url("img/middle_2cadres.jpg");
	height: 265px;}
	
nav
	{width:244px;
	height:270px;
	margin-left:32px;
	float:left;
	/*background-color:green;*/}
		
article
	{width:460px;
	height:200px;
	margin-top:0px;
	margin-bottom:20px;
	margin-left:82px;
	float:left;
	/*background-color:red;*/}


/********** BOTTOM : Fin de page **********/
div.motif_bottom
	{height:45px;
	background-image:url("img/bottom_2cadres.jpg");}




/*****************************************************
*                                                    *
*            Mise en forme de l'article              *
*                avec les balises <p>                *
*                                                    *
******************************************************
*
* Les balises <p> ci-dessous se trouvent dans la partie
* "article". */


p.title
	{margin-top:20px;
	margin-left:0px;
	margin-bottom:15px;
	font-style:italic;
	font-size:20pt;
	color:#777777;}			/* Gris foncé */

p
	{margin-top:10px;
	margin-left:0px;
	margin-bottom:0px;
	text-indent:30px;}

p.signature
	{margin-top:0px;
	margin-left:270px;
	font-style:italic;
	font-size:14pt;
	color:#777777;}			/* Gris foncé */
	
		
	
/*****************************************************
*                                                    *
*               Images des boutons                   *
*                                                    *
******************************************************
*
* Dans la partie <nav> (en violet foncé), les boutons sont
* répartis en trois groupes car les espaces top et bottom sont
* différents d'un bouton à l'autre. Les trois styles sont :
* - Le bouton du haut (patinage artistique) ------ style = img.top
* - Les trois boutons du milieu ------------------ style = img.middle
* - Le dernier bouton (Ma Page Perso) ------------ style = img.bottom */


img.top
	{border: 0px;
	border-spacing: 0px;
	margin-left:23px;
	margin-top: 12px;
	margin-bottom: 2px;
	width: 200px;
	height: 40px;}
	
img.middle
	{border: 0px;
	border-spacing:0px;
	margin-left:23px;
	margin-top: 0px;
	margin-bottom:2px;
	width: 200px;
	height: 40px;}
	
img.bottom
	{border: 0px;
	border-spacing:0px;
	margin-left:23px;
	margin-top: 0px;
	width: 200px;
	height: 40px;}