*	{ box-sizing: border-box; }

.floatleft {	float: left;
		padding-right: 20px;
		padding-bottom: 20px;	
	}

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

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

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

#heroguitar {	background-size: 100%;
		height: 250px;
		background-image:url(javajam-images/heroguitar.jpg);
		background-repeat: no-repeat;
	}
	
body 	{	background-image:url(javajam-images/background.gif);
		font-family: Verdana, Arial, sans-serif;
	}
	
main	{	background-color: #FEF6C2;
		margin-left: 200px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 2em;
	}
	
#wrapper {	width: 80%; 
		margin-right: auto;
		margin-left: auto;
		background-color: #231814; 
		min-width: 900px;
		max-width: 1280px;
		box-shadow: 4px 4px #221811;
	}

#mobile	{	display: none; }

#desktop{	display: inline; }

header, nav, main, footer {display: block;}
	
header	{	background-color: #D2B48C;
		background-image:url(javajam-images/javajamlogo.jpg);
		background-repeat: no-repeat;
		height: 150px;
	}
		
table	{	width: 90%;
		margin: auto;
		border-spacing: 0;
		backgroundcolor: #ffffcc;
	}	

table tr:nth-of-type(odd) { background-color: #d2b48c; }

table td, th	{	padding: 10px;		
		}	
		
h2, h3, p, ul, dl, section { padding-left: 3em; padding-right: 2em; color: #221811;}
	
h1 	{	padding-top: 45px;
		font-size: 3em;
		padding-left: 300px;
		color: #221811;
	}
	
h4 	{	background-color: #D2B48C;
		font-size: 1.2em;
		padding-bottom: 0px;
		text-transform: uppercase;
		border-bottom: 3px solid #221811;
		padding-left: 3em;
		padding-right: 2em;
		color: #221811;
		clear: left;
	}

nav 	{	float: left;
		width: 200px;
		text-align: center;
		font-weight: bold;
		font-size: 1.5em;
		padding-top: 30px;
	}
	
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: 0px;
	}

		
img	{	padding-right: 10px;
		padding-left: 10px;
	}
	
footer	{	clear: both;
		border-top-style: solid;
		background-color: #D2B48C;
		font-size: .60em;
		font-style: italic;
		text-align: center;
		padding-bottom: 10px;
	}
	
form	{	padding: 1em; }
	
label	{	float: left; 
		width: 8em;
		text-align: right; 
		padding-right: 1em;
		display: block;  
	 }

input, textarea	{	margin-bottom: 1em;
			display: block; }
		
#mySubmit	{	margin-left: 9.5em; }
		
#myPara		{	padding-left: 18px; }
	
@media only screen and (max-width: 1024px)
	{	body	{	margin: 0px;
				background-image: none; }
				
		#wrapper{	width: auto ;
				min-width: 0px;
				margin: 0px;
				padding: 0px;
				box-shadow: none; }
				
		header	{	border-bottom: 5px solid #FEF6C2;
			}
				
		h1	{	text-align: center;
				margin-top: 0px;
				margin-bottom: 1em;
				padding-top: 1em;
				padding-bottom: 1em;
				font-size: 2.5em;
			}
				
		nav	{	float: none;
				width: auto;
				padding-top: 0px;
				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: 0px;
				margin: 0px;
			}		
			
		#heroroad {	padding: 0px;
				margin: 0px;
			}

		#heromugs {	padding: 0px;
				margin: 0px;
			}

		#heroguitar {	padding: 0px;
				margin: 0px;
			}			
		main 	{	padding: 0px;
				margin: 0px;
			}

@media only screen and (max-width: 768px){
		header	{	background-color: #D2B48C;
				background-image:url(javajam-images/javajammini.jpg);
				background-repeat: no-repeat;
				height: 150px;
			}
			
		h1	{	text-align: center;
				padding-left: 0px;
				font-size: 2em;
			}
			
		nav	{	margin: 0px; }	
			
		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 0em;
				margin: 0.5em;			
			}
			
		.details {	padding-right: 0px;
				padding-left: 0px;
			}
			
		#heroroad {	background-image: none;
				height: auto;
			}

		#heromugs {	background-image: none;
				height: auto;
			}

		#heroguitar {	background-image: none;
				height: auto;
			}
		
		.floatleft {	padding-right: 0.5em;
				padding-left: 0.5em;
			}
		
		
		#mobile	{	display: inline; }
				
		#desktop{	display: none; }
}