buttondown.css

/*
    Buttondown
    A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
    Author: Ryan Gray
    Date: 15 Feb 2011
    Revised: 21 Feb 2012
    
    Reworked for other purposes by Karl Fischer
    Revised: 9 Jul 2013

    General style is clean, with minimal re-definition of the defaults. It also 
    contains built-in print optimizations. 
    
    All elements that Pandoc and MultiMarkdown use should be listed here, even 
    if the style is empty so you can easily add styling to anything.
    
    There are some elements in here for HTML5 output of Pandoc, but I have not 
    gotten around to testing that yet.
*/

/* NOTES:

    Stuff tried and failed:
    
    It seems that specifying font-family:serif in Safari will always use 
    Times New Roman rather than the user's preferences setting.
    
    Making the font size different or a fixed value for print in case the screen 
    font size is making the print font too big: Making font-size different for 
    print than for screen causes horizontal lines to disappear in math when using 
    MathJax under Safari.
*/

/* ---- Front Matter ---- */

/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC. 
   Only appears if one of those three are in the document.
*/

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

.title /* Pandoc title header (h1.title) */
    {
    text-align: center;
    }

.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
    {
    text-align: center;
    }

/* 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;
    }

@media print
    {
    div#TOC, nav#TOC
        {
        /* Don't display TOC in print */
        display: none;
        }
    }

/* ---- 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: 1.5em; /* This will increasingly indent nested header sections. 1.5 Keep it in line with bullet indent of parent section */
    }

p {}

blockquote
    { 
    font-style: italic;
    }

li /* All list items */
    {
            font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */

    }

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

ul /* Whole unordered list */
    {

    }

ul li /* Unordered list item */
    {
    }

ol /* Whole ordered list */
    {
    }

ol li /* Ordered list item */
    {
    }

hr /* Simple line for normal rules */
    {
    border: none;
    height: 1pt;
    background: none;
    border-top: 1pt solid #333;
    }
    
/* ---- Some span elements --- */

sub /* Subscripts. Pandoc: H~2~O */
    {
    }

sup /* Superscripts. Pandoc: The 2^nd^ try. */
    {
    }
    
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
    {
    }
    
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
    {
    font-style: normal;
    }

strong /* Markdown **strong** or __strong__ */
    {
    }

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

a /* All links */
    {
    /* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
    text-decoration: none;
    }

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

@media print
    {
    a   {
        /* In print, a colored link is useless, so un-style it. */
        color: black;
        background: transparent;
        }
        
    a[href^="http://"]:after, a[href^="https://"]:after
        {
        /* However, links that go somewhere else, might be useful to the reader,
           so for http and https links, print the URL after what was the link 
           text in parens
        */
        content: " (" attr(href) ") ";
        font-size: 90%;
        }
    }

/* ---- 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;
    }

div.figure /* Pandoc figure-style image */
    {
    /* Center the image and caption */
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
    font-style: italic;
    font-size:   small;
    }

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

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

pre, code 
    {
    /* Preserve whitespace, but allow word wrapping */
    white-space: pre-wrap;
    word-wrap: break-word;
    }

/* Coloring */

/* This will be only for code spans */
code
    {
    background-color: #F4F4F4;
    }
    
/* This will be only for code blocks */
pre, pre > code
    {
    background-color: #F4F4F4;
    }

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, and if printing doesn't print the background */
    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;
    }

@media screen
    {
    pre
        {
        /* Shadow on screen instead of border */
        border: none;
        box-shadow: inset 1px 1px 3px #bbb;
        }

    pre, pre > code
        {
        /* On screen, use an auto scroll box for long lines in a code block */
        white-space: pre;
        word-wrap: normal;
        overflow: auto;
        }
    }

code /* All inline code spans (applies to pre>code as well) */
    {
    /* Pad a little from adjacent text */
    padding-left:  0.3em;
    padding-right: 0.3em;
    padding-top:    0.1em;
    padding-bottom: 0.1em;
    border-radius: 3px;
    }

