/* absolute-filtration.co.nz */
/* responsive design         */
/* modified: 16/07/16        */

/* Main layout structure */
body { margin: 0px auto; padding: 18px 0px; background:url(http://absolute-filtration.co.nz/templates/absolutej35resp/images/bg.jpg) repeat-x center top #fff; font-family: 'Open Sans', Arial, sans-serif; }
#wrap { margin: 0px auto; max-width: 1080px; }
#banner { margin:0px auto; width: 96%; padding: 11px 2% 4px; min-height: 114px; overflow: hidden; position: relative; z-index: 91; background: #fff; box-shadow: 0px 0px 12px #02204e; -webkit-border-radius:9px 9px 0px 0px;-moz-border-radius:9px 9px 0px 0px;border-radius: 9px 9px 0px 0px; }
#logo { float:left; }
#logo img { width: auto; max-height: 110px; }
#buttons { float:right; }
#nav { clear:both; margin:0px; width:96%; padding: 0px 2%; position: relative; z-index: 90; background:#07377d; box-shadow: 0px 0px 12px #02204e; -webkit-border-radius: 0px 0px 9px 9px;-moz-border-radius: 0px 0px 9px 9px;border-radius: 0px 0px 9px 9px; }
#wrapper { margin: 20px 0; width: 92%; padding: 25px 4%; background:#fff; position: relative; z-index: 0; -webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px; }
 #content { float: left; width: 70%; }
 #right { float: right; width:25%; }
#footer { clear:both; margin: 40px 0px; width: 70%; padding: 25px 0px; border-top: 2px dotted #059ada; }
div.clearing { clear:both; }
img { border:0; max-width:100%; height:auto; }

div.topbtn { display: inline; margin-left: 10px; }

/* Banner styling */
#banner p { margin:0px; padding:0px; }

/* Main Content styling */
div.page-header { padding: 0; margin: 15px 0px; }
h1 { font-size: 27px; font-weight:normal; color: #07377d; }
h2 { font-weight: normal; font-size: 24px; font-family: Georgia, "Times New Roman", Times, serif; color: #cc000a; margin: 8px 0px 4px 0px; background:none; padding: 0px 0px; }
h3 { font-size: 23px; color: #f90; font-weight: bold; margin: 0px 0px 3px 0px;}
h4 { font-size: 21px; margin: 0px; color: #555; font-weight: bold; }
h5 { font-size: 18px; color: #02204e; font-weight: bold; margin: 20px 0px 20px 0px;}
h6 { font-size: 16px; color: #000; font-weight: bold; margin: 20px 0px 20px 0px;}
p { font-size: 14px; line-height: 180%; margin: 0px 0px 12px 0px;}
ul { font-size: 14px; line-height: 180%;  margin-top: 0px; margin-bottom: 8px; }
ol { font-size: 14px; line-height: 180%;  margin-top: 0px; margin-bottom: 8px; }
.img_caption { font-style: italic; color: #666; text-align: left; font-size: 11px; }
.createdate { font-size: 13px; color: #999; font-weight: normal; text-align:left; margin: 0px; }
.createdate, .published { font-size: 12px; color: #999; font-weight: normal; text-align:left; margin: 0px; padding: 0px; line-height: 12px; }
.article-info-term { display: none; }

h2 a { color: #cc000a; text-decoration: none; font-size: 21px; }
h2 a:hover { color: #059ada; text-decoration: none; }
h2 a:active { color: #555; text-decoration: none; }

#content a { color: #059ada; text-decoration: underline; }
#content a:hover { color: #7bb01e; text-decoration: none; }
#content a:active { color: #555; text-decoration: none; }

/* Navigation */
div#nav h3 { display: none; } /* hide on desktop */
div#nav ul { font-size: 15px; color:#bcddf0; margin: 0px; padding: 2px 0px 5px 0px; position: relative; }
div#nav ul li { margin: 0px; z-index: 99; padding: 0px; list-style:none; display:inline; position: relative; font-weight: 600; }
div#nav ul li a { font-size: 15px; display: inline-block; color: #fff; text-decoration:none; margin: 8px 8px; padding: 3px 2px; 
  -webkit-transition:color 0.2s linear;
  -o-transition:color 0.2s linear;
  -moz-transition:color 0.2s linear;
  transition:color 0.2s linear; 
}
div#nav ul li a:hover,div#nav ul li.active a:active { color: #059ada; background: none!important; }

div#nav ul > li.active > a { border-bottom: 2px solid #fff; padding-bottom: 3px; }
div#nav ul li.active > a:hover { border-color: #aba5a5; }
div#nav ul ul li.active > a { border-bottom: 0; padding-bottom: 7px; }

div#nav ul li ul { display: none; position: absolute; width: 240px; text-align: left; left: 0; top: 28px; padding: 20px 20px; background: #282a2f; background: rgba(40,42,47,0.92); z-index: 102; }
div#nav ul li ul ul { display: none; position: absolute; width: 240px; text-align: left; left: 238px; top: 0px; padding: 20px 20px; background: #282a2f; background: rgba(40,42,47,0.95); z-index: 102; }
/* Firefox Hack */
@-moz-document url-prefix() { div#nav ul li ul { top: 28px; }}

div#nav ul li:hover > ul { display: block; }
div#nav ul ul li { display: block; padding: 0px; margin: 0px; }
div#nav ul li ul li a { font-size: 14px; border-right:0; border-bottom: 1px dotted #fff!important; padding: 9px 10px; display: block; font-weight: 600; text-transform: none; }
div#nav ul li ul li:first-child a { border-top: 1px dotted #fff; }
div#nav ul li ul li a:hover { background: #339;background: rgba(39,37,37,0.92); color:#cc2229; }
div#nav .btn { font-size: 14px; }

@media screen and (max-width: 890px) {
div#nav ul { font-size: 14px; }
div#nav ul li a { padding: 7px 8px; }

div#nav h3 { font-size: 14px; color:#fff; margin: 0px 0; padding: 5px 35px 5px 0; text-align: right; text-transform: uppercase;
  display: block; font-weight: 700;
  background: url(http://absolute-filtration.co.nz/templates/absolutej35resp/images/menu-toggle.png) no-repeat 98% center; /* add a toggle graphic */
  cursor: pointer; /* forces iphone to open the menu on click */ }
/* the following shows/hides the menu when the H3 element is clicked */
div#nav ul { display: none; position: absolute; background: #07377d; margin: -12px 0 0 0; width: 92%; padding: 30px 2%; text-align: left; -moz-border-radius: 7px; border-radius: 7px; }
div#nav h3:hover ~ ul { display: block; }
div#nav ul:hover { display: block; }
div#nav ul li { display: block; float: none; }
div#nav ul li a { font-size: 14px; display: block; padding: 7px 15px; border-right: 0; }
div#nav ul li.active a { background: #02204e; color:#fff; border:0; padding: 7px 15px; -moz-border-radius: 3px; border-radius: 3px; }
div#nav ul li a:hover { background: #02204e!important; color:#fff; border-bottom: 0; }
div#nav ul ul { position: relative!important; top: 0!important; width: 90%!important; padding: 0; }
div#nav ul ul a { text-indent: 5px; font-size: 14px; text-transform: none; padding: 7px 3%!important; margin: 0!important; }
}

/* +++++++++++++++++++++++++++++++++++++ */

/* Filtration Elements */
div.filtration-elements { margin: 30px 0; text-align: center; }
div.filtration-elements div.row-fluid { margin-bottom: 20px; } 
.caption { font-size: 12px; line-height: 125%; margin: 0px 10px; color:#444; font-weight: 600;}

/* Right styling */
#right h2 { font-weight: normal; font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; color: #00204e; margin: 8px 0px 4px 0px; background:none; padding: 0px 0px 3px 0px; border-bottom:1px dotted #518fb3; }
#right h3 { font-size: 14px; color: #059ada; font-weight: bold; margin: 0px 0px 3px 0px;}
#right ul, #right ol { margin: 0px; padding: 0px; }
#right ul li { margin: 0px 0px; padding: 0px; list-style: none; }
#right p a { color: #cc000a; text-decoration: none; }
#right p a:hover { color: #f00; text-decoration: underline; }
#right p a:active { color: #555;  }
#right ul li:first-child a { border-top: 1px solid #ddd; }
#right ul li a { color: #000; text-decoration: none; display: block; padding: 5px 5px; border-bottom: 1px solid #ddd; }
#right ul li:hover { background: #f1f1f1; }
#right ul li a:hover { color: #7bb01e; background: #f1f1f1; }
#right ul li a:active { color: #555;  }
.rev { padding: 0px 15px; margin: 10px 0!important; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
#right h3 a { display: block; color: #fff; text-decoration: none;  }
#right div.moduletable div.custom { margin-bottom: 30px; }

/* Footer styling */
#footer p { font-size: 11px; color:#999; margin: 0px; padding: 0px 0px 0px 0px; line-height:14px; }
#footer ul { font-size: 11px; color:#999; margin: 0px; padding: 0px 0px 0px 0px; line-height:14px; }
#footer li { display: inline; padding: 0px 2px; }
#footer a { color: #999; text-decoration: none; }
#footer a:hover { color: #555; text-decoration: underline; }
#footer a:active { color: #333; text-decoration: none; }

/* Frame styling */
#frame-top img, frame-bottom img { border:0; }
#frame-top p, frame-bottom p { margin:0px; padding:0px; }

/* Misc */
hr { border: none; border-top: 1px dotted #999; }

/* User Form */ 
div.formControls .rsform-input-box,div.formControls .rsform-text-box {width: 100%}

/* Accordian Menu */
#mod_jo17_accordion-87 dt.level1 span{
    background-position: 15px 0;
    font-size: 13px; line-height: 18px; padding: 6px 6px 6px 22px;
}

/**************** Mobile Steez ****************/

@media screen and (max-width: 1160px) {
  div#wrap { width: 90%; }
}

@media screen and (max-width: 860px) {
  div#banner {min-height: 14px;}
  div#logo { width: 48% }
  div#buttons { width: 48% }
  div#buttons div.topbtn {width: 48%; margin-left: 2%;float: right}
  div#buttons div.topbtn img {width: 100%; height: auto;}
  
  #content { width: 62%; }
  #right { width: 34%; }
  h1 { font-size: 24px; letter-spacing: -0.5px; line-height: 125%; }
  h2 { font-size: 19px; letter-spacing: -0.5px; line-height: 125%; }
  p,ul,ol { font-size: 13px; }
  
  div.filtration-elements div.row-fluid div.span3 { float: left; width: 48%; margin-right: 2%; margin-bottom: 20px; } 
}

@media screen and (max-width: 560px) {
  div#wrap { width: 98%; }

  div#banner {min-height: 14px;}
  div#logo { float: none; width: 90%; margin: 0px auto; }
  div#logo img { margin: 0px auto; display: block; }
  div#buttons { float: none; width: 90%; margin: 15px auto; }
  div#buttons div.topbtn {width: 47%; margin-left: 6%;float: right}
  div#buttons div.topbtn+div.topbtn {width: 47%; margin-left: 0;float: right}
  div#buttons div.topbtn img {width: 100%; height: auto;}
  
  div#nav h3 { padding: 0px 25px 0px 0; }
    
  #wrapper { padding-top: 10px; }
  #content { width: 100%; float: none; }
  #right { width: 100%; float: none; margin-bottom: 40px; }
  #footer { width: 100%; }
 
  

}

/**************** Palatte ****************/
.navy { background-color: #02204e; color: #fff!important; }
.darkblue { background:#07377d; color: #fff!important; }
.red { background-color: #cc000a; color: #fff!important; }
.blue { background-color: #059ada; color: #fff!important; }
.orange { background-color: #f79a15; color: #fff!important; }