html 
{
	overflow: scroll; /* Pour forcer la scrollbar */
	}

body
{
background-color: #d7de5b; /*#ced632; #d3a049;
background-image: url("../images/pigna_tr2.jpg");*/
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;

 /*texte */
color: black; /* #69a8ef*/
font-family: verdana; /* */
font-size: 17px;
/*font-weight: bold;
line-height: 25px;  */ 
text-align: center; /* texte centré */
/* corps */
width: 760px;
   margin: auto; /* Pour centrer la page */
   margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.  */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
}

#page
{
	position: relative; /* on positionne le conteneur */
     margin-left: auto;
     margin-right: auto;
   	width:760px;
	}

img
{
	border: 0;
}

a
{
	color: #c14501;
	text-decoration: none;
}

p
{text-align: left;}

#footer
{
	position: relative;
}

#navigation
{
	list-style-type: none;
}

	/* page presentation*/ 
#photo
{
	position: absolute;
	top: 130px;
	left: 30px;
	height: 340px;
	width: 245px;
}

#couv
{
	position: absolute;
	top: 160px;
	left: 330px;
	width: 400px;
    text-align: justify;
	border-width: 1px;
	text-indent: 18px;
   }
   
#text_xavier
{
	position: absolute;
	top: 500px;
	left: 0px;
	width: 760px;
    text-align: justify;
   }
   
	/* page presse*/ 
	/* El top parte de 100 y va aumentando de 300 en 300 
	   El left es  30   400  de forma alternativa */ 
