body, html {
  background-color:#7f9406;
    color:#3D1B00;
  font: 11pt 'PT Sans', sans-serif;
}
#pagewrapper {
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
}
header {
  margin-left:150px;
  z-index:2;
  padding: 10px 25px 10px 25px;
  height:100px;
  border-radius:0 50px 0 0;
  background:#00223D;
  border-bottom: 10px solid #FF5512;
  min-width:345px;

}
#logo {
  width:200px;
  z-index:4;
  height:40px;
  position:relative;
  left:-25px;
}
#logo:after {
  content:url('logo_for_website.png');
}
nav {
  width:110px;
  float:left;
  background:#85FDFF;
  border-radius:0 0 0 30px;
  font-size:12pt;
  padding:50px 20px 20px 20px;
}

nav ul {
  margin:0;
  padding:0;
}
nav li {
  margin:-3px;
  padding:0;
  list-style-type:none;
  height:30px;
  color:#00223D;
  font-weight:bold;
  text-transform:lowercase;
}
nav li a:link, a:visited {
  color:#00223D;
  text-decoration:none;
}
nav li a:hover, a:active {
  margin-left:-4px;
  color:#FF5512;
  border-left:4px solid white;
}
header h1 {
   z-index:2;
  font: 47pt 'Mystery Quest', cursive;
  color:#71EBE5;
  margin:0;
  padding:0 0 0 30px;
}
h2 {
  font: 28pt 'Mystery Quest', cursive;
  color:#00223D;
  margin:25px 0 -12px 0;
}
h2:before {
  content:"_";
}
h3 {
  font:18pt 'Mystery Quest', cursive;
  color:#FF5512;
  margin:25px 0 -12px 0;
}
h4 {
  font:12pt 'PT Sans', sans-serif;
  color:#FF5512;
  margin:25px 0 -12px 0;
}
aside {
  float:right;
  width:200px;
  border:2px dashed #FF5512;
  border-radius:0 50px 0 0;
  margin:10px;
  padding:10px;

}
#content a:link, a:visited {
  color:#008FAB;
}
#content a:hover, a:active {
  color:#FF5512;
}
#content {
  margin-left:130px;
  padding:10px 25px 2px 25px;
  background-color:#FFFFFF;
  border-left: 20px solid #004D26;
  border-bottom: 5px solid #004D26;
  border-radius:0 50px ;
  min-width: 345px;

}
#content p {
  margin-left:25px;
}
#content ul {
  margin-left:25px;
}
#content li {
  list-style-type:none;
}
#content li:before {
  content: "\2022 ";
  margin-left:-40px;
  margin-right:10px;
  color:red;
}
footer {
  color:#004D26;
  font-size:10pt;
  text-align:right;
  margin-top:50px;
}

#grouppic{
	margin-left:30px;
	border: solid #004D26 1px;
}

@media screen and (max-width: 781px) {
  html, body {
    margin:0;
  }
  #logo {
    display:none;
  }
  #logo:after {
  content:none;
  }
  header {
    height:50px;
    margin-left:0;
    padding:5px;
    }
  header h1 {
    padding:0;
    margin:-20px 10px 0 0;
    font-size:24pt;
  }
  header h1:before {
    height:10px;
    margin-right:10px;
    content:url('logo_for_website_small.png');
  }
  h2 {
    font-size:18pt;
  }
  h3 {
    font-size:16pt;
  }
  nav {
    float:none;
    width:100%;
    padding:10px;
    font-size:10pt;
  }
  nav ul li {
    display:inline-block;
    margin:0 5px;
  }
  #content {
    font-size:10pt;
    margin-left:0;
    padding-left:15px;
    padding-right:10px;
    border-left:10px solid #004D26;
  }
  #content p {
    margin-left:10px;
  }

.comp{
	color:black;
}

.lesson{
	color:black;
}

}