/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*

    0.  Includes
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Third Party Elements
    7.  Pagination
    8.  Footer
    9.  Media Queries (Tablet)
    10. Media Queries (Mobile)

 */

/* ==========================================================================
   0. Includes - Ground zero
   ========================================================================== */

@import url(normalize.css);


/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */

/* Import the font file with the icons in it */
@font-face {
    font-family: 'icons';
    src:url('../fonts/icons.eot');
    src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icons.woff') format('woff'),
        url('../fonts/icons.ttf') format('truetype'),
        url('../fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'entypo';
    src:url('../fonts/entypo.eot');
    src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
        url('../fonts/entypo.woff') format('woff'),
        url('../fonts/entypo.ttf') format('truetype'),
        url('../fonts/entypo.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */
.icon-ghost, .icon-feed {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}
.icon-twitter, .icon-google-plus, .icon-facebook, .icon-dribbble, .icon-linkedin, .icon-mail {
    font-family: 'entypo';
    speak: none;
    font-size: 2em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}

/* Each icon is created by inserting the corret character into the
   content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
    content: "\e000";
}
.icon-feed:before {
    content: "\e001";
}

.icon-twitter:before {
    content: "\e6f8";
}
.icon-google-plus:before {
    content: "\e6fd";
}
.icon-facebook:before {
    content: "\e6fa";
}
.icon-dribbble:before {
    content: "\e705";
}
.icon-linkedin:before {
    content: "\e703";
}
.icon-mail:before {
    content: "\e607";
}


/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */

html {
    height: 100%;
    max-height: 100%;
    font-size: 62.5%;
}

body {
    height: 100%;
    max-height: 100%;
    font-family: 'Open Sans', serif;
    font-size: 2.0rem;
    line-height: 1.6em;
    color: #3A4145;
}

::-moz-selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

::selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

h1, h2, h3,
h4, h5, h6 {
    text-rendering: optimizeLegibility;
    line-height: 1;
    margin-top: 0;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 5rem;
    line-height: 1.2em;
    text-indent: -3px;
}

h2 {
    font-size: 4rem;
    line-height: 1.2em;
    text-indent: -2px;
}

h3 {
    font-size: 3.5rem;
}

h4 {
    font-size: 3rem;
}

h5 {
    font-size: 2.5rem;
}

h6 {
    font-size: 2rem;
}

a {
    color: #1a1f26;
    transition: color ease 0.3s;
}

a:hover {
    color: #597981;
}

h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
    color: #272c34;
}


p, ul, ol {
    margin: 1.6em 0;
}

ol ol, ul ul,
ul ol, ol ul {
    margin: 0.4em 0;
}

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

blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0 1.6em -2.2em;
    padding: 0 0 0 1.6em;
    border-left: #b8c3c6 0.4em solid;
}

blockquote p {
    margin: 0.8em 0;
    font-style: italic;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;;
    font-size:0.9em;
    color: #ccc;
}

blockquote small:before { content: '\2014 \00A0'; }

blockquote cite {
    font-weight:bold;
}

blockquote cite a { font-weight: normal; }


dl {
    margin: 1.6em 0;
}

dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 1em
}

dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}

mark {
    background-color: #ffc336;
}

code, tt {
    padding: 1px 3px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.85em;
    white-space: pre;
    border: 1px solid #dde2e4;
    background: #ebf0f2;
    border-radius: 2px;
}

pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    border: 1px solid #dde2e4;
    width: 100%;
    padding: 10px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.9em;
    white-space: pre;
    overflow: auto;
    background: #ebf0f2;
    border-radius: 2px;
}

pre code, tt {
    font-size: inherit;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}

kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #ccc 1px solid;
    color: #666;
    text-shadow: #fff 0 1px 0;
    font-size: 0.9em;
    font-weight: bold;
    background: #f4f4f4;
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 0 #fff inset;
}

table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    width:100%;
    max-width: 100%;
    background-color: transparent;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #efefef;
}

table th { color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody + tbody { border-top: 2px solid #efefef; }

table table table { background-color: #fff; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #f6f6f6;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
    background: transparent;
}

input[type="text"] {
    padding: 3px 5px;
    border-radius: 2px;
    border: 2px solid #dde2e4;
}
    input[type="text"]:focus {
        border-color: #597981;
        outline: none;
    }

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Hides shit */
.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
}

/* Centres vertically yo. (IE8+) */
.vertical {
    display: table-cell;
    vertical-align: middle;
}


/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */

/* Left sidebar with info about blog */
#site-head {
    position: fixed;
    left: 0;
    width: 160px;
    height: 100%;
    min-height: 400px;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    background: #272c34;
}

.content {
    overflow: hidden;
    padding: 0 400px 0 200px;
}

.content.content-inner {
    padding: 0 0 0 200px;
}

