html { font-family: "Calibri"; color: #CCC; background-color: black; }
body { margin: auto; max-width: 720px; }
h1 { font-family: "Aboreto"; font-size: 36pt; text-align: center; color: #cb0; margin: 20px 0; }
h2, h3, h4, h5 { font-family: "Aboreto"; }
h2 { font-size: 16pt; font-weight: normal; text-align: center; color: #cb0; margin: 15px 0 15px 0; }
h3 { font-size: 24pt; text-align: center; color: #CB0; margin: 10px 0 10px 0 }
h4 { margin-bottom: 5px; margin-top: 20px; color: #CCC; font-size: 20pt; }
h5 { margin-bottom: 5px; margin-top: 20px; color: #AAA; font-size: 16pt; }
h4:after, h5:after {
    content:' ';
    display:block;
    border: .5px solid #aaa;
}
hr { border: 0; border-top: 1px solid #bc0; }
pre { background-color: #444; border-radius: 3px; padding: 4px; margin: 10px 0px; font-family: Courier New; font-size: 10pt; }

.socialImage {
    width: auto;
    height: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.loreImage {
  width: 90%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.databaseImage {
  width: 240px;
  height: auto;
  display: block;
}

.databaseImage:hover{
    transform:scale(1.5);
}

.roundRect {
  border-radius: 16px;
  background-color: #0c0c0c;
  border: 1px solid #181818;
  padding: 20px;
  margin: 10px;
}

button.h5 {
  font-family: "Aboreto";
  color: #AAA;
  background-color: transparent;
  font-size: 14pt;
  font-weight: bold;
  border: none;
}

button.h5:hover {
  color: #FFF;
}
button.h5:hover:after {
  content: url('/images/link.png');
  width: 20px;
  height: 20px;
}

li, p, a { font-size: 14pt; line-height: 100%; margin: 0 0 10px 0; }
blockquote { font-size: 9pt; line-height: 100)%; }
ul, li { margin: 10px 0px 10px 0px; }
a:link { color: #cb0 }
a:visited { color : #980 }
a:hover { color: #fff }

table { border-collapse: collapse; width: 100%; margin: 10px 0 10px 0; }
tr:nth-child(odd) { background-color: #30302C; }
tr:nth-child(even) { background-color: #151515; }
tr:hover { background-color: #664; }
th { font-size: 14pt; border: 1px solid #AA8; padding: 6px; text-align: center; color: #aa8; background-color: #303033; }
td { font-size: 10pt; border: 1px solid #AA8; padding: 4px; }

.row { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
.column {
    flex: 1 1 auto;
    margin: 10px;
}
.column-grow {
    flex: 1 0 auto;
    margin: 10px;
}
.column-shrink {
    flex: 0 0 auto;
    margin: 10px;
}

.background {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #30302A;
    border-radius: 3px;
    background-color: #181818
}
.background h4, h5 {
    margin-top: 0px;
}

.background-inner {
    padding: 5px;
    border: 1px solid #30302A;
    background-color: #282828;
    border-radius: 5px;
}
.collapsible {
    color: #aaa;
    cursor: pointer;
    width: 200px;
    padding: 0;
    font-family: "Aboreto";
    font-size: 14px;
    background-color: transparent;
    border: none;
    border-radius: 3px;
}
.collapsible:hover {
    color: #cca;
    border-radius: 3px;
    background-color: #443;
}
.active {
    color: #cca;
    background-color: #38382A;
}
.content {
    margin: 10px 5px 0px 5px;
    display: none;
    overflow: hidden;
}
.nobr {
    white-space: nowrap;
}

a.tooltip {
  position: relative;

  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}

a.tooltip span {
  display: none;
}

a.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  left: 0%;
  bottom: 100%;
  /* prettify */
  padding: 8px;
  color: #CCC;
  background-color: black;
  border: 0.1em solid #AA8;
  /* round the corners */
  border-radius: 5px;
  /* prevent too wide tooltip */
  width: 200px;
  z-index: 8;
}