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

/* Import purecss-0.3 */
@import url(https://cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css);
/* Dark Theme: dark.css; Light Theme: light.css; Grey Theme: grey.css */
@import url(grey.css);

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

}

/* ==========================================================================
   1. Icons
   ========================================================================== */


/* Apply these base styles to all icons */
.icon-ghost,
.icon-feed,
.icon-feed-1,
.icon-feed-inv,
.icon-twitter,
.icon-twitter-1,
.icon-twitter-inv,
.icon-google-plus,
.icon-google-plus-1,
.icon-google-plus-inv,
.icon-facebook,
.icon-facebook-1,
.icon-facebook-inv,
.icon-leaf,
.icon-linkedin,
.icon-linkedin-inv,
.icon-github,
.icon-github-1,
.icon-github-inv,
.icon-bitbucket,
.icon-bitbucket-inv,
.icon-cloud,
.icon-lamp,
.icon-youtube,
.icon-youtube-inv,
.icon-flickr,
.icon-dropbox,
.icon-tumblr,
.icon-tumblr-inv,
.icon-skype,
.icon-apple,
.icon-windows,
.icon-android,
.icon-linux {
    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;
    font-size: 100%;
}

/* 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: "\f09e";}
.icon-feed-1:before {content: "\e001";}
.icon-feed-inv:before {content: "\e004";}
.icon-twitter:before {content: "\f099";}
.icon-twitter-1:before {content: "\e002";}
.icon-twitter-inv:before {content: "\f081";}
.icon-google-plus:before {content: "\f0d4";}
.icon-google-plus-1:before {content: "\e006";}
.icon-google-plus-inv:before {content: "\f0d5";}
.icon-facebook:before {content: "\e007";}
.icon-facebook-1:before {content: "\f082";}
.icon-facebook-inv:before {content: "\f09a";}
.icon-leaf:before {content: "\f06c";}
.icon-linkedin:before {content: "\f08c";}
.icon-linkedin-inv:before {content: "\f0e1";}
.icon-github:before {content: "\f092";}
.icon-github-1:before {content: "\f09b";}
.icon-github-inv:before {content: "\f113";}
.icon-bitbucket:before {content: "\f171";}
.icon-bitbucket-inv:before {content: "\f172";}
.icon-cloud:before {content: "\f0c2";}
.icon-lamp:before {content: "\f0eb";}
.icon-youtube:before {content: "\f167";}
.icon-youtube-inv:before {content: "\f166";}
.icon-flickr:before {content: "\f16e";}
.icon-dropbox:before {content: "\f16b";}
.icon-tumblr:before {content: "\f173";}
.icon-tumblr-inv:before {content: "\f174";}
.icon-skype:before {content: "\f17e";}
.icon-apple:before {content: "\f179";}
.icon-windows:before {content: "\f17a";}
.icon-android:before {content: "\f17b";}
.icon-linux:before {content: "\f17c";}

/* ==========================================================================
   2. General setup
   ========================================================================== */

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

h1, h2, h3,
h4, h5, h6 {
    text-rendering: optimizeLegibility;
    line-height: 1;
    margin-top: 0;
}

a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
    color: rgb(153, 153, 153);
}

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

/* ==========================================================================
   2.1 Colours - All the colors set up is here to provide an easy way
                to change the theme colorscheme
   ========================================================================== */


/* Moved in the import section at the top of the document */


/* ==========================================================================
   2.2 Fonts - All the fonts are configured here
   ========================================================================== */
/*
When setting the primary font stack, apply it to the Pure grid units along with
the `body`. Pure Grids use specific font stacks to ensure the greatest
OS/browser compatibility.
*/
body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set you're content font stack here: */
    font-family: 'museo_sans_rounded300', Helvetica , sans-serif;
}

.post-description,.post-content {
    font-family: 'museo_sans_rounded300', Helvetica , sans-serif;
}

/* ==========================================================================
   3. Layout CSS
   ========================================================================== */

#layout {
    padding-left: 25%; /* "left col (nav + list)" width */
    position: relative;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 25%;
    margin-left: -25%;
}

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

        .blog-title,
        .blog-description {
            margin: 10px;
        }
        .blog-title {
            text-transform: uppercase;
        }
        .blog-description {
            font-weight: 300;
        }

        .blog-title a:hover {
            text-decoration: none;
        }
        #blog-logo img {
            margin-bottom: 1em;
        }

        .pgp-info {
            margin: 1.5em 2em 0;
            font-size: 11px;
            text-align: right;
        }

        .nav-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }
            .nav-item {
                display: inline-block;
                *display: inline;
                zoom: 1;
            }
            .nav-item a {
                margin-top: 1em;
            }
            .nav-item a:hover,
            .nav-item a:focus {
                text-decoration: none;
            }

        .social-list {
            margin: 0;
            margin-top: 1.5em;
            padding: 0;
            list-style: none;
        }
            .social-item {
                display: inline-block;
                *display: inline;
                zoom: 1;
            }

            .social-item a {
                margin-top: 1em;
            }
            .social-item a:hover {
                text-decoration: none;
            }

