body/*on agit sur toute la page*/
{
background-image: url("../images/culsall.jpg");/*autre fond : pirates.jpg ou  url("../images/feuille.jpg");*/
background-color: rgb(255, 155, 55);
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px
}

table /*tableau*/
{
width: 900px;
   margin: auto;
   border: 10px outset grey;
   border-collapse: no-collapse;

}
th/*entêtes */
{
	width: 900px;

 text-decoration: underline; /*souligne les titres*/
   text-align: center;
   background-color: white;
   color: magenta;
   
   font-family: "comic sans MS" , "Arial Black", Times, "Times New Roman", serif;
}
tr /*ligne */
{
	width: 900px;

   text-align: center;
   background-image: url("../images/fondnoir.jpg");/*autre fond : pirates.jpg ou  url("../images/feuille.jpg");*/
   background-color: blue;
   color: white;
   
   font-family: "comic sans MS", Arial, "Arial Black", Times, "Times New Roman", serif;
}

td  /*contenu*/
{
	width: 900px;
    height: 40px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé au milieu */
    
   border: 0px solid black;/*pour mettre des cadre autour des boutons de menus*/
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center;
   padding: 5px;
}
/*TOUT CE QUI CONCERNE L'EN TETE*/
#en_tete
{
width: 900px;
height: 40px;

background-image: url("../images/fondnoir3.jpg");/*autre fond : pirates.jpg ou  url("../images/feuille.jpg");*/
background-repeat: repeat;
border: 0px outset grey;
border-collapse: no-collapse;
margin-top: 20px;
margin-bottom: 20px;
padding-top: 20px
color: yellow;
text-align: center;
}
#en_tete h1
{
width: 900px;
color: white; /*rgb signifie red green blue, les trois couleurs primaires*/
font-size: x-large;
font-family:  "Arial Black", "comic sans MS","Impact", serif;
text-align: center;
font-weight: bold; /*mise en caractères gras*/
text-decoration: underline; /*souligne les titres*/
text-align: center;
}



#en_tete h2
{
width: 900px;
color: rgb(200, 200, 200);
text-align: center;
font-family: "Copperplate","Impact","Arial Black", "comic sans MS","Impact", serif;
font-size: 1.8em;
font-weight: bold; /*mise en caractères gras*/
paddind: 50px;
}

#en_tete h3
{
width: 900px;
color: rgb(200, 200, 200);
text-align: center;
font-family: "Cracked","Impact","Arial Black", "comic sans MS","Impact", serif;
font-size: 3.2em;
font-weight: bold; /*mise en caractères gras*/
paddind: 50px;
}



/* SURVOL IMAGES QUI S'AGRANDISSENT */

ul
{
width:450px; /* largeur de la page des photos non agrandies */
height:280px;/* hauteur de la page des photos non agrandies */
margin : 10px;

}
ul li
{
list-style:none;/* star pour ajout de petites étoiles comme des puces */

width:100px; /* largeur de la partie active pour le hoover des photos non agrandies donc on règle l'écart entre les photos */

height:10px;/* hauteur de la partie active pour le hoover des photos non agrandies donc on règle l'écart entre les photos*/
margin:10px;/* écartement entre le bord des photos*/
padding : 10px;
}

ul li:nth-child(3)
{
clear:left;
}
ul img{
position:absolute;
z-index:5;
height:150px;width:auto;/* largeur des IMAGES non agrandies */
margin:10px;
padding: 10px;

}
ul li:hover img{
z-index:5;
-webkit-transform: scale(3.5);
    -moz-transform: scale(3.5);
     -ms-transform: scale(3.5);
      -o-transform: scale(3.5);
         transform: scale(3.5);
box-shadow:10 10 10px black;
}

ul:hover li:not(:hover) img{
-webkit-filter: grayscale(1) blur(5px);
    -moz-filter: grayscale(1) blur(5px);
     -ms-filter: grayscale(1) blur(5px);
      -o-filter: grayscale(1) blur(5px);
         filter: grayscale(1) blur(5px);
}

/*MENUS*/

#menu td  /*contenu*/
{
	font-family: "Copperplate", "Cracked","Impact","Arial Black", "comic sans MS","Impact", serif;

   border: 0px solid black;
  padding: 10px;
}
#menu
{
float:left;
font-family: "Copperplate","Cracked","Impact","Arial Black", "comic sans MS","Impact", serif;

width: 120px;
height: 600px;
padding-top: 10px;
line-height: 10px;
}



