img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

#layout, .nav-list {
    padding: 0;
}

.brand-title, .content-subhead {
    text-transform: uppercase;
}

.footer, .header, .post-share-links {
    text-align: center;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.pure-g [class*=pure-u], button, html, input, select, textarea {
    font-family: "Source Sans Pro",serif;
}

.brand-title, .nav-item a, .post-title {
    font-family: Oxygen,sans-serif;
}

a {
    text-decoration: none;
    color: #3d92c9;
}

.brand-title a, .sidebar {
    color: #fff;
}

a:focus, a:hover {
    text-decoration: underline;
}

.brand-title a:hover, .post-share-links a:hover, .post-title:hover {
    text-decoration: none;
}

h3 {
    font-weight: 100;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

.header {
    top: auto;
    margin: 3em auto;
}

.sidebar {
    background: #3d4f5d;
}

.brand-tagline, .brand-title {
    margin: 0;
}

.brand-tagline {
    font-weight: 300;
    color: #b0cadb;
}

.nav-list {
    margin: 0;
    list-style: none;
}

.nav-item {
    display: inline-block;
    zoom: 1;
}

    .nav-item a {
        background: 0 0;
        border: 2px solid #b0cadb;
        color: #fff;
        margin-top: 1em;
        font-weight: 700;
    }

        .nav-item a:focus, .nav-item a:hover {
            border: 2px solid #3d92c9;
            text-decoration: none;
        }

.post-share-links, pre {
    border: 1px solid #ccc;
}

.content-subhead {
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: .4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: .1em;
}

.hugo, .post-title, pre .class, pre .css-property, pre .css-value, pre .entity.function, pre .id, pre .keyword, pre .sass, pre .storage.function, pre .vendor-prefix {
    font-weight: 700;
}

.content {
    padding: 2em 1em 0;
}

.post {
    padding-bottom: 2em;
}

.post-title {
    font-size: 2em;
    color: #222;
    margin: .4em 0;
}

.post-avatar {
    border-radius: 50px;
    float: right;
    margin-left: 1em;
}

.post-description {
    font-family: "Source Sans Pro",serif;
    color: #333;
    line-height: 1.35em;
}

.post-meta {
    color: #999;
    font-size: 90%;
    margin: 5px 0;
}

.post-category {
    margin: 0 .1em;
    padding: .3em 1em;
    color: #fff;
    background: #999;
    font-size: 80%;
}

.post-category-design {
    background: #5aba59;
}

.post-category-pure {
    background: #4d85d1;
}

.post-category-yui {
    background: #8156a7;
}

.post-category-javascript {
    background: #df2d4f;
}

.post-images {
    margin: 1em 0;
}

.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

.footer {
    padding: 1em 0;
    color: #555;
    font-size: 80%;
}

    .footer ul li a {
        display: inline;
        padding: 0;
    }

.hugo {
    color: #333;
}

.footer .pure-menu a:focus, .footer .pure-menu a:hover {
    background: 0 0;
}

.footer li {
    list-style-type: none;
}

.post-share-links {
    margin: 15px 15px 0 0;
    float: left;
    padding: 10px;
}

    .post-share-links a {
        color: #aaa;
        font-size: 28px;
        line-height: 36px;
        margin: 0 auto;
        display: block;
        transition: all .3s ease-in;
    }

        .post-share-links a:hover {
            color: #3d92c9;
        }

    .post-share-links h4 {
        font-family: Oxygen,sans-serif;
        margin: 0 0 5px;
        color: #aaa;
    }

@media (min-width:48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin:10% 2em 0;
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

pre {
    word-wrap: break-word;
    padding: 6px 10px;
    line-height: 19px;
    margin-bottom: 20px;
}

code {
    border: 1px solid #eaeaea;
    margin: 0 2px;
    padding: 0 5px;
    font-size: 12px;
}

pre code {
    border: 0;
    padding: 0;
    margin: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

code, pre {
    font-family: Consolas,'Liberation Mono',Courier,monospace;
    color: #333;
    background: #f8f8f8;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

    pre, pre code {
        font-size: 13px;
    }

        pre .comment {
            color: #998;
        }

        pre .support {
            color: #0086B3;
        }

        pre .tag, pre .tag-name {
            color: navy;
        }

        pre .css-property, pre .css-value, pre .support.namespace, pre .vendor-prefix {
            color: #333;
        }

        pre .constant.numeric, pre .hex-color, pre .keyword.unit {
            font-weight: 400;
            color: #099;
        }

        pre .entity.class {
            color: #358;
        }

        pre .entity.function, pre .entity.id {
            color: #900;
        }

        pre .attribute, pre .variable {
            color: teal;
        }

        pre .string, pre .support.value {
            font-weight: 400;
            color: #d14;
        }

        pre .regexp {
            color: #009926;
        }