@import 'palette.less';
@import 'mixinlibrary.less';

/* MOBILE STYLE SHEET */

body {
    font-family: @inlineFont;
    font-size: 16px;
    height: 100%;
    line-height: 1.5;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}

p,
li {
    margin: 1em 0;
}

strong,
a {
    font-weight: bold;
}

em {
    font-style: italic;
}

a {
    text-decoration: none;
    &:hover {
        cursor: pointer;
    }
}

header {
    background-color: @color3;
    background-image: url(../images/bg/classes/exp/cas215.jpg);
    color: @lightColor; // height: 300px;
    padding: 4em 1em;
    text-align: center;
    .transition(1s);
    background-size: cover;
    background-position: center center;
    grid-column: 1;
    grid-row: 1;
    h1 {
        .headerFontAttributes(@lightColor;
        2em;
        @headerFont);
        text-align: center;
    }
    h2 {
        .headerFontAttributes(@lightColor;
        1em;
        @headerFont);
        text-align: center;
    }
    h3 {
        .headerFontAttributes(@lightColor;
        .75em;
        @headerFont);
        text-align: center;
    }
    p {
        font-family: @headerFont;
        font-size: .75em;
        text-transform: uppercase;
    }
    a {
        color: @lightColor;
    }
}

main {
    grid-column: 1;
    grid-row: 2;
    a {
        &:link {
            color: @color4;
        }
        &:hover {}
        &:active {}
        &:visited {
            color: @color4;
        }
    }
    nav,
    section,
    footer {
        padding: 1em;
    }
    nav {
        background-color: @lightColor;
        width: 100%;
        ul {
            display: block;
            margin: 0 auto;
            li {
                display: inline-block;
                margin: 0;
                a {
                    border-radius: 6px;
                    cursor: pointer;
                    font-family: @headerFont;
                    margin: .5em;
                    padding: .5em;
                    text-transform: uppercase;
                    &:link,
                    &:visited {
                        color: @darkColor;
                    }
                }
                a.active {
                    background-color: @color3;
                    color: @lightColor;
                    box-shadow: 0 0 1px;
                }
            }
        }
    }
    section {
        h2 {
            .headerFontAttributes(@darkColor;
            1.5em;
            @headerFont);
        }
        h3 {
            .headerFontAttributes(@darkColor;
            1em;
            @headerFont);
            font-weight: bold;
        }
        ul {
            display: block;
            list-style-type: disc;
            -webkit-margin-before: 1.5em;
            -webkit-margin-after: 2em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 40px;
            -webkit-padding-end: 40px;
            padding: 0 40px;
            li {
                display: list-item;
                text-align: -webkit-match-parent;
            }
        }
        article {
            margin: 0 0 3em 0;
        }
        .info {
            font-family: @headerFont;
            color: @color3;
            text-transform: uppercase;
        }
    }
    footer {}
    p {
        line-height: 2em;
    }
}

ol {
    display: block;
    list-style-type: decimal;
    li {
        display: list-item;
        margin: 1em;
    }
}

.incidentals {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.calltoaction {
    display: inline-block;
    margin: 0 auto;
    a {
        border-radius: 6px;
        cursor: pointer;
        font-family: @headerFont;
        margin: .5em;
        padding: .5em;
        text-transform: uppercase;
        &:link,
        &:visited {
            color: @lightColor;
        }
    }
    a.active {
        background-color: @color4;
        color: @lightColor;
        box-shadow: 0 0 1px;
    }
}

.windowheight {
    min-height: 100vh;
}

.scrolled {
    z-index: 3;
    top: 0px;
    position: fixed;
}

.social {
    font-size: 2em;
}

.hidden {
    display: none;
}

.showblock {
    display: block;
}

.coursedata {
    margin: 0 0 5em 0;
}

#top {
    display: none;
}

#schedule,
#about,
#courses,
#faq {
    &:before {
        display: block;
        content: " ";
        margin-top: -90px;
        height: 90px;
        visibility: hidden;
        pointer-events: none;
    }

}

@media only screen and (min-width: 481px) {
    main {
        .incidentals {
            grid-template-columns: 200px auto;
            grid-template-rows: auto;
            margin: 1em 0;
            .pic {
                font-size: .8em;
                grid-row: 1;
                grid-column: 1;
            }
            .data {
                grid-row: 1;
                grid-column: 2;
                padding: 0 1em 0 2em;
                .info {
                    font-size: .8em;
                    font-style: italic;
                }
            }
        }
    }
}

@media only screen and (min-width: 769px) {
    body {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
    }
    header {
        grid-column: 1;
        grid-row: 1;
        position: fixed;
        top: 0;
        min-height: 100vh;
        width: 50%;
        div#headingcontent {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            section {
                &:first-child {
                    margin: 0 0 5em 0;
                }
            }
        }
    }
    main {
        grid-column: 2;
        grid-row: 1;
        section,
        footer {
            padding: 2em;
            p,
            li {
                font-size: .95em;
            }
        }
    }
    nav {
        display: block;
        padding: 1em 2em;
        position: fixed;
        top: 0;
        width: 100%;
    }
    .nodesktop {
        display: none;
    }
}