pseudbot/img/pub.css

/*
 * CSS stylesheet for readable pages, built for HTML generated by Pandoc.
 *
 * Credits to: 
 * 
 * - https://github.com/huyng/latex-simple-css
 * - https://gist.github.com/ryangray/1882525
 */

body {
    /* Serif options */
    /*font-family: "Times New Roman", Times, serif;*/
    /*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif    */

    /*Sans Serif options */
    /*font-family: "Helvetica", Arial, Freesans, clean, sans-serif;*/
    font-family: "Helvetica Neue", "Ubuntu", "Open Sans", Arial, Freesans, clean, sans-serif;
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
    /*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
    /*font-family: Verdana, Geneva, sans-serif;*/
    /*font-family: Tahoma, Geneva, sans-serif;*/
    /*font-family: Baskerville, 'Times New Roman', Times, serif;*/

    padding:1em;
    font-size: 14px;
    //font-weight:300;    
    line-height: 20px;

    //margin:10em;
    //max-width:42em;
    margin: 0 auto;
    width: 700px;

    background:#fefefe;
    color:#222;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    //margin: 2em 0px 15px 0px;
}

h1 {
    color: #000;
    font-size: 2em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1em;
}

h6 {
    color: #777777;
    background-color: inherit;
    font-size: 1em;
}

hr {
    height: 0.2em;
    border: 0;
    color: #CCCCCC;
    background-color: #CCCCCC;
}

blockquote {
    border-radius: 3px;
    background-color: #DDD;
    color: inherit;
    padding: 0 0.5em;
}

code, pre {
    border-radius: 3px;
    background-color: #F8F8F8;
    color: inherit;
}

code {
    border: 1px solid #EAEAEA;
    margin: 0 2px;
    padding: 0 5px;
}

pre {
    border: 1px solid #CCCCCC;
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 10px;
}

pre > code {
    border: 0;
    margin: 0;
    padding: 0;
}

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

a {
    color: #4183C4;
    background-color: inherit;
    /* 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;
    max-width: 100%;
    }
 
div.figure /* Pandoc figure-style image */
    {
    /* Center the image and caption */
    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 */
    }

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

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

/* Pandoc author(s) and date headers (h2.author and h3.date) */
.author, .date {
    text-align: center;
    font-size: 1.2em;
    margin: 2px;
}

nav#TOC ul li {
    margin: 0;
}

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

/* ---- 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;
    margin-top: 1em;
    margin-bottom: 1em;
}

thead /* Entire table header */
    {
    border-bottom: 1pt solid #000;
    background-color: #eee; /* Does this BG print well? */
    }
 
tr.header /* Each header row */
    {
    } 
 
tbody /* Entire table  body */
    {
    }
 
/* Table body rows */
 
tr  {
    }
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
    {
    background-color: #eee;
    }
    
/* Odd and even rows */
tr.odd {}
tr.even {}
 
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 */
    }
    
/* ---- 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 */
    {
    }
 
/* 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), and you don't want to make another stylesheet that 
   imports this one and adds a class just to do this.
*/
 
@media print
    {
    .noprint
        {
        display:none;
        }
    }

.highlight {
    background-color: #FF0;
}