@charset "utf-8";
/* CSS Document */


/*** GENERALES ***/ 
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode",  Helvetica, sans-serif;
	font-size:14px;
	color:#333;
}
a:link, a:visited, a:active{
	text-decoration:none;
	color:#39c;
}
a:hover{
	text-decoration:underline;
}
/* Permite añadir la flechita azul a los enlaces */
a.more { white-space: nowrap; padding-right: 10px; background: url(images/moreflecha.gif) no-repeat 100% 50%; }


/*** COMUNES ***/
/*Clase generérica para las imágenes publicitarias de todas las páginas*/
/*Se añade un borde, se separa de la zona superior en 15px y se pone position:relative para 
poder colocar enlaces con posición absoluta dentro de la imagen*/
#degradadogrisabajo{
	background:url(images/DegradadoGris.jpg) repeat-x bottom;
}

.publi{ 
	border:1px solid #d7d7d7;
	margin-top:15px;
	position:relative;
}

.logofacebook{
	margin-top:10px;
}

/*Esta regla permite que al pasar el ratón por lo alto de la imagen +info se ponga en rojo*/
/*Es común para todas las páginas, en su apartado de imagen publicitaria*/
/*Realmente la imagen se carga con la clase .masinfo (está más abajo). Es un sprite.*/
#publicidad a:hover{ /*al pasar el ratón por encima de un más info */
	background-position: -0px -0px;
	border-bottom:0px;
}

/*Esta clase permite poner un "botón" +info */
/*Habría que añadir #identificador(el que sea) a:hover{
	background-position: -0px -0px;
	border-bottom:0px;
}
Para que cambie el botón a rojo. Ahora mismo sólo tiene este código #publicidad*/
.masinfo{ /*Características generales de +info */
	display:inline;
	width:43px;
	height:17px;
	background:url(images/masinfo.png) no-repeat;
	background-position: -0px -27px;
	text-indent:-9999px;
}
.derecha{
	float:right !important;
}

.izquierda{
	float:left !important;
}

.centrado{
	text-align:center !important;
}
.importante{
	color:#000;
	font-weight:bold;
}

.oculto{
	visibility:hidden;
}

.invisible{
	display:none;
}

.fraseimportante{ /**Para las frases de Póngase en contacto con nosotros y hablamos **/
	font-size:22px;
	line-height:26px;
	color:#39c;
}

.conborde{ /*Esta clase se utilizan en aquellas página cuyo subsubmenu está como colgando debido a que no hay ninguna imagen publicitaria debajo. Lo que hace es poner un borde por debajo para, visualmente, sujetar al subsubmenu*/
	padding-bottom:17px;
	border-bottom:1px solid #d7d7d7;
}

.margeninferior{ /*Esta clase nos permite agrandar la separación de un bloque con el inferio. Lo utilizo principalmente como clase de los id="contenido" para dejarles esta separación el pie de la página */
	padding-bottom:20px;
}

.validaciones{
	margin-top:30px;
}

/*** CABECERA ***/
/*bloque que engloba a toda la cabecera incluyendo la navegación de contacto, campus, menú principal
y dónde estás*/
#cabecera{
	/*margin-bottom:0px;*/
}
#logocabecera{
	margin-top:10px;
}


/* BLOQUE DE NAVEGACIÓN */
#Navegacion{
	height:250px;
}

/* NAVEGACIÓN DE CONTATO Y CONOZCANOS */
#NavContacto{
	text-align:right;
	padding-top:6px;
	font-size:12px;
}

/*Con estas reglas personalizo los enlaces de NavContacto para que sean distintos al resto de 
enlaces*/
#NavContacto a:link, #NavContacto a:visited, #NavContacto a:active{
	color:#333;
}
#NavContacto a:hover{
	text-decoration:none;
	color:#c33;
	text-align: left;
}

#NavContacto .seleccionado{
	color:#c33;
}


/* NAVEGACION DEL CAMPUS VIRTUAL */
#NavCampus{
	text-align:center;
	color:#fff;
	background-color:#C33;
	height:80px;
	font-size:12px;
}
#NavCampus p{
	padding-top:40px; /* Para colocar el texto "Campus Virtual" más abajo que Contacto | Conózcanos */
	font-weight:bold;
}

/*Personalización del enlace al Campus para que no sea como los enlaces estándar (azules con un borde cuando se pasa por encima de ellos)*/
#NavCampus a:link, #NavCampus a:visited, #NavCcampus a:active{
	color:#fff;
}
#NavCampus a:hover{
	text-decoration:none;
	color:#333;
	text-align: center;
}

