@charset "utf-8";
/* CSS Document */
/* página de 2 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 como es usual */}
#cabecera {
				margin:0;
				padding:0;
				clear:both;
                float:left; 
                width:100%; /* en todo elemento flotante debe darse la anchura */
                background: #fff;
                border-bottom: 1px solid #fff;
                text-align: center;
				}
/* estructura de las dos columnas */
/* definimos 2 lienzos ambos ocupando el marco y deslizamos uno de ellos un 20% a la izquierda. Se crean así las 2 columnas de anchos 20% y 80% */
.lienzo {
	    			position:relative;
                    clear:both;
					padding: 0 0 15px 0; /* Hack para IE */
					margin: 0 0 -15px 0;
                    float:left; 
                    width:100%;
                    overflow:hidden; /*para cortar lo que sobresale */
                    background-color: #ffe5a9 /*#ffd489 */; /* color columna derecha */
	       			}
.lienzo1 {
					float:left;
					width:100%;
                    position:relative;
					padding: 0 0 15px 0; /* Hack para IE */
					margin: 0 0 -15px 0;	
		   			background-color: #fff ; /* color columna izquierda */
                    right: 14%; /* ancho columna derecha */
					border-right: 1px solid #2a70a1;
					}
          
/* crearemos ahora las dos zonas de escritura: una en cada columna */

.izquierda, .derecha {
								float: left;
                               	position: relative;
                               /* padding: 2em 0 15px 0;*/
								margin: 2em 0 15px 0;
	                			overflow: hidden; 
								}
.izquierda {padding: 2em 0 15px 0; }
.derecha {padding: 0; }
/* 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 principal que será la izquierda */
/* tenemos que situar el punto de comienzo de la escritura, o sea, el lado izquierdo de la caja "izquierda" respecto al lado izquierdo de lienzo1 */

.izquierda {left: 16%;  width:82%; background-color: #ffffda; border: solid 1px #000; text-align: left; } /*14%(ancho columna dcha)+ 2% (padding izqdo columna izqda) */

/* situamos ahora la columna de la derecha y debemos hacerlo respecto al lado izquierdo del lienzo y debemos sumar los espacios de padding */

.derecha {left: 18.75%;  width: 12%; background-color: #e8ffff; border: solid 1px #fff; text-align: left; } /*  14%(ancho col. dcha) + 4%(padding col. izqda) + .75%(padding izqdo col. dcha) */


.libro {width: 90%; border: solid 1px #f38e00; background-color: #2a70a1; color:#fff; padding: 1em 0; margin: 0 5% 10px 5%;}


/* ahora viene el pie */
#pie {
       	clear:both;
        float:left;
		width:100%;
		padding: 0;
		border-top: 1px solid #fff;
		background: #2a70a1;
		text-align:left;
		color:#fff;
		   }
	/* barra de navegación horizontal */
#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;
                margin: 0px;
				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; }

/* barra de navegación vertical */

#barranavv {
                background:#ffe5a9;
                margin:0;
				border-top: 1px solid #fff;
				border-left: 1px solid #fff;
				border-right: 1px solid #fff;
              				}
#barranavv ul, #barranavv ul li {
	       		list-style-type: none;
				margin:0;
	        	padding:0;
				display: block;
				border-bottom: 1px solid #fff;
				}

				/* estilos de los hyperlinks */
#barranavv ul li a {
	    			display: block;
					margin:0;
	    			padding: 2px 5px 3px 5px;
	    			background:#069;
	    			color:#fff;
	    			text-decoration:none;
					}
				
#barranavv ul li a:hover {
	    				background: #ffffda;
	   					color: #080484;	
						}					 

/* ajustes de tipografía y efectos */

		body {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 70%;
                } /* tamaño de letra para IE */
		html>/**/body {
				font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 80%;
                } /* tamaño de letra para Firefox y otros navegadores */
		.imgleft { float: left; }
		.imgright { float: right; }
		#cabecera a img { border:0; padding: 5px; }
		#cabecera h1 {padding: 0;
						margin: 20px 0 7px 0; }
		
		#cabecera h2 {
    					margin: 0; 
		 				padding-bottom: 15px;
    					}
		#pie p {
    				margin:0;
    				padding: 2em 0 1em 1em; 
					}
		.izquierda p, .derecha p, .libro p, .libro h3, .izquierda h2, .izquierda h3 { padding: 0 10px 10px 10px;}
		.izquierda a img { border: 0; }
		 a, a:link {color: #3a00d4; text-decoration: none; }
		 a:hover {color: #ed6c2e; text-decoration: underline; }
		.libro h3 a {color : #fff; text-decoration: none; } 
		.libro a:link {color: #f38e00; text-decoration: none; }
		.libro a:link:hover {color: #fff; text-decoration: underline ;} 
		.libro h3 a img {border: 1px solid #f38e00 ;}
		.libro h3 a:hover img {border: 1px solid #fff; }