/*

Réalisé par Jonathan Bouchard
http://www.productionjb.com
*/

body
{
   width: 970px;
   height:300px;
   margin-left: 5px;
   margin-top: 5px;
   margin-bottom: 20px; 
   background-color:#000000;  
   background-image: url(".JPG");
     
}

/* L'en-tête */

#en_tete
{
   width: 930px;
   height:85px;
   background-image: url("tto2.JPG");
   background-repeat: no-repeat;
   margin-bottom: 5px;
}


#virus
{
   width: 200px;
   height:40px;
  margin-left: 490px;

 
}

#menu3 li:hover ul ul, #menu3 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 */
}

#menu3 li:hover ul, #menu3 li li:hover ul, #menu3 li.sfhover ul, #menu3 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 */
}




#menu3, #menu3 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éfini une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu3 /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu3 a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
		
        background :#000000 ; /* couleur de fond */       
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 155px; /* largeur */
}

#menu3 li /* Elements des listes */     
{
        float : left;
        /* pour ie qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu3 li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu3 li ul /* Sous-listes */
{
        position: absolute; /* Position absolu */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoi loin du champ de vision */
}


#menu3 li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu3 li ul li               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu3 li ul ul
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */     
}

/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu3 li ul ul               
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu3 li:hover ul ul, #menu3 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 */
}

#menu3 li:hover ul, #menu3 li li:hover ul, #menu3 li.sfhover ul, #menu3 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 */
}

#menu3 a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: #42436E; /* On passe le texte en noir ... */
        background: #DFE2FF; /* ... et au contraire, le fond en blanc */
}

#en_tete2
{
background-color: #FFF;
   width: 980px;
   height:26px;
   color: white;
   background-image: url("");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

#en_tete3
{
background-color: #FFF;
   width: 980px;
   height:90px;
   color: white;
   background-image: url("");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}




.element_menu2 h2
{   
   
   margin-right: 30px;
    margin-top: 20px;
	 
	
}

/* Le menu */

#menu
{
   float: left;
   width: 130px;
  
     
   margin-right: 10px;
   
}

.element_menu
{ background-image: url("");
   
   
   background-repeat: repeat-x;
   
   border: px solid blue;
   
   margin-bottom: 20px;
   
   
   
    font-size: 10px;

	
   
   font-family: Arial, "Times New Roman", Verdana, serif;
 
 
   
   
   
}




.element_menu3
{ background-image: url(".jpg");
   
   
   background-repeat: repeat-x;
   
   border: px solid blue;
   
   margin-bottom: 20px;
   
   
   
    font-size: 10px;

	
   
   font-family: Arial, "Times New Roman", Verdana, serif;
 
 
   
   
   
}








/* Quelques effets sur les menus */


.element_menu h3
{   background-image: url("texture1.jpp");
   color: #090CB4;
   font-family: Arial black, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
   font-size: 10px;
  
   
   
}

.element_menu ul
{;
   list-style-image: url(".bmp");
   padding: 0px;
   padding-left: 0px;
   margin: 0px;
   margin-bottom: px;
}

.element_menu a
{ 
   color: black;
   font-size: 10px;
    font-family: Arial Black, "Arial", "Times New Roman", Times, serif;

}

.element_menu a:hover
{background-image: url("");
font-family: Arial Black, "Arial", "Times New Roman", Times, serif;
 font-size: 10px;
   background-color:;
   color:blue ;
}
























/* Le corps de la page */

#corps
{


 
   margin-left: 0px;
   margin-bottom: 0px;
   padding: 0px;

   color: black;
   background-color: blue;
   background-image: url("noir.JPG");
   background-repeat: repeat-x;
   


   border: 1px solid white;
}

#corps h1
{
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}



/* Le pied de page  */

#pied_de_page
{width: 780px;
   height:60px;
   padding: 0px;
margin-left: 16px;
margin-top: 0px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url("pied.JPG");

   
   
}


#pied_de_page2
{
   padding: 0px;
margin-left: 0px;
margin-top: 30px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".JPG");

   
   border: 1px solid #A7A7C3;
}


#corps19800
{

float: left;
   width: 300px;
   height:255px;

   padding: 0px;
margin-left: 10px;
margin-top: 20px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid white;
}


