/******************************************************/
/*   HOJA DE ESTILOS PRINCIPAL PARA COLEGIO LOYOLA    */
/******************************************************/
/*     Archivo fuente: estilo.css 					  */
/*     Se complementa con otros archivos de estilo    */
/*     Autor: Iván Fernández Huerta                   */
/*     Fecha de creación: 05/10/04                    */
/*     Última revisión: 24/04/05                      */
/******************************************************/



/* REDEFINICIONES DE ALGUNOS ELEMENTOS TIPICOS DE TODA PAGINA XHTML */
/********************************************************************/
h2.titulo_h2{   /* Un tipo concreto de h2 para la página principal */
	letter-spacing: 0.2em;
}

dl{ /*lista de definición */
	margin-left: 18%;
	margin-right: 18%;
}

dl dt{ /*Elemento a definir*/
	font-weight: bold;
	margin-top: 2em;
}

dl dt a{
	color: #006233;
}

dl dd{ /*Definición de ese elemento*/
	font-style: italic;
	margin-top: 1em;
}

a{ /* Hipervínculos */
	text-decoration: none;
	color: #0047BE;
}

a:hover{  /*Enlaces cuando pasamos el ratón por encima*/
	background: #C0C0C0;
}


.enfatizo{ /* Cualquier cosa puede ser enfatizada con esta implementación */
	color: #F42A41;
	font-style: italic;
	font-weight: bold;
}

.left {
	float:left;
}

.right{
	float:right;
}


/*  ELEMENTOS ESTRUCTURALES QUE COMPONEN LA PÁGINA  */
/****************************************************/

body{   /*Es la página en sí misma*/
	background: #FFFFFF;
	font-family: sans-serif;
	font-size: 100%;
	padding: 1em;
}

#cabecera{   /*Parte superior, donde ponemos Colegio Loyola y el logotipo*/
	background: #B2CAB9 url('../imagenes/logo.jpg') no-repeat left center;
	height: 156px;
	padding-left: 155px;
	border: 1px solid #000;
	margin: 0px;
}

#cabecera img#logotipo{
	display: none;
}

#entrada{  /*Parte superior derecha, donde ponemos una imagen en blanco y negro de altura 140px*/
	background: url('../imagenes/porta.jpg') no-repeat right top;
	padding-top: 1.2em;
	border-bottom: 0px solid #B2CAB9;
	height: 137px;
}


/* Justo debajo de la cabecera, ponemos una barra de menú */
/**********************************************************/
#menu{  
	border: 1px solid #000;
	background:	#DF0000;
	text-align: center;
	padding: 1px;
	margin: 0px;
}

#menu ul{      /*Se refiere a la lista completa de opciones del menú*/
	margin: 0px;
	list-style-type: none;
}

#menu li{    /*Cada una de las opciones del menú, habrá que cambiar este valor si se añaden más*/
	display: inline;
	margin-left: 3.5em;
	margin-right: 3.5em;
}

#menu li a{  /*Cada uno de los hipervínculos del menú*/
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	font-size: 0.8em;
}

#menu li a:hover{  /*Hipervínculos cuando posamos el ratón encima */
	color: #87D300;
	background: none;
}


/*  El resto de la página lo forma el CONTENIDO    */
/***************************************************/
#contenido{   /*La sección de contenido en sí misma */
	font-family: "Georgia" sans-serif;
	background: #FFFFFF;
	border: 0px solid #000;

	padding: 1em;
}

#buscador{   /*En la página de inicio hay una casilla para buscar, la cual definimos aquí */
	text-align: center;
	font-size: 0.8em;
	padding: 0.3em;
	float: right;
}

#parte_derecha{	/*Aquí es donde se coloca lo que queremos contar */
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	height: 100%;
}


/*También en la página de inicio, hay un cuadro de novedades */
/*************************************************************/
#novedades{   /*El cuadro en sí se define aquí */
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	font-size: 80%;
	background:  #FFCCCC url('../imagenes/exclama.jpg') no-repeat center;
	border: 1px solid #FF004B;
	width: 18em
}

#novedades h4{   /*Título de "Novedades"*/
	margin-top: 0px;
	text-align: center;
	background: #FF004B;
	padding: 0.6em;
	text-transform: uppercase;
	font-weight: bold;
	color: #FFF;
}

