body {
  font-family: Verdana;
  font-size: 14px;
}

#facts {
  margin-left: 1%;
  margin-right: 1%;
}

div.fact {
  /*
    margin-left: 1%;
    margin-right: 1%;*/
  font-size: 12px;
  text-align: center;
  display: block;
}

div#facts span {
  border-bottom: 2px solid #ffffff;
}

div.fact a {
  color: #ffffff;
  text-decoration: none;
}

div.fact span:hover {
  background-color: #000000;
  color: #ffffff;
}

/*
div.fact span:hover a {
  background-color: #000000;
  color: #ffffff;
}
  */

span.blank {
  /*background-color: #FFC0CB;*/
  background-color: #ffffff;
  float: left;
  padding-top: 4px;
  padding-bottom: 4px;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

span.char {
  float: left;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
}

span.timeline {
  text-align: left;
  font-size: 10px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

span.timelinecent {
  text-align: center;
  font-size: 10px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

span.timelinecent a {
  color: #000000;
}

.t1 {
  background-color: #ffffff;
  color: #000000;
}

.t2 {
  background-color: #dcdcdc;
  color: #000000;
}

span.header {
  background-color: #d3d3d3;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;
}

.mainchar {
  /*background-color: #ffffff*/
  color: #ffffff;
  font-size: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #000000;
}

.mainchar a.url {
  /*background-color: #ffffff;
    color: #000000;*/
}

.mainchar a.centurynav {
}

span.currentchar {
  background-color: #000000;
  color: #ffffff;
}

span.AAAge {
  background-color: cadetblue;
  color: #ffffff;
}

span.AAcentury {
  background-color: cadetblue;
  color: #ffffff;
}

span.war {
  background-color: #000000;
  color: #ffffff;
}

span.general {
  background-color: brown;
  color: #ffffff;
}

span.philosophy {
  background-color: #FF1493;
  color: #ffffff;
}

span.art {
  background-color: darkorange;
  color: #ffffff;
}

span.music {
  background-color: forestgreen;
  color: #ffffff;
}

span.monarchy {
  background-color: royalblue;
  color: #ffffff;
}

span.religion {
  background-color: steelblue;
  color: white;
}

/* Caso particular de color de enlace */
span.religion a {
  color: white;
}

span.politics {
  background-color: #8b008b;
  color: #ffffff;
}

span.science {
  background-color: #ff4500;
  color: #ffffff;
}

span.personal {
  background-color: darkgreen;
  color: #ffffff;
}

span.literature {
  background-color: saddlebrown;
  color: #ffffff;
}

span.pope {
  background-color: yellow;
  color: #000000;
}

span.chess {
  background-color: black;
  color: white;
}

span.ithappened {
  background-color: lightgrey;
  color: #000000;
}

span.ithappened a {
  color: #000000;
}

span.cfact {
  background-color: lightgrey;
  color: #000000;
}

span.cfact:hover {
  background-color: black;
  color: white;
}

span.cfact a {
  color: #000000;
}

span.cfact a:hover {
  background-color: black;
  color: white;
}

span.mchamp {
  background-color: #800080;
  color: white;
}

form {
  margin-left: 40px;
  margin-top: 40px;
  font-size: 30px;
  color: steelblue;
}

form input[type="text"] {
  width: 40%;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 30px;
}

form input[type="submit"] {
  width: 40%;
  margin: 8px 0;
  padding-bottom: 4px;
  font-size: 30px;
}

div.npeople {
}

div.npeople p {
  color: #ffffff;
  font-size: 14px;
  /*color: #696969;*/
  text-align: right;
}

div.npeople p a {
  background-color: green;
  font-size: 12px;
  color: #ffffff;
  /*color: #696969;*/
  text-decoration: none;
  /*max-width: 200px;*/
  padding: 5px;
  margin-left: 0px;
}

div.factcat {
  font-size: 28px;
  color: steelblue;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
}

div.btwcat {
  margin-top: 50px;
}

/* Banner fijo */
#topBanner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background-color: #0044cc;*/
  background-color: steelblue;
  color: white;
  padding: 15px;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#topBanner span.title {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1em;
}

#topBanner a {
  color: white;
  text-decoration: none;
}

#topBanner a:hover {
  color: white;
  text-decoration: underline;
}

#topBanner a:visited {
  color: white;
}

/* Espacio debajo del banner */
.content {
  padding-top: 80px; /* Igual o mayor que la altura del banner */
  padding: 20px;
}

#home {
  margin-top: 10px;
  font-weight: bold;
}

#home a {
  background-color: green;
  color: white;
  text-decoration: none;
  padding: 10px;
}

#home a:hover {
  background-color: steelblue;
  color: white;
  padding: 10px;
}

/*
details {
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.5em;
  background-color: #f9f9f9;
}

summary {
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1em;
}

details[open] {
  background-color: #e6f0ff;
}

details p {
  margin: 0.5em 0 0 1em;
}
  */


  details {
    margin-bottom: 10px;
  }
  
  summary {
    font-weight: bold;
    cursor: pointer;
  }

  .hidelink {
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: gray;
    padding-left: 10px;
    font-weight: normal;
  }
  
  #hover-image {
    position: absolute;
    display: none;
    width: 180px;
    border: 2px solid #555;
    background: white;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 1000;
  }

p#hover-text {
  position: absolute;
  display: none;
  pointer-events: none;
  background-color: white;
  color: black;
  padding: 5px;
  border: 2px solid black;
  z-index: 1000;
  font-size: 16px;

}