body  { font-family: Helvetica, Arial, sans-serif; font-size: 14px; }
  div#tooling { text-align: left; margin: 1 auto; max-width: 800px; }
  div#tooling2 li.dptitem { display block; padding 1px 0 2px; width: 100%; }
  ul { list-style-type: none; padding: 2px 0 3px; }
  ul#dptlist li.dptitem { display: block; width: 100%; float: left; padding: 1px 0 2px; margin-right: 20px;}
  ul#dptlist li.dptitem .lastcol { display: block; width: 100%; float: left; padding: 1px 0 2px; }
  ul#dptlist li.dptitem ul { display: none; border: 1px solid #888 ; background-color: #eee; padding: 10px; width: 100%; float: left; position: absolute; z-index:30; left: 50px; top: -140px;  }
  * html ul#dptlist li.dptitem ul { top: -80px; }
  li.dptitem a { text-decoration: underline; color: black; font-size: 12pt; }
  div#featured_tools { width: 90%;  padding-top: 210px; text-align: center; }
  div#featured_tools table { margin: auto; }
  div#featured_tools table td { text-align: center; }
  div#featured_tools h1 { text-align: center; width: 90%;}
  div#blurb {width: 100%;  margin: 0 auto; text-align: center; }
  div#toolwrap { padding-left: 10px; }

  li.dptitem a { text-decoration: none; display: block; cursor: default;}
  li.dptitem a:hover { color: black; background-color: #ddd; cursor: default; }

  .bt-content, .bt-content li.dptitem a.subdeptitem { font-size: 10pt; line-height: 1.5em;}
  a.subdeptitem       { text-decoration: none; display: block;  font-size: 10pt; line-height: 1.5em; }
  a.subdeptitem:hover { color: blue; background-color: white; }

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.fl { float: left; }
.fr { float: right; }

 /**
 * Clearfix from Nicolas Gallagher
 * http://nicolasgallagher.com/micro-clearfix-hack/
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
} 

/*-- default link styles **/
a { color: #069; }
a:visited,
a:hover,
a:active { color: #000; }

body { font-family: Helvetica, Arial, sans-serif; }
.container { width: 100%; margin: 0 auto 0 0; min-width: 320px; }
.main { margin-bottom: 2em; min-width: 320px; text-align: center; }
.content { margin: auto;  text-align: left; width: 90% }
.masthead { margin-top: 1em; }
.footer { clear: both; background: #036;}
.global-links ul { margin: 0; padding: 0; margin-right: 0.65em; }
.global-links ul,
.global-links li  {float: left; }
.global-links li a { float: left; margin: 1px; margin-right: 0; padding: 0.67em 10px; color: white; font-size: 1em; }
.navbar { background: #036; border-bottom: 0.3em solid #069; } 
.site-search { margin: 0.5em 0.65em; }
.plusone { margin: 0.5em 0 0 0; text-align: right; }
.header-contact p { margin: 0; font-size: 0.78em; }
.js-site-search { float: left; }
.left-nav { clear:left; background: #eee; width: 130px; min-width: 130px; font-size: 1em; margin-bottom: 2em; }
.left-nav h3 { color: #fff; background: #036; text-align: center; border-top: 5px solid #069; padding: 0.25em 0; margin: 0.3em 0; }
.left-nav ul,
.left-nav .express-form { margin: 0 0.5em; }
.left-nav .geotrust-icon { margin: 5px; }
.left-nav .geotrust-icon img { display: block; margin-left: 2px; }
.logo.fl a,
.logo.fl img { display: block; margin-bottom: 0; }
.logo { text-align: center; }
.left-nav .home-links { text-align: center; margin-top: 0.25em; margin-bottom: 0; }
.left-nav ul a { margin: 0.3em 0; display: block; }
.eo-input { width: 50px; margin: 1px; }
.left-nav .qty-input { width: 45px; }
.page-bottom-links { margin-top: 1em; width: 100%; text-align: center; }
.page-bottom-links a { margin: 0.5em; font-size: 1.1em; }
.footer-content { color: #fff; width: 100%; float: left;  padding-bottom: 2em; font-size: 1.1em; }
.footer-content a { color: #fff; }
.footer-content a:hover,
.footer-content a:active { color: #069; }
.footer-links { font-size: 10pt; }
tr.contentbar1 td { background-color: #DDD;}
td.contentbar1 { padding-left: 0.5em; }
.cart { border: 1px solid black; padding: 5px; }
.ctr  { text-align: center; }
.h2title {color: white; padding: 0 ; margin: 5px 0;}

#top-nav { background-color: #EEE; min-height: 2.1em; }
#top-nav ul { float: left; width: 100%; margin: 0 ; padding:0 0 0 0; }
#top-nav li { float: left; width : 16%; margin-left: 20px; }
#top-nav ul ul { display: none; text-align: left;  border: 1px solid #888; background-color: #ddd; width:250%; float: none; margin: 0; padding: 0;}
#top-nav ul ul li { display: block; float: none; width: 100%; margin: 5px;}
#top-nav ul li a { text-decoration: none; color: #069; }
.content h1 { margin: 0.67em 0 0.33em; max-width: 1024px;}
#superdepts li.menu {
    background-color: #e6f1f3;
    background-image: url("/mobile/arrow-right-blue.gif");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 90% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}
#superdepts li.superd { background-position: 100% 0%;}
#superdepts li.Sel {
    background-image: url("/mobile/arrow-down-blue.gif");
}
#item-div   { text-align: center; }
#item-image { vertical-align: middle; }

section.breadcrumbs ul {
    margin-top: 0;
}
section.breadcrumbs li {
	display: inline-block;
	margin: 0;
}
section.breadcrumbs li:after {
	content: " > ";
}
section.breadcrumbs li:last-child:after {
	content: "";
}
section.breadcrumbs a {
    color: #069;
}

@media (min-width: 1024px) {
  #tooling {display: block;}
  #mobiletoolmenu { display: none;}
  #top-nav { display: none; }
  .logo img { width: 200px; }
  .header-contact img { width: 190px;}
  .no-mobile {display: ;}
  .cart { width 95%; }
  .cart td, .cart th {font-size: 12pt; padding: 8px;}
  .main { text-align: center; margin-left: 150px;}
  .content { text-align: left; }
  .footer-content { padding-left: 145px; }
  .featuredimage { height: 125px; min-width: 180px; }
  #item-image { max-height: 230px; max-width: 850px; }
}

@media print {
  #top-nav {display: block; }
  #top-nav li {margin-top: 10px; }
  #top-nav li a { display: block; }
  .left-nav {display: none; }
  .logo img {width: 150px; }
  .header-contact,
  .header-contact  img {width: 105px; }
  .footer-content {padding-left: 20px; }
  .no-mobile {display: ;}
  .cart { width: 95%; }
  .cart td, .cart th {font-size: 12pt; padding: 8px;}
  .main { padding-left: 1em; }
  table {max-width: 800px;}
}

@media (min-width: 481px) and (max-width: 1023px) {
  #tooling {display: none;}
  #mobiletoolmenu { display: block;}
  #top-nav {display: block; }
  #top-nav li {margin-top: 10px; }
  #top-nav li a { display: block; }
  .left-nav {display: none; }
  .logo img {width: 150px; }
  .header-contact,
  .header-contact  img {width: 105px; }
  .footer-content {padding-left: 20px; }
  .no-mobile {display: ;}
  .cart { width: 100%; }
  .cart td, .cart th {font-size: 12pt; padding: 8px;}
  .main { min-width: 480px; }
  .content { text-align: left; }
  div#featured_tools { padding-top: 0;  }
  .featuredimage { max-height: 125px; max-width: 180px; width:100%;}
  .content h1 { font-size: 18pt; }
  #item-image { max-height: 200px; max-width: 450px; }
}

@media (min-width: 120px) and (max-width: 480px) {
  #tooling {display: none;}
  #mobiletoolmenu { display: block;}
  #top-nav {display: block;}
  #top-xnav li {clear: left; margin-top: 10px; width: 100%; margin-left: 0;}
  #top-nav li { margin-top: 10px;}
  .no-mobile {display: none;}
  .left-nav  {display: none;}
  .logo img  {width: 150px;}
  .header-contact,
  .header-contact  img { width: 105px; }
  .content img { max-width: 320px; }
  .cart { width:260px; }
  .cart td , .cart th {font-size: 9pt; padding: 8px;}
  .main { min-width: 120px; padding-left: 5px; }
  .content { text-align: left; }
  .footer-content {padding-left: 20px; }
  button { margin-bottom:5px; }
  table { max-width: 470px; }
  #contact-menu {margin-left: -50px;}
  div#featured_tools { padding-top: 0;  }
  .featuredimage { max-height: 125px; max-width: 180px; width: 100%;}
  .content h1 { font-size: 14pt; }
  #item-image { max-height: 100px; max-width:300px;}
}