/* *************************************************************************************************
 Flexible Box
************************************************************************************************* */

.vbox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    
    display: box;
    box-orient: vertical;
    box-align: stretch;
}

.hbox {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}

.boxFlex, .boxFlex1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

.boxFlex2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}

/* *************************************************************************************************
 Flexible Helpers
************************************************************************************************* */

.boxScroll {
    overflow: auto;
    min-height: 1px; /* Firefox needs min-height and min-width to show scrollbars */
    min-width: 1px;
    zzheight: 100%; /* IE6 needs height and width properties to fix iframe */
    zzwidth: 100%;
}


/* *************************************************************************************************
 Flexible Box fixes
************************************************************************************************* */

.boxFix,
.boxFix .vbox,
.boxFix .hbox {
    position: relative;
    display: block;
}

.boxFix .boxFixPos,
.boxFix .boxContent {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
}

.boxFixHideContents .boxFlex,
.boxFixHideContents .boxFlex1,
.boxFixHideContents .boxFlex2 {
    position: absolute;
}


/* *************************************************************************************************
 iframe box fix
************************************************************************************************* */

iframe.boxScroll {
    /* IE need this to properly resize the iframe using flexBox */
    display: block;
    
    /* IE needs height and width properties to fix iframe dimension, otherwise 
    the the iframe won't fit the proper space and the horizontal scrollbar 
    will be visible when not needed */
    height: 100%; width: 100%;
    
    /* If there's a left-border in the frame in IE6, when you resize the 
    chrome vertically, the left panel width will increase 1px every few 
    seconds. We need to investigate this, it seems a problem in the border 
    calculation during the flexBox.reflow() */ 
    /*_border-left: 0 !important;/**/
}
