body {
  margin: auto;
  max-width: 900px;
  padding: 10px;
  line-height:1.6;
  background-color: #FBFBFB;
  font-size:1.2em;
  color: #202020;
  font-family: 'Source Serif Pro', serif;
}

div#header, header
    {
    /* Put border on bottom. Separates it from TOC or body that comes after it. */
    margin-top: 1em;
    margin-bottom: 2em;
    }

.title /* Pandoc title header (h1.title) */
    {
    text-align: center;
    margin: 0px;
    font-size: 2.1em;
    }

.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
    {
    text-align: center;
    margin: -5px 0 0 0;
    color: grey;
    }
.date {
  font-size: 0.9em;
}

/* Pandoc table of contents DIV when using the --toc option.
   NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header. 
   Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
*/

div#TOC, nav#TOC
    {
    /* Put border on bottom to separate it from body. */
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
    }

/* ---- Headers and sections ---- */

h1, h2, h3, h4, h5, h6
{
    font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */

    /* font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */

    page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
}

/* Pandoc with --section-divs option */

div div, section section /* Nested sections */
    {
    margin-left: 2em; /* This will increasingly indent nested header sections */
    }

blockquote
    { 
    font-style: italic;
    }

li > p /* Loosely spaced list item */
    {
    margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
    }

em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
    {
    font-style: normal;
    }

/* ---- Links (anchors) ---- */

a {
    /* Keep links clean.*/
    text-decoration: none;
}


a:visited {
  color: blue;
}

a:hover {
  /* On hover, we indicate a bit more that it is a link. */
  text-decoration: underline;
}

/* ---- Images ---- */

img {
    /* Let it be inline left/right where it wants to be, but verticality make
       it in the middle to look nicer, but opinions differ, and if in a multi-line
       paragraph, it might not be so great.
    */
    vertical-align: middle;
    max-width:100%;
    max-height:100%
}

figcaption {
  text-align: center;
  color: grey;
  font-style: italic;
  font-size: 0.8em;
}

figure /* Pandoc figure-style image */
    {
    /* Center the image and caption */
      border-bottom: 2px;
      border-top: 2px;
      border-color: grey;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-style: italic;
    }

p.caption /* Pandoc figure-style caption within div.figure */
    {
    /* Inherits div.figure props by default */
    }

/* ---- Code blocks and spans ---- */

.sourceCode {
  overflow: auto;
}

pre, code 
    {
    background-color: #fdf7ee;
    /* BEGIN word wrap */
    /* Need all the following to word wrap instead of scroll box */
    /* This will override the overflow:auto if present */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    /* END word wrap */
    }

pre /* Code blocks */
    {
    /* Distinguish pre blocks from other text by more than the font with a background tint. */
    padding: 0.5em; /* Since we have a background color */
    border-radius: 5px; /* Softens it */
    /* Give it a some definition */
    border: 1px solid #aaa;
    /* Set it off left and right, seems to look a bit nicer when we have a background */
    margin-left:  0.5em;
    margin-right: 0.5em;
    white-space: pre;
    overflow: auto;
    /* Dotted looks better on screen and solid seems to print better. */
    border: 1px dotted #777;
    }

p > code, li > code /* Code spans in paragraphs and tight lists */
    {
    /* Pad a little from adjacent text */
    padding-left:  2px;
    padding-right: 2px;
    }

li > p code /* Code span in a loose list */
    {
    /* We have room for some more background color above and below */
    padding: 2px;
    }

/* ---- Tables ---- */

/*  A clean textbook-like style with horizontal lines above and below and under
    the header. Rows highlight on hover to help scanning the table on screen.
*/

table
    {
    border-collapse: collapse;
    border-spacing: 0; /* IE 6 */

    border-bottom: 2pt solid #000;
    border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */

    /* Center */
    margin-left: auto;
    margin-right: auto;
    }

thead /* Entire table header */
    {
    border-bottom: 1pt solid #000;
    background-color: #eee; /* Does this BG print well? */
    }

/* Table body rows */

tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
    {
    background-color: #eee;
    }

td, th /* Table cells and table header cells */
    { 
    vertical-align: top; /* Word */
    vertical-align: baseline; /* Others */
    padding-left:   0.5em;
    padding-right:  0.5em;
    padding-top:    0.2em;
    padding-bottom: 0.2em;
    }

/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
/*
tr td:last-child, tr th:last-child
    {
    padding-right: 0;
    }
tr td:first-child, tr th:first-child 
    {
    padding-left: 0;
    }
*/

th /* Table header cells */
    {
    font-weight: bold; 
    }

tfoot /* Table footer (what appears here if caption is on top?) */
    {
    }

caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
    {
    caption-side: top;
    border: none;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    margin-bottom: 0.3em; /* Good for when on top */
    padding-bottom: 0.2em;
    }

/* ---- Definition lists ---- */

dl /* The whole list */
    {
    border-top: 2pt solid black;
    padding-top: 0.5em;
    border-bottom: 2pt solid black;
    }

dt /* Definition term */
    {
    font-weight: bold;
    }

dd+dt /* 2nd or greater term in the list */
    {
    border-top: 1pt solid black;
    padding-top: 0.5em;
    }

dd /* A definition */
    {
    margin-bottom: 0.5em;
    }

dd+dd /* 2nd or greater definition of a term */
    {
    border-top: 1px solid black; /* To separate multiple definitions */
    }