/* An IE7-only container element */
#stream_launch_widget_container {
  display: block;
  height: 50px;
  width: 100%;
}

#stream_launch_widget {
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #292929;
  color: #fff;
  height: 50px;
}

#stream_launch_widget a {
  color: #fff;
}

#stream_launch_widget .icon {
  background: url(/media/img/icons/player-sprite-map.png) no-repeat 0 0;
}

#stream_launch_widget .status-message {
  display: none;
  line-height: 50px;
  color: white;
  margin: 0;
  padding: 0 0 0 20px;
  float: left;
}

#stream_launch_widget.loading .status-message,
#stream_launch_widget.error .status-message
{
  display: block;
}

.menu {
  position: absolute;
  /* z-index higher than our is-staff edit links */
  z-index: 1005;
  display: none;
  width: 100%;
  /* Enforce GPU rendering of menus so that
     fonts don't keep changing thickness as the
     renderer switches between GPU and software
     during menu transitions
  */
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.menu li a,
#station_dropdown li {
  display: block;
  cursor: pointer;
  padding: 10px 0;
  background-color: #3c3c3c;
  border-bottom: 1px solid #2C2C2C;
  border-top: 1px solid #494949;
}

.menu li a:hover,
#station_dropdown li:hover {
  text-decoration: none;
  background-color: #e11837;
  border-top: 1px solid #e11837;
  border-bottom: 1px solid #e11837;
}

#stream_launch_widget .head {
  width: 100%;
  height: 38px;
  padding: 6px 0;
}

#stream_launch_widget .head h4 {
  font-size: .8em;
  color: #999;
}

#popup-btn {
  position: relative;
  float: left;
  width: 11%;
  height: 100%;
  background-color: #e11837;
  font-size: 1.2em;
  text-indent: 40px;
  line-height: 53px;
  cursor: pointer;
  border: 0;
  color: white;
  text-align: left;
  padding: 0;
  display: block;
}

#popup-btn:hover {
  background-image: linear-gradient(top, #E32F4A 25%, #CB1631 85%);
  background-image: -o-linear-gradient(top, #E32F4A 25%, #CB1631 85%);
  background-image: -moz-linear-gradient(top, #E32F4A 25%, #CB1631 85%);
  background-image: -webkit-linear-gradient(top, #E32F4A 25%, #CB1631 85%);
  background-image: -ms-linear-gradient(top, #E32F4A 25%, #CB1631 85%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E32F4A', endColorstr='#CB1631');
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.25, #E32F4A),
    color-stop(0.85, #CB1631)
  );
}

.loading #popup-btn {
  cursor: default;
}

.loading #popup-btn:hover {
  background: #e11837;
}

.error #popup-btn {
  background: #b46516;
}

#popup-btn .icon {
  width: 11px;
  height: 13px;
  background-position: 0 -106px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 19px;
}

.loading #popup-btn .icon {
  display: none;
}

.loading .popup-btn-label {
  display: none;
}

#stream_launch_widget #stations_wrapper {
  position: relative;
  width: 115px;
  float: left;
  text-transform: uppercase;
  text-align: center;
}

#stream_launch_widget.loading #stations_wrapper {
  display: none;
}

#stations_wrapper .head {
  cursor: pointer;
}

#stations_wrapper .head:hover,
#stations_wrapper .head.active {
  background-color: #3c3c3c;
}

#stations_wrapper .head .icon {
  position: absolute;
  background-position: -108px -110px;
  width: 8px;
  height: 7px;
  top: 11px;
  left: 17px;
  overflow: hidden;

}

#stations_wrapper .current {
  height: 20px;
  overflow: hidden;
  font-size: 11px;
}

#station_dropdown {
  width: 780px;
  left: 0;
}

#station_dropdown li {
  float: left;
  clear: both;
  width: 100%;
  padding: 0;
}

#stream_launch_widget .show {
  position: relative;
  width: 65%;
  float: left;
}

#stream_launch_widget.loading .show {
  display: none;
}

#stream_launch_widget .show .image {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 10px 0 0;
  float: left;
}

#stream_launch_widget .show .image img {
  width: 100%;
  height: 100%;
  border: 0;
}


#stream_launch_widget .show .head {
  width: 606px;
}

#stream_launch_widget .show .head h4 {
  height: 17px;
  font-size: 0.9em;
  left: 5px;
  position: relative;
}

#stream_launch_widget .show .head h4 a {
  color: #ddd;
}

#stream_launch_widget .show.item-title-unavailable .head h4 {
  line-height: 38px;
  font-size: 15px;
  left: 5px;
  position: relative;
}

#stream_launch_widget .show.item-title-unavailable .head h4 a {
  color: white;
}

/* When a title link doesn't have an HREF attribute, don't underline
   it on hover */
#stream_launch_widget .show .head a:hover {
  text-decoration: none;
}
#stream_launch_widget .show .head a[href]:hover {
  text-decoration: underline;
}


#stream_launch_widget .show .item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show.item-title-unavailable .item-title {
  display: none;
}

