header, nav, main, footer {display: block;}
*{box-sizing: border-box;}

header{
background-color: #D2B48C;
line-height: 150px;
}


body{
background-image: url(background.gif);
background-color: #FCEBB6;
color: #221811;
font-family: Veranda, Arial, serif;
}



main{
padding-bottom: 2em;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-left: 200px;
background-color: #fef6c2
}

main h2{
padding-left: 3em;
padding-right: 2em;
}

main h3{
padding-left: 3em;
padding-right: 2em;
}

main h4{
padding-left: 3em;
padding-right: 2em;
}

main p{
padding-left: 3em;
padding-right: 2em;
}

main div{
padding-left: 3em;
padding-right: 2em;
}

main ul{
padding-left: 3em;
padding-right: 2em;
}

main dl{
padding-left: 3em;
padding-right: 2em;
}


h1{
background-color: #D2B48C;
line-height: 200%;
background-image: url(javajamlogo.jpg);
background-repeat: no-repeat;
font-size: 3em;
padding-top: 45px;
padding-left: 220px;
margin-bottom: 0;
}

h4{
background-color: #D2B48C;
font-size: 1.2em;
padding-left: .5em;
padding-bottom: 0;
border-bottom: 1px solid #000000;
text-transform: capitalize;
clear: left;
}

nav{
text-align: center;
padding-top: 10px;
font-size: 1.5em;
font-weight: bold;
float: left;
width: 200px;	
}

nav a:link{color: #fef6c2;}

nav a:visited{color: #d2b48c;}

nav a:hover{color: #cc9933;}

nav a{text-decoration: none;}

nav ul{ 
list-style-type: none;
padding-left: 0;
}

footer{
background-color: #D2B48C;
font-size: .60em;
font-style: italic;
text-align: center;
padding-bottom: 10px;
border-top: 2px solid #221811;
}

.details{
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}

.floatleft{
float: left;	
padding-bottom: 2em;
padding-right: 2em;	
}

img{
padding-left: 10px;
padding-right: 10px;	
}

#wrapper{
margin-left: auto; margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 5px 5px;
}

#heroroad{
background-image: url(heroroad.jpg);
background-size: 100%;
height: 250px;
background-repeat: no-repeat;
}

#heromugs{
background-image: url(heromugs.jpg);
background-size: 100%;
height: 250px;
background-repeat: no-repeat;
}

#heroguitar{
background-image: url(heroguitar.jpg);
background-size: 100%;
height: 250px;
background-repeat: no-repeat;
}

#mobile{display: none;}
#desktop{display: inline;}

@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{}
	h1{border-bottom: 5px solid #fef6c2; margin-top: 0; margin-bottom: 0; padding-top: 1em; padding-bottom: .5em; 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{padding: 0; margin:0;}
	#heromugs{padding: 0; margin:0;}
	#heroguitar{padding: 0; margin:0;}
	main{margin: 0; font-size: 90%}
}

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