/* cette feuille de style est la feuille de style commune à toutes les skins */


/* redéfini le body (CAD le style de base) de toutes les pages HTML du site */
body {
   font-family: verdana, 'Bitstream Vera Sans', 'Lucida Grande', sans-serif ;
   text-align: justify;
   /* 1er partie de " CSS HACK ", code CSS permettant de jouer sur des bugs de
   IE pour créer un effet de frame équivalent à " position :fixed ", commande 
   CSS (pourtant standard) non reconnue par IE pour windows - Nécessite aussi
   une définition spéciale de ".menu" (bas de page), et une definition d'un
   style div.fond gérant toutes les pages sauf le menu - En savoir plus :
   http://devnull.tagsoup.com/fixed/  */
      overflow-y: hidden;
      margin: 0 0 0 0%;
   /* la ligne " padding " ne fait pas partie du hack*/
      padding: 0 0 0 0%} 
html > body {overflow-y: auto} /* annule le hack pour Fx 1.5 et supérieur */
/* fin de la redéfinition du body */

a:hover {color:purple ; text-decoration:none}

/* définition du style en dehors du menu - 2ième partie ce la "CSS Hack" 
Ce style englobe toutes les pages, sauf le menu */
div.content {
  height: 100%;
  overflow-y: auto; 
  padding : 3% ; margin:0}


/* style boite affichant des photos sur la même ligne, en réglant l'affichage sur la taille écran - le @media screen cache l'instruction à netscape 4, qui l'interprète très mal */
@media screen{ 
.deuximages,.troisimages,.quatreimages,.cinqimages {
   float:left;
   vertical-align: top ;
   text-align: center;
   margin: 2px 1% 0 2px;
   font-style: italic;
   font-size : 12px}

.deuximages {width: 47%}
.troisimages {width: 31%}
.quatreimages {width: 23%}
.cinqimages {width: 18%}

.deuximages img,.troisimages img,.quatreimages img,.cinqimages img {width : 100%}
} /*fin media screen*/

.spacer {clear: both}
/* fin de la définition du style boite d'affichage de 2 photos par ligne */


/* -----------Style de la barre de navigation */
   /* cette 1er partie du style marche dans tous les navigateurs*/
.menu, .menu_page1 {      
   width: 100%; 
   padding : 0px;
   margin: 0px;
   left: 0%;
   right:0%; 
   background:url(bouton_menu1.png) white bottom;
   bottom : -1px }

   /* cette partie du style n'est prévue que pour Microsoft Internet Explorer :
      elle passe dans tous les navigateurs, mais sera écrasée par la prochaine
      instruction, sauf dans IE5-6 */
    .menu, .menu_page1 {position: absolute}
   /*Définition comprise par Opera, Mozilla et Netscape 6 et y écrasant le 
    " position:absolute ". Permet au menu de rester fixes dans la page lorsqu'on
    utilise l'ascenseur, en utilisant la fonction standard " position :fixed ".
    Le " > " est non compris par IE5-6, et le " position :fixed " n'y remplace
    Donc pas le " position :absolute " */
body>.menu, body>.menu_page1 {position:fixed}

/* général à tous les navigateurs*/
.menu ul, .menu_page1 ul  {
      display:table ; 
      border-collapse:collapse ; 
      width:99%}
/* cacher à IE. Sinon, bien que non compris par IE, display :table-cell empêche dislay:inline de fonctionner */
.menu ul>li, .menu_page1 ul>li {display:table-cell}

/* le reste est général à tous les navigateurs*/
.menu li, .menu_page1 li {
      list-style-type: none; 
      width:10.5% ; 
      display:inline ;
      text-align:left ; 
      margin:0; padding: 0 ; 
      font-size: 11pt}
.menu ul, .menu_page1 ul {margin:0 ;padding:0}

.menu a, .menu_page1 a {display:block ; text-decoration:none ; color:black ; padding:1px 0 2px 0 ; margin:0 ; 
border-top:1px groove gray; border-bottom:1px groove gray ; border-left:1px groove gray}

.menu a:hover, .menu_page1 a:hover {color:black ; background: url(bouton_menu2.png) top ; border-top:1px solid gray}

.menu a:active, .menu_page1 a:active {color:gray ; background: url(bouton_menu1.png) bottom}

.menu span, .menu_page1 span {padding:5px 0 0px 22px ; margin:0}

/* -----------fin Style de la barre de navigation */