.content-subhead {
    text-transform: uppercase;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content {
    margin-top: 1.5em;
    padding: 2em 3em 0;
    max-width: 920px;
}

.post {
    padding-bottom: 2em;
}
    .featured {
        margin-bottom: 0.7em;
        padding-top: 0.7em;
        margin-left: -0.7em;
        padding-left: 0.7em;
        margin-right: 0.7em;
        padding-right: 0.7em;
        border-radius: 10px;
    }
    .purity_post {
        background: #fff !important;
    }
    .back {
        margin-top: -2%;
        padding-bottom: 2em;
        font-size: 0.8em;
    }
    .post-title {
        font-size: 2em;
        font-weight: 500;
        margin-bottom: 0.2em;
    }
    .big {
        font-size: 2.5em;
    }
    .post-avatar {
        border-radius: 50px;
        float: right;
        margin-left: 1em;
    }
    .post-description {
        line-height: 1.6em;
    }
    .post-content {
        font-size: 16px;
        line-height: 1.5;
    }
    .post-content p {
        margin: 1.2em 0;
    }
    .post-meta {
        font-size: 90%;
        margin: 0;
    }
    .post-images {
        margin: 1em 0;
    }
    .post-image-meta {
        margin-top: -3.5em;
        margin-left: 1em;
    }

    .post-comments {
        margin-top: 2em;
        padding-top: 1.2em;
    }

    .post-share-box {
        display: block;
        float: right;
        text-align: center;
        margin: 0;
        margin-left: 1em;
        margin-right: 0.5em;
        margin-bottom: 1em;
        padding: 1em;
        padding-top:0.5em;
        padding-bottom:0.5em;
        border-radius: 3px;
    }
        .share h3 {
            margin: 0;
            margin-bottom: 0.8em;
            font-size: 80%;
        }

        .share {
            /*font-size: 120%;*/
        }

        .share a {
            margin-left: 2px;
            margin-right: 2px;
        }
        .share a:hover {
            text-decoration: none;
            color: rgb(142, 142, 214);
        }


.pagination {
    margin-bottom: 10px;
    font-size: 80%;
    white-space:nowrap;
}
    .page-number {
        width:40%;
        display: inline-block;
        text-align: center;
    }
    .older-posts {
        display: inline-block;
        width:30%;
        padding-left:5px;
        text-align: right;
        padding-right: 5px;
    }
    .newer-posts {
        display: inline-block;
        width: 30%;
        padding-right: 5px;
        text-align: left;
    }

.footer {
    text-align: right;
    width: 25%;
    padding: 0 2em 1em 0;
    display: block;
    position: fixed;
    bottom: 0;
}
    .footer section {
        font-size: 70%;
        padding-bottom: 10px;
    }


/* ==========================================================================
   3.1 Additional Elements
   ========================================================================== */


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgba(142, 142, 214, 0.2);
    margin: 3.2em 0;
    padding: 0;
}

blockquote {
    margin: 1.6em 0 1.6em 0em;
    padding: 0 2em 0 2em;
    border-left: rgba(142, 142, 214, 0.5) 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: rgba(142, 142, 214, 0.5);
}

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

blockquote cite {
    font-weight:bold;
}

blockquote cite a { font-weight: normal; }

code {
    padding: 2px 5px;
    font-family: Menlo, Inconsolata, monospace, sans-serif;
    font-size: 1em;
    color: #888;
    white-space: pre;
    background: rgba(142, 142, 214, 0.2);
}

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

/* ==========================================================================
   4. Tablets
   ========================================================================== */

@media (max-width: 970px) {
    #layout {
        padding: 0;
    }

    .sidebar {
        width: 100%;
        position: relative;
        margin: 0;
    }

    .header {
        text-align: center;
        top: auto;
        margin: 3em auto;
        position: static;
    }

    .pgp-info {
        text-align: center;
    }

    .footer {
        position: relative;
        bottom: 0;
        padding: 1em 0;
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .post-share-box {
        width:100%;
        text-align: center;
        margin:0.7em;
        margin-top:-5px;
        padding: 6px 2px 2px;
    }
        .share h3 {
            display: inline;
            vertical-align: top;
            font-size: 90%;
        }
}

/* ==========================================================================
   5. Phones
   ========================================================================== */

@media (max-width: 480px) {
    .content {
        padding: 2em 1em 0;
    }
}