/* ------ */
/* LAYOUT */
/* ------ */

body { font-size: 62.5% } /* set 1em to 10px */
#layout { margin: 0 auto; text-align: left; }

.fixed760 { width: 76em; }
.fixed960 { width: 96em; }

.liquid90 { width: 90%; }
.liquid80 { width: 80%; }

/* Header and Footer*/
#header, #footer { width: 100%; }

/* ------- */
/* CONTENT */
/* ------- */

/* Clearfix */
#content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#content {display: inline-block;}

/* Sidebar Control */
.left-sidebar-wide160 #sidebar { float: left; width: 16em; }
.left-sidebar-wide180 #sidebar { float: left; width: 18em; }
.left-sidebar-wide240 #sidebar { float: left; width: 24em; }
.left-sidebar-wide300 #sidebar { float: left; width: 30em; }
.right-sidebar-wide160 #sidebar { float: right; width: 16em; }
.right-sidebar-wide180 #sidebar { float: right; width: 18em; }
.right-sidebar-wide240 #sidebar { float: right; width: 24em; }
.right-sidebar-wide300 #sidebar { float: right; width: 30em; }

/* Liquid Layout, fixed sidebar control */
.liquid90 .left-sidebar-wide160 #main, .liquid80 .left-sidebar-wide160 #main { margin-left: 16em; }
.liquid90 .left-sidebar-wide180 #main, .liquid80 .left-sidebar-wide180 #main { margin-left: 18em; }
.liquid90 .left-sidebar-wide240 #main, .liquid80 .left-sidebar-wide240 #main { margin-left: 24em; }
.liquid90 .left-sidebar-wide300 #main, .liquid80 .left-sidebar-wide300 #main { margin-left: 30em; }
.liquid90 .right-sidebar-wide160 #main, .liquid80 .right-sidebar-wide160 #main { margin-right: 16em; }
.liquid90 .right-sidebar-wide180 #main, .liquid80 .right-sidebar-wide180 #main { margin-right: 18em; }
.liquid90 .right-sidebar-wide240 #main, .liquid80 .right-sidebar-wide240 #main { margin-right: 24em; }
.liquid90 .right-sidebar-wide300 #main, .liquid80 .right-sidebar-wide300 #main { margin-right: 30em; }