﻿/* created July 13, 2022 */

@font-face {
    font-family: 'Oranienbaum';
    font-style: normal;
    font-weight: 400;
    src: url('/Fonts/oranienbaum-v15-latin-ext_latin-regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('/Fonts/playfair-display-v30-latin-ext_latin-regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    src: url('/Fonts/playfair-display-v30-latin-ext_latin-italic.ttf') format('truetype');
    font-display: swap;
}

.noBreakSpan {
    display: inline-block; /* needed for reliable behavior */
    white-space: nowrap;
}

.inputTextFieldStyled {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.8rem;
    width: 100%;
}

#numProbWksht2, #wkshtWorkSpace2, #numProbWksht, #wkshtWorkSpace {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.3rem;
}

.mathWithReasonsTable {
    margin: auto;
    margin-bottom: 1rem;
    overflow-x: auto;
}

    .mathWithReasonsTable td {
        padding: 0.5rem;
        vertical-align: top;
    }

/* When equation/reason tables are too wide, use this */
/*
    <div class="solveEquationContainer">
      <div class="equationWithReasonDiv">
        <div class="equationDiv"></div>
        <div class="reasonDiv"></div>
      </div>
    </div>
*/
.solveEquationContainer {
    border: 4px solid lightgrey;
    border-radius: 1rem;
    padding: 0.5rem;
}

.equationWithReasonDiv {
    border-bottom: 4px double lightgrey;
    margin-top: 2rem;
}

.equationDiv {
    text-align: center;
}

.reasonDiv {
    background-color: white;
    border-radius: 0.5rem;
    margin-top: 0.3rem;
    padding: 0.5rem;
    text-align: center;
}


.specialTable {
    border: 1px solid black;
    border-collapse: collapse;
    margin: auto;
    margin-bottom: 2rem;
    overflow-x: auto;
}

    .specialTable td {
        border: 1px solid black;
        padding: 0.5rem;
        vertical-align: top;
    }

.bold {
    font-weight: bold;
}

.multiItemFlex {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1rem;
    justify-content: center;
    text-align: center;
}


@media (max-width: 700px) {
    .bigScreen {
        display: none;
    }

    .smallScreen {
        display: block;
    }
}

@media (min-width: 701px) {
    .bigScreen {
        display: block;
    }

    .smallScreen {
        display: none;
    }
}

body {
    background-image: url(/graphics/furley_bg.png);
    font-family: Georgia, "Times New Roman", Times, serif;
}

a {
    color: #a09f9d;
}

    a:hover {
        color: black;
        transition: color 0.5s;
    }

#headerContainer {
    background-color: rgba(255,255,255,0.75);
    border-bottom: 1px dashed #ccc;
    box-shadow: 0 0 0 1px #f8f8f8, /* white border, Dabaman styling */
    /* offset-x, offset-y, blur-radius, spread-radius, color value */
    0 5px 0 -3px #f8f8f8, /* The first layer */
    0 5px 0 -2px #ccc /* The first layer shadow */;
    width: 100%;
}

#headerIconContainer {
    display: flex;
}

#headerLogoImage {
    width: 11rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#headerNav {
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 0.6rem;
    font-family: 'Playfair Display', serif;
    display: none; /* design for mobile first */
}

.headerNavLink {
    color: rgba(0,0,0,0.56); /* text color */
    padding: 0 1rem;
    text-decoration: none;
}

    .headerNavLink:hover {
        color: black;
        transition: color 0.5s;
    }

#headerSearchIcon {
    padding-left: 0.5rem;
    padding-right: 1rem;
}

#headerSearchIcon, #headerHamburgerIcon {
    opacity: 0.56;
}

#headerNavMobileOnly {
    display: none; /* changes to  display:flex; on toggle */
    flex-direction: column;
    align-items: center;
    font-family: 'Playfair Display', serif;
}

    #headerNavMobileOnly a {
        background-color: #f8f8f8;
        border: 1px dashed #cccccc;
        color: rgba(0, 0, 0, 0.56);
        padding-bottom: 0.3rem;
        padding-top: 0.3rem;
        text-align: center;
        width: 85%;
    }

        #headerNavMobileOnly a:hover {
            color: black;
            transition: color 0.5s;
        }