#presse1
{
	position: absolute;
	top: 100px;
	left: 30px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse2
{
	position: absolute;
	top: 300px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse3
{
	position: absolute;
	top: 600px;
	left: 30px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse4
{
	position: absolute;
	top: 900px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse5
{
	position: absolute;
	top: 1200px;
	left: 30px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse6
{
	position: absolute;
	top: 1500px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse7
{
	position: absolute;
	top: 1800px;
	left: 30px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse8
{
	position: absolute;
	top: 2100px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#presse9
{
	position: absolute;
	top: 2400px;
	left: 30px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	/* page publications*/ 
#livres
{
	position: absolute;
	top: 140px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#livres p
{text-align: center;	
	}
	
#repros p
{text-align: center;	
	}

#repros
{
	position: absolute;
	top: 140px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

/* Pagina publicaciones - Libros   livres_es.html  
	Hay que adaptar  left:0   left:400 segun vaya a izq o dcha
	left:210 si va en el centro porque hay libros impares 
	
	Adaptar tb la altura con top:    140 -> 440 -> 740
	
	Enero 2016. 
	ESTA PARTE YA NO SE USA. LAS PUBLICACIONES LIBROS SE HAN DISEÑADO CON CAJAS div Y YA NO HACE 
	FALTA TENER EN CUENTA ESTOS CALCULOS.  
	LAS ETIQUETAS couvX se pueden suprimir tras comprobar que no afectan a nada
 

#couv1
{
	position: absolute;
	top: 740px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}
#couv1 p
{
	text-align: center;	
}

#couv1 a
{
	color: black;
	text-decoration: none;
}

#couv2
{
	position: absolute;
	top: 740px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#couv2 p
{
text-align: center;
color: black;
}

#couv2 a
{
	color: black;
	text-decoration: none;
}

#couv3
{
	position: absolute;
	top: 440px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#couv3 p
{text-align: left;}

#couv4
{
	position: absolute;
	top: 440px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#couv4 p
{text-align: left;}

#couv5
{
	position: absolute;
	top: 140px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#couv6 p
{text-align: left;}

#couv6
{
	position: absolute;
	top: 140px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

#couv5 p
{text-align: left;}

*/ 

/* ------------------------------------------------------ */

#livre
{
	position: absolute;
	top: 140px;
	left: 160px;
	width: 400px;
    text-align: center;
	border-width: 1px;
}

#livre p
{text-align: left;}



#bouton1
{
	position: absolute;
	top: 140px;
	left: 0px;
	width: 100px;
    text-align: center;
	border-width: 1px;
}

#bouton2
{
	position: absolute;
	top: 140px;
	right: 0px;
	width: 100px;
    text-align: center;
	border-width: 1px;
}

/* page expositions*/ 


/* 
	Para añadir una nueva exposición hay que añadir en css.style una etiqueta par la imagen y otra para el texto
	primero la imagen y luego el texto 
	
	van alternando La posicion:
		...
		imagen left:0px    texto left:400px   
		imagen left:400px  texto left:0px
		imagen left:0px    texto left:400px 		
		...
		
	La altura inicial es top:100 para la imagen y top:250 para el texto 
	a partir de ahí se aumenta de 400 en 400
	El texto tiene que tener un top 150 superior a la imagen excepto en aquellas imagenes que tiene varios textos:
		expositions1 --> tienen el mismo top imagen y texto
		expositions2 --> tienen el mismo top imagen y texto
	

	Hay que cambiar el top de todas las imagenes y textos con lo que corresponda al añadir una nueva exposición. 
	Es un rollo pero estaba hecho así y para evitarlo habria que rehacer toda la pagina  	
	
	Hay que añadir por el final y cambiar los valores de las 3 ultimas
	
	la nueva 3º tendrá el valor de la antigua 3ª +400. se suma a imagen y a texto 
	La nueva 2ª el de la nueva tercera +450. Texto e imagen tienen el mismo top
	La nueva 1ª el de la nueva segunda +450. Texto e imagen tienen el mismo top	
	
	Tener cuenta que para la nueva 1 se copiara el esquema de la antigua 2. 
	Así ocupará la posicion contraria a la antigua 1, y se respetará la distribucion izquierda - derecha de todas las exposiciones teniendo en cuenta que arriba siempre se empieza por la izquierda. 
	
	Despues se va renumerando las etiquetas affiche y exposition hacia arriba incrementando 1.
	
	Tambien en css.style hay que añadir la definicion de estilo para las etiquetas 
	#expositionsXX h1
	#expositionsXX h2
	
		*/ 

/* -------- otra exposicion -------*/ 


#affiche21
{
	position: absolute;
	top: 100px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions21
	{
		position: absolute;
		top: 250px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
		

			
/* -------- otra exposicion -------*/ 

#affiche20
{
	position: absolute;
	top: 500px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions20
	{
		position: absolute;
		top: 650px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
 		
/* -------- otra exposicion -------*/ 

#affiche19
{
	position: absolute;
	top: 900px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions19
	{
		position: absolute;
		top: 1050px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
		


/* -------- otra exposicion -------*/ 
		
#affiche18
{
	position: absolute;
	top: 1300px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions18
	{
		position: absolute;
		top: 1450px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/ 

#affiche17{
	position: absolute;
	top: 1700px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions17
	{
		position: absolute;
		top: 1850px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/
	
#affiche16
{
	position: absolute;
	top: 2100px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions16
	{
		position: absolute;
		top: 2250px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
/* -------- otra exposicion -------*/ 

#affiche15
{
	position: absolute;
	top: 2500px;
	left: 0px;
	width: 360px;
	text-align: center;
	border-width: 1px;
}

	#expositions15
	{
		position: absolute;
		top: 2650px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche14
{
	position: absolute;
	top: 2900px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions14	{
		position: absolute;
		top: 3050px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche13
{
	position: absolute;
	top: 3300px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions13
	{
		position: absolute;
		top: 3450px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche12
{
	position: absolute;
	top: 3700px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions12
	{
		position: absolute;
		top: 3850px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche11
{
	position: absolute;
	top: 4100px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions11
	{
		position: absolute;
		top: 4250px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche10
{
	position: absolute;
	top: 4500px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions10
	{
		position: absolute;
		top: 4650px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche09
{
	position: absolute;
	top: 4900px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions9
	{
		position: absolute;
		top: 5050px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche08
{
	position: absolute;
	top: 5300px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions8
	{
		position: absolute;
		top: 5450px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche07
{
	position: absolute;
	top: 5700px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions7
	{
		position: absolute;
		top: 5850px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion -------*/

#affiche06
{
	position: absolute;
	top: 6100px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions6
	{
		position: absolute;
		top: 6250px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
	
/* -------- otra exposicion Nueva 4 - Antigua 3 -------*/

#affiche05
{
	position: absolute;
	top: 6500px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}

	#expositions5
	{
		position: absolute;
		top: 6650px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}

/* -------- otra exposicion Nueva 3 - Antigua 2 -------*/

#affiche04
{
	position: absolute;
	top: 6900px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}


	#expositions4
	{
		position: absolute;
		top: 7050px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
/* -------- otra exposicion Nueva 3 -------*/

#affiche03
{
	position: absolute;
	top: 7300px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}


	#expositions3
	{
		position: absolute;
		top: 7450px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
/* -------- otra exposicion Añadido Abril 2026  -------*/

#affiche02
{
	position: absolute;
	top: 7750px;
	left: 400px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}


	#expositions2
{
		position: absolute;
		top: 7750px;
		left: 0px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
/* -------- otra exposicion Añadido MAYO 2026 - Nueva 1 -------*/
#affiche01
{
	position: absolute;
	top: 8200px;
	left: 0px;
	width: 360px;
    text-align: center;
	border-width: 1px;
}


	#expositions1
	{
		position: absolute;
		top: 8200px;
		left: 400px;
		width: 360px;
		text-align: center;
		border-width: 1px;
	}
		
	
/* 	la nueva 3º tendrá el valor de la antigua 3ª +400. se suma a imagen y a texto 
/* 	La nueva 2ª el de la nueva tercera +450. Texto e imagen tienen el mismo top
/* 	La nueva 1ª el de la nueva segunda +450. Texto e imagen tienen el mismo top	
	
/* 	Tener cuenta que para la nueva 1 se copiara el esquema de la antigua 2. 
/* 	Así ocupará la posicion contraria a la antigua 1, y se respetará la distribucion izquierda - derecha de todas las exposiciones teniendo en cuenta que arriba siempre se empieza por la izquierda. 
*/

#expositions1 h1, #expositions2 h1, #expositions3 h1, #expositions4 h1, #expositions5 h1, #expositions6 h1, #expositions7 h1, #expositions8 h1, #expositions9 h1, #expositions10 h1, #expositions11 h1, #expositions12 h1, #expositions13 h1, #expositions14 h1, #expositions15 h1, #expositions16 h1, #expositions17 h1, #expositions18 h1, #expositions19 h1, #expositions20 h1, #expositions21 h1, #expositions22 h1
{	
	font-family: verdana; 
	font-size: 15px;
	font-weight: bold;
}


#expositions1 h2, #expositions2 h2, #expositions3 h2, #expositions4 h2, #expositions5 h2, #expositions6 h2, #expositions7 h2, #expositions8 h2, #expositions9 h2, #expositions10 h2, #expositions11 h2, #expositions12 h2, #expositions13 h2, #expositions14 h2, #expositions15 h2, #expositions16 h2,  #expositions17 h2, #expositions18 h2, #expositions19 h2, #expositions20 h2, #expositions21 h2, #expositions22 h2
{
	font-family: verdana; /* */
	font-size: 13px;
	font-weight: lighter;
}




	/* page contact*/ 
	#contact
{
	position: absolute;
	top: 200px;
	left: 200px;
	text-align: center;
	border-width: 1px;
	font-size: 20px;
	color: #c14501;
	font-family: lucida handwriting;
}

	/* tabla*/
.libros-tabla{
	display: table; 
	margin-left: auto; 
	margin-right: auto; 
	width: 720px; 
	text-align: center;
}

.libros-fila-completa{
	height: 320px; 
	width: 720px; 
}

.libros-fila-left{
	float: left; 
	height: 320px; 
	width: 360px;
}

.libros-fila-right{
	float: right; 
	height: 320px; 
	width: 360px; 
}
.libros-pie{
	clear: both; 
	height: 35px; 
	width: 720px;
}