/* 
Creates a 4-pannel layout for the site via a div structure
The root of the structure must have classname `contentRoot`
*/

/*
<div>
    <div>
        HEADER
    </div>
    <div>
        <div>
            LEFT
        </div>
        <div>
            RIGHT
        </div>
    </div>
    <div>
        FOOTER
    </div>
</div>
*/


:root{
    --leftContentFlexWeight: 1;
    --rightContentFlexWeight: 3;
}


/* The main named root component of this scheme */
.contentRoot {
    display: flex;
    flex-direction: column;
}

/* HEADER Content */
.contentRoot > :nth-child(1) {
    display: flex;
    flex-direction: row;
    background-color: var(--contentRootDivHeader);
    border: 3px solid var(--contentRootDivBorder);
    margin: 1%;
    padding: 1%;

    font-size: var(--headerFontSize);
}

/* MAIN Content Holder */
.contentRoot > :nth-child(2) {
    display: flex;
    flex-direction: row;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

/* LEFT Main Content */
.contentRoot > :nth-child(2) > :nth-child(1) {
    
    flex: var(--leftContentFlexWeight);
    display: flex;
    flex-direction: column;
    background-color: var(--contentRootDivLeft);
    border: 3px solid var(--contentRootDivBorder);
    margin-left: 0px;
    margin-right: 0.5vw;
    padding: 1%;

    font-size: var(--contentFontSize);
}
/* ELEMENTS OF left Main Content */
.contentRoot > :nth-child(2) > :nth-child(1) * {
    padding: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
}

/* RIGHT Main Content */
.contentRoot > :nth-child(2) > :nth-child(2) { 
    flex: var(--rightContentFlexWeight);
    display: flex;
    flex-direction: column;
    background-color: var(--contentRootDivRight);
    border: 3px solid var(--contentRootDivBorder);
    margin-left: 0.5vw;
    margin-right: 0px;
    padding: 1%;

    font-size: var(--contentFontSize);
}
/* ELEMENTS OF right Main Content */
.contentRoot > :nth-child(2) > :nth-child(2) * {
    padding: 0.25%;
}

/* FOOTER Content */
.contentRoot > :nth-child(3) {
    display: flex;
    flex-direction: row;
    background-color: var(--contentRootDivFooter);
    border: 3px solid var(--contentRootDivBorder);
    margin: 1%;
    padding: 1%;

    font-size: var(--contentFontSize);
}
/* ELEMENTS OF right Main Content */
.contentRoot > :nth-child(3) * {
    white-space: nowrap;
    
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    margin-left: 1%;
    margin-right: 1%;
}

.contentRoot > :nth-child(2) button
{
    border: 3px solid var(--contentRootElementBorder);
    background-color: var(--contentRootElementBackground);
    color: var(--contentTextColor);
    font-size: var(--contentFontSize);
}