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 */

/*  TODO: define certain cases for 100% imgs */
/*
img, video, object, table {
  width: 100%;
}
*/

@media screen and (max-width:980px) {
}

@media screen and (max-width:810px) {
/*@media screen and (max-width:1024px) {*/
  .sidebar {
    display: none;
  }
}

@media screen and (max-width:810px) {
  .article-videoplayer,
  .user-embedded-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
  }
  .article-videoplayer object,
  .article-videoplayer iframe,
  .user-embedded-video object,
  .user-embedded-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

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

@media screen and (max-width:380px) {
  #mobile-app-ad-inner {
    font-size: 15px;
  }
  #mobile-app-ad-inner span.type {
    font-size: 30px;
  }
  #mobile-app-ad a#download {
    margin: 4% 3% 0;
  }
}

/* WNYC Font details */

@font-face {
  font-family: 'WNYC';
  src:
    url('/media/webfonts/WNYC/wnyc-font.woff') format('woff'),
    url('/media/webfonts/WNYC/wnyc-font.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
.wif
{
  font-family: 'WNYC' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wif-broadcast-tower:before {
  content: "\e000";
}
.wif-wnyc:before {
  content: "\e001";
}
.wif-shows:before {
  content: "\e002";
}
.wif-discover:before {
  content: "\e004";
}



/* Mobile / default / no media queries */

body {
  background-color: #f5f5f5 !important; /* !important is for ie7,8 */
  font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif;
  font-weight: 300;
}

#site {
  width: auto !important; /* !important is for ie7,8 */
}

.site-container {
  padding: 0;
}

a[class*="fa-"]:hover {
  text-decoration: none;
}

/* nav */

#header_container {
  background-color: #e11837;
  height: 50px;
}

#mobile-header {
  display: block;
  font-size: 2em;
  position: absolute;
  width: 100%;
  z-index: 1003;
}

#mobile-header a {
  color: #fff;
  display: inline-block;
  width: 14%;
  line-height: 50px;
  text-align: center;
  padding-bottom: 20px;
}

#mobile-header a.home {
  width: 67%;
}

#mobile-header a.home:hover {
  text-decoration: none;
}

#mobile-header .home span {
  color: #fff;
  line-height: 50px;
  font-size: 1.6em;
}

#mobile-header .icon-reorder,
#mobile-header .icon-play {
  position: relative;
  top: -7px;
}

#mobile_nav.menu-region {
  display: none;
  background-color: #353b3d;
  z-index: 1002;
  width: 100%;
  padding-top: 50px;
}

.menu-section h4 {
  display: none;
}

#mobile_nav .menu-container {
  height: auto;
  background-color: #474e51;
}

#mobile_nav a:hover {
  text-decoration: none;
  color: #aaa;
}

#btn-mobile-nav.active {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  top: -18px;
  left: -10px;
}

.main-menu-item-li li {
  color: #aaa;
  display: block;
  padding: 15px 10px;
  border-top: 1px solid #50575a;
  border-bottom: 1px solid #3e4547;
  font-size: 18px;
}

#header_nav,
#header_nav_right {
  display: none;
}

#wnyc_popdown,
#stream_launch_widget,
#technical-message,
#twitterbox,
#wnyc-newsletter,
#wnyc-home-sidebar-top,
#damost-nav {
  display: none;
}

#wnyc_mobile_popdown{
  display: block;
}

#footer_container {
  background: none;
  margin: 0;
}

#footer_container a {
  color: #0073d5;
}

.footer_copyright {
  color: #666;
}

#footer_container .logo,
#footer_container .social,
#footer_container .about,
#footer_container .nypr_lockup,
#footer_container .border,
.footer_copyright p {
  display: none;
}

#breaking {
  color: #e11837;
  font-weight: bold;
  padding: 2% 4% 1%;
}

#breaking a {
  color: #e11837;
  text-decoration: underline;
}

/* stories */

.bucket {
  position: relative;
}

.shelf {
  clear: both;
  position: relative;
  margin: 3em 0;
}

.edit-tout,
.edit-bucket {
  position: absolute;
  top: 8px;
  right: 8px;
}

.edit-bucket { right: 4%; }

.bucket-title,
#damost-nav {
  text-transform: uppercase;
  margin: 0 4%;
}

.bucket-title a,
#damost-nav li.active a {
  color: #444;
}

#damost-nav li {
  margin-right: 30px;
}

.bucket li,
#damost ol li {
  list-style-type: none;
  position: relative;
  margin: 2% 4% 10%;
  width: 92%;
}

.ad_container {
  overflow: hidden;
}

.puppy-card {
  box-sizing: border-box;
  -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

.story-wrapper,
#damost ol li {
  background-color: white;
  min-height: 349px;
}

.story-wrapper {
  position: relative;
  padding-bottom: 42px; /* room for puppy-btns */
}

.story-wrapper h2,
#damost ol li .title {
  display: block;
  font-size: 14px;
  line-height: 1.5em;
  color: #222;
  margin-bottom: 5px;
}

