/***** menu CSS *****/

/*
###########################################
  COULEURS UTILISEES
	Noir : #000
	Blanc : #fff
	
	Gris très foncé (3) : #333
	Gris foncé (2) : #535353
	Gris foncé (1) : #666
	
	Gris clair (3) : #ccc
	Gris clair(2) : #ddd
	Gris très clair (1) : #e2e2e2
	
	Violine alekhine : #8088f7
	Bleu alekhine : #73c3ff
	Bleu soutenu : 5a8ad0
	Bleu très pâle : #f3f7fb
	
	Rouge alekhine : #f00
	Or : #960
	Marron foncé : #2a0000
	
  POSITIONNEMENT
	top, right, bottom, left
	Pour centrer horizontalement : 0 auto 0 auto

  CSS 3 : TEXTE OMBRE SOUS LE TEXTE (seulement Safari)
	text-shadow: -3px 3px 5px #A0A0A4;
	Liste des fonctions "ombre portée sous du texte" :
		1. décalage en largeur ;
		2. décalage en hauteur ;
		3. épaisseur ;
		4. couleur
	fonctionne aussi avec :first-letter et :first-line
	
  BOX SHADOW
  	Paramétrage sur www.xul.fr/css/box-shadow.php

###########################################
*/
	
body {
	background: #f3f7fb url(images/background.jpg) repeat-x top left;                             /* couleur : bleu très pâle */
	font-family: Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	/* color: #333; */
	margin: 20px auto 0 auto;                  /* top, right, bottom, left */   /* 0 auto 0 auto pour centrer */
	padding: 0;
}

/* Hack pour ie6 et ie7 :
	IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. 
	It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6
*/

IE7 {
	css2: auto;
}

/*
###########################################
  LIENS
  Pseudo-formats pour les liens
	:link =    pour les liens aux pages qui n'ont pas encore été visitées
	:visited = pour les liens aux pages qui ont déjà été visitées
	:hover =   pour les liens sur lesquels l'utilisateur passe avec la souris
	:active =  pour les liens en train d'être cliqués
  Notation
	:link, :visited, :hover, :active
###########################################
*/

/*
###########################################
  BALISES
###########################################
*/

h1 {
	color: #8088f7;                            /* couleur : violine alekhine */
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.90em;
	font-weight: bolder;
	text-align: center;
	text-transform: uppercase;
	margin: 12px 0 12px 0;                         /* top, right, bottom, left */
	/* line-height: 3em; */
/* Visible seulement sur SAFARI */
	text-shadow: #A0A0A4 -3px 3px 5px;
/*	Contour des lettres
	-webkit-text-stroke: 1px #001AC8;
*/
}

h1 > p:first-child {
	margin: 24px 0px 0px 0px;
}

h2 {
	color: #8088f7;                            /* couleur : violine alekhine */
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: bolder;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	margin: 17px 0 12px 0;                         /* top, right, bottom, left */
/* Visible seulement sur SAFARI */
	text-shadow: #A0A0A4 -2px 2px 5px;
}

h2 > p:first-child {
	margin: 12px 0px 0px 0px;
}

h3 {
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #000;                               /* couleur : noir */
	/* font-size: 1.4em; */
	font-weight:bold;
	margin: 12px 0 6px 0;                         /* top, right, bottom, left */
	padding: 6px 0;
/* Visible seulement sur SAFARI */
	text-shadow: #A0A0A4 -2px 2px 5px;
}

h3 > p:first-child {
	margin: 0px 0px 6px 0px;                         /* top, right, bottom, left */
	font-style:italic;
}

/* hr {
	clear: both;
	color: #fff;                               /* couleur : blanc */
	/* background-color: #fff;                    /* couleur : blanc */
	/* height: 1px;
	border: 0;
	margin: 0;
	padding: 0;
}    */

img {
	border: none;
}

img.pho {                                        /* p.pho img */
	margin: 0 0 0 10px;                                /* top, right, bottom, left */
}

.photo_droite {
	float: right;
	margin: 10px;
	padding: 0;
}

.photo_gauche {
	float: left;
	margin: 10px;
	padding: 0;
}

textarea {
	width: 97%;
}

form {
	margin: 0;
	padding: 0;
}

sup {
	font-size: 0.75em;
}

sub{
	font-size: 0.75em;
}

/*
###########################################
  CLASSES
###########################################
*/

