@import url(http://fonts.googleapis.com/css?family=Inconsolata);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700,300,900);
@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic);

.tsl-section-header {
    font-size: 2em;
    border-bottom: 1px #ccc solid;
    clear: both;
}

body {
    font-family: 'Libre Baskerville', serif;
    font-size: 125%;
}

div p a:link {
    text-decoration: none;
}

div p a:visited {
    text-decoration: none;
}

div p a:hover {
    text-decoration: none;
}

div p a:active {
    text-decoration: underline;
}

.article_content {
    font-size: 120%;
}
@media (min-width: 56.25em) {
    .article_content > p {
        max-width: 38.65em;
    }
}

.article_info {
    text-indent: 0px;
}

p {
    padding-top: 0;
    margin: 15px auto;
}

@media (min-width: 48em) {
    p {
    }
}

@media (min-width: 56.25em) {
    p {
        max-width: 46.25em;
    }
}

h1 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    letter-spacing: -1px;
    /* tighten up 'display type' headers on smaller displays */
    line-height: 1.25;
    /* 45px / 36px */
    margin-top: 0.9375em;
    /* (20px / 32px) * 1.5 */
    margin-bottom: 0.3125em;
    /* (20px / 32px) * .5 */
}

@media (min-width: 48em) {
    h1 {
        font-size: 2.5em;
        letter-spacing: normal;
        line-height: 1.125;
        margin-top: 0.73333334em;
        margin-bottom: 0.24444445em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 56.25em) {
    h1 {
        font-size: 3em;
        /* 3x body copy size = 48px */
        letter-spacing: normal;
        line-height: 1.3;
        /* keep to a multiple of the 20px line height and something more appropriate for display headings */
        margin-top: 0.6875em;
        /* (22px / 48px) * 1.5 */
        margin-bottom: 0.22916667em;
        /* (22px / 48px) * .5 */
        max-width: 15.66667em;
        margin-left: auto;
        margin-right: auto;
    }
}

#page > header h1 {
    max-width: 100%;
}

.font-scale-inactive h1 {
    font-size: 3em;
}

h2 {
    font-size: 1.625em;
    /* 1.625x body copy size = 26px */
    line-height: 1.15384615;
    /* 30px / 26px */
    margin-top: 1.15384616em;
    /* (20px / 26px) * 1.5 */
    margin-bottom: 0.38461539em;
    /* (20px / 26px) * .5 */
}

@media (min-width: 48em) {
    h2 {
        font-size: 2em;
        /* 2x body copy size = 32px */
        line-height: 1.25;
        margin-top: 1.03125em;
        /* (22px / 32px) * 1.5 */
        margin-bottom: 0.34375em;
        /* (22px / 32px) * .5 */
        max-width: 18em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 56.25em) {
    h2 {
        font-size: 2.25em;
        /* 2.25x body copy size = 36px */
        line-height: 1.25;
        margin-top: 1.03125em;
        /* (22px / 32px) * 1.5 */
        margin-bottom: 0.34375em;
        /* (22px / 32px) * .5 */
        max-width: 20.5em;
        margin-left: auto;
        margin-right: auto;
    }
}

.font-scale-inactive h2 {
    font-size: 2.25em;
}

h3 {
    font-size: 1.375em;
    /* 1.375x body copy size = 22px */
    line-height: 1.13636364;
    /* 25px / 22px */
    margin-top: 1.36363637em;
    /* (20px / 22px) * 1.5 */
    margin-bottom: 0.45454546em;
    /* (20px / 22px) * .5 */
}

@media (min-width: 48em) {
    h3 {
        font-size: 1.5em;
        /* 1.5x body copy size = 24px */
        line-height: 1.25;
        margin-top: 1.37500001em;
        /* (22px / 24px) * 1.5 */
        margin-bottom: 0.45833334em;
        /* (22px / 24px) * .5 */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 56.25em) {
    h3 {
        font-size: 1.75em;
        /* 1.75x body copy size = 28px */
        line-height: 1.25;
        margin-top: 1.37500001em;
        /* (22px / 24px) * 1.5 */
        margin-bottom: 0.45833334em;
        /* (22px / 24px) * .5 */
        max-width: 26.5em;
        margin-left: auto;
        margin-right: auto;
    }
}

.font-scale-inactive h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.125em;
    /* 1.125x body copy size = 18px */
    line-height: 1.11111111;
    margin-top: 1.66666667em;
    /* (20px / 18px) * 1.5 */
    margin-bottom: 0.55555556em;
    /* (20px / 18px) * .5 */
}

@media (min-width: 48em) {
    h4 {
        line-height: 1.22222222;
        /* (22px / 18px */
        margin-top: 1.83333333em;
        /* (22px / 18px) * 1.5 */
        margin-bottom: 0.61111111em;
        /* (22px / 18px) * .5 */
        max-width: 32em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 56.25em) {
    h4 {
        max-width: 33.77778em;
    }
}

.font-scale-inactive h4 {
    font-size: 1.125em;
}

/* comments */
#comments h3 {
    margin-bottom: 0;
}

#comments .source {
    font-size: .75em;
    /* 12px / 16px */
    line-height: 1.33333333em;
    /* 16px / 12px - set the line height back to body copy size */
    color: #a1a1a1;
    display: block;
    margin-bottom: 0.83333334em;
    /* (20px / 12px) / 2: bring the title, comment closer together */
}

/* Blockquote styles */
blockquote {
    width: 85%;
    margin-top: 1em;
    /* (20px / 20px) */
    margin-bottom: 1em;
    /* (20px / 20px) * .5 */
    margin-right: auto;
    margin-left: auto;
    font-size: 1.25em;
    /* 20px / 16px */
    line-height: 1.25;
    /* 25px / 20px */
    font-family: 'Roboto Slab', Georgia, "Times New Roman";
    font-weight: 300;
    font-style: normal;
    position: relative;
}

@media (min-width: 48em) {
    blockquote {
        font-size: 1.5em;
        /* 24px / 16px = */
        line-height: 1.45833333;
        /* 35px / 24px */
        width: 50%;
        max-width: 11.6666667em;
        /* 17.5em (or half the max paragraph width) / 1.5 = 11.6666667 */
    }
}

.font-scale-inactive blockquote {
    font-size: 1.5em;
}

@media (min-width: 48em) {
    blockquote.left {
        float: left;
        margin-top: 0.68750001em;
        /* ((22px / 24px) * 1.5): 1.37500001 - ((22px / 24px) * .75): 0.6875 - compensate for no margin collapse */
        margin-bottom: 0.45833334em;
        /* (22px / 24px) * .5 */
        margin-right: .5em;
        margin-left: -1em;
        padding-left: .5em;
    }
}

@media (min-width: 48em) {
    blockquote.right {
        float: right;
        margin-top: 0.68750001em;
        /* ((22px / 24px) * 1.5) / 2 - compensate for no margin collapse with paragraphy above */
        margin-bottom: 0.45833334em;
        /* (22px / 24px) * .5 */
        margin-left: .5em;
        margin-right: -1em;
        padding-right: 1em;
    }
}