/* STRUCTURE */

#pagewrap {
  padding: 2px;
  padding-top: 0;
  width: 1080px;
  margin: 20px auto;
  margin-top: 0;
  background-color: white;
 }


#pagewrap_cbd {
  padding: 2px;
  padding-top: 0;
  width: 1080px;
  min-width: 360px;
  margin: 20px auto;
  margin-top: 0px;
  background-color: white;
 }


#top {
  width: auto;
  padding: 1% 2%;
  margin: 2px;
  margin-top: -2%;
  margin-bottom: 0;
  margin-left: 100px;
  margin-right: 1%;
 }


#middle, #content {
  width: 920px; /* Account for margins + border values */
  float: left;
  padding: 5px 25px;
  margin: 0px 5px 5px 15px;
 }


#cbd_content {
  width: 88%;
  min-width: 360px;
  padding: 5px;
  margin: auto;
  float: right;
  margin: auto;
  text-align: center;
 }


#sidebar {
  width: 80px;
  float: left;
  margin-left: 8px;
  margin-top: -40px;
 }


#bottom {
float: right;
    width: 78%;
    padding: 1% 4%;
    margin: 15px;
    background-color: #ddddff;
 }


div.sidebar_content {
  padding: 6px 1px;
  position: relative;
  border-radius: 12px;
  background: #f2f1f1;
 }


footer {
  clear: both;
  padding: 0 15px;
  text-align: center;
  padding-top: 10px;
 }


img.sidebar2 {
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: 15px;
   border: 0;
   width: 80%;
 }


div.footer {
  text-align: center;
  font-size: 0.8em;
  line-height: 1.6;
  margin-top: 25px;
 }


div.resnotice {
  display: none;
  height: 0px;
 }


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

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

 #pagewrap {
   width: 94%;
  }


 #top {
   margin: 2px;
   margin-top: -2%;
  }


#middle, #content {
   width: 95%;
   padding: 1% 2%;
   padding-bottom: 3%;
   margin: 0 0 5px 5px;
 }


 #sidebar {
   clear: both;
   padding: 0.5% 0.5%;
   width: 102%;
   position:fixed;
   bottom: -25px;
   margin-left: -3%;
   margin-right: -1%;
   border-radius: 0px;
   background-color: #e8ebf4;
   z-index: 9999;
  }


 #bottom {
   margin: 3%;
   width: 86%;
  }


 footer {
   padding: 4%;
   padding-bottom: 5%;
  }

 img.sidebar2 {
   margin-left:10px;
   margin-right: 10px;
   margin-bottom:15px;
   width: 6%;
  }


}


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


 #pagewrap {
   width: 96%;
  }


 #top {
   margin: 2px;
   margin-top: -2%;
   padding: 1% 2%;
  }


 #content {
   width: 94%;
   padding: 1% 3%;
   margin: 0px 0px 5px 5px;
   float: left;
  }


 #sidebar {
   clear: both;
   padding: 0.5% 0.5%;
   width: 102%;
   position:fixed;
   bottom: -25px;
   margin-left: -3%;
   margin-right: -1%;
   border-radius: 0px;
   background-color: #e8ebf4;
   z-index: 9999;
  }


 #bottom {
   margin: 2%;
   width: auto;
  }


 footer {
   padding: 4%;
   padding-bottom: 5%;
  }


 img.sidebar2 {
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 15px;
   width: 6%;
  }


 #cbd_content {
   width: 100%;
   float: none;
  }


}


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

 #content {
   width: auto;
   float: none;
   padding: 1% 1%;
   margin: 1%;
  }


 #sidebar {
   width: auto;
   float: none;
  }


 #top {
   width: auto;
   margin: auto;
   margin-top: -3%;
   margin-bottom: -5%;
   padding: 1% 3%;
  }


 #bottom {
   width: auto;
   float: none;
   margin: 2%;
  }


 footer {
   padding: 2%;
   padding-bottom: 3%;
  }


 img.sidebar2 {
   margin-left: 9px;
   margin-right: 9px;
   margin-bottom: 15px;
   width: 5%;
  }


}


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

 #pagewrap {
   width: 100%;
  }

 h1 {
   font-size: 1.4em;
  }

 #sidebar {
   display: none;
  }

 #top {
   width: auto;
  }

 #bottom {
   width: auto;
  }

 footer {
   padding-bottom: 10px;
  }

 div.footer {
   font-size: 1em;
  }

 div.resnotice {
   display: inline;
   line-height: 1;
   font-size: 0.7em;
   color: red;
  }

}


