/*
To compile into CSS in VS Code, run the dedicated Task configured in tasks.json:
Press `Shift + CMD + B`
(Press `Ctrl + ~` (2 times to close the Terminal window)

Or you can open Terminal and run the following from the root folder:
less www/style.less > www/style.css
*/
/* @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: 0.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;
  display: flex;
  position: relative;
}
#branding-info div[class*="col-"] {
  padding: 0;
}
#branding-info #logo {
  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 #quick-info {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 1em;
}
#branding-info #quick-info #phone-number {
  margin-right: 0.4em;
  color: #045086;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 40px;
}
#branding-info #quick-info button {
  height: 40px;
}
#branding-info #quick-info button.home {
  padding: 0;
  width: 40px;
  margin-right: 0.4em;
}
#branding-info #quick-info button.home img {
  width: 25px;
}
#branding-info #quick-info button.email {
  padding: 0;
  width: 40px;
  margin-right: 0.4em;
}
#branding-info #quick-info button.email img {
  width: 22px;
  height: 17px;
}
#branding-info #quick-info button#request-help-text {
  width: 7em;
  line-height: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
  white-space: normal;
}
#branding-info #quick-info button#request-help-text:hover {
  color: #c8001f;
}
#branding-info #quick-info button.dropdown-toggle:hover {
  color: #c8001f;
}
.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 {
  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 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 */
}
#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;
}
.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: 0.2em 0.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%;
}
.family-box-container {
  padding-right: 8px;
  padding-left: 8px;
}
.family-box-container.regular-column .family-box {
  padding: 4% 12%;
}
.family-box-container.regular-column .family-box div.short-desc {
  /* Forces the boxes to have the same height when they are side by side (but not when they are stacked vertically) */
}
@media (min-width: 480px) {
  .family-box-container.regular-column .family-box div.short-desc {
    height: 7em;
  }
}
.family-box-container.full-width-column .family-box {
  padding: 4% 12%;
}
@media (min-width: 768px) {
  .family-box-container.full-width-column .family-box {
    padding: 1% 3%;
  }
  .family-box-container.full-width-column .family-box h3 {
    margin: 0;
    line-height: 2em;
  }
}
.family-box-container.full-width-column .family-box .nav-circle {
  right: -0.2em;
  bottom: 0;
}
.family-box {
  position: relative;
  border-radius: 0px;
  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 20px 2px rgba(255, 255, 255, 0.65);
  /* <<< 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);
  min-height: 50px;
  /*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:hover,
.family-box.selected {
  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:hover .nav-circle,
.family-box.selected .nav-circle {
  background-color: #51854C;
}
.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 .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 .panel-heading h2 {
  font-size: 3em;
  text-transform: uppercase;
  margin: 0.1em 0;
  color: #152e59;
  font-weight: normal;
}
.family-group .family-box {
  margin-bottom: 1.4em;
}
.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;
}
.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;
  /* override .family-box settings */
}
.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;
}
.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 .nav-circle {
  bottom: 0.2em;
  right: 0.2em;
  font-size: 1.4em;
}
.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;
}
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;
}
.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);
}
.required-field {
  color: #dd0000;
  font-size: 0.7em;
  vertical-align: super;
}
.required-field:before {
  font-family: "FontAwesome";
  content: "\f069";
}
.requestHelp .page-description {
  font-size: 1.2em;
  line-height: 1.2em;
}
.requestHelp small {
  display: block;
}
.requestHelp .panel-title {
  color: #045086;
  font-size: 150%;
}
.requestHelp .input-group-addon .radio-inline {
  padding-top: 0;
  margin-bottom: -1px;
}
@media (max-width: 767px) {
  .requestHelp #country {
    margin-top: 5px;
  }
}
/* 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;
  }
}
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;
  }
}
/* 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 is a random unused span in the html used to detect the page size
*/
.width-check {
  float: none;
}
@media only screen and (max-width: 479px) {
  .width-check {
    float: right;
  }
}
/*
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;
}
/* 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;
  }
}