/* @import must be at top of file, otherwise CSS will not work */
.highlight {
  background: #FFFF40;
}
.searchheading {
  font-size: 130%;
  font-weight: bold;
  display: none;
}
.summary {
  display: inline-block;
  margin-top: 1.8em;
  font-style: italic;
}
.summary br {
  display: none;
}
.suggestion {
  font-size: 100%;
}
.results {
  font-size: 100%;
}
.category {
  color: #999999;
}
.sorting {
  text-align: right;
}
.result_title {
  font-size: 100%;
}
.description {
  font-size: 100%;
  color: #008000;
}
.context {
  font-size: 100%;
}
.infoline {
  font-size: 80%;
  font-style: normal;
  color: #808080;
}
.zoom_searchform {
  font-size: 100%;
}
.zoom_results_per_page {
  font-size: 80%;
  margin-left: 10px;
}
.zoom_match {
  font-size: 80%;
  margin-left: 10px;
}
.zoom_categories {
  font-size: 80%;
}
.zoom_categories ul {
  display: inline;
  margin: 0px;
  padding: 0px;
}
.zoom_categories li {
  display: inline;
  margin-left: 15px;
  list-style-type: none;
}
.cat_summary ul {
  margin: 0px;
  padding: 0px;
  display: inline;
}
.cat_summary li {
  display: inline;
  margin-left: 15px;
  list-style-type: none;
}
.result_image {
  float: left;
  display: block;
}
.result_image img {
  margin: 10px;
  width: 80px;
  border: 0px;
}
.result_block {
  margin-top: 15px;
  margin-bottom: 15px;
  clear: left;
}
.result_altblock {
  margin-top: 15px;
  margin-bottom: 15px;
  clear: left;
}
.result_pages {
  font-size: 100%;
  margin-top: 2em;
}
.result_pages a {
  padding: 0.4em;
}
.result_pagescount {
  display: inline-block;
  font-size: 100%;
  font-style: italic;
}
.result_pagescount br {
  display: none;
}
.searchtime {
  font-size: 80%;
}
.recommended {
  background: #DFFFBF;
  border-top: 1px dotted #808080;
  border-bottom: 1px dotted #808080;
  margin-top: 15px;
  margin-bottom: 15px;
}
.recommended_heading {
  float: right;
  font-weight: bold;
}
.recommend_block {
  margin-top: 15px;
  margin-bottom: 15px;
  clear: left;
}
.recommend_title {
  font-size: 100%;
}
.recommend_description {
  font-size: 100%;
  color: #008000;
}
.recommend_infoline {
  font-size: 80%;
  font-style: normal;
  color: #808080;
}
.recommend_image {
  float: left;
  display: block;
}
.recommend_image img {
  margin: 10px;
  width: 80px;
  border: 0px;
}
@font-face {
  font-family: 'AtramentStd-Medium';
  src: url('fonts/2BE29E_0_0.eot');
  src: url('fonts/2BE29E_0_0.eot?#iefix') format('embedded-opentype'), url('fonts/2BE29E_0_0.woff') format('woff'), url('fonts/2BE29E_0_0.ttf') format('truetype');
}
body,
table,
td,
th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  text-align: left;
}
a:link,
a:visited {
  color: #003366;
  text-decoration: none;
}
a:hover {
  color: #bb0000;
}
/* http://stackoverflow.com/a/11092531/347303 */
a[href^=tel] {
  color: inherit;
}
.container {
  max-width: 970px !important;
  /* override bootstrap's responsiveness */
}
h1 {
  font-family: 'AtramentStd-Medium', 'Trebuchet MS';
  font-weight: normal;
  color: #ffffff;
  font-size: 3em;
}
.btn {
  background-color: #045086;
  color: #ffffff;
  border-radius: .4em;
  border: 0 solid #045086;
}
.btn a {
  color: #ffffff;
}
.background {
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-radial\-gradient\%28center\%2C\%20ellipse\%20cover\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%2041\%25\%2C\%20rgba\%28175\%2C193\%2C208\%2C1\%29\%20100\%25\%29\%3B' */
  background: #ffffff;
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 41%, #afc1d0 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(41%, #ffffff), color-stop(100%, #afc1d0));
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 41%, #afc1d0 100%);
  background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 41%, #afc1d0 100%);
  background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 41%, #afc1d0 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%, #ffffff 41%, #afc1d0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#afc1d0', GradientType=1);
}
#main-content {
  padding-top: 2em;
  padding-bottom: 2em;
}
.customer-page ul {
  /*color: red;*/
  /*text-align: left; */
  list-style-type: none;
  padding: 0;
  margin: 0;
  /*float: right;*/
}
.family-page #main-content {
  padding-top: 0;
}
.product-page #main-content {
  padding-top: 0.4em;
}
#main-area {
  background-color: #ffffff;
}
#footer-bar {
  border-radius: 0em 0em 0.4em 0.4em;
  color: #dddddd;
  font-size: 0.9em;
  padding: 1em;
  margin-bottom: 2em;
}
#branding-info {
  margin-top: 1em;
  background-color: transparent;
  /* not sure why this is needed in IE...otherwise there is a slight discoloration */
  display: flex;
  display: -webkit-flex;
}
#branding-info div[class*="col-"] {
  padding: 0;
}
#branding-info button {
  vertical-align: top;
  height: 40px;
  padding: 0;
  margin: 0 1px;
}
#branding-info button.home,
#branding-info button.email {
  width: 40px;
}
#branding-info button.home img {
  width: 25px;
}
#branding-info button.email img {
  width: 22px;
  height: 17px;
}
#branding-info #logo {
  /* put logo on top of glowing family image on family pages */
  /* width: 370px;*/
  position: relative;
  z-index: 100;
}
#branding-info #logo img {
  width: 370px;
}
#branding-info #shield img {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 101;
}
#branding-info #phone-number {
  display: inline-block;
  padding-right: 0.2em;
  /*color: #16305a;*/
  color: #045086;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 40px;
}
#branding-info #request-help {
  width: 7em;
  white-space: normal;
  line-height: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
}
#branding-info #quick-info {
  position: absolute;
  bottom: 1em;
  right: 0;
}
.header-footer-bar {
  margin-top: 0.4em;
  /* fallback for IE8 */
  background: #045188;
  background: -moz-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #045188), color-stop(100%, #21375e));
  background: -webkit-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -o-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -ms-linear-gradient(top, #045188 0%, #21375e 100%);
  background: linear-gradient(to bottom, #045188 0%, #21375e 100%);
}
#main-menu {
  margin-top: 0.2em;
  /* Position the menu above the family image*/
  position: relative;
  z-index: 100;
  color: #ffffff;
}
#main-menu .navbar-default {
  /*border-color: transparent;*/
  background-color: transparent;
  border: 0px transparent;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0px;
  min-height: 43px;
}
#main-menu .family-title {
  font-size: 1em;
  padding-top: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
}
#main-menu #navbar-collapse {
  /* fallback for IE8 */
  background: #045188;
  background: -moz-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #045188), color-stop(100%, #21375e));
  background: -webkit-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -o-linear-gradient(top, #045188 0%, #21375e 100%);
  background: -ms-linear-gradient(top, #045188 0%, #21375e 100%);
  background: linear-gradient(to bottom, #045188 0%, #21375e 100%);
}
#main-menu .navbar-nav > li > a {
  color: #ffffff;
  line-height: 1em;
}
#main-menu .navbar-nav > li > a > .caret {
  color: #c8001f;
  border-width: 7px;
}
#main-menu .navbar-nav > li > a:hover {
  color: #c8001f !important;
  background-color: #eee;
}
#main-menu .navbar-nav > li.active > a {
  color: #003366;
}
#main-menu .navbar-nav > li.open > a {
  /* An open drop down nav - Works because li.open is a little more specific than li */
  color: #003366;
}
#main-menu .navbar-nav > li.open > a:hover,
#main-menu .navbar-nav > li.open > a:focus {
  border-color: transparent;
  /* override bootstrap */
}
#splash-area {
  height: 333px;
  background: url('/images/splash-image.jpg') no-repeat left top;
  background-size: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  vertical-align: top;
}
#splash-area .overlay {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.9);
  /* this sets the opacity of the background without affecting the content within the div */
  padding: 0.7em 1.2em;
  line-height: 1.3em;
}
#splash-area-secondary {
  /*height: 71px;*/
  /* turned off because it caused a white gap at the bottom */
  background: url('/images/splash-image-short.jpg') no-repeat left top;
  background-size: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  vertical-align: top;
}
#splash-area h1#family-name {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.3em 1em 0.3em 1em;
  margin: 0;
  z-index: 99;
  /* Position above the family image and below the menu*/
  text-transform: uppercase;
}
#splash-area #family-image img {
  position: absolute;
  top: -115px;
  /* The image is very big...position appropriately */
  left: -70px;
}
#splash-area #family-image-mobile {
  display: none;
  /* tried to use bootstrap's responsive visibility utilities, but they didn't work with display: table-cell;  This is the work around */
}
.family-page .family-description {
  background-color: #ffffff;
  padding: 1em 0.4em;
  font-size: 1.1em;
}
.family-page .family-description p {
  font-size: 1.1em;
  line-height: 1.2em;
  color: #000000;
}
#company-description {
  width: 400px;
  position: absolute;
  top: 1em;
  font-family: Arial, sans-serif;
}
#company-description h1 {
  display: block;
  margin: 0 0 0.2em 0;
  color: #295f91;
  font-size: 1.8em;
  font-weight: normal;
  font-family: Arial, sans-serif;
}
#company-description p {
  font-size: 1.1em;
  text-align: justify;
}
#company-description #video-link-layout {
  margin-left: auto;
  margin-right: auto;
  width: 260px;
}
#company-description #video-link-layout > div {
  /*border: 1px red solid;*/
  display: table-cell;
  vertical-align: middle;
}
#company-description #video-link-layout a {
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
  /*margin-top: 0.4em;*/
  color: #295f91;
  display: block;
}
#company-description #video-link-layout .play {
  font-size: 1.2em;
  vertical-align: middle;
  padding: .2em .3em;
  border-radius: 0.1em;
  background-color: #d3d3d3;
  box-shadow: inset 1px 1px 1px rgba(100, 100, 100, 0.2);
  /* top and left */
}
#search {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
#search-box {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
#search-box button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: transparent;
  border: 0;
  height: 45px;
  width: 45px;
  margin: 0;
  padding: 0;
  background: url('images/magnifying-glass.png') no-repeat center center;
}
#search-box input {
  font-size: 1.8em;
  padding: 0.2em 37px 0.2em 0.2em;
  background-color: transparent;
  border: 0;
  width: 100%;
}
.coming-soon {
  font-style: italic;
  color: green;
  font-size: 70%;
}
#video-modal .modal-header {
  padding: 5px;
}
#video-modal .modal-content {
  width: 675px;
  text-align: center;
}
.videowrapper {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#page-help {
  width: 170px;
  position: absolute;
  right: 1em;
  bottom: 1em;
  text-align: justify;
}
.family-page #page-help {
  bottom: 8em;
}
#page-help button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #16305a;
  margin-top: 0.4em;
  text-transform: uppercase;
}
#page-help button:hover {
  /* Need to override the specific color defined in #page-help button */
  background-color: #e6e6e6;
}
.family-group .panel {
  border: 0;
  border-radius: 0;
  background-color: #152e59;
  margin-bottom: 0;
  margin-top: 0.6em;
  /* add some whitespace on the homepage */
}
.family-group .panel-heading {
  display: block;
  font-family: AtramentStd-Medium;
  padding: 0.2em 1.8em;
  border-radius: 0;
  border-bottom: 0;
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28239\%2C201\%2C76\%2C1\%29\%200\%25\%2C\%20rgba\%28225\%2C157\%2C62\%2C1\%29\%20100\%25\%29\%3B'*/
  background: #efc94c;
  background: -moz-linear-gradient(top, #efc94c 0%, #e19d3e 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #efc94c), color-stop(100%, #e19d3e));
  background: -webkit-linear-gradient(top, #efc94c 0%, #e19d3e 100%);
  background: -o-linear-gradient(top, #efc94c 0%, #e19d3e 100%);
  background: -ms-linear-gradient(top, #efc94c 0%, #e19d3e 100%);
  background-image: url(images/wave-bar.png), linear-gradient(to right, #fbeec4 0%, #c78e39 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efc94c', endColorstr='#e19d3e', GradientType=0);
  background-size: 100% 100%;
  /*background-image: url(images/wave-bar.png);*/
}
.family-group .panel-heading h2 {
  font-size: 3em;
  text-transform: uppercase;
  margin: 0.1em 0;
  color: #152e59;
  font-weight: normal;
}
/* override bootstrap - homepage side by side families just have too much padding.  Lower from 15 to 8 */
.family-group .col-xs-6 {
  padding-right: 8px;
  padding-left: 8px;
}
.family-box-container.col-xs-12 {
  /* at small resolutions, there is too much padding.  Only works because of the 480 hack at bottom of this css */
  padding-left: 0;
  padding-right: 0;
}
.family-box {
  position: relative;
  border-radius: 0px;
  /* IE renders the shadow a little too intense, so I need the -webkit and -moz in order to drop/increase the spread from 0 to 3px */
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 1px 1px 30px 0px rgba(255, 255, 255, 0.75);
  /* <<< this is different */
  -webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 1px 1px 30px 3px rgba(255, 255, 255, 0.75);
  /* <<< this is different */
  border: 2px solid rgba(231, 231, 231, 0.1);
  border-top-color: rgba(231, 231, 231, 0.1);
  border-right-color: rgba(22, 22, 22, 0.8);
  border-bottom-color: rgba(22, 22, 22, 0.8);
  border-left-color: rgba(176, 182, 191, 0.1);
  /*http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28195\%2C195\%2C195\%2C1\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%20100\%25\%29\%3B'*/
  background: #c3c3c3;
  background: -moz-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #c3c3c3), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #c3c3c3 0%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3c3c3', endColorstr='#ffffff', GradientType=0);
}
.family-box .nav-circle {
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  background-color: #c60020;
  font-size: 1.6em;
  line-height: 1em;
  height: 1em;
  width: 1em;
  border-radius: 100%;
  text-align: center;
  color: #ffffff;
  padding-left: 2px;
  font-weight: 100;
}
.family-box .nav-circle.selected {
  background-color: #51854C;
}
.family-group .family-box:hover,
.family-nav .family-box:hover {
  /* need to prefix with .family-group and .family-nav, otherwise the hover box-shadow isn't specific enough */
  border-top-color: #ffffff;
  border-right-color: #999999;
  border-bottom-color: #999999;
  border-left-color: #eeeeee;
  box-shadow: 1px 1px 30px 1px rgba(190, 252, 254, 0.75);
}
/*.family-box .fa-chevron-circle-right {
    color: #c60020;
    position: absolute;
    right: 0;
    bottom: 0;
    font-weight: 900;  go boldest possible to make the chevron skinny 
}

.family-box .fa-chevron-circle-right.selected {
    color: #51854C;
}*/
.family-group .family-box {
  padding: 4% 12%;
  margin-bottom: 2em;
}
.family-group .family-box h3 {
  display: block;
  text-align: center;
  color: #152e59;
  margin-top: 0;
  font-size: 1.4em;
  height: 1.8em;
  /* Makes all thumbnail titles the same height, regardless of text wrap */
  line-height: 1em;
  font-weight: bold;
  letter-spacing: -1px;
}
.family-group .family-box .family-image {
  text-align: center;
  background: #ffffff;
  border: 2px solid #152e59;
  /* This is a trick to keep the proper height and width */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  margin: auto;
  position: relative;
}
.family-group .family-box .family-image img {
  width: 95%;
  height: 95%;
  /* Vertical align in the middle: */
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.family-group .family-box div.short-desc {
  text-align: justify;
  font-size: 0.8em;
  margin: 0.6em 0.4em 0 0;
  line-height: 1.1em;
  color: #444;
  font-weight: 500;
  text-shadow: 0 0 0.1px #999;
  overflow: hidden;
}
/* Forces the boxes to have the same height when they are side by side (but not when they are stacked vertically) */
/*@media (min-width: 768px) and (max-width: 480px) {*/
@media (min-width: 480px) {
  .family-group .family-box div.short-desc {
    /*height: 85px;*/
    height: 7em;
  }
}
/*.family-group .family-box .fa-chevron-circle-right {
    margin: 0.4em;
    font-size: 2em;
    text-shadow: 0px 0px 0.1px #999;
}*/
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}
/* family nav is the secondary navbar that shows up on the left side of the page */
.family-nav {
  background-color: #152e59;
}
.family-nav h2,
.family-nav h3 {
  font-family: 'AtramentStd-Medium', 'Trebuchet MS';
  display: block;
  text-align: center;
  text-transform: uppercase;
}
.family-nav h2 {
  color: #ffffff;
  font-size: 2.2em;
  margin: 0.4em 0 0 0;
  font-weight: normal;
}
.family-nav h3 {
  color: #cc913d;
  font-size: 1.5em;
  margin: 0.4em 0 0.2em 0;
}
/* override .family-box settings */
.family-nav .family-box {
  display: table;
  margin-bottom: 1em;
  width: 100%;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 1px 1px 20px 0px rgba(255, 255, 255, 0.55);
  -webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.3), 1px 1px 10px 3px rgba(255, 255, 255, 0.75);
  /* <<< this is different */
}
.family-nav .family-box-image {
  display: table-cell;
  vertical-align: middle;
}
.family-nav .family-box-image .family-image {
  background: #ffffff;
  border: 2px solid #152e59;
  margin: 0.4em;
}
.family-nav .family-box-image .family-image img {
  width: 94px;
}
.family-nav .family-box-text {
  display: table-cell;
  vertical-align: middle;
  color: #152e59;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3em;
  letter-spacing: -1px;
}
.family-nav .family-box .nav-circle {
  bottom: 0.2em;
  right: 0.2em;
  font-size: 1.4em;
}
ul.product-table {
  padding: 0;
  /* remove normal indent for ul */
  list-style-type: none;
}
.product-table > li:first-child {
  padding-top: 0;
}
.product-table > li {
  padding: 0.6em 0;
}
.product-table .product-title {
  font-weight: bold;
}
.product-table li > div > div {
  display: table-cell;
  vertical-align: top;
  padding: 0 0.4em;
  color: #808080;
  font-size: 0.9em;
}
.product-table li > div > div:first-child {
  padding-left: 0;
}
.product-table li > div > div:last-child {
  padding-right: 0;
}
.product-table li > div > div p {
  /* overcomes p tag added by TinyMCE */
  display: inline;
}
.product-table li > div > div.details-button {
  vertical-align: middle;
}
.product-table button {
  border-radius: 0.6em;
  line-height: 1.4em;
  color: #000000;
  font-weight: bold;
  background-color: #ffcc33;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.8), inset -1px -3px 1px rgba(0, 0, 0, 0.3);
  /* 1st: top and left, 2nd: bottom and right */
}
.subpage h1 {
  /*line-height: 2.0em;*/
  margin-top: 1em;
  margin-bottom: 1em;
}
.form-horizontal label.control-label {
  /*    text-align: left;   I have no idea why bootstrap puts labels on the right by default. */
}
.product-page h1 {
  /*line-height: 1.8em;*/
}
.product-page .product-description {
  font-size: 1.1em;
  line-height: 1.2em;
  color: #000000;
}
.product-page #illustration-image {
  text-align: center;
}
.product-page #product-downloads {
  text-align: center;
  margin: 1em 0 1.6em 0;
}
.product-page #product-downloads img {
  width: 160px;
  height: 34px;
  border: 0;
  padding-right: 25px;
}
.product-page .return-to-family {
  display: table;
  /*margin-bottom: 1em;*/
  width: 100%;
  margin-top: 0.2em;
  margin-bottom: 0.6em;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.3), /* top and left */ inset -3px -5px 3px rgba(0, 0, 0, 0.3);
  /* bottom and right */
}
.product-page .return-to-family .family-box-image {
  display: table-cell;
  vertical-align: middle;
  padding-left: 0.6em;
}
.product-page .return-to-family .family-box-image .family-image {
  /*    background: #ffffff;
    border: 2px solid #152e59;
    margin: 0.4em;*/
}
.product-page .return-to-family .family-box-image .family-image img {
  width: 65px;
  /*    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='3'/><feOffset dx='0' dy='2' result='offsetblur'/><feFlood flood-color='rgba(255,255,255,1)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -webkit-filter: drop-shadow(0px 2px 3px rgba(255,255,255,1));*/
}
.product-page .return-to-family .family-box-text {
  display: table-cell;
  vertical-align: middle;
  color: #ffffff;
  text-align: center;
  font-size: 0.9em;
  line-height: normal;
  font-weight: normal;
  text-transform: uppercase;
}
.product-download-btn {
  text-transform: uppercase;
  font-size: 0.9em;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  word-spacing: 100em;
  width: 13em;
  white-space: normal;
  line-height: 1.3em;
  margin: 0.4em 1em;
  background-color: #0070b8;
  /*border: 0 solid #367cbf;*/
  /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%2854\%2C161\%2C214\%2C1\%29\%200\%25\%2C\%20rgba\%2854\%2C161\%2C214\%2C1\%29\%2033\%25\%2C\%20rgba\%280\%2C68\%2C156\%2C1\%29\%2090\%25\%2C\%20rgba\%280\%2C68\%2C156\%2C1\%29\%20100\%25\%29\%3B' */
  background: #36a1d6;
  background: -moz-linear-gradient(top, #36a1d6 0%, #36a1d6 33%, #00449c 90%, #00449c 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #36a1d6), color-stop(33%, #36a1d6), color-stop(90%, #00449c), color-stop(100%, #00449c));
  background: -webkit-linear-gradient(top, #36a1d6 0%, #36a1d6 33%, #00449c 90%, #00449c 100%);
  background: -o-linear-gradient(top, #36a1d6 0%, #36a1d6 33%, #00449c 90%, #00449c 100%);
  background: -ms-linear-gradient(top, #36a1d6 0%, #36a1d6 33%, #00449c 90%, #00449c 100%);
  background: linear-gradient(to bottom, #36a1d6 0%, #36a1d6 33%, #00449c 90%, #00449c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36a1d6', endColorstr='#00449c', GradientType=0);
}
.product-download-btn:hover {
  color: #ffffff;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
}
.requiredField {
  color: #dd0000;
  font-weight: bold;
}
.requestHelp .page-description {
  font-size: 1.2em;
  line-height: 1.2em;
}
.requestHelp small {
  display: block;
}
.requestHelp .panel-title {
  color: #045086;
  font-size: 150%;
}
/* Override Bootstrap to prevent resizing the page at every stop */
@media (min-width: 768px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}
/* Styles to apply to desktop, but not mobile */
@media (min-width: 768px) {
  #main-menu {
    border-radius: 0.4em 0.4em 0em 0em;
    /* Also see border radius for #navbar-collapse and the sub anchors */
  }
  #main-menu #navbar-collapse {
    border-radius: 0.4em;
    /*border-radius: 0.4em;*/
  }
  #main-menu .navbar-collapse {
    /*Override bootstrap padding*/
    padding-right: 0;
    padding-left: 0;
  }
  #main-menu .container-fluid {
    padding-left: 0;
    /* override bootstrap because we want the "Product Families" menu item farther to the left */
  }
  /*** Add dividers between the menu items ***/
  #main-menu .navbar-nav > li {
    background-image: url("/images/navbar-divider.png");
    background-repeat: no-repeat;
    background-position: right center;
  }
  #main-menu .navbar-nav > li:last-child {
    background-image: none;
  }
  #main-menu .navbar-nav > li > a {
    border-radius: 0.4em 0.4em 0 0;
  }
  /*** Override the default layout in order to space the menu items a little better ***/
  #main-menu .navbar-nav > li.products-menu {
    padding-right: 1em;
  }
  #main-menu .navbar-nav > li.credit-menu,
  #main-menu .navbar-nav > li.about-menu {
    padding-right: 0.6em;
  }
  #main-menu .navbar-nav > li.credit-menu > ul.dropdown-menu,
  #main-menu .navbar-nav > li.about-menu > ul.dropdown-menu {
    margin-right: 0.6em;
  }
  #main-menu .navbar-nav > li.education-menu {
    padding-left: 1em;
  }
  #main-menu .navbar-nav > li.education-menu > ul.dropdown-menu {
    margin-left: 1em;
  }
  #main-menu .navbar-nav ul.dropdown-menu {
    border-top: 1px solid #ffffff;
  }
  .product-table {
    width: 98%;
  }
  .product-table .product-title::after {
    content: " - ";
  }
  .product-table button {
    width: 7em;
  }
  .product-table > li {
    padding: 1.8em 0em;
    border-bottom: 1px solid #999;
  }
  .product-table .image-description .product-description {
    display: none;
    /* hide the extra description on the desktop */
  }
  #footer-bar .h-card .p-name::after,
  #footer-bar .h-card .p-street-address::after,
  #footer-bar .h-card .address2::after {
    content: "\00a0\00a0 \2022 \00a0";
    /* bullet spacing */
  }
}
/* Styles to apply to mobile, but not desktop */
@media (max-width: 767px) {
  .header-footer-bar {
    background: none;
  }
  #main-menu {
    margin-top: 0px;
    /* remove extra spacing at the very top of the page */
  }
  #main-menu .navbar-brand {
    height: inherit;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    width: 80%;
  }
  #main-menu .navbar-brand img {
    width: 100%;
    max-width: 277px;
    /* the image's native width */
  }
  /***  Fix menu colors ***/
  #main-menu .dropdown-header {
    color: #999999;
  }
  #main-menu .navbar-default {
    font-size: 1.4em;
  }
  /* set the color of the collapse hamburger icon */
  #main-menu .navbar-default .navbar-toggle {
    border-color: #152e59;
  }
  #main-menu .navbar-default .navbar-toggle .icon-bar {
    background-color: #152e59;
  }
  #main-menu .navbar-default .navbar-nav .open .dropdown-menu {
    font-size: 1em;
  }
  #main-menu .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  #main-menu .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  #main-menu .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: white;
  }
  /*** Although css will collapse double margins in the horizontal direction, it doesn't seem to do it in the vertical direction **/
  #main-menu ul.navbar-nav:first-child {
    margin-bottom: 0px;
  }
  #main-menu ul.navbar-nav:last-child {
    margin-top: 0px;
  }
  #splash-area {
    padding: 1em 0;
    height: inherit;
    display: table;
    /* useful for aligning elements vertically middle */
  }
  #company-description {
    width: 100%;
    position: relative;
    margin: 1em 0;
    top: 0;
  }
  /*    #company-description .coming-soon {
        display: block;
    }
*/
  #splash-area h1#family-name {
    position: relative;
    padding: 0;
    min-height: 60px;
    display: table-cell;
    vertical-align: middle;
  }
  #splash-area #family-image-mobile {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0.4em;
    background: rgba(0, 0, 0, 0.5);
  }
  #main-content {
    padding-left: 0.4em;
    padding-right: 0.4em;
  }
  #video-modal .modal-content,
  #video-modal .modal-content iframe {
    width: 100%;
  }
  .product-table img {
    float: left;
    /* forces text to wrap around the image */
    padding: 0 1em 1em 0;
  }
  .product-table .image-description img {
    max-width: 150px;
    /* handle larger product images */
  }
  .family-page .family-description img {
    width: 100%;
    /* force images added via TinyMCE to fill the entire width */
  }
  .product-page #illustration-image img {
    width: 100%;
    /* force images added via TinyMCE to fill the entire width */
  }
  .family-group .panel-heading h2 {
    font-size: 2.2em;
  }
  .family-box .nav-circle {
    display: none;
  }
  #footer-bar {
    margin-bottom: 0px;
    color: #152e59;
  }
  #footer-bar .h-card .companyCopyright,
  #footer-bar .h-card .p-street-address,
  #footer-bar .h-card .address2 {
    display: block;
  }
}
/* CSS for staff pictures/bios on about us */
#staff2 {
  position: relative;
}
#staff2 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/*#staff2 .clear { clear: both; }*/
#staff2 .thumb {
  float: left;
  margin: 0.6em;
  font-size: 80%;
  text-align: center;
}
#staff2 .zoom {
  display: none;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#staff2 .zoom .media {
  border: 1px solid #999;
  background-color: #fff;
}
#staff2 li img {
  position: relative;
  float: left;
  border: 0 solid #fff;
  width: 50px;
  height: 50px;
}
#staff2 .zoom .bio {
  float: left;
}
#staff2 li:hover .zoom {
  /*    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
*/
}
#staff2 .zoom img {
  width: 100px;
  height: 100px;
  display: inline-block;
}
#staff {
  position: relative;
  height: 100px;
}
#staff .clear {
  clear: both;
}
#staff li {
  position: absolute;
  z-index: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  background-color: white;
  width: 50px;
  box-sizing: content-box;
  /* overrides bootstrap defaults */
}
#staff li.hover {
  border: 1px solid #666666;
  text-align: left;
  padding: 5px;
}
#staff li img {
  position: relative;
  float: left;
  border: 0 solid #fff;
  width: 50px;
  height: 50px;
}
#staff li img.hover {
  margin-right: 10px;
}
#staff li .name {
  float: left;
  width: 50px;
  margin-top: 3px;
  text-align: center;
  color: #666666;
  font-size: 10px;
}
#staff li div.hover {
  width: 190px;
  float: left;
  text-align: left;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 12px;
}
#staff li .bio {
  width: 190px;
  display: none;
  float: left;
  font-size: 12px;
  color: #666666;
}
.staff-text {
  color: #666666;
  font-size: 11px;
}
#staff .last-name {
  display: none;
  /* don't show last names by default */
}
/* End staff pictures */
table#product-table th,
table#product-table td {
  font-size: 0.8em;
  text-align: center;
  padding: 2px;
}
table#product-table th {
  background-color: #003366;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  /* bootstrap override for alignment on mobile */
}
@media only screen and (max-width: 767px) {
  /* mobile only */
  #product-table th div.units {
    display: inline-block;
    font-size: 0.8em;
  }
  #swipe-help {
    display: block;
    text-align: right;
  }
}
@media (min-width: 768px) {
  /* desktop only */
  #swipe-help {
    display: none;
  }
}
/* Setup responsive table that switches columns and rows at lower resolutions

adapted from http://dbushell.com/demos/tables/rt_05-01-12.html 
*/
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.responsive-table th,
.responsive-table td {
  margin: 0;
  padding: 0.4166em;
  /*10*/
  vertical-align: top;
  border: 1px solid #ddd;
  background: #fff;
}
.responsive-table th {
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .responsive-table {
    display: block;
    position: relative;
    width: 100%;
  }
  .responsive-table thead {
    display: block;
    float: left;
  }
  .responsive-table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .responsive-table thead tr {
    display: block;
  }
  .responsive-table th {
    display: block;
  }
  .responsive-table tbody tr {
    display: inline-block;
    vertical-align: top;
  }
  .responsive-table td {
    display: block;
    min-height: 1.25em;
  }
  /* sort out borders */
  .responsive-table th {
    border-bottom: 0;
  }
  .responsive-table td {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .responsive-table tbody tr {
    border-right: 1px solid #ddd;
  }
  .responsive-table th:last-child,
  .responsive-table td:last-child {
    border-bottom: 1px solid #babcbf;
  }
}
/* a hack to detect media queries with jQuery 
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
Used to apply a new "bootstrap breakpoint" at 480px
*/
.width-check {
  float: none;
}
/* 'float = none' when the page is 480px wider */
@media only screen and (max-width: 479px) {
  .width-check {
    float: right;
  }
  /* float = right' when under 480px */
}
/* 
For some reason IE on Windows Phone 8 behaves differently to every other mobile OS by interpreting 
device-width as the actual resolution size, instead of what the manufacturer (or browser vendor) has 
decided is the optimal viewport width (such as the “standard” 320px in portrait).

This fix includes css, the standard html viewport metatag, and JavaScript as documented in the "Update: January 15 2013" section here:

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
*/
@-ms-viewport {
  width: device-width;
}