#sidebar {
  text-align: center;
}

#content, #sidebar {
  margin-bottom: 5px;
}


/* HEADER STYLING */

h1.header, h1.header12, h1.header20, h1.header30, h1.header40, h1.header50, h1.header60  {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 1%;
  color: white;
  font-size: 2.4em;
 }

h1.header12 {
  margin-top: 0.3%;
  font-size: 2.6em;
 }

h1.header20 {
  margin-top: 1.2%;
  font-size: 2.1em;
 }

h1.header30 {
  margin-top: 1.5%;
  font-size: 1.7em;
 }

 h1.header40 {
  margin-top: 2%;
  font-size: 1.5em;
 }

 h1.header50 {
   margin-top: 2.5%;
  font-size: 1.25em;
 }

 h1.header60 {
  margin-top: 3%;
  font-size: 1.05em;
 }


header {
  height: auto;
  padding: 0;
  margin-top: 0;
  margin-bottom: 10px;
  background-image: URL(../images2/background_2016.jpg);
  position: relative;
 }


div.header_logo {
  width: 34%;
  float: left;
 }


img.header_logo {
  border: 0;
  width: 100%;
  margin-top: 2px;
  max-width: 360px;
  min-width: 120px;
 }


div.header_content {
  width: 65%;
  float: right;
  height: auto;
  margin-top:-1px;
 }


img.headerimage, img.headerimage2 {
  float: right;
  top: 0;
  right: 0;
  width: 106%;
  max-width: 860px;
  border: 0;
  z-index: 0;
 }


img.headerimage2 {
  width: 118%;
  margin-top: -4.3%;
 }


div.facebook {
  float: left;
  width: 25%;
  margin-top:-23%;
  margin-left: 10%;
 }


div.facebook2 {
  float: left;
  width: 25%;
  margin-top:-24.5%;
  margin-left: 3%;
 }


div.searchfield {
  float: left;
  width: 50%;
  margin-top:-24%;
  margin-left: 45%;
 }


div.searchfield2 {
  float: left;
  width: 50%;
  margin-top:-25.5%;
  margin-left: 32%;
 }


input.SearchBox {
  position: relative;
  z-index: 10;
  margin-right: 1px;
  width: 70%;
 }


input.ss360Button {
  position: relative;
  z-index: 5;
  vertical-align: middle;
  margin-top: -5px; margin-left: 0px;
  width: 12%; padding: 0;
  background-color: transparent;
  border: 0;
 }


div.headertext {
  float:right;
  width: 60%;
  text-align: center;
  margin-top: -10.5%;
 }


div.headertext2 {
  float: right;
  width: 65%;
  padding: 1%;
  text-align: center;
  margin-top: -5%;
 }


div.customlinktext {
  float:right;
  width: 70%;
  text-align: center;
  line-height: 2;
  font-size: 0.9em;
  margin-top: 0;
 }


div.customlinktext2 {
  float:right;
  width: 70%;
  text-align: center;
  line-height: 2;
  font-size: 0.9em;
  margin-top: -4%;
 }


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

div.customlinktext {
  width: 96%;
  text-align: center;
  margin-top: 1.5%;
  padding-left: 2%;
  padding-right: 2%;
  margin-bottom: -1.5%;
 }


div.customlinktext2 {
  width: 67%;
  margin-bottom: -1%;
 }


}


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

