/* ---------------------- SEARCH BOXES ----------------- */


 div#SimpleSearchFormDiv {
  display:none;
 }

 div#SearchCategoryDiv {
  width: 100%;
  height: auto;
  margin-bottom:20px;
  padding: 0;
 }

 div#SearchFormDiv {
  min-width: 288px;
  background: url("/img/blue_nav2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  padding: 7px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
 }

 input#SearchBox {
  width: 77%;
  min-width: 240px;
  font-size: 16px;
  line-height: 28px;
  height: 28px;
  padding: 1px 3px;
  border: 1px solid #e3e3e3;
 }

 div#SearchFormDiv .search_submit {
  border: 1px solid #0071bb;
 }


 form, input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
 }


/* ---------------------- HOW TO GUIDE  ----------------- */

#HowToImg{
max-width:100%;
}

/* ---------------------- FEATURED COMPANIES ----------------- */


#FeaturedCompanies {
  background-color: #e7f3f9;
  padding: 8px 5px;
}	

.featured_list {		
 padding-top: 3px;
 padding-left: 0;
 position: relative;
 min-height: 80px;
}

.featured_list li {
  display: block;
  float: left;
  width: 120px;
  height: 60px;
  padding: 3px;
  margin: 8px;
  background: #fff;
  list-style: none;
  text-align: center;
  border: 1px solid #fff;
  overflow: hidden;
}

.featured_list li:hover {
 border: 1px solid #cccbc6;
 position: relative;
 left: 5px;
 top: 5px;
  -webkit-box-shadow: 2px 2px 1px #ccc;
  -moz-box-shadow: 2px 2px 1px #ccc;
  box-shadow: 2px 2px 1px #ccc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

div.featured_img {
 max-width: 120px;
 max-height: 60px;
 margin: 0 auto; 
 text-align: center;
 line-height: 60px; /* trick for vertical alignment */
}

div.featured_img img {
 max-width: 120px;
 max-height: 60px;
 vertical-align: middle;
 margin: 0;
}


/* ---------------------- COMPANY FOCUS ----------------- */

img.hp_profile {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
}

p#FocusContent a, p#FocusContent a:visited{
color:#222;
}


/* ---------------------- SECTION HEADERS ----------------- */

.homeheaderouter {
 background: url(/img/homeheader_bg.gif) top repeat-x;
 display: block;
 height: 15px;
 margin-bottom: 20px;
}

div.homeheaderinner {
 font-size: 12px;
 line-height: 12px;
 padding-right: 14px;
 background-color: #fff;
 float: left;
 text-transform: uppercase;
 font-weight: bold;
}

div.homeheaderinnerright {
 font-size: 12px;
 line-height: 12px;
 padding-left: 12px;
 background-color: #fff;
 float: right;
 text-transform: uppercase;
 font-weight: bold;
}

div.toggle_content {
 margin-bottom: 20px;
}

.flip { 
 display:block; 
 -moz-transform: rotate(-180deg);
 -webkit-transform: rotate(-180deg);
 transform: rotate(-180deg);			
}

<!--[if IE]>
<style>
	.flip {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	}
</style>
<![endif]-->



/* Media Queries ------------------------------------------------------------------------------------ */

/* iPhone, etc portrait ---- */
@media only screen and (min-width: 320px) {

 #SearchBox {
  width: 158px;
 }


}




/* iPhone, etc landscape ---- */
@media only screen and (min-width: 480px) {

 #SearchBox {
  width: 360px;
 }

 #FeaturedCompanies {
  padding:8px 15px;
 }

 .featured_list li {
  margin: 13px;
 }


}


/* iPad, tablets etc portrait ---- */
@media only screen and (min-width: 768px) {

 #SearchBox {
  width: 312px;
 }

 a.hp_cats {
  margin-left: 16px;
  margin-right: 16px;
 }

 #FeaturedCompanies {
  padding: 8px;
 }

 .featured_list li {
  width: 88px;
  margin: 10px;
 }

 div.featured_img, div.featured_img img {
  max-width: 88px;
 }


}



/* Laptops, Desktops, etc ---- */
@media only screen and (min-width: 1024px) {

 #SearchBox {
  width: 460px;
 }

 #FeaturedCompanies {
  padding: 8px 18px;
 }

 .featured_list li {
  width: 120px;
 }

 div.featured_img, div.featured_img img {
  max-width: 120px;
 }


}


@media only screen and (min-width: 1200px) {

 #SearchBox {
  width: 470px;
 }


}