/*Base Elements****************************************************************/
html {
  background: #f7f7f7;
  font-family: "Helvetica", "Arial", "DejaVu Sans", "Liberation Sans", sans-serif;
}
body {
  margin: 0;
  min-width: 320px;
  color: #4C4C4C;
  line-height: 1.6;
  font-size: 1em;
}
h1 {font-size: 1.6em; margin: .67em 0}
h2 {font-size: 1.25em; margin: .83em 0}
h3 {font-size: 1.125em; margin: 1em 0}
h4 {font-size: 1em; margin: 1.33em 0}
a {background-color: transparent; color: #3b8bba; text-decoration: none;}
a:active, a:hover {outline: 0}
a:visited {color: #265778;}
a.no-color {color: inherit;}
b, strong {font-weight: 700}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0}
img {
  border: 0;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
footer, header, main, menu, nav {display: block;} /* ie11 and below don't know this */
table {border-collapse: collapse; border-spacing: 0}
td, th {padding: 0.5em 1em;}

/*Header and nav***************************************************************/
header {
  max-width: 768px;
  margin: 0 auto;
  padding: 0.5em 1em 0.5em 1em;
  text-align: center;
  border-bottom: 1px solid #C0C0C0;
}
header h1 {font-size: 200%; font-weight: 200; margin: 0; color: #444;}
nav {padding: 0.3em 0 0.3em 0;}
nav ul {margin: 0; padding: 0;}
nav ul li {list-style: none; display: inline;}
nav li:before {content: " | "; color: #999;}
nav li:first-child:before {content: none;}
nav li a {padding: 0.35em 1em; text-decoration: none;}
nav li a:focus,nav li a:hover {background: #eee;}
nav a, nav a:visited {color: #666;}
nav .active a {color: #111;}

/*Main*************************************************************************/
main {
  max-width: 768px;
  margin: 0 auto 0 auto;
  padding-left: 1em;
  padding-right: 1em;
}
main h1, main h2, main h3 {
  margin: 1.5em 0 0.75em 0; 
  font-weight: 200; 
  position: relative;
}
main h1{color: #444;}
main h2, main h3 {color: #222;}
main li p {margin:0;} /*Markdown puts <p> tags in list items which screws up spacing*/
main .quote {
  font-family: "Georgia", "Liberation Serif", serif;
  color: #555;
  font-style: italic;
  line-height: 1.8;
  border-left: 5px solid #ddd;
  padding-left: 1.5em;
}
main .aside {
  border-left: 10px solid #ccc; 
  background: #e4e4e4; 
  padding: 0.3em 1em;
}

/*Code*************************************************************************/
pre, code {
  font-family: Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  color: #222; 
  background: #eeeeee;
  font-weight: normal;
}
pre {
  padding: 0.5em; 
  border: 1px solid #d0d0d0; 
  overflow: auto; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  white-space: pre; 
  line-height: 1.2;
}
pre.scroll {max-height: 450px;}
pre code {
  padding: 0; 
  white-space: pre; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
}
code {
  font-size: 0.9em; 
  padding: 0.2em 0.4em; 
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*pure-grid v0.6.0**************************************************************/
.pure-g {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin-left: -1em; 
  margin-right: -1em; 
} 
.pure-u-1, .pure-u-1-2, .pure-u-1-4, .pure-u-3-4,
.pure-u-md-1, .pure-u-md-1-2, .pure-u-md-1-4, .pure-u-md-3-4 {
  display: inline-block; 
  letter-spacing: normal; 
  word-spacing: normal; 
  vertical-align: top;
}
.pure-u-1-4 {width: 25%;} 
.pure-u-1-2 {width: 50%;} 
.pure-u-3-4 {width: 75%;}
.pure-u-1 {width: 100%}

@media screen and (min-width: 36em) {
  .pure-u-md-1-4 {width: 25%;}
  .pure-u-md-1-2 {width: 50%;}
  .pure-u-md-3-4 {width: 75%;}
  .pure-u-md-1 {width: 100%}
  .pure-g {margin-left: auto; margin-right: auto;}
}

/*Diversion page tables*******************************************************/
table.diversions {margin-left: 1em; margin-bottom: 1.5em;}
table.diversions td {vertical-align: top; padding: 3px 3px 3px 10px; min-width: 3.8em;}/*Chrome breaks at dash if no min-width*/
table.diversions a {padding: 5px 0 5px 0;}
main h2.diversions {margin-left: 0.5em; margin-top: 0; margin-bottom: 0.5em;}

/*pure tables*****************************************************************/
.pure-table {empty-cells: show; border: 1px solid #cbcbcb} 
.pure-table caption {
  color: #000; 
  font: italic 85%/1 arial, sans-serif; 
  padding: 1em 0; 
  text-align: center
} 
.pure-table td, .pure-table th {
  border-left: 1px solid #cbcbcb; 
  border-width: 0 0 0 1px; 
  font-size: inherit; 
  margin: 0; 
  overflow: visible; 
  padding: .5em 1em
}
.pure-table td:first-child, .pure-table th:first-child {border-left-width: 0} 
.pure-table thead {
  background: #e0e0e0; 
  color: #222; 
  text-align: left; 
  vertical-align: bottom;
}

/*Responsive tables***********************************************************/
.table-responsive {
  margin-left: -1em; 
  margin-right: -1em; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  margin-bottom: 1em;
}
.table-responsive table {width: 100%;}

/*Photos***********************************************************************/
.photo-box {
  overflow: hidden; 
  position: relative; 
  text-align: center;
}
.photo-box img {max-width: 100%; height: auto;}
.photo-box aside {
  position: absolute; 
  bottom: 0; right: 0; 
  padding: 1em 0.5em; 
  color: white; 
  width: 100%; 
  font-size: 80%; 
  text-align: right; 
  background: -webkit-linear-gradient(top, rgba(16,27,30,0) 0%, rgba(12,2,2,1) 80%); /* Chrome10+, Safari5.1+ */
  background: -ms-linear-gradient(top, rgba(16,27,30,0) 0%, rgba(12,2,2,1) 80%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(16,27,30,0) 0%, rgba(12,2,2,1) 80%); /* W3C */
}
.photo-box aside span {color: #bbb;}
.photo-box aside span a {color: #ccc;text-decoration: none;}

/*Responsive*******************************************************************/
@media screen and (min-width: 48em) {
  body {font-size: 1.125em;}
  code {font-size: 0.8333em;}
  .table-responsive {margin-left: auto; margin-right: auto;}
}

/*Print************************************************************************/
@media print {
  *{background: transparent !important; color: black !important;}
  body {font-size:12pt; max-width:100%;}
  a {text-decoration: underline;}
  hr {visibility: hidden;page-break-before: always;}
  pre, blockquote {padding-right: 1em; page-break-inside: avoid;}
  tr, img {page-break-inside: avoid;}
  img {max-width: 100% !important;height:auto;}
  p, h2, h3 {orphans: 3; widows: 3;}
  h2, h3 {page-break-after: avoid;}
  footer {display: none;}
  header {display: none;} 
}