body
{

   margin:auto; 
   margin-top: 2px; 
   margin-bottom: 2px;   
   background-color:#a7f7ff;
   height:px;
   margin-left:2px; 
    
}


#en_tete

{
  width:1240px;/*
  /*border:solid red 1px;*/
  /*margin-bottom:2px;*/
  height:120px;
  background-image: url("pictures_bis/banniere_4_avril_2011.jpg");
  background-repeat:no-repeat;
  margin:auto;
  
  }
  
  
  
#header
{
width:px;
height:25px;
background-color:#41b1ff;
border:solid red 1px;
/*margin-bottom:3px;*/
margin:auto;



}



#menu
{
 
   float: left; 
   width: 150px; 
   font-size:20px;
   margin-left:1px;
   border:1px solid red;
   text-align:center;
   color:yellow;
   font-style:italic;
   background-color:#41b1ff;
   margin-top:1px;
   padding:5px;

}

#corps
{
   margin-left:165px; 
   margin-bottom: 2px; 
   padding:5px; 
   margin-top:4px;
   color:black;
   text-align:justify;
   font-size:15px;
   font-weight:bold;
   background-color:#3bf6ff;
   
}

.element_corps
{

width:98%;
margin:auto;
height:20000px;
border:1px solid green;
background-image:url("petites_annonces/clear_day.jpg");
text-align:justify;
font-style:italic;
font-weight:bold;
cursor: url("pictures/Bike.ani");
padding:1px;
}


.element_corps a /* Tous les liens se trouvant dans element_corps */
{
   color:black;
   text-decoration:none;
}

.element_corps a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:white;
   color:red;
}
.element_corps a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}

a
{
text-decoration:none;
font-style:italic;
color:black;
}


.cadre_news
{
width:99%;
margin:auto;
font-style:italic;
/*background-color:#bafffc;*/
background-color:white;
overflow:auto;
height:7000px;
padding:5px;
text-align:justify;
border:solid yellow 1px;
}

.diapos_accueil

{
width:400px;
height:300px;
margin:auto;
border:solid red 2px;
background-image:url("accueil/1.jpg");
}


.element_menu
{
   /*background-image: url("pictures/fondi.jpg"); */
   background-color:#d3edff;
   border: 1px solid black;
   margin:auto;
   font-weight:bold;
   font-style:italic;
   color:black;
   font-size:12px;
   padding-left:3px;
   padding-top:4px;
   padding-bottom:5px;
   text-align:left;
   margin-top:5px;
}

.element_menu ul/* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-type:square;
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom:5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, 
   mais tous les autres sont à 0px */
   font-style:italic;
   font-weight:bold;
   font-size:12px;
   color:red;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color:black;
   text-decoration:none;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:white;
   color:red;
}
.element_menu a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}

  .onglet a
{
   color:red;
   text-decoration:none;
   /*background-color:yellow;*/
    background-color:#cddfff;
}

.onglet a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:white;
   color:red;
}
.onglet a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}

  .onglet
   {
  float:right;
  margin-top:2px;
  list-style-type:none;
  margin-right:0px;
  margin-bottom:0px;
  font-size:12px;
   }
   
   .onglet li
   {
   float:right;
   border:solid blue 1px;
   background-color:yellow;
  
   color:red;
   margin-left:1px;
   margin-right:1px;
   padding:2px;
   }
   
   
#footer
{
   background-color:#41b1ff;
   padding:5px;
   text-align:center;
   color:black;
   border:2px solid yellow;
   font-size:12px;
   font-weight:bold;
   height:20px;
   /*width:750px; design extensible*/
   border:1px solid red;
   font-family:arial;
}