div.facebook {
  margin-top:-26.5%;
  margin-left: 8%;
  width: 28%;
 }


div.searchfield {
  margin-top:-27.3%;
  width: 55%;
  margin-left: 40%;

 }


div.facebook2 {
  margin-top:-27.5%;
  width: 28%;
  margin-left: 1.5%;
 }


div.searchfield2 {
  margin-top:-28.3%;
  width: 50%;
  margin-left: 33%;
 }


div.headertext {
  margin-top: -11.5%;
 }


h1.header, h1.header12, h1.header20, h1.header30, h1.header40, h1.header50, h1.header60  {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 1%;
  color: white;
  font-size: 2.0em;
 }

h1.header12 {
  margin-top: 0.4%;
  font-size: 2.2em;
 }

h1.header20 {
  margin-top: 1.2%;
  font-size: 1.8em;
 }

h1.header30 {
  margin-top: 1.7%;
  font-size: 1.5em;
 }

 h1.header40 {
  margin-top: 2%;
  font-size: 1.2em;
 }

 h1.header50 {
   margin-top: 3%;
  font-size: 1.0em;
 }

 h1.header60 {
  margin-top: 3%;
  font-size: 0.9em;
 }


}


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

div.facebook, div.facebook2 {
  display: none;
 }


div.searchfield {
  width: 70%;
  margin-left: 30%;

 }


div.searchfield {
  width: 72%;
  margin-left: 18%;
 }


div.headertext {
  margin-top: -5.8%;
  width: 65%;
 }


div.headertext2 {
  width: 70%;
  margin-top: -1%;
 }


h1.header, h1.header12, h1.header20, h1.header30, h1.header40, h1.header50, h1.header60 {
  color: #00007f;
 }

h1.header12 {
  margin-top: 1.5%;
  font-size: 2.0em;
 }

h1.header20 {
/*  margin-top: 1.2%; */
  font-size: 1.5em;
 }

h1.header30 {
/*  margin-top: 1.5%; */
  font-size: 1.4em;
 }

 h1.header40 {
/*  margin-top: 2%; */
  font-size: 1.25em;
 }

 h1.header50 {
/*   margin-top: 2.5%; */
  font-size: 1.15em;
 }

 h1.header60 {
/*  margin-top: 3%; */
  font-size: 1.1em;
 }



div.customlinktext {
  clear: both;
  font-size: 0.85em;
  margin-top: 2%;
  padding-left: 2%;
  padding-right: 2%;
 }


div.customlinktext2 {
  clear: both;
  width: 96%;
  text-align: center;
  font-size: 0.85em;
  margin-top: 1%;
  padding-left: 2%;
  padding-right: 2%;
 }


}


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

header {
  background-image: URL(../images2/background_2016.jpg);
  background-size: contain;
 }


img.headerimage2 {
  margin-top: 0;
 }


div.searchfield {
  margin-top:-22%;
  width: 70%;
  margin-left: 10%;
 }


div.searchfield2 {
  margin-top:-29%;
  width: 70%;
  margin-left: 10%;
 }


input.SearchBox {
  padding:0;
  font-size: 0.8em;
  height: 8px !important;
 }


input.ss360Button {
  width: 8%;
 }


div.headertext {
  width: 60%;
 }


div.headertext2 {
  width: 98%;
  margin-top: -1%;
 }


h1.header {
  font-size: 1.4em;
 }

h1.header12 {
/*  margin-top: 0.5%; */
  font-size: 1.8em;
 }

h1.header20 {
/*  margin-top: 1.2%; */
  font-size: 1.35em;
 }

h1.header30 {
/*  margin-top: 1.5%; */
  font-size: 1.3em;
 }

 h1.header40 {
/*  margin-top: 2%; */
  font-size: 1.2em;
 }

 h1.header50 {
/*   margin-top: 2.5%; */
  font-size: 1.05em;
 }

 h1.header60 {
/*  margin-top: 3%; */
  font-size: 1.0em;
 }


}