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; }
h1 {padding-top: 50px;
	padding-left: 2em; }
nav { font-weight: bold; 
	padding: 1em; 
	float: left;
	width: 160px; }
* { box-sizing: border-box; }
nav a { text-decoration: none; 
	display: block;
	text-align: center;
	font-weight: bold;
	border: 3px outset #CCCCCC;
	margin-bottom: 1em;
	padding: 1em; }
nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover {color: #A26100; border: 3px inset #333333; }
nav ul {list-style-type: none;
	padding-left: 0; }
main { padding-left: 1em;
	padding-right: 1em; 
	margin-left: 170px;
	padding-top: 1em; }
.studio { font-style: italic; }
footer { background-color: #9bc1c2;
	font-size: .60em;
	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; }
#floatleft {float: left;
	margin-right: 4em; }
#clear { clear: both; }
#mobile { display: none; }
#desktop { display: inline; }
header, nav, main, footer { display: block; }
@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; }
h1 { padding-top: 1em; }
nav { float: none;
	width: auto;
	padding-left: 2em; }
nav a { padding: .2em;
	margin-left: .3em;
	float: left;
	width: 23%; }
main { padding-top: 2.5em;
	padding-left: 1em;
	padding-right: 1em;
	margin: 0;
	clear: both;
	font-size: 90%; }
#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: .25em;
	padding-left: 1.5em;
	width: 85%;
	text-align: center; }
nav a {  padding: .5em; 
	width: 45%;
	float: left;
	margin-left: .5em;
	min-width: 6em; }
#floatleft { float: none;
	display: none; }
#hero { display: none; }
footer { padding: .5em;
	margin: 0; }
#mobile { display: inline; }
#desktop { display: none; }
}