/*__________________________________________________UN PEU DE DECORATION_________________________________________________*/

 .vert
   {
   font-size:14px;
   font-weight:bold;
   font-style:italic;
   color:green;
   }
   

 .lyst
{
list-style-position:outside;
color:red;
font-style:italic;
font-size:1em;
list-style-type:square;
}
.lyst_2
{
list-style-position:outside;
color:maroon;
font-style:italic;
font-size:1em;
list-style-type:square;
}	


 a img
   {
   border:none;
  
   }
   
   
   .signature
   {
   text-align:right;
   font-family:georgia,arial,"trebuchet MS",verdana,serif;
   font-size:80%;
   font-weight:bold;
   font-variant:small-caps;
   color:brown; 
   }
   
   em
   {
   font-size:14px;
   font-weight:bold;
   font-style:italic;
   color:red;
   }

.first_letter
{
font-size:25px;
color:brown;
margin-right:2px
}

strong

{
color:blue;
text-align:center;
font-style:italic;
}


h1
   {
   font-size:30px;
   color:black;
   padding-bottom:0px;
   padding-top:15px;
   font-style:verdana;
   }
  
   h2
   {
   font-size:25px;
   color:black;
   padding:15px;
   font-style:"new roman";
   }
   
   
   
hr
{
color:maroon;

}

.souligne
{
text-decoration:underline;
}

h6
{
font-weight:bold;
font-size:12px;
font-family:verdana;
font-style:italic;
color:maroon;
}
.surligne
{
background-color:yellow;

}
.rayer
 
 {
 text-decoration:line-through;
 color:maroon;
 }
/*______________________________________________________________FORMULAIRE_______________________________________________________________*/

textarea
{

/*background-color:#cccccc;*/
 background-color:#ebfffe;
/*background-color:#fff161; */
color:black;
font-size:14px;
font-family:arial;
font-weight:bold; 
font-style:italic;

} 

  input

  {
  color:black; 
  /*background-color:#fff161;*/
  background-color:#ebfffe;
  font-style:italic;
  font-family:arial;
  font-weight:bold;
  font-size:12px;
  }

  
  
  

.titre
{
height:20px;
width:200px;
/*background-color:#1b60ff;*/
color:red;
font-family:arial;
font-style:italic;
font-weight:bold;
text-align:center;
font-size:11px;
background-color:#f7ff3b;
 
}

/*___________________________________________________REPORTAGES________________________________________________________*/

.sommaire_reportages
{
padding-top:10px;
width:400px;
height:150px;
margin:auto;
margin-top:25px;
text-align:left;
overflow:auto;
background-color:#adebff;
border:4px double blue;
}


.sommaire_reportages ul
{
   list-style-type:square;
   padding: 0px;
   padding-left: 30px; 
   margin: 0px; 
   margin-bottom:5px; 
   font-style:italic;
   font-weight:bold;
   font-size:14px;
   color:red;
   padding-top:20px;
}


/* ---------------------------------------------------------------------------------------LES PETITES ANNONCES-------------------------------------------------------------------------------------------------*/

.cadre_petites_annonces
{
width:400px;
color:blue;
height:100px;
text-align:left;
padding-top:10px;
font-size:13px;
border:solid maroon 1px;
background-color:#adebff;
margin:auto;
padding-bottom:5px;
overflow:auto;
border:4px double black;
}


.cadre_petites_annonces li
{
font-size:14px;
}

.cadre_petites_annonces a 
{
   color:red;
   text-decoration:none;
}

.cadre_petites_annonces a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:yellow;
   color:red;
}
.cadre_petites_annonces a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}

.fond_de_page_petites_annonces

{
width:98%;
/*background-color:#d9ff5b;*/
border:solid brown 2px;
margin:auto;
font-size:14px;
padding:8px;
background-color:#adc0ff;
background-repeat:repeat;
}



/*__________________________________________________________CSS CURSEUR__________________________________________________*/

.curseur_4
{
cursor: url("pictures/ecureuil.ani");
}

/*_________________________________________________________ PAGE ALBUM_____________________________________________________*/

.sommaire_album
{
width:375px;
height:250px;
margin:auto;
text-align:left;
overflow:auto;
background-color:#adebff;
padding-top:20px;
border:solid 2px blue;
}

