* { box-sizing: border-box; }
header, nav, main, footer { display: block; }

body { background-color: #3F2860;
       color: #3F2860;
       font-family: Verdana, Arial, sans-serif;
        }

header { background-color: #9BC1C2;
         background-image: url(lilyheader.jpg);
         background-repeat: no-repeat;
         background-position: right;
         height: 150px; 
         }
table { align: center;
        width: 60%;
        border: 1px solid black	;
        border-color: #3F2860;
        border-collapse: collapse;
        margin-bottom: 1em; }
        
td,th { padding: 5px;
         border: 1px solid #3F2860; }
.altrow { background-color: #eaeaea; }
tr:nth-of-type(even){ background-color: #9BC1C2; }
caption { margin: 1em;
          font-size: 120%;
          }
h1 { padding-top: 50px;
     padding-left: 2em;
      }
nav { font-weight: bold;
      padding: 1em;
      float: left;
      width: 160px; }
nav a { text-decoration: none;
        display: block;
        text-align: center;
        font-weight: bold;
        border: outset 3px #CCCCCC;
        margin-bottom: 1em;
        padding: 1em;
         }
nav ul { padding-left: 0;
         list-style-type: none; 
         }
nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100; border: 3px inset #333333; }
.floatleft {float: left; 
           margin-right: 4em; 
           } 

.clear { clear: both; }
.studio { font-style: italic; }
footer { background-color: #9BC1C2;
         font-size: small;
         font-style: italic;
         text-align: center;
         padding: 1em; }
#wrapper { width: 80%; 
          margin-right: auto;
          margin-left: auto;
          background-color: #F5F5F5;
          min-width: 1200px;
          max-width: 1480px; }
#mobile { display: none; }
#desktop { display: inline; }
@media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0;}
#wrapper { width: 100%;
           min-width: 0;
           margin: 0;
           padding: 0; 
           }
header { padding-top: 1px; }
nav { float: none;
      width: auto;
      padding-left: 2em;
      }
nav a { padding: 0.2em;
        margin-left: 0.3em;
        float: left;
        width: 23%
        }
main  { padding-top: 2.5em;
        padding-bottom:2.5em;
        padding-right: 1em;
        margin: 0;
        font-size: 90%;
        float: clear;
        }
#hero { width: 100%;
        height: auto; 
        }
h2,h3,p,dl { padding-left: 2em;
             padding-right: 2em;
             }
main ul { margin-left: 2em; }
floatleft { margin-left: 2em;
            margin-bottom: 1em;
            }
clear { padding-left: 2em;}
}
@media only all and (max-width: 768px) {
h1 { font-size: 2em;
     padding-top: 0.25em;
     padding-left: 1.5em;
     width: 85%;
     }
nav a { padding: 0.5em;
        width: 45%;
        float: left;
        min-width: 6em;
        margin-left: 0.5em;
        }
main { padding-top: 0;}
floatleft { float: none;
            display: none; 
            }
#hero { display: none; }
footer { padding: 0.5em;
         margin: 0;
         }
#mobile { display: inline; }
#desktop { display: none; }    
}
main { padding-left: 2em;
       padding-right: 2em;
       padding-top: 1em;
       margin-left: 170px;
        }