/*
    HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
    people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Generic styles */

body {
    background: #fffff8;
    color: #333;
    font: 100% Helvetica, sans-serif;
    line-height: 130%;
}

p,
pre,
article ul,
article ol {
    margin-bottom: 0.8em;
}

pre code {
    display: block;
    background: #333;
    color: #fff;
    padding: 0.5em;
    margin: 0 0.5em;
}

pre {
    overflow-x: auto;
    white-space: pre;
}

h1 {
    font-size: 1.3em;
    line-height: 1.3em;
}

h1,
h2,
h3 {
    margin-bottom: 0.8em;
}

h1 a,
h2 a,
.date a {
    text-decoration: none;
    color: inherit;
    -webkit-text-stroke: inherit;
}

/* IE doesn't inherit colors. */
.old_ie h1 a,
.old_ie h2 a,
.old_ie .date a {
    color: #000;
}

.banner,
#blog,
#online section {
    padding: 0 0.5em;
}

#online section,
#recorded_comments,
footer section.fancy {
    padding-top: 2.1em;
}

footer.banner {
    padding-bottom: 1.3em;
}

#online section {
    border-top: 1px dashed #999;
}

body.single .content,
#recorded_comments,
#comments form {
    margin-left: 0.5em;
    margin-right: 0.5em;
}


/* Clearfix */

nav.banner:after,
footer.banner:after,
#archives:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.old_ie #content,
.old_ie nav.banner,
.old_ie footer.banner,
.old_ie #archives {
    zoom: 1;
}


/* Full-width navs all same style */

nav.banner {
    background: #333;
    border-top: 1px solid #ccc;
    padding: 0 0.5em;
    color: #fff;
}

nav.banner a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    padding: 0.3em 0 0.5em 0;
    line-height: 1.3em;
    font-size: 1.3em;
    margin: 0;
}

nav.banner a:hover,
footer.banner a:hover {
    color: yellow;
}

nav.banner a[rel="prev"] {
    float: left;
}

nav.banner a[rel="next"] {
    float: right;
}

nav.banner a[rel="prev"]:before {
    content: '\21d0\00a0'
}

nav.banner a[rel="next"]:after {
    content: '\00a0\21d2'
}

#comments nav a {
    display: block;
}


/* header and footer */

header.banner {
    padding-top: 0.5em;
    border-bottom: 1px solid #333;

    background-color: #ff0;
    background-image: linear-gradient(left top, #ff9 0%, #ff6 25%, #ff3 50%, #ff0 100%);
    background-image: -o-linear-gradient(left top, #ff9 0%, #ff6 25%, #ff3 50%, #ff0 100%);
    background-image: -moz-linear-gradient(left top, #ff9 0%, #ff6 25%, #ff3 50%, #ff0 100%);
    background-image: -webkit-linear-gradient(left top, #ff9 0%, #ff6 25%, #ff3 50%, #ff0 100%);
    background-image: -ms-linear-gradient(left top, #ff9 0%, #ff6 25%, #ff3 50%, #ff0 100%);
    background-image: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0, #ff9),
        color-stop(0.25, #ff6),
        color-stop(0.5, #ff3),
        color-stop(1, #ff0)
    );
}

header.banner h1 {
    max-width: 4.5em;
    margin: 0 auto;
    font-size: 2.1em;
    text-align: center;
}

body.index header.banner h1 {
    font-size: 3.4em;
}

header.banner h2 {
    display: none;
}

footer.banner {
    color: #fff;
    background: #333;
    border-top: 1px solid #ccc;
}

footer.banner h1 {
    font-size: 2.1em;
    margin-bottom: 0.8em;
    max-width: 10em;
}

footer.banner a {
    color: #fff;
}

#online section:first-child {
    border: 0;
}

#blog,
body.single .content {
    padding-top: 2.1em;
}

#archives, #archives nav {
    display: block;
}

body.index footer.banner section:last-child {
    display: none;
}


/* Shadowed headings */

h1.fancy, footer .fancy h1 {
    line-height: 0.8em;
    font-family: Slackey, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: #000 0.02em 0.02em 0.025em, rgba(0,0,0,0.25) 0.045em 0.045em 0.075em;
    letter-spacing: -0.1em;
    color: #fff;
    -webkit-text-stroke: 0.025em black;
}

/* Fake text stroke where none supported. */
.notextstroke h1.fancy,
.notextstroke footer .fancy h1 {
    font-weight: bold;
    text-shadow: 
        #000 -0.05em -0.05em 0em,
        #000 -0.05em 0.05em 0em,
        #000 0.05em -0.05em 0em,
        #000 0.05em 0.05em 0em,
        #000 0.1em 0.1em 0.05em,
        rgba(0,0,0,0.25) 0.1875em 0.15em 0.075em;
}

.notextshadow h1.fancy {
    color: #333;
}

footer .fancy h1 {
    color: #fff;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}

header h1.fancy {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
}

#online h1.fancy {
    font-size: 2.1em;
    margin-bottom: 1.3em;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

header h1.fancy:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}


/* Article display. */

article, #archives nav {
    margin-bottom: 1.3em;
}

article h1 a:hover,
article .date a:hover {
    color: #999;
}

body.single article.post footer p {
    margin: 0 2.1em;
    text-align: center;
    font-style: italic;
}

article a.read_more {
    display: none;
}

#blog,
body.archive article,
body.single .content,
#comments ol,
#comments form,
footer.banner section {
    max-width: 50em;
}

body.single .content p,
body.single .content pre,
body.single .content ul,
body.single .content ol {
    margin-bottom: 1.3em;
}

body.index article,
body.archive article {
    overflow-x: auto;
}

body.index article h1,
body.archive article h1 {
    margin-bottom: 0.5em;
}

#blog article h1 a:after,
article h1 a:after,
.date a:after {
    position: relative;
    margin: 0 0.5em;
    bottom: 0.0625em;
    font-size: 0.8em;
}

#blog article h1 a:after,
.date a:after {
    content: '\3009';
}

.win32 #blog article h1 a:after,
.win32 .date a:after {
    content: '\276f';
}

article.category-tweets .date a:after,
article.category-links h1 a:after,
#blog article.category-links h1 a:after,
body.single article.category-tweets h1 a[rel="alternate"]:after {
    content: '\2197';
    color: #999;
    font-weight: bold;
}

#online article h1 {
    font-weight: normal;
}

p.date a>* {
    display: none;
}

.category-links p.date a>* {
    display: inline;
}

p.date a span.time {
    display: inline;
}

article ul, article ol {
    list-style-position: inside;
    margin-left: 0.8em;
    margin-right: 0.8em;
    padding-left: 1.3em;
    text-indent: -1em;
}

article ul {
    list-style-type: disc;
}


/* Article end mark */

#blog .first-post {
    margin-bottom: 0;
    padding-bottom: 2.1em;
}

#blog .first-post:after,
body.single article.post footer:before,
#comments li:last-child:after {
    display: block;
    content: '\273c';
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #999;
    font-size: 2.1em;
}


/* Comments */

#comments h2,
a.to_comments:before,
.comment_state:before {
    font-size: 1.3em;
}

a.to_comments:before {
    content: '\2709\00a0';
}

.comment_state:before {
    content: '\270d\00a0';
}

#comments article {
    margin-bottom: 1.3em;
    overflow-x: auto;
}

