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

.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-share-links, pre {
    border: 1px solid #ccc
}

.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: 80% 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;
    -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: #458
}

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
}