* { box-sizing: border-box; }
header, nav, main, footer { display: block; }
body { background-color: #5280C5;
     background-image: url(gradientblue.jpg); 
      color: #003366 ;
	  font-family: Verdana, Arial, sans-serif;
}
header { background-color: #000066;
       color: #F0F0F0;
	   background-image: url(bigfish.gif);
	   background-repeat: no-repeat;
	   background-position: center;
	   text-align: center;
}
h1 { line-height: 250%;
 	margin-bottom: 0;
	font-size: 3em;
	padding: .2em;
	text-shadow: 3px 3px 3px #CCCCCC;

}
nav { font-weight: bold;  
     padding: 5px;
	 float: left;
	 width: 180px;
}
nav ul { list-style-type: none; }
nav a { text-decoration: none; }
nav a:link { color: #000066; }
nav a:visited { color: #5280C5; }
nav a:hover { color: #3262A3; } 
.category { font-weight: bold;
			color: #5280C5;
			 font-family: Georgia, "Times New Roman", serif; 
			 text-shadow: 1px 1px #667;
}
img { border-style: none; }
dt { font-weight: bold;
     font-size: 1.1em;
	 color: #5280C5;
     font-family: Georgia, "Times New Roman", serif;	 
}
main { padding-left: 2em;
      padding-right: 2em;
	  margin-left: 180px;
	  background-color: #FFFFFF;
	 border: 1px solid #AEC3E3;

}
footer { font-size: .70em;
       font-style: italic;
	   text-align: center;
	   background-color: #AEC3E3;
	   margin-left: 180px;
	   padding: 1em;
}

#wrapper { width: 80%;
           margin-right: auto;
		   margin-left: auto;
		   background-color: #F0F0F0;
		   min-width: 700px;
}
#mobile { display: none; }
#desktop { display: inline; }
@media only screen and (max-width: 1024px) {
		body { margin: 0;
		      padding: 0;
			  background-color: white;
			  background-image: none; }
		#wrapper { width: auto; 
		           min-width: 0; 
				   margin: 0; }
		h1 { margin: 0;
		    font-size: 1.8em;
			line-height: 200%; }
		nav { float: none;
		     width: auto; 
			 padding: 0;}
		nav li { display: inline-block; }
		nav a {  padding: 1em;
			   font-size: 1.2em; }
		nav ul { text-align: center; 
			   padding: 0;
			   margin: 0; }
		main { font-size: 90%;
		       margin: 0;
			   padding-left: 2em; }
		footer { margin: 0; }
}
@media only screen and (max-width: 768px) {
		header { background-image: url(lilfish.gif); }
		h1 { font-size: 1.5em;
             line-height: 120%;}
		nav a { display: block;
		      padding: 0.2em;
			  font-size: 1em;
			  border-bottom: 1px solid #330000; }
		nav li { display: block; }
		nav ul { text-align: left; }
		main { padding-left: 1em; }
		.category { text-shadow: none; }
		#mobile { display: inline; }
		#desktop { display: none; }
}