/*
** Tableless Column Layout for CSS2 capable Browsers
** Based on http://www.positioniseverything.net/ordered-floats.html by Big John.
*/

/* <dtml-with base_properties> */

body {
    min-width: <dtml-var portalMinWidth missing="70em">;
}
#portal-columns {
    width: auto;
    margin: 0;
}
#visual-column-wrapper {
    float: left;
    width: 100%;
    margin-right: -<dtml-var columnTwoWidth missing="16em">;
}
#portal-column-content {
    width: 100%;
    float: right;
    margin-left: -<dtml-var columnOneWidth missing="16em">;
}

#portal-column-content #content {
    margin: 0 <dtml-var columnTwoWidth missing="16em"> 0 <dtml-var columnOneWidth missing="16em">;
}

#portal-column-one {
    float: left;
    width: <dtml-var columnOneWidth missing="16em">;
    overflow: hidden;
}

#portal-column-two {
    float: right;
    width: <dtml-var columnTwoWidth missing="16em">;
    overflow: hidden;
}

/* padding - thanks to the w3c box model :P */

#portal-column-content .visualPadding {
    padding: 1em 2em 1em 2em;
}
#portal-column-one .visualPadding {
    padding: 1em 0em 1em 2em;
}
#portal-column-two .visualPadding {
    padding: 1em 2em 1em 0em;
}

/* hide columns */

.visualColumnHideOneTwo #portal-column-content #content {
    margin: 0;
}

.visualColumnHideOne #portal-column-content #content {
    margin: 0 <dtml-var columnTwoWidth missing="16em"> 0 0;
}

.visualColumnHideTwo #portal-column-content #content {
    margin: 0 0 0 <dtml-var columnOneWidth missing="16em">;
}

/* fullscreen */

body.fullscreen #portal-column-one,
body.fullscreen #portal-column-two {
    display: none;
}
body.fullscreen #visual-column-wrapper {
    margin-right: 0;
}
body.fullscreen #portal-column-content {
    margin-left: 0;
}
body.fullscreen #portal-column-content #content {
    margin: 0;
}

/* </dtml-with> */
