body {
	width : 970px;					/* Largeur du site, aucune dimension ne doit excéder cette largeur */
	margin : auto;					/* Centré par rapport à la fenêtre */
	font-family : trebuchet MS;		/* Police de caractère */
	font-size : 14px;				/* Taille de la police */
	color : white;					/* Couleur */
}
/* Liens */
a , a img{
	color : white;					/* On redéfini la couleur */
	text-decoration : none;			/* Et on enlève le soulignement */
	border : 0;
}
/* Titres */
h3 {
	font-size : 14px;				/* Modification de la taille pour qu'elle soit commune à tous les navigateurs */
	text-decoration : underline;	/* Souligné */
	margin : 0;						/* Modif. des marges pour qu'elles soient communes à tous les navigateurs */
	padding : 0;
}





/* Le bloc qui contient la bannière */
#banniere {
	width : 970px;
	height : 149px;
	background-image : url('images_design/banniere.jpg');
}






/* Le menu horizontal du site */
#menu {
	width : 970px;
	height : 27px;
	background-image : url('images_design/background_menu.png');
}
/* La liste du menu */
#menu ul {
	margin : 0px;					/* Redéfinition des marges pour que la liste commence bien après la bordure gauche du design */
	margin-left : 22px;
	padding : 0px;
	list-style-type : none;
	text-align : center;			/* On centre chaque texte au milieu de son bouton */
}
/* Les éléments de la liste */
#menu li {
	float : left;
	width : 233px;					/* Taille de chaque bouton */
	margin-top : 4px;				/* Marge sup. pour centrer verticalement le texte */
}
/* Les liens du menu */
#menu a {
	display : block;				/* Bloc pour que l'on puisse cliquer sur tout le bouton */
	width : 233px;
	height : 20px;
}
/* Liens au survol de la souris */
#menu a:hover {
	margin-top : 2px;				/* Décalage du texte vers le bas */
}






/* Le bloc qui contient les news + les sports */
#corps {
	width : 980px;
	height : 430px;
	position : relative;
  left : -4px;
	background-image : url('images_design/background_corps.png');
	background-repeat : x;
}






/* Le bloc qui contient la news principale et celui qui contient les évènements. On leur applique le même style*/
#corps #news , #corps #evenements{
	width : 380px;
	height : 100px;
	float : right;
	margin : 0;
	margin-top : 75px;			/* Les marges pour ajustées la position du bloc */
	margin-right : 40px;
	display : inline;			/* Pour ne pas qu'IE double les marges */
	overflow : auto;			/* Apparition d'un ascenceur si le texte depasse du bloc */
	font-size : 13px;
}
/* Puis on redéfinit la hauteur du bloc des évènements */
#corps #evenements {
	height : 165px;
}



#corps #evenements ul {
	margin : 0;
	padding : 0;
	cursor : pointer;			/* L'apparence du curseur de la souris ne change pas au passage de la souris sur les éléments de la liste */
}

#corps #evenements a:hover , #corps #colonne_sport a:hover {
	text-decoration : underline;
}






/* Le bloc qui contient les liens vers les disciplines */
#corps #colonne_sport {
	width : 400px;
	height : 380px;
	float : left;
	margin-top : 30px;
	margin-left : 45px;
	display : inline;			/* Pour qu'IE ne double pas les marges */
	color : black;
}


/* Les liens vers les détails des sports. Ils servent de bloc au nom de la discipline et à la photo */
#corps #colonne_sport a {
	display : inline;			/* Pour qu'IE ne double pas les marges */
	width : 180px;
	height : 60px;
	font-size : 12px;
	color : black;
	line-height : 40px;			/* Pour décaler le texte en face des images sans tout dérégler sur IE */
}


/* Ici on utilise un tout petit bloc qui contiendra l'affiche de 300x300
On se sert de ce mini bloc pour placer le coin supérieur gauche de l'image. A la base il est positionné entre "colonne_sport" et les blocs de droites.
Avec position relative on le déplace a l'intérieur de "colonne_sport". Ensuite on met une image de 300x300 dans ce bloc. L'image déborde largement du bloc mais elle ne décale pas les autres blocs */
#corps #bloc_affiche_evenement {
	width : 10px;				/* Taille du mini bloc */
	height : 10px;
	float : left;				/* Flotte à gauche pour venir se placer à droite de "colonne_sport" */
	margin-top : 250px;			/* Marge supérieure pour le descendre au milieu de la page */
	position : relative;		/* Position relative pour pouvoir le décaler a l'intérieur de "colonne_sport" */
	right : 70px;
	top : -50px;
}


