/*ensembles des propriétés affectées au page incluant la feuille CSS (sauf indication contraire dans fichier HTML)*/


body {

/*ensemble des propriétés affectées à toutes la page*/

background-color : #ffffb7; /* définition de la couleur de fond de la page*/ 
Color:#000000;
font-family:"Times New Romans", Verdanna, Arial, San-Sherif;/*définition dans l'ordre de la police devant être utilisé pour écrire les textes*/ 
margin: 0;/*supprime la présence par défaut de marge ente la fenêtre et son contenu*/
overflow: visible; /*les éléments trop grands ne sont pas rognés*/ 
overflow-y: scroll;/*installe un ascenseur  quand les informations débordent*/ 
} 


/*définition d'une classe, ensemble de propriétés pouvant être utilisé plus tard avec certaines balises*/


/* défintion du bloc d'en tête*/

.entete

{
   
   background-color: rgb(0,0,0);/*le bloc d'en tête aura un fond noir*/
   position: absolute;/*le bloc est fixé par des coordonnées relatives à la fenêtre du navigateur*/
   top:0px;/* distance en pixel entre le haut de la fenêtre et le haut du bloc*/ 
   left: 0px;/*distance en pixel entre le bord gauche de la fenêtre et le bord gauche du bloc*/ 
   width: 100%;/* largeur du bloc par rapport à la largeur de la fenêtre*/
   height: 90px;/* hauteur du bloc en pixel*/
   border-bottom: solid thin;/*on met une bordure sur le bord inférieur du bloc*/
   border-bottom-color: rgb(255,255,255);/*cette bordure est de couleur blanche*/   
}


/*définition d'un élément logo qui appartient à la l'élément entête (propriété liés au logo du club)*/ 

.logo /*image de 77pxhauteur * 584 px largeur*/
{

position: relative;/*la position(entre autre) n'est plus calculé par rapport à la fenêtre navigation mais par rapport à l'élément parent, c'est-à-dire la dernière balise ouverte et pas encore refermée*/ 
text-align:center;/* le logo est horizontalement placé au centre du bloc qui le contient*/  

top:6px;/*le logo est placé à 6 pixels du haut du bloc */

 
}


/*propriété liés au nom du club écrit sous le logo*/ 

.nom
{

color: #fad74b;/*couleur du texte*/
text-transform: uppercase ;/* toutes les lettres du texte seront en majuscules*/
font-weight: bold ;/*texte écrit en caractères épais*/
font-size:12pt;/* texte écrit avec une police de 18*/ 
position:relative; 
text-align:center;/*le nom est centré horizontalement  par rapport à l'élément de référence*/  
top: 6px;/*le nom se trouve à 6 pixels en dessous de l'élément de référence qui ici est le logo*/

}

/*Fin des propriétés concernant le bloc d'en-tête*/


/* début des propriétés concernant la barre de menu*/


/* partie gauche de la barre de menu dans laquelle on met le nom de la page courante */

.titrepage

{
   color:#ffffff;/* couleur du texte utilisé dans cette partie*/
   background-color: rgb(0,0,0);/*ce bloc aura un fond noir*/
   width: 28%;/* largeur du bloc par rapport à la largeur de la fenêtre*/
   height: 50px;/* hauteur du bloc en pixel*/
   position:absolute;
   top:90px;/* le haut du bloc se trouve à 141 pixels du haut de la fenêtre*/
   left:0px;/* le bloc est contre le bord gauche de la fenêtre*/
   overflow-y: hidden; /* Aucun élément de ce bloc ne peut le dépasser verticalement*/
   
}


/*propriétés du texte que l'on met dans le bloc titrepage*/
.sujetpage
{
  
   position: relative;
   left:5px; /* Ce texte commence à 5 pixels du bord gauche de la page*/
   top:13px;/*le texte se trouve à 13 pixels du haut du bloc titrepage*/ 
   font-weight: bold;/* Texte en gras*/ 
   font-size:14pt; /* taille de police du texte de 13 pt*/ 
}


.menu

{
   color:#ffffff;/* couleur du texte les menus sont écrits en blanc*/ 
   font-size:12pt;/* taille de la police servant à écrire les menus*/
   background-color: rgb(0,0,0);/* couleur du bloc, fond noir*/
    position:absolute;
   width:72%;/* largeur du bloc remarque 19% pour titrepage+81% pour menu*/ 
   height: 50px;/* hauteur du bloc, la même que pour titrepage*/
   top:90px;/* distance entre le  haut de la fenêtre et le haut du bloc, exactement égale à celle entre le haut de la fenêtre et titrepage*/
   left:28%;/* distance séparant le bord gauche de la fenêtre du bord gauche de la fenêtre, égale à la largeur de titrepage*/ 
   overflow: hidden; /* Aucun élément de ce bloc ne peut le dépasser verticalement*/ 
   
}


/*propriétés des carrés placés horizontalement dans le bloc menu, en alternance avec les menus. Dans le code, on commence par placer les carrés, le premier carré étant placé par rapport au bloc, les autres (carresuiv) étant placés par rapport au carre précédent.*/   
/*Comme la longueur des mots désignant les menus change, la distance entre les carrés varie. Celle-ci est donc à chaque fois redéfinie dans le fichier HTML*/



