@charset "UTF-8";
/* CSS Document para Sitio HMS v2 */

body	{						/* se resetea el sitio para que funcione en cualquier navegador */
	background: #333;
	margin:0;
	padding:0;					/* margen interior de los objetos */
	
}

#contenedor	{
	width:960px;
	margin: 0 auto;				/* margenes de forma profesional */
	background:#000000;
}

#header	{
	width:960px;
	height:150px;
	float:left;
	background: url(../img/headerbg_hms-01.png) repeat-x;	/* Optimización de imágenes para la web. La imágenes es un "palito" vertical degradado que se repite hacia la derecha */
	margin-bottom:10px;
}

#headerNoticias	{
	width:960px;
	height:150px;
	float:left;
	background: url(../img/headerbg_hms-02.png) repeat-x;	/* Optimización de imágenes para la web. La imágenes es un "palito" vertical degradado que se repite hacia la derecha */
	margin-bottom:10px;
}

/**************************************** ESTILOS DEL MAIN */

#main	{
	width:960px;
	height:auto;	/* no es necesario, por defecto es auto si no se espeifica */
	float:left;
	background:#333333;
	/*background:url(img/mainbg_hms.png) repeat-y;*/
	min-height:354px;	/* define el alto mínimo */
	}
	


	#contenidosTextosAncho{
		width:956px;
		height:494px;	
		float:left;
/*		min-height:494px;	  define el alto mínimo */
		background:#000;
		margin:0px 0px 0px 0px;
		border:2px solid #666;
		overflow:scroll;
	}
	#contenidosTextosAncho.galleria { overflow:hidden !important;}
	
	#contenidosGraficos.noticias	{
		width:500px;
		height:354px;	
		float:left;
		margin-right:10px;
		background:#000;
	}
	
	#contenidosTextos.noticias	{
		width:446px;
		height:350px;	/* Se elimina el "auto" y se reemplaza por el alto delas fotos 330 + 10 de márgenes (top y bottom) y 2+2 px de borde */
		overflow:scroll;
		float:left;
		background:#FFFFCC;
		border:2px solid  #0C0;
	}
		

	#contenidosTextosAncho.noticias {
		background:#FFFFCC;
		border:2px solid  #0C0;
		height:auto;
	}

	#contenidosContacto	{
		width:956px;
		height:494px;	
		float:left;
		background:#000;
		margin:0px 0px 0px 0px;
		border:2px solid #666;
	}


		#contenidosMapa	{
			width:455px;
			height:494px;	
			float:left;
			margin:0px 0px 0px 0px;
		}
		
		#contenidosMapa iframe{
			margin-left:18px;
		}
		
	
		#contenidosFormulario{
			width:501px;
			height:494px;	
			float:left;
			margin:0px 0px 0px 0px;
	}

/**************************************** ESTILOS DEL FOOTER */

#footer	{						/* Identificador footer. Cuaquier identificador con el nombre footer tendrá las siguientes propiedades */
	width:960px;
	height:65px;
	float:left;
	margin-top:10px;
	background: url(../img/footerbg_hms.png) repeat-x;
	
}

	#footer_left	{			/* Identificador footer_left. Aquí se incluye el Copyright */
		width:450px;
		height:45px;
		float:left;
		padding-top:20px; 		/* Margen interno del div footer_left */
	
	}
	#footer_right	{			/* Identificador footer_right. Aquí se incluye el boton de audio. */
		width:450px;
		height:45px;
		float:left;
		padding-top:20px; 		/* Margen interno del div footer */
		margin-left:10px;
		
	}

#footer_left p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFF;
	margin:0 0 0 10px;
}


/**************************************** TITULOS */


h1	{
	width:370px;
	height:150px;
	margin:0 0 0 0;
	color: #FFF;
	background:url(../img/LogoHMSSFondoTranparente-350x150.png);
	text-indent:-9999px;	/* Mandamos el texto al fondo y aparece la imágen */
	float:left;
}

h1.research
{
	width:500px;;
	height:150px;
	margin:0 0 0 0;
	color: #FFF;
	background:url(../img/LogoHMSS_R&DC_FondoTranparente-500x150px.png);
	text-indent:-9999px;	/* Mandamos el texto al fondo y aparece la imágen */
	float:left;
}

h1.noticias
{
	width:500px;;
	height:150px;
	margin:0 0 0 0;
	color: #FFF;
	background:url(../img/LogoHMSS_alDia_FondoTranparente-500x150px-04.png);
	text-indent:-9999px;	/* Mandamos el texto al fondo y aparece la imágen */
	float:left;
}

h2 {
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;	 
	float:left;
	margin:0 0 20px 5px;
	width:595px;				/* Este ancho es para que no haya texto de p al lado del h2. el número es 600 - 5 */
}



				
/**************************************** CONTENIDOS TEXTOS (BARRA IZQUIERDA) */				

#contenidosTextosAncho img	{
	border: 2px solid #666;
	margin:0 20px 20px 20px;	
}


#contenidosTextosAncho img.derecha	{
	margin:0 0 20px 20px;	
	
}

#contenidosTextosAncho h2, #contenidosTextos h2 {
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;	 
	float:left;
	margin:10px 20px 20px 20px;
	width:914px;				/* Este ancho es para que no haya texto de p al lado del h2. el número es 954 - 20 - 20 */
}

#contenidosTextosAncho h2.noticias, #contenidosTextos h2.noticias {
	color: #333;
}

#contenidosTextos h2.noticias {
	color: #333;
	width:406px;
}

