body { background-image: url(gradientblue.jpg);
      color: #d5e3ff;
      font-family: Verdana, Arial, sans-serif;}

header { background-color: #000066;
        background-image: url(bigfish.gif);
        color: #FFFFFF;
        background-position: center;
		background-repeat: no-repeat;}

h1        { text-align: center;
        font-size: 3em;
        padding: 10px;
        line-height: 150%;
        text-shadow: 3px 3px 5px #CCCCCC; }

nav      { float: left;
        width: 150px;
 }
		
nav ul {list-style-type: none;}

nav a { text-decoration: none;}

nav a:link { color: #3262A3;}

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             { padding: 10px;
             font-size: 0.70em;
             font-style: italic;
			 margin-left: 180px;
			 clear: both;}			 
			 
#wrapper { margin-left: auto;
           margin-right: auto;
		   width: 80%; 
		   min-width: 700px;
		   max-width: 1024px;
		   background-color: #FFFFFF;
		   color: #000066;
		   }
		  
img            { border-style: none; }

footer nav   { text-align: left; }

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

table { border: 2px solid #0000A0;
border-collapse: collapse;}

th, td { padding: 0.5em;
border: 2px solid #0000A0;}

#mobile { display: none; }

#desktop { display: inline; }

label { float: left; display: block; text-align: right; width: 8em; padding-right: 10px; }

input, textarea { display: block; margin-bottom:1em;}

#mySubmit { margin-left: 10em; }

video { float: right; margin-left: 20px; margin-right: 20px;}

.shop { width: 40%;
float: left;
padding: 1em;}


@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; 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; margin: 0; padding: 0;}
	
	main { margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 1em; padding-right: 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-position: center; background-repeat: no-repeat;}
	
	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;}
	
}