* { box-sizing: border-box; }
header, nav, main, footer { display: block; }
body { background-color: #FCEBB6; 
      color: #221811;
      font-family: Verdana, Arial, sans-serif;
	  background-image: url(background.gif);
}
header { background-color: #D2B48C;
        height: 150px;
        background-image: url(javajamlogo.jpg);
         background-repeat: no-repeat;		
}
h1  { padding-top: 45px;
    padding-left: 220px;
    font-size: 3em;
}
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;
}
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; }
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; }

footer { background-color: #D2B48C;
       font-size: .60em;
	   font-style: italic;
	   text-align: center;
}
#wrapper { width: 80%;
           margin-right: auto;
		   margin-left: auto;
		   background-color: #231814;
		   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;
}
#heroroad { background-image: url(heroroad.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#heromugs { background-image: url(heromugs.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#heroguitar { background-image: url(heroguitar.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#mobile 
{display:none;}

#desktop
{display:inline;}

@media only screen and (max-width:1024px) {
	body { margin:0px; 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 { padding:0; margin:0;}
main {padding:0; 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 solid #fef6c2}

 nav li {display: block;}
 
 main {padding-top: 1px}
 
 h2 { padding:0.5em 0 0 0.5em;
     margin-right: 0.5em; }
 .details { padding-left:0px
 padding-right:0px;}
 
 #heroroad, #heromugs, #heroguitar { padding:0; margin:0;}
main {background-image:none; height:auto; }
 
.floatleft { float:left;
padding-right:2em;
padding-bottom:2em;}
}

#mobile { display:inline;}

#desktop { display:none;}





	


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