@import url(//fonts.googleapis.com/css?family=Crimson+Text|Oxygen|Lato);

:root {
  --warhawk: #840029;
  --heritage-gold: #fdb913;
  --metallic-gold: #85714d;
  --gold: #bd955a;
  --bright-gold: #efdbb2;
  --dark-grey: #646469;
  --mid-dark-grey: #a9a8a9;
  --mid-light-grey: #c8c9c7;
  --light-grey: #dad8d6;
  --b-font: 'Crimson Text', serif;
  --h-font: font-family: 'Oxygen', sans-serif;
}

.colorWarhawk {
  color: #840029;
}

.colorHeritageGold {
  color: #fdb913;
}

.colorMetallicGold {
  color: #85714d;
}

.colorGold {
  color: #bd955a;
}

.colorBrightGold {
  color: #efdbb2;
}

.colorDarkGrey {
  color: #646469;
}

.colorMidDarkGrey {
  color: #a9a8a9;
}

.colorMidLightGrey {
  color: #c8c9c7;
}

.colorLightGrey {
  color: #dad8d6;
}

/*
USEFUL TINTS

Warhawk:
  20% light - 9d3354
  30% light - a94d69
  40% light - b5667f
  50% light - c28094
  20% dark - 6a0021
  30% dark - 5c001d
  40% dark - 4f0019
  50% dark - 420015


Heritage Gold:
  20% light - fdc742
  30% light - fece5a
  40% light - fed571
  50% light - fedc89
  20% dark - ca940f
  30% dark - b1820d
  40% dark - 986f0b
  50% dark - 7f5d0a

*/

/*
TABLE OF CONTENTS
Basic Setup
Header Menu
Responsive Menu
Main Content
Footer Menu
Quiz styles
*/

/* Basic Setup */

* {
  margin: 0;
  padding: 0;
}

html, body {
  font-family: "Crimson Text", serif;
  font-size: 115%;
  color: var(--dark-grey);
  transition: background-color .5s;
}

a {
  text-decoration: none;
  color: var(--warhawk);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", sans-serif !important;
  color: var(--mid-dark-grey) !important;
  margin: 1em 0;
}

h1 {
  font-size: 1.8em;
}

p {
  margin: 1em 0;
}

.attention {
  color: var(--heritage-gold);
}

/* end Basic Setup */

/* Header Menu */

header {
  height: 4em;
  background-color: var(--dark-grey);
  color: var(--heritage-gold);
  top: 0;
  left: 0;
  right: 0;
  line-height: 2em;
  font-family: "Lato", sans-serif;
  transition: 0.5s
}

header img.logo {
  max-width: 20em;
  max-height: 4em;
  float: left;
}

header a.logo {
  float:left;
}

header ul {
  list-style-type: none;
  overflow: hidden;
}

header li {
  float: right;
}

header li a {
  display: block;
  color: var(--heritage-gold);
  text-align: center;
  padding: 1em;
}

header li a:hover {
  color: var(--mid-light-grey);
}


/* end Header Menu */

/* Main Content */

#main {
  min-height: calc(100vh - 12em);
}

.content {
  max-width: 1080px;
  margin: auto;
}

.content img {
  max-width: 400px;
  margin: 10px;
}

.content img.feature {
  max-width: 600px;
  margin: 1em auto;
  display: block;
}

img.left {
  float: left;
}

img.right {
  float: right;
}

img.headshot {
  max-height: 400px;
}

@media screen and (max-width: 500px) {
  img.left {float: none; display: block; max-width: 90%}
  img.right {float: none; display: block; max-width: 90%}
  img.feature {max-width: calc(vw * .9)}
}

ul.simple {
  list-style-type: none;
}

ul.spaced li {
  margin: 1em auto;
}

table.listtable {
  border-collapse: collapse;
}

table.listtable tr {
  border-bottom: 1px solid var(--gold);
}

table.listtable th {
  font-weight: bold;
  font-size: 1.1em;
  font-family: "Lato", sans-serif;
}

table.listtable td,
table.listtable th {
  padding: 4px 16px 4px 8px;
  vertical-align: middle;
  text-align: center;
}

table.listtable tr:nth-child(2n) {
  background-color: var(--bright-gold);
}

table.reference td {
  vertical-align: top;
}

section.article-header {
  margin-top: 1em;
  margin-bottom: 1em;
}

section.article-header h1,
section.article-header h2,
section.article-header h3,
section.article-header h4,
section.article-header h5,
section.article-header h6 {
  margin: 0 auto;
}

nav.sub ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav.sub ul li {
  display: inline-block;
  border-left: 1px solid var(--metallic-gold);
  width: 190px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Lato", sans-serif;
}

nav.sub ul li.five {
  width: 150px;
}

nav.sub ul li.five:nth-child(5n+1) {
  border-left: 0;
  padding-left: 0;
}

nav.sub ul li:first-child {
  border-left: 0;
  padding-left: 0;
}

nav.sub ul li a {
  color: var(--gold);
  display: block;
  width: 100%;
  padding: 0 0.5em;
}

nav.sub ul li a:hover {
  color: var(--warhawk);
}

.bookitem {
  width: 240px;
  display: inline-block;
  margin: 20px 50px;
}

.bookitem img {
  width: 180px;
}

section#stack_top {
  height: calc(50vh - 134px);
  max-height: calc(50vh - 134px);
  margin: 20px;
  padding: 0;
  border-collapse: collapse;
  overflow-y: scroll;
  border-bottom: 1px solid #AAA;
}

section#stack_bottom {
  height: calc(50vh - 134px);
  max-height: calc(50vh - 134px);
  margin: 0;
  padding: 0 0 0 2em;
  border-collapse: collapse;
  position: absolute;
  overflow-y: scroll;
  width: calc(100vw - 132px);
}


/* end Main Content */

/* Footer Menu */

footer {
  min-height: 6em;
  background-color: var(--dark-grey);
  color: var(--heritage-gold);
  bottom: 0;
  left: 0;
  right: 0;
  font-family: "Lato", sans-serif;
  margin-bottom: 0;
  padding-top: 1em;
  overflow: hidden;
}

p.copy {
  text-align: center;
  float: left;
  width: 100%;
  display: block;
  padding: 0;
  margin: 0.1em auto;
  font-size: 0.8em;
}

footer section {
  float: left;
  font-size: 0.7em;
  padding: 1em;
}

footer section ul {
  list-style-type: none;
}

footer section ul li {
  padding-left: 1em;
}
/* end Footer Menu */

/* Quiz styles */

header.quiz-index {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  background-color: transparent;
}

header.quiz-index a {
  width: 2.5em;
  height: 2.5em;
  margin: 0.5em;
  background-color: var(--light-grey);
  color: var(--mid-dark-grey);
  border-style: solid;
  border-width: 1px;
  border-color: var(--mid-dark-grey);
  text-align: center;
}

header.quiz-index a.current-question {
  background-color: #b5667f;
  color: var(--warhawk);
  border-color: var(--warhawk);
}

header.quiz-index a.answered-question {
  background-color: var(--bright-gold);
  color: var(--gold);
  border-color: var(--gold);
}

span.taq-answer-response {
  color: #ffffff;
  background-color: var(--gold);
  border-color: var(--metallic-gold);
  border-width: 1px;
  padding: 2px 4px;
  margin: auto 2em;
  white-space: nowrap;
  border-radius: 4px;
}

/* end Quiz styles */