#main-wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1.5 * $footer-height-lg;
    box-sizing: border-box;
}

.banner {
    margin-bottom: 2rem;
    width: 100%;
    background-color: $theme-green;
    .banner-content {
        height: $banner-height-lg;
        position: relative;
    }
}

ul.nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    li {
        float: left;
        width: auto;
        text-align: left;
        display: inline-block;
        line-height: 4rem;
        vertical-align: middle;
        border-bottom: 4px solid transparent;
        -webkit-transition: border-bottom 200ms ease;
        &:not(:last-child) {
            margin-right: 2rem;
        }
        &.active, &:hover {
            -webkit-transition: border-bottom 200ms ease;
            border-bottom: 4px solid rgba(255, 255, 255, 1);
            cursor: pointer;
        }
    }
}

.wrapper {
    @media screen and (min-width: $large-view) {
        width: $large-view;
        margin: 0 auto;
        height: auto;
    }
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: $footer-height-lg;
    width: 100%;
}

.main-content {
    float: left;
    width: $main-region-width;
    height: auto;
    padding-top: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;

    .main-content-header {
        color: $theme-green;
        font-weight: 300;
        font-size: $widget-header-size;
        letter-spacing: 2px;
        border-bottom: 1px solid #EEE;
        padding-bottom: 0.4rem;
        margin-bottom: 2rem;

        .normal {
            letter-spacing: 0.06em;
        }
    }
}

.sub-content {
    float: right;
    width: $sub-region-width;
    height: 700px;
    height: auto;
    padding-left: 2rem;
    padding-top: 2rem;
    box-sizing: border-box;
}

.posts {
    width: 100%;

    .post {
        width: 100%;
        margin-bottom: 8rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #EEE;
    }

    .title {
        margin-top: 0;
        font-size: $title-size;
        font-weight: normal;
        transition: color 200ms linear;
        -webkit-transition: color 100ms ease;
        &:hover {
            color: $theme-green;
            transition: color 200ms linear;
            -webkit-transition: color 100ms ease;
        }
    }
    .brief {
        font-size: $brief-size;
        color: $brief-color;
        font-weight: 400;
        letter-spacing: 1px;
    }
}

.tags {
    li {
        width: auto;
        float: left;
    }

    .tag {
        display: inline-block;
        line-height: 4rem;
        vertical-align: middle;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        border-radius: 20px 2px 20px 2px;
        border: 1px solid #428bca;
        min-width: 3rem;
        width: auto;
        text-align: center;
        margin-right: 2rem;
        -webkit-transition: all 200ms linear;
    }
    .tag:hover {
        background-color: #428bca;
        color: white;
        -webkit-transition: all 200ms linear;
    }
}

.meta {
    list-style: none;
    margin: 0;
    padding: 0;
    color: $meta-color;
    width: 100%;
    font-size: $meta-size;
    height: 1.2 * $meta-size;
    li {
        float: left;
        width: auto;
        margin-right: 1rem;
    }

    .timestamp {
    }
    .tags {
    }
    .category {
        float: right;
    }
}

.post {
    .content {
        margin: 2rem 0;
        padding: 2rem 0;
    }

    img {
        // overide inline style
        max-width: 100% !important;
        height: auto!important;
        
        box-shadow: 1px 5px 17px #838383;
    }

    p + img {
        text-align: center;
        width: 100%;
        color: red;
    }

    blockquote {
        margin: 0;
        border-left: 2px solid $theme-green;
        padding: 0.1rem 3rem;
        box-sizing: border-box;
    }

    pre {
        background-color: #EEE;
        padding: 2rem;
        border-radius: 2px;
        overflow: auto;
    }

    img {
        display: block;
        border-radius: 2px;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
        margin: 1rem auto;
    }

    ol:not(.meta) {
        list-style: decimal;
        margin-left: 4rem;
    }
    &:not(.post-editing) ul:not(.meta) {
        list-style: disc;
        margin-left: 4rem;
    }
}

.widget {
    margin-bottom: 5rem;

    .widget-header {
        color: $theme-green;
        font-weight: 300;
        font-size: $widget-header-size;
        letter-spacing: 2px;
        border-bottom: 1px solid #EEE;
        padding-bottom: 0.4rem;
        margin-bottom: 2rem;
    }
    .widget-body {
        padding: 0;
        box-sizing: border-box;
        font-size: $widget-body-size;
    }
}

.widget.admin {
    .buttons {
        width: 100%;
        height: auto;
        float: left;
    }

    .button {
        display: inline-block;
        line-height: $button-normal-height;
        vertical-align: middle;
        text-align: center;
        background-color: $theme-green;
        color: white;
        width: 100%;
        border-radius: 2px;

        &:hover {
            cursor: pointer;

        }
    }
}

#full-editor {
    min-height: 400px;
    border: 1px solid #DDD;
    padding: 1rem;
    box-sizing: border-box;

    &:focus {
        outline: none;
    }
}

@media screen and (max-width: 960px) {
    .wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