#headerSearchForm {
    display: none; /* changes to  display:block; on toggle */
    border-bottom: 1px dashed #999;
}

#headerSearchFormTable {
    margin: auto;
    margin-top: 0.7rem;
}

#headerNavMobileOnly, #headerSearchForm {
    padding-top: 0.5rem;
    height: 0;
    opacity: 0;
    transition: height 1.5s, opacity 1.5s;
}

    #headerSearchForm input[name="q"] {
        background-color: lightgrey;
        opacity: 0.7;
        border-radius: 4px 5px;
        border: none;
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem;
        outline: none; /* used to prevent black outline on some devices */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 3rem;
        padding-right: 3rem;
        text-align: center;
        width: calc(100% - 12rem); /* make room for search button */
    }

    #headerSearchForm input[type="submit"] {
        background-color: lightgrey;
        border: none;
        border-radius: 25px;
        color: white;
        font-size: 1.2rem;
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
        margin-bottom: 0.4rem;
        padding: .35rem 1rem;
        vertical-align: middle;
    }

@media (min-width: 700px) {
    #headerNav {
        display: flex;
    }

    #headerHamburgerIcon {
        display: none;
    }
}

#asideMainContainer {
    display: flex;
    flex-direction: column;
    padding: 2rem 1rem;
}

@media (min-width: 700px) {
    #asideMainContainer {
        flex-direction: row;
        align-items: flex-start; /* for position:sticky; to work */
    }
}

@media (min-width: 990px) {
    #asideMainContainer {
        margin: auto;
        width: 990px;
    }
}

aside {
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
    margin: auto; /* when at top */
    padding-bottom: 1rem;
    width: 80%; /* when at top */
}

@media (min-width:700px) {
    aside {
        position: sticky;
        top: 1rem;
        margin: initial;
        padding-right: 2rem;
        text-align: left;
        width: initial;
    }
}

.asideNav {
    display: flex;
    flex-direction: column;
}

.asideNavLink {
    background-color: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: .25rem;
    color: #a09f9d;
    padding: .35rem 1rem;
    text-decoration: none;
    vertical-align: middle;
}

    .asideNavLink:hover {
        color: black;
        transition: color 0.5s;
    }

.linkPaddingTop {
    padding-top: 1rem;
}

.noWrap {
    white-space: nowrap;
}

.svgIcon {
    opacity: 0.5;
    padding-right: 0.3rem;
    vertical-align: middle;
    width: 2rem;
}

main {
    flex-grow: 1;
}

#mainTitle, .secondLevelTitle, .thirdLevelTitle {
    color: #222;
    font-family: 'Oranienbaum', serif;
    font-weight: 500;
    text-shadow: 1px 1px 1px white;
}

#mainTitle {
    font-size: 2.3rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
    margin-top: 0;
}

.secondLevelTitle { /* typically use with <h2> */
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.thirdLevelTitle { /* typically use with <h3> */
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

@keyframes audioAnimation {
    from {
        background-color: none;
    }

    to {
        background-color: darkred;
    }
}

/* The element to apply the animation to */
#audioIcon {
    border-radius: 0.3rem;
    animation-name: audioAnimation;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: 5;
    animation-timing-function: linear;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#audioPlayer {
    display: none;
    padding-bottom: 0.5rem;
}

#audiofile {
    background-color: rgb(150,150,150,0.7);
    border-radius: 2rem;
    display: block;
    margin: auto;
    opacity: 0.75;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
}

#audioPlayer {
    width: 100%;
    text-align: center;
}

.breadcrumbList {
    margin-top: 0;
    padding: 0;
    font-family: 'PlayFair Display', serif;
}

.breadcrumbItem {
    display: inline;
    color: #a09f9d;
}

    .breadcrumbItem a {
        color: #a09f9d;
        text-decoration: none;
    }

        .breadcrumbItem a:hover {
            color: black;
            transition: color 0.5s;
        }

/* Randomly-loaded Mathematical Cat with Floating Hearts */

#mathematicalCat {
    width: 100%;
}