.story-wrapper h2 a {
  transition: color 80ms ease-in 0s;
  -moz-transition: color 80ms ease-in 0s;
  -webkit-transition: color 80ms ease-in 0s;
  -o-transition: color 80ms ease-in 0s;
}

.story-wrapper h2 a:hover {
  text-decoration: none;
  color: #777;
}

.media-wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
}

.story-wrapper .show-name {
  margin: 0 0 8px 0;
  font-size: 12px;
}

.story-wrapper .text,
#damost .title {
  margin: 10px;
  line-height: 1.5em;
  color: #666;
  padding: 0 0 8% 0;
  box-sizing: border-box;
}

.text.no-image {
  display: inline-block;
  padding-top: 4%;
}

.shelf .text.image .description {
  display: none;
}

.description p {
  margin: 0;
  line-height: 1.7em;
}

.story-wrapper .media,
#damost .media {
  display: block;
  width: 100%;
  overflow: hidden;
}

.media img {
  width: 100%;
}

.no-object .media_buttons,
.media_buttons {
  display: inline-block;
  margin: 0;
}

.button-wrapper {
  position: absolute;
  bottom: 15px;
}

.button-wrapper span {
  display: none;
}

/* These elements also have fontawesome classes,
   which have styles defined in media/webfonts/fontawesome/  */

.button-wrapper .puppy-btn {
  display: inline-block;
  font-size: 1.5em;
  background-color: #0dbcee;
  background-image: none;
  margin-right: 10px;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
}

.button-wrapper .puppy-btn.Download {
  display: none;
}

.button-wrapper .fa-play:before {
    /* Infuriatingly, the play icon in fontawesome does not center properly. */
  padding: 0 0 0 2px;
}

.button-wrapper .puppy-btn:hover {
  background-color: #0058aa;
}

.button-wrapper .puppy-btn:active {
  background-color: #00284d;
}

#wnyc_home a.commentlink {
  background: transparent url('/media/img/wnyc/wnyc_sprite.png') no-repeat -68px -188px;
  width: 24px;
  height: 17px;
  text-align: center;
  margin-left: 3px;
  font: 400 10px "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-top: 2px;
  display: inline-block;
  color: #fff;
  opacity: .7;
}

#wnyc_home a.commentlink span {
  display: none;
}

.related h4 {
  display: none;
}

.related li {
  position: relative;
  padding-left: 30px;
  margin: 1em 0 0;
}

.related li:before {
  content: '\2192';
  color: #0073d5;
  position: absolute;
  left: 10px;
}

#wnyc-home-giveaways .bucket-title,
#wnyc-home-giveaways ul {
  display: inline-block;
  vertical-align: top;
}

#wnyc-home-giveaways {
  margin-bottom: 2em;
}

#wnyc-home-giveaways li {
  padding: 8px 15px 0;
}

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

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

  #header-inner,
  #footer-inner,
  #site {
    width: 95% !important;
    min-width: 960px;
    max-width: 1120px;
    margin: 0 auto;
  }

  /* nav */

  #mobile-header,
  .damost-mobile-header {
    display: none;
  }

  #header_nav,
  #header_nav_right,
  #stream_launch_widget,
  #technical-message,
  #twitterbox,
  #wnyc-newsletter,
  #wnyc-home-sidebar-top,
  #damost-nav,
  #footer_container .logo,
  #footer_container .social,
  #footer_container .about,
  #footer_container .nypr_lockup,
  .footer_copyright p {
    display: inline-block;
  }

  #wnyc_popdown,
  #footer_container .border {
    display: block;
  }

  body {
    font: 300 9.5pt 'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
  }
    
  #wnyc_mobile_popdown{
    display: none;
  }

  /* TODO: Overrides of selectors in screen_wnyc.css */
  #header_nav_right {
    float: right;
  }

  #header_nav_right li {
    float: none;
  }

  #header_container {
    background-color: #fff;
    height: 90px;
  }

  #header_container #header_login {
    margin-top: .4em;
  }

  #header_login .user-login {
    margin-top: 0;
  }

  #footer_container {
    background-color: #292929;
  }

  #footer_container a {
    color: #fff;
  }
  /* end Overrides */

  #breaking {
    padding: 0;
  }

  #stream_launch_widget {
    margin-left: 0;
    margin-right: 1.5625%;
    min-width: 96.875%;
    width: 100%;
  }
  
  #stream_launch_widget #popup-btn {
    width: 9.6%;
  }

  #stream_launch_widget .show {
    width: 65%;
  }

  .top-stories {
    width: 66%;
    float: left;
  }

  .bigbox_ad {
    float: right;
    margin-top: 2.6em;
  }

  #wnyc-home-sidebar-top {
    width: 300px;
    float: right;
  }
  
  #wnyc-newsletter {
    width: 300px;
    float: right;
  }

  .bucket-title,
  #damost-nav {
    margin: 0;
  }

  .bucket li,
  #damost ol li {
    float: left;
    margin: 1em 1.3em 2em 0;
    width: 18.6%;
  }

  .bucket li.last,
  #damost ol li.last {
    margin-right: 0;
  }

  #home-primary li {
    width: 100%;
  }

  #home-primary .story-wrapper {
    padding: 0;
    min-height: 337px;
  }

  #home-primary .media-wrapper {
    width: 47.5%;
    float: left;
  }

  #home-primary .text {
    width: 47.5%;
    margin: 15px 10px;
    float: right;
    padding: 5px 15px 42px 0; /* room for puppy-btns */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  #home-secondary .text {
    padding: 5px 15px 42px 10px;
  }

  #home-secondary .media {
    max-height: 268px;
  }

  .story-wrapper h2,
  #damost ol li .title {
    font-size: 14px;
  }

  #home-primary h2 {
    font-size: 18px;
    line-height: 28px;
  }

  #home-secondary h2 {
    font-size: 18px;
  }

  .bucket .related li {
    margin: 1em 0 0;
  }

  #home-secondary li {
    width: 48.5%;
    margin-right: 15px;
  }

  #home-secondary li.last {
    margin-right: 0;
  }
  
  #home-secondary .related li {
    width: 90%;
  }

  .shelf .media,
  #damost .media {
    height: 145px;
  }

  #damost .tab ol li {
    clear: none !important; /* !important is for ie7,8 */
  }

  #wnyc-home-giveaways li {
    padding: 0 10px 5px;
  }

  #home_bigbox2_bg {
    display: inline-block;
    margin: 1em 0 0 1.3em;
    background-color: #eee;
    position: relative;
    width: 37%;
    height: 350px;
  }

  #home_bigbox2_ad {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    margin-left: -150px;
  }


}

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

