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

#wrapper { width: 80%;
           margin-right: auto;
           margin-left: auto;
	   background-color: #ede9dd;
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
	   box-shadow: 3px 3px 3px #000000;
}

body { background-image: linear-gradient(to top, #ffffff, #6a6a9c);
       color: #000000;
       font-family: Verdana, Arial, sans-serif;
}

header { background-color: #add8e6;
         background-image: url(images/banner6.jpg);
	 background-position: right;
         background-repeat: no-repeat;
	 height: 120px; 
         border-bottom: 2px ridge #330000;
         border-radius: 15px;
}

header h1 { text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            color: #000080;                               
}

nav { font-weight: bold; 
      padding: 1em;
      float: left;
      width: 160px;
}

nav a { text-decoration: none; 
        display: block;
	text-align: center;
	font-weight: bold;
	border: 3px #986fa8 dashed;
	padding: 1em;
        margin-bottom: 1em;
}

nav a:link { color: #3F2860; }
nav a:visited { color: #8DD88D; }
nav a:hover { color: #eb9dcb; 
             border: 3px #008080 dashed; }
nav ul { list-style-type: none; 
       padding-left: 0;
}

main { text-align: left;
       margin-left: 10em;
       margin-right: 5%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

h2 { text-align: center;
}

.center { display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.center2 { display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.center3 { display: block;
   margin-left: auto;
   margin-right: auto;
   width: 30%;
   height: 30%;
}

.center4 { display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.line { font-weight: bold;
        border-bottom: 2px dotted #008080;
}

.right {
    text-align: right;
    float: right;
}

aside { width: 17%;
        padding-left: 20px;
        padding-right: 12px;
        margin-left: 15px;
        margin-right: 15px;
        float: right;
        font-style: italic;
        background-color: lightpink;
        transform: rotate(4deg);
        box-shadow: 2px 2px 2px #000000;
}

#footer { background-color: #a49ab3;
         color: #FFFFFF;
         text-align: center;
         border-top: dashed 3px #000000;
         padding-bottom: 10px;
}

a { color: #0645AD;
    font-weight: bold;
    text-decoration: none; }
a:hover { color: #FF3EB0; }
a:visited { color: #309030; }

.bold { font-weight: bold; }


table { border: 1px solid #9090a3;
        width: 350px;
        border-spacing: 0;     
}

td, th { border: 1px solid #9090a3;
         padding: 0.5em;
}

.toprow { background-color: #f3e5ab;
}

.altrow { background-color: #c9e0f0;
}

.altrow2 { background-color: #FFFFFF;
}

.error { font-family: Arial, sans-serif;
         font-style: italic; 
         font-size: .90em;
         color: #FF0000; 
         margin-left: 1em; 
}

ul, li { margin-right: 10%; 
}

ul.a { list-style-type: circle;
}

form { background-color: #FFFFFF;
       width: 500px;
       margin: auto;
       padding: 5px;
       border: 1px solid #000000;
}

label { width: 15px;
        text-align: left;
        clear:left;
        padding-right: 5px;
        margin-top: 5px;
}

input { width: auto;
        margin-top: 5px;
        display: inline;
        clear: both;
}

textarea { min-width: 50%;
           max-width: 100%;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

@media only screen and (max-width: 480px) {
  header { background-image: none; padding: 0; height: 50px;            border-radius: 0; }
  header h1 { display: inline; margin-left: 15px; margin-top: 1px; border: 15px; }
  nav { float: none; width: 100%; margin-left: 10%; font-size: 90%;         padding: 0; }
  nav a { border: 1px solid #000000; background-color: #FFFFFF; margin: 0;  }
  nav a:hover { border: 2px dashed #000080; }
  nav li { padding: 0; }
  nav ul { text-align: center; padding: 0; }
  body { margin: auto; }
  aside { width: 40%; margin-bottom: 10px;}
  #wrapper { width: auto; }
  main { margin-left: 20px; }
  table { width: 250px; } 
  summary { font-size: 20px; }
  .embedtool {position: relative;height: 0;padding-top: 56%;overflow: hidden;max-width: 100%;} 
  .embedtool iframe, .embedtool object, .embedtool embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .embedtool .fluid-vids {position: initial !important }
  .iframe container { position: absolute; top: 0; left: 0; width: 50%; height: 50%; }
  form { width: 90%; font-size: 80%; }
  p { font-size: 90%; margin-left: 5px; }
  footer { font-size: 90%; }
}

@media only screen and (max-width: 1024px) {
  header { background-image: none; padding: 0; height: 50px; border-radius: 0; }
  header h1 { display: inline; margin-left: 15px; margin-top: 1px; border: 15px; }
  nav, nav li, nav ul { padding: 0; }
  nav { float: none; width: 100%; margin-top: 0; margin-left: 10%; font-size: 90%; padding: 0; }
  nav a  { border: 1px solid #000000; background-color: #FFFFFF; margin: 0; }
  nav a:hover { border: 2px dashed #000080; }
  nav ul { text-align: center; }
  body { margin: auto; }
  aside { width: 30%; }
  #wrapper { width: auto; }
  main { margin-left: 40px; }
  table { width: 250px; } 
  summary { font-size: 20px; }
  .embedtool {position: relative;height: 0;padding-top: 56%;overflow: hidden;max-width: 100%; } 
  .embedtool iframe, .embedtool object, .embedtool embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .embedtool .fluid-vids {position: initial !important}
  .iframe container { position: absolute; top: 0; left: 0; width: 50%; height: 50%; }
  form { width: 80%; }
  p { font-size: 90%; margin-left: 5px; }
  footer { font-size: 90%; }
}