/****************************************************
 *  Feuille de style Ifremer 
 ****************************************************

/* Dans l'idéal, il faut une feuille de style 
   - sans commentaire (pb de poids)
   - adapté à la langue (monolangue, français, anglais)
   - compatible écran et imprimante
   - compatible IE5 et 6 et N7 (et N4 ?)
   - offrant un bon aperçu en mode "Normal" de FP2000 et + */ 

/********************************************************
 Spécifications pour écran
 ********************************************************/


/* - taille caractères non héritée du body (ok pour famille de police)
 *    quand DOCTYPE non présent (d'ou utilisation du sélecteur *  ) */

body { background-image: url('fond.gif'); background-repeat: repeat; 
               background-attachment: scroll; margin: 0 10px 0 0;}
             
*    { font-family: Arial, Helvetica, sans-serif; font-size: 10pt;} 

h1 	{font-size: 2em }
h2 	{font-size: 1.5em }
h3 	{font-size: 1.2em }
h4 	{font-size: 1em }
h5 	{font-size: .83em }
h6 	{font-size: 0.67em }

/* Ligne horizontale 
Attention : un pb avec IE 5 - Refaire un trait jaune large de quelques pixels */

hr           { height: 3px; background-image: url('traithoriz.gif'); border-style: none; 
               border-width: 0px; margin-right: 200px; background-position: 
               left 50% }

.hr2           { height: 3px; background-image: url('traithoriz2.gif'); border-style: none; 
               border-width: 0px; margin-right: 200px; background-position: 
               left 50% }
               
/* Traitement des puces */

ul li, ul li p        { list-style-image: url('puce1.gif')  }
ul li ul li, ul li ul li p  { list-style-image: url('puce2.gif') }
ul li ul li ul li, ul li ul li ul li p { list-style-image: url('puce3.gif') }

/* Elément supprimé n'occupant aucune place */	
.inutile {	 display : none; }

/* Elément non visible mais occupant de la place */	
.invisible { visibility : hidden; }

/* Si langue 
Ne pas oublier de rajouter l'appel aux styles nécessaires
Les 2 lignes suivantes n'ont pour but que de permettre 
de pouvoir sélectionner une langue depuis FrontPage, 
mais elles n'on aucun effet pratique*/
.fr { }
.en { }

/* développement pour paragraphe encadré  ? */

/* Gestion des ancres des liens */
/* Pas d'explication, mais pour un fonctionnement correct sur N7, ces commandes ont du être dupliquées */

a { text-decoration: none; color:rgb(0,0,255); font-weight: bold;}
a:hover { text-decoration: underline; content : attr(title);}
a:visited { color:rgb(20,100,200); }

/* ***************************************************
 * Définition de classes particulières
 *****************************************************
 * Bien que spécifique à l'écran, il faut les mettre dans cette partie commune, 
 * quitte à annuler leurs effets en impression,
 * ceci pour apparaitre dans les styles proposés sous FP */

/* Présentation du contenu de l'attribut "title" dans une bulle ; Mot souligné  */ 
.help {text-decoration: underline; cursor:help;}
	
/* Boite d'affichage avec un ascenceur - 300 de largeur */
.scroll300  {
	overflow:auto;
	width:300px;
	height:100px;
	text-align:left;
	}
	
/* Boite d'affichage avec un ascenseur - 600 de largeur */
.scroll600  {
	overflow:auto;
	width:600px;
	height:150px;
	text-align:left;
	}
	
/* Mise en page sur 2 colonnes */	
.colonne1 { float:left; clear:left; width: 47%;}

.colonne2 {  
	margin-left: 50%;
   border-left : 1px solid; 
	padding-left: 20px 
	/* pb sur IE 6 : marge gauche trop grande */ 
	}

/* Paragraphe justifié */
.justifie { text-align:justify;}

/* Paragraphe décalé */
.decale { margin-left : 30 px;}

/* lien externe (présentation d'une "main" de sortie du site) */  
.lienexterne a { background-image: url('externe.gif'); background-repeat: no-repeat; 
                 padding-left: 50px; background-position: center left }
*/              
/* Drapeaux associés à des langues
Il faut rajouter des espaces derrière l'élement pour l'insertion de l'image 
Car avec IE, la boite n'est pas aggrandi par le padding !

.lang-fr     { background-image: url('drapeau-fr.gif'); background-repeat: no-repeat; 
               background-position: right center }
.lang-en     { background-image: ; background-repeat: no-repeat; 
               background-position: right center }
*/

/* Gestion des ancres des liens */
/* Attention avec N7 pour affichage "top" si ces déclarations sont positionnées plus haut */

a { text-decoration: none; color:rgb(0,0,255); font-weight: bold;}
a:hover { text-decoration: underline; content : attr(title);}
a:visited { color:rgb(20,100,200); } 
               
/* ********************************************
 * Bordure haute "top" - Les titres
 **********************************************/ 

#top-ecran { height:25px; padding-top:3px; background:white;}  

#top a {font-weight: bold; font-size: 0.8em;}

#top-titre-site {font-size: 24px; font-weight: bold; color: rgb(128,128,128); 
               	background-image: url('bandeau-gauche.gif'); 
              	background-repeat: no-repeat; 
               	padding-left: 40px; padding-top: 25px }
               	/* La puce jaune a été insérée au sein de l'image */
               	
