/*
Coder: klp
Date: 2022/09/30
Site: TNT
File: jsgs-novice-styles.css

*/
/*zero out default styles*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /*a Google Font*/
    font-family: 'IBM Plex Sans Condensed', sans-serif
}

/*-------- main --------*/
main{
    background-image: url("../../images/simpleBg.jpg");
    background-repeat: repeat;
}

/*--------- Header Styles ----------*/
header {
    height: 85px;
    padding: 15px 10px 5px 10px;
    background-color: lightgreen;
    border-bottom: gray 2px solid;
}

header h1 {
    /*a Google Font*/
    font-family: 'Boogaloo', cursive;
    margin-bottom: 0px;
}

header div#mastheadText {
    float: left;
    margin-top: -20px;
}

header img#mastheadIcon {
    float: left;
    padding-right: 2px;
    width: 60px;
    height: auto;
    margin-right: 10px;
    background-color: lightgrey;
    border-radius: 50%;
    margin-bottom: 5px;
}

/*--------- Navbar Styles ----------*/
nav {
    display: block;
    clear: left;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 35px;
    background-color: gold;

    /*fit edge of nav bar up against header border*/
    margin-left: -10px;
    padding-left: 10px;
    margin-right: -10px;
    padding-right: 10px;
}

nav ul li {
    display: inline-block;
    text-decoration: none;
    margin-right: 15px;
}

nav ul li a {
    color: black;
    text-decoration: none;
}


/*-------- primary content --------*/
div#btnDiv{
    max-width: 800px;
}

div#tableDiv{
    overflow-x: auto;
}

div#artwork{
    clear: both;
    text-align: center;
    max-width: 600px;
}

/*-------- notes area --------*/
div#notes{
    max-width: 800px;
}

div#notes table p{
    font-size: 1em;
}

div#notes table{
    font-size: .6em;
    background-color: #faf3e0;
}


/*-------- footer --------*/
footer{
    font-size: .8em;
}

footer div#footerContent{
    max-width: 500px;
}

footer li a img{
    width: 50px;
    height: auto;
}

/*-------- links --------*/
div#primaryContent a{
    color:#d65c20;
    font-weight: bold;
    text-decoration: none;
}

/*-------- colors --------*/


/*-------- fonts --------*/
.cursive-font-1{
    font-family: 'Boogaloo', cursive !important;
}

/*-------- miscellaneous classes --------*/

/*used to hide info that we ultimately want but are not yet meaningful*/
.not-for-mobile{
    display: none;
}

/*default smaller size; scale up with media queries*/
div#mastheadText h1{
    font-size: 1.7em;
}