/*********************************************************/
/** Page de styles hibilag - architecture  **/
/*********************************************************/

	a:link { text-decoration:none; } 
	
/* pour hibis  */

				 /* hb2 rien que la réalité  */
 	hb3	{  font-family: "Comic Sans MS", Gorgia; color:#FF00FF; font-size: 2.4em; font-weight: big; font-style: italic }/* CURIOSITES, DRÔLES  */
 

/*********************************************************/
/*** BANDEAU - FOND, couleurs  bleu, blanc rouge ***/ 
/*********************************************************/

table.NC { background-image: url(lag-cor/sous%20surface%202.jpg); }

table.PO { background-image: url(lag-cor/sous%20surface%202.jpg); }

		/* QUESTION comment mettre aussi la deuxième couleur transparente ? */

			/* possibilité de mettre aussi le fond pour "body" en complétant le code : body { background-image: url(biblio/fond.jpg); } */

			/* c2 est utilisé pour "cenrer"  */
	.c3 { color: #0671f2; }
	.c4 { color: white; }
	.c5 { color: red; }
	.c6 { font-family: comic sans ms; } /* dans le texte html : <span class="c3">/</span><span class="c4">/</span><span class="c5">/</span><span class="c4"> </span>  */

/*********************************************************/

/* EN-TÊTE et titres */	 

	et1	{  font-family: "Comic Sans MS", Gorgia; color: #069F9F; font-size: 2.4em; font-style: italic; font-weight: big }/* Iles et Lagons  */
	et2	{  font-family: "Comic Sans MS", Gorgia; color: rgb(255, 255, 255); font-size: 1.8em; font-style: italic; font-weight: big }/* CURIOSIE, DROLES de  */
 	et3	{  font-family: "Comic Sans MS", Gorgia; color: #069F9F; font-size: 2.0em; font-style: italic; font-weight: big }/*  Lagons, coraux  */
	et4	{  font-family: "Comic Sans MS", Gorgia; color: rgb(255, 255, 255); font-size: 2.7em; font-style: italic; font-weight: big }/* SOMMAIRE  */
	et5	{  font-family: "Comic Sans MS", Gorgia; color: #f0d796; font-size: 1.6em; font-style: italic; font-weight: big }/* GROUPE HIBIS 3 SITES  */
	et6	{  font-family: "Comic Sans MS", Gorgia; color: rgba(235, 50, 50, 0.6); font-size: 1.4em }  	 /* SUITE PAGE  */
	et7	{  font-family: "Comic Sans MS", Gorgia; color: rgb(255, 255, 255); font-size: 1.6em } 		/* EMAIL  */
	et8	{  font-family: "Comic Sans MS", Gorgia; color: #879b82; font-size: 1.6em }		 /* MISE A JOUR  */



/*********************************************************/
/***  SURLIGNER  ***/ 
/*********************************************************/

	surl0	{  background-color: #ffe1dd  }		/* 255, 239, 213 (rose pâle) */
	surl1	{  background-color: #ffdab9  } 		/* peachpuff pêche */ 
	surl2	{  background-color: #fff5a0  }   	/* 255, 245, 160  jaune pale  */ 
	surl3 {  background-color: #ffb179  }	/* 255, 177, 121  orange pale  */ 
	surl4	{  background-color: #e6d7ff  }		/* 230, 215, 255, gris bleuté */ 
	surl5	{  background-color: #f0c2fc  }		/* 24O, 194, 252 rose mauve pale */
	surl6	{  background-color: #FFFFFF  }		/* 0, O, 255 blanc */
	surl7	{  background-color: #c5f9b0}		/* 200, 245, 170  vert */
	surl71	{  background-color: #E0F1E0  }	/* vert d'eau pale */	
	surl8	{  background-color: #f6dc9a  } 		/* 246, 220, 154, 0.5 jaune or */
	surl9	{  background-color: #fbe8d8} /* 250, 225, 208  rose pâle*/
	surl20	{  background-color: #e0e0e0  } 		/* 224, 224, 224   gris pâle  */
	surl21	{  background-color: #dcdcba }		/* 220, 220, 186 */
/*********************************************************/
/*** OMBRES et EFFETS ***/ 
/*********************************************************/

	omb0			{ text-shadow:.075em .075em grey; }
	omb1		{  text-shadow: 2px 2px; }												/* ombre natif  */
	omb2 	{  text-shadow: 2px 2px 2px #ffdab9; }  									/* ombre floue jaune  */
	omb3	{  text-shadow: 2px 2px 1px red, yellow -2px 3px 2px }/* rouge* deux ombres floues  */
 	omb4	{  text-shadow: 2px 2px 1px #2966dd, #ffdd2b -2px 3px 2px }/* beu* deux ombres floues  */
 glow { background: white; color: white; text-shadow: black 0px 0px 0.5em; }  
   glow2 { background: transparent; color: linen ; text-shadow: /* crimson */  #dc143c.2px .2px .5em; }  
   glow3 { background: white; color: linen ; text-shadow: #29ac2a  .2px .2px .5em; } 
   glow4 { background: transparent; color: #ff00ff ; text-shadow: #ffdd2b  .3px .3px .6em; } 




/*********************************************************/
/*** TITRES et couleurs ***/ 
/*********************************************************/
 
	ttr1	{  font-family: "Comic Sans MS", Georgia; color: rgba(235, 50, 50, 0.8); font-size: 1.4em; font-style: italic }   		/* cette page  rouge pale  */ 
	ttr2	{  font-family: "Comic Sans MS", Georgia; color: rgb(223, 0, 95); font-size: 2.0em ; font-weight: big; font-style: italic }   	/* portes..  orange  */ 
	ttr3	{  font-family: "Comic Sans MS", Georgia; color: #ea8100; font-size: 1.6em ; font-weight: big; font-style: italic }   /* façades.. orange  */ 
	ttr4	{  font-family: "Comic Sans MS", Georgia; color: #c80080; font-size: 1.4em }   		/* similaire  bordeaux */   
	ttr5	{  font-family: "Comic Sans MS", Georgia; color: #ea8100; font-size: 1.4em ; font-weight: big; font-style: italic } /* titre intermédiaire orange  */ 
 	ttb	{  font-family: "Comic Sans MS", Georgia; color: #0064f0; font-size: 1.2em }   	/* anglais*  bleu  */
	
	them  {  font-family: "Comic Sans MS", Georgia; color: #e4d9b0; font-size: 1.8em ; font-weight: big; font-style: italic }  /*  #f8726e */

/*********************************************************/
/*** BAS DE PAGEPOLICES.. ***/ 
/*********************************************************/ 

		comic {  font-family: "Comic Sans MS"; }
		comic12 {  font-family: "Comic Sans MS";   font-size: 1.2em }
		comic14 {  font-family: "Comic Sans MS";  font-size: 1.4em }
		comic16 {  font-family: "Comic Sans MS";  font-size: 1.6em }
		arial {  font-family: Arial;  font-size: 1.2em }
		
	space { letter-spacing: .6em; }  
		sz10 { font-size: 1.0em; }
		sz12 { font-size: 1.2em; }
		sz14 { font-size: 1.4em; }
		sz18 { font-size: 1.8em; }

		blanc { color: #ffffff }  /* blanc */  
		gristrc { color: #4a4a4a}   /* anthracite */   
		 grisfc   { color: #7f7f7f } 
		 griscl { color: #dcdcdc }  
		 
		 
		pourpre { color: #920093 }  	/* purple proche de bordo */	 
		mauve { color: #b000b0}
		orchide { color: #da70d6 }   
		orchidefc { color: #ba55d3}   
		violet  { color: #8a2be2 }  
		lievin  { color: #c80080 }   /* lie de vin  proche color:#cc0066  */
		bordo { color: #b00ba0 }  
		bordofc { color: #800080 }   


		bleu 	{ color: #2059ca}
		bleugris 		{ color: #1a48ba}  
		bleufc  { color: #0002bf}  
		bleupf { color: #0080c0 }
		bleupfc   { color: #3296c8 }  /* pacifique clair */
		bleugau  { color: #6c6eff }  	/* gauloise */6d3af3
		bleugaufc  { color: #6d3af3 }  	/* gauloise foncé */
		vert 	{ color: #00af00 } 
		vertmoy { color: #009501 }		
		vertpf   { color: #069F9F }  /* Pacifique */
		vertpfc { color: #008080 } 		/* teal  pacifique foncé*/
		vertfc { color: #006a01 }  		/* foncé */	

		verttfc { color: #007501 }  /* très foncé */	
		kaki   { color:#808000 }			
		
		jaunor { color: #fcee37 } 	 /* groupe */	
		jaune { color: #f1f61d }  
		jaunepl { color: #f6dc9a }  /* pale */
		caramel { color:  #cc6b00 } 
		caramelfc { color:  #aa5a00}   
		marron { color: #800000 }
		marronglc { color:  #663300; }  /* marron glacé */
		marronfc  { color: #400000 }

		brique { color:  	#af0000 } 
		crimson  { color: #dc143c }  
		orange { color: #ea8100 }  
		rougepl { color: #ff2222}  /* pale */	
		rose { color: #ff1493 }  
		corail { color: #ff5a1c }

/*********************************************************/
/*** PARAGRAPHES ***/ 
/*********************************************************/

	#just { text-align: justify; }
	
	#p80pc { width:80%;   padding:30px;  margin:auto; float:center }  /* on peut donner une valeur fixe : 500px */ 
 /*  Le paragraphe aura une largeur totale de 80% + 2*40 = 280 pixels et sera centré dans son élément parent. */
	#p70pc { width:70%;   padding:30px;  margin:auto;  }  /* on peut donner une valeur fixe : 500px */ 
							/*  Le paragraphe aura une largeur totale de 70 + 2*40 = 280 pixels et sera centré dans son élément parent. */
	#p60pc {   width:60%;   padding:30px;  margin:auto;  }  /* on peut donner une valeur fixe : 500px */ 
 							/*  Le paragraphe aura une largeur totale de 600 + 2*40 = 280 pixels et sera centré dans son élément parent. */
	div.c2 { text-align: center; }  	/* n'ajoute pas d'interligne  */

	
/******************************/
/* BORDURES tableaux, images  */
/******************************/
 
 						
  #bordg { border-width:1px 1px 1px 3px;  border-style:solid ;  border-color: transparent transparent transparent #ff40b3 ;  }

	/* dans la page htm ou mieux, dans ou à la fin du code de l'mage : div id="bordg">	*/

	
/***************************************************/
/*** FAIRE changer le texte AU SURVOL  ***/ 
/***************************************************/

a { color: #dc143c;}
a:hover { color: #ee82ee;}

/* dans la page html   <a> ???   </a>   */


/***************************************************/
/*** FAIRE APPARAITRE une image AU SURVOL  de texte, ***/ 
/***************************************************/

/* img au survol souris */  

	a.imag{ position: relative; z-index: 1; }  
	a.imag:hover{ z-index: 2; }  
	a.imag span{ display:none; }
	a.imag:hover span{ display:block; position:absolute; z-index: 3; top: 10px; left: 10px; } 

/* Dans la page htm */
/* <a class="imag" href=""> confection du bougna <span style="color: red;">  <img class="imag" style="position: absolute;"  src="NouvCal2/bougna3.jpg" border="0" alt="Mike" width="150" />
 </span></a><br />   note : imag href= permet d'y ajouter un lien vers une ul etc  */

/* -------------------*/ 
	
/* image, visible, non visible  */  

	.image span { visibility: hidden; }
	.image img:hover + span { visibility: visible; }
	
/* -------------------*/ 

/*  LEGENDE (bulle) au survol d'un texte, mot  */

	a { text-decoration: none; }
 	a:hover { background: none; }
	a span { display: none; }
	a:hover span { display: inline; position: absolute; margin:25px; left: 25px; width: 300px;
	border:1px solid #009900; background:#ffffff; text-align: center;  color: #ff0000; }


/* dans le body : <a href="#">MOT + éventuellement lien (remplacer # par l'adresse)<span> légende, explications..</span></a>  */


/* Info-bulle, coins ronds */ 
	.infobulle { text-decoration:none;  position:relative; } 

	.infobulle span { display:none;   -moz-border-radius:8px;   -webkit-border-radius:8px;   border-radius:8px;   color:black; 
  background-color: #eff1f3;   font-size:12px;   font-style:italic; } 

	.infobulle span img {   float:left;   margin:0px 8px 8px 0; } 

	.infobulle:hover span {   display:block;   position:absolute;   top:0;   left:0;   z-index:1000;   width:250px;   /* max-width:200px; */ 
  min-height:20px;   border:1px solid black;   margin:12px;   margin-left:32px;   overflow:hidden;   padding:8px; }
									
		/*  (hautement personnalisable, à votre convenance !)  */ 

		/* dans le html : !<a class="infobulle"><img src="BIBLIO/plus.jpg" alt=" ? " />  <span> bla   bla  bla <br /> alinéa  bla gras, size etc </span> </a>   */

		/*  Le texte d’aide (et sa mise en forme HTML) est à mettre entre les balises <span> et </span>  */

		
/*********************************************************/
/*** TABLEAUX, COLONNES, BLOCS ***/ 
/*********************************************************/

/* BORDS ARRONDIStableau/image bords arrondis <div id="coin">  <p>texte </p></div> */

 .coinrond {border-top: 1.5px solid #c96396; border-left: 1.5px solid #c96396; border-right: 6px solid rgba(201, 99, 150, 0.6); border-bottom: 8px solid rgba(201, 99, 150, 0.6); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } 


/* COLONNES  */	
#conteneur3 { width: 100%; -webkit-columns: 3 auto; -moz-columns: 3 auto;  columns: 3 auto; -moz-column-gap: 40px;  -webkit-column-gap: 40px;  column-gap: 40px;  }

	#conteneur p { margin: 5px; background-color: ; }
  	
#conteneur2 { width: 100%; -webkit-columns: 2 auto; -moz-columns: 2 auto;  columns: 2 auto; -moz-column-gap: 40px;  -webkit-column-gap: 40px;  column-gap: 40px;  }
   
#conteneur6 { width: 100%; -webkit-columns: 6 auto; -moz-columns: 6 auto;  columns: 6 auto; -moz-column-gap: 40px;
  -webkit-column-gap: 40px;  column-gap: 40px;  }
   
	
/* dans la page : <div id="conteneur2 ou 3"> <div id=#conteneur p">  
	<p> texte normal .....</p>  <p>texte normal .....</p>  <p>texte normal .....  </p></div> 	 */ 

/*********************************************************/
/*** PIED DE PAGE ***/ 
/*********************************************************/

	
	fs1	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: rgb(228, 135, 57); font-size: 1.5em; font-weight: bold; font-style: italic;} /* suite  */ 
	fs2	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: rgb(255, 255, 255); font-size: 1.8em; font-style: italic; }/* Sommaire  */
	fs3	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: rgb(255, 255, 255); font-size: 1.8em; font-style: italic;  } 		/* pour Curiosités" et pages similaires  */
	
	them  {  font-family: "Comic Sans MS", Georgia; color: #DACC94 ; font-size: 2em ; font-weight: bold; font-style: italic }  /* #f8726e  */
	 
	ft0	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: #ffffff ; font-size: 1.4em }	/* pied page  */
	ft1	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: #ffffff ; font-size: 1.4em }	
	ft2	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: #3d9959 ; font-size: 1.2em }  /* pied page curiosités, drôles de chose */

	ft5	{ font-family: "Comic Sans MS", Calibri, Gorgia; color: #3296c8; font-size: 1.4em } 
	ft6	{  font-family: "Comic Sans MS", Calibri, Gorgia; color: #bc0baa; font-size: 1.2em }  /* pied page histoire, vie sociale, paysages..  */