#comments article header {
    padding-bottom: 0.8em;
}

#comments article header cite {
    font-style: normal;
    font-weight: bold;
    padding-right: 0.8em;
}

#comments article header .date {
    font-size: 0.8em;
    display: inline;
}

#comments article header img {
    float: right;
    padding: 0 0 0.5em 0.5em;
}

#comments form {
    margin-top: 2.1em;
    margin-bottom: 2.1em;
    font-size: 1em;
}

#comments label {
    display: block;
    margin-bottom: 0.5em;
}

#comments input,
#comments textarea {
    width: 100%;
    max-width: 15em;
    margin-bottom: 0.5em;
}

#comments textarea {
    max-width: 25em;
    height: 5em;
}


@media all and (min-width: 30em) {
    article ul, article ol {
        margin-left: 2.1em;
        margin-right: 2.1em;
    }

    body.single .content,
    #comments ol,
    #comments form {
        margin-left: 1.3em;
        margin-right: 1.3em;
    }

    #blog,
    .banner,
    nav.banner,
    #online section {
        padding-left: 1.3em;
        padding-right: 1.3em;
    }

    footer.banner {
        padding-bottom: 2.1em;
    }

    header.banner h1 {
        width: auto;
        display: inline-block;
    }

    #blog article h1 a:after {
        color: #999;
    }

    #archives {
        margin: 0;
        max-width: none;
    }

    #archives nav {
        float: left;
        width: 40%;
        max-width: 20em;
        padding-left: 1.3em;
        padding-right: 0.8em;
    }

}

@media all and (min-width: 50em) {

    /* Table styling for index columns, but floats for IE.
     * From: http://www.gunlaug.no/contents/wd_additions_22.html
     */ 

    #content {
        display: table-row;
    }

    body.index #blog,
    #online {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        display: table-cell;
    }

    .old_ie body.index #blog,
    .old_ie #online {
        float: left;
    }

    .old_ie #online {
        float: left;
        width: 49.5%;
    }

    body.archive #blog,
    body.index #blog article,
    #online section,
    body.index nav.banner,
    body.index .footer_section_content {
        padding-left: 1.3em;
        padding-right: 1.3em;
    }

    #online {
        margin: 0;
        overflow-x: auto;
        border-left: 1px dashed #999;
    }

    #online section article {
        max-width: 30em;
    }

    body.index #blog {
        width: 50%;
    }

    body.index footer.banner,
    body.archive footer.banner {
        padding-left: 0;
        padding-right: 0;
    }

    body.index footer.banner section,
    body.archive footer.banner section {
        width: 50%;
        float: left;
    }

    nav.between {
        display: none;
    }

    body.single .content h1,
    body.archive #blog>h1 {
        font-size: 2.1em;
        margin-bottom: 0.3em;
    }

    body.single header {
        margin-bottom: 1.3em;
    }

    body.single .content,
    #comments ol,
    #comments form {
        margin-left: 3.4em;
        margin-right: 3.4em;
    }

    body.archive header.banner,
    body.archive nav.banner,
    body.single .banner,
    body.archive #blog {
        padding-left: 3.4em;
        padding-right: 3.4em;
    }

    body.archive footer.banner {
        padding-left: 2.1em;
        padding-right: 2.1em;
    }

    body.archive .footer_section_content {
        padding-left: 1.3em;
        padding-right: 1.3em;
    }

    #archives nav {
        padding-left: 3.4em;
        padding-right: 2.1em;
    }


}

@media all and (min-width: 70em) {
    body.index #blog article,
    #online section,
    body.index nav.banner,
    body.index .footer_section_content {
        padding-left: 2.1em;
        padding-right: 2.1em;
    }

    body.index header.banner h1 {
        padding-left: 0.3em;
    }

}

@media print {
    body {
        font-size: 10pt;
    }

    pre code {
        background: inherit;
        color: inherit;
        padding: 0;
    }

    header.banner,
    footer.banner {
        border: none;
        color: inherit;
    }

    nav,
    #comments form {
        display: none;
    }

    body.single article.post {
        max-width: none;
        margin: 0 0.5in;
    }
}