/* BARRA DE NAVEGACIÓN PRINCIPAL **/
#NavPrincipal{
	height:140px;
}
#NavPrincipal ul{
	list-style:none;
	margin-top:29px; /*Separación con la primera fila del contenedor #Navegación, la que contiene el "Campus Virtual" */
}
#NavPrincipal li{
	float:right;
	width:128px;
	height:86px;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
}
#NavPrincipal li p.colocar{ /*Coloca bien el texto principal del menú. Esta clase sólo la puede tener
el elemento del menú principal activo*/
	padding-top:30px;
	margin-bottom:2px;
	font-size:18px;
	font-weight:bold;
}
#NavPrincipal li p{
	padding-left:10px; /*Separa el texto de cada ficha del menú principal con respecto al borde izquierdo */
}
#NavPrincipal li p.subtitular{
	color:#999; /*Color del subtitutar que está debajo del texto principal del menú*/
}
#NavPrincipal li a{ /*Características del enlace en el menú principal*/
	text-decoration:none;
	display:inline;
	height:100%;
}
#NavPrincipal li a:link, #NavPrincipal li a:visited, #NavPrincipal li a:active{
	color:#333;
}
#NavPrincipal li a:hover{
	color:#999;
}

/** DONDE ESTAS **/
#DondeEstas{
	margin:20px 0px;
}
#DondeEstas p{
	text-align:right;
	font-size:10px;
	color:#000;
}
/*Este span es porque el texto de donde el usuario está realmente es de color Gris(distinto al texto "Dónde estás:" */
#DondeEstas span{
	color:#999;
}

#DondeEstas a:link, #DondeEstas a:visited, #DondeEstas a:active{
	color:#999;
}
#DondeEstas li a:hover{
	text-decoration:underline;
}

/** FRASE  **/
#frase{
	background-color:#CC3333;
	color:#fff;
	text-align:center;
	font-size:22px;
	font-weight:100;
	padding:12px 0 12px 0;
	border-bottom:1px solid #ccc;
}

/** PIE **/
#pie{
	background:url(images/PieFondo.jpg) repeat-x bottom left;
	background-color:#333;
	color:#fff;
	padding-top:15px;
	padding-bottom:12px;
}
#pie p.linea{ /*Permite colocar una línea que ocupa todo el ancho de la columna con una determinada separación por arriba y por abajo*/
	border-bottom:1px solid #999;
	margin:15px 0px;
}

/*Personalización de los enlaces del pie*/
#pie a:link, #pie a:visited, #pie a.active{
	color:#f99;
}
#pie a:hover{
	color:#c33;
}
#pie h1{
	font-size:18px;
	font-weight:100;
	color:#3399cc;
	margin-bottom:8px;
}
#pie p{
	font-size:13px;
	color:#666;
	line-height:18px;
	margin-bottom:5px;
}
#pie .imagenpie{ /*Esta clase sólo está en la tercera columna del pie para colocar la imagen de los cuadritos*/
	background:url(images/cuadritos.png) no-repeat;
}
#pie .contactopie{ /*Esta clase sirve para poner de color blanco los textos de contacto para información y contacto para soporte */
	margin:12px 0px -3px 0px;
	color:#fff;
}

/*Estas dos clases se utilizan para colocar correctamente la imagen del teléfono y el número*/
#pie .telefonopie{
	margin-top:8px;
	color:#fff;
	font-size:22px;
	float:right;
}
#pie .imgtelefonopie{
	float:right;
	margin:10px 5px 0px 0px;
	padding-top:2px;
}


/** FINAL PIE **/
#finalpie{
	background-color:#000;
	color:#9cc;
	height:60px;
	font-size:12px;
	padding-bottom:5px;
}
#finalpie .texto{
	text-align:right;
	padding-top:30px;
}

/*Peronalización de los enlaces de la zona final de pie Aviso Legal...*/
#finalpie a:link, #finalpie a:visited, #finalpie a.active{
	color:#666;
}
#finalpie a:hover{
	color:#c33;
}

#finalpie .colocaraviso{/*Coloca correctamente los textos de la línea de Aviso Legal | Accesibilidad | Mapa del sitio */
	 padding-top:30px;
}

#conborde{ /*Este identificador se utiliza en el container_12 del final del pie para colocar un borde que separe el pie del FINAL DEL PIE*/
	border-top:1px solid #999;
	padding-top:10px;
}


#cabeceraapartadoexterior{
	 /*Sube el subsubmenú*/
	margin-top:-50px;
	height:44px; 
	background-color:#eeeeee;
	background:url(images/DegradadoCabeceraApartados.jpg) repeat-x;
}

/***** NAVEGACION POR APARTADOS (portada, novedades...) ****/

#cabeceraApartado{
}



#cabeceraApartado ul{
	float:right;
	list-style:none;
	padding-right:20px;
	
}

#cabeceraApartado ul li{
	float:left;
	font-size:13px;
	color:#999;
	margin-left:25px;
	padding-top:15px;

}

#cabeceraApartado .titularApartado{
	float:left;
	font-size:34px;
	font-weight:100;
	color:#333;
}

#cabeceraApartado .apartadoseleccionado{
	color:#c33;
	
	
}

#cabeceraApartado a:link, #cabeceraApartado a:visited, #cabeceraApartado a.active{
	color:#999;
	

}

#cabeceraApartado a:hover{
	/*border-bottom:1px solid #093;*/
	text-decoration:none;
	color:#000;

}