.clear {
	clear:both;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.espace_avant_six {
	margin: 6px 0px 0px 0px;                       /* top, right, bottom, left */
}

.espace_avant_douze {
	margin: 12px 0px 0px 0px;
}

.espace_avant_dix_huit {
	margin: 18px 0px 0px 0px;
}

.espace_avant_vingt_quatre {
	margin: 24px 0px 0px 0px;
}

.violine_alekhine {
	color: #8088f7;                               /* couleur : violine alekhine */
}

.bleue_alekhine {
	color: #73c3ff;                               /* couleur : bleu alekhine */
}

.rouge_alekhine {
	color: #f00;                                  /* couleur : rouge alekhine */
}

.gras {
	font-weight:bolder;
}

.corps_12 {
	font-size:12px
}

.corps_14 {
	font-size:14px
}

.corps_16 {
	font-size:16px
}

.corps_18 {
	font-size:18px
}

.corps_20 {
	font-size:20px
}

.sans_bordure {
	border: 0px;
}

.aligner {
	vertical-align: -50%;
}

.traits_ht_bas_violine {
	margin: 11px 0px 11px 0px;                       /* top, right, bottom, left */
	border-top: 1px solid #8088f7;                   /* couleur : violine alekhine */
	border-bottom: 1px solid #8088f7;                /* couleur : violine alekhine */
	line-height: 1.3em;
}

.clignotant_bleu {
	text-decoration: blink;
	color: #73c3ff;                                  /* couleur : bleu alekhine */
}

.clignotant_violine {
	text-decoration: blink;
	color: #8088f7;                                  /* couleur : violine alekhine */
}

.clignotement {
	text-decoration: blink;
}

.identification { 
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 14px; 
	font-weight: bold; 
	color: #535353; 
	background-color: transparent; 
	text-decoration: none;
}

.image_ombre {
	box-shadow: 4px 4px 7px #888;
	-webkit-box-shadow: 4px 4px 7px #888;
	-moz-box-shadow: 4px 4px 7px #888;
	border: 5px solid #fff;
	padding: 0;
	margin: 0;
}

/*
###########################################
  PAGE DANS SA TOTALITE
###########################################
*/

div#total {
	font-size: 1em; /* 0.7 */
	margin: 0 auto; 
	width: 962px;
}

/*
###########################################
  HEADER
###########################################
*/

div#header {
	overflow: hidden;
	width: 962px;
}

div#header h1 {
	height: 167px;
	margin: 0;
	padding: 0;
}

/*
###########################################
  CONTENU
###########################################
*/

div#content {
	background: url(images/fond.png) repeat-y top left;
	overflow: hidden;
	width: 962px;
}

/*
###########################################
  FIL D'ARIANE
###########################################
*/

div#content p.ariane {
	color: #666;                                   /* couleur : gris foncé (1) */
	font-size: 0.8em;
	margin: 3px 20px 3px 0;                        /* top, right, bottom, left */
	text-align: right;
}

div#content p.ariane a:link, a:visited {
	color: #666;                                   /* couleur : gris foncé (1) */
	font-size: 0.8em;
	text-align: right;
	text-decoration: none;
}

div#content p.ariane a:hover, a:active {
	font-size: 0.9em;
	color: #73c3ff;                                /* couleur : bleu alekhine */
	text-align: right;
	text-decoration: underline;
}

/*
###########################################
  MENU
###########################################
*/

div#content div#left {
	float: left;
	margin-left: 20px;
	padding: 6px;
	width: 200px;
}

div#content div#left h2 {
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #fff;                                    /* couleur : blanc */
	font-size: 1.2em;
	padding: 7px 0 0 34px;                          /* top, right, bottom, left */
	min-height: 25px;
	width: 154px;
}

h2.club {
	background: #5a8ad0 url(images/club-echec.jpg) no-repeat top left;                  /* couleur : Bleu soutenu */
}

h2.competition {
	background: #5a8ad0 url(images/competition-echec.jpg) no-repeat top left;            /* couleur : Bleu soutenu */
}

h2.partenaires {
	background: #5a8ad0 url(images/partenaires-club-echec.jpg) no-repeat top left;        /* couleur : Bleu soutenu */
}

div#content div#left h3 {
	margin-top: 10px;
}

div#content div#left ul {
	font-size: 0.9em;
	margin: 0 0 25px -10px;                        /* top, right, bottom, left */
}

