html, body {
  height: 100%;
}

body {
  color: #4a4a4a;
}

button {
  border: 0;
  background: none;
  padding: 0;
}

.animate-transforms {
  -webkit-transition: -webkit-transform 0.2s;
     -moz-transition: -moz-transform 0.2s;
      -ms-transition: -ms-transform 0.2s;
          transition: transform 0.2s;
}

.animate-opacity {
  -webkit-transition: opacity 0.2s;
     -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
          transition: opacity 0.2s;
}

.promoted-layer {
  /*
  This class forces an element to be "promoted" to use
  GPU rendering in supporting browsers.

  At the moment browsers are not very good at switching
  elements between software and hardware rendering. So,
  for example, an element that gets a CSS transition applied
  will render slightly differently during that transition.
  This often manifests as a visible switch in a font's
  antialiasing during animation or the element flickering.

  By giving an element this class, it will always be
  rendered by the GPU and so will always look the same,
  even during transitions.
  */
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

#full-page-viewport-wrapper {
  /*
  overflow-x: hidden;
  overflow-y: auto;
  */
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

#full-page-transforms-wrapper {
  position: relative;
  background: white;
  color: #4a4a4a;
}

#header {
  position: relative;
  height: 56px;
  background: white;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

#header, #header * {
  font-size: 13px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#support-links {
  display: block;
  float: right;
  height: 56px;
  text-transform: uppercase;
}

  #support-links button
, #support-links a
, #support-links p
{
  display: inline-block;
  height: 56px;
  line-height: 56px;
  color: black;
  text-align: center;
  font-weight: 400;
  margin: 0;
  padding: 0 10px;
}

#login-wrapper {
  width: auto;
  max-width: 250px;
  float: right;
  margin: 0 15px;
}

#login-wrapper li {
  display: inline-block;
}

#login-wrapper li.user-logout {
  margin-left: 5px;
}

#login-wrapper a {
  padding: 0;
}

i.user-icon {
  /* Hidden from other sites with an inline style in
     util.html. Override that and show it for WNYC. */
  display: inline-block !important;
  font-size: 18px;
  margin-right: 6px;
}

#logout {
  opacity: .5;
}

#support-links p.header-wide-button a {
  width: 100%;
}

#brand-logo {
  position: absolute;
  top: 15px;
  left: 50%;
  text-indent: -9999px;
  z-index: 1;
  width: 62px;
  height: 25px;
  margin-left: -31px;
  background: url('/static/img/wnyc/wnyc-sprite-vector.svg') no-repeat 0 -26px;
  background-size: 62px;
}

#brand-strap-line {
  font-weight: 400;
  display: none;
}

#header button {
  font-size: 1.3em;
  overflow: visible; /* IE8 adds extra padding on buttons without this */
}

#header button a {
  display: block;
  height: 100%;
  text-decoration: none;
}

#header button,
#header button a {
  line-height: 56px;
  height: 56px;
  cursor: pointer;
  font-weight: 400;
}

#search-wrapper {
  float: left;
}

#search-button {
  display: block;
  float: left;
  width: 55px;
}

#search-button .fa-search {
  font-size: 17px;
}

#search-form {
  display: block;
  position: relative;
  height: 56px;
  line-height: 56px;
  float: left;
  left: -6px;
}

#search-input {
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
  color: #000;
  width: 200px;
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scale(0, 1);
     -moz-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
          transform: scale(0, 1);
}

.input-is-open #search-input {
  cursor: text;
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
}

#search-form label {
  font-weight: 400;
  position: absolute;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 55px;
  opacity: 1;
  left: 0;
  bottom: 0;
  cursor: pointer;
}

.input-is-open #search-form label {
  opacity: 0;
  pointer-events: none;
}

#menu-button {
  width: 90px;
}

#menu-button-label {
  /* override webkit's 'buttonface' and other browsers' equivalents */
  font: 400 13px 'Gotham SSm A', 'Gotham SSm B',
    Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
  text-transform: uppercase;
  position: absolute;
  display: block;
  left: 47px;
  top: 0;
  line-height: 58px;
  cursor: pointer;
}

.menu-button-bar {
  position: absolute;
  width: 18px;
  height: 3px;
  left: 15px;
  top: 50%;
  margin-top: -2px;
  background: black;
}

.menu-button-bar.bar-1 {
  margin-top: -8px;
}

