/* Bongo4U Sample CSS File */

/*
   Import Common CSS for All Sites.
*/

@import url(top_menu_horizontal.css);
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="basic_ie7.css" />
<!--[endif]-->
/* 
   First, define all the basic tags.
*/
.b4u_admin {
	padding-left:150px;
}

* {
font-family:Arial, Helvetica, sans-serif;
}

body, p, a, li, input, textarea, select, option {
	color: #4C4C4C;
}
body {
	height:100%;
	background:#dce6f2 url(../images/mainBG.jpg) repeat-x top center;
	max-width:960px;
	margin: 0 auto;
}
#home. #home2015{
	padding:0;
}
.container{
	max-width:960px;
	width:100%;
	box-shadow: 0 0 60px 5px #a3bcd9;
	border-right: solid thin #CCC;
	border-left: solid thin #CCC;
	background-color:#FFF;
}
h1, h2, h3, h4, h5, h6, th, dt, label, .error_message, input.submit {
	font-weight: normal;
	color: #000000;
}
#home h1, #home2015 h1 {
  border-bottom: medium solid;
  border-top: medium solid;
  color: #000000;
  font-family: times new roman;
  font-size: 1.9em;
  line-height: 1.1em;
  padding: 13px;
  text-align: center;
}
td p, dd, th, table {
	color: #4C4C4C;
}

.b4u_pagetitle h1 {
	font: lighter 30px;
	color: #cccccc;
	margin: 0px;
	padding: 0px;
	display:none;
}
h1 {
font-size:28px;
}
h2 {
	font-size:1.5em;
	color:#000;
	margin-top: 10px;
	line-height:1.25em;
	font-weight:bold;
	line-height:1em;
}
h3 {
	font-size:16px;
	color: #000;
	margin-bottom:5px;
	line-height:1.25em;
	font-weight:bold;
}
h4 {
font-size:x-small;
}
img {
   border: 0;
}

li {
}
/*   list-style-type: none;	*/

.row-fluid:nth-child(2){ /*middle span background colour*/
	border-bottom: solid thick #ccc;
}
.b4u_view .b4u_content a:link, .b4u_view .b4u_content a:visited {
    color: #02568c;
}

.b4u_view .b4u_content a:hover, .b4u_view .b4u_content a:active {
    color: #1c5ba2;
    text-decoration: none;
}


hr{
   font-size: 0px;
   color: #FEC424;
   background-color: black;
   border: none;
   height: 2px;
   line-height: 0px;
}

input.submit {
   font-weight: bold;
   font-size: larger;
   color: #000;
   background-color: #fff;
   border: thin black solid;
}

/* 
   Second, define the page structure.
   
   The default Bongo4U template divides the page with three <div> tags.
   Each is identified by an id:
      b4u_top
         - a series of Content Block divs (described below)
      b4u_middle
         - a series of Content Block divs (described below)
      b4u_bottom
         - a series of Content Block divs (described below)
*/
/* All 'edit' forms */
.b4u_admin li a.submenu, .b4u_edit h2, .b4u_edit h3, .b4u_admin a:link, .b4u_admin a:visited {
	text-decoration:none !important;
}
.b4u_edit {
   margin: 1em;
   padding: 1em;
   background: #cceeff url(../images/grid.gif);
   color:#000;
}
.b4u_edit h2, .b4u_edit h3,.b4u_admin a:link, .b4u_admin a:visited  {
	color:#000;
}
.b4u_edit table, .b4u_social table{
	table-layout:auto !important;
	width: auto !important;
}
/* Special Handling of EmailForm Blocks */
.b4u_view .b4u_emailform form{
   
}
.b4u_view .b4u_emailform .b4u_content dl {
   margin: 0.5em 0;
}
.b4u_view .b4u_emailform .b4u_content dt {
   margin: 0;
   text-align: right;
   width: 16em;
   font-size: 1em;
   font-weight: normal;
   color:#333;
   float:left;
   clear: both;
}
.b4u_view .b4u_emailform .b4u_content dd {
   margin: 0 0 0 17em;
}
.b4u_emailform .b4u_content input.text {
   width: 20em;
}
.b4u_emailform dl.emailform_custom {
   border: none;
   border-bottom: 1px solid black;
}

