/* CSS para el agujero */

/* General */
/* -------------------------------------------------------------------- */

body
{ font-family: sans-serif, verdana;
  /* font-size: small; */
  margin: 0px;
  padding: 0px;
  text-align: center; /* Centrar div.todo en IE */

  /* border: 1px solid red; */
}

:link {
  text-decoration: underline;
  color: #000000;
}

:link:hover, :visited:hover {
  color: blue;
}

ul { 
  list-style-image: url("img/agujerillo.png");
}

blockquote { 
  font-style: italic;
}

img { 
  border: 0px;
}

h1 {
  margin-top: 20px;
  padding-bottom: 10px;
/*  color: #7f593d; */
/*   background: url("iconos/linea.png") left bottom no-repeat; */
  border-bottom: 1px solid black;
  font-weight: bold;
  font-size: 150%;
  font-family: "New Century Schoolbook", serif;
}

h2 {
/*  color: #A06040; */
  font-weight: bold;
  font-size: 130%;
  font-family: "New Century Schoolbook", serif;
}

table
{ 
  border: 1px solid black;
  border-collapse: collapse;
}

td
{ 
  margin: 0px;
  border: 1px solid black;
  text-align: center;
}

tr
{
  margin: 0px;
  border: 1px solid black;
}

tr.titulo_tabla
{ 
  background-color: #EEEEEE;
}

/* Clases para ilustraciones, recuadros... */
/* -------------------------------------------------------------------- */

/*
   Ilustraciones junto al texto
*/

img.ilustracion { 
  float: right;
  border: none;
  margin: 5px;
}

div.ilustracion { 
  width: 4em;
  float: right;
  border: none;
  margin: 5px;
  font-size: 80%;
  text-align: center;
}

/*
   Texto recuadrado
*/

.recuadrado { 
  border: 1px solid black;
  margin: 0px;
  padding: 8px;
}

/*
   Columnas de texto que aparecen en un recuadro junto al texto principal
*/

div.columna {
  float: right;
  width: 15em;
  margin: 5px;
  font-size: 80%;
}

div.columna_grande {
  float: left;
  width: 15em;
  margin-right: 5px;
}

div.columnaizq {
  float: left;
  width: 15em;
  margin: 5px;
  font-size: 80%;
}

.columnaizq ul, .columna ul {
  list-style-type: none;
  text-indent: -3em;
  list-style-position: inside;
  list-style-image: url("img/estrella_p.png");
}

/* Un menu secundario puesto directamente en un ul */

ul.menu {
  float: left;
  width: 10em;
/*   font-size: 80%; */
  background-color: #eeeeee;
  text-align: center;
  list-style-image: none;
  list-style-type: none;
  padding: 5px;
  margin-right: 15px;
  margin-top: 2px;
}

/* Celdas de los menus secundarios */
.menu li {
  display: block;
  list-style: none;
  /*   background-color: #dddddd; */
  padding: 2px;
  margin: 2px 0px 0px 0px;
  text-align: center;
}

/* Enlaces dentro de los menus secundarios */
.menu :link, .menu :visited {
  text-decoration: none;
}

.menu *:hover {
  color: black;
}

.menu li:hover {
  background-color: #e0e0e0;
}


/* Organización de cada página */
/* -------------------------------------------------------------------- */

div#todo
{ position: relative;
  /* top: 0px; */
  min-width: 40em;
  max-width: 60em;
  margin: 0 auto;
  text-align: left;
  border: 1px solid white;	/* Necesario para que div#todo comience arriba del todo */
  border-right: 1px solid black;
  border-left: 1px solid black;
  /* Mardito IE, me ha hecho tener que quitar esto. */
  /* background-color: #eeeeee; */

  /* border: 1px solid green; */
  }

div#contenido
{ margin: 0px;
  margin-left: 9em;
  padding: 0px;
  padding-left: 1em;
  padding-right: 1em;

  /* border: 1px solid black; */
  }

/* Título de cada página */

div#titulo
{ 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 9em;
  height: 75px;
  margin: 0px;
  background: url("img/agujero_p.png") top center no-repeat;

  /* border: 1px solid black; */
  }