/* Big cover image */
#cover-image {
    position: fixed;
    right: 0;
    width: 400px;
    height: 100%;
    min-height: 400px;
    background: #eee no-repeat center center;
    background-size: cover;
}

/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
#blog-logo img {
    display: block;
    height: 100px;
    width: 100px;
    margin: 50px auto 0;
    line-height: 0;
    border-radius: 50px;
}

#back {
    color: rgba(0,0,0,0.2);
    position: fixed;
    top: 8px;
    left: 8px;
    padding: 6px;
    font-size: 16px;
}

/* The details of your blog. Defined in ghost/settings/ */
.blog-title {
    margin: 10px 0 0;
    font-size: 3.6rem;
}

.blog-description {
    margin: 50px 0 0;
    font-size: 1.4rem;
    line-height: 1.8em;
    font-weight: 300;
}

.main-menu {
    list-style: none;
    margin: 50px 0 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.8em;
    font-weight: 300;
}
    .main-menu li a {
        color: #b8c3c6;
        text-decoration: none;
    }
        .main-menu li a:hover {color: #fff;}

.blog-links {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 15px;
}
    .blog-links a {
        display: inline-block;
        line-height: inherit;
        height: 20px;
    }

/* Every post, on every page, gets this style on its <article> tag */
.post {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 4rem auto;
    padding-bottom: 4rem;
    border-bottom: #eee 2px solid;
    word-break: break-word;
    hyphens: auto;
}

.post-header {
    margin: 0 0 1.6rem;
}

.backlink {
    padding-bottom: 8rem;
    border-bottom: none;
}

    .post-back {
        display: block;
        margin: 0 0 8em 0;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #b8c3c6;
    }
    .backlink .post-back {
        float: left;
    }

    .tag-title {
        float: right;
        text-align: right;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #b8c3c6;
    }

.post-title {
    margin: 0;
}

.post-title a {
    text-decoration: none;
}

.post-excerpt p {
    margin: 0;
}

.post-excerpt a {
    text-decoration: none;
}

.post-excerpt img, .post-excerpt .video {
    max-width: 100%;
    margin: 0 auto 1.6rem;
    border-radius: 2px;
}

/* A little margins fix for images */

.post-excerpt p img {
    margin: 0 auto 0.8rem;
}

.post-meta {
    display: inline-block;
    margin: 0 0 5px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #b8c3c6;
}

.post-meta a {
    color: #b8c3c6;
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
}

.post-tags {
    color: #dde2e4;
}

.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}

.user-image {
    position: absolute;
    top: 0;
    left: 0;
}

.user-name {
    display: block;
    font-weight: bold;
}

.user-bio {
    display: block;
    max-width: 440px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}

.publish-heading {
    display: block;
    font-weight: bold;
}

.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}

/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

/* Tweak the .post wrapper style */
.post-template .post {
    border-bottom: none;
    padding-bottom: 0;
}

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
    display: none;
}

/* Insert some mad padding up in the header for better spacing */
.post-template .post-header {
    padding: 60px 0;
}

/* Keep large images within the bounds of the post-width */
.post-content img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 2px;
}

.post-content .video, .post-content iframe {
    margin: 1.6em 0 0;
}
.post-content .video iframe {
    margin: 0;
}

/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 4rem 0;
    padding: 4rem 0;
    border-top: #EBF2F6 2px solid;
    border-bottom: #EBF2F6 2px solid;
}

.post-footer h4 {
    font-size: 1.8rem;
    margin: 0;
}

.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.6em;
}

/* Create some space to the right for the share links */
.post-footer .author {
    margin-right: 180px;
}

    .post-footer .author img {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 25px;
    }
    .post-footer .author h4, .post-footer .author p {
        padding: 0 0 0 70px;
    }

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 4rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 2.5rem;
    line-height: 20px;
    display: inline-block;
    margin: 1.4rem 1rem 1.6rem 0;
    color: #b8c3c6;
}
    .post-footer .share a.icon-twitter:hover {
        color: #00acee;
    }
    .post-footer .share a.icon-facebook:hover {
        color: #3b5998;
    }
    .post-footer .share a.icon-google-plus:hover {
        color: #dd4b39;
    }


/* ==========================================================================
   6. Third Party Elements - Embeds from other services
   ========================================================================== */

/* Github */

.gist table {
    margin: 0;
    font-size: 1.4rem;
}

.gist .line-number {
    min-width: 25px;
    font-size: 1.1rem;
}


/* ==========================================================================
   7. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 4rem auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3rem;
    color: #b8c3c6;
    text-align: center;
}

.pagination a {
    color: #b8c3c6;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    border: #b8c3c6 2px solid;
    text-decoration: none;
    border-radius: 5px;
    transition: all ease 0.3s;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
    padding: 2px 0;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    border-color: #587981;
    background: #587981;
    color: #fff;
}


/* ==========================================================================
   8. Footer - The bottom of every page
   ========================================================================== */