.sommaire_album ul
{
   list-style-type:square;
   padding: 0px; 
   padding-left: 30px; 
   margin: 0px; 
   margin-bottom:5px; 
   font-style:italic;
   font-weight:bold;
   font-size:14px;
   color:red;
}

.diapo_album

 {
 width:200px;
 height:150px;
 margin:auto;
 background-image: url("diapo_album/1.jpg"); 
 border:;
 }

 
.sommaire_diaporama
{
width:450px;
height:130px;
margin:auto;
margin-top:25px;
text-align:left;
overflow:auto;
background-color:#adebff;
padding-top:20px;
border:4px double red;
}

.sommaire_diaporama ul
{
   list-style-type:none;
   padding: 0px; 
   padding-left: 30px; 
   margin: 0px; 
   margin-bottom:5px; 
   font-style:italic;
   font-weight:bold;
   font-size:14px;
   color:red;
}

 /*________________________________________________________________________________CADRE ADMINISTRATION_______________________________________________*/

.cadre_administration
{
width:450px;
height:130px;
color:black;
text-align:left;
padding-top:10px;
font-size:15px;
border:solid maroon 2px;
background-color:#adebff;
margin:auto;
overflow:auto;
}

.cadre_administration a
{
   color:red;
   text-decoration:none;
  
}

.cadre_administration a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:white;
   color:green;
}
.cadre_administration a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}
 

.cadre_securite
{
width:400px;
height:80px;
padding-top:5px;
font-size:15px;
border:solid blue 1px;
margin:auto;
padding-bottom:5px;
overflow:auto;
/*background-image:url("pictures/fond_reportage_album.gif");*/
background-color:#adebff;
}


.trombinoscope_dirigeants

{
 width:210px;
 height:255px;
 background-image: url("trombinoscope_dirigeants/jean_claude_president.jpg");
 margin:auto;
 border:solid blue 1px;
}



/*________________________________________________________CADRE SPONSORS__________________________________________-*/
.cadre_menu_sponsors
{
padding:5px;
width:220px;
height:100px;
background-color:#ffe423;
margin:auto;
margin-top:10px;
border:4px double black;
}

.cadre_menu_sponsors ul
{
list-style-type:square;
color:red;
}

.cadre_menu_sponsors a
{
color:black;

}

 /*______________________________CADRE RESPONSABLES MISE EN OEUVRE PROGRAMME PREVISIONNEL 2008_____________________________*/


  .cadre_responsables_programme_2008

 {
 width:300px;
 height:200px;
 background-image: url("organisateurs/coudannes.jpg"); 
 padding-left:px;
 margin:auto;
 padding-top:px;
 padding-left:px;
 border:solid red 3px;
 }

 
 .cadre_menu_programme
{
width:400px;
height:110px;
text-align:left;
padding-top:10px;
font-size:15px;
border:solid maroon 2px;
/*background-color:#ffef81 ;*/
background-color:#adebff;
margin:auto;
padding-bottom:5px;
overflow:auto;
}

.cadre_menu_programme a
{
   color:black;
   text-decoration:none;
}

.cadre_menu_programme a:hover /* Quand on pointe sur un lien du menu */
{
   background-color:white;
   color:red;
}
.cadre_menu_programme a:visited /* Quand on pointe sur un lien du menu */
{
 text-decoration:none;
 color:blue;
}
 
 
 /*_________________________________________VERSION FRANCAIS/CATALANE_____________________________________*/

 .gauche
{
float:left;
height:20px;
width:30px;
margin-left:5px;/*ajout*/
}

.droite
{
float:right;
height:20px;
width:30px;
margin-right:7px;
}


/*__________________________________________________INSTALLATION D'UNE VIDEO____________________________________________*/

.cadre_video

{
width:420px;
/*height:336px;*/
margin:auto;
border:solid yellow 2px;
}

/*_________________________________________________BANNIERE_____ALBUM_________________________________________________*/

