/* all the menu stuff */

  nav {
/*    width: 100%;
    display:block;
    min-height: 30px; */
    background-color: #5F56A9;
    text-align: left;
    margin:0;
    padding: 0;
    padding-bottom: -1px;
   /*  overflow:hidden;  */
   }

  nav li a {

    text-decoration: none;
  	color: #FFF;
  	display: block;
    margin:0;
    padding: 0px 10px;
    height: 30px;

   }

  nav li a:link {
      color: #FFF;
  }

  nav li a:visited {
      color: #FFF;
  }

  nav li a:active {
      background-color: #8D87C2;
      color: #FFF;
  }

  nav li a:hover {
      background-color: #8D87C2;
      color: #FFF;
  }

  nav li a:visited:hover {
      background-color: #8D87C2;
      color: #FFF;
  }

  nav ul {
/*    list-style: none; */
    margin:0;
    padding:0;
    background-color: #0FA3C;
    line-height:30px;
    display:block;

  }

  nav li{
    list-style: none;
    display:inline-block;
 	font-weight:700;
    font-size: 1em;
    line-height:30px;
    height: 30px;
    margin:0;
    padding: 0;
    background-color: #0FA3C;
/*    height:30px;  */
  }

  nav p {
    display: none;
  }


@media only screen and (max-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
   nav a {

    padding: 0px 10px;
    line-height:25px;

   }
    nav li {
      font-size: 0.8em;
/*      height: 25px;  */
    }


}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (max-width:640px){
/* this is where the drop menu starts */

    nav {
     white-space:normal;
     position:fixed;
     top:0px;
     left:0px;
     margin:0;
     padding:0;
     z-index:50;
     width:100%;
     height:30px;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    }

    nav ul {
      width:100%;
      display:none;
      text-align:left;
      position:relative;
      top:30px;
      left:0px;
      margin:0;
      padding:0;
    }

    nav li {
     background-color: #5F56A9;
     display:block;
     width:100%;
     margin:0;
     padding:0;
     font-size: 0.95em;
     border-top:1px solid #FFF;
     height: 30px;
    }

    nav li a   {

     display:block;
     width:100%;
     text-transform: uppercase;
     margin:0;
     padding:0;
     height: 30px;
     line-height: 30px;
     padding-left:20px;

    }
    nav li a:hover {
     border-top: 0;
    }

    nav p {
     clear:both;
     display:block;
     text-align: left;
     margin:0px;
     padding-left: 8px;

    }

    nav li, nav p{
     background-color: #0FA3C;
     white-space:normal;
     text-align: left;
    }

    nav p:hover {
      background-color: #8D87C2;
    }

   #backbutton::after {
     position:absolute;
     content: '\25C0';
     font-size: 16px;
     color: #FFF;
     line-height:30px;
     height:30px;
     padding-right:10px;
     cursor: pointer;
   }

   #opener::after {
     background-image: url('../images/icons/open.png');
     background-position: right 6px;
     background-size: 20px 20px;
     background-repeat: no-repeat;
     content: ' ';
     margin-right:10px;
     height:30px;
     float:right;
     width:calc(100% - 70px);
     cursor: pointer;
   }

   #home::after {
     position:absolute;
     background-image: url('../images/icons/home.png');
     background-position: center 5px;
     background-size: 20px 20px;
     background-repeat: no-repeat;
     content: ' ';
     width:20px;
     height:30px;
     color: #FFF;
     margin-left:25px;
     cursor: pointer;
   }



}