/* Color reference
	Website Theme Color #438cc1; #1a7db6; #006ead
	background: #FFFFFF
	normal text: #000000
*/

/* This Makes IE Play Nice, Creates a Standard for All */
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* This Makes IE Play Nice, Creates a Standard for All */
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* Start of Tool Box */
header,
section,
footer,
p {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
/* End of Tool Box */

/* Start of Head Section */
header {
  width: 100vw;
  height: 100px;
}
.headerLeft {
  display: flex;
  display: inline-flex;
  align-items: center;
  width: 35vw;
  height: 125px;
  line-height: 0.1;
  float: left;
  position: absolute;
  z-index: 10;
}
.headerLeft img {
  width: 300px;
  height: auto;
  padding: 0 10px;
}
.headerRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 65vw;
  height: 100px;
  background-image: linear-gradient(90deg, #ffffff, #006ead);
  float: right;
}
.headerRight > .buyDirectSign {
  width: 350px;
  height: auto;
  border: none;
}
.headerRight > .bookMarkShadow {
  width: 175px;
  height: auto;
  border: 0px;
}
.headerRight > .logInButton {
  width: 75px;
  height: 25px;
  padding: 0px;
  margin: 0px 3px 0px 0px;
  border: 0;
  border-radius: 5px;
  background-image: linear-gradient(#438cc1, #006ead);
  color: #ffffff;
}
.headerRight > .logInButton:hover {
  border: 0;
  background-image: linear-gradient(#006ead, #438cc1);
}
.logInButton a {
  color: #ffffff;
  text-decoration: none;
}
.headerRight > .regButton {
  width: 110px;
  height: 25px;
  padding: 0px;
  margin: 0px;
  border: 0;
  border-radius: 5px;
  background-image: linear-gradient(#438cc1, #006ead);
  color: #ffffff;
}
.headerRight > .regButton:hover {
  border: 0;
  background-image: linear-gradient(#006ead, #438cc1);
}
.regButton a {
  color: #ffffff;
  text-decoration: none;
}
.menuBox {
  display: flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 40px;
  background-image: linear-gradient(#438cc1, #006ead);
}
nav {
  height: auto;
  position: absolute;
  z-index: 20;
}
ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
nav ul li {
  display: flex;
  display: inline-flex;
  align-items: center;
  font-size: 90%;
  padding: 0px 30px;
  color: #ffffff;
}
nav ul li a {
  text-decoration: none;
  color: #ffffff;
}
nav ul li a:hover {
  color: #999999;
}
/* End of Head Section */

/* Start of Featured Homes Display */
.featuredHomes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 30px;
  padding: 0;
  margin: -3px 0px 0px 0px;
  color: #ffffff;
  overflow: hidden;
  background-color: #1a7db6;
}
.displayHomes {
  display: flex;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  padding: 0px;
  margin: 0px;
}
.displayHomes img {
  width: 100px;
  height: 100px;
  border: 0;
  padding: 0px;
  margin: 2px;
}
.underLineFeaturedHomse {
  width: 100vw;
  height: 10px;
  background-color: #1a7db6;
}
/* End of Featured Homes Display */

/* Start of Upper Main Body */
.upperMidBodyBlock {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
.upperLeftBlock {
  width: 25vw;
  height: 100vh;
  padding: 10px;
  margin: 0px;
}
.upperLeftBlock a {
  text-decoration: none;
  color: #1a7db6;
}
.upperLeftBlock a:hover {
  color: #ff0000;
}
.headInfoBar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0px;
  margin: 0px;
  background-color: #1a7db6;
  color: #ffffff;
}
.textBlocks {
  width: 84%;
  height: auto;
  padding: 10px 20px 10px 20px;
  margin: 0px;
}
.upperMidBlock {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 50%;
  height: auto;
  padding: 10px;
  margin: 0px;
  overflow: hidden;
}

/* Start of Home Page Upper Mid Block Search Box */
.searchFormBox {
  width: 80%;
  height: 275px;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  border-radius: 10px;
  background: url(../images/Home_Page_Bkgnd.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*
	Update: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do cover backgrounds as well:

	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

  Update January 2018: Trying to get this to work on Android? JL García wrote to me saying he needed to add height: 100%; and overflow: hidden; to the html element to get it to work. The full snippet being:

  background: url(images/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
*/
}
.formTopMessage {
  height: 30px;
  padding: 0px 0 0 14px;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: normal;
  text-align: left;
}
.homePageForm {
  width: 99%;
  padding: 0px 0px 0px 5px;
  margin: 0 auto;
  float: left;
}
.formBox {
	width: 100%;
	height: 30px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
.propType {
  width: 30%;
  height: 0 auto;
  padding: 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.structureType {
  width: 30%;
  height: 0 auto;
  padding: 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.city {
  width: 14%;
  height: 0 auto;
  padding: 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.zip {
  width: 18%;
  height: 0 auto;
  padding: 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.min_rooms {
  width: 150px;
  height: 0 auto;
  padding: 2px 2px 2px 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.sq_feet {
  width: 145px;
  height: 0 auto;
  padding: 2px 2px 2px 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.acres {
  width: 145px;
  height: 0 auto;
  padding: 2px 2px 2px 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  font-weight: bold;
  float: left;
}
.state {
  width: 450px;
  height: 0 auto;
  padding: 2px 2px 5px 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.price_range {
  width: 200px;
  height: 0 auto;
  padding: 2px 2px 20px 2px;
  color: #000000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.search_sign_number {
  width: 225px;
  height: 0 auto;
  padding: 2px 2px 20px 2px;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.ap {
  width: 100%;
  height: 0 auto;
  padding: 2px;
  margin: 0px 0px 10px 0px;
  color: #ff0000;
  font-size: 11px;
  font-weight: bold;
  float: left;
}
.searchButton {
  width: 100px;
  height: 20px;
  border-radius: 5px;
  color: #ffffff;
  background-image: linear-gradient(orange, darkorange);
  transition: background 1000ms ease;
}
.searchButton:hover {
	background: blue;
}
/* End of Home Page Upper Mid Block Search Box */

/* Start of Mid Block Home Display */
.midHouseDisplay {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 200px;
  border-top: 2px solid #0000ff;
  border-bottom: 2px solid #ff0000;
  overflow: hidden;
}
.homePicDisplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 25%;
  height: auto;
  padding: 0px;
  margin: 0px;
}
.homePicDisplay img {
  width: 90%;
  height: auto;
  padding: 0px;
  margin: 5px;
  box-shadow: #cccccc -5px 5px 5px;
}
.houseInfoDisplay {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 75%;
  height: auto;
}
.houseAddressDisplay {
  width: 70%;
  height: 14%;
  padding: 5px;
  margin: 5px;
  font-size: 80%;
  color: #1a7db6;
  box-shadow: #cccccc -5px 5px 5px;
}
.housePriceDisplay {
  width: 16%;
  height: 14%;
  padding: 5px;
  margin: 5px;
  text-align: right;
  font-size: 80%;
  color: #ff0000;
  box-shadow: #cccccc -5px 5px 5px;
}
.houseDiscription {
  width: 98%;
  height: auto;
  padding: 10px;
  margin: 0px;
  font-size: 80%;
  color: #000000;
  overflow: hidden;
}
/* End of Mid Block Home Display */

/* Start of Upper Right Blocks */
.upperRightBlock {
  width: 25%;
  height: 100%;
  padding: 10px;
  margin: 0px;
}
.upperRightBlock img {
  width: 100%;
  height: auto;
}
.imageDisplayBox {
  width: 100%;
  height: auto;
  padding: 0px;`
  margin: 10px 0px;
}
/* End of Upper Right Blocks */

/* End of Upper Main Body */


/* Start of Search Display Page Upper Mid Search Box */
.searchDisplayBox {
	width: 80vw;
	height: 240px;
	padding: 0px;
	margin: 0px;
	border-radius: 10px;
	background-image: linear-gradient(#cccccc, #999999);
  }
  .displayFormTopMessage {
	height: 30px;
	padding: 0px 0 0 14px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-weight: normal;
	text-align: left;
  }
  .displayHomePageForm {
	width: 99%;
	padding: 0px 0px 0px 5px;
	margin: 0 auto;
	float: left;
  }
  .displayFormBox {
	  width: 100%;
	  height: 30px;
	  padding: 0px;
	  margin: 0px 0px 10px 0px;
  }
  .displayPropType {
	width: 30%;
	height: 0 auto;
	padding: 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayStructureType {
	width: 30%;
	height: 0 auto;
	padding: 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayCity {
	width: 14%;
	height: 0 auto;
	padding: 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayZip {
	width: 18%;
	height: 0 auto;
	padding: 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayMinRooms {
	width: 150px;
	height: 0 auto;
	padding: 2px 2px 2px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displaySqFeet {
	width: 145px;
	height: 0 auto;
	padding: 2px 2px 2px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayAcres {
	width: 145px;
	height: 0 auto;
	padding: 2px 2px 2px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	font-weight: bold;
	float: left;
  }
  .displayState {
	width: 450px;
	height: 0 auto;
	padding: 2px 2px 5px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayPriceRange {
	width: 200px;
	height: 0 auto;
	padding: 2px 2px 20px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displaySearchSignNumber {
	width: 225px;
	height: 0 auto;
	padding: 2px 2px 20px 2px;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displayAp {
	width: 100%;
	height: 0 auto;
	padding: 2px;
	margin: 0px 0px 10px 0px;
	color: #ff0000;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
  .displaySearchButton {
	width: 100px;
	height: 20px;
	border-radius: 5px;
	color: #ffffff;
	background-image: linear-gradient(#006ead, #438cc1);
  }
  .displaySearchButton:hover {
	color: #ffffff;
	background-image: linear-gradient(#438cc1, #006ead);
  }
/* End of Search Display Page Upper Mid Search Box */


/* Start of Q & A Mid Page Display */
.upperQA {
	width: 100%;
	height: auto;
	padding: 0px;
    margin: 0px 0px 20px 0px;
}
.upperTextQA {
	width: 100%;
	height: auto;
	font-size: 16px;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
  }
.qaDisplay {
	width: 100%;
	height: auto;
	font-size: 12px;
  }
/* End of Q & A Mid Page Display */


/* Start of About Mid Page Display */
.upper_text_about {
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  padding: 0px 0px 10px 0px;
}
.about_display {
  width: 100%;
  height: auto;
  font-size: 12px;
}
/* End of About Mid Page Display */

/* Start of LogIn Mid Page Display */
.loginFormBox {
	width: 100%;
	height: 300px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
.upperTextLogin {
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  padding: 0px 0px 10px 0px;
}
.formPic {
	width: 50%;
	height: auto;
	padding: 0px;
	margin: 0px;
	float: right;
}
.insideFormBox {
	width:50%;
	height: auto;
	padding: 0px;
	margin: 0px;
	float: left;
}
.loginInputText {
	width:215px; 
	height:auto; 
	text-align:left;
	color:#000000;
	font-size: 14px;
}
.loginInputBlocks {
	width:215px; 
	height:25px; 
	text-align:left; 
	color:#ffffff; 
	font-size:14px; 
	background-color:#006ead;"
}
.logButton {
	width: 100px;
	height: 25px;
	padding: 5px;
	margin: 0px 0px 40px 0px;
	color: #ffffff;
	border-radius: 5px;
	background-image: linear-gradient(#006ead, #438cc1);
}
.logButton:hover {
	background-image: linear-gradient(#438cc1, #006ead);
}
.notYetReg {
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px;
}
.notYetReg a {
	text-decoration: none;
	color: #006ead;
}
.notYetReg a:hover {
	color: #ff0000;
}
/* End of LogIn Mid Page Display */


/* Start of Register Mid Page Display */
.regFormBox {
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
.upperTextReg {
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  padding: 0px 0px 10px 0px;
}
.insideRegFormBox {
	width:100%;
	height: auto;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	float: left;
}
.regInputText {
	width:50%; 
	height:auto; 
	text-align:left;
	color:#000000;
	font-size: 14px;
	float: left;
}
.regInputBlocks {
	width:90%; 
	height:25px; 
	text-align:left; 
	color:#ffffff; 
	font-size:14px; 
	background-color:#006ead;"
}
.regButton {
	width: 100px;
	height: 25px;
	padding: 5px;
	margin: 0px 0px 40px 0px;
	color: #ffffff;
	border-radius: 5px;
	background-image: linear-gradient(#006ead, #438cc1);
}
.regButton:hover {
	background-image: linear-gradient(#438cc1, #006ead);
}
.regAP {
	width: 100%;
	height: 0 auto;
	padding: 2px;
	margin: 10px 0px 10px 0px;
	font-size: 11px;
	font-weight: bold;
	float: left;
  }
/* End of Register Mid Page Display */


/* Start of Footer Section */
.footerBox {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 250px;
  border-top: 2px solid blue;
  overflow: hidden;
}
.leftFooterBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  width: 25%;
  height: 250px;
  padding: 0px;
  margin: 0px;
}
.leftFooterBox img {
  width: 90%;
  height: auto;
}
.rightFooterBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 75%;
  height: 250px;
}
.topFooterBox {
  width: 100%;
  height: auto;
  padding: 10px;
  margin: 0px;
  text-align: right;
}
.midFooterBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 98%;
  height: auto;
  padding: 10px;
  margin: 0px;
}
.midFooterBox table {
  width: 100%;
}
.midFooterBox table thead tr th {
  width: 30%;
  height: auto;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}
.midFooterBox table thead tr td {
  width: 30%;
  height: auto;
  text-align: left;
}
.midFooterBox table a {
  color: #000000;
  text-decoration: none;
}
.midFooterBox table a:hover {
  color: blue;
}
.bottomFooterBox {
  width: 100%;
  height: auto;
  padding: 10px;
  margin: 0px;
  color: #cccccc;
  font-size: 10px;
  text-align: center;
}
/* End of Footer Section */

@media screen and (max-width: 1024px) {
  .searchFormBox {
    width: 98%;
    height: auto;
  }
  .searchDisplayBox {
	width: 98%;
    height: auto;
  }
  nav ul li {
    padding: 0px 20px;
  }
}
@media screen and (max-width: 768px) {
  nav ul li {
    padding: 0px 5px;
  }
}

/*======= This Controls The Form That Dislpays The Title Of The Users Date Ideas =======
table#edit_Form {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
tr#edit_Form {
    border: 1px solid #cccccc;
    text-align: left;
    padding: 8px;
}
td#edit_Form {
    border: 1px solid #cccccc;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
    background-color: #cccccc;
}
======= This Controls The Form That Dispays The Title Of The Users Date Ideas =======*/