/*=======*/
/* Reset */
/*=======*/

img
{
    display: block;
    border: 0;
}

img.feed-icon
{
    display: inline;
    vertical-align: middle;
}

/*==========*/
/* Template */
/*==========*/

html, body
{
    margin: 0;
    padding: 0;
}

body
{
    font: 14px sans-serif;
}

header#page-header
{
    padding: 0.3em;
    border-bottom: 3px solid #aaa;
    margin-bottom: 0.2em;
}

header#page-header h1
{
    margin: 0;
    padding: 0;
    float: left;
}

header#page-header h1 a
{
    text-decoration: none;
}

header#page-header h1 a:link    { color: #444; }
header#page-header h1 a:visited { color: #444; }
header#page-header h1 a:hover   { color: #e70; }
header#page-header h1 a:active  { color: #e70; }

header#page-header h1 small.subtitle
{
    font-weight: normal;
    font-size: 0.5em;
}

header#page-header .feed-icon {
    display: inline;
    height: 0.8em;
    vertical-align: middle;
}

#sitenav
{
    float: right;
}

#sitenav ul
{
    margin: 0;
    padding: 0;
}

#sitenav li
{
    float: left;
    display: block; /* as opposed to display: list-item; */
    margin: 0;
    padding: 0;
}

#sitenav a
{
    color: #444;
    display: block;
    padding: 0.3em 0.7em;
}

#sitenav a:hover { color: #e70; }

