/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 08
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
body {
	background-color: #e8e8e8;
	/*background: url("../images/background_noel.jpg") no-repeat scroll center top #000000;*/
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}


/* Bloc central */
#centre {
	background: #FFFFFF; /* Voir -> Note 1 */
}



/* Contenu secondaire */
#secondaire {
	background: transparent; /* -> 2 */
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 0px 5px;
}
#global {
	width: 900px;
	margin-left: auto;
	margin-right: auto; /* -> 3 */
	border:3px groove;
}

/* En-tête */
#entete {
	padding: 0px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Menu de navigation */
#navigation a:hover, #navigation a:focus {
	background: #0b084d;
}
#navigation {
	padding-left: 15px;
	padding-right: 15px;
	background-color: #73121e;
	width: 870px;
}
#navigation ul {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
    line-height : 25px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
	z-index:1;
	}
#navigation li.gauche {
	float: left;
	margin-right: 10px;
	font-size: 1.2em;
	font-style: italic;
}
#navigation li.droite {
	float: right;
	margin-left: 10px;
	font-size: 0.8em;
	font-style: italic;
}
#navigation a {
	color: #FFFFFF;
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}
#menu a /* Sous-listes */
{
display : block;
text-decoration : none;
background : #73121e; /* couleur de fond */ 

}
#menu li /* Elements des listes */      
{ 
 
        /* pour IE qui ne reconnaît pas "transparent" */
}
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
	/* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul ul 
{
        margin: -30px 0 0 100px;
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}



/* Bloc central */
#centre {
	width: 100%; /* -> 4 */
	overflow: hidden; /* -> 4 */
}

/* Contenu principal */
#principal a {
	color: #332510;
}
#principal a:hover, #principal a:focus {
	color: #6E5122;
}
#principal strong {
	color: #181A12;
}
#principal {
	float: left; /* -> 5 */
	width: 620px;
	padding: 10px 0 10px 20px !important;
	color: #181A12;
	background: #ffffff; /* -> 2 */
}
#principal > :first-child {
	margin-top: 0px;
}
#principal p, #principal li {
	line-height: 1.5;
}
#tdsaut {
height:15px
}

#photos td {
text-align:center;
}

/* Contenu secondaire */
#secondaire {
	margin-left: 640px; /* -> 6 */
	margin-right: 0px;
	padding: 12px 0px;
	text-align:center;
}

#secondaire table {
border:3px groove;
width: 80%;
text-align:left;
margin-right: auto;
margin-left: auto;
}
#secondaire td.equipe{
color:white;
text-align:center;
border: thin solid #73121e;
background-color: #73121e;
}
#secondaire td.titre{
font-weight:bold;
text-align:center;
}
#secondaire td.match{
text-align:center;
}

/* Mention de copyright */
#copyright {
	margin: 5px 0;
	font-size: 1em;
	text-align: center;
}

#titre {
text-align: center;
}

#calendrier {
border:3px groove;
}
#calendrier a{
text-decoration:underline;
}

#titre_news {
background-color:#73121e;
color: #FFFFFF;
text-align: center;
}
#titre_news h2 {
margin:1em 0px 0px;
}
#news {
overflow: hidden; 
position: relative; 
height: 300px; 
background-color:#F6F6F6;
}
#news a {
padding:3px 0px 3px 4px;
text-decoration:none;
width:216px;
line-height:14px;
color: black;
}
#news b {
color:#73121e; 
margin-right:4px;
}
#news strong {
color: black;
}
#titre_news2 {
text-transform:uppercase;
font-size: 24px;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
}
#classement {
border:1px solid navy;
border-collapse : collapse;
}
#classement td {
border-bottom:1px solid navy;
}
#titre_sponsor {
background-color:#73121e;
color: #FFFFFF;
text-align: center;
}
#titre_sponsor h2 {
margin: 1em 0 0em 0;
}
#photos_acc {
border-collapse : collapse;
}
#photos_acc td{
border:3px groove;
text-align:center;
}


/*Classement*/