.banniere_album

{
 width:612px;
 height:77px;
 background-image: url("banniere_album/fond_banniere_album.jpg"); 
 margin:auto;
 }

.imagegauche
{
float:left;
padding:0px;
padding-right:5px;
padding-bottom:0px;
} 
 
 .imagedroite
{
float:right;
padding:0px;
padding-left:5px;
padding-bottom:0px;
} 
 
 .dessous
   {
   clear:both;
   }
 
 .border
{
border:2px solid green;
background-image: url("pictures/fondd.jpg");
text-align:center;
font-weight:bold;
color:blue;
font-style:italic;
}  






/*________________________________________________________CALENDRIER DES SORTIES supprimer dès décembre les classes groupe j'utilise les tables___________________________________________________________*/

.calendrier_sorties

{
/*background-color:#baffc8;*/
border:solid blue 2px;
margin:auto;
width:280px;
height:100px;
padding:8px;
background-image: url("sorties/cadre_calendrier_sorties.jpg");
overflow:auto;

}

.groupe_1
{
/*width:600px;*/
width:90%;
background-color:#87ffd2;
border:solid red 2px;
margin:auto;
font-size:12px;
padding:8px;


}

.groupe_2
{
/*width:600px;*/
width:90%;
background-color:#baffc8;
border:solid red 2px;
margin:auto;
font-size:12px;
padding:8px;

}

.groupe_3
{
/*width:600px;*/
width:90%;
background-color:#b4edfe;
border:solid red 2px;
margin:auto;
font-size:12px;
padding:8px;

}

.semaine
{
/*width:600px;*/
width:90%;
background-color:#e1ffd3;
border:solid red 2px;
margin:auto;
font-size:14px;
padding:8px;
}

.menu_sorties
{
width:400px;
color:blue;
/*height:80px;*/
text-align:left;
padding-top:5px;
/*font-size:13px;*/
/*background-color:#d8bfff;*/
background-image:url("pictures/fond_reportage_album.gif");
margin:auto;
padding-bottom:5px;
/*border:1px double black;*/
}

.menu_groupes

{
width:250px;
color:blue;
height:80px;
text-align:left;
padding-top:5px;
/*font-size:13px;*/
/*background-color:#d8bfff;*/
background-image:url("pictures/fond_reportage_album.gif");
margin:auto;
padding-bottom:5px;
border:1px double blue;

}



/*___________________________________________________________________FIN CSS _CALENDRIER ____SORTIES______________*/
 
 
 
 
 
 
.cadre_diaporamas_alonzo

{
margin:auto;
border:solid 1px blue;
width:210px;
height:230px;
background-image:url("galerie_photos/alonzo_claude.jpg");

}


.raid_pyreneen
{
padding-top:10px;
width:500px;
height:150px;
margin:auto;
margin-top:25px;
text-align:left;
overflow:auto;
/*background-color:#adebff;*/
border:4px double blue;
background-image:url("reportages/fond_cadre.jpg");
}



/*__________________________________________________________VIDEO_____BOUCLE__________________________________________________*/


.videos_boucle
{
margin:auto;
border:solid blue 2px;
width:400px;
height:400px;

}

.videos
{
margin:auto;
border:solid black 18px;
width:320px;
height:240px;

}



.cadre_photos_souvenirs

{
margin:auto;
border:solid blue 2px;
width:600px;
height:414px;
background-image:url("photos_souvenirs/souvenir_1_bis.jpg");
}




/*_______________________________________________________________CADRE DIAPORAMA VIE DU CLUB __________________________________________________________________*/


.cadre_diaporama_vie_du_club
{
margin:auto;
border:solid blue 1px;
width:400px;
height:300px;
background-image:url("vie_du_club/ardechoise_1.jpg");
}



select

{
background-color:yellow;

}

/*____________________________________________________CSS_NOUVEL ONGLET_____________________________________________________________________*/
 
 
 