#novedades dl{  /*La lista de novedades en sí misma */
	margin: 0px;
	padding: 0.4em;
}	

#novedades dl dt{  /*Primera línea de cada novedad*/
	margin: 0px;
	font-size: 90%;
}

#novedades dl dd{  /*Segunda línea de cada novedad*/
	margin: 0px;
	margin-bottom: 0.5em;
	font-size: 90%;
	font-style: normal;
}

#novedades a{  /*Enlace de cada novedad, "[mas]"*/
	text-decoration: none;
}

#novedades a:hover{  /*Este enlace, cuando pasamos el ratón por encima*/
	color: #FFF;
	background: #FF004B;
}


/* Debajo hay un cuadro para poner la agenda */
/*********************************************/
#agenda{   /*El cuadro en sí se define aquí */
	font-size: 80%;
	float: left;
	clear: both;
	margin-right: 3em;
	margin-bottom: 1.5em;
	background:  #CDE985;
	border: 1px solid #679000;
	width: 18em;
	text-align: center;
}


#agenda td.especial{
	background: #DEE63A;
	color: #FFF;
	font-weight: bold;
}

#agenda td.festivo{
	background: #F02233;
	color: #FFF;
	font-weight: bold;
}

#agenda #leyenda{
	font-size: 0.85em;
	text-align: left;
}

#agenda #leyenda ul{
	list-style-type: none;
	margin-left: 1em;
}

#agenda h4{   /*Título de "Novedades"*/
	margin-top: 0px;
	text-align: center;
	background: #679000;
	padding: 0.6em;
	text-transform: uppercase;
	font-weight: bold;
	color: #FFF;
}

#agenda dl{  /*La lista de novedades en sí misma */
	margin: 0px;
	padding: 0.4em;
}	

#agenda dl dt{  /*Primera línea de cada novedad*/
	margin: 0px;
	font-size: 80%;
}

#agenda dl dd{  /*Segunda línea de cada novedad*/
	margin: 0px;
	margin-bottom: 0.5em;
	font-size: 80%;
	font-style: normal;
}

#agenda a{  /*Enlace de cada novedad, "[mas]"*/
	text-decoration: none;
	color: #FFF;
}

#agenda a:hover{  /*Este enlace, cuando pasamos el ratón por encima*/
	color: #006233;
	background: none;
}


/* Cuadro de actividades pendientes para esa semana */
/****************************************************/

#tareas{
	font-size: 0.7em;
	padding: 0.5em;

	border: 1px solid #006233;
}

#tareas h4{
	border-bottom: 1px dotted #006233;
}

#tareas h5{
	text-align: center;
}

#tareas p{
	margin-left: 1em;
}


/* Iconos promocionales de la página de Inicio */
/***********************************************/

#iconos{
	margin-top: 2em;
	font-size: 0.7em;
	padding: 0.5em;
	padding-top: 1.5em;
	width: 50%;
	border: 1px solid #006233;
	text-align: center;
}


#iconos img{
	margin: 0.5em;
	border: 1px solid #000;
}


#iconos a{
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 120%;
	margin-bottom: 1em;
	width: auto;	
}	

#iconos a:hover{
	background: none;
	font-weight: bold;
}


/*Cuadro con señal del peligro, para enfatizar algo*/
/***************************************************/
.atencion{  /*El cuadro en sí mismo*/
	border: 1px solid #000;
	margin: 2em 20%;
	background:  url('../imagenes/atencion.gif') no-repeat left center;
	padding-left: 150px;
	text-align: center; padding-right:0.5em; padding-top:0.5em; padding-bottom:0.5em
}

.atencion a{  /*Enlaces dentro de dicho cuadro*/
	text-decoration: none;
}

.atencion a:hover{  /*Enlaces cuando pasamos el ratón por encima*/
	background: #E3E3E3;
}

.atencion p{  /*Párrafos dentro de dicho cuadro*/
	text-align: left;
}

.img_izq{  /*Imagen que se coloca a la izquierda de su "contenedor"   */
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	border: 1px solid #000;
}

.img_dcha{  /*Imagen que se coloca a la derecha de su "contenedor"   */
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	border: 1px solid #000;
}

p.central{
	text-align: center; 
}


