/* This rule will make webkit and Microsoft browsers set the font size to 100% all the time*/
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
/* This next rule sets the box-sizing model to border-box, which simply means that padding is 
   added to inside of the box and margin is added to the outside of the box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    background-color: gray; 
}

/* header rules */
header {
    background-color: #bfbeaf;
}
header img {
    float: left;
    height: 85px;
    padding-right: 10px;
}
header h1, header h2 {
    margin: 0;
    color: #000;
    font-weight: 300;
    font-style: italic;
}
header h1 {
    padding: .5rem 0 0 0;
    font-size: 1.95rem;
}
header h2 {
    padding: .2rem 0 0 0;
    font-size: 1.05rem;
}

/* Create a "hamburger" button to expand/collapse the nav menu on small veiwports when clicked*/
button#navBtn { 
    background: none;
    border:none;
    color: #fff;
    font-size: 2.4rem;
    cursor: pointer;
    padding: 0 30px 0 2vw;
    }

nav {background-color: rgb(89,198,91);} 
nav ul {margin: 0; padding: 0;} 
nav ul li {list-style-type: none;} 
nav a {
    display: block;
    padding: .8rem 0;
    color: #eee;
    text-align: center;
    text-decoration: none;
} 
nav li.active {background-color: rgba(0,0,0,0.5);}
nav a:hover {background-color: rgba(0,0,0,0.2);}
nav ul.open {display: block;}
nav ul {display: none;}

main h1 {color: rgb(89,198,91);}
main img {
    width: 100%;
    height: auto;
}

#welcome, #tutorials, #results, #subscribe, #about{
    background-color: #576248;
    color: #bfbeaf;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: #141414 1px solid;
}

#welcome a {text-decoration: none;}
#welcome a:link {color: blue;}
#welcome a:visited {color: blue;}
#welcome a:hover {color: rgb(89,198,91); font-weight: bold;}
#welcome a:active {color: red; text-decoration: underline;}

/* tables rules */
#results {text-align: center;}
#results h1 {text-align: left;}
table {width: 100%; margin-bottom: 10px;}
thead {background-color: #538700; color: #fff; text-align: center;}
td {padding: 5px;}
.subhead {text-align: center; background-color: #9dd051; color: black;}
.chart-data, .strategy {background-color: #ffff99; color: black;text-align: right;}
.strategy {text-align: left;}

/* form rules */
form { 
    display: flex;
    flex-flow: column nowrap; 
}

input, textarea { 
    margin-bottom: .5em; 
}

/* grid rules */
.row {clear: both;}
.limited { max-width: 80%; margin: auto;}
.column { float: left; padding: 0; margin: 0 0 .75rem 0;}
/* uses all 12 of 12 columns, or 100% for "small screen" browsers*/
.small-12 {width: 100%; padding: 0 2vw; margin: 0 0 .75rem 0;}

.labeled {position: relative;}
.labeled h6, .labeled p {
    position: absolute;
    background-color: rgba(255,255,255,.7);
    margin: 0;
    width: 95%;
    padding: .3rem 1rem;   
}
.labeled h6 {
    top: 0;
    font-size: 2rem;
    font-weight: 300;
}
.labeled p {
    bottom: 0;
    font-weight: 700;
    color: #b00;
}

footer {
    background-color: #bfbeaf;
    font-size: 1.2rem;
}

footer h2 {
    font-style: italic;
    text-transform: uppercase;
    margin: 1rem 0 .3rem 0;
}

.copywrite {text-align: center;}

/* The following inserts content "after" the floated items and is 
   is needed to prevents the header, footer, and other elements 
   from collapsing */
.fixClear:after {
    content: "";
    display: table;
    clear: both;
}


@media only screen and (min-width: 768px) {
    header h1 {font-size: 2.85rem;}
    header h2 {font-size: 1.5rem;}
    header img {height: 100px;}
    /* uses 6 of 12 columns, or 50% for "medium screen" browsers*/
    .medium-6 {width: 50%}
    nav button {display: none;}
    nav ul {display: block;}
    nav li {width: 20%; float: left;}

    .labeled h6, .labeled p {
        position: absolute;
        background-color: rgba(255,255,255,.7);
        margin: 0;
        width: 89.9%;
        padding: .3rem 1rem;   
    }
} /* end of medium media query */

@media only screen and (min-width: 1024px) {
    /* uses 3 of 12 columns, or 25% for "large screen" browsers*/
    .large-3 {width: 25%}
    nav ul {margin-left: 2vw;}
    nav li {width:auto;}
    nav a {padding: .7rem 1rem;}
} /* end of medium media query */