/*Japheth Hurlbut*/
*{
    box-sizing: border-box;
}
header, nav, main, footer {
    display: block;
}
body{
    background-image: url(background.gif);
    background-color: #fcebb6;
    color: #221811;
    font-family: verdana, arial, helvetica;
}
header{
    background-color: #d2b48c;
    height: 150px;
    background-image: url(javajamlogo.jpg); 
    background-repeat: no-repeat;
}
main{
    padding: 0 0 2em 0;
    margin-left: 200px;
    background-color: #FEF6C2;
    display: block;
}
main h2, main h3, main h4, main p, main div, main ul, main dl{
    padding-left: 3em;
    padding-right: 2em;
}
h1{
    padding-top: 45px;
    padding-left: 220px;
    font-size: 3em;
}
nav{
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    padding-top: 10px;
    float: left;
    width: 200px;
}
nav a{
    text-decoration: none;
}
nav a:link { 
    color: #fef6c2; 
}
nav a:visited { 
    color: #D2B48C; 
}
nav a:hover { 
    color: #CC9933; 
}
nav ul { 
    list-style-type: none;
    padding-left: 0; 
}
h4{
    background-color: #d2b48c;
    font-size: 1.2em; 
    padding-left: .5em; 
    padding-bottom: .25em;
    text-transform: uppercase;
    border-bottom: solid 2px #231814;
    padding-bottom: 0; 
    clear:left;
}
footer{
    background-color: #d2b48c;
    font-size: .60em;
    font-style: italic;
    text-align: center;

    }
#wrapper{
    background-color: #231814;
	margin-left:auto;
	margin-right:auto;
    width: 80%;
    min-width: 900px;
    max-width: 1280px;
    box-shadow: 3px 3px 3px #666666;
}
.details{
    padding-left: 20%;
    padding-right: 20%;
    overflow:auto;
}
img{
    padding-left: 10px;
    padding-right: 10px;
}
audio{
    display: block;
    margin-top: 1em;
}
#heroroad{
   background-size:100% 100%; /*Ch. 6 errors to be reviewed*/
   background-image: url(heroroad.jpg); 
   height: 250px;
}
#heromugs{
    background-size:100% 100%; 
    background-image: url(heromugs.jpg); 
    height: 250px;
}
#heroguitar{
    background-size:100% 100%; 
    background-image: url(heroguitar.jpg); 
    height: 250px;
}
#herojobs{
    background-size:100% 100%;
    background-image: url(herojobs.jpg); 
    height: 250px;
}
#herocouch{
    background-size:100% 100%; 
    background-image: url(herocouch.jpg); 
    height: 250px;
}
.floatleft{
    float: left;
    padding-right: 2em;
    padding-bottom: 2em;
}
#mobile { 
    display: none; 
}
#desktop { 
    display: inline; 
}
table { 
    margin: auto;
    width: 90%;
    border-spacing: 0;
    background-color: #fef6c2; 
}
td, th { 
    padding: 10px;
}
tr:nth-of-type(odd) { 
    background-color: #D2B48C; }
form{
    padding: 2em; 
}
label{
    float: left;
    display:block;
    text-align: right;
    width: 8em;
    padding-right: 1em;
}
input, textarea { 
    display: block;
    margin-bottom: 1em; 
}
#mySubmit{
    margin-left: 9.5em;
}
.item{
    background-color:#FAF9F7;
    margin: 2em 3em 2em 3em;
    width: 80%;
    padding: 1em;
    overflow: auto;
}

@media only screen and (max-width: 1024px) {
	body { 
          margin: 0;
          background-image: none;
         }  
	#wrapper { 
        width: auto;
		min-width: 0;
        margin: 0;
        padding: 0;
		box-shadow: none; }
			  
	header { 
        border-bottom: 5px solid #FEF6C2;
    }
    h1{
        margin-top: 0;
        margin-bottom: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        font-size: 2.5em;

    }	   
	nav { 
        float: none;
		width: auto;
		padding-top: 0;
        margin: 10px; 
        font-size: 1.3em;
    }
	nav li { 
        display: inline-block; 
    }
	nav a { 
        padding: 1em;
        width: 8em;
        font-weight: bold;
        border-style: none; 
    }	  
	nav ul { 
        padding: 0;
        margin: 0; 
    }
    #heroroad, #heromugs, #heroguitar, #herojobs, #herocouch{
        margin: 0;
        padding: 0;            
    }	   
	main { 
		  margin: 0;
          font-size: 90%; }	

}
@media only screen and (max-width: 768px) {
    header{
        background-image:url(javajammini.jpg);
        height:128px;
    }
    h1{
        font-size: 2em;
        text-align: center;
        padding-left: 0;
    }
    nav{
        margin:0;
    }
	nav a { 
        display: block;
		padding: 0.2em;
		width: auto;
		border-bottom: 1px;
        border-bottom-color: #FEF6C2;
    }  
	nav li { 
        display: block; 
    }
	main{
        padding-top: 1px;
    }
	h2 { 
        padding: 0.5em 0 0 0.5em;
        margin-right: 0.5em; 
    }	
	details { 
        padding-left: 0;
        padding-right: 0;
    }
    #heroroad, #heromugs, #heroguitar, #herojobs, #herocouch{
       background-image: none;
       height: auto;            
    }	
    .floatleft { 
        padding-left: 0.5em;
        padding-right: 0.5em; 
    }   		
	#mobile { 
        display: inline; 
    }
	#desktop { 
        display: none; 
    }
}