/*******************************************************************************
 * Header height :
 *     #header -> height = xxx
 * Left column :
 *     #container -> margin-left = xxx
 *     #left-column -> width = xxx
 *     #left-column -> margin-left = xxx - 1
 *     #header -> margin-left = -xxx
 * Right column :
 *     #container -> margin-right = xxx
 *     #right-column -> width = xxx
 *     #right-column -> margin-right = xxx - 1
 *     #header -> margin-right = -xxx
 * Footer :
 *     #container -> margin-bottom = -xxx
 *     #clear-footer -> height = xxx
 *     #footer -> height = xxx
 * min-width :
 *     #wrapper -> min-width : xxx
 *     in layout-ie.css :
 *     #wrapper -> width : expression(document.body.clientWidth < xxx + 1 ? "XXXpx" : "auto" );
 ******************************************************************************/


/*******************************************************************************
 * General styles
 ******************************************************************************/
* {
    margin          : 0;
    padding         : 0;
}
html, body {
    height          : 100%;
}
.clear {
    clear           : both;
    font-size       : 1px;
    line-height     : 1px;
}
.left {
    float           : left;
}
.right {
    float           : right;
}
.text-center {
    text-align      : center;
}
ul, ol, dd {
    margin-left     : 4em;
}
ul, ol, dl {
    margin-top      : 1.1em;
    margin-bottom   : 1.1em;
}



/*******************************************************************************
 * encapsulates the #container within itself. provides min-width sizing
 * and makes sure that header and footer dont' dissapear when
 * scrolling horizontally
 ******************************************************************************/
#wrapper {
    height          : 100%;
    width           : 100%;
    min-width       : 900px;
}


/*******************************************************************************
 * Container wraps the header, side columns and the content
 * excluding the footer
 ******************************************************************************/
#container {
	margin-left     : 200px;
	margin-right    : 200px;
	margin-bottom   : -100px;
	min-height      : 100%;
}


/*******************************************************************************
 * top header. 100% width and fixed height
 ******************************************************************************/
#header {
	position        : relative;
    margin-left     : -200px;
	margin-right    : -200px;
	width           : auto;
    height          : 100px;
}


/*******************************************************************************
 * fixed width left column
 ******************************************************************************/
#left-column {
	position        : relative;/*ie needs this to show float */
	width           : 200px;
	float           : left;
	margin-left     :-199px;/*must be 1px less than width otherwise won't push footer down */
	left            :-1px;
}


/*******************************************************************************
 * fixed width right column
 ******************************************************************************/
#middle-column {
	width           : 100%;
	float           : left;
	position        : relative;
	margin          : 0 -1px;/* moz fix*/
	color           : #000;
}


/*******************************************************************************
 * dynamic width middle column
 ******************************************************************************/
#right-column {
	position        : relative;/*ie needs this to show float */
	width           : 200px;
	float           : right;
	margin-right    :-199px;/*must be 1px less than width otherwise won't push footer down */
	left            : 1px;
}


/*******************************************************************************
 * clear the way for the footer
 ******************************************************************************/
#clear-footer {
    clear           : both;
    height          : 100px;
}


/*******************************************************************************
 * 100% width fixed height footer
 ******************************************************************************/
#footer {
    height          : 100px;
}