body {background-color: #ffffcc;
	 background-image: url(images/background.gif);
	 color: #330000;
	 font-family: Verdana, Arial, sans-serif;}

header {background-color: #ccaa66;
	    background-image: url(images/javalogo.gif);
		background-position: center;
		background-repeat: no-repeat;
		height: 100px;
		color: #000000;}
h1 {margin: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;}

h2 {text-transform: uppercase;
	background-color: #ffffcc;
    color: #663300;
	font-size: 1.2em;
    border-bottom: 1px solid #000000;
	padding: 5px 0 0 5px;
	margin-right: 20px;
	clear: left;}
nav {text-align: center;
	 float: left;
	 width: 100px;
	 font-weight: bold;
	 padding-top: 10px;}

nav a {text-decoration: none;
	   padding-bottom: 15px;}
	   
nav a:link {color: #996633;}
nav a:visited {color: #CCAA66;}
nav a:hover {color: #330000;}
nav ul {list-style-type: none;}

main{padding: 10px 20px 30px 20px;
	 margin-left: 150px;
	 background-color: #f2eab7;
	 color: #000000;
	 /*overflow: auto;*/}

.floatleft {float: left;
			padding-right: 20px;
			padding-bottom: 20px;}
.floatright {float: right;}
.clearleft {clear: left;
			margin: 1em;}
footer {background-color: #ccaa66;
        color: #000000;
		font-size: .60em;
		font-style: italic;
		text-align: center;
		padding: 20px;
		clear: both;}
footer a:link {color: #ffffcc;}
footer a:visited {color: #f2eab7}
footer a:hover {color: #330000;}
label {float: left;
       display: block;
	   text-align:right;
	   width: 8em;
	   padding-right: 20px;}
input, textarea {display: block;
				 margin-bottom: 1em;}
#mySubmit {margin-left: 12em;}
#wrapper {width: 80%;
         margin-right: auto;
		 margin-left: auto;
		 background-color: #ffffcc;
		 min-width: 700px;
		 max-width: 1024px;
		 box-shadow: 3px 3px 3px #333333;}
.details {padding-left: 20%;
		 padding-right: 20%;
		 overflow: auto;}
img {border-style: none;}
#mobile {display: none;}
#desktop {display: inline;}

audio {display: block;
	   margin-top: 1em;}

table {width: 90%; margin: auto; border-spacing: 0; background-color: #ffffcc;}
td, th {padding: 10px;}
tr:nth-of-type(odd) {background-color: #ccaa66;}
td:first-of-type {font-weight: bold;}

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

@media only screen and (max-width: 1024px) {
  body { margin: 0; background-image: none; }
  #wrapper { width: auto; min-width: 0; margin: 0; box-shadow: none; }
  header { background-image: url(images/javalogomobile.gif);
         background-position: center;
		 background-repeat: no-repeat;
		 height: 80px; }
  nav { float: none; width: auto; padding-top: 0; margin-top: 0; }
  nav li { display: inline-block; }
  nav a { padding: 1em; font-size: 1.3em; width: 8em; font-weight: bold; border-style: none; }
  nav ul { padding: 0; margin: 0; }
main { padding: 2em; margin: 0; font-size: 90%; }}

@media only screen and (max-width: 768px) {
  nav a { display: block; padding: 0.2em; width: auto; border-bottom: 1px solid #330000; }
  nav li { display: block;  }
  h2 { padding: 0.5em 0 0 0.5em; margin-right: 0.5em; }
  .details { padding-left: 0; padding-right: 0; }
  .floatright { display: none; }
  .floatleft { padding-left: 0.5em; padding-right: 0.5em; }
  #mobile { display: inline; }
  #desktop { display: none; }}