/* filename: javajam.css */
/* coded by: Ryan Zurrin */
/* edited  : 3/10/19     */

* { box-sizing: border-box; }
#heroroad {
    background-image: url(pictures/heroroad.jpg);
    background-size: 100%;
    height: 175px;
    background-repeat: no-repeat;
}
#heromugs {
    background-image: url(pictures/heromugs.jpg);
    background-size: 100%;
    height: 175px;
    background-repeat: no-repeat;
}
#heroguitar {
    background-image: url(pictures/heroguitar.jpg);
    background-size: 100%;
    height: 175px;
    background-repeat: no-repeat;
}
body {
    background-image: url(pictures/background.gif);
    background-color: #fcebb6;
    color: #221811;
    font-family: Verdana, Arial, sans-serif;
}
header {
    background-color: #d2b48c;
    background-image: url(pictures/javajamlogo.jpg);
    background-position: left;
    background-repeat: no-repeat;
    height: 150px;
}
h1 { 
    padding-top: 45px;
    padding-left: 220px;
    font-size: 3em;
}
nav { 
    float: left;
    width: 200px;
    font-size: 1.5em;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;    
    padding-left: 5%;
}
nav a {
    text-decoration: none;    
}
nav ul {
    list-style-type: none;
    padding-left: 0;
}
footer { 
    border-top: 2px solid #221811;
    padding-bottom: 10px;
    background-color: #d2b48c;
    text-align: center;
    font-style: italic;   
    font-size: .60em;
}
h4 {
    border-bottom: 2px solid #221811;
    text-transform: uppercase;
    background-color: #d2b48c;
    font-size: 1.2em;
    padding-left: 0.5em;
    padding-bottom: 0;
    clear: left;
}
main {
    background-color: #fef6c2;
    margin-left: 200px;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0; 
    padding-bottom: 2em;    
}
/*main h2, h3, h4, p, div, ul,dl {
    padding-left: 3em;
    padding-right: 2em;
}*/
main h2, h3, h4, dl, p ,ul {
    padding-left: 3em;
    padding-right: 2em;
}
.details {
    padding-left: 20%;
    padding-right: 20%;
    overflow: auto;
}
.floatleft {
    float: left;
    padding-right: 2em;
    padding-bottom: 2em;
}
#wrapper { 
    background-color: #231814;
    min-width: 900px;
    max-width: 1280px;
    box-shadow: 1px 1px 1px #221814;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
img {
    padding-left: 10px;
    padding-right: 10px;
}
nav a:link { 
    color: #fef6c2
}
nav a:visited { 
    color: #c4a277;
}
nav a:hover { 
    color: #cc9933;
}
header, nav, main, footer{ 
    display: block; 
}