#corps1980z
{

float: left;
   width: 300px;
   height:310px;

   padding: 0px;
margin-left: 10px;
margin-top: 20px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid white;
}

#corps2010
{

float: left;
   width: 120px;
   height:100px;

   padding: 0px;
margin-left: 0px;
margin-top: 0px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
   
}

#corps2009
{

float: left;
   width: 130px;
   height:1600px;

   padding: 0px;
margin-left: 10px;
margin-top: 0px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
    border: 1px solid #E1E0FF;
}
#corps2008
{

float: left;
   width: 650px;
   height:1900px;

   padding: 0px;
margin-left: 0px;
margin-top: 0px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid #E1E0FF;
}


#corps1980
{

float: left;
   width: 300px;
   height:295px;

   padding: 0px;
margin-left: 10px;
margin-top: 20px;
  
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid white;
}



#corps2
{

float: left;
   width: 300px;
   height:292px;

   padding: 0px;
margin-left: 10px;
  
font-size: 20px;
   color: black;
   background-image:;
 

   
   border: 1px solid white;
}


.corps2  a
{
   color: white;
   font-size: 13px;
   
   
   
}

.corps2 a:hover
{
   background-color: bleu;
   color:red ;
}



#corps19
{

float: left;
   width: 300px;
   height:70px;

   padding: 0px;
margin-left: 10px;
  margin-top: 20px;
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid white;
}





#corps199999
{

float: left;
   width: 240px;
   height:70px;

   padding: 0px;
margin-left: 10px;
  margin-top: 20px;
font-size: 20px;
   color: black;
   background-color:white;
 

   
   border: 1px solid white;
}


#corps4444
{
 background-color: #7878FF;
float: left;
   width: 610px;
   height:15px;

   padding: 0px;
margin-left: 10px;
  margin-top: 20px;
   margin-bottom: 20px;
font-size: 20px;
   color: black;
   background-color:white;
   

   
   border: 1px solid white;
}



/* 1# div Site DROITE  */

#corps3
{

float: right;
   width: 260px;
   height:100px;
margin-right: 5px;
margin-top: 10px;
   padding: 10px;

   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 1px solid #BDBCDC;
}

#corps3zz
{

float: right;
   width: 260px;
   height:250px;
margin-right: 5px;
margin-top: 10px;
   padding: 10px;

   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
      border: 1px solid #E1E0FF;

}
#corpsjb
{

float: right;
   width: 260px;
   height:100px;
margin-right: 5px;
margin-top: 50px;
   padding: 10px;

   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 1px solid #BDBCDC;
}

#corps4
{

float: center;
   width: 250px;
   height:130px;
margin-right: px;
  margin-top: 75px;
 padding: 10px;
   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 8px solid #BDBCDC;
}

#corps42009
{

float: center;
   width: 823px;
   height:150px;
margin-right: px;
  margin-top: 75px;
 padding: 10px;
   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 8px solid white;
}
#corps4545
{

float: center;
   width: 400px;
   height:180px;
margin-left: 180px;
  margin-top: 40px;
 padding: 10px;
   text-align: center;
font-size: 22px;
   color: black;
   background-color: #C0C0C0;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 8px solid #240087;
}


#corps5
{

float: right;
   width: 260px;
   height:100px;
margin-right: 5px;
   padding: 10px;
margin-top: 10px;
   text-align: center;
font-size: 22px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 1px solid #BDBCDC;
}



#corps6
{

float: right;
   width: 300px;
   height:70px;
margin-right: 10px;
   padding: 10px;
margin-top: 10px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 1px solid #BDBCDC;
}



#corps7
{

float: right;
   width: 260px;
   height:120px;
margin-right: 5px;
   padding: 10px;
margin-top: 10px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".jpg");
   background-repeat: repeat-x;
   
   border: 1px solid #BDBCDC;
}




#corps1981
{

float: right;
   width: 300px;
   height:303px;
margin-right: 10px;
   padding: 10px;
margin-top: 10px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".JPG");
   background-repeat: repeat-x;
   
   border: 1px solid white;
}

#corps8
{

float: right;
   width: 260px;
   height:230px;
margin-right: 5px;
   padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".JPG");
   background-repeat: repeat-x;
   
   border: 1px solid white;
}


