header, main, nav, footer, figure, figcaption { display: block; }
body { background-color: #F5F5DC;
      color: #2E0000;
	  font-family: Verdana, Arial, sans-serif; 
	    background-image: url(javabackground.webm);
}
#wrapper { width: 80%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #E2D2B0;
		   min-width: 960px;
		   max-width: 2048px;
		   box-shadow: 5px 5px 5px #2E0000;
}
header { background-color: #D2B48C;
}
h1 {  font-family: Georgia, "Times New Roman", serif;
height: 100px;
    background-image: url(javalogo.webm);
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin: 0;  }
nav { font-weight: bold; 
	  padding: 10px;
	  float: left;
	  width: 160px;
	  text-align: center;
}
nav ul { list-style-type: none;
       padding-left: 0;
	   font-size: 1.2em;
}
nav a{ text-decoration: none; }
nav a:link { color: #795240; }
nav a:visited { color: #A58366; }
nav a:hover { color: #F5F5DC; }
main { padding: 20px; 
      display: block;
	  background-color: #F5F5DC;
	  margin-left: 175px;}
main img { float: left;
         padding-right: 2em;
}
main div { overflow: auto;
           padding-left: 5%;
		   padding-right: 5%;
		   font-size: 90%;
}
h2 {  font-family: Georgia, "Times New Roman", serif;  }
h3 {  background-color: #E6D6A9;
     text-transform: uppercase; }
dt { font-weight: bold; }
main ul { list-style-image: url(marker.webm);
        list-style-position: inside; }
#hero { background-image: url(heroroad.webp);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   color: #F5F5DC;
}
section { margin-left: 20%;
         margin-right: 20%;
		 overflow: auto;
		 font-size: 90%;
}
footer { background-color: #D2B48C;
       color: #000000;
	   font-size: .60em;
	   font-style: italic;
	   text-align: center;
	   padding: 10px;
}	
footer a:link { color: #2E0000; }
footer a:visited { color: #000000; }
footer a:hover { color: #F5F5DC; }   
#mobile { display: none; }
#desktop { display: inline; }
table { margin: auto;
      width: 80%;
}
td, th { padding: 10px; }
tr:nth-of-type(odd) { background-color: #D2B48C; }
label
{
    float: left;
    display: block;
    text-align: right;
    width: 120px;
    padding-right: 20px;
}
input, textarea
{
    display: block;
    margin-bottom: 20px;
}
input[type="submit"]
{
    margin-left: 139px;
}
@media only screen and (max-width: 64em) {
	body { margin: 0;
	      background-image: none;
		  background-color: #D2B48C;
	}
	#wrapper { min-width: 0;
			  width: auto;
			  box-shadow: none;
	}
	h1 { margin: 0;
	    background-image: url(javalogomobile.webm);
	}
	main { margin-left: 0; }
	nav { float: none; 
	     width: auto;
		 padding: 0;
	}
	nav ul { text-align: center; }
	nav li { display: inline;
	      padding: 0 0.75em;
	}
}
@media only screen and (max-width: 37.5em) {
	nav li { display: inline-block;
	      width: 5em;
		  font-size: 120%;
		  text-align: center;
		  box-shadow: 2px 2px 2px #330000;
		  background-color: #F5F5DC;
		  margin: 1%;
		  padding: 2.5%;
	}
	nav a { display: block; }
	nav a:hover { color: #333300; }
	main a:link { color: #FFFFFF; }
	main a:visited { color: #EAEAEA; }
    main a:hover { color: #FFD700; }	
	section { margin: 0; }
	#hero { height: auto; }
	section img { display: none; }
	#mobile { display: inline; }
	#desktop { display: none; }
    label{float: none; text-align: left;}
    input[type="submit"] {margin-left: 0;}
}