#stream_launch_widget .image.hide {
  visibility: hidden;
}


/* Utility Menus */

#stream_launch_widget .util {
  position: relative;
  width: 95px;
  height: 100%;
  background: #3c3c3c;
  float: right;
  border-left: 1px solid #4a4a4a;
  color: #9a9a9a;
  text-transform: uppercase;
  font-size: 0.8em;
  text-indent: 27px;
  line-height: 25px;
}

#stream_launch_widget.loading .util {
  display: none;
}

#stream_launch_widget .util div {
  cursor: pointer;
  position: relative;
}

#stream_launch_widget .util > div:hover {
  background: #292929;
}

#stream_launch_widget .util div .icon {
  position: absolute;
  top: 0;
  left: 8px;
  width: 14px;
  height: 12px;
}

#stream_launch_widget .util > ul {
  position: absolute;
  right: 0;
  width: 290px;
  background: #3c3c3c;
  text-transform: none;
}


/* Schedule Menu */

#stream_launch_widget .util .schedule {
  height: 24px;
  border-bottom: 1px solid #4a4a4a;
}

#stream_launch_widget .util .schedule a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#stream_launch_widget .util .schedule .icon {
  top: 5px;
  height: 14px;
  background-position: -41px -105px;
}

#stream_launch_widget .schedule-menu {
  display: none;
  top: 24px;
}

.schedule-menu li a {
  width: 275px;
}

.schedule-menu li .time {
  display: block;
  float: left;
  width: 70px;
}

.schedule-menu li .show-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
}

#stream_launch_widget .full-schedule a {
  color: #999;
}

#stream_launch_widget .full-schedule a:hover {
  color: white;
}


/* Options Menu */

#stream_launch_widget .util .options {
  height: 25px;
}

#stream_launch_widget .util .options .icon {
  top: 6px;
  background-position: -66px -106px;
}

#stream_launch_widget .audio-option-format {
  color: #ddd;
}

#stream_launch_widget .util ul {
  text-indent: 0;
  display: none;
}

.util li a {
  padding-left: 15px;
  font-size: 1.2em;
}

#stream_launch_widget li.audio-help a {
  position: relative;
  text-indent: 24px;
  color: #999;
}

#stream_launch_widget li.audio-help a:hover {
  color: white;
}

#stream_launch_widget .audio-help .icon {
  position: absolute;
  top: 14px;
  left: 15px;
  background-position: -87px -106px;
  width: 14px;
  height: 14px;
  overflow: hidden;
}

#stream_launch_widget .audio-help a:hover .icon {
  background-position: -87px -136px;
}


/* Entry in the station dropdown */

.station-entry {
  text-align: left;
  color: white;
  border-collapse: separate;
  height: 52px;
}

.station-entry .stream-name {
  width: 115px;
  height: 52px;
  text-align: center;
  padding: 0;
  float: left;
  display: table;
  font-size: 11px;
}

.station-entry .stream-name .inner {
  display: table-cell;
  vertical-align: middle;
}

.station-entry .playing-info {
  height: 52px;
  text-transform: none;
  text-align: left;
  float: left;
}

.station-entry .image {
  width: 50px;
  height: 50px;
  margin: 1px 10px 0 0;
  float: left;
}

.station-entry .image img {
  width: 100%;
  height: 100%;
}

.station-entry .show-title {
  color: #aaaaaa;
  font-size: 0.9em;
  padding-top: 0.7em;
  height: 17px;
  float: left;
}

.station-entry .item-title {
  width: 605px;
  padding-bottom: 0.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  float: left;
  clear: left;
}

li:hover .station-entry .stream-name {
  border-right-color: #e11837;
}

li:hover .station-entry .playing-info {
  border-left-color: #e11837;
}

li:hover .station-entry .show-title,
li:hover .station-entry .item-title
{
  color: white;
}

#stream_launch_widget .image {
  background: url(/media/img/icons/player-sprite-map.png) no-repeat 9999px 9999px;
}

#stream_launch_widget .wnyc-fm939 .image,
#stream_launch_widget .wnyc-am820 .image,
#stream_launch_widget .special-events-stream .image
{
  background-position: 0px -159px;
}

#stream_launch_widget .wqxr .image {
  background-position: -50px -159px;
}

#stream_launch_widget .q2 .image {
  background-position: -100px -159px;
}

#stream_launch_widget .wqxr-special .image {
  background-position: -150px -159px;
}

#stream_launch_widget .njpr .image {
  background-position: -200px -159px;
}


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

#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 3em 1px;
}

.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 2px 4px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.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: #128cf4;
}

.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;
}

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

#stream_launch_widget {
  position: relative;
}
#stream_launch_widget .util {
  position: absolute;
  height: auto;
  right: 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;
  }

  #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%;
    min-width: 105px;
  }

  #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,
  .bucket li:last-child,
  #damost ol li.last,
  #damost ol li:last-child {
    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,
  #home-secondary li:last-child {
    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;
  }


}