#corpspup
{




float: right;
   width: 300px;
   height:300px;
   padding: 10px;
  
margin-right:120px;
 
   
margin-top: 10px;
margin-bottom: 10px;
   text-align: center;
font-size: 20px;
   color: black;
   background-color: white;
   background-image: url(".JPG");
   background-repeat: repeat-x;
   
   border: 0px solid ;
}








.fin

{background-image: url("logo.JPG");
   text-align: right;
   font-size: 18px;
color: white;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}



.fin3

{background-color:white;
   text-align: center;
   font-size: 20px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}

.finjonathan222

{background-image: url(".JPG");
   text-align: center;
   font-size: 9px;
color: #19419D;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}



.finjonathan22

{background-image: url(".JPG");
   text-align: center;
   font-size: 9px;
color: red;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}

.finjonathan2

{background-image: url(".JPG");
   text-align: center;
   font-size: 10px;
color: #7D7EC9;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}


.finjonathan2009

{background-image: url(".JPG");
   text-align: center;
   font-size: 17px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}


.finjonathan

{background-image: url(".JPG");
   text-align: center;
   font-size: 11px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}



.finjonathandi

{background-image: url(".JPG");
   text-align: center;
   font-size: 11px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}
.finjonathan12345

{background-image: url(".JPG");
   text-align: right;
   font-size: 14px;
color: black;
      border-right: 18px solid white;

   font-family: Arial, "Times New Roman", Verdana, serif;
  
}

.finjonathan12345zz

{background-image: url(".JPG");
   text-align: right;
   font-size: 17px;
color: black;
      border-right: 18px solid white;

   font-family: Arial, "Times New Roman", Verdana, serif;
  
}


.finjonathanjb

{background-image: url(".JPG");
   text-align: center;
   font-size: 11px;
color: red;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
  
}



.fin2000

{background-image: url(".JPG");
   text-align: center;
   font-size: 12px;
color: white;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}





.fin2006

{background-image: url("arbre.JPG");
   text-align: right;
   font-size: 16px;
color: white;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}


.win

{background-image: url(".JPG");
   text-align: right;
   font-size: 20px;
color: black;
   
   font-family:Verdana, serif;
   
}


.fin2005

{background-image: url(".JPG");
   text-align: right;
   font-size: 10px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}



.fin2222

{background-image: url(".JPG");
   text-align: right;
   font-size: 10px;
color: black;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}














* {
  color: black;
   font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
   font-family: Tahoma` Verdana` Arial` serif;
}
a.info {
   position: relative;
   color: white;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; /* on positionne notre infobulle */
   left: 20px;

   background: blue;

   color: blue;
   padding: 3px;

   border: 1px solid green;
   border-left: 4px solid green;
}






.fin19

{background-image: url("logo.JPG");
   text-align: center;
   font-size: 9px;
color: white;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}




.fin1999

{background-image: url("space3.JPG");
   text-align: center;
   font-size: 9px;
color: white;
   
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}




.fin18

{background-image: url(".JPG");
   text-align: right;
   font-size: 9px;
color: black;
    background-color: white;
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}






.fin20

{background-image: url("space.JPG");
   text-align: right;
   font-size: 9px;
color: white;
  
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}

.fin212008

{background-image: url("texture4.JPG");
   text-align: right;
   font-size: 13px;
color: white;
  
   font-family: serif, "serif", serif, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}

.fin21

{background-image: url("texture4.JPG");
   text-align: right;
   font-size: 15px;
color: white;
  
   font-family: Verdana, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}


.texture1

{background-image: url("texture4.JPG");
   text-align: left;
   font-size: 15px;
color: white;
  
   font-family: Verdana, "Verdana", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}


.texture2

{background-image: url("texture2.JPG");
   text-align: left;
   font-size: 15px;
color: black;
  
   font-family: Verdana, "Verdana", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}


.texture4

{background-image: url("texture4.JPG");
   text-align: center;
   font-size: 15px;
color: black;
  
   font-family: Verdana, "Verdana", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}


.fin212121

{background-image: url("space222222.JPG");
   text-align: right;
   font-size: 15px;
color: balck;
  
   font-family: Verdana, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}

.21

{background-image: ;
   text-align: center;
   font-size: 16px;
color: blue;
  
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}