div#titulo h1
{ display: none;
}

/* Pie */ 

div#pie
{ position: relative;
  clear: both;
  margin: 10px 20px 20px 20px;
  padding: 0px;
  text-align: center;
  font-size: 80%;
  }

div#pie img
{ position: absolute;
  right: 0px;
  top: 5px;
  }

/* Menus */
/* -------------------------------------------------------------------- */

/* Menu principal */

div#caja_menu_principal
{ position: absolute;
  top: 75px;
  left: 0px;
  width: 9em;
  min-width: 8em;
  height: 80%;
  border-right: 1px solid black; 

  /* border: 1px solid black; */
  }

div.menu_principal
{ /* margin: 0px 1em 0px 1em; */
  margin: .5em;
  text-align: center;
  font-size: 70%;

/*   border: 1px solid black; */
}

div.menu_principal ul
{ width: 100%;
  text-align: center;
  list-style-image: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

div.menu_principal h1,
div.menu_principal h2
{ display: none;		/* Esconder el título de "Menú principal" */
  }

div.menu_principal h1,
div.menu_principal h2,
div.menu_principal h3
{ margin: 0px;
  padding: 2px;
  font-size: 100%;
  font-weight: bold;
  border: none;

}

div,menu_principal ul + h1,
div,menu_principal ul + h2,
div,menu_principal ul + h3
{ 
  margin: 2px 0px 0px 0px;
}

/* Celdas de los menus */

.menu_principal li {
  /* display: block; */
  padding: 0px;
  padding-bottom: 1px; /* Seems necessary to avoid some extra space in IE */
  margin: 0px;
  /* list-style: none; */
  /*   background-color: #dddddd; */
  background: url("img/sombra_blanca.png") top left no-repeat;
  text-align: left;

  /* border: 1px solid black; */
}

/* Enlaces dentro de los menus */

.menu_principal a
{ display: block;
  padding: .1em .3em .1em .3em;
  padding-top: 2px;
}

.menu_principal a:hover {
  /* background-color: #d7d7ff; */
  background: url("img/sombra_azul.png") top left no-repeat;
  /* color: black; */
}

.menu_principal :link, .menu_principal :visited {
  text-decoration: none;
}

.menu_principal *:hover {
  color: black;
}


/* Portada */
/* -------------------------------------------------------------------- */

/* Título de la portada */

body#portada div#titulo
{ position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 75px;
  margin: 0px;
  background: url("img/elagujero_p.png") top left no-repeat;

  /* border: 1px solid black; */
  }

/* Subtítulo, cosas a la derecha del título  */

body#portada div#subtitulo
{ position: absolute;		/* Su bloque contenedor es <div id="todo">. */
  right: 0px;
  top: 0px;
  width: 20em;
  overflow: hidden;
  margin: 0px;
  padding: 5px;
  font-size: 80%;
  font-weight: normal;
  text-align: right;
  max-height: 75px;

  /* border: 1px solid black; */
  }

/* Contenido en la portada */

body#portada div#contenido
{ padding-top: 75px;
  margin: 0 0 0 26em;
  }

/* Enlaces grandes */

body#portada div#menu_del_dia
{ position: absolute;
  width: 15em;
  margin: 0px;
  margin-top: 75px;
  margin-left: 9em;
  padding: 0px;
  padding-left: 1em;
  padding-right: 1em;
  border-right: 1px solid black;

  /* border: 1px solid black; */
  }

body#portada div#menu_del_dia hr
{
  display: block;
  clear: both;
  visibility: hidden;
  }

/* Cada columnilla en los enlaces grandes */

body#portada div#menu_del_dia div.feature_presentation
{
  position: relative;
  margin: 10px 0px 0px 0px;
  font-size: 80%;
}

body#portada div#menu_del_dia div.feature_presentation img
{
  float: left;
  clear: left;
  width: 100px;
  margin: 0px;
  margin-right: 5px;
}

body#portada div#menu_del_dia div.feature_presentation h2
{
  margin: 0px 0px 0px 0px;
  padding: 0px;
  font-size: 100%;
}

/* Pie */ 

body#portada div#pie
{ font-size: 100%;
  }