/*Submenú con opciones que habitualmente colocamos a la izquierda en cada página*/
/********************************************************************************/

#final{ /* Sección que se coloca al final, contiene los iconos de validación y el copyright */
	border-top: 1px solid #5B5B5B;
	text-align: center;
	font-size: 0.6em;
	color: #5B5B5B;
	clear: both;
	text-decoration: none;
}

#final_debajo{ /* Lo mismo */
	margin-top: 0px;
	border: 1px solid #000;
	border-top: none;
	background: #B2CAB9;
	font-size: 0.6em;
	text-decoration: none;
	color: #5B5B5B;
	padding: 1em;			
	padding-top: 2em;
}

#final_debajo p{
	text-align: center;
}

#final_debajo div{
	border-top: 1px solid #5B5B5B;
}

#contenido ul.submenu{  /* Submenú con las opciones */
	font-size: 0.8em;
	list-style-type: none;
	width: 13em;
	float: left;
	margin: 2em 1.5em 1.5em 0em;
	padding-left: 0px;
	clear: both;
}

#contenido ul.submenu li.titulo_menu{ /*Primera opción de esa lista */
	font-size: 1.6em;
	text-align: center;
}

#contenido ul.submenu li{ /*Elementos de la lista, en general */
	font-family: "Georgia" sans-serif;
	background: #FFD600;
	background: #87D300; /* ¡¡¡ CAMBIO !!! */
	border-bottom: 1px solid #000;
	background: none;
	margin-left: 0px;
	width: 100%;
	padding-top: 0.5em;	
}	

#contenido ul.submenu li.volver{
	background: #D67500;
}

#contenido ul.submenu li.volver span#flecha{
	float: left;
	font-family: wingdings;
}

#contenido ul.submenu li a{ /*Enlaces de la lista */


	color: #426F02;
	text-decoration: none;
	padding-left: 0.2em;
}


#contenido ul.submenu li a:hover{ /*Enlaces cuando pasamos el ratón por encima*/
	font-weight: bold;
	background: none;
}


id#id_actual{ /*Identifica la sección actual en la que nos encontramos*/
	color: #A9BDB6; 
}

#estadisticas{   /*Contiene el icono azul de las estadísticas */
	display: none;
}


/***************************************/
/* ESTILOS PARA LAS TABLAS */
/***************************/

table{  /*La tabla propiamente dicha */
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	text-align: center;
}

tr.primera_fila{  /*Primera fila de esta tabla*/
	font-weight: bold;
	background: #006233;
	color: #FFF;
}

tr td{ /*Cada celda de la tabla*/
	border: 1px solid #006233;
	padding: 0.2em;
}	

tr td a{ /*Cada enlace dentro de una celda*/
	text-decoration: none;
}

tr td a:hover{ /*Este enlace, cuando pasamos el ratón por encima*/
	background: #D9D9D9;
}
/***************************************/


/* ESTILOS PARA FICHAS CON VIÑETAS DENTRO */
/******************************************/

div.ficha{ /*La ficha en sí misma */
	border: 1px solid #006233;
	padding: 0.7em;
	width: 25em;
	margin-left: 22%;
	background:  #DDE6D7 url('../imagenes/puzzle.jpg') no-repeat right bottom;; margin-right:1.5em; margin-top:1.5em; margin-bottom:1.5em
}

div.ficha h3{ /* Título para esa ficha */
	border-bottom: 1px dashed #006233;
	text-transform: uppercase;
}

/***************************************/
/* ESTILOS PARA LA COLOCACIÓN DE FOTOS */
/***************************************/

.dos_fotos{
	margin-left: 20%;
	margin-right: 20%;
	clear: both;
}

.foto, #foto_i{  /*Posibilita colocar varias fotos seguidas con texto*/
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	border: 1px solid #000;
}

#foto_d{
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	border: 1px solid #000;
}

#fotos{
	text-align: center;
}

#fotos img{
	padding:0.3em;
	margin:0.3em;
	border: 1px solid #000;
}

/* ESTILOS PARA LAS CARTAS AL DIRECTOR */
/***************************************/

.carta{ /*Fondo para las cartas al director, imitando papel de carta */
	margin: 1.5em;
	background: #DDE6D7;
	border: 1px solid #006233;
	padding: 0.7em;
}


