/*
File: jsgfx-site-styles2020.css
Site: TNT
Date: 01/30/20
Author: KLP
Comments:
Updated styles for JSGS within 2020 TNT

*/

/*
-------- New Styles per 2020 ---------
*/

div#heroArea nav {
    /*a bit of margin between the heroArea nav section and the two bounding horizontal rules*/
    margin-top: 5px;
    margin-bottom: 5px;
}

div#heroArea nav ul li a:hover {
    /*make the links 'pop' with a change of color and underlining when hovered over*/
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

div#bigContent main {
    background-color: beige;
}

/*--- Hero Area Styles---*/
div#heroArea {
    background-image: url(../images/goldPanning.png);
    background-size: cover;
}

div#heroArea h1,
div#heroArea p {
    color: #FFF5BC;
}

div#heroArea h1 {
    text-shadow: 2px 2px #D81827;
    font-family: 'Boogaloo', cursive;
    margin-bottom: 5px;
}

div#heroArea div#heroAreaText p {
    text-shadow: 1px 1px #D81827;
    margin-top: 20px;
}

img#spiralIcon {
    float: left;
    width: 50px;
    height: auto;
    margin-right: 10px;
}

div#heroArea h1 span {
    font-size: .8em;
}

div#heroArea hr {
    min-width: 300px;
    max-width: 500px;

}

details div {
    overflow-x: scroll;
}

/*---Designs for features/usage tables -- */
details div table {
    border: 1px solid gray;
    margin-bottom: 10px;
    max-width: 700px;
    margin-left: 10px;
    margin-right: 10px;
}

details div table th,
details div table td {
    padding: 3px;
}

details div table th {
    background-color: orange;
    color: white;
    text-align: right;
    padding-right: 5px;
}

details div table td {
    background-color: #FFF5BC;
    color: black;
    text-align: right;
    border: 1px solid lightGray;
}

details div table td p {
    font-size: 10px;
}

/*----------------------------------------*/

div#heroArea p#shapeName {
    font-size: 1.3em;
}

p.parenthetical {
    color: gray;
    font-size: .8em;
    font-style: italic;
}

article h1 {
    margin-bottom: 10px;
}

details div ol {
    margin-left: 30px;
}

#shapes figure.newShape {
    background-color: green;
    color: white;
}

div#heroArea div#heroAreaText {
    float: left;
}

div#heroArea div#heroAreaText p {
    margin-top: -10px;
}

div#heroNavBar {
    display: block;
    clear: both;
}

main div#content {
    /*pushes footer to bottom of page*/
    min-height: 550px;
}

/*
---------End New Styles for 2020
*/

/*
div#dropdownMenuArea.mobile-view {
    background-color: black;
}

div#dropdownMenuArea.expanded-view {
    background-color: black;
    height: 210px;
}
*/

/*
nav.expanded-view ul li a {
    text-decoration: none;
    color: gold;
}
*/

#masthead span {
    color: #FF4F2F;
}

#artwork {
    text-align: center;
}

/*12/2/18*/
main #content button {
    padding: 5px;
    border-radius: 5px;
    float: right;
}

.hide {
    display: none;
}

.show {
    display: block;
    background-color: pink;
}

#reloadBtn {
    display: none;
}

canvas#canvasOne {
    cursor: pointer;
    margin-top: 20px;
    width: 300px;
    height: 300px;
    padding: 5px;
    border: 2px solid #bbb;
    border-radius: 20px;
    margin-bottom: 20px;
}

details {
    margin-bottom: 30px;
}


#shapes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#shapes figure {
    width: 100px;
    text-align: center;
    background-color: gold;
    margin-left: 2%;
    margin-bottom: 2%;
}

#shapes figure img {
    width: 100%;
    height: auto;
}

#shapes figure figcaption {
    font-size: 12px;
    padding: 2px;
}

/*------MEDIA QUERIES-------*/

/*gray band*/
/*
@media (min-width: 200px) {
    #masthead #mastheadText h1 {
        font-size: 17px;
    }

    #masthead #mastheadText p {
        font-size: 16px;
    }

}
*/

@media (min-width: 200px) {

    /*gray*/
    div#heroAreaText h1 {
        font-size: 1.5em;
    }

    div#heroAreaText p {
        font-size: 1.2em;
    }
}

/*black band*/
@media (min-width: 400px) {
/*
    #masthead #mastheadText h1 {
        font-size: 21px;
    }

    #masthead #mastheadText p {
        font-size: 17px;
    }
*/

    canvas#canvasOne {
        width: 375px;
        height: 375px;
    }
    
    #heroArea{
        height: 100px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
}

/*red band*/
@media (min-width: 600px) {

    /*removes additional prefix header from root-level pages*/
    header #mastheadText p::before {
        content: "";
    }
    
    #heroArea {
        height: 100px;
        padding-top: 10px;
        padding-bottom: 10px;

    }

    canvas#canvasOne {
        width: 500px;
        height: 500px;
    }

    #reloadBtn {
        display: block;
    }
}

/*end red band*/

/*blue band*/
@media (min-width: 800px) {
    canvas#canvasOne {
        width: 600px;
        height: 600px;
    }

    main {
        padding-left: 15%;
        padding-right: 15%;
    }
    #heroArea {
        height: 100px;
        padding-top: 10px;
        padding-bottom: 10px;

    }
}

/*end blue band*/

/*green band*/
@media (min-width: 1200px) {
    main {
        padding-left: 15%;
        padding-right: 15%;
    }
    #heroArea {
        height: 100px;
        padding-top: 10px;
        padding-bottom: 10px;

    }
}

/*end green band*/

/*orange band*/
@media (min-width: 1400px) {
    
    #heroArea {
        height: 100px;
        padding-top: 10px;
        padding-bottom: 10px;

    }
}

/*end orange band*/

/*gold band*/
@media (min-width: 1600px) {

    /*large desktop mac*/
    header {
        border-bottom: 5px gold solid;
    }
}

/*end gold band*/