/* Meyer's Reset 2.0 modified */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Generic styles */
body {
  font-family: Open Sans, Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1;
  background-color: #FFFFFF;
  color: #202020;
}
p, article {
  margin: 0 0 1.5em 0;
}
a {
 color: #0138A6;
 text-decoration: none;
}
a:hover {
  color: #0138A6;
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Lato;
  color: #000;
  line-height: 1em;
}
h1 {
  font-size: 2em;
  margin: 0.5em 0;
}
h2 { font-size: 1.5em; margin-bottom: 0.5em; }
h3 { font-size: 1.3em; margin-bottom: 0.5em; }
blockquote {
  background: url(/img/quotes.gif) no-repeat;
  margin: 1em 3em 1em 1.5em;
  padding-left: 1.5em;
}

/* Structure */
div.main {
  display: flex;
  justify-content: space-between;
}

div.derecha {
  background-color: #F2DA7B;
  width: 150px;
  vertical-align:top;
  font-size: 80%;
  min-height:490px;
}
td.central { vertical-align:top; }

td.izq { padding-right: 8px; vertical-align: top; }
td.linea { width:1px; background-color: #CCCCCC }
td.der { padding-left: 5px; vertical-align: top; }

#menuizq div.titulo {
  padding: 1px 0px 1px 5px;
  margin: 4px 0px 2px 0px;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #000000;
  background-color: #078AEE;
  color: #FFFFFF;
  font-weight: bold;
}

#menuizq a, #menuizq .seleccionado {
  margin: 0px 2px 0px 8px;
  display: block;
  text-decoration: none;
  color: #000000;
}
#menuizq a:hover, #menuizq .seleccionado {
  text-decoration: underline;
}
#login {
  margin: 2px;
}
#login input {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 90%;
  margin: 2px 0px 2px 0px;
  padding:0px;
}
#login input.login { width: 120px; }
#login div { margin-left: 6px; }
#login a { color: black; }

#cabecera { background: #013856 url(/img/fondo_hor.gif); height: 80px; }
#cabecera #leyenda { position:absolute; left:148px; top:45px; }
#busqueda {
  margin:0px; border:0px;
  position:absolute; top:3px; right:3px; font-size: 70%; color:white;
  text-align: right;
}
#busqueda input {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 90%;
  vertical-align: middle;
  margin: 2px 0px 2px 0px;
  padding:0px;
}
#busqueda input#cajab { width: 120px; }
#busqueda div {
  vertical-align: middle;
  margin: 2px 0px 2px 2px;
  padding:0px;
}
#busqueda div a {
  font-weight: bold; color:white;
  vertical-align: top;
}
#busqueda div a:hover { background-color:white; color:#013856; text-decoration:none;}
#letras {
  position:absolute; top:46px; right:3px; font-size: 70%; color:white;
}
#letras img { border: 0px; }
.menuhor {
  font-weight: bold;
  display: flex;
  justify-content: space-evenly;
  background-color: #078AEE;
}
.menuhor.footer {
  justify-content: space-between;
}

.menuhor > * {
  font-size: 70%;
  vertical-align:middle;
  padding: 4px 2px;
  color: white;
  margin: 0 2px;
}
.menuhor a:hover, .menuhor .seleccionado {
  background-color: #FFFFFF;
  color: #078AEE;
  text-decoration: none;
}

#cuerpo {
  margin: 10px 11% 10px 4%;
  text-align: left;
  line-height: 1.4em;
  font-size: 75%;
}
#migas { font-size: 0.9em; }

.extras, .ejercicio { background-color: #F3F3F3; padding: 2px; }
.extras a { padding-right: 20px;  }
.extras img { vertical-align:middle; }

img.foto { float: right; padding-left: 4px; background: white; max-width: 20%; }

/* Forum */
.foros { background: black; border-spacing: 1px; border-collapse: initial; }
.foros th { background: #F2DA7B; padding: 5px; font-family: Lato; font-size: 1.2em; vertical-align: middle;}
.foros td { background: white; padding: 5px; }
.foros td.peq { text-align:center; font-size:80%;}
.foros th div { font-weight: normal; }
.responder { margin-bottom: 15px; }
.margen { margin-left: 30px; }
.mensaje { border: 1px solid black; margin-bottom: 1em; }
.mensaje .cabecera {
  background: #F2DA7B;
  padding: 5px;
  border-bottom: 1px solid black;
}
.mensaje .cabecera .titulo { font-weight: bold; }
.mensaje .texto { padding: 5px; }

#formulario { font-weight: bold; }
#formulario input, #formulario textarea, #formulario select { display:block; margin-bottom: 8px; font-weight: normal; }
#formulario i { font-weight: normal; font-style: italic; }
.error { color: red; font-style: italic; }

dl.novedad dd { margin-bottom: 10px; }
section.respuesta {
  margin: 0 0 1.5em 0;
  border-bottom: 1px solid #CCCCCC;
}
section.respuesta:last-child { border: 0; }

sup { font-size: 85%; vertical-align: 20%;}

.historia { margin: 6px 0px 16px 1em; }
.historia .titulo { font-weight:bold; margin-left: 1em; }
.historia .texto { margin-left: 2em; }
.comentario { background: #F8F8F8; }
.barrablog { font-size: 75%; margin-left: 2.5em; text-align: right; border-top: 1px solid #CCCCCC; }
.barrablog img { vertical-align:middle; background: white; }
.barrablog a {padding-left: 5px;}
.barracom { font-size: 75%; margin-bottom: 2em; text-align: right; border-top: 1px solid #CCCCCC; }
.caja_preview { border: 1px solid black; padding: 1em 1em 0em 1em; margin-bottom: 1em; }

.donacion { text-align: center; margin: 20px auto; }


@media (max-width: 480px) {
  #cabecera #logo { position: relative; left: -20px; }
  #cabecera #leyenda { left: 128px; }
  #cabecera #leyenda img { width: 100%; }
  .main { flex-wrap: wrap; }
  #cuerpo { overflow: hidden; }
  div.derecha { width: 100%; min-height: 0; }
}