#nouvel_onglet, #nouvel_onglet 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 : 25px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
margin-right:13px;
}

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

#nouvel_onglet 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 */
        color: white;
        background: #17a;
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 100px; /* largeur */
}

#nouvel_onglet li /* Elements des listes */      
{ 
        float : right; 
        /* 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 #nouvel_onglet li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#nouvel_onglet li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 100px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#nouvel_onglet li ul li /* Élé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 #nouvel_onglet li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#nouvel_onglet li ul ul 
{
        margin    : -22px 0 0 100px ; /* 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 #nouvel_onglet li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}


/*______________________________________________________________________________________________________*/

#nouvel_onglet a:hover /* Lorsque la souris passe sur un des liens */    
{
       /* color: #000; /* On passe le texte en noir... */
        /*background: #fff; /* ... et au contraire, le fond en blanc */
		color: #fff;
        background: #4682B4;
        /*border-color: #000080 #87CEEB #87CEEB #000080;*/
		
		
}


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

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

/*________________________________________________________________________________FIN CSS ONGLET_________________________________________*/
 
 .cadre_best_of_2008

 {
 width:400px;
 height:300px;
 background-image: url("best_of_2008/1.jpg"); 
 margin:auto;
 border:solid black 2px;

}






.encadrement_parcours
{

width:75%;
border:solid maroon 1px;
margin:auto;
padding:8px;
background-image:url("pictures/fond_reportage_album.gif");
}
 
 
 
 /*_____________________________________________________________________________CSS  NOUVEAU MENU     VERTICAL_________________________________________________________*/



#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin: auto;
width: 14em;
font: normal 0.8em Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}

#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}

#navlist a#courant { border-color: #5bd #035 #068 #f30; }

#navlist a


{
width: 99%;
/* necessaire seulement pour Internet Explorer */
}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#courant:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}

#navlist a:active, #navlist a#courant:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}

 
 /*____________________________________________________________CADRE REPORTAGE VTT MAROC LES CHAPITRES_____________________________________________________________*/

.reportage_maroc_vtt

{
width:80%;
margin:auto;
font-style:italic;
background-color:#bafffc;
overflow:auto;
height:400px;
padding:5px;
text-align:justify;
border:solid brown 1px;
}

/*________________________________________JE GARDE POUR CONSTRUIRE LES PHOTOS D'IDENTITES_____________________________________________*/

.seul
{
margin-left:230px;
height:230px;
width:210px;
}

.titre
{
height:20px;
width:210px;
/*background-color:#1b60ff;*/
color:black;
font-family:arial;
font-style:italic;
font-weight:bold;
text-align:center;
font-size:15px;
background-color:#adebff;
padding-top:2px;
}



.seul_1
{
margin-left:230px;
height:255px;
width:420px;
}

.titre_1
{
height:20px;
width:420px;
/*background-color:#1b60ff;*/
color:black;
font-family:arial;
font-style:italic;
font-weight:bold;
text-align:center;
font-size:15px;
background-color:#adebff;
padding-top:2px;
}
 
 
 
 
 .bande_annonce
 
 {
 width:400px;
 height:18px;
 background-image: url(""); 
 border:solid red 1px;
 /*background-color:yellow;*/
 color:red;
 font-size:12px;
 padding:2px;
 margin:auto;
 background-image:url("images_news/f_80.gif");
 }

 
 .element_menu_sponsors
{
   /*background-image: url("pictures/fondi.jpg"); */
   background-color:#d3edff;
   border: 1px solid black;
   margin:auto;
   font-weight:bold;
   font-style:italic;
   color:black;
   font-size:12px;
   padding-left:0px;
   padding-top:1px;
   padding-bottom:1px;
   text-align:center;
   margin-top:5px;
}
 
 
 /*__________________________________________________tableau icone word adobe______________________________________*/
 
 .cadre_icone
 {
 width:50px;
 height:25px;
 border:solid black 1px;
 background:yellow;
 padding:3px;
 }