#mathematicalCatImage {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
    border-radius: 0.6rem;
    margin: 0;
    width: 100%;
    max-width: 10rem;
    opacity: 0.8;
}

#imageAndHeartsContainer {
    width: 30%;
    float: right;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
    position: relative; /* nearest positioned ancestor for nearts */
}

#hearts { /* the container for the floating hearts */
    position: absolute; /* absolute positioning in imageAndHeartsContainer */
    left: 0; /* to center horizontally */
    right: 0; /* to center horizontally */
    margin: auto; /* to center horizontally */
    bottom: 75%;
    height: 150%; /* 1.5 times image height */
    width: 100%; /* same width as image */
    max-width: 10rem; /* same width as image */
    z-index: 10; /* show over all other elements */
    display: block;
}

.heart {
    position: absolute;
    height: 20%;
    width: 20%;
    background-color: rgb(171,48,53,0.75);
    -webkit-mask-image: url('/graphics/responsiveImages/heart-solid.svg');
    mask-image: url('/graphics/responsiveImages/heart-solid.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: bottom;
    opacity: 0;
    animation-name: floating-heart;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.5,0.5,0.5,0.5);
    animation-play-state: running;
}

    .heart:nth-child(1) {
        animation-delay: 0s;
    }

    .heart:nth-child(2) {
        animation-delay: 1s;
    }

    .heart:nth-child(3) {
        animation-delay: 2.5s;
    }

    .heart:nth-child(4) {
        animation-delay: 3.5s;
    }

@keyframes floating-heart {
    0% {
        opacity: 0;
        bottom: 0%;
        left: 0%;
    }

    10% {
        opacity: 1;
        bottom: 20%;
        left: 70%;
    }

    20% {
        bottom: 40%;
        left: 10%;
    }

    30% {
        bottom: 60%;
        left: 50%;
    }

    40% {
        opacity: 1;
        bottom: 80%;
        left: 5%;
    }

    48% {
        opacity: 0;
        bottom: 100%;
        left: 60%;
    }

    100% {
        opacity: 0;
        bottom: 100%;
        left: 90%;
    }
}

/* end of Randomly-loaded Mathematical Cat with Floating Hearts */

#firstParAfterCatWithFloatingHearts {
    margin-top: 0;
}

#noteFromWebsiteCreator {
    background-color: rgba(255,255,255,0.75);
    border-radius: 5px;
    /* color with opacity, offset-x (neg is left), offset-y (neg is up), blur-radius */
    box-shadow: rgba(0,0,0,0.4) -2px -2px 10px;
    margin: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    width: 80%;
    max-width: 30rem;
}

#noteFromWebsiteCreatorTitle {
    font-family: Papyrus, "Comic Sans MS", "Comic Sans", cursive;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

#noteFromWebsiteCreatorNote {
    font-size: 0.9rem;
    text-align: left;
}


/* definitions */

.definitionDiv { /* the "container" for the definition */
    background: rgba(256, 256, 256, 0.75);
    border-left: 2px solid rgba(0,0,0,0.325);
    border-radius: 5px;
    margin: 1rem 0;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem; /* top right bottom left */
}

.definitionDefnDiv { /* for the definition itself */
    margin-top: 0.75rem;
}

.definitionDefnSpan { /* for the word DEFINITION */
    display: inline-block; /* prevent white-space errors on mobile */
    font-size: 1.1rem;
    font-weight: bold;
    padding-right: 1rem;
    text-transform: uppercase;
}

.definitionSpan { /* for what this is the definition OF */
    font-size: 1.1rem;
    font-style: italic;
}

/* Miscellaneous styling in main content */
.questionDiv {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.questionSpan {
    font-weight: bold;
    margin-right: 0.75rem;
    text-transform: capitalize;
}

.solutionDiv {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.solutionSpan {
    font-weight: bold;
    margin-right: 0.5rem;
    text-transform: capitalize;
}



/* MOVE ON TO NEXT SECTION */
#toNextSection {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    background: rgba(256, 256, 256, 0.75);
    border: 1px dashed #ccc;
    border-radius: 7px;
    font-size: 0.85rem;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    width: 85%;
    max-width: 32rem;
}

#masterIdeas {
    flex: 2; /* 2/(2+1) parts of extra space given to this div */
    padding-right: 1rem;
    text-align: center;
}

