responsive layout based on "this is responsive"

responsive2column.css

/* ==========================================================================
   Layout Styles
   ========================================================================== */
.left-col-wrapper {

}

.inner-left-col {
    padding: 0 1em;
}

.right-col-wrapper {
    background: rgb(225, 226, 225);
}

.inner-right-col {

    padding: 2em 1em;
}

@media screen and (min-width: 56em) {
    .full-height {
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .left-col-wrapper {
        left: 0;
        width: 70%;

        background-color: white;
        border-right: 1px solid rgb(174, 174, 174);
    }

    .inner-left-col {
        float: right;
        min-width: 39.2em; /*.7 *56 */
        max-width: 56em;
        padding: 0;
    }

    .main-content {
        padding: .5em 1em .5em 1em;
        background-color: white;
    }

    .right-col-wrapper {
        right: 0;
        width: 30%;

        -moz-box-shadow: inset 1px 0px 6px 0px rgb(138, 138,138);
        -webkit-box-shadow: inset 1px 0px 6px 0px rgb(138, 138,138);
        box-shadow: inset 1px 0px 6px 0px rgb(138, 138,138);
    }

    .inner-right-col {
        float: left;
        min-width: 16.8em;
    }

    .sidebar-content {
        padding: .5em 0 .5em 2em;
    }
}


/* ==========================================================================
   Blog List Styles
   ========================================================================== */

.blog-post-list {
    list-style: none;
    padding: 0; /* Overwrite default 40px left margin */
}

li.blog-post:first-child {
    margin: 3em 0;
}

.blog-post {
    margin: 0 0 3em 0;
    min-height: 8em;
}

.post-icon {
    text-align: center;
    float: left;
    height: 8em;
    width: 8em;
    padding: 0 .415em .415em 0;
}

.post-title h2 {
    margin-bottom: 0;
}

.post-info-wrapper {
    /*float: left;*/
    margin: 0 0 0 8em;
}

.post-info-content {
    /*padding: 0 0 0 0.83em;*/
}

.post-title {