/* Stylesheet for the persistent sub-header bar */
#header-sub-bar {
  padding: 0 10px;
  background-color: #C0C0C0;
  /*border-bottom: 3px solid #999;*/
  color: #000;
}

#header-sub-bar > div {
  overflow: visible !important;
}

/* Flex gird approach */
/*
#header-sub-bar-row-1 {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  align-items: stretch;
  font-size: 1em;
}

#header-sub-bar-row-1 .weather-settings-icon,
#header-sub-bar-row-1 .weather-location,
#header-sub-bar-row-1 .weather-temp,
#header-sub-bar-row-1 .weather-condition,
#header-sub-bar-row-1 .weather-wind {
  padding: 0 3px;
  line-height: 24px;
}

#header-sub-bar-row-1 .weather-settings-icon {
  cursor: pointer;
}

#header-sub-bar-row-1 .weather-location {
  font-weight: bold;
}

#header-sub-bar-row-1 .weather-condition img {
  width: 24px;
  height: auto;
}
*/

/* CSS table layout approach */
#header-sub-bar-row-1 {
  font-size: .85rem;
  /*text-align: right;*/
}

/*#header-sub-bar-row-1 .region-facts {
  text-align: right;
}*/

#header-sub-bar-row-2 {
  padding-top: 3px;
  font-size: .85rem;
  text-align: right;
}

/*
#header-popular-articles-button {
  float: right;
  padding: 0 0 5px 0;
}

#header-find-it-button {
  float: right;
  padding: 0 6px 5px 0;
}

#surprise-me-button {
  float: right;
  padding: 0 6px 5px 0;
}*/

.subnav-buttons--desktop {
  /*display: inline-block;*/
  width: 340px;
  text-align: center;
  color: #fff;
  font-size: 10px;
}

.subnav-buttons--desktop .subnav-button-wrap {
  padding: 4px 0;
  border-left: 3px solid #fff;
}

.subnav-buttons--desktop .subnav-button-wrap a,
.subnav-buttons--desktop .subnav-button-wrap a:visited,
.subnav-buttons--desktop .subnav-button-wrap a:hover,
.subnav-buttons--desktop .subnav-button-wrap a:focus,
.subnav-buttons--desktop .subnav-button-wrap a:active {
  display: block;
  color: #fff;
  text-decoration: none;
}

.subnav-buttons--desktop .subnav-button-wrap.findit-nav-btn,
.subnav-buttons--mobile .subnav-button-wrap.findit-nav-btn {
  background-color: #9BCA3B;
}


.subnav-buttons--desktop .subnav-button-wrap:hover {
  background-color: #f16522;
}

/* Highlight appropriate button if the page corresponding to that
  button is currently active */
#page-id-1033 .subnav-buttons--desktop .subnav-button-wrap.btn-magazine,
#page-id-749 .subnav-buttons--desktop .subnav-button-wrap.btn-findit,
#page-id-772 .subnav-buttons--desktop .subnav-button-wrap.btn-trending {
  background-color: #f16522;
}

.subnav-buttons--desktop .subnav-button-wrap:last-of-type {
  border-right: 3px solid #fff;
}

.subnav-buttons--desktop img {
  display: block;
  margin: 0 auto;
  width: 34px;
}

.subnav-buttons--mobile {
  /*display: inline-block;*/
  /*width: 400px;*/
  display: none;
  position: fixed;
  text-align: center;
  color: #fff;
  font-size: 10px;
  background-color: #fff;
  width: 100%;
  bottom: 0;
  padding-top: 8px;
}

.subnav-buttons--mobile > .css-table {
  background-color: #C0C0C0;
}

.subnav-buttons--mobile .subnav-button-wrap {
  padding: 4px 0;
  border-left: 3px solid #fff;
}

.subnav-buttons--mobile .subnav-button-wrap:first-child {
  border: none;
}

.subnav-buttons--mobile .subnav-button-wrap a,
.subnav-buttons--mobile .subnav-button-wrap a:visited,
.subnav-buttons--mobile .subnav-button-wrap a:hover,
.subnav-buttons--mobile .subnav-button-wrap a:focus,
.subnav-buttons--mobile .subnav-button-wrap a:active {
  display: block;
  color: #fff;
  text-decoration: none;
}

.subnav-buttons--mobile .subnav-button-wrap:hover {
  background-color: #f16522;
}

/* Highlight appropriate button if the page corresponding to that
  button is currently active */
.subnav-buttons--mobile.page-id-1033 .subnav-button-wrap.btn-magazine,
.subnav-buttons--mobile.page-id-749 .subnav-button-wrap.btn-findit,
.subnav-buttons--mobile.page-id-772 .subnav-button-wrap.btn-trending {
  background-color: #f16522;
}

/*
.subnav-buttons--mobile .subnav-button-wrap:last-of-type {
  border-right: 3px solid #fff;
}
*/

.subnav-buttons--mobile img {
  display: block;
  margin: 0 auto;
  width: 34px;
}

@media only screen and (max-width: 990px) {
  #header-sub-bar {
    padding: 0;
  }

  .subnav-buttons--mobile {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  #header-sub-bar {
    background-color: #DDD;
  }
}