/* The Buried South — hand-written stylesheet.
   Deliberately built like a site from about 2008: a fixed centre column that goes
   fluid on small screens, real borders instead of soft shadows, serif body copy,
   and a sidebar. No web fonts (nothing to load, nothing to track), no frameworks. */

body {
  margin: 0;
  padding: 0;
  background: #cfc7b6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23cfc7b6'/><rect width='1' height='1' fill='%23c6bda9'/></svg>");
  color: #241f19;
  font: 15px/1.62 Georgia, "Times New Roman", Times, serif;
}

#wrap {
  width: 940px;
  margin: 18px auto 40px auto;
  background: #fbf8f1;
  border: 1px solid #9c917a;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
}

/* masthead ------------------------------------------------------------- */
#masthead {
  background: #14110f;
  border-bottom: 3px solid #c69a4e;
  padding: 18px 24px 14px 24px;
}
#masthead a { text-decoration: none; }
#sitename {
  display: block;
  font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
  font-size: 34px;
  letter-spacing: 2px;
  color: #e8e1d5;
  text-transform: uppercase;
}
#tagline {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 1px;
  color: #a2977f;
}

/* nav ------------------------------------------------------------------ */
#nav {
  background: #e6dfd0;
  background: linear-gradient(#efe9dc, #ddd4c1);
  border-bottom: 1px solid #9c917a;
}
#nav ul { margin: 0; padding: 0; list-style: none; overflow: hidden; }
#nav li { float: left; border-right: 1px solid #c3b89f; }
#nav a {
  display: block;
  padding: 8px 16px;
  font: bold 11px/1.4 Verdana, Geneva, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a3d2c;
  text-decoration: none;
}
#nav a:hover { background: #f5f0e5; color: #7a2e1b; }

/* layout --------------------------------------------------------------- */
#main { padding: 22px 24px 8px 24px; }
#cols { overflow: hidden; }
#content { float: left; width: 600px; }
#side { float: right; width: 258px; }

h1 {
  margin: 0 0 .4em 0;
  font-family: Didot, "Bodoni MT", Georgia, serif;
  font-size: 30px;
  font-weight: normal;
  line-height: 1.2;
  color: #1d1913;
}
h2 {
  margin: 1.9em 0 .5em 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #d6ccb6;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: bold;
  color: #33291d;
}
h2.chapter {
  border-bottom: none;
  border-left: 4px solid #c69a4e;
  padding: 2px 0 2px 10px;
  font-size: 17px;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: #7a2e1b;
}
h3 {
  margin: 0 0 .5em 0;
  font: bold 11px/1.3 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5a4c37;
}
p { margin: 0 0 1.05em 0; }
a { color: #7a2e1b; }
a:visited { color: #6a4a3a; }
a:hover { color: #a3411f; }

.standfirst {
  font-size: 16.5px;
  line-height: 1.6;
  color: #3a3128;
  border-left: 3px solid #c69a4e;
  padding-left: 12px;
  margin-bottom: 1.4em;
}
.fine { font-size: 12px; color: #6a5f4c; }

/* figures -------------------------------------------------------------- */
.figure {
  margin: 1.4em 0;
  padding: 8px;
  background: #f2ece0;
  border: 1px solid #cabfa9;
}
.figure img { display: block; width: 100%; height: auto; border: 1px solid #8d8264; }
.cap { margin: 8px 2px 2px 2px; font-size: 12.5px; line-height: 1.5; color: #4c4335; }
.cap .lbl {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  background: #14110f;
  color: #c69a4e;
  font: bold 10px/1.4 Verdana, sans-serif;
  letter-spacing: .06em;
}
.cap .cred { color: #7a705c; font-style: italic; }

/* video ---------------------------------------------------------------- */
.video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1.3em 0;
         border: 1px solid #8d8264; background: #14110f; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* sidebar -------------------------------------------------------------- */
.box {
  margin-bottom: 16px;
  padding: 11px 13px;
  background: #f1ebdd;
  border: 1px solid #cabfa9;
}
ul.plain, ol.plain { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
ul.plain { list-style: square; }

/* lists and tables ------------------------------------------------------ */
ul.eplist { margin: 0; padding-left: 20px; list-style: square; }
ul.eplist li { margin-bottom: .5em; }
ol.sources { padding-left: 22px; font-size: 13.5px; line-height: 1.6; }
ol.sources li { margin-bottom: .8em; }
ol.sources a { word-break: break-word; }

table.grid { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13.5px; }
table.grid th {
  background: #e4dcca; border: 1px solid #c3b89f; padding: 6px 8px; text-align: left;
  font: bold 11px/1.3 Verdana, sans-serif; text-transform: uppercase; letter-spacing: .06em;
}
table.grid td { border: 1px solid #d8cfbb; padding: 6px 8px; vertical-align: top; }
table.grid tr:nth-child(even) td { background: #f4efe4; }

/* footer --------------------------------------------------------------- */
#footer {
  clear: both;
  margin-top: 10px;
  padding: 14px 24px 18px 24px;
  border-top: 1px solid #c3b89f;
  background: #efe9dc;
  font-size: 12px;
  color: #5f5442;
}
#footer p { margin: 0 0 .5em 0; }

/* small screens --------------------------------------------------------- */
@media (max-width: 980px) {
  #wrap { width: auto; margin: 0; border-left: 0; border-right: 0; }
  #content, #side { float: none; width: auto; }
  #side { margin-top: 26px; }
  #main { padding: 18px 16px 6px 16px; }
  #masthead { padding: 14px 16px 12px 16px; }
  #sitename { font-size: 26px; }
  #nav li { float: none; border-right: 0; border-bottom: 1px solid #c3b89f; }
  #nav a { padding: 10px 16px; }
  body { font-size: 16px; }
  h1 { font-size: 25px; }
}