/*
	Autor: Javier Carabantes
	Companyia: Establiments Vidal
	Data Inici: 24-12-2008
	Data Final: 08/01/2009
	e-mail: javicarabantes@hotmail.com
	
	Programación del código desde cero.
	Lee los comentarios en caso de modificación de la página
	Para cualquier duda enviame un email.
	
	Hay cuatro CSSs, uno para Internet Explorer, Otro para el resto de los exploradores,
	otro para impresión desde IE, y otro para impresión desde
	el resto de los navegadores.
*/

body {
	margin:auto;
	/*fondo gris clarísimo: background:#f5f5f5;*/
	background: url("./imatges/bg2.jpg");
}

/*capçalera indicamos el color de fondo y el borde*/
div#capçalera {
	background:#E8E8E8;
	border-style:none;
}

span#text_capçalera {text-align:center;}
span#imatge_capçalera1 {position:relative;}
span#imatge_capçalera2 {position:relative;left:0%;}

/*Definimos como será la clase imex (import-export) del index.html
(rojo y centrado)*/

.imex{
	color:red;
	text-align:center;
}


/*Definimos los enlaces de la tabla idioma*/
.idiomas td a{
	display:block;
	color:black;
	text-decoration:none;
	text-align:center;
	padding:0 20 0 20 px;
}

.idiomas td a:hover{
	display:block;
	background-color:#f5f5f5;
	font-size: 150%;
	border-style:solid;
	border-width:1 px;
	border-color:#e8e8e8;
}

/*padding-left:3% para que no se quede pegado al borde izquierdo de la página*/
div#menu-esquerra{
	padding-left:0%;
	}

/* Lo siguiente indica que todos los enlaces del menu no esten subrayados*/
div#menu-esquerra a{
	position: relative;
	left: 0%;
	text-decoration: none;
	color: black;
	}

/* Con la siguiente estructura logramos crear un menu a la izquierda a base de listas
fijamos la posición, e indicamos que tipo de punto queremos en el listado: none

Como es la versión imprimible, no queremos ver el menú (ul display:none;)*/
ul {
	display:none;
	position:absolute;
	width:20%;
	padding-bottom:50%;
	background-color:#D7D7D7;
	/*float:left;
	bottom:20%;*/
	list-style-type:none;
	border-style:double;
	border-width:3px;
	border-color:#A4A4A4;
	}
	
/*Conseguimos así que el circulo de la lista sea del mismo color que las letras.
con padding-right, conseguimos que no se pegue al borde la palabra distribuits*/
div#menu-esquerra li{
	color:black;
	margin-right:15px;
	text-indent: 3px;
}


/*Al poner el curso sobre los enlaces que se encuentran en el 
menu izquierdo, se formatearan*/
div#menu-esquerra li a:hover{
	background-color: #dedede;	
	color: black;
	}
	
	
div#menu-esquerra ul img{
	position:relative;
	left:6%;
	border-style:none;
}

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

/* con la siguiente estructura, estamos indicando que todos los enlaces para contacar
no esten subrayados*/
p.contacta a{
	text-decoration: none;
	color:#8c8c8c;
	}
	
/* El atributo Hover nos permite crear, formatear un enlace cuando el cursor este sobre
el enlace. De este modo solo nos va a cambiar los enlaces de "contacto" */
p.contacta a:hover{
	background: #f5f5f5;
	font-size: large;
	color: #8c8c8c;
	text-decoration: none;
	font-weight: bold;
	}

/* Con el id contain marcamos colores de letra, la posición 
y un margen derecho para que quede cuadrado como lo queremos.
con float:right marcamos que se vaya a la derecha, sin que se quede debajo 
del menu*/
div#contain{
	color: black;
	float:right;
	/*Disminuir width para que entre bien en Firefox*/
	width: 86%;
	padding-right: 40%;
	padding-top: 1%;
	/* Lo siguiente es para que quede cuadrado en IE*/
	position:absolute;
	right:0%;
	left:25%;
	}
	
div#contain p{
	text-indent:10%;
	/*text-indent para hacer la tabulación de la primera frase*/
	}
	
div#contain p:first-letter{
	font-size:200%;
	/*first-letter formatea en este caso, la primera letra, que este en <p> en 
	cada div que sea de la clase contain*/
	}
	
div#contain a{
	text-decoration:none;
	color:black;
}

div#contain a:hover{
	color:red;
}


/*Obtenemos que no haya espacio entre la letra y el borde
Obtenemos tambien que el borde sea una linea*/
div#contain table{
	border-spacing:0px;
	border-collapse:collapse;
}
div#contain td.productes{
	padding: 0 0 0 0 px;
}

div#contain td.titulo{
	text-align:center;
	font-weight:bold;
}

/*************************/
  /*CONTAIN2 para la tabla de productes distribuits*/
 
/* Con el id contain marcamos colores de letra, la posición 
y un margen derecho para que quede cuadrado como lo queremos.
con float:right marcamos que se vaya a la derecha, sin que se quede debajo 
del menu*/
div#contain2{
	color: black;
	float:right;
	/*Disminuir width para que entre bien en Firefox*/
	width: 69%;
	padding-right: 30%;
	padding-top: 1%;
	/* Lo siguiente es para que quede cuadrado en IE*/
	position:absolute;
	right:0%;
	left:10%;
	}
	
div#contain2 p{
	text-indent:10%;
	/*text-indent para hacer la tabulación de la primera frase*/
	}
	
div#contain2 p:first-letter{
	font-size:200%;
	/*first-letter formatea en este caso, la primera letra, que este en <p> en 
	cada div que sea de la clase contain2*/
	}
	
div#contain2 a{
	text-decoration:none;
	color:black;
}

div#contain2 a:hover{
	color:red;
}



/*Obtenemos que no haya espacio entre la letra y el borde
Obtenemos tambien que el borde sea una linea*/
div#contain2 table{
	border-spacing:0px;
	border-collapse:collapse;
}

/*Alineamos el texto que contiene cada celda arriba porque por 
defecto se centra verticalmente.*/
div#contain2 td.productes{
	vertical-align:top;
	padding: 10 0 0 5 px;
}

div#contain2 td.titulo{
	text-align:center;
	font-weight:bold;
	border-style:solid;
	border-width:1px;
	border-color:##E8E8E8;
}

div#contain2 b.titulo2{

	color:red;
}