input{
width: 180px;
margin-bottom: 0px;
background:#FFF;
border:1px solid #CCC;
color:#333;
padding:5px;
}
input[type="radio"], input[type="checkbox"] {
  line-height: normal;
  margin: 0 5px 2px 0;
}

textarea{
	margin-bottom: 5px;
	background:#FFF;
	border:1px solid #CCC;
	color:#333;
	padding:5px;
	width:97%;
	height:6em;
}

#b4u_middle form {
	clear:left;
	float:left;
	width:100%;
}
label{
	margin-bottom:0;
}
.b4u_emailform_generic_instruction {
  font-style: italic;
  color:#5593d9;
}

/****************************************************************************/
/********************* MEDIA QUERIES TO FIX FORMS **************************/
/**************************************************************************/
@media screen and (max-width: 767px) {
.b4u_view .b4u_emailform .b4u_content dt{
	margin: 0;
	padding: 15px 0 0 0;
	width: 100%;
	text-align: left;}
.b4u_view .b4u_emailform .b4u_content dt label{
	text-align:left;
	display:block;
	width:100%;
	padding:0;
	margin:0;}
.b4u_view .b4u_emailform .b4u_content dd{
	margin:0;}		
.b4u_emailform .b4u_content input.text, .b4u_emailform .b4u_content textarea{
	width:95%;
	margin:0}
#recaptcha_widget_div{
	width: 290px !important;
	margin: 0;
	overflow:hidden;
	float:left;}
.b4u_emailform .b4u_content p input[type="submit"]{
	clear:left;
	float:left;}		
}
@media (max-width: 979px) and (min-width: 768px){
.b4u_emailform .b4u_content textarea{
	width:95%;
	margin:0}
#recaptcha_widget_div{
	width: 360px !important;
	margin: 0 0 0 -15px;
	overflow:hidden;}
}

.b4u_slideshow_image_caption {
   font-style: italic;
}

/******************************/
/************  TOP ***********/
/****************************/
#b4u_top {
	margin: 0;
	padding:0;
	width:100%;
	max-width:960px;
	background-color:#FFFFFF;
	float:left;
}
#topImage{
	float:left;
	margin: 10px 0 0 10px;
}

