html {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px 0px 0px 0px;
    height: 100%;
}

div.avatar-wrap {
    margin: 18px;
    text-align: center;
}

div#navigation {
    background: #f3f3f3 url("../images/header.png") repeat-x left bottom;
    padding-bottom: 18px;
    text-align: center;
}

div#navigation a {
    border: none;
    margin: 0px 6px 0px 6px;
}

div#content {
    margin: 12px;
}

@media all and (min-width: 822px) {
    html {
        background: #fff url("../images/sidebar.png") repeat-y left top;
    }

    div.avatar-wrap {
        margin: 6px 18px 6px 0px;
        float: left;
    }

    div.avatar-wrap img {
        max-width: 128px;
        margin: 0px;
    }

    div#navigation {
        background: none;
        float: left;
        left: 0px;
        margin: 0px 0px 0px 18px;
        position: fixed;
        top: 0px;
        width: 102px;
    }

    div#navigation h1, div#navigation a {
        display: block;
        text-align: right;
    }

    div#navigation a {
        color: #333;
        margin: 6px 0px 6px 0px;
    }

    div#content {
        margin: 0px 0px 0px 156px;
        padding: 0px 36px 0px 36px;
        width: 648px;
    }
}