/* ==========================================================================
   The American History Notebook — one stylesheet, hand-written, no framework.
   Georgia because Georgia was designed for screens. Navy and cream because
   that's what the notebooks look like. If it looks wrong in your browser,
   I honestly would like to know, but I only have the two browsers.
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  background: #f4f1e6;
  color: #1a1a1a;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.6;
}

#wrap {
  max-width: 920px;
  margin: 24px auto;
  background: #fffdf7;
  border: 4px double #1f3864;
  padding: 28px 40px 40px 40px;
}

header {
  text-align: center;
  border-bottom: 3px double #1f3864;
  padding-bottom: 12px;
  margin-bottom: 0;
}

h1 {
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 0 0 4px 0;
  color: #1f3864;
  text-transform: uppercase;
}

.tagline {
  font-style: italic;
  color: #5a5347;
  margin: 0;
  font-size: 15px;
}

nav {
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
  border-bottom: 3px double #1f3864;
  margin-bottom: 26px;
  line-height: 2;
}

nav a { white-space: nowrap; }
nav .cur { color: #8a7a2e; font-weight: bold; }

a { color: #1f3864; text-decoration: underline; }
a:visited { color: #5b4a7a; }

h2 {
  font-size: 24px;
  color: #1f3864;
  font-weight: normal;
  border-bottom: 1px solid #c9c4ae;
  padding-bottom: 6px;
  margin: 38px 0 14px 0;
}

h3 {
  font-size: 18px;
  color: #1f3864;
  margin: 30px 0 8px 0;
}

p { margin: 0 0 16px 0; }

.lead {
  font-size: 19px;
  line-height: 1.65;
}

ul, ol { margin: 0 0 16px 0; padding-left: 28px; }
li { margin-bottom: 7px; }

/* the timeline page */
ul.timeline { list-style: none; padding-left: 0; }
ul.timeline li {
  padding-left: 96px;
  text-indent: -96px;
  margin-bottom: 11px;
}
ul.timeline b { color: #1f3864; }

/* tables — the presidents table especially. borders, zebra, the works. */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0 22px 0;
  font-size: 15px;
  line-height: 1.45;
}

th {
  background: #1f3864;
  color: #f4f1e6;
  padding: 6px 9px;
  text-align: left;
  border: 1px solid #1f3864;
  font-weight: bold;
}

td {
  border: 1px solid #c9c4ae;
  padding: 5px 9px;
  vertical-align: top;
}

tr:nth-child(even) td { background: #f4f1e6; }

/* quotations from the documents page — set them off properly */
blockquote {
  margin: 20px 40px;
  padding: 8px 20px;
  border-left: 4px solid #1f3864;
  font-style: italic;
  color: #33302a;
  line-height: 1.7;
}

blockquote.doc {
  font-size: 18px;
  margin: 22px 60px;
}

blockquote p { margin-bottom: 10px; }

blockquote .cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #5a5347;
  text-align: right;
}

/* glossary */
dl.glossary { margin: 0 0 16px 0; }
dl.glossary dt {
  font-weight: bold;
  color: #1f3864;
  margin-top: 18px;
}
dl.glossary dd {
  margin: 2px 0 0 24px;
}

/* site log */
dl.log dt { font-weight: bold; color: #1f3864; margin-top: 16px; }
dl.log dd { margin: 2px 0 0 24px; }

/* reading list */
ul.shelf li { margin-bottom: 14px; }
.stars { color: #9a7d0a; letter-spacing: 2px; font-size: 15px; }

/* footnotes at the bottom of the longer pages */
.footnotes {
  font-size: 14px;
  color: #44403a;
  border-top: 1px dotted #99927e;
  padding-top: 10px;
}
.footnotes ol { padding-left: 22px; }
sup { line-height: 0; }

/* small helpers I keep reaching for */
.note {
  font-size: 14px;
  color: #5a5347;
  font-style: italic;
}
.fix { background: #fff3b0; padding: 0 3px; }
.callout {
  background: #f0ead6;
  border: 1px solid #c9c4ae;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 16px;
}
.smallcaps { font-variant: small-caps; letter-spacing: 1px; }

hr {
  border: 0;
  border-top: 3px double #c9c4ae;
  margin: 30px 0;
}

footer {
  margin-top: 44px;
  border-top: 3px double #1f3864;
  padding-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #5a5347;
  line-height: 1.9;
}
footer .updated { font-style: italic; }

/* the phone pass of 2019 — Margaret made me do it, and she was right */
@media (max-width: 700px) {
  #wrap { margin: 0; border: none; padding: 12px 16px 24px 16px; }
  body { font-size: 16px; }
  ul.timeline li { padding-left: 0; text-indent: 0; }
  blockquote, blockquote.doc { margin: 16px 8px; }
  table { font-size: 13px; }
  td, th { padding: 4px 5px; }
}

/* for the handful of you who print the timeline for a class */
@media print {
  body { background: #fff; font-size: 12px; }
  #wrap { border: none; max-width: 100%; margin: 0; padding: 0; }
  nav, footer, .noprint { display: none; }
  a { color: #000; text-decoration: none; }
}