* { box-sizing: border-box; }
body { background-color: #FCEBB6;
			background-image: url(background.gif);
			color: #221811; 
			font-family: Verdana, Arial, sans-serif; }
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: 0;
		text-transform: uppercase;
		border-bottom: 2px solid #221811; }
.clearfloat { clear: left; }
main { padding-left: 0;
		   padding-right: 0;
		   padding-bottom: 2em;
		   display: block;
		   margin-left: 200px;
		   padding-top: 0;
		   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; }
img { padding-left: 10px;
		 padding-right: 10px; }
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; 
			color: #221811; 
			font-size: .60em;
			font-style: italic;
			text-align: center;
			padding-bottom: 10px;
			border-top: 2px solid #221811; }
header, nav, main, footer { display: block; }
#wrapper { margin-left: auto;
				  margin-right: auto;
				  width: 80%;
				  background-color: #231814;
				  min-width: 900px; max-width: 1280px;
				  box-shadow: 5px 5px 5px #1e1e1e; }
.details { padding-left: 20%;
				padding-right: 20%;
				overflow: auto; }
#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; }
#herojobs { background-image: url(herojobs.jpg);
					background-size: 100%;
					height: 250px;
					background-repeat: no-repeat; }
#herocouch { background-image: url("herocouch.jpg");
					background-size: 100%;
					height: 250px;
					background-repeat: no-repeat; }
.floatleft { float: left;
				padding-right: 2em;
				padding-bottom: 2em; }
#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; }
			#herojobs { padding: 0;
								margin: 0; }
			#herocouch { 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 { 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-left: 0;
						   padding-right: 0; }
			#heroroad { background-image: none;
								height: auto; }
			#heromugs { background-image: none;
								height: auto; }
			#heroguitar { background-image: none;
								height: auto; }
			#herojobs { background-image: none;
								height: auto; }
			#herocouch { background-image: none;
								height: auto; }
			.floatleft { padding-left: 0.5em;
							padding-right: 0.5em; }
			#mobile { display: inline; }
			#desktop { display: none; }
}
table { width: 90%;
			margin: auto;
			border-spacing: 0;
			background-color: #fef6c2; }
td, th { padding: 10px; }
tr:nth-of-type(odd) { background-color: #D2B48E; }
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; }
audio { display: block;
			margin-top: 1em; }
.item { background-color: #FAF9F7;
			margin: 2em 3em;
			width: 80%;
			padding: 1em;
			overflow: auto;
}