.carre{ 
        
        height:2%;/*15px; /*la carre a une hauteur de 15 pixels*/ 
        width:2%;/*17px;/*et une largeur de 17 pixels, c'est donc un rectangle*/
       font-size:13pt;
       color: #bbaa52;
       background-color: #bbaa52;/* couleur de fond du carre, jaune*/
}



/*fin des propriétés concernant la barre de menu*/



/* propriétés de la barre à gauche, pour les sous-menus*/ 

.Navigation{

position: absolute; /*bloc placé par rapport à la fenêtre du navigateur*/ 
top: 150px;/*distance entre le haut du bloc et le haut de la barre verticale de sous-menus de 225px;*/
left: 0px;/* la barre verticale de sous-menus est collée au bord gauche de la fenêtre*/
width:130px;/* 13%/*la barre verticale de sous-menus a une largeur de 130 pixels*/
background-image: url("Images\fondvert1.jpg") ; /* définition du fond de la barre verticale de sous-menus*/
background-repeat: repeat-y ;/* l'image de fond définie à la ligne précédente se répète verticalement*/ 
height:500px;/* hauteur par défaut de la barre verticale de sous-menus. Si l'entassement des sous-menus a une hauteur supérieure, alors le bloc se prolonge automatiquement par ce que la valeur par défaut de "overflow-y" est visible.*/
}



/* propriétés du bloc contenant la bobine*/

.bobine{

position: relative;/* ce bloc est placé par rapport à la barre verticale de sous-menus*/
top: 10px;/* la distance du haut de la barre verticale de sous-menus au bord supérieur du bloc bobine est de 10 pixels*/ 
left:15px;/* la distance entre le bord gauche de la barre verticale de sous-menus et celui du bloc bobine est de 15 pixels*/
height:121px;/* le bloc bobine a une hauteur de 121 pixels*/
width:100px;/* le bloc bobine a une largeur de 100 pixels*/

}


/* propriétés du bloc contenant les noms de sous-menus*/

 
.navimenu{

position: relative;/* Ce bloc est placé par rapport au bloc défini précédement*/
top:20px;
left:0px;
width:100%;
text-align: center;/* le texte des sous-menus est centré dans la barre verticale de sous-menus*/
font-size:13pt;


}

/*propriété des sous-menus*/

.navititre{

height:10px; /*hauteur de bloc où est écrit un sous-menu*/ 
Color: #ff00ff;/*la police du texte est rose*/
}


/*fin des propriétés de la barre à gauche, pour les sous-menus*/ 



/*propriétés du bloc contenant les données de la page*/


.information{

position: absolute;/* ce bloc est placé par rapport à la fenêtre du navigateur*/
top: 150px;/*la distance qui sépare le haut de la fenêtre du navigateur du haut du bloc information est de 225 pixels*/  
left:14.5%;/*145px;/*la distance qui sépare la gauche de la fenêtre du navigateur de la gauche du bloc information est de 145 pixels*/  
width: 62%;/* Ce bloc a une largeur de 520 pixels*/
text-align: justify;/* Le texte écrit dans ce bloc est justifié*/
font-size: 10pt;/* Le texte écrit dans ce bloc a une taille de 10 pt*/
/*background-color: #ccaadd;*/

}



/*propriétés d'un titre du bloc information*/

.titre{

position: relative;
left:0px;/* la bande sur laquelle est écrit le titre commence sur le bord gauche du bloc information*/
height:32px;/* la bande sur laquelle est écrit le titre a une hauteur de 32 pixels*/
width:100%;/* la bande sur laquelle est écrit le titre a une largeur de 500 pixels*/
background-color:#000000;/* la bande sur laquelle est écrit le titre a un fond noir*/
Color:#fad74b;/* le titre dans le bloc information est écrit en Jaune foncé*/
font-weight:bold;/* le titre dans le bloc information est écrit en gras*/
font-size: 16pt; /*le titre dans le bloc information a une taille de 16 pt*/
}


/*propriétés de la zone de la page où on met les photos*/

.photos{


position:absolute;
left:78%;/*780px;*/
top:150px;
width:22%;
/*background-color:#ca23ef;*/
overflow:hidden;
overflow-y:visible;
text-align:center;
} 




/*propriétes des liens de la page*/


/*rien sur un lien*/

A:link {TEXT-DECORATION:none;
          

}
A:active {
	
}


/*rien sur un lien visité*/


A:visited {TEXT-DECORATION:none;
	
}

/* lien se souligne quand on passe la souris dessus*/

A:hover {
	   
          TEXT-DECORATION: underline;
}


/* Il existe des liens de différentes couleurs. On crée une classe pour chacune d'entre elles*/


.lnavi{Color:#ff00ff;}/* couleur des liens de la barre verticale des sous-menus*/
.lmenu{Color:#ffffff; height:2%; font-size:13pt;}/* couleur des liens de la barre horizontale des menus*/



/*propriété du bloc contenant le pied de page*/


.piedpage{

position:relative;
left: 0px;
width:100%;/* Il fait toute la largeur du bloc information*/
 
}
.webmail{
position: relative;
text-align:left;/* on met le lien vers le mail webmaster à gauche*/

}


.dmaj{
position:relative;
text-align:right;/* on met de la dernière mise à jour à droite*/
top:-15px;

}