@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.woff");
    font-weight: normal;
    font-style: normal;
}
/* GLOBAL STYLES */
html {
    height: 100%;
    width: 100%;
}
body {
    background: #fbfbfb;
    color: #000;
    font-family: 'Source Sans Pro', Helvetica, Arial;
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}

strong {
    font-weight: 400;
}

h1,
h1 a {
    margin-top: 0;
    color: #000;
}

a,
a:active {
    color: #E82F2A;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

small {
    font-size: 14px;
}

.icon {
    color: #fff;
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
}

.icon.folder:after{
    content: "\e601";
}

.icon.photos:after {
    content: "\e600";
}

.icon.info:after {
    content: "\e603";
}

.icon.twitter:after {
    content: "\e604";
}

.icon.email:after {
    content: "\e602";
}
/* BLOG SECTIONS */
.about[aria-hidden=false]{
    left: 0;
    -moz-transition: left 0.2s ease;
    -webkit-transition: left 0.2s ease;
    transition: left 0.2s ease;
}

.about[aria-hidden=true] {
    left: -100%;
    -moz-transition: left 0.2s ease;
    -webkit-transition: left 0.2s ease;
    transition: left 0.2s ease;
}

.about {
    background: #3c3c3c;
    color: #fff;
    display: table;
    position: fixed;
    height: 100%;
    vertical-align: middle;
    width: 100%;
    z-index: 1;
}
    .about-wrapper {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

        .about-information {
            display: inline-block;
            list-style: none;
            line-height: 50px;
            vertical-align: middle;
            text-align: left;
            width: 500px;
        }

            .about-information .icon {
                position: relative;
                top: 2px;
                font-size: 24px;
                padding-right: 5px;
            }

            .description {
                vertical-align: middle;
                font-size: 18px;
            }

.blog-container {
    display: table;
    height: 100%;
    width: 100%;
}

    .blog-menu {
        display: table-cell;
        height: 100%;
        position: fixed;
        z-index: 2;
        width: 120px;
    }

    .blog-menu-bar {
        background: #3c3c3c;
        height: 100%;
        width: 55px;
    }

        .menu {
            font-size: 30px;
            list-style: none;
            margin: 0 auto 0 auto;
            padding: 110px 0 0 0;
            text-align: center;
        }

        .menu li {
            cursor: pointer;
            opacity: 0.1;
            margin: 10px 0 0 0 ;
            -moz-transition: opacity 0.2s ease, -moz-transform 0.2s;
            -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s;
            transition: opacity 0.2s ease, transform 0.2s;
        }

        .menu li:hover,
        .menu a:hover {
            opacity: 1;
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            transform: scale(1.1);
            text-decoration: none;
        }

        .blog-menu .avatar {
            background: url("http://www.gravatar.com/avatar/cf10191b5b21fde4d164b3a30b386f0f.png") no-repeat;
            border: 5px solid #9a9a9a;
            border-radius: 80px;
            height: 80px;
            margin: 10px;
            position: absolute;
            top: 0;
            width: 80px;
        }

        .blog-menu .avatar:hover {
            cursor: pointer;
        }

.blog-contents,
.archive-contents {
    margin: 48px auto;
    padding: 0 55px 0 120px;    /* Padding accounts for sidebar */
    vertical-align: top;
    max-width: 1000px;
}

    .post:first-child {
     margin-top: 0;
    }

    .post {
        margin: 48px 0;
    }

.archive {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 800px) {

    .blog-contents {
        margin: 0;
        padding: 20px;
        vertical-align: top;
    }
        .about,
        .blog-menu .menu .info-item {
            display: none;
        }

        .blog-menu {
            background: #3c3c3c;
            display: block;
            position: relative;
            height: 80px;
            width: 100%;
        }

            .blog-menu-bar {
                background: transparent;
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
                .blog-menu .menu {
                    font-size: 48px;
                    padding: 10px 10px 0 0;
                    text-align: right;
                }

                    .blog-menu .menu li {
                        display: inline-block;
                        opacity: 1;
                        padding: 0;
                        margin: 0;
                        -moz-transition: none;
                        -webkit-transition: none;
                        transition: none;
                    }

                    .blog-menu .menu li:hover {
                        -moz-transition: none;
                        -webkit-transition: none;
                        transition: none;
                        -webkit-transform: scale(1.0);
                        -moz-transform: scale(1.0);
                        transform: scale(1.0);
                    }

            .blog-menu .avatar {
                border: 0;
                border-radius: 0;
                margin: 0;
            }

    .archive-contents {
        margin: 0;
        padding: 0;
    }
        .archive li {
            border-bottom: 1px solid #ccc;
        }

        .archive li a {
            display: block;
            padding: 20px 10px;
        }

        .archive li a:hover {
            text-decoration: none;
        }

        .acrhive li a:active {
            background: #000;
        }
}

@media (max-width: 400px) { /* small devices need smaller font size so that text doesn't wrap weirdly */
    body {
        font-size: 18px;
    }
}