@media all and (max-width: 768px) {
    html {
        overflow-y: scroll;
    }

    /*
    Setup a basic body
    */
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /*
    Header is relative so z-index: 1 guarantees always displayed on top
    */
    header {
        _background-color: #3b5998;
        padding: 10px;
        text-decoration: none;
        position: absolute;
        _width: 100%;
        z-index: 1;
        _-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
        _box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
    }

    /*
    The navigation container in the background
    */
    nav {
        opacity: 0;
        left: 0px;
        top: 0px;
        position: fixed;
        z-index: 0;
        width: 70%;
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        _border-right: 1px solid silver;
    }

    /*
    Style the navigation menu
    */
    nav ul {
        list-style: none;
        margin: 0;
        width: 100%;
        padding: 0;
    }

    nav li {
        position: relative;
        font-size: 14px;
        _font-weight: bold;
        border-bottom: 1px solid #222222;
        _border-top: 1px solid #444444;
        padding: 15px;
    }

    nav li a {
        color: black;
        text-decoration: none;
    }

    /*
    The Layer that will be layed over the content
    so that the content is unclickable while menu is shown
    */
    #contentLayer {
        display: none;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 30%;
        z-index: 5;
    }
}