.site-footer {
    position: relative;
    margin: 8rem 0 0 0;
    padding: 4rem 0;
    font-size: 1.3rem;
    line-height: 1.7em;
    color: #b8c3c6;
    text-align: center;
}

.site-footer a {
    color: #b8c3c6;
    text-decoration: underline;
}

.site-footer a:hover {
    color: #587981;
}

.poweredby .icon-ghost {
    font-weight: 700;
    text-decoration: none;
}

.poweredby .icon-ghost:hover {
    text-decoration: none;
}

.poweredby .icon-ghost:before {
    font-size: 1rem;
    margin-right: 0.2em;
}

a.subscribe {
    text-decoration: none;
}

/* ==========================================================================
   9. Media Queries - Smaller than 1200px
   ========================================================================== */

@media only screen and (max-width: 1200px) {

    /* Left sidebar with now goes to top */
    #site-head {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 50px 0;
        text-align: left;
    }

    #site-head-content {
        width: 80%;
        max-width: 700px;
        margin: 0 auto;
    }

    /* Big cover image goes to top under site-head */
    #cover-image {
        position: relative;
        width: 100%;
        height: 400px;
    }

    #blog-logo img {
        float: left;
        height: 100px;
        width: 100px;
        margin: 0 20px 0 0;
    }

    .blog-links {
        position: relative;
        left: auto;
        bottom: auto;
        width: 80%;
        height: 33px;
        margin: 0 auto;
        text-align: left;
        font-size: 15px;
    }
        .blog-links a:first-child {
            padding-left: 126px;
        }

    .content {
        overflow: hidden;
        padding: 0;
    }
        .content.content-inner {
            padding: 0;
        }

    .blog-title {
        padding: 0px 0px 0px 126px;
        margin: 0;
    }

    .blog-description {
        padding: 0px 0px 0px 126px;
        margin: 0;
    }

    .main-menu {
        padding: 0px 0px 0px 126px;
        margin: 0;
    }
        .main-menu li {display: inline; padding: 0 20px 0 0;}

    blockquote {
        margin-left: 0;
    }

    .post {
        font-size: 0.9em;
        line-height: 1.6em;
    }

    .post-template .post {
        padding-bottom: 1rem;
    }

    .post-template .post-header {
        padding: 40px 0;
    }

    .post-back {
        margin: 0 0 3em 0;
    }

    h1 {
        font-size: 4.8rem;
        text-indent: -2px;
    }

    h2 {
        font-size: 3.8rem;
    }

    h3 {
        font-size: 3.3rem;
    }

    h4 {
        font-size: 2.8rem;
    }

}

/* ==========================================================================
   10. Media Queries - Smaller than 480px
   ========================================================================== */


@media only screen and (max-width: 480px) {

    #site-head {
        text-align: center;
    }

    #blog-logo img {
        float: none;
        margin: 0 auto;
    }

    .blog-title {
        padding: 0;
        margin: 10px 0 0;
    }

    .blog-description {
        padding: 0;
        margin: 20px 0 0;
    }

    .main-menu {
        padding: 0;
        margin: 20px 0 0;
    }

    .blog-links {
        height: auto;
        margin: 20px auto 0;
        text-align: center;
    }

    .inner,
    .pagination {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .post {
        width:auto;
        margin-left: 16px;
        margin-right: 16px;
        font-size: 0.8em;
        line-height: 1.6em;
    }

    #site-head {
        padding: 10% 0;
    }

    .blog-title {
        font-size: 3rem;
    }

    .blog-description {
        font-size: 1.5rem;
    }


    h1, h2 {
        font-size: 3rem;
        line-height: 1.1em;
    }

    h3 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 2.3rem;
    }

    .post-template .post {
        padding-bottom: 0;
    }

    .post-template .post-header {
        padding: 30px 0;
    }

    .post-back {
        display: none;
    }

    .backlink {
        padding-bottom: 1em;
    }

    .tag-title {
        float: left;
        text-align: left;
    }

    .post-meta {
        font-size: 1.3rem;
    }

    .post-footer {
        padding: 4rem 0;
        text-align: center;
    }

    .post-footer .author {
        margin: 0 0 2rem 0;
        padding: 0 0 1.6rem 0;
        border-bottom: #EBF2F6 1px dashed;
    }
        .post-footer .author img {
            float: none;
            margin: 0 0 10px;
        }
        .post-footer .author h4, .post-footer .author p {
            padding: 0;
        }

    .post-footer .share {
        position: static;
        width: auto;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }

    .older-posts,
    .newer-posts {
        position: static;
        margin: 10px 0;
    }

    .page-number {
        display: block;
    }

    .site-footer {
        margin-top: 3rem;
        font-size: 1.1rem;
    }

}

/* ==========================================================================
   End of file. Media queries should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */