/*All Screens*/

@media screen {
    html, body, div {
        margin: 0px; padding: 0px; overflow: hidden;
        box-sizing: border-box; /*CSS3: do not add padding to width or height*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    html {width: 100%; height: 100%; overscroll-behavior:none;} /*ViewPort*/
    body {
        height: 100%; width: 100%; max-width: 1200px;
        margin: 0px auto; /*center when max-width exceeded*/
        position: relative; /*for position:absolute children*/
    }

    #divCenter {overflow: auto; height: 100%;}
    #divTop, #divBottom {width: 100%; position: absolute;}
    #divLeft, #divRight {height: 100%; position: absolute;}
    #divTop, #divLeft, #divRight {top: 0px;}
    #divLeft, #divTop, #divBottom {left: 0px;}
    #divRight {right: 0px;}
    #divBottom {bottom: 0px;}

    /*define all absolute metrics here*/
    body {padding: 60px 50px 25px 50px;} /*TRBL*/
    #divLeft, #divRight {width: 50px;}
    #divTop {height: 60px;}
    #divBottom {height: 25px;}
}

/*Mobile Portrait and Landscape*/
@media only screen and (max-width: 800px) {
    html, body {height: auto; overflow: auto;}
    #divBottom {display: none;}
}
/*Mobile Portrait*/
@media only screen and (max-width: 500px) {
    body {padding: 50px 0px 0px 0px}
    #divLeft, #divRight {display: none;}
}            
/*Mobile Landscape*/
@media only screen and (min-width: 501px) and (max-width: 800px) {
    body {padding: 0px 50px;}
    #divTop {display: none;}
    #divLeft, #divRight {position: fixed; width: 50px;}
}