
/* STRUCTURE */

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

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

#right {
	width: 270px;
	float: right;
	padding: 15px 15px;
	margin-top: 5px;
	margin-right:3%;
 }

#middle {
	width: 560px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
	padding-bottom: 30px;
	margin: 0px 5px 5px 12px;
 }

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

#bottom {
   float:right;
	width: 735px;
	padding: 2% 4%;
	margin-top: 3%;
	margin-right: 30px;
	margin-bottom: 4%;
   background-color: #e1e1ff;
   border-radius: 6px;
 }


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


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

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;
}

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



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

	#pagewrap {
		width: 94%;
	}

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

	#right {
		width: 30%;
		padding: 1% 2%;
		margin-top: 5px;
		float: right;
	}

	#middle {
		width: 58%;
		padding: 1% 2%;
		padding-bottom: 3%;
		margin: 0px 0px 5px 5px;
		float: left;
	}

	#sidebar {
	clear: both;
	padding: 0.5% 0.5%;
	width: 100%;
	position:fixed;
	bottom: -25px;
	right: 0;
	left: 0;
   border-radius: 0px;
	background-color: #e8ebf4;
	}

  #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%;
	}

}

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

 #pagewrap {
	width: 98%;
	}

}


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

  #middle {
		width: auto;
		float: none;
		padding: 1% 3%;
		padding-bottom: 5%;
		margin-left: 0px;
	}

	#right {
		width: auto;
		float: none;
		padding: 1% 3%;
		margin:2%;
	}

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

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

	#bottom {
		width: auto;
		float: none;
		margin: 2%;
		margin-top: 6%;
		padding: 3%;
	}

	footer {
		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%;
   padding: 0;
	}

	h1 {
		font-size: 1.4em;
	}

	#sidebar {
		display: none;
	}

	#top {
		width: auto;
	}

	#bottom {
		width: auto;
	}

	footer {
		padding-bottom: 10px;
	}

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

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


}


#right {
	background: #f8f8f8;
	border-radius: 16px;
}

#sidebar {
   text-align: center;
}

#right, #middle, #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;
 }


}