div#content div#left ul li {
	list-style-type: none;
	color: #333;                                     /* couleur : gris très foncé (3) */
	text-decoration: none;
	line-height: 1.3em;
}

div#content div#left ul li.page_en_cours {
	color: #8088f7;                                  /* couleur : violine alekhine */
	font-weight: bold;
	text-decoration: none;
	line-height: 1.3em;
}

div#content div#left ul li a:link, a:visited {
	color: #535353;                                   /* couleur : gris foncé (2) */
	font-weight: bold;
	text-decoration: none;
	line-height: 1.3em;
}

div#content div#left ul li a:hover, a:active {
	color: #73c3ff;                                   /* couleur : bleu alekhine*/
	font-weight: bold;
	text-decoration: underline;
	line-height: 1.3em;
}

div#content div#left hr {
	clear: both;
	color: #666;                                       /* couleur : gris foncé (1) */
	background-color: #666;
	margin: 10px auto 0px auto;                        /* top, right, bottom, left */   /* pour centrer le trait !!! */
	width: 80%;
	height: 1px;
	border: none;
}

div#content div#left a:link, a:visited {
	color: #666;                                   /* couleur : gris foncé (1) */
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
}

div#content div#left a:hover, a:active {
	font-size: 1em;
	color: #73c3ff;                                /* couleur : bleu alekhine */
	font-weight: bold;
	text-decoration: underline;
}

div#content div#left div#sponsor a:link, a:visited {
	color: #666;                                   /* couleur : gris foncé (1) */
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	text-align:center;
}

div#content div#left div#sponsor a:hover, a:active {
	font-size: 1em;
	color: #73c3ff;                                /* couleur : bleu alekhine */
	font-weight: bold;
	text-decoration: underline;
	text-align:center;
}

/*
###########################################
  DATE, MISE A JOUR et COMPTEUR
###########################################
*/

div#content div#left div#date_compteur {
	margin: 20px 0px 20px 0px;                /* top, right, bottom, left */
	background-color: #fff;                   /* couleur : blanc */
}

div#content div#left div#date_compteur p {
	text-align: center;
	text-indent: 0em;
	line-height: 1.2em;
	margin: 11px 0px 0px 0px;                 /* top, right, bottom, left */
}

div#content div#left div#date_compteur hr {
	clear: both;
	color: #666;                                       /* couleur : gris foncé (1) */
	background-color: #666;
	margin: 10px auto 0px auto;                        /* top, right, bottom, left */   /* pour centrer le trait !!! */
	width: 80%;
	height: 1px;
	border: none;
}

/*
###########################################
  CORPS DE LA PAGE
###########################################
*/

div#content div#right {
	overflow: hidden;
	border-left: solid 1px #ddd;               /* couleur : Gris clair (2) */
	float: left;
	margin-right: 7px;
	padding: 12px;
	width: 686px;   /* 686px et 675px sur IE < 7 */
}

div#content div#right div.C-1 {
	float: left;
	margin-right: 10px;
	width: 330px;	
}

div#content div#right h2 {
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.6em;
}

div#content div#right ul li {
	list-style-type:disc;
	text-decoration: none;
	line-height: 1.3em;
}

div#content div#right tr.tableau {
	height: 3em;
}

div#content div#right ul li a.cliquer_ici {
	text-align:right;
	margin: 0 54px 0 0;                        /* top, right, bottom, left */
}

div#content div#right a:link, a:visited {
	font-size: 1em;
	color: #535353;                            /* couleur : gris foncé (2) */
	font-weight: bold;
	text-decoration: none;
}

div#content div#right a:hover, a:active {
	font-size: 1em;
	color: #73c3ff;                            /* couleur : bleu alekhine*/
	font-weight: bold;
	text-decoration: underline;
}

/*
###########################################
  POUR REMONTER
###########################################
*/

div#content div#remonter {
	font-size: 1em;
	text-transform: none;
	background-color: #fff;                            /* couleur : blanc */
}

div#content div#remonter p {
	font-size: 1em;
	text-align: right;
	height: 34px;
	line-height: 34px;
	padding: 17px 17px 0px 0px;                        /* top, right, bottom, left */
}

/*
###########################################
  BAS DE PAGE
###########################################
*/

