body  { background-color: #6699ff;
        color: #d5e3ff;
		font-family: Verdana, Arial, sans-serif;
        background-image: url(gradientblue.jpg); }
header { background-color: #000066;
         color: #FFFFFF;
		 background-image: url(bigfish.gif);
         background-repeat: no-repeat;
         background-position: center }
h1  { text-align: center;
      font-size: 3em;
      padding: 10px;
      line-height: 150%;
      text-shadow: 3px 3px 5px #CCCCCC; }
nav  { font-weight: bold;
       float: left;
       width: 150px; }
nav ul  { list-style-type: none; }
nav a  { text-decoration: none; }
nav a:link  { color: #3262A3; }
nav a:visited  { color: #6699ff; }
nav a:hover { color: #CCCCCC; }
main  { margin-left: 180px;
        padding-right: 20px;
        padding-bottom: 20px; }
.category  { font-weight: bold;
             background-color: #FFFFFF;
			 color: #003366;
			 font-size: 1.1em;
             text-shadow: 1px 1px 1px #666 }
footer  { font-size: .70em;
          font-style: italic;
          padding: 10px;
          margin-left: 180px; }
footer nav  { text-align: left; }
#wrapper  { width: 80%;
            margin-right: auto;
            margin-left: auto;
            background-color: #FFFFFF;
            color: #000066;	}
#mobile  {display: none; }
#desktop  { display: inline; }
img  {border-style: none; }
header, nav, main, footer  { display: block; }
table  { border: 2px solid #000066; 
         border-collapse: collapse; }
td, th  { border: 1px solid #000066;
          padding: 0.5em; }
@media only screen and (max-width: 1024px) {
	body  { margin: 0;
	padding: 0; }
	#wrapper  { width: auto;
	min-width: 0;
	margin: 0; }
	h1  { margin: 0;
	text-align: center;
	font-size: 2em;
	line-height: 200%; }
	nav  { float: none;
	width: auto; }
	nav li  { display: inline-block; }
	nav a  { padding: 1em;
	border-style: none;
	font-size: 1.2em; }
	nav ul  { text-align: center;
	padding: 0;
	margin: 0; }
	main  { margin: 0;
	padding: 0em 1em;
	font-size: 90%;}
	dd  { margin-bottom: 1em;}
	footer  { margin: 0;}
}
@media only screen and (max-width: 768px) {
	header  {background-image: url(lilfish.gif);
    background-repeat: no-repeat;
    background-position: center }
	h1  { font-size: 1.5em;
	line-height: 120%; }
	nav a  { display: block;
	padding: 0.2em;
	font-size: 1.3em;
	border-bottom: 1px solid #330000; }
	nav li  { display: block; }
	nav ul  { text-align: left; }
	main  { padding-left: 0.4em; }
	.category  { text-shadow: none; }
	footer  { padding: 0; }
	#mobile  { display: inline; }
    #desktop  { display: none; }
}