/* Wider than standard desktop size */
@media screen and (min-width: 1140px) {

  #wnyc_home,
  #header-inner,
  #footer-inner,
  #site {
    width: 100%;
  }
  
  #home-primary h2 {
    font-size: 24px;
    line-height: 31px;
  }

  #header_nav_right li {
    float: right;
  }

  #header_container #header_login {
    margin-top: 3em;
    margin-right: 1.4em;
  }

  .top-stories {
    width: 740px;
  }

  #home-secondary li {
    margin-right: 20px;
  }


}



body {
  background: #e8e8e8;
}

#header {
  background: #de1e3d;
  border: none;
}

#menu-button-label {
  line-height: 60px;
}

#menu-button-weather {
  font-size: 13px;
  position: absolute;
  left: 287px;
  text-transform: uppercase;
  display: none;
  cursor: pointer;
  opacity: 1;
  font-weight: 400;
}

#brand-strap-line {
  display: none;
}

.weather-icon-header {
  position: relative;
  top: 8px;
  margin-right: 7px;
}

#header a,
#menu-button,
#search-wrapper {
  color: white;
}

#header a:hover,
#menu-button:hover,
#search-wrapper:hover,
#search-wrapper:hover a {
  color: #911023;
}

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

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

  #support-links button
, #support-links a
, #support-links p
, #login-wrapper li
{
  color: white;
}

.header-wide-button {
  background: #4f151e;
}

#full-page-transforms-wrapper {
  background: #e8e8e8;
}

#brand-logo {
  margin-top: 0;
  background-position: 0 0;
  background-size: 62px;
  -webkit-box-sizing: initial;
     -moz-box-sizing: initial;
          box-sizing: initial;
}

#search-input {
  border-bottom: 1px solid white;
  color: white;
}

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

#header-align-bottom-wrapper {
  position: absolute;
  width: 100%;
  height: 55px;
  left: 0;
  bottom: 0;
}

#header {
  height: 125px;
}

  #header button
, #header button a
, #header p
{
  line-height: 58px;
  height: 55px;
}

#brand-logo {
  margin-top: 20px;
  width: 137px;
  height: 55px;
  margin-left: -81px;
  background-size: 136px;
}

#search-form {
  height: 60px;
  line-height: 60px;
}

#search-form label {
  line-height: 60px;
}

#header-social-media-links {
  display: block;
  position: absolute;
  top: 20px;
  right: 17px;
  font-size: 18px;
}

#header-social-media-links li {
  display: inline-block;
  padding-right: 25px;
}

#header-social-media-links li.last {
  padding-right: 0;
}

#header-social-media-links a {
  height: auto;
  line-height: 1;
  font-size: 24px;
}

} /* end @media rule */

@media screen and (max-width:900px) {
  #menu-button-label,
  #search-wrapper,
  #header-social-media-links {
    display: none;
  }

} /* end @media rule */

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

#menu-button-weather {
  display: block;
}

} /* end @media rule */

@media screen and (min-width:1500px) {
#brand-strap-line {
  position: absolute;
  color: white;
  width: 100%;
  top: 83px;
  text-align: center;
  opacity: 1;
  font-weight: 200;
}
}