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 30px 20px 20px;
	 margin-left: 150px;
	 background-color: #f2eab7;
	 color: #000000;
	 overflow: auto;}
.floatleft {float: left;
			padding-right: 20px;
			padding-bottom: 20px;}
.floatright {float: right;
			 padding-left: 20px;}
footer {background-color: #ccaa66;
        color: #000000;
		font-size: .60em;
		font-style: italic;
		text-align: center;
		padding-top: 20px; padding-bottom: 20px;
		clear: both;}
footer a:link {color: #ffffcc;}
footer a:visited {color: #f2eab7}
footer a:hover {color: #330000;}
#wrapper {width: 80%;
         margin-right: auto;
		 margin-left: auto;
		 background-color: #ffffcc;
		 min-width: 700px;
		 max-width: 1024px;
		 box-shadow: 5px 5px 5px #1e1e1e;}
.details {padding-left: 20%;
		 padding-right: 20%;
		 overflow: auto;}
img {border-style: none;}
#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;
					   box-shadow: none;}
		    header {background-image: url(images/javalogomobile.gif);
					background-position: center;
					background-repeat: no-repeat;
					height: 80px;
					}
			nav {float: none;
				 width: auto;
				 font-weight: bold;
				 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-top: .5em;
				padding-right: 0;
				padding-bottom: 0;
				padding-right: .5em;}
			.details {padding: 0;}
			.floatright {display: none;}
			.floatleft {padding-left: .5em; padding-right: .5em;}
			#mobile {display: inline;}
			#desktop {display: none;}
}
header, nav, main, footer {display: block;}