@charset "utf-8";
/* CSS Document */
/* página de 3 columnas y cabecera con pie */
body {
               	background-color: #e8ffff;
                text-align:center; /* centra la ventana en IE5 */
				margin:0;
				padding:0;
                }
              
#marco {
                border: thin solid #000;
				width: 96%; /* al dar anchura y márgenes auto se centra la ventana */
                margin: 15px auto;
				overflow: hidden; /* recorta y ajusta el pie */
            	text-align: left; /* vuelve a poner el texto a la izqda como es usual */
				}

#cabecera {
				margin:0;
				padding:0;
				float:left;
				clear:both;
                width:100%; /* en todo elemento flotante debe darse la anchura */
                background: #fff;
                border-bottom: 1px solid #fff;
                text-align: center;
                }
/* estructura de las tres columnas */
/* definimos 3 lienzos ocupando el cuter */

.lienzo {
	    			position:relative;
                    clear:both;
                    float:left; 
                    width:100%;
                    overflow:hidden;/* para cortar lo que sobresale */
                    background: #ffffda; /* color columna derecha */
					padding: 0 0 15px 0; /* Hack para IE */
					margin: 0 0 -15px 0;
					 } /* este lienzo permanece en su sitio */
.lienzo1, .lienzo2	{
					float:left;
					width:100%;
                    position:relative;
					padding: 0 0 15px 0;
					margin: 0 0 -15px 0;
					border-right: 1px solid #2a70a1;
					}
		   .lienzo1 { 	
		   			background: url(../imagenes/caracolg.gif) #fff no-repeat right bottom;/* color columna central */
                    right: 20%; /* se desplaza un 20% hacia la izquierda con respecto al lienzo originando así la columna derecha cuyo ancho es 20% */
					}				
           .lienzo2 { 
		   			background: #ffffda; /* color columna izquierda */
                    right: 60%; /* se desplaza un 60% hacia la izquierda con respecto al lienzo 1 originando así la columna central cuyo ancho es 60% */
					}
/* Para que las columnas siempre llguen hasta el final del contenedor debemos independizarlas de las zonas de escritura ya que si escribimos directamente sobre ellas su largo dependerá de lo que se escriba y no será fijo. Crearemos ahora las tres zonas de escritura: una en cada columna */

.centro, .izquierda, .derecha {
								float:left;
                               	position:relative;
                                padding: 2em 0;
								margin: 2em 0 0 0; /* esto no lo entiende bien IE y no deja margen para el pie */
	                			overflow:hidden; 
								}
								
/* vamos a crear alrededor de las zonas de escritura una zona que hará el papel de padding cuya medida será un 1.5%. 
Empezamos situando primero la columna central pues así los buscadores encuentran antes lo principal de la página. Tenemos que situar el punto de comienzo de la escritura, o sea, el lado izquierdo de la caja "centro" respecto al lado izquierdo de lienzo2 que es el último que hemos situado */

.centro  {left: 101.5%;  width:57%; background-color: #ffffda; border: solid 1px #000;} /* 100% = todo el lienzo2 + 1.5% padding */

/* situamos ahora la columna de la izquierda y debemos hacerlo respecto al lado izquierdo de lienzo1 y debemos sumar los espacios de padding */

.izquierda {left: 24.5%;  width: 17%; background-color:#2a70a1; border: solid 1px #fff; } /*  20%(ancho col. dcha) + 3%(padding col. izqda) + 1.5%(padding dcha col. centro) */

/* la columna derecha se sitúa respecto al lienzo - que no se ha desplazado y se suman los paddings */
.derecha {left: 87.5%;  width: 17%; background-color:#2a70a1; border: solid 1px #fff;} /* 80%(resto lienzo)+ 3%(padding izqda) + 3% (padding centro)+ 1.5%(padding izqdo col. dcha) */

/* ahora viene el pie */
#pie {
        margin: 15px 0 0 0;  /* Hack para IE */
		/*padding: 1em 0 2em 0; */
		clear:both;
        float:left;
		width:100%;
		background: #2a70a1;
		color:#fff;
		/* background: url(../imagenes/caracolg.gif) #2a70a1 no-repeat left bottom; */
		/*height:32px;*/
		/*margin: 2em 0 0 0;*/
    }
	/* barra de navegación */
#barranav {
                float:left;
				clear: both;
                background:#931212;
                margin: 0px;
				text-align: center;
                width: 100%;
                overflow:hidden;
					}
#barranav ul, #barranav ul li {
	       		display: inline;
				list-style:none;
	        	margin:0;
	        	padding:0;
				}

				/* estilos de los hyperlinks */
#barranav ul li a {
	    			float:left;
	    			margin:0;
	    			padding: 0 5px;
	    			text-align:center;
	    			background:#069;
	    			color:#fff;
	    			text-decoration:none;
					border-right: 1px solid #fff;
					}
				
#barranav ul li a:hover {
	    				background: #ffffda;
	   					color: #080484;		
                    	}				
#barranav ul li a.active,
#barranav ul li a.active:hover {
	    				color:#000;
	   					background: #ffffda;
	    				font-weight:bold;
                    			}	
		/* ahora definimos una barra de situación */					
#situador { 	float:left;
				clear: both;
                background:#f38e00 /*#68a600*/;
                margin: 0;
				width: 100%;
               	border-bottom: 1px solid #fff;
                overflow:hidden;
				color:#000;
				padding-bottom: 2px;
				padding-top: 1px;
				font-size: 85%;
				text-align:left;
				font-weight:600;
				border-bottom: 1px solid #2a70a1;
				}
#situador a { 	color: #fff;
text-decoration:none;
				}
#situador a:visited { color: #fff; }
#situador a:hover {color: #000; }
#situador p {margin:0; padding: 0 0 0 5px; }
		 

/* ajustes de tipografía y efectos */

		body {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 80%;
                }
		.imgleft { float: left; }
		.imgright {float: right; }
		#cabecera a img { border:0; padding: 5px; }
		.izquierda, .derecha {color: white}
		#cabecera h1 {padding: 0;
						margin: 20px 0 7px 0; }
		
		#cabecera h2 {
    					margin: 0; 
		 				padding-bottom: 15px;
    					}
		#pie p {
    				margin: 0;
    				padding: 1em 0 1em 1em; 
    				}
		.centro p, .derecha p, .centro h2, .centro h3 { padding: 0 10px 10px 10px;}
		.izquierda h2 { padding: 0 5px;}
		.izquierda img {position:relative; top:0px; margin: 0 9px; padding-bottom: 10px; }
		.izquierda p { padding: 0px 5px 5px 5px; font-size: 90%;}
		a, a:link {color: #3a00d4; text-decoration: none}
		a:hover {color: #ed6c2e; text-decoration: underline }