/* Tags */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: #009999;
  margin: 1em 0 .4em;
}

h2 {
  color: #37619a;
}

h3{
  font-size: 1.1rem;
}

h1, h2 {
  font-weight: normal;
}

h4 {
  font-size: 14px;
}

h1 a {
  text-decoration: none;
}

h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: underline;
}

h5{
  color: black;
  font-weight: bold;
}

a:visited {
  color: #4d7ebf;
}

a:hover {
  color: black;
  text-decoration: underline;
}

a:active {
  color: #37619a;
}

a.IconLink {
  padding: 0 0 0 18px;
  display: inline-block;
  background: transparent url('WebResource.axd?d=-CESiSKie1D7sUdl722C17ZTY6xdNJxORGoXdBlwFqVf8joPqCShR2WyuLBViDfh6YIZrxxCuMRAjbmFrF1y10o_R05eIeOM204RgbFTOXvLTMr-mgn-doYAeQyC1dDd2O3qXkASmO_5qH6L2RVCtZmruy9QAIMaIKQfHG7JPkLwgaxCRij4yeqfgBS9WNzWu2y7wA2&t=639093379229339594') no-repeat left 2px;
  text-decoration: none;
}

  a.IconLink:hover {
    background-position: left -98px;
    text-decoration: underline;
  }

/* FNL Overrides */
#FnlSubSitePage > .InnerPage {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5efef+0,fefefe+44 */
  background: rgb(229,239,239); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(229,239,239,1) 0%, rgba(254,254,254,1) 100px); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(229,239,239,1) 0%,rgba(254,254,254,1) 100px); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(229,239,239,1) 0%,rgba(254,254,254,1) 100px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5efef', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

  #FnlSubSitePage > .InnerPage > .PageContainer > .WidthContain {
    background: transparent;
  }

.WidthContain {
  width: 1000px;
}

/*Site Header Updates - WILL BE MOVED TO */


/*** BANNER STYLES ***/

#FnlSubSiteHeader .SubSiteHeader .WidthContain #SiteHeadlines h2 a {
  color: #009999;
}

/* Top Navigation */
#FnlSubSiteNavigation ul > li.Selected > a,
#FnlSubSiteNavigation ul > li.Selected > a:hover {
  background: #bcd5d6;
}

/* Sub-Branded */
#FnlSubSitePage.SubBranded > .InnerPage > .PageContainer {
  background-image: url('WebResource.axd?d=TbEzVPWDYx94AoWBEYUkjh--B2jfnh8w9KjtBMWvDMzX7Bg1pM_5Pot9ssj8rjYN87TF5WYSzFhc0nngA6JIMTXjnGK50hrbyKA0VCNkyC5mHRuVza77i0Xxq-Ana9HoZxixu_cp0e-j878uU0UuUyHIJGtX9gttcJnhiFtuYIwuycsN4k9MLiuQMDo8TD0fZYFD5Wa-qGf2yV37vCYHvNr1Z8evjZEYD5du9Umy5uI8eYaa0&t=639093379229339594');
}

#FnlSubSitePage.SubBranded #FnlSubSiteMain {
  background-image: url('WebResource.axd?d=iAiwYYc-fBdiKEMRI-1iX9rqmB3rrqMY3uRQ6n1lo188v9zUQL3k5Fgnt_trBBOF8_DEZ6LW2ib7O76FEtwBVY8S98o-IrE10dV5vF_UKxjfqLL9FJvozggkQbsgRywqbukqGBgy312RCa0LFAhfndFQ3qCYtQ9jeSXk_Znei8fRu9Ez5K3ik42JdNZ189MUhDsFVm5BjFE5XM4gnB8fXtPpGGo1&t=639093379229339594');
}


/* Main content */
#FnlSubSiteMain > .MainContent {
  line-height: 1.4em;
  font-size: 12px;
}

/* Floating Side Bar page */

#FnlSubSiteSideBar.Floating > h2,
#FnlSubSiteSideBar.Floating > div.SideNavWrapper > h2 {
  background-image: url('WebResource.axd?d=wouoOXZARhw9pm2c_-9dWJEScpI4pbneuAyDmE0MZR9IamxaqiZMflCUC4rvPQhnkrQ8LizL36S4MMU2DYNLc_MlHRP9krV-uRsmelCtJmTH8OigjxbONAwUMc9-0QYLKB7xjmhHbKvNztUN1nNfiY1-c4Gy-TqT9QKvBp9nkDNJKFJP_YhTn9npPkwaI6PDYD-GZQ2&t=639093379229339594');
  border: solid 1px #d6d6d6;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 10px 11px 10px 11px;
  background-color: #FFF;
}



.FnlGridViewHeader,
table.FnlTable > tr:first-child > th,
table.FnlTable > tbody:first-child > tr:first-child > th,
table.FnlTable > thead:first-child > tr:first-child > th,
table.FnlTable.Sortable > tr:first-child > th,
table.FnlTable.Sortable > tbody:first-child > tr:first-child > th,
table.FnlTable.Sortable > thead:first-child > tr:first-child > th {
  background-color: #009999;
}



/* Ehs Sub Site Side Nav*/
#FnlSubSiteSideBar h2,
#FnlSubSiteSideBar div > h2 {
  background-color: #ccebeb;
  border-left: 3px solid #9fc9c9;
}

#FnlSubSiteSideBar nav.SideNavigation > ul > li > a {
  border-left: 2px solid #9fc9c9;
}

/* Flipped Cards */
ul.CardFlipContainer {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

  ul.CardFlipContainer > li {
    margin: 10px;
    background: #F7F7F7;
    list-style: none;
    max-height: 100px;
    width: 355px;
  }

  ul.CardFlipContainer li .FrontSide {
    display: flex;
  }

  ul.CardFlipContainer li.BackSide {
    max-height: none;
    margin-bottom: auto;
  }

    ul.CardFlipContainer li.BackSide ul {
      padding: 10px 0px 10px 30px;
      list-style: disc;
    }

  ul.CardFlipContainer li .FrontSide span {
    flex: 1.2;
    color: #009999;
    line-height: 31px;
    padding: 33px 40px;
    font-size: 26px;
  }

  ul.CardFlipContainer li .FrontSide.FrontSideLonger span {
    padding: 18px 33px;
  }

  ul.CardFlipContainer li .FrontSide .FrontSideImage {
    flex: .5;
    margin: 5px;
    background-size: contain;
    background-position: center;
    height: 90px;
    background-repeat: no-repeat;
  }

  ul.CardFlipContainer .BackSide h1 {
    margin: 1em 20px .5em 20px;
  }

  ul.CardFlipContainer li.BackSide .BackSide > div {
    padding: 10px 20px 10px 23px;
  }

/* This class needs to be added to the application for every image needed for the flip card. Just add
    the chronological number within the nth-child() to add the next image. Example is below. Add a class
    after the CardFlipContainer class to set specific background images to that container.
    
  ul.CardFlipContainer{ Add Specific Container Class Here } li:nth-child(1) .FrontSide .FrontSideImage {
    background-image: url(../Media/Images/Ergonomics/GeneralErgonomicBox.jpg);
  }

*/


.DisplayNone {
  display: none !important;
}