body {
    height:100%;
    background-repeat: no-repeat;
    background-position: left middle;
    background-size:cover;
    
    font-family: 'Public Sans', sans-serif;
}

.narrowScreen {
    margin:0;
}

a img {
    border:0;
}

li {
    margin-top:0.2em;
    margin-bottom:0.2em;
}

h1, h2, h3, h4 {
    font-family: 'Public Sans Black', sans-serif;
    font-weight: 900;
}

h1 {
    font-size:30px;
    border-top:1px solid black;
}

h2 {
    font-size:20px;
}

hr {
   border: 0px;
   border-top: 1px solid black;
}


#menubar {
    font-family: 'Public Sans Bold', sans-serif;
    background-color:firebrick;
    color:white;
    padding: 0; /*hyperlinks themselves supply the padding*/
    padding-left:2em;
    opacity:0.8;

    font-weight:bold;

}

.wideScreen #menubar {
    margin-left: 25%; margin-top: 15%; margin-right:2em;
}

.narrowScreen #menubar {
    margin: 0;
}


#menubar .menuitem {
    text-transform: uppercase;

}

#menubar a {
    text-decoration: none;
}

#menubar a, #menubar .menuactiveitem span {
    display: inline-block;
    color: white;
    padding: 0.5em;
    padding-left:0.75em;
    padding-right:1.5em;
}

.wideScreen #menubar .menuactiveitem a, #menubar .menuactiveitem span {
    background: darkred;
}

.narrowScreen #menubar .menuactiveitem a, .narrowScreen #menubar .menuactiveitem span {
    background: linen;
    color: black;
}

#menubar a:hover {
    background:black;
}



#mainContent {
    background-color:rgba(255,255,255,0.8);
    /*opacity:0.8;*/
    padding:2em;
    border-radius:0em;
    overflow:hidden;
}

.wideScreen #mainContent {
    margin-left: 25%; margin-right:2em; margin-top:1em;
}

.narrowScreen #mainContent {

}

#placedContent img {
    margin:5px;
    opacity:0.9;
}

#subMenu {
    font-family: 'Public Sans Bold', sans-serif;
    font-size: small;
    font-weight:bold;
    display:block;
    margin-top:1.5em;
    margin-bottom: 1em;
    /*text-transform: uppercase;*/
}

#subMenu .menuitem {
    padding: 0.25em;
    border: 1px solid grey;
    margin-right: 1em;
    background:lightsteelblue;
    color:black;

    transition:border 0.2s;
}

#subMenu .menuactiveitem {
    border-left:0.5em solid grey;
}

#subMenu a {
    text-decoration: none;
    color:inherit;
}

#subMenu .menuitem:hover, #subMenu .menuitem:active {
    border-left:0.5em solid;
}