.menu-button-bar.bar-3 {
  margin-top: 4px;
}

#header-social-media-links,
#menu-button-weather {
  display: none;
}

#header a,
#menu-button,
#search-wrapper {
  text-decoration: none;
  color: black;
}

#header a:hover,
#menu-button:hover,
#search-wrapper:hover,
#search-wrapper:hover a {
  text-decoration: none;
  color: #999;
}

#menu-button .menu-button-bar {
  background: black;
}

#menu-button:hover .menu-button-bar {
  background: #999;
}

/*
  Smaller screens
*/
@media screen and (max-width:850px)
{
  #menu-button-label,
  #login-wrapper,
  #search-button,
  #search-form {
    display: none;
  }


} /* end @media rule */

/*
  Smallest screens
*/
@media screen and (max-width:399px)
{
  #header #menu-button {
    width: 56px;
  }

  #menu-button-label {
    display: none;
  }
}

/*
  Internet Explorer Overrides
*/
  .lte-ie8 #search-form label
, .ie9 .input-is-open #search-form label
{
  display: none;
}


.navigation-open #full-page-viewport-wrapper {
  overflow: hidden;
}

  #navigation-menu
, #subnavigation-menu
{
  width: 100%;
  height: 100%;
  top: 0;
}

#navigation-menu {
  position: fixed;
  left: -100%;
  z-index: 9000;
}

#navigation-menu, #navigation-menu * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#subnavigation-menu {
  position: absolute;
  left: 200%;
  background: black;
}

  #navigation-items-wrapper
, #subnavigation-menu
{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.open-nav-site-overlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9000;
}

.navigation-open .open-nav-site-overlay {
  display: block;
}

.navigation-open #navigation-menu,
.navigation-open #full-page-transforms-wrapper
{
  -webkit-transform: translate3d(100%, 0, 0);
     -moz-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.subnavigation-open #navigation-menu
{
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.navigation-open #subnavigation-menu {
  -webkit-transform: translate3d(-100%, 0, 0);
     -moz-transform: translate3d(-100%, 0, 0);
      -ms-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

#navigation-menu .close-button {
  color: white;
  height: 56px;
  width: 56px;
  font-size: 35px;
  line-height: 56px;
  cursor: pointer;
}

#navigation-menu li {
  padding: 0;
  display: table-row;
}

#navigation-items-wrapper {
  height: 100%;
  width: 100%;
  background: black;
}

#navigation-items {
  padding: 0;
  margin: 0;
  list-style: none;
  display: table;
  width: 100%;
}

#navigation-items li {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.3em;
}


@media screen and (min-width:900px) {
  #navigation-items li .js-launch-search,
  #navigation-items li.secondary .donation,
  #navigation-items li.secondary a.user-login,
  #navigation-items li.secondary a.user-logout {
    display: none !important;
  }
}

#navigation-items .secondary a.user-logout,
#navigation-items .secondary a.user-login {
  opacity: 1;
}

#navigation-items .secondary a label {
  cursor: pointer;
}

#navigation-items li a {
  color: white;
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
  height: 3.9em;
  padding: 0 0 0 1.25em;
  border-left: 4px solid transparent;
  background-color: transparent;
  position: relative;
}

#navigation-items li a:hover {
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.4); /* Transparent background in supporting browsers */
}

#navigation-items li.has-subnav i {
  float: right;
  margin-right: .5em;
  position: relative;
  top: 2px;
  font-size: 20px;
  transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}

#navigation-items .secondary {
  font-size: .95em;
}

#navigation-items .secondary a {
  padding: 0 0 0 1.7em;
  height: 3.2em;
}

#navigation-items .secondary.two-line-title a {
  height: 5.5em;
}

#subnavigation-menu ul {
  margin: 0;
  height: auto;
  min-height: 100%;
}

#subnavigation-menu li {
  display: table-row;
}

#subnavigation-menu .loading, /* loading message */
#subnavigation-menu li h4, /* title */
#subnavigation-menu li a {
  display: table-cell;
  vertical-align: middle;
  height: 35px;
  width: 280px;
  padding: 0 2em;
  color: white;
}

#subnavigation-menu li a h4 {
  color: #4a4a4a;
}

#subnavigation-menu li a:hover {
  text-decoration: none;
  background: rgba(0,0,0);
  background: rgba(0,0,0,0.5); /* Transparent background in supporting browsers */
}