/* La vrai image de l'affiche, qui est contenue dans le bloc "feinteur" décrit au-dessus
Ce bloc fait les dimensions de l'affiche et déborde de son conteneur */
#corps #bloc_affiche_evenement #image_affiche_evenement {
	width : 150px;
	height : 200px;
	position : absolute; 		/* En absolu pour que IE ne décale pas le reste des blocs à cause de l'affiche */
	border : 1px solid black;
	padding : 2px;
	visibility : hidden;		/* A la base il est caché */
}







/* Le bloc qui contient la liste horizontale qui sert d'onglets */
#corps #bloc_onglets
{
	width : 580px;				/* Largeur du trait blanc en dessous des onglets */
	margin-left : 60px;		/* Marge ext. gauche des onglets par rapport au bord de la page */
	clear : both;
	margin-top : 35px;
}

/* La liste horizontale dont les éléments servent d'onglets */
#corps #onglets
{
    list-style-type : none;
	padding-left : 10px;		/* Distance entre le premier onglet et le bord gauche du bloc blanc */
    padding-bottom : 24px; 		/* Hauteur du trait blanc en dessous des onglets */
    border-bottom : 1px solid white;	/* Le trait blanc en dessous des onglets est en fait la bordure basse de la liste */
    margin : 0;
}

/* Les éléments de la liste (les onglets à proprement parler) */
#corps #onglets li
{
    float : left;
    height : 21px; 				/* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    margin : 2px 4px 0 2px;  	/* Marges ext. des onglets les un par rapport aux autres */
    border : 1px solid white;	/* Bordure des onglets */
	padding : 0px 10px;			/* Marges droite et gauche à l'intérieur des onglets de 10 px */
	cursor : pointer;			/* Curseur comme pour les liens au passage de la souris */
}

/* L'onglet qui est en train d'etre lu par le visiteur */
#corps #onglets li.active
{
    border-bottom: 1px solid #4067b3;		/* La bordure basse est de la couleur du fond pour donner l'illusion qu'il n' a pas de bordure basse */
}

/* Le bloc qui affiche le texte pour chaque onglet */
#bloc_contenu
{
	width : 550px;
	height : 100px;
	border-left : 1px solid white;
	border-right : 1px solid white;
	border-bottom : 1px solid white;
	margin-left : 60px;
	padding : 15px;
	overflow : auto;
}


/* Le bloc qui contient les infos extraites de la base. Il sert à les stocker quand elles ne sont pas affichées dans #bloc_contenu */
#corps #infos_a_afficher
{
	width : 1px;			/* On lui donne une mini-dimension */
	height : 1px;
	visibility : hidden;	/* On cache le bloc et ce qui dépasse de celui-ci */
	overflow : hidden;
}




#corps #president_section, #corps #photos_section, #corps #infos_section
{
	float : left;
	display : inline;
	width : 150px;
	height : 160px;
	margin : 20px 0px 0px 40px;
	text-align : center;
}

#corps #photos_section
{
	width : 260px;
	margin-left : 80px;
	border : 1px solid white;
}

#corps #infos_section
{
	width : 300px;
	margin-left : 80px;
	text-align : left;
}
#corps #infos_section .texte_indenté
{
	float : left;
	margin: 5px 0 10px 25px;
}
#corps #infos_section .texte_non_indenté
{
	display : block;
	clear : both;
}
#corps #infos_section a:hover
{
	text-decoration : underline;
}

/* La photo du président de la section */
#corps #president_section img
{
	display : block;
	margin : auto;
	width : 100px;
	height : 120px;
}

/* Le bloc qui contient le calendrier, on l'utilise pour pouvoir donner une hauteur et afficher les scrollbar si ça dépasse */
#corps #conteneur_calendrier {
  width : 820px;
  height : 350px;
  margin : auto;
  padding : 1px 0 0 1px; /* Pour voir la bordure haute du tableau sous FF quand il y a la scrollbar */
  overflow  : auto;
}

/* Le tableau qui contient le calendrier */
#corps table#calendrier{
  width : 800px;
  border-collapse : collapse;
}

#corps table#calendrier tr {
  height : 25px;
}

#corps table#calendrier td {
  border : 1px solid #FFFFFF;
  padding : 5px;
}

#corps table#calendrier td.date {
  width : 100px;
  text-align : center;
}

#corps table#calendrier td.mois_en_cours {
  background-color : #638ad2;
}



#pied_de_page {
	width : 970px;
	height : 20px;
	background-image : url('images_design/background_pied_de_page.png');
}