:root {
    --default_transition_all: all 0.5s ease;
    --appFrame_min_width: 1024px;
    --appFrame_min_height: 768px;
    --topFrame_height: 6%;
    --bottomFrame_height: 24%;
    --leftFrame_width: 19%;
    --rightFrame_width: 19%;
    --inner-panel-spacing: 50px;
}

* {
    box-sizing: border-box;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

span {
    display: block;
}

p span {
    display: inline;
}


@media screen and (max-width: 2560px) {
    :root {
        --topFrame_height: 7%;
        --bottomFrame_height: 26%;

        --inner-panel-spacing: 40px;
    }
}

@media screen and (max-width: 1920px) {
    :root {
        --topFrame_height: 8%;
        --bottomFrame_height: 28%;
        --leftFrame_width: 22%;
        --rightFrame_width: 22%;

        --inner-panel-spacing: 30px;
    }
}

div {
    transition: var(--default_transition_all);
}

#appFrame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: var(--appFrame_min_width);
    min-height: var(--appFrame_min_height);
}

#topFrame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topFrame_height);
    transition: var(--default_transition_all);
}

#bottomFrame {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottomFrame_height);
    transition: var(--default_transition_all);
}

#leftFrame {
    position: absolute;
    left: 0;
    top: var(--topFrame_height);
    bottom: var(--bottomFrame_height);
    width: var(--leftFrame_width);
    transition: var(--default_transition_all);
}

#rightFrame {
    position: absolute;
    right: 0;
    top: var(--topFrame_height);
    bottom: var(--bottomFrame_height);
    width: var(--rightFrame_width);
    transition: var(--default_transition_all);
}

#mainFrame {
    position: absolute;
    top: var(--topFrame_height);
    bottom: var(--bottomFrame_height);
    left: var(--leftFrame_width);
    right: var(--rightFrame_width);
    transition: var(--default_transition_all);
}






/* Top Frame */

#topNav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

    #topNav .navItem {
        position: relative;
        float: left;
        width: 300px;
        height: 100%;
    }

    #topNav .navItem .backLayer {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #topNav .navItem .innerElement {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 240px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
    }


#userNav {
    position: absolute;
    top: 0;
    right: var(--topFrame_height);
    height: 100%;
}

    #userNav .navItem {
        position: relative;
        float: left;
        width: 200px;
        height: 100%;
    }

    #userNav .navItem:first-child {

    }

    #userNav .navItem:last-child {
        width: 300px;
    }

#menuControl {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--topFrame_height);
}

    #menuControl .innerElement {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 40px;
    }


/* Bottom Frame */

#bottomFrame_left_section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(calc(100% - var(--rightFrame_width)) / 2);
}

#bottomFrame_middle_section {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(calc(100% - var(--rightFrame_width)) / 2);
    width: calc(calc(100% - var(--rightFrame_width)) / 2);
}

#bottomFrame_right_section {
    position: absolute;
    width: var(--rightFrame_width);
    bottom: 0;
    top: 0;
    right: 0;
}










/* Left Frame */

#leftFrame_top_section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
}

#leftFrame_middle_section {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    height: 65%;
}

#leftFrame_bottom_section {
    position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    height: 10%;
}


/* Right Frame */

#rightFrame_top_section {
}

#rightFrame_middle_section {
}

#rightFrame_bottom_section {
}




/* Common Element Styles */

.inner-panel {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--inner-panel-spacing));
    height: calc(100% - var(--inner-panel-spacing));
}