/* Basic CSS */
* {box-sizing:border-box;}

header, nav, main, footer {display:block;}	

h1 {
		font-size:3em;
		padding-top:45px;
		padding-left:220px;
	}
	
h4 {
	background-color:#d2b48c;
	font-size:1.2em;
	padding-left:10px;
	text-transform:uppercase;
	border-bottom:2px solid #221811;
	clear:left;
}

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

body {
		background-color:#FCEBB6;
		background-image:url(images/background.gif);
		color:#221811;
		font-family:Vernada, Arial, sans-serif;	
	}
	
header {
		background-color:#D2B48C;
		height:150px;
		background-image:url(images/javajamlogo.jpg);
		background-repeat:no-repeat;
	}

nav {
		text-align: center;
		font-size:1.5em;
		font-weight: bold;
		padding-top:10px;
		float:left;
		width:200px;
}
	
main {
	padding-bottom:2em;
	margin-left:200px;
	background-color:#fef6c2;
	padding-left:0;
	padding-right:0;
	padding-top:0.1px;
}

table {
	   width:90%;
	   margin:0 auto;
	   border-spacing:0;
	   background-color:#ffffcc;}

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

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


/* Main Area */

main h2, main h3, main h4, main p, main div, main ul, main dl {
       padding-left: 3em;
       padding-right:2em;}

#mobile {display:none;}
#desktop {display:inline;}
/* Nav Area */

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

/* Home Page */

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

/* Menu Page */

#heromugs {background-image:url(images/heromugs.jpg);
		   background-size:100% 100%;
		   background-repeat:no-repeat;
		   height:250px;}
		   
td, th {padding:10px;
		}
		
tr:nth-of-type(odd) {background-color:#d2b48c;
					}
		   
/* Music Page */

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

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

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

/* Job Page */

form {padding:2em;}

label {display:block;
	   float:left;
	   padding-right:1em;
	   text-align:right;
	   width:8em;
	   }

input, textarea {display:block;
				 margin-bottom:1em;}
				 
#mySubmit {margin-left:9.5em;}


/* For Tablet display */
@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: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 {margin:0; padding:0;}
	main {padding:0 0 1px 0; margin:0; font-size:90%;}
	dl {margin-bottom:0; padding-bottom:15px;}
	table {margin-bottom:15px;}

}

/* For Smartphone display */
@media only screen and (max-width:768px){
	header {background-image:url(images/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:0px;padding-left:0.5em;margin-right:0.5em;}
	.details {padding-left:0;padding-right:0;}
	#heroroad, #heromugs, #heroguitar {background-image:none;height:auto;}
	.floatleft {padding-left:0.5em;padding-right:0.5em;}
	#mobile {display:block;}
	#desktop {display:none;}
	dl {margin-bottom:0; padding-bottom:15px;}
	table {margin-bottom:15px;}
}