header#page-header:after
{
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

main:after
{
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

main
{
    padding-left: 10px;
    padding-right: 10px;
}

#sidebar .page-state
{
    border-color: #080;
    background-color: #cfc;
}

/* Wide window: Sidebar floats right. */
@media all and (min-width: 701px)
{
    #primary-content
    {
        float: left;
        margin-right: -27em; /* must-match: ws7c3nw73; */
        width: 100%;
    }

    #primary-content > div
    {
        margin-right: 27em; /* must-match: ws7c3nw73; */
    }

    #sidebar
    {
        float: right;
        width: 25em;
    }
}

/* Narrow window: Sidebar under content. */
@media all and (max-width: 700px)
{
    #primary-content
    {
        float: none;
        margin-right: 0;
    }

    #primary-content > div
    {
        margin-right: 0;
    }

    #sidebar
    {
        float: none;
        width: 100%;
    }
}

#secondary-content
{
    clear: both;
    border-top: 1px solid #aaa;
}

footer#page-footer
{
    clear: both;
    border-top: 3px solid #aaa;
    padding: 0.4em 0;
    margin-top: 0.4em;
}

footer#page-footer p
{
    background: white;
    color: #444;

    display: table; /* centering, sigh */
    margin: auto;
}

footer#page-footer a
{
    background: white;
    color: #444;
    font-weight: bold;
}


/*========*/
/* Colors */
/*========*/

a:link    { color: #00c; }
a:visited { color: #808; }
a:hover   { color: #e70; }
a:active  { color: #e70; }

/*=======*/
/* Forms */
/*=======*/

label
{
    display: block;
}

label .title
{
    float: left;
    min-width: 4em;
    margin-right: 4px;
}

label input
{
    margin-bottom: 0.3em;
}

textarea
{
    display: block;
    margin: 0.3em;
}

/*=============*/
/* Single post */
/*=============*/

/* .topnote goes before the entry content block */

#primary-content .post .topnote
{
    border-width: 1px;
    border-style: solid;
    padding: 1em;
    margin: 1em;
}

#primary-content .post .topnote.content_age
{
    color: black;
    background-color: #efe;
    border-color: #040;
}

#primary-content .post .topnote.unlisted
{
    color: black;
    background-color: #fee;
    border-color: #400;
}

#sidebar .avatar
{
    display: block;
    float: right;
    margin-left: 0.5em;
}

.entrytext h3
{
    margin: 0.5em 0;
    padding: 2px 1px;
    border-bottom: 1px solid #bbb;
}

/*=================*/
/* Multi-post page */
/*=================*/

main.multi-post #intro
{
    background-color: #cfc;
    color: black;
    border: 1px solid #080;
    padding: 0.5em;
}

main.multi-post #intro ul.favorite-posts li
{
    padding: 0.2em;
}

main.multi-post .post
{
    clear: both; /* drop past any floated thumbnails */
}

main.multi-post .post a.more-link
{
    font-weight: bold;
}

main.multi-post .post a.more-link:after
{
    content: " ►";
}

main.multi-post .backforth .earlier:after
{
    content: " ►";
}

main.multi-post .backforth .later:before
{
    content: "◄ ";
}

main.multi-post .post p.postmetadata
{
    font-style: italic;
}

/*==========*/
/* Comments */
/*==========*/

/* General */

#comments
{
    padding: 0 1em;
}

/* New */

#commentform
{
    display: block;
    background-color: #dde;
    padding: .5em;
}

#commentform #ajax-comment-preview
{
    border: 1px solid #8aa;
    padding: 3px;
    margin: 2px;
}

#commentform .comment-timeout
{
    font-style: italic;
}

#commentform .subscribe-to-comments label
{
    display: inline;
}

#comment-rules
{
    font-size: 0.7em;
}

/* Existing */

#comments li.comment
{
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    
    margin-bottom: 2em;
}

#comments .comment.author
{
    border-color: #f80;
}

#comments .comment:after
{
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

#comments .comment.author .commentattribution
{
    background-color: #fda;
    padding: 0.5em;
}

#comments .commentattribution cite
{
    font-weight: bold;
}

#comments .commentmetadata
{
    float: right;
    margin-top: 1em;
    margin-right: 0.5em;
}

#comments .comment.author .commentmetadata
{
    margin-top: 1.3em;
}

/*=========*/
/* Sidebar */
/*=========*/

/* sidebar modules */
#sidebar > div
{
    border: 1px solid #aaa;
    margin: 2px;
    padding: 7px;
}

#sidebar h1
{
    font-size: 1.7em; /* a bit smaller than usual */
}

/*=============*/
/* User format */
/*=============*/

/* Formatting for user-entered markup. */

.userformat
{
    padding: 0.25em 0.75em;
}

.userformat:after {
    clear: both;
}

.userformat p
{
    margin: 0 0 0.5em;
    padding: 0;
}

.userformat blockquote
{
    margin: 0.75em 0.6em;
    padding: 0.4em;
    border-left: 3px solid #ccd;
}

.userformat ol,
.userformat ul
{
    margin: 0.75em 0;
    padding: 0;
    padding-left: 2em;
}

.userformat code
{
    background-color: #FFFFE7;
    color: #060;
    border: 1px dotted #ddd;
    padding: 0 2px;
}

.userformat .notice.important
{
    color: black;
    background-color: #fee;
    border: 1px solid #400;
    margin: 1em;
    padding: 1em;
}

/*============*/
/* Thumblinks */
/*============*/

/* Standard thumbnail image links */

a.thumblink
{
    display: block;
    float: right;
    clear: right;
    width: 200px;

    margin: 0.25em 0 0.25em 1em;
    padding: 0.25em;

    text-align: center;
    text-decoration: none;

    border: 1px solid transparent;
}

a.thumblink.alternate
{
    float: left;
    clear: left;
}

a.thumblink:hover
{
    border-color: #e0e0e0;
    background-color: #ffe;
}

a.thumblink img
{
    border: 1px solid #888;
    padding: 1px;
    background-color: #eee;
    
    display: inline;
    text-align: center;
}

a.thumblink:hover
{
    text-decoration: none;
}

a.thumblink span.caption
{
    display: block;
    font-size: 0.75em;
    line-height: 1.2em;
    margin-top: 0.4em;
}

a.thumblink:hover span.caption
{
    text-decoration: underline;
}

/* Allow full-size images to be embedded, and scale up to page width. */

#primary-content .post figure {
    max-width: 100%;
}

#primary-content .post figure > img,
#primary-content .post figure > video {
    max-width: 100%;
}

/* Floated images */

.userformat .image-float-right
{
    float: right;
    margin: 1em;
}

/** Figures in general */
.userformat a.fig-full {
    display: block;
    text-align: center;
}

.userformat img.fig-focal {
    display: inline;
}

/** simg: Side-image */

.userformat figure.fig-side
{
    float: right;
    clear: right;
    margin: 1em;
    /* Border doesn't work well on non-floated figure, which stretches across the whole page */
    border: 1px solid #eee;
    padding: 0.3em;
    background: white; /* in case we float over an h3 decoration, etc. */
    color: black;
}

.userformat figure.fig-side figcaption {
    max-width: 25em;
}

/** fgal: Gallery of figures */

.userformat figure.fig-gal {
    display: inline-block;
    margin: 1em;
    border: 1px solid #eee;
    padding: 0.3em;
}

.userformat figure.fig-gal figcaption {
    max-width: 25em;
}

/*=============*/
/* Code blocks */
/*=============*/

.userformat pre
{
    border: 1px solid #7ad;
    overflow: auto;
    max-height: 25em;
    font-family: monospace;
    font-weight: normal;
    line-height: 1.4em;
    padding: 0.5em;
    background-color: #f8fbff;
}

.userformat pre.commandline
{
    background-color: black;
    color: white;
    border-color: #888;
}

.userformat pre.code
{
    padding-top: 0;
}

/* Cancel out code styles when in a multiline context */
.userformat pre code {
    border: 0;
    background: none;
}

.userformat pre.code:before
{
    content: attr(lang);
    text-transform: capitalize;
    display: block;
    font-weight: bold;
    color: black;
    background-color: #7ad;
    margin: 0 0 0 -0.5em;
    padding-left: 0.5em;
    font-family: sans-serif;
}

/*================*/