/* Style pour surligner les nouveautés dans la 1er page*/
@media screen { /* non reconnu par Netscape 4*/
.new {
    border : 1px solid black;
    background-color: #FCFCB6;
    margin: 0 0 0 3px;
    padding: 0 3px 0 3px;
    font-size: 6pt;
    font-weight: bolder}
}

/*Style pour la zone " auteur de l'article "*/
.auteur {text-align: center; margin-bottom: 15px}

/* citations */
blockquote {font-weight: bold ; padding: 0 2% 0 3%}


/*gêre la partie de l'affichage de la liste du tableau de la 1er page commun à toutes les skins*/
.tableau_1er_page ul {margin :0 0 0 22px ;padding :0 ; text-align :left}


/*gêre le fond du lien greenpeace, sur la 1er page du site */
.greenpeace{
   margin: 0 0 0 1%;
   xbackground-image: url(fond_greenpeace.jpg); background-color:white ;
   text-align: center;
   font-size: 14px;
   width: 98%;}


/* définition du style des listes de liens vers d'autres sites*/
.liens li {list-style-image: none ; list-style-type: none; padding: 0 0 0 2%}


/*définition de la largeur d'affichage de la bannière, sur la 1er page*/
.banniere {width :90% ; margin-left :5%}


/*style de centrage - remplace la balise center*/
.center {text-align :center ; margin :auto}


/* permet d'afficher les images avec lien sans l'encadrement standard */
 a img {border:none} /* les images avec des liens n'ont pas de bordure */
	/* cas particulier : les images dans les span (galleries de photos) */
       span a img {border:2px solid white} 
       a:hover {border:0px } /*hack pour IE */
       span a:hover img {border:2px #336699 dotted}

/* styles d'emphase */
em {font-style: normal ; text-decoration:underline}
strong {font-weight:bold}


/* styles d'habillage de certains liens internes en images */
a.dendro_article , a.dendro_especes , a.experiences_repro , a.nourriture_teigne {
   text-decoration: none ;
   display:block ;
   width:350px ;
   height:32px}

a.dendro_article {background: url(article_dendrobates.gif) no-repeat}
a.dendro_article:hover {background-image: url(article_dendrobates2.gif)}

a.dendro_especes {background: url(especes_dendrobates.gif) no-repeat}
a.dendro_especes:hover {background-image: url(especes_dendrobates2.gif)}

a.experiences_repro {background: url(repro_dendrobates.gif) no-repeat}
a.experiences_repro:hover {background-image: url(repro_dendrobates2.gif)}

a.nourriture_teigne {background: url(articles_teignes.gif) no-repeat}
a.nourriture_teigne:hover {background-image: url(articles_teignes2.gif)}

/* fin styles d'habillage des liens internes dendrobates */


/* styles gérant des affichages d'images sans définir leurs tailles */
.left {float:left ; margin-right:10px ; vertical-align: top ; text-align: center; font-style: italic; font-size : 12px}
.right {float:right ; margin-left:10px ; vertical-align: top ; text-align: center; font-style: italic; font-size : 12px}
/*fin styles */

.rouge {color:red}
.vert {color: #339933}


h3 {
   text-align :center ;
   margin-left :25% ; 
   width :50% ; 
   background-color : #ccccff;
   line-height: 150%}


/* style pour les mots définis par la balise dfn, avec l'attribut " title " */
dfn {font-style:normal ; color: #993366; border-bottom-width:1px ; border-bottom-style:dashed ; cursor:help}


/* style pour la pub firefox */
.centrer-firefox {text-align :center ; margin:auto ; margin: 10px }
.firefox,.licence { 
  text-align :center ;
  border: #9cb4ce solid 1px ;
  width : 90% ;
  -moz-border-radius:10px;
  font-size:85% ;
  background-color: #eff4fa ;
  margin:auto ; margin-bottom:30px ; margin-top :20px}
.firefox {background:url(bg_firefox.gif) no-repeat 0px 0px #eff4fa}
.firefox a:hover {color:purple ; text-decoration:none}


/* Stylage des liens externes */
.francais {	font-weight:bold ; 
		padding-left:40px ; 
		background: url(francais2.gif) no-repeat left; 
		line-height:24px} 
.anglais {	font-weight:bold ; 
		padding-left:40px ; 
		background: url(anglais2.gif) no-repeat left; 
		line-height:24px}


/* style de la zone de recherche google */
input#q {background:url(chercher.png) no-repeat white}
input#q:hover {background:#F0F0FF url(none)}
input#q:focus {background:#F0F0FF url(none)}