/* This holds common (or basic) page layout properties. */

div#columns {
    /* Must not be static, as we need this as a reference for contained divs. */
    position: relative;
}

/* Regarding leftunder/rightunder:
 * -------------------------------
 * Tried several strategies to apply a full-height background here.
 * Using 'position: absolute' and 'top|bottom: 0' on leftwrap/rightwrap (with
 * 'position: relative' for content) would correctly expand left/right column
 * height (with bg) to that of content. However, the inverse is not true:
 * left/right column gets cut off at the bottom (if 'overflow: hidden'), causes
 * scroll bars (if 'overflow: auto'), or overlaps with bottom whenever content
 * height is less.
 * 
 * The best solution still seems to be 'float: left' and 'float: right' on both
 * columns for positioning and for correct height adaption of div#columns, and,
 * in order to get the menu background correctly filled downwards, to use an
 * underlying absolute background-only div#leftunder and div#rightunder with
 * negative z-index (which also requires 'position: relative' on div#columns
 * to work).
 */

div#leftunder {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    z-index: -1;
}
/* IE < 8 does not place this on the left by default, so force. */
body.msie-pre8-browser div#leftunder {
    left: 0;
}
@media print {
    div#leftunder {
        display: none;
        visibility: hidden;
    }
}

div#leftwrap {
    float: left;
    width: 20%;
    position: relative;
}
/* Work around massive miscalculation under IE6. */
body.msie-pre7-browser div#leftwrap {
    width: 17.6%;
}
@media print {
    div#leftwrap {
        display: none;
        visibility: hidden;
    }
}

div#left {
    overflow: auto;
    margin: 10pt 5pt;
    font-size: 10pt;
    text-align: left;
}

div#middlewrap {
    float: left;
    width: 60%;
}
body.hide-right-column div#middlewrap {
    width: 80%;
}
@media print {
    div#middlewrap {
        width: 80%;
    }
    body.hide-right-column div#middlewrap {
        width: 100%;
    }
}

div#middle {
    /* Current browsers seem to be smart enough here (offer scroll bar etc). */
    overflow: auto;
    margin: 10pt;
    /* This is the standard font size for main content. */
    font-size: 10pt;
    /* Have this as a (weak) default for the main content area. */
    text-align: justify;
}
@media print {
    div#middle {
        margin-left: 0;
    }
    body.hide-right-column div#middle {
        margin-right: 0;
    }
}
div#main-header {
    margin-right: 2em;	/* Keep further away from right. */
}
div#column1-contentwrap {
    float: left;
    width: 50%;
}
div#column1-contentwrap.column1-contentwrap-narrow {
    float: none;
    width: auto;
}
div#column1-content {
    margin-right: 10pt;
}
div#column1-contentwrap.column1-contentwrap-narrow div#column1-content {
    margin-right: 0;
}
div#column2-contentwrap {
    float: right;
    width: 50%;
}
div#column2-contentwrap.column2-contentwrap-narrow {
    float: none;
    width: auto;
}
div#column2-content {
    margin-left: 10pt;
}
div#column2-contentwrap.column2-contentwrap-narrow div#column2-content {
    margin-left: 0;
}
div#epilogue-content {
    clear: both;
}

div#rightunder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    z-index: -1;
}
body.hide-right-column div#rightunder {
    display: none;
    visibility: hidden;
}
/* Work around IE (< 8) rounding errors. */
body.msie-pre8-browser div#rightunder {
    width: 19.9%;
}

div#rightwrap {
    float: right;
    width: 20%;
}
body.hide-right-column div#rightwrap {
    display: none;
    visibility: hidden;
}
/* Work around IE (< 8) rounding errors. */
body.msie-pre8-browser div#rightwrap {
    width: 19.9%;
}

div#right {
    margin: 10pt 5pt;
    font-size: 10pt;
    text-align: left;
}
@media print {
    div#right {
	margin-right: 0;
    }
}

div#bottom {
    text-align: center;
    font-size: 8pt;
}
div#bottom > div, div#bottom > div > div {
    margin-left: auto;
    margin-right: auto;
}