* {
  box-sizing: border-box;
}
@font-face
{
  font-family: Droid Sans Mono;
  src: url(../font/droid-sans.rev1.ttf);
}
a
{
  color: #a3a3a3;
  cursor: pointer;
  font-weight: 400;
  text-decoration-line: none;
  text-decoration-style: solid;
  user-select: none;
}
a:hover
{
  color: #fff;
}
a.title-link:hover
{
  color: #cec30b;
}
div#logo_container
{
  display: flex;
  flex-direction: column;
}
h2
{
  color: #a3a3a3;
  font-size: 14px;
}
h1#bio_title
{
  margin: 0px;
}
p#date
{
  color: pink;
}
p#quote
{
  color: gray;
}
html, body
{
  background-color: #0c0c0c;
  color: #fff;
  font-family: Droid Sans Mono, monospace;
  font-size: 11px;
  height: 100%;
  letter-spacing: -1px;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
div#container_bio
{
  display: flex;
  justify-content: center;
  align-items: center;
}
div#container_content
{
  max-width: 75vw;
  max-height: 25vh;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
  grid-auto-flow: row;
}
div#container_title
{
  grid-column: span 4;
}
ul#timeline
{
  list-style-type: none;
  padding-inline-start: 0px;
}
li
{
  display: table;
}
span.timeline_item
{
  display: table-cell;
  padding-left: 20px;
}
div#container_pic
{
  grid-row: span 2;
}
img#bio_pic
{
  width: 100%;
}
div#container_blurb
{
  grid-column: span 3;
  padding-left: 2%;
}
div#container_timeline 
{
  grid-column: span 3;
  padding-left: 2%;
}
div#container_date
{
  grid-column: span 4;
}
div#container_quote
{
  grid-column: span 4;
}
div#container_books
{
  grid-column: span 4;
  display: block;
  /*margin: 2em auto;*/
  overflow: auto;
  max-height: 200px;
}
h2#header_books {
  grid-column: span 2;
}
span#book_count {
  grid-column: span 2;
  align-self: end;
  text-align: right;
  color: lightcyan;
}
.flex-table {
  display: flex;
  flex-flow: row wrap;
  border-left: solid 1px #d9d9d9;
  transition: 0.5s;
  color: #a3a3a3;
}

.flex-table:first-of-type .flex-row {
  color: black;
  font-size: 14px;
  /*border-color: #1565C0;*/
  font-weight: bold;
}
.flex-table.row:nth-child(odd) .flex-row {
  background: #181823;
}

.flex-row {
  width: calc(100% / 3);
  text-align: center;
  padding: 0.5em 0.5em;
  border-right: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
}

.rowspan {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 75%;
  padding: 0;
}
.column .flex-row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding: 0;
  border: 0;
  /*border-bottom: solid 1px #d9d9d9;*/
}

.flex-cell {
  width: calc(100% / 3);
  text-align: center;
  padding: 0.5em 0.5em;
  border-right: solid 1px #d9d9d9;
}
.flex-table:first-of-type {
/*  border-top: solid 1px #1565C0;
  border-left: solid 1px #1565C0;*/
  background-color: grey;
  border-top: solid 1px #d9d9d9;
}
.flex-table:hover {
  background: grey;
  transition: 500ms;
}
/*.column .flex-row:hover {
  background: grey;
  transition: 500ms;
}*/
/*.flex-row:hover {
  background: grey;
  transition: 500ms;
}*/

.flex-table.row:nth-child(odd):hover .flex-row{
  background: grey;
  transition: 500ms;  
}

/*BEGIN NEW CSS*/


.tooltiptext {
/*  visibility: hidden;*/
/*  width: 120px;*/
  display: none;
  background-color: red;
  color: #fff;
  max-width: 50%;
  left: 25%;
/*  grid-column: span 2;*/
/*  text-align: center;*/
  border-radius: 6px;
  padding: 5px;
  position: fixed;
  z-index: 1;
/*  max-width: 75vw;*/
/*  margin: -1px;*/
/*  bottom: 150%;
  left: 50%;
  margin-left: -60px;*/
}

.arrow {
  display: none;
  content: "";
  position: fixed;
  left: 50%;
  margin-top: -10px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  z-index: 1;
  border-color: transparent transparent red transparent;
}

/*.tooltip .tooltiptext::after {
  content: "";
  position: relative;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: blue transparent transparent transparent;
}*/

/*.tooltip:hover .tooltiptext {
  visibility: visible;
}*/

/*END NEW CSS*/

@media all and (max-width: 769px) {
  .flex-row {
    width: calc(100% / 2);
  }
  .flex-row.first {
    width: 100%;
  }
  .column {
    width: 100%;
  }
}
@media all and (max-width: 430px) {
  .flex-table .flex-row {
    border-bottom: 0;
    /*border-bottom: solid 1px #d9d9d9;*/
  }
  .flex-table .flex-row:last-of-type {
    border-bottom: solid 1px #d9d9d9;
  }
  .header .flex-row {
    /*border-bottom: solid 1px;*/
    /*border-bottom: 0;*/
  }
  .flex-row {
    width: 100%;
  }
  .flex-row.first {
    width: 100%;
  }
  .flex-cell {
    width: 100%;
  }
}
@media screen and (max-width: 769px) {
  div#container_content {
    max-width: 95%;
  }
  div#container_timeline {
    grid-column: span 2;
  }
  div#container_pic {
    grid-column: span 2;
  }
  div#container_blurb {
    grid-column: span 2;
  }
}
@media screen and (max-width: 430px) {
  div#container_pic {
    grid-column: span 4;
  }
  div#container_blurb {
    grid-column: span 4;
  }
  div#container_timeline {
    grid-column: span 4;
  }
  div.tooltiptext {
    left: 2.5%;
    max-width: 95%;
  }
}