#top-maison a  { 	float: left;  /* Necessaire pour IE5 sur "inline" */
					background-image: url('maison.gif');
					background-repeat: no-repeat; 
					padding-left: 23px; margin-right:20px;
               	background-position: left center }
               
#top-menu a  	{ 	float: left;  /* Necessaire pour IE5 sur "inline" */
					background-image: url('separateur.gif');
					background-repeat: no-repeat; 
					margin-left: 20px; padding-left: 20px; 
               	background-position: left center }
               
#top-langue a { 	float: right; 
					background-image:url('minifleche.gif') ;
					background-repeat: no-repeat; 
					padding-left: 10px; 
					background-position: left center }
               
#top-bandeau { background-image: url('bandeau-fond.gif'); height: 64px; width: 100% }

#top-titre-page {font-size: 20px; 
			     background-image: url('pucejaune.gif');
				 background-repeat:  no-repeat;
				 border-bottom: 2px solid black; 
				 background-position: left center;
				 margin-left: 190px; margin-top: 10px;
               margin-right: 200px; margin-bottom : 25px;
               padding-left: 20px;}
              	
#top-logo {position:absolute; right:10px; top:23px;}

#top-guide {position:absolute; right:140px; top:62px;}
	

/* ********************************************
 * La navigation pour Remonter 
 **********************************************/
/* Voir détails de la solution retenue dans les explications 
sur les problèmes rencontrés dans la mise en place des feuilles de style*/

#navig-parents
  {position:absolute; top:95px; left:70; 
   width: 50px; height:32px;
   overflow:hidden;  /* la commande salvatrice  ! */}
	
html>body #navig-parents { position:fixed; }
   
#navig-parents nobr a
   {display:block; 	
   background-image : url('remonter2.gif');
   background-repeat: no-repeat;
   width: 40px; height:32px;
   padding:16px;
   color: rgb(228,222,212); /* pour non visualisation du point */}     
	  
/* ********************************************
 * La navigation pour accès aux pages filles
 **********************************************/
 
#navig-filles  { position:absolute; top:150px; left:0; width:160px;}
html>body #navig-filles { position:fixed; }

#navig-filles a {display: block; 
					text-decoration: none; color: black; font-weight: bold;
					font-size: 0.8em; width: 145px; 
					background-image: url('bouton-fille.gif'); 
               	margin: 3px 5px 1px 7px;
               	padding: 1px 3px 1px 7px;}
               
#navig-filles a:hover { background-image: url('bouton-fille-survol.gif'); }
               
#navig-filles br  { display:none; }  /* suppression des br générés en composition verticale */

/* On pourrait fusionner les 2 images de background en une seule. Cf solution GR  */

/* Attention : la directive "#navig-filles a" empêche toute navigation sous N4


/* ********************************************
 * Bordure inférieure "pied" 
 **********************************************/
 
/* Attention au chevauchement possible avec les boutons des pages filles */

#pied 		  	   {width: 160px;}
#pied-pictos 	   {text-align: center;}
#pied-date 	   {text-align: center; font-size: 8pt;}
html>body #pied  {position: fixed; top: auto; bottom: 0; left: 0;}
	
#pied a {font-weight: normal; font-size: 8pt;}


/************************************************
 * Spécifications pour l'impression
 ************************************************/

@media print {

body  {margin :0; }
    
*    { font-family: "Times New Roman"; font-size: 10pt;}     
	
/* P { text-align:justify;} pour justification */

a { text-decoration: underline; color:rgb(0,0,0); }

.lienexterne a { background-image: none;  padding-left: 0px;  }
.lienexterne a:after {content : " [" attr(href) "] ";font-family:monospace;}

h1, h2   {  page-break-before:always; }
	
/* Commandes de saut de page - Ne fonctionne pas sous N7 ? */
.saut   {  page-break-before:always; }

	
/* ********************************************
 * Gestion des bordures
 **********************************************/
 
#top-logo {position:absolute; left:1px; top:1px;}

#top-titre-site {
	position:absolute; left:150px; top:0px;
	font-size: 24px; 
	color: silver;
	background-image: none}
	
#top-titre-page { 
     font-size: 20px; 
     margin-left: 0px; margin-top: 0px;
     margin-right: 0px; margin-bottom : 20px; 
     padding:10px; 
     font-weight: bold;
     text-decoration: underline;
     border: none;  }

#pied-date {
	font-size: 8pt;
	margin-top : 50px;
	margin-right : 50px;
	text-align: right;}
	
#top-bandeau { background-image: none }

#top-ecran, #top-guide, #left, #navig-parents, #pied-pictos   
	{display:none}
	
/* Annulation de commandes spécifiques écran */
.help {text-decoration: none; cursor:default;}
.scroll300, .scroll600 {overflow:visible; width:auto; height:auto;}


}
/* Légende*/.
.leg1 {font-size: 10pt;}
.leg2 {font-size: 10pt; font-weight: bold;}
.leg3 {font-size: 8pt;}
.leg4 {font-size: 8pt; font-weight: bold;}