#principal table.tablo.bordure.ac {
width:458px;
border:1px solid #D1D7DF;
}
#principal table thead {
font-weight:bold;
font-size:120%;
}
#principal table.tablo.bordure.ac tr {
height:25px; 
}
#principal table.tablo.bordure.ac td {
width:25px;
text-align:center;
border-top:1px solid #D1D7DF;
border-bottom:1px solid #D1D7DF;
}
#principal table.tablo.bordure.ac td.al {
width:200px;
text-align:left;
padding-left:10px;
}
#principal table.tablo.bordure.ac tr.bgbleu {
background-color: #E8E9E9;
}
#principal table.tablo.bordure.ac td.txtgris {
color:#4F4F4F;
}
#principal table.tablo.bordure.ac td.txtgrisclair {
color:#8D8D8D;
}



/*Notation étoile*/
ul.notes-echelle { 
    margin:0; 
    padding:0; 
    font:.75em/1.2 Arial, Helvetica, sans-serif; 
} 
ul.notes-echelle li { 
    float:left; 
    margin:0; 
    padding:0; 
    list-style:none; 
    min-width:20px; 
    min-height:20px; 
} 
/* Correctif IE6 sur min-width & min-height */ 
* html ul.notes-echelle.js li { 
    width:20px; 
    height:20px; 
} 
ul.notes-echelle li label { 
    display:block; 
    text-align:center; 
    line-height:20px; 
    background:url(../images/etoiles.gif) center top no-repeat; 
    cursor:pointer; 
}
ul.notes-echelle li.note-off label { 
    background-position:center -60px; 
}
ul.notes-echelle.js input { 
    position:absolute; 
    left:-999%; 
}
/* Effet lorsque une note est cochée */ 
ul.notes-echelle li.note-checked { 
    font-weight:bold; 
} 
/* Effet lorsque une note est tabulée au clavier */ 
ul.notes-echelle.js li.note-focus { 
    outline:1px dotted #000; 
}

/* --- NOTES ---

1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe
	div#principal et div#secondaire uniquement. C'est ce conteneur que l'on
	utilise pour placer une image de fond répétée en hauteur, qui dessine
	le fond de la colonne de gauche et de la colonne de droite.
	Ainsi, quelle que soit la colonne la plus longue, on aura bien,
	visuellement, deux colonnes de hauteurs égales.

2.	On utilise ici des couleurs de fond pour div#principal et div#secondaire.
	Et pourtant, nous avons déjà une image de fond, sur div#centre, qui
	«dessine» nos deux colonnes. Pourquoi rajouter des couleurs de fond à
	ces blocs, alors? C'est en fait une sécurité, au cas où:
	- l'image de fond mettrait du temps à se charger (ça arrive);
	- l'image de fond ne peut pas être chargée (rare, mais ça arrive aussi).
	Ainsi, si ces problèmes surviennent, le contenu restera lisible. Notamment
	le contenu de div#principal, qui est sombre, tandis que le fond de la page
	est déjà sombre.
	Notez que dans certains cas ce genre de «sécurité» sera difficile à mettre
	en place, par exemple parce que la couleur de fond des blocs masquerait
	une image de fond comportant des motifs.
	Mais, plus généralement, un bon design de site web devrait rester lisible
	même si les images sont désactivées (ce qui est une option de beaucoup
	de navigateurs).

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

4.	On utilise ces propriétés pour empêcher le dépassement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).
	Le overflow:hidden crée un contexte de formatage qui vient contenir les
	flottants. Le width:100% a le même rôle, mais uniquement pour Internet
	Explorer 6 (utilisation du HasLayout). Dans l'idéal, on le placera avec
	des correctifs destinés à IE6 dans une feuille de styles appelée via un
	commentaire conditionnel.

5.	C'est la propriété "float" qui nous permet de placer deux blocs
	côte-à-côte. Notez bien que l'élément flottant (ici, notre contenu
	principal) doit être placé en premier dans le code HTML. Il est
	préférable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 560px;" (mais à cause du padding la largeur réelle sera de 600px).

6.	Les éléments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu secondaire forme
	une colonne distincte du contenu principal, on lui donne donc une marge à
	gauche de 620px (largeur réelle de div#principal + 20px).
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le précèdent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/