div#footer {
	clear:both;
	background: url(images/bottom.png) no-repeat top left;
	overflow: hidden;
	min-height: 54px;
	text-align: center;
	width: 962px;
	color: #333;                                         /* couleur : gris très foncé (3) */
}

div#footer ul {
	list-style : none;
	margin: 20px 0 0 0;
	padding: 0.5em 0 0.1em 0;                            /* top, right, bottom, left */
}

div#footer li {
	border-left: 1px solid #ccc;                         /* couleur : gris clair (3) */
	display: inline;
	padding: 0 0.5em 0 0.6em;                            /* top, right, bottom, left */
}

div#footer li.first {
	border-left: none;
}

div#footer ul li a:link, a:visited {
	color: #535353;                                   /* couleur : gris foncé (2) */
	font-weight: bold;
	text-decoration: none;
	line-height: 1.3em;
}

div#footer ul li a:hover, a:active {
	color: #73c3ff;                                   /* couleur : bleu alekhine*/
	font-weight: bold;
	text-decoration: underline;
	line-height: 1.3em;
}

div#footer p {
	margin: 0;
	padding: 0;
}

/*
###########################################
  PAGE D'ACCUEIL
###########################################
*/

div#total div#content div#right div#accueil h1 {
	color: #8088f7;                                   /* couleur : violine alekhine */
	font-weight: bolder;
	font-size: 1.60em;
	text-transform: uppercase;
	line-height: 1em;
	text-align:left;
}

div#total div#content div#right div#accueil hr {
	clear: both;
	color: #666;                                       /* couleur : gris foncé (1) */
	background-color: #666;
	margin: 10px auto 0px auto;                        /* top, right, bottom, left */   /* pour centrer le trait !!! */
	width: 100%;
	height: 1px;
	border: none;
}

div#content div#right div#accueil img.droite {
	margin: 0px 0px 10px 10px;
}
/*
###########################################
  PAGE COURS EN LIGNES
###########################################
*/

.table_bordure {
	border-width: 0 2px 2px 2px;                          /* top, right, bottom, left  */
	border-style: solid;
	border-color: #ddd;
	/* Seulement pour SAFARI 3 */
	-webkit-box-shadow: 5px 5px 5px #ddd;
	
	/* ombre portée sous une boîte : Liste des fonctions
	1.  décalage en largeur
	2. décalage en hauteur
	3. épaisseur
	4. couleur
   */
}

.titre_tableau{
	background-color: #8088f7;                         /* couleur : violine alekhine */
	color:#fff;                                        /* couleur : blanc */ 
}

.ligne_a{
	padding: 3px 0 3px 0;                              /* top, right, bottom, left  */
}

.ligne_b{
	background-color:#E6EFF2;
	padding: 3px 0 3px 0;                              /* top, right, bottom, left  */
}

/*
###########################################
  PAGE LIENS
###########################################
*/

div#content div#right div#liens h2 {
	color: #8088f7;                            /* couleur : violine alekhine */
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: bolder;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5em;
	margin: 17px 0 12px 0;                         /* top, right, bottom, left */
/* Visible seulement sur SAFARI */
	text-shadow: #A0A0A4 -2px 2px 5px;
}

div#content div#right div#liens ul li {
	list-style-type: none;
	text-decoration: none;
	line-height: 1.3em;
}

div#content div#right div#liens ul li.fleche {
	list-style: url(images/fleche.png);
	text-decoration: none;
	line-height: 1.3em;
	/* <img src="images/" width="10" height="8"> */
}

/*
###########################################
  SPONSORS
###########################################
*/

div#content div#right hr.sponsors {
	clear: both;
	color: #666;                                       /* couleur : gris foncé (1) */
	background-color: #666;
	width: 90%;
	height: 1px;
	border: none;
	margin: 10px auto 7px auto;                        /* top, right, bottom, left */   /* pour centrer le trait !!! */
}

/*
###########################################
  FORMULAIRE
###########################################
*/

#contact {
	width: 500px;
	margin: 17px auto 21px auto;
	border: thin solid;
	border-color: #996600;                         /* couleur : or */
}

#contact_contenu {
	width: 400px;
	margin: 7px auto 7px auto;                     /* top, right, bottom, left */   /* auto right et left pour centrer */
}

