/* 
File:areaProductos

Estilos para la página contenedora de los productos de un área.

Note: Los colores usados son: 
	
	Título producto (texto) - #003366
	Título área (fondo) - #0099CC (azul turquesa)
	Título área (borde) - #00CCFF (celeste)
	
	Modificación - 2007 Ago 22 por Luis Apunte, creación del archivo.
*/


body
{
	background-color:#FFFFFF;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333333;
}

#contenedorPrincipal
{
	width:750px;
	height:auto;
	/*
	Esta es la manera de centrar un contenedor
	respecto a su contenedor padre, funciona en FireFox y IE.
	Para usar esta solución es necesario definir un valor para "width"
	
	Nota: text-align es una parche que solo funciona en IE pero no en FireFox
	*/
	margin: 0px auto 0px auto;
	padding:25px 0px 0px 0px;
	/*text-align:center;*/
	
	/*
	El path es relativo a este archivo, es decir a la carpeta donde esté.
	*/
	background-image:url(../Imagenes/fondoAreaProductos.jpg);
	background-repeat:repeat-x;
}

#menuLateral
{
	width:150px;
	float:left;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

/*
About:producto

Comprende las zonas (DIVs) producto y publicidad.
*/
#contenido
{
	width:598px;
	height:auto;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	float:right;
}

/*
About:producto

En esta área va toda la información de un producto en particular.
*/
#producto
{
	width:436px;/*Si no IE no entrara en quirk mode podríamos poner 446px*/
	height:auto;
	padding:0px 0px 0px 0px;
	margin:0px 0px 25px 10px;
	float:left;
	border:1px solid #CCCCCC;	
}

#tituloArea
{
	padding:0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	border-bottom:3px solid #00CCFF;
	clear:both;/*Para que no halla más que el título, nada a la izquierda y nada a la derecha.*/
}

#tituloArea h2
{
	font-size:11px;
	color:#FFFFFF;
	text-align:right;
	padding:5px 10px 3px 0px;
	margin:0px 0px 0px 0px;
	border-bottom:1px solid #006699;
	background:#0099CC;
}

#illustracion
{
	/*
	Tomando en cuenta el bug de IE respecto al modelo de caja,
	el ancho máximo de la imagen podría ser de 150px (170 - 10 de padding a cada lado).
	Pero se recomienda imágenes de 140 px del alto y máximo 140px de ancho.
	*/
	width:170px;
	height:auto;
	float:left;
	margin:25px 10px 45px 0px;
	padding:0px 10px 0px 10px;
	text-align:center;
}

#detalle
{
	width:216px;
	height:auto;
	float:right;
	margin:25px 10px 45px 0px;
	padding:0px 0px 0px 0px;
}

#detalle h1
{
	width:auto;
	text-align:left;
	font-size:17px;
	color:#003366;
	margin:0px 0px 0px 0px;
	padding:0px 5px 0px 5px;
	clear:both;
}

#detalle ul
{	
	width:190px;
	text-align:left;
	padding:0px 0px 0px 0px;
	margin:5px 0px 0px 0px;
	list-style-type:none;
	font-size:11px;
	color:#333333;
	background:none;
	float:left;
	/*border:1px solid #cccccc;*/
}

#detalle ul li
{
	width:190px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

#detalle ul li a
{
	font-size:11px;
	color:#006699;
	width:180px;
	display:block;
	padding:0px 5px 3px 5px;/*Para dar mas espaciado entre los links*/
	margin:0px 0px 0px 0px;
	text-decoration:none;
	text-align:left;
}

#detalle ul li a:hover
{
	color:#009966;/*antes #663300 un maron anaranjado chévere!*/
	text-decoration:underline;	
}


/*
About: info

Corresponde al estilo de la cada información que se proporciona del producto.
*/
.info
{
	clear:both;
	padding:0px 0px 20px 0px;
	margin:0px 5px 20px 5px;
}

.info .tituloInfo
{
	height:23px;
	background:#E4E4E4;
	border-top:1px solid #E4E4E4;
	border-right:1px solid #E4E4E4;
	border-left:1px solid #E4E4E4;
	border-bottom:1px solid #cccccc;
	margin:0px 0px 10px 0px;
	padding:0px 0px 0px 0px;
	clear:both;
}

.info .tituloInfo h3
{
	height:18px;
	font-size:12px;	
	text-align:left;
	padding:3px 0px 0px 0px;
	margin:0px 0px 0px 10px;
	float:left;
}

.info .tituloInfo a
{
	
	height:18px;
	display:block;
	padding:3px 0px 0px 0px;
	margin:0px 10px 0px 0px;
	float:right;
	font-size:11px;
	color:#006699;
	text-align:left;
	text-decoration:none;	
}

.info .tituloInfo a.iconGoTop
{
	padding-right:20px;
	background:url(../Imagenes/iconGoTop.gif) no-repeat center right;
}

.info .tituloInfo a:hover
{
	color:#009966;/*antes #663300 un maron anaranjado chévere!*/
	text-decoration:underline;
}

.info .detalleInfo
{
	clear:both;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

.info .detalleInfo p
{
	text-align:justify;
	line-height:1.5em;
	font-size:11px;
	margin:0px 10px 10px 10px;
	padding:0px 0px 0px 0px;
}

.info .detalleInfo ul
{
	text-align:left;
	padding:0px 0px 0px 0px;
	margin:0px 0px 10px 25px;
	list-style-type:square;
	font-size:11px;
	color:#333333;
}

.info .detalleInfo ul li
{
	line-height:1.5em;
	height:auto;
	padding:0px 0px 0px 0px;
	margin:0px 0px 10px 0px;
	text-align:left;
}

.info .detalleInfo a
{
	height:17px;
	width:auto;
	font-size:11px;
	color:#006699;
	text-align:left;
	float:left;
	clear:left;
	margin:0px 0px 0px 10px;
	padding:0px 0px 0px 0px;
	text-decoration:none;
}

.info .detalleInfo a:hover
{
	color:#009966;/*antes #663300 un maron anaranjado chévere!*/
	text-decoration:underline;
}

/*
About:publicidad

Esta Zona está dispuesta para mostrar publicidad de los laoratorios - empresas
participantes.
*/
#publicidad
{
	width:140px;
	height:auto;
	float:right;
	margin:0px 0px 0px 0px;
	padding:40px 0px 0px 0px;
	text-align:center;
}

#publicidad a
{
	display:block;
	text-decoration:none;
	text-align:center;
	padding:0px 0px 0px 0px;
	margin:0px auto 25px auto;
}

#publicidad a img
{
	border:none;
}