@media screen
    {
    code
        {
        box-shadow: inset 0px 0px 2px #bbb;
        }
    }

pre > code /* Code span in a code block */
    {
    /* Remove some styling on the span box */
    padding: 0;
    border: none;
    border-radius: none;
    background-color: inherit;
    box-shadow: none;
    }
    
code.url /* Pandoc simple URLs */
    {
    background-color: inherit; /* Un-color from previous rules */
    box-shadow: none;
    }
    
/* ---- Math ---- */

span.math /* Pandoc inline math default and --jsmath inline math */
    {
    /* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
    }
    
div.math /* Pandoc --jsmath display math */
    {
    }
    
span.LaTeX /* Pandoc --latexmathml math */
    {
    } 

eq /* Pandoc --gladtex math */
    {
    } 

/* ---- 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-top:    2pt solid #000; /* The caption on top will not have a bottom-border */
    border-bottom: 2pt solid #000;
    border-left: 2pt solid #000;
    border-right: 2pt solid #000;

    font-family: courier;
    /* Center */
    /* margin-left:  auto; */
    /* margin-right: auto; */
    }
    
thead, th /* Entire table header */
    {
    /* Well, we add th here since IE doesn't seem to respond to thead. 
       This will work until we have multi-row headers.
    */
    border-bottom: 1pt solid #000;
    background-color: #eee;
    font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
    }

tr.header /* Each header row */
    {
    } 

tbody /* Entire table  body */
    {
    }

/* Table body rows */

tr  {
    }

/* Odd and even rows */
tr.odd  {background: #FDF1F1}
tr.even {background: #F6E3E3}

tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
    {
    background-color: lightskyblue;
    }
    
td, th /* Table cells and table header cells */
    { 
    vertical-align: top; /* Word */
    vertical-align: baseline; /* Others */
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    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-top:  0.5em;
    margin-bottom:  0.3em;
    padding-bottom: 0.2em;
    }

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

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

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

dd+dt /* 2nd or greater term in the list */
    {
    border-top:  1pt solid #888;
    padding-top: 0.5em;
    }
    
dd /* A definition */
    {
    margin-bottom: 0.5em;
    }

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

a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
    font-size: small; 
    vertical-align: text-top;
}

a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
    {
    }

@media print
    {
    a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
        {
        /* Don't display these at all in print since the arrow is only something to click on */
        display: none;
        }
    }
    
div.footnotes /* Pandoc footnotes div at end of the document */
    {
    }
    
div.footnotes li[id^="fn"] /* A footnote item within that div */
    {
    }

/* Fancy rule for footnotes section (from http://css-tricks.com/examples/hrs/) */

div.footnotes > hr
    {
    margin-top: 2em;
    padding: 0;
    border: none;
    border-top: double;
    border-color: #333;
    border-width: 3pt;
    color: #000;
    text-align: center;
    }

div.footnotes > hr:after
    {
    content: "NOTES";
    display: inline-block;
    position: relative; 
    top: -0.8em;  
    font-size: 0.8em;
    padding: 0 0.5em;
    background: white;
    }

/* Convenience classes for DIVs or other things inserted into the Markdown */

/* You can class stuff as "noprint" to not print. 
   Useful since you can't set this media conditional inside an HTML element's 
   style attribute (I think).
*/

@media screen
    {
    .noscreen /* Don't display on screen (something for print only) */
        {
        display: none;
        }
    }
    
@media print
    {
    .noprint /* Don't display in print (something for screen only) */
        {
        display:none;
        }
    }

.block-center
    {
    margin-left: auto;
    margin-right: auto;
    display: table;
    }
.text-center
    {
    text-align: center;
    }

.block-right
    {
    margin-left: auto;
    margin-right: 0;
    display: table;
    }
.text-right
    {
    text-align: right;
    }

.block-left
    {
    margin-left: 0;
    margin-right: auto;
    display: table;
    }
.text-left
    {
    text-align: left;
    }