/******************/
/* Main Container */
/******************/

div.WebUI
{
    display:            flex;
    flex-direction:     column;
    width:              100%;
    height:             100%;
    /*
    flex-wrap:      wrap;
    */
    justify-content:    space-around;
}
@media only screen and (max-height: 400px) 
{
    div.WebUI
    {
        align-content: center;
    }
}



/******************/
/* Flex-Rows      */
/******************/

.WebUI > div.flexrow
{
    display:            flex;
    flex-direction:     row;
    width:              100%;
    justify-content:    space-between;
}

.WebUI div.flexcolumn
{
    display:            flex;
    flex-direction:     column;
    height:             100%;
    justify-content:    flex-start;
}

div#FXTopRow
{
    height: 5em;
}
@media only screen and (max-height: 400px) 
{
    div#FXTopRow
    {
        align-self: center;
    }
}

div#FXMiddleRow
{
    height: 80%;
}
@media only screen and (max-height: 400px) 
{
    div#FXMiddleRow
    {
        display:    none;
        visibility: hidden;
    }
}

div#FXBottomRow
{
    height: 30px;
}
@media only screen and (max-height: 600px) 
{
    div#FXBottomRow
    {
        display:    none;
        visibility: hidden;
    }
}



/******************/
/* Flex-Columns   */
/******************/

div.flexcolumn_left
{
    width: 20%;
}
div.flexcolumn_middle
{
    width: 55%;
}
div.flexcolumn_right
{
    width: 20%;
}

@media only screen and (max-width: 800px) 
{
    div.flexcolumn_left, div.flexcolumn_right
    {
        display:    none;
        visibility: hidden;
    }
    div.flexcolumn_middle
    {
        align-self: center;
        width:      80%;
    }
}



/******************/
/* Flex-Cells     */
/******************/

div.flexcell
{
    display:            flex;
    justify-content:    center;
}
div.flexcell-none
{
    display:            none;
}



/******************/
/* Sonderwürste for the main content  */
/******************/

div.contentboxheader
{
    display:        flex;
    flex-direction: row;
    align-content:  flex-end;

    position:       relative;
    bottom:         0px;
    height:         1.5em;
    overflow:       hidden;
}

div.contentbox
{
    overflow-y:     auto;
    overflow-x:     hidden;
    width:          100%;
    height:         100%;
}

/* TODO: Move to its own css file */
div.mainview_container
{
    width:          100%;
}


div#MiddleContentBox
{
    box-shadow: inset 0px 0px 10px 0px #080808;
}



/* vim: tabstop=4 expandtab shiftwidth=4 softtabstop=4 
 */