#contenidosTextosAncho h3, #contenidosTextos h3	{
	font-size:15px;
	font-family: Arial, Helvetica, sans-serif;	 
	margin:20px 20px 20px 20px;
	float:left;
	color: #F60;
	width:914px;			
}

#contenidosTextosAncho p{
	color: #FFF;
	margin:10px 20px 10px 20px;
	text-align: justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	float:left;
	width:914px;
	}
	
#contenidosTextosAncho h3.noticias, #contenidosTextos h3.noticias{
	text-align:justify;	
	color:#003300;
	line-height:20px;
	margin: 5px 20px;
}

#contenidosTextos h3.noticias{
	width:406px;
}

#contenidosTextosAncho p.noticias, #contenidosTextos p.noticias, {
	/*color: #fff*/;
	color:#003300;
	margin:10px 20px 10px 20px;
	text-align: justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	float:left;
	width:914px;
}

div.calendario {background:url(img/black-002-loading.gif) no-repeat 50% 50%;float:left; height:494px; width:90%; margin-left:5%;margin-top:0; display: none; }

a.calendario, a.pod	{ color:#c30; text-decoration:none; margin:5px 20px 5px 20px; text-align: justify; font-family:Arial, Helvetica, sans-serif;
	font-size:15px; float:left; padding-left:5px; padding-right:5px; display:block; cursor: pointer; width:50%; 									/* Con este ancho evito que el menú se despliegue hacia el lado */
}



#contenidosTextos p.noticias	{color:#003300;	margin:10px 20px 10px 20px;	text-align: justify;font-family:Arial, Helvetica, sans-serif; float:left;
	width:406px;font-size:13px; line-height:13px; overflow:scroll;}

	#contenidosTextosAncho p a, {				/* atributos de los enlaces (etiqueta a) que estén drentro de los párrafor de div contenidos */
		text-decoration:none;
		color: #c30;
	}
	
	#contenidosTextosAncho p.destacados	{  	/* clase destacados */
		width:auto;
		color:#FFFFFF;
		font-weight:bold;			/* textos en negrita */
		margin-top:10px;
		text-align:center;
		background:#f60;
	}
	
	#contenidosTextosAncho a.destacados	{
		width:410px;
		display:block;	
	}
	
	#contenidosTextosAncho a.destacados:hover, a.calendario:hover	{
		color:#FF0;
		background:#F30;
	}
	
	#contenidosTextosAncho p.noticias	{  	
		
	color: #333;
	margin:20px 20px 20px 20px;
	text-align: justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:13px;
	float:none;
	width:914px;
	}

	
#contenidosTextos img	{
	border: 2px solid #666;
	float:left;
}

#contenidosScroll p	{
	color: #fff;
/*	margin:0px 20px 0px 20px;*/
	text-align: left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	float:left;
	width:380px;
}

/**************************************** CONTENIDOS TEXTOS CONTACTOS */

#contenidosContacto h2 {
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;	 
	float:left;
	margin:10px 20px 20px 20px;
	width:455px;				
}




#contenidosContacto h3	{
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;	 
	margin:20px 20px 10px 20px;
	float:left;
	color: #F60;
	width:455px;			
}

#contenidosContacto p	{
	color: #fff;
	margin:10px 20px 10px 20px;
	text-align: left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	float:left;
	width:auto;
}

#contenidosFormulario table.contacto	
		{
			margin-left:20px;
			font-family:Arial, Helvetica, sans-serif;
			font-size:15px;
			font-weight:normal;
			position:absolute;
			color:#FFF;	
		}
		
#contenidosFormulario td.contacto	
		{
			font-family:Arial, Helvetica, sans-serif;
			font-size:15px;
			font-weight:normal;
			color:#FFF;	
		}
		
#contenidosFormulario table.contacto tr td:hover
		{
		color: #fff;
		background:none;
		}	
		
/**************************************** CONTENIDOS TEXTOS Galleria con texto izquierda */

#contenidosTextosGalleria{ width:256px; 	height:494px;	float:left; background:#000; margin:0px 0px 0px 0px; overflow: hidden !important; }
#contenidosTextosGalleria h3 {font-size:0.8em; font-family: Arial, Helvetica, sans-serif;	 margin:20px 10px; float:left; color: #F60; width:236px; }
#contenidosTextosGalleria p{color:#FFF; 	margin:10px 10px; text-align: justify; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; float:left; width:236px;}
#contenidosTextosGalleria p.tip{ color:#FF6; font-size:0.7em;}
#galleria{ overflow:hidden;}


/**************************************** VISUALIZADOR DE VIDEOPODCAS Videos centrados horizontalmente */
#wrapper_pod { width:576px !important; height:432px !important; margin:0 auto; }
li.pod { display:block;}
a.pod	{ color: #FFF; margin-left: 40px !important;}
 	
a.pod:hover {	color: #FF9; font-weight:bold; background:#ae141f;}

/**************************************** CONTENIDOS TEXTOS ANCHO - Recursos Pods en YouTube*/
#videoYouTube { width:420px !important; height:315px !important; margin:50px 270px; float:left;}

/**************************************** CONTENIDOS TEXTOS ANCHO - Recursos Pods en JWPlayer*/

#contenidosBotones {width:20%; height:120px;	float:left; margin:0px 0px 0px 10px; overflow: hidden !important;}
#contenidosTitulos {width:75%; height:70px; float:left; margin:0px 0px 0px 10px; padding-top:50px; overflow: hidden !important;}