/* 
    Document   : layout.css
    Created on : Dec 29, 2009, 8:28:05 AM
    Author     : Richard Metcalf
    Description:
        This is a generic css that provides cross browser support for a flexible
        one,two and three column layout - as well as a definition of an expandcol
        that can be used as a growing column pinned to the right or left of another
        block element.
*/

.page
{
    margin: 0 auto;
    width: 1000px;                            /* fixed or 100% for full */
    background: red repeat 100% 0;            /* right col background */
}
#header {background-color:black;color:white;}
#outerwrapper {
    position:relative;
    z-index: 1;
    background: #373734 repeat 0 0;          /* left col background */
}
.twocolumn-fixed-left #outerwrapper {
    padding-left: 200px;                     /* width of col-1 */
}
.twocolumn-fixed-right #outerwrapper {
    margin-right: 200px;                     /* width of col-3 */
}
.threecolumn #outerwrapper
{
    padding-left: 200px;                     /* width of col-1 */
    margin-right: 200px;                     /* width of col-3 */
}
#innerwrapper
{
    position:relative;
    width:100%;
    z-index: 2;
    background: #dcdcd3 repeat 100% 0; /* col-2 background */
}
#col-1, #col-2, #col-3
{
    float: left;
    position: relative;
    z-index: 3;
    overflow: visible;                      /* fix for IE italics bug */
}
.twocolumn-fixed-left #col-1 {
    width: 200px;
    margin: 0 1px 0 -200px;
}

.twocolumn-fixed-left #col-2 {
    margin: 0 -1px;
    width: 100%;
}

.twocolumn-fixed-right #col-1 {
    margin: 0 -1px;
    width: 100%;
}

.twocolumn-fixed-right #col-2 {
    float: right;
    width: 200px;
    margin: 0 -200px 0 1px;
}

.threecolumn #col-2
{
    margin: 0 -1px;
    width: 100%;
}

.threecolumn #col-1
{
    width: 200px;
    margin: 0 1px 0 -200px;
}
.threecolumn #col-3
{
    float: right;
    width: 200px;
    margin: 0 -200px 0 1px;
}

#footer
{
    background-color:black;
    color:white;
}

.expandcol {
    position:absolute;
    width:200px;             /* expandcol width */
    height:100%;
    top:0;
    z-index:4;
}

.expandcol.pinleft {
    left:0;
}

.expandcol.pinright {
    right:0;
}

.expandcol > .exheader {
    height: 50px;           /* expandcol header height */
    width:100%;
    overflow:hidden;
}

.expandcol > .exwrapper {
    position:absolute;
    top:50px;               /* height of expandcol header + border/padding */
    bottom:50px;            /* height of expandcol footer  + border/padding */
    left:0;
    right:0;
}

.expandcol > .exfooter {
    height:50px;            /* expandcol footer height */
    width:100%;
    bottom:0;
    position:absolute;
}

.fleft {float:left;}
.fright {float:right;}

.center{margin-left:auto;margin-right:auto;display:table;}

.alignright {text-align:right;}
.aligncenter {text-align:center;}
.valigntop{vertical-align:top;}
.valignmiddle{vertical-align:middle;}
.valignbottom{vertical-align:bottom;}

.clear
{
    clear: both;
    /*padding-bottom: 1px;                    /* for Gecko-based browsers */
    /*margin-bottom: -1px;                    /* for Gecko-based browsers */
}
.hide{display: none !important;}

/* ie hacks */
* html #innerwrapper{position: relative;}
* html #page{word-wrap: break-word;}