#menu a
{
	font-family: "Copperplate","Cracked","Impact","Arial Black", "comic sans MS","Impact";
   font-size: 1.2em;
color: red;
text-decoration: none;
}

a
{
	font-family: "Copperplate","Cracked","Impact","Arial Black", "comic sans MS","Impact";
   font-size: 1.2em;;
color: rgb(200, 200, 200);/*color: orange;*/
text-decoration: none;
}

a:hover
{
   text-decoration: underline;
   color: magenta;
}

/*TOUT CE QUI CONCERNE LE CORPS*/
#corps
{
	background-image: url("../images/fondnoir.jpg");
    background-repeat: repeat;
    margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  
  
      border: 0px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1 /* Tous les titres h1 du corps */
{
width: 900px;
color: orange; /*rgb signifie red green blue, les trois couleurs primaires*/
text-align: right;
font-family: "Cracked","Impact","Arial Black", "comic sans MS","Impact", serif;
font-weight: bold; /*mise en caractères gras*/
font-size: 2.2em;/
}


#corps h2 /* Tous les titres h2 du corps */
{
 font-family: "Myriad pro", "Arial", "Arial Black", "Times New Roman", Times, serif;
color: white;
text-align: center;
font-size: x-large;
margin: left;

}
#corps h3 
{
width: 900px;
color: orange; /*rgb signifie red green blue, les trois couleurs primaires*/
text-align: center;
font-family: "Copperplate","Impact","Arial Black", "comic sans MS","Impact", serif;
font-weight: bold; /*mise en caractères gras*/
font-size: 2.2em;/
}

#corps h4 /* Tous les titres h4 des pages de liens */
{
  font-family: "Copperplate""Cracked","Impact","Arial Black", "comic sans MS","Impact", serif;
font-size: 4.2em;
color: red; /* rgb(200, 200, 200);color: orange; /*rgb(73,70,30); */
   text-align: center;
    padding-top: 5px;
}
#corps h5 /* Tous les titres h5 des pages de liens */
    {
width: 900px;
color: rgb(200, 200, 200);/*color: orange; /*rgb(73,70,30); */
text-align: center;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
font-size: 1.2em;
}
#corps h6 /* Tous les titres h5 des pages de liens */
    {
width: 900px;
color: rgb(200, 200, 200);/*color: orange; /*rgb(73,70,30); */
text-align: left;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
font-size: 1.2em;
}

.legendital/* Tous les légendes en italique  */
{
text-align:left;
font-size: x-small;
font-style:italic;
}




#pied_de_page
{width: 900px;
margin: auto;
background-image: url("../images/fondnoir.jpg");
background-repeat: no repeat;
border: 0px outset grey;
border-collapse: no-collapse;
text-align: center;
   padding-top: 20px;
   font-size:small;
     
      border: 0px solid black;
}
p
{
  font-family: "comic sans MS","Impact", serif;
color: yellow; /*color: rgb(119, 45, 35);/*color: magenta;*/

 }


p:first-letter
{
color: magenta; /*color: rgb(19, 45, 35);/*color: magenta;*/
font-weight: bold;
font-size: xx-large;
}
 


/*EN CE QUI CONCERNE LES IMAGES*/
.imageflottante
{
   float: left;
   border: 2px;
   padding: 5px;
}
.imageflottantedroite
{
   float: right;
   padding: 5px;
   border: 2px;
}

.centrer
{
    text-align:center;
}

.toppage
{
text-align: center;
color: magenta;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
font-size: large;

}

.texteadroite
{
text-align: right;
}

.souligne
{
text-decoration: underline;
}
.jaune
{
color: rgb(100, 90, 50);
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
margin left: 100px;
font-size: large;

}


.rouge
{
color :red;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
margin left: 100px;
font-size: large;

}
.gris
{
color: rgb(200, 200, 200);
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
margin left: 100px;
font-size: large;

}
.magenta
{
color: magenta;
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
margin left: 100px;
font-size: large;

}
.orange
{
color: rgb(200, 50, 20);/*orange*/
font-family: "Myriad pro", "Comic Sans MS", "Arial Black", serif;
text-align: center;
margin left: 100px;
font-size: large;

}