/*
	Autor: Javier Carabantes Soler
	Empresa: Establiments Vidal
	E-mail: javicarabantes@hotmail.com
	Open Source 
	
	Cualquier duda o problema de la página envíe un e-mail.
	Para modificar el estilo, lea los comentarios.
*/


/* Imponemos un tamaño y un tipo de fuente y fuente alternativo a todo el  body
además, damos un margen de arriba y de abajo, todo el texto lo centramos y añadimos
una imagen de fondo. */
BODY {
   font: Times New Roman, Verdana;
   margin: 10 0 10 0px;
   text-align: center;
   background:url("./imatges/bg2.jpg");
}

/*Definimos como será la clase imex (import-export) del index.html
(rojo y centrado)*/
.imex{
	color:red;
	text-align:center;
}

/*Ponemos el padding para separar cada idioma entre ellos mismos*/
.idiomas td{
	padding:0 5 0 5px;
}

/*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;
}

/*Formateamos al poner el cursor sobre un enlace
de la tabla idiomas. El display block lo que genera es que al cambiar de color
de fondo, cambie toda la celda y no se deje un margen*/
.idiomas td a:hover{
	display:block;
	background-color:#f5f5f5;
	font-size: 150%;
	border-style:solid;
	border-width:1 px;
	border-color:#e8e8e8;
}

/*Hemos creado un contenedor, dentro de él se encuentran todos los otros Divs.*/
#contenedor{
   text-align: left;
   width: auto;
   margin: auto 10px;;
}

/*La cabecera contiene un color de fondo, con padding definimos el espacio
entre el borde del div y los elementos que tiene en su interior.*/
#cabecera{
   background-color:#E8E8E8;
   /*color: black;
   font-weight: none;*/
   padding: 3 3 3 10px;
}

/*Definimos que los enlaces que se encuentren en la cabecera (www.vidal.ad & email) 
sean de un color y sin subrayar.*/
#cabecera a{
	text-decoration:none;
	color:#8c8c8c;
}

/*Propiedad Hover, nada que comentar excepto que augmenta su tamaño*/
#cabecera a:hover{
	background: #f5f5f5;
	font-size: +18;
	color: #8c8c8c;
	text-decoration: none;
	font-weight: bold;
}

/*Cuerpo es otro contenedor, que recoje el menú izquierdo
y el contenido central*/
#cuerpo{
   margin: 10 0 10 0px;
}

/*Al menú izquierdo lo damos un ancho específico, y un color de fondo*/
#lateral{
   width: 160px;
   background-color: #999999;
   float:left;
}

/*En los siguientes atributos no hay nada que decir*/
#lateral ul{
   margin : 0 0 0 0px;
   padding: 0 0 0 0px;
   list-style: none;
}

#lateral li{
   background-color:#D7D7D7;
   margin: 2 2 2 2px;
   padding: 2 2 2 2px;
   font-weight: none;
}
#lateral a{
   color: black;
   text-decoration: none;
}
#lateral a:hover{
	display:block;
	background-color: #dedede;	
	color: black;
}

/*Esto sería el contenido, le damos un ancho específico y un espacio entre
los bordes (imaginarios) del div #principal, y los elementos que contenga dentro 
(padding)*/
#principal{
   margin-left: 170px;
   background-color: none;
   padding: 4 4 4 4px;
}

/* Hacemos una tabulación en cada párrafo*/
#principal p{
	text-indent:10%;
}

#principal p:first-letter{
	font-size:200%;
}

/*Creamos una línia fina*/
#principal table{
	border-collapse:collapse;
}

/*Separamos cada elemento (texto) de los bordes de los TDs*/
#principal td{
	padding: 0 20 0 20;
}

/*Alineamos verticalmente el texto de cada TD*/
#principal td.productes{
	vertical-align:top;
}

#principal td.titulo{
	text-align:center;
	font-size:90%;
	font-weight:bold;
	border-bottom:solid 1px #E8E8E8; 
	
}
#principal b.titulo2{
	color:red;
}