*  {	box-sizing:  border-box; }


body  {  background-color:  #FCEBB6;
	color:  #221811; 
	font-family:  Arial, Verdana, sans-serif;
	background-image:  url("background.gif"); 
 }
 
 #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;
 }
 
 
 header  {  background-color:  #D2B48C;
 	    height:  150px;
 	    background-image:  url("javajamlogo.jpg");
 	    background-repeat:  no-repeat;  }
 	    
 main  {	padding-left:  0;
	padding-right:  0;
	padding-bottom:  2em;  	
	padding-top:  0;
	margin-left:  200px;
	background-color:  #FEF6C2;  }
	
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;
            
	     }
	     
h4     {	background-color:  #D2B48C;
	font-size:  1.2em;
	padding-left:  .5em;
	padding-bottom:  0;
	text-transform:  uppercase;
	border-bottom:  solid 2px #221811;
	clear: float;
	  }
	     
	     
dt {font-weight:bold;}	



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

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;  }
            
            

footer {	background-color:  #D2B48C;
	text-align:  center;
	font-size:  .60em; 
	font-style:  italic; 
	padding-bottom:  10px;
	border-top:  2px solid #221811;
	 }	     
	     
#wrapper {   width:  80%;
	     margin-left: auto;
	     margin-right:  auto; 
	     background-color:  #231814;
	     min-width:  900px;
	     max-width:  1280px;
	     box-shadow:  3px 3px 3px #333;
  }	
       
.details  {	padding-left:  20%;
	padding-right:  20%; 
	overflow:  auto; }
	
img { 	padding-left:  10px;
	padding-right:  10px;
	}
	
header, nav, main, footer {  display:  block;  }

#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  {	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 {  	padding:  0;
			margin:  0;  }
	
	#heromugs {  	padding:  0;
			margin:  0;  }
						 														 
	#heroguitar {  	padding:  0;
			margin:  0;  }
			
	main  {		font-size:  90%;
			margin:  0; }
	
}

@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-top:  0.5em;
			padding-right:  0;
			padding-bottom:  0;
			padding-left:  0.5em;
			margin-right:  0.5em;  }
			
	.details  {	padding-right:  0;
			padding-left:  0;  }
	
	#heroroad  {	background-image:  none; 
			height:  auto;}
	
	#heromugs  {  	background-image:  none; 
			height:  auto;
	}
	
	#heroguitar  { 	background-image:  none; 
			height:  auto;
	          }
	
	.floatleft  {	padding-left:  0.5em;
			padding-right: 0.5em; 
					
			 }
			 
	#mobile  {	display:  inline;  }
	
	#desktop  {	display:  none;  }		 
			          
	          
			
							
			

}