/* elprofedetica 4.0 
Esta es la versión del curso 2009/2010 de la página web
de Miguel Pineda. Todo esto lo he hecho yo, y seguro que hay formas
mejores de hacerlo, pero es lo mejor que sabía */
 
html, body{ 
	margin: 0;
	padding: 0;
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, san-serif;
	font-size: 10pt;
	color: #b1aeae;
} 


/*visualización de los enlaces*/    
a img {
	border: none;
}
a:link {
	text-decoration:none; 
	color: #cbaaf7;
}
a:visited {
	text-decoration:none; 
	color: #cbaaf7;
}
a:active {
	text-decoration:none; 
	color: #cbaaf7;
}
a:hover {
	text-decoration:none; 
	color:#5d2e9c;
}

/* esta caja contiene a todas las demás */
#ancho { 
	width:910px; 
	background-image: url(f3.png);
	margin-left:auto; 
	margin-right:auto;  
} 

/* todo el encabezado */

#cabecera { 
	height: 213px;
	width: 880px; 
 	/* background-color: #000000; */ 
	margin: 0;
	padding: 0;
	text-decoration: none;
	background-image: url(logo1.png);
	background-repeat: no-repeat;
	background-position: left center;
}

#frase {
	float: left;
	width: 500px;
	padding-top: 170px;
	padding-left: 25px;
	font-size: .88em;
	color: #808080;
	font-family: Times, serif;
}

#logo {
	float: right;
	border: none;
}

#cabecera a {
	text-decoration: none;
}

/* aqui defino el comportamiento del 
munú interno de la web */
#derecha {
	padding: 0;
	margin: 0;
	/* background: #000000; */  
	float: right; 
	position: relative; 
	width: 200px; 
 }
 
 
/* diseño del menu de navergación interna de la izquierda */
ul.menu {
    padding: 0;
    margin: 0;
    width: 200px;
    list-style: none;
} 
ul.menu li a:link, ul.menu li a:visited {
    display: block;
    /* background: #000000; */
    width: 200px;
    text-decoration: none;
    height: 60px;
    padding-left: 5px;
}
ul.menu li a:hover, ul.menu li a:active {
    background: #141414;
    height: 60px;
}

/* El cuerpo principal del contenido */

#cuerpo {
	/* background-color: #000000;  */
	float: left; 
	position: relative; 
	width: 700px;
	font-size: .9em;
 }
 
.gris {
	width: 650px;
	background-color: #101010;
	padding-right: 20px;
	text-align: justify;
	text-indent: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: .9em;
	line-height: 150%;
}

.negro {
	width: 650px;
	/* background-color: #000000; */
	padding-right: 20px;
	text-align: justify;
	text-indent: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: .9em;
	line-height: 150%;
}

.portada {
	width: 700px;
	/* background-color: #000000; */
	margin-left: 60px;
	margin:0;
	padding: 0;
}

.fecha {
	font-weight: bold;
	color: #0B6138;
}

 /* suprimible, es para el pie de página */ 

#pie{
	height:40px; 
	/* background-color:#000000; */ 
	clear:both;
	padding-top: 15px;
	text-align: center;
	font-size: .8em;
 } 

/* esto es para rellenar div´s que se quedan vacíos */

.limpiar {
	clear: both;
}
 /* estilos para la impresora, no se muy bien
 como van, es mi primer intento*/
  
 @media print{ 

*, body {
	background-color: #ffffff;
	font-family: Times, serif;
	color: #000000;
}

#derecha, #pie, #cabecera {
	display:none;
} 
#cuerpo{
	width: 90%; 
	float:none;
	}