/* ESTILOS PARA LOS FESTIVALES */
/*******************************/

h3.festivales{
	font-family: Comic Sans MS;
	padding-top: 0.3em;
	padding-bottom: 1em;
	margin-top: 0.3em;
	margin-bottom: 1em;
	width: 100%;
	text-align: center;
	font-size: 3em;
	letter-spacing: 0.2em;
	color: #D7006C;
}


/* ESTILOS PARA LOS ANUARIOS DEL COLEGIO */
/*****************************************/

.fondo_anuario{
	margin: 2em;
	margin-left: 10em;
	padding: 1.5em;
	padding-top: 0px;
	border: 1px solid #000;
	background: #DDE6D7;
}

.fondo_anuario h3{
	margin-top: 3em;
	border-bottom: 1px dashed #D7006C;
}

.fondo_anuario h4{
	margin-left: 1.5em;
	margin-top: 2.5em;
}

.fondo_anuario p{
	margin-left: 5em;
	margin-right: 15em;
	padding: 0.5em;
	background: #CCE5A2;
	font-style: oblique;
}




/****************************************/
/* ESTILOS PARA LOS CUADROS CON SOMBRAS */
/****************************************/

div.cuadro_sombra{
	z-index: 5;
	background: #E9E9E9;
}

div.cuadro_sombra div.cuadro_sombra_arriba{
	position: relative;
	left: -0.5em;
	top: -0.5em;
	border: 1px solid #006233;
	z-index: 10;
	background: #FFF;
	padding: 0.3em;
	padding: 0px;
}

#novedades.cuadro_sombra{
	width: 80%;
	margin-left: 10%;
}

#imagenes_derecha.cuadro_sombra{
	text-align: center;
	font-size: 0.8em;
	font-style: italic;
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

#imagenes_izquierda.cuadro_sombra{
	text-align: center;
	font-size: 0.8em;
	font-style: italic;
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

#fotos_Calasanz.cuadro_sombra{
	text-align: center;
	font-size: 0.8em;
	font-style: italic;
	float: right;
	margin: 5em;
}

ul#secciones_calasanz{
	width: 25em;

	padding: 1em;
	list-style-type: none;
	margin-left: 2em;
	margin-right: 2em;
	background: #E5E96E;
	border: 2px solid #FFF;
	text-align: left;
}

ul#secciones_calasanz li{
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: left;
}


cite{
	font-family: "Times New Roman";
	font-size: 120%;
	font-style: oblique;
	width: 60%;
	margin: 1.5em 20%;
}

cite:first-letter{
	font-size: 300%;
	float: left;
	margin-right: 0.1em;
}

/*********************************************/
/* ESTILOS PARA MATRICULA ON-LINE            */
/*********************************************/

.formularios_matric{
	width: 70%;
	margin-left: 15%;
	margin-bottom: 1em;
	border: 1px solid #006233;
	padding: 1em;
	font-size: 85%;
}

.boton_matric{
	float: right;
}

.formularios_matric h4{
	border-bottom: 1px dashed #737373;
}	

.invisible input{
	display: none;
}

.invisible input.boton_matric{
	display: block;
}

.formularios_matric_tipo2{
	width: 850px;
	margin: 1em 2em;
	border: 1px solid #006233;
	padding: 1em;
	font-size: 85%;
}

.formularios_matric_tipo2 h4{
	border: none;
}

.formularios_matric_tipo2 input{
	margin-left: 1em;
	margin-right: 1em;
}

.encabezado{
	padding-left: 4em;
	padding-bottom: 1em;
	border-bottom: 1px dashed #737373;
}

.seccion_1{
	padding-left: 2em;
	margin-bottom: 1em;
	border-bottom: 1px dashed #737373;
}

.columna{
	width: 50%;
	float: left;
}


/*********************************************/
/* ESTILOS PARA LAS PRACTICAS EN LABORATORIO */
/*********************************************/

#ficha{
	width: 50%;
	border: 1px solid #737373;
	margin-left: 25%;
	margin-bottom: 1em;
	padding: 1em;
}


#ficha_fotos{
	width: 50%;
	margin-left: 25%;
	margin-bottom: 1em;
	padding: 1em;
}

.grupo_fotos{

	text-align: center;
	padding: 1em;
}