#toNextSectionDivider {
    flex: 0 0 0.2rem; /* flex-grow flex-shrink flex-basis */
    background-color: #a09f9d; /* same as anchor color */
    height: 6rem;
}

#moveOnTo {
    flex: 1; /* 1/(2+1) parts of extra space given to this div */
    padding-left: 1rem;
    text-align: center;
}

#moveOnToRightArrow {
    flex: 0 0 1rem;
    padding-left: 0.5rem;
}

.conceptImage {
    border-radius: 0.5rem;
    display: block;
    margin: auto;
    width: 100%;
    max-width: 30rem;
}

/* EXERCISES */

#practiceDiv, #practiceDiv2 { /* wraps ALL exercises */
    background: rgba(256, 256, 256, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 7px;
    margin-bottom: 2rem;
    padding: 1rem 2rem; /* top/bottom left/right */
    text-align: left; /* so finger doesn't hide content on touchscreens */
}

#practiceDiv2 {
    margin-top: 2rem;
}

#clickOnNewProb { /* Initial instructions */
    margin-bottom: 0;
}

.buttonStyle {
    border: 2px solid #acacac;
    border-radius: 10px;
    padding: 0.7rem;
}

    .buttonStyle:active {
        border: 2px solid white;
    }


#newProbButton {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

#practiceDiv input[type=button]:focus, #practiceDiv2 input[type=button]:focus {
    outline: none;
    box-shadow: 0 0 0 1px green;
}

#newProbDivInst {
    margin-top: 0.5rem;
}

#newProbDivInitialInstructions, #newProbDiv2InitialInstructions {
    font-size: 0.9rem;
}

.styledDiv { /* style divs that will hold randomly-generated text */
    background: white;
    border: 1px solid rgba(0,0,0,0.325);
    border-radius: 7px;
    margin-top: 0;
    margin-bottom: 1rem;
    max-width: 32rem;
    padding: 0.5rem 1rem; /* top/bottom left/right  */
    min-height: 1rem;
}

    .styledDiv input {
        border: none;
        outline: none; /* This gets rid of the black box when you click in the input field */
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1rem;
        width: 98%; /* fix incomplete box on mobile */
    }

#ansInput {
    /* want traditional number font for typing in answer */
    font-family: 'Times New Roman', Times, serif;
    font-size: larger;
}

#chkAnsInputDiv {
    /* want traditional number font when reporting answer o*/
    font-family: 'Times New Roman', Times, serif;
}

#chkAnsButton {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.worksheetInfoTableTD {
    vertical-align: bottom;
}

#worksheetInfoTable, #worksheetInfoTable2 {
    font-size: 0.9rem;
}

#problemTypes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.exerciseCell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 2.5rem;
    flex-shrink: 0;
    flex-grow: 1;
    background-color: #9E6FA1;
    border: 1px solid black;
    border-radius: 3px;
    font-size: small;
    font-family: 'Times New Roman';
    min-height: 2rem;
    text-align: center;
}

#problemTypeInstructions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-weight: bold;
    width: 100%;
}

footer, #footerLinkContainer,
#footerLastModifiedContainer,
#footerCopyrightContainer,
#footerPoweredByContainer {
    display: flex;
}

footer {
    background-color: rgba(255,255,255,0.5);
    border-top: 1px dashed #ccc;
    color: #888;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

#footerLogoImage {
    margin-right: 0.5rem;
    width: 8rem;
}

#footerLinkContainer {
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
}

    #footerLinkContainer a {
        text-decoration: underline;
        color: rgba(0,0,0,0.56);
    }

        #footerLinkContainer a:hover {
            color: black;
            transition: color 0.5s;
        }

@media (min-width: 700px) {
    footer {
        font-size: 0.9rem;
    }

    #footerLinkContainer {
        flex-direction: row;
        align-items: center;
    }

    #footerLastModifiedContainer,
    #footerCopyrightContainer,
    #footerPoweredByContainer {
        flex-direction: column;
        align-items: center;
    }
}