#navigation-photo-credit {
  display: none;
}

/*
  IE 8 & 9 Overrides

  IE 8 gets the base mobile view because it doesn't support media
  queries. Additionally, transforms are not supported and so positioning
  must happen with left/right/top/bottom properties.

  IE 9 is affected by media queries (and therefore adjusts between
  mobile/desktop views) but doesn't support animated or 3D transforms and
  so elements likewise get positioned with the CSS positioning properties.
*/

  html.lte-ie8.navigation-open    #full-page-transforms-wrapper
, html.lte-ie8.navigation-open    #navigation-menu
, html.ie9.navigation-open        #navigation-menu
, html.lte-ie8.subnavigation-open #full-page-transforms-wrapper
, html.lte-ie8.subnavigation-open #subnavigation-menu
{
  left: 0;
}

  html.ie9.navigation-open    #full-page-transforms-wrapper
, html.ie9.subnavigation-open #subnavigation-menu
{
  left: 280px;
}

html.ie9.subnavigation-open #full-page-transforms-wrapper {
  left: 560px;
}

html.ie9.navigation-open #subnavigation-menu {
  display: none;
}

html.ie9.navigation-open.subnavigation-open #subnavigation-menu {
  display: block;
}

@media screen and (min-width:800px) {

/*
body {
  overflow: hidden;
}
*/

#menu-button {
  position: relative;
  float: left;
}

#search-wrapper {
  margin-left: 20px;
}

}/* end @media rule */

@media screen and (min-width:800px) {

  .navigation-open #full-page-viewport-wrapper {
    /* Maintain scrollability when the nav is open in desktop view. */
      /*
    overflow-x: hidden;
    overflow-y: auto;
    */
  }

  .navigation-open #full-page-transforms-wrapper {
    -webkit-transform: translate3d(220px, 0, 0);
       -moz-transform: translate3d(220px, 0, 0);
        -ms-transform: translate3d(220px, 0, 0);
            transform: translate3d(220px, 0, 0);
  }

  .subnavigation-open #full-page-transforms-wrapper {
    -webkit-transform: translate3d(500px, 0, 0);
       -moz-transform: translate3d(500px, 0, 0);
        -ms-transform: translate3d(500px, 0, 0);
            transform: translate3d(500px, 0, 0);
  }

  #navigation-menu {
    width: 220px;
    left: -220px;
    z-index: 4000; /* Must be higher than content to intercept taps on ipad */
  }

  #subnavigation-menu {
    width: 280px;
    left: -60px;
    background-color: black;
    background-image: url('/static/img/wnyc/bk-bridge.jpg');
    background-position: -280px 0;
    background-repeat: no-repeat;
  }

  .navigation-open #subnavigation-menu {
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  .navigation-open #navigation-menu,
  .subnavigation-open #navigation-menu {
    -webkit-transform: translate3d(220px, 0, 0);
       -moz-transform: translate3d(220px, 0, 0);
        -ms-transform: translate3d(220px, 0, 0);
            transform: translate3d(220px, 0, 0);
  }

  .subnavigation-open #subnavigation-menu {
    -webkit-transform: translate3d(280px, 0, 0);
       -moz-transform: translate3d(280px, 0, 0);
        -ms-transform: translate3d(280px, 0, 0);
            transform: translate3d(280px, 0, 0);
  }

    #navigation-items-wrapper > .close-button
  , #subnavigation-menu > .close-button
  {
    display: none;
  }

  #navigation-items {
    width: 220px;
    left: 0;
  }

  #navigation-items-wrapper {
    background-color: black;
    background-image: url('/static/img/wnyc/bk-bridge.jpg');
    background-repeat: no-repeat;
  }

  #subnavigation-items {
    padding: 1em 0;
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.4);
  }

  #navigation-items li a.active-nav-item {
    background: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.6);
    border-left: 4px solid #DE1E3D;
  }

  #navigation-photo-credit {
    display: none;
    width: 100%;
    margin: 65px 0 0 20px;
    font-size: .9em;
  }

  @media screen and (min-height: 500px) {
    #navigation-photo-credit {
      position: absolute;
      bottom: 20px;
    }
  }

  #navigation-photo-credit p {
    color: #adadad;
    margin: 0;
  }

  #navigation-photo-credit a {
    color: #dd1e3d;
  }

} /* end @media rule */