/* TWO COLUMN LAYOUT */
/* Either nav+content or content+promo		*/
body {
    text-align: center; /* IE6 needs this to center the layout in the browser window */
}

#main_wrapper {
    width: 940px; /* widths of columns will change proportionately as this width is changed */
    margin-left: auto; /* centers layout in browser */
    margin-right: auto; /* centers layout in browser */
    text-align: left; /* resets the centering hack for IE6 on the body tag */
    background-color: #ececec;
}

#header {
    background-color: #fff;
}

#nav {
    width: 205px;
    margin: 10px 0 10px 10px;
    background: #fff;
    float: left;
}

#promo {
    width: 205px;
    margin: 10px 0 10px 0;
    float: left;
    background: #fff;
}

#content {
    width: 705px;
    margin: 10px 10px 10px 10px;
    background: #fff;
    float: left;
}

#footer {
    clear: both; /* makes the footer sit below whichever column is longest */
    width: 100%;
    margin: 0;
    background-color: #fff;
}

#header_inner, #nav_inner, #content_inner, #promo_inner {
    overflow: hidden; /* clips oversize elements that would otherwise expand divs and break the layout */
}

#header_inner {
    padding: 1em 2em; /* creates space between the box  and the content */
}

#nav_inner, #promo_inner {
    padding: 1em .8em; /* creates space between the box and the content */
}

#content_inner {
    padding: 1em 1em 1em 1.5em; /* creates space between the box and the content */
}

#footer_inner {
    padding: .5em 5em;
    text-align: center;
}