.formulaire_1 {
	width: 100%;
	margin: 7px;
	background-color: #e2e2e2;                     /* couleur : gris clair (1) */
	background-position: center bottom;
	float: none;
	color: #000;                                   /* couleur : noir */
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.formulaire_2 {
	margin: 7px 0px 0px 7px;                        /* top, right, bottom, left */
	float: none;
	color: #000;                                    /* couleur : noir */
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.formulaire_titre {
	text-align: center;
	font-size: 1em;
	font-weight: bolder;
	color: #8088f7;                                 /* couleur : violine alekhine */
	line-height: 2em;
	border-bottom: thin solid #960;                 /* couleur : or */
	margin-top: 0px;
	padding-top: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}

.formulaire_soustitre {
	font-size: 0.9em;
	font-weight:bold;
	margin: 0px 0px 0px 7px;                         /* top, right, bottom, left */
	line-height: 2em;
}

.formulaire_soustitre_center {
	font-size: 0.9em;
	text-align:	center;
	margin: 0px 0px 0px 7px;                         /* top, right, bottom, left */
	line-height: 1.1em;
}

/*
###########################################
  ALBUM PHOTOS - Trouvé sur : http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
###########################################
*/

div#content div#right div#galerie
{
	width: 600px ;
	background: #f3f7fb;
	border: 1px solid #8088f7 ;
	padding: 15px ;
	margin: 10px auto;                        /* top, right, bottom, left */
	text-align: center ;
	font: 0.9em Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
}

/* Vignettes */

div#content div#right div#galerie ul#galerie_mini
{
	margin: 0 auto ;
	padding: 0 ;
}

div#content div#right div#galerie ul#galerie_mini li
{
	float: left ;
	list-style-type:none;
}

div#content div#right div#galerie ul#galerie_mini li a img
{
	margin: 10px;
	border: 0;                                     /* 1px solid #8088f7 */
}

/* Affichage de la grande photo au centre en bas */

div#right div#galerie dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

div#right div#galerie dl#photo dt
{
	font: italic 2em/2em Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #8088f7;
	padding: 10px 0 0 0;                        /* top, right, bottom, left */
}

div#right div#galerie dl#photo dd
{
	margin: 0 ;
}

div#right div#galerie dl#photo img
{
	border: 0;                                   /* 1px solid #8088f7 */
}

/*
###########################################
  FORMULAIRE D'INSCRIPTION
###########################################
*/

.bloctexte {
	text-align: left;
	font-family: Verdana, Arial, Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #000000;
	padding-right: 7px;
	padding-left: 7px;
} 
.bloctextejust {
	text-align: justify;
	font-family: Verdana, Arial, Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #000000;
	text-align:justify;
	background-color: #FFFFFF;
	padding-right: 7px;
	padding-left: 7px;
	vertical-align: top;
	width: 670px;
} 
.bloctextejustgrasbleu {
	text-align: justify;
	font-family: Verdana, Arial, Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #001AC8;
	text-align: justify;
	background-color: #FFFFFF;
	font-weight: bolder;
	vertical-align: top;
}

/*
###########################################
  LISTE DES MEMBRES DU CLUB
###########################################
*/

.liste_clair {
	color: #000000;
	font-weight: normal;
	background-color: #FFFFFF;
	border: none;
}

.liste_fonce {
	color: #000000;
	font-weight: normal;
	background-color: #E6EFF2;
	border: none;
}

.liste_titre {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #8088f7;
}

/*
###########################################
  CALENDRIER
###########################################
*/

.main {
	width: 200px;
	border: 1px solid #73c3ff;            /* Bleu alekhine */
}

.month {
	background-color: #8088f7;           /* Violine alekhine */
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 14px;
	text-align: center;
	color: white;
}

.daysofweek {
	background-color: #73c3ff;           /* Bleu alekhine */
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	color: white;
	text-align: center;
}

.days {
	font-size: 12px;
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-weight: bolder;
	color: #8088f7;                      /* Violine alekhine */
	background-color: #f3f7fb;           /* Bleu très pâle */
	padding: 2px;
	text-align: center;
}

.today {
	font-family: Optima, "Trebuchet MS", Verdana, Lucida, Arial, Geneva, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-weight: bolder;
	text-align: center;
	color: white;  
	background-color: #8088f7;           /* Violine alekhine */
}

/*
###########################################
  MAILING
###########################################
*/

.mailing {
	font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 14px;
	color: #001CB8;
	text-align:left;
	margin: 0px 0px 0px 17px;
}