/* STRUCTURE */

#pagewrap {
  width: 960px;
  margin: auto;
  margin-bottom: 15px;
  background-color: white;
 }


div.menubar {
  width: 100%;
  padding: 0;
  margin: 0;
 }

#header {
  width: 20%; 
  max-width: 300px;
  float: left;
  margin: 1.5%;
  margin-top: 1.8%;
  background-color: white;
 }

div.slider {
 width: 100%;
 max-width: 1080px;
 margin-top: 4%;
 transition-timing-function: ease;
 }

#content {
  width: 65%; 
  max-width: 1080px; /* Account for margins + border values */
  float: right;
  min-height: 400px;
  padding: 25px;
  margin-right: 3%;
  margin-bottom: 2%;  
  margin-top: 1.5%;
  border-radius:20px;
  background: rgba(24, 56, 103, 0.9)  
 }

#sidebar {
  width: 23%;
  max-width: 400px;
  float: left;
  margin: 1.5%;
  margin-top: 1.0%;
 }

#footer, .footer {
  display: flex;
  background-image: URL(/images/pagebottom.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #031d3e;
  clear: both;
  height: 300px;
  padding: 2%;
  text-align: left;
  width: 96%;
  line-height: 1.8;
}

#footer li {
  margin-bottom: 10px;
 }

#footer div {
  margin-left: 5%;
 }


div.album {
 float: left;
 width: auto; 
 margin-bottom:3%; 
 margin-right:3%; 
 vertical-align: top;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 980px or less */
@media screen and (max-width: 980px) {

  #footer, .footer {
    background-image: URL(/images/pagebottom2.jpg);
    background-size: cover;
    height: 250px;
  }

  #header {
  	 width: 19%;
  }

  #sidebar {
  	 width: 22%;
  }


  div.menubar {
    padding-bottom: 2%;
   }

 }


/* for 720px or less */
@media screen and (max-width: 720px) {

  #content {
    clear: both;
    float: none;
    width: 82%;
    padding: 4%;
    margin: auto;
    margin-bottom: 4%;
    }

  #header {
  	 width: 25%;
    margin-left: 5%;
   }

  #sidebar {
  	 float: none;
  	 width: 60%;
  	 margin-left: auto;
  	 margin-right: auto;
  }


 }


/* for 480px or less */
@media screen and (max-width: 480px) {

  #header {
    width: 30%;
    margin-bottom: 5%;
   }

  #content {
    float: none;
    width: 86%;
    padding: 4%;
   }

  #sidebar {
  	 width: 50%;
  }

  #footer {
    padding-top: 5px;
    padding-bottom: 8px;    
    font-size: 0.9em;
    height: 210px;
   }

  #footer div {
    margin-left: 2%;
   }
   
 }