﻿/*****************************************************
*                                                    *
*               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");	/* Bande verticale en bleu dégradé */
	background-repeat:repeat-x;
	background-attachment:fixed;
	font-family:"times";
	text-align:justify;
	font-weight:normal;
	font-style:normal;
	font-size:13pt;
	color:#000088;}							/* Tous les caractères sont en bleu foncé */

div.container
	{width: 900px;
	margin-top: 0px;
	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çons à créer un fond de page. */


div.top										/* Image du haut (patineurs...) */
	{height:320px;
	margin-top:30px;
	background-image:url("img/patinage_index.jpg");}


/********** MIDDLE : Contient les boutons de navigation et l'article **********/
div.motif_middle							/* Motif de l'article */
	{height: 400px;
	background-image:url("img/middle_2cadres.jpg");}

nav
	{width:244px;
	margin-left:32px;
	float:left;}							/*background-color:green; - For test only */
	
article
	{width:460px;
	margin-top:60px;
	margin-left:82px;
	float:left;}							/*background-color:red; - For test only */
	
	
/********** BOTTOM : Fin de page **********/
div.motif_bottom
	{height:45px;
	background-image:url("img/bottom_2cadres.jpg");}



/*****************************************************
*                                                    *
*          Navigation et 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 (Danse sur Glace) ---- style = img.top
* Les six boutons du milieu -------------- style = img.middle
* Le dernier bouton (Contact) ------------ style = img.bottom
* Le bouton "Home" est celui d'en haut à droite et d'en bas de l'article. */



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;}
		
img.home
	{border: 0px;
	border-spacing:0px;
	margin-top:30px;
	margin-left:155px;
	width: 150px;
	height: 40px;}



/*****************************************************
*                                                    *
*            Mise en forme de l'article              *
*                avec la balise <p>                  *
*                                                    *
******************************************************/


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