/* -------------------------------------------------------------
BASE LAYOUT
-------------------------------------------------------------- */
/**/
html, body {
	min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;	
	background-color: var(--sand-700);
}

/* ================================================= */
/* HEADER ----------------------------- 
    Fixed. Sits on top of all other layouts.
*/

h2 {
  font-size: 20px;
}

.appHeader_layout {
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 90;
}
// The remainder of the headBar styles are in 'css/components/headBar/headBar.scss';

/* ================================================= */
/* BACKGROUND ---------------------- 
    This is the full width and full height container. */
#bgContainer {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;

    .bgSky {
        position: relative;
        display: block;
        height: calc(var(--gridH) * 6);
        width: calc(var(--gridW) * 10);
        background-color: var(--blue-sky);

        &.bgSky_tutLayout { height: calc(var(--gridH) * 7); }
    }


    .bgSea {
        position: relative;
        display: block;
        height: calc(var(--gridH) * 2);
        width: calc(var(--gridW) * 10);
        overflow: visible;
        // background-image: url(../imgs/bgs/oceanBg_fullWidth.svg);
        background-position: right top;
        background-size:   100% 100%;
        background-repeat: no-repeat;
    }
    .bgSand {
        position: relative;
        display: block;
        height: calc(var(--gridH) * 1);
        width: calc(var(--gridW) * 10);
        background-color: var(--sand-700);
        // border: 1px solid lime;
    }

}

/* ================================================= */
/* DEV GRID (will rm later) ----------------------- */
.devGrid {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    // border: 3px solid orange;
    z-index: 50;

    .dgSide {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        width: calc(var(--gridW) * 2);
        height: 100%;
        // border: 1px solid red;
    }
    .dgMain {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        width: calc(var(--gridW) * 6);
        height: 100%;
        // border: 1px solid orange;
    }

    .dgCol {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        width: calc(var(--gridW) * 1);
        height: 100%;
        border-left: 1px solid rgba(255, 255, 255, 0.75);

        .dgRow {
            position: relative;
            display: flex;
            // flex-flow: column nowrap;
            width: calc(var(--gridW));
            height: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.25)
        }
    }
}


/* ================================================= */
/* MAIN ----------------------------- 
/* main #container .sceneGrid */

#container {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    // align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;    

    .centerBox {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        width: calc(var(--gridW) * 6);
        height: 100%;
        padding-top: calc(var(--gridH));
        // border: 1px solid blue;
        z-index: 5;

        .topRowBox {
            position: absolute;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            height: calc(var(--gridH));
            padding-top: calc(var(--gridH)/4);
            // border: 1px solid white;

            .pageTitleBox {
                position: relative;
                display: flex;
                flex-flow: column nowrap;
                justify-content: flex-start;
                align-items: center;
                width: 33%;
                // border: 1px solid blue;

                .pageTitle{
                    margin-bottom: 0.5rem;
                    text-transform: uppercase;
                    font-size: 1rem;
                    letter-spacing: .1rem;
                    font-weight: bold;

                    color: var(--color_textLight);
                }
                .pageSubheader{
                    // text-transform: uppercase;
                    font-size: 0.9rem;
                    // letter-spacing: .1rem;
                    font-weight: bold;
                    color: var(--color_textLight);
                }
            }
            // .stickerBox {}
        }


        /* WAVE BOX  ----------------------------- */
        #waveBoxParent { // (index.html)
            position: absolute; 
            display: block;
            top: calc(var(--gridH) * 4);
            height: calc(var(--gridH) * 4);
            width: 100%;
            // see _waveBox.scss for the remainder of waveBox styles

            &.waveBoxParent_tutLayout { top: calc(var(--gridH) * 5);}
        } // waveBoxParent 
    } //.centerBox
} // #container

#sharedWordDisplayContainer.wordPromptRow {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    top: calc(var(--gridH) * 3);
    justify-content: center;
    // align-items: center;
    width: calc(var(--gridW) * 6);
    height: calc(var(--gridH) * 1);
    // border: 1px solid pink;
    z-index: 10;

    #wordPromptBox {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-end;
        width: calc(var(--gridW) * 4);
        height: calc(var(--gridH) * 1);
        border-bottom: 0px solid white;

        .wordPromptText {
            position: relative;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: flex-end;
            color: var(--color_text);
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
    }

    .snapShotBox {
        position: absolute;
        display: flex;
        // flex-flow: row nowrap;
        flex-flow: column nowrap;
        
        justify-content: space-between;
        align-items: flex-start;
        // width: 96px; // ea. btn is 48px
        height: calc(var(--gridH) * 1);
        right: calc((var(--gridW) - 64px));
        bottom: calc(var(--gridH) * -1);
        // border: 1px solid orange;
        z-index: 15;

        &.snapBox_tutLayout {
            flex-flow: column nowrap;
            right: calc((var(--gridW) * 1) - 64px);
            bottom: calc(var(--gridH) * -2);
            border: none;
            // border: 1px solid white;
        }

        .snapBtn {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            color: var(--color_textLight);
            background-color: var(--blue-sky);
            margin-left: 2px;
            padding: 6px 12px;
            border: none;
            -webkit-user-select: none; /* Safari */
            user-select: none;
            cursor: pointer;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            z-index: 20;

        }
        .snapBtn:hover {
            color: var(--color_text);
        }
        .snapBtn:active { color: white; }
    }

}



#micAccessButton {
    position: absolute;
    top: -20px;
    width: 200px;
    z-index:99;
} 

/*  LEFT PANEL: Student Videos ----------------------------- */
#panelLeft_layout {  /* holds videos */
	position: absolute;
	height: 100vh;
	width: 20vw;
    top: 0;
    left: 0;
    z-index: 50;
	/* border-right: 1px solid red; */
}

/*  SIDE NAV: Page/Activity Navigation ----------------------------- */
#sideNav_layout {
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between; 
    align-items: center;

	height: 100vh;
	width: 64px;
    top: 0;
    left: 0;
    z-index: 60;

    color: white;
    background-color: var(--navy-600);
    box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 5px;
	// border-right: 1px solid red;
}


/*  RIGHT PANEL: ----------------------------- */
#panelRight_layout {  /* currently holds settings */
	position: absolute;
	height: 100vh;
	width: 20vw;
    top: 0;
    right: 0;
    z-index: 50;
	/* border-left: 1px solid red; */
}

/* FOOTER ----------------------------- */
/* none yet */