#family_dropdown{
	float:right;
	background:#1c5ba2;
	margin-top:28px;
	padding:5px;
	height:28px;
}
.b4u_sitesearch{
	float:right;
	background:#1c5ba2;
	margin:28px 10px 0 0;
	padding:5px 10px;
	height:28px;
}
.b4u_sitesearch form{
	margin:0;
}
#b4u_top .b4u_sitesearch input, textarea{
	max-width: 150px;
}
#b4u_middle .b4u_sitesearch{/*search resultsonce a search is performed*/
	float:left;
	background:#FFF none;
	margin:0 0 10px 0;
	padding:5px;
	height:100%;
}
#b4u_middle_wrapper {
  padding: 0 1em 1em;
}
#home #b4u_middle_wrapper, #home2015 #b4u_middle_wrapper {
  padding: 0;
}
.b4u_slideshow {
  clear: both;
}
@media only screen and (min-width : 768px) and (max-width : 980px) {
	.b4u_sitesearch{
		clear:left;
		width:50%;
		text-align:right;
		margin-right:7px;
	}
	#b4u_top .b4u_sitesearch input, textarea{
		max-width: 250px;
	}
	#family_dropdown{
		width:44%;
	}
	#b4u_middle .b4u_sitesearch{
		float:left;
		background:#FFF none;
		margin:0 0 10px 0;
		padding:5px;
		width:90%;
		text-align:left;
	}
	.store_locator{
		clear:none !important;
		position:relative;
		top:43px;
	}
}
@media only screen and (min-width : 320px) and (max-width : 767px) {
	body{
		padding:0;
	}
	#topImage{
		text-align:center;
		width:95%;
	}
	.b4u_sitesearch{
		clear:both;
		width:90%;
		margin:0;
		text-align:center;
		background:none;
		float:left;
	}
	#b4u_top .b4u_sitesearch input, textarea{
		max-width: 250px;
	}
	#family_dropdown{
		float:left;
		margin:0;
		text-align:left;
		background:none;
	}
	#family_dropdown select {
	  max-width: 170px;
	}
	.store_locator{
		clear:none !important;
		float:right;
		margin-top: 5px;
	}
	.store_locator a{
		padding: 6px 5px !important;
	}
	#home_products img{
		width:43% !important;
	}
	.text_box{
		columns:1 !important;
		-moz-columns:1 !important;
		-webkit-columns:1 !important;
	}
	#b4u_middle .b4u_sitesearch{
		float:left;
		background:#FFF none;
		margin:0 0 10px 0;
		padding:5px;
		width:90%;
	}
	.b4u_storelocator_results .b4u_fluid_table td:nth-of-type(1):before  { content: "Store"; } /*remaining mobile headings/labels for store finder table are dynamically defined in-line by store finder API*/
}
.store_locator{
	clear:both;
	text-align:right;
	padding: 0 10px 10px 0;
	font-weight:bold;
}
.store_locator a{
	color:#FFF !important;
	margin: 0;
	padding:6px 20px;
	text-decoration:none !important;
	border-radius:7px;
	background: #057cc6; /* Old browsers */
	background: -moz-linear-gradient(top,  #057cc6 0%, #004a78 100%); /* FF3.6+ */	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#057cc6), color-stop(100%,#004a78)); /* Chrome,Safari4+ */	
	background: -webkit-linear-gradient(top,  #057cc6 0%,#004a78 100%); /* Chrome10+,Safari5.1+ */	
	background: -o-linear-gradient(top,  #057cc6 0%,#004a78 100%); /* Opera 11.10+ */	
	background: -ms-linear-gradient(top,  #057cc6 0%,#004a78 100%); /* IE10+ */	
	background: linear-gradient(to bottom,  #057cc6 0%,#004a78 100%); /* W3C */	
}
.store_locator a:hover{
	background: #1c1c1c; /* Old browsers */	
	background: -moz-linear-gradient(top,  #1c1c1c 0%, #878787 99%); /* FF3.6+ */	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c1c1c), color-stop(99%,#878787)); /* Chrome,Safari4+ */	
	background: -webkit-linear-gradient(top,  #1c1c1c 0%,#878787 99%); /* Chrome10+,Safari5.1+ */	
	background: -o-linear-gradient(top,  #1c1c1c 0%,#878787 99%); /* Opera 11.10+ */	
	background: -ms-linear-gradient(top,  #1c1c1c 0%,#878787 99%); /* IE10+ */	
	background: linear-gradient(to bottom,  #1c1c1c 0%,#878787 99%); /* W3C */	
}

#b4u_left{
	background-color:#FFFFFF;
	padding: 0 10px 10px 10px;
}
#b4u_left .b4u_nav{
	background-color:#eff0f0;
}
#b4u_left .b4u_nav a, a:hover{
	text-decoration:none;
	border:none;
	background: none;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #002101;
  text-decoration: none;
}
#b4u_left .b4u_nav li{
	border-bottom:#1c5ba2 solid thin;
}
.left_nav_family_divisions{
	background-color:#eff0f0;
	margin: 0;
	padding: 0 10px 10px 10px;
}
.left_nav_family_divisions ul{
	list-style-image:url(../images/Scepter_crown.gif);
}
#b4u_middle {
	margin: 10px 0 0 0;
	padding: 0;
	max-width:960px;
}
#layout_default #b4u_middle {
	margin: 0;
	width:100%;
}

#b4u_middle .b4u_content {
}
.carousel{margin-bottom:0;}

.text_box{
	background-color:#FFF;
	padding:0 15px 2em;
	margin:0;
	columns:2;
	-moz-columns:2;
	-moz-column-gap:20px;
	-webkit-columns:2;
	-webkit-column-gap:20px;
}
#home_products{
	margin:0;
	padding:4px 0 2px 0;
	text-align:center;
}
#image_divider{
	padding-right:3px;
}
#home_products img{
	padding:3px 0;
	transform: translateZ(0);
	width: 19%;
}
.fade {
	opacity: 1;
}
.fade:hover {
    opacity: 0.5;
}

.fade a, a:hover {
	-moz-backface-visibility: hidden;
}

.page_content{
	background-color:#FFFFFF;
	padding: 0 10px 10px 10px;
}
.product_description{
	vertical-align:top;
	line-height:16px;
	font-size:1em;
	padding:1em 1.5em 1em 0em;
	border:none;
	border-bottom: solid thin #1c5ba2;
}
.product_description h3{
	margin:0;
	line-height:20px;
}
.product_image{
	margin-right:10px;
	max-width:130px;
	min-width:130px;
	width:25%
}
.replament_partstable{
	border:1px solid rgb(151, 174, 125);
	width:100%;
	table-layout:fixed;
}
.replament_partstable tr, td{
	padding: 5px 10px 10px 5px;
}
#orange_container{
	vertical-align:middle;
	background-color:#1c5ba2;
	color:#FFFFFF;
}
/**** CAREERS PAGE *****/
.equity_contact {
  width: 100%;
}
.equity_contact td {
  vertical-align: top;
  width: 33.3%;
}
.equity_contact img {
	margin-bottom:35px;
}
.view_jobs {
  background: none repeat scroll 0 0 #fffccd;
  border: medium solid #696969;
  display: block;
  padding: 1em 0;
  text-align: center;
  width: 100%;
  text-decoration:none;
}
.view_jobs:hover {
  background: none repeat scroll 0 0 #1c5ba2;
  color:#FFF !important;
  border: medium solid #696969;
}
#careers_page #b4u_middle form{
	border: solid thin black;
	padding:1em;
	width:80%;
	margin:0 auto;
	float:none !important;
}
#careers_page .b4u_view .b4u_emailform .b4u_content dl {
  clear: both;
  float: left;
  margin: 0.5em 0;
  width: 100%;
}
#careers_page .b4u_view .b4u_emailform .b4u_content dt {
  text-align: left;
  width: 100%;
}
#careers_page .recaptchatable {
	float:left;
}
#careers_page .b4u_emailform_submit {
  background: #1c5ba2;
  background-image: -webkit-linear-gradient(top, #0272f0, #1c5ba2);
  background-image: -moz-linear-gradient(top, #0272f0, #1c5ba2);
  background-image: -ms-linear-gradient(top, #0272f0, #1c5ba2);
  background-image: -o-linear-gradient(top, #0272f0, #1c5ba2);
  background-image: linear-gradient(to bottom, #0272f0, #1c5ba2);
  -webkit-border-radius: 11;
  -moz-border-radius: 11;
  border-radius: 11px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  white-space:normal;
}

#careers_page .b4u_emailform_submit:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
#job_opportunities .b4u_fluid_table {
	font-size:1em;
}
@media only screen and (min-width : 768px) and (max-width : 960px) {
	#careers_page .recaptcha_html {
		float:left;
	}
}
@media only screen and (min-width : 320px) and (max-width : 767px) {
	.equity_contact td {
		float:left;
		width:100%;
	}
	#careers_page #b4u_middle form{
		border: none;
		padding:0;
		width:100%;
		margin:0 auto;
		float:left;
	}
	#job_opportunities .b4u_fluid_table td:nth-of-type(1):before {content: "Position";}
	#job_opportunities .b4u_fluid_table td:nth-of-type(2):before {content: "Type of Work";}
	#job_opportunities .b4u_fluid_table td:nth-of-type(3):before {content: "Description";}
}
/********************************/
/*******   BOTTOM   *************/
/********************************/
#b4u_bottom{
	max-width:960px;
}

#b4u_bottom .b4u_nav  ul ul {
   position: absolute;
   top: 0;
   left: 100%;
}

#b4u_bottom .b4u_nav .b4u_content ul
{
	display:inline;
	list-style: none;
	float:left;
	margin:0;
	padding-left:0;
	-moz-columns:2;
	-webkit-columns:2;
	columns:2;
}

div#b4u_bottom div.b4u_nav{
	font-size:.75em;
}
div#b4u_bottom div.b4u_nav li{
	text-shadow:none;
	line-height:10px;
}
div#b4u_bottom div.b4u_nav a{
	text-decoration:none;
	text-shadow:none;
	color:#000;
}
div#b4u_bottom div.b4u_nav a:hover{
	text-decoration:underline;
	color:#09F;
	padding:0;
	margin:0;
	background-color:transparent
}
#b4u_bottom .b4u_nav .nav-list > li > a {
	float:none;
}
div#b4u_bottom {
	margin: 10px 0;
	padding: 0px;
	text-decoration: none;
}
#b4u_bottom .b4u_pagetitle {
   margin: 0px;
   padding: 0px;
   color: white;
}

#footer_logo {
  float: right;
  margin-right: 1em;
}
#myers_copyright {
  clear: left;
  float: left;
  margin: 2em 15px 1em;
}
.copyright {
  color: #000;
  float: left;
  font-size: x-small;
  line-height: 1.25em;
  margin: 45px 0 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 70%;
}
#b4u_bottom .b4u_poweredby {
  float: right;
  margin: 37px 1em 0 0;
}
#b4u_bottom .b4u_bongo4u_tagline_text {
  font-size: x-small;
}
#b4u_bottom .b4u_wysiwyg {
	margin: 0px;
	padding: 0px;
	color: #000;
	text-decoration: none;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}
@media only screen and (min-width : 320px) and (max-width : 767px) {
	#footer_logo, #b4u_bottom .b4u_nav, .copyright, .b4u_poweredby {
		float:left;
		width: 100%;
		text-align: center;
		margin: 0;
		clear: both;
		padding: .75em 0;
	}
	#b4u_bottom .b4u_nav .b4u_content ul {
		width:100%;
		padding:0;
		margin:0;
	}
	#b4u_bottom .b4u_nav li {
		padding: .5em 0;
	}
}


/*
   Style the Content Blocks.
   
   Each Content Block is wrapped in its own <div> tag.
   As of 2005-10-13, there are 5 Content Blocks, with these class names:
      b4u_admin
         - either the login form, or the Page Menu
         - only present when logged in, or for this url: http://site.bongo4u.com/admin/
         - contains these tags: p, a, form, input
      b4u_autostyle
         - potentially contains many tags, including: h1 - h6, p, ul, ol, li, a, etc
      b4u_headline
         - contains just this tag: h2
      b4u_image
         - contains these tags: h2, p, img
      b4u_rawhtml
         - could potentially contain any tag
*/

/* 
   Special page-by-page Styles 
   
   Bongo4U puts id parameters on many tags. However, for the most part, these should not be referenced
   in style sheets, since they are ultimately determined by the database, and may change without notice.
   
   However, there is one exception. The <body> tag of each page sets the id parameter to the page name.
   For example, the "Home" page would feature this tag: <body id="home">.
   
   We can use this to style certain pages differently than others.
*/

body#home h1 {
}

/* 
   Further considerations for Writers, Editors, and other Administrators. 

   Logged-in users might appreciate some special styling just for them! 
   To that end, all 'edit' forms are wrapped with this: <div class="b4u_edit">.
   Also, <input> tags are given a class name that matches the type parameter, so
   we can style radio buttons differently than check boxes.
*/

/*BACK TO TOP BUTTON*/
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: 970px;
}

#back-top a {
	width: 45px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	outline:none;
	
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 45px;
	height: 45px;
	display: block;
	margin-bottom: 7px;
	background: url("../images/Top.png") no-repeat center center;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #FFF;
	/* rounded corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}