/*****************************************************
*                                                    *
*               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;}



/**************************************************
*
*              Onglets et Bouton(s)
*
**************************************************/

nav
	{height:40px;							/* Hauteur des onglets */
	text-indent:35px;						/* Position du premier onglet (danse)*/
	background-color:RGB(130,50,130);}		/* Couleur de fond de derrière les onglets */

img
	{width:100px;							/* Largeur des deux boutons Menu */
	height:40px;}							/* Hauteur des deux boutons Menu */




/*****************************************************
*                                                    *
*               Mise en forme de la page             *
*                                                    *
******************************************************
* Le container de la page entière contient 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:300px;
	margin-top:30px;
	background-image:url("img/patinage_pages.jpg");}

div.motif_middle							/* Motif de l'article */
	{padding-top:1px;
	padding-bottom:40px;
	background-image:url("img/middle_1cadre.jpg");}

div.motif_bottom							/* Motif en fin d'article */
	{height:68px;
	background-image:url("img/bottom_1cadre.jpg");}



/**************************************************
*
*           Bouton du haut "Menu"
*
***************************************************
* Ce bouton se trouve en haut à droite de certaines pages. */

div.menu_button_right
	{margin-top:15px;
	margin-bottom:20px;
	margin-right:50px;
	text-align:right;}



/**************************************************
*
*                     Article
*
**************************************************/

article
	{margin-top: 0px;
	margin-bottom:0px;
	margin-left: 80px;
	margin-right: 80px;
	font-family:"times";
	font-size:14pt;
	font-weight:normal;
	text-align:justify;
	color:#000088}	



/**************************************************
*
*                  Pages avec vidéos
*
***************************************************
* Les images/vidées de chaque patineur sont appelées"Item".
* Les items sont regroupés deux par deux sur une même ligne (line).
* Un item comprend une image (vignette) et du texte. */


/********** Balises <div> **********/
div.center					/* Centrage du titre, de la vidéo et du bouton Menu en bas de l'article */
	{margin-top:0px;
	margin-bottom:10px;
	text-align:center;
	font-size:14pt;}
	
div.line
	{width:745px;
	height:92px;
	margin-top:11px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;}
	
div.item
	{width:350px;
	height:102px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:12px;
	float:left;
	text-align:left;
	background-color:#CCCCAA;}

div.vignette
	{width:140px;
	height:96px;
	margin-top:3px;
	margin-left:5px;
	float:left;
	text-align:left;}

div.text
	{width:200px;
	height:90px;
	float:left;
	font-family:"arial";
	text-align:left;}


/********** Balises <img> (dans le <div class="item">) **********/
img.vignette
	{width:120px;
	height:80px;
	margin-top:7px;
	margin-left:6px;
	border:1px solid black;}


/********** Balises <p> (dans le <div class="text">) **********/
p.title
	{margin-top:8px;
	margin-bottom:5px;
	margin-left:0px;
	margin-right:0px;
	text-align:left;
	text-indent:0px;
	font-size:14pt;
	font-weight:bold;
	color:#000088}

p.text
	{margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	font-size:12pt;
	text-align:left;
	text-indent:0px;
	color:#000088}
	
	
	
/**************************************************
*
*              Page spéciale "Music"
*
**************************************************/

p.music
	{margin-left:50px;
	margin-bottom:2px;
	text-align:left;}



/**************************************************
*
*               Balises originales
*
***************************************************
* Ces balises n'ont pas besoin de complément du type
* class="xxxx". Ce sont des classes CSS par défaut.*/

h1
	{margin-top:0px;
	margin-bottom:10px;
	text-indent:0px;
	font-family:"arial";
	font-size:20pt;
	font-weight:bold;
	text-align:center;}

h2
	{margin-top:50px;
	margin-bottom:25px;
	text-indent:0px;
	font-family:"arial";
	font-size:16pt;
	font-weight:bold;
	text-align:center;}
	
h4
	{margin-left:50px;
	margin-right:40px;
	margin-top:20px;
	margin-bottom: 6px;
	font-weight:bold;
	font-family:"arial";
	font-size:14pt;
	color:#0000EE}

p
{margin-left:50px;
margin-right:40px;
margin-top:0px;
margin-bottom:9px;
text-indent:30px;
font-size:14pt;}

ul
{margin-top:0px;
margin-right:40px;
margin-left:70px; 
text-indent:0px;
text-align:justify;}

video
{width: 560px;
height:315px;
border:1px solid black;
background-color:black}