@charset "UTF-8";
/* CSS Document */

/* note for changing seasonal header: change commented out topper in index.php and comment out the additional #sidebar-buttons style @@ line 150 below */

html {

}

body {
  margin:0px;
  padding:0px;
  font-family: 'Oxygen', sans-serif;
  color:#414042;
  text-shadow:none;
}

/* universals */

a, a img {
  text-decoration:none;
  border:0px;
  outline:none;
}

a:hover {
  text-decoration:none;
}

p {
  font-size:14px;
}

.relative {
  position: relative;
}

/* Prevent any object from being highlighted upon touch event*/

*{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* backgrounds and such */

#outer-bg {
  background: #0c0c0c url(../images/wwoz-bw-bg-blur.jpg) left top repeat !important;
}

/*#inner-bg {
  background:url(../images/bg-transparent.png) left top repeat;
}*/

#inner {
  width:768px;
  margin:0 auto;
  position:relative;
  min-width:300px;
}

/* header */


#topper {
  background-color:#222222;
  height:25px;
  width:100%;
  padding:0px;
  border-bottom: 10px solid #000;
}

#topper .site-title {
  color:#E6E7E8;
  font-size:13px;
  text-transform:uppercase;
  position:relative;
  bottom:15px;
  left:5px;
  padding-right:5px;
}

#topper img {

}

#topper a {
  color:#fff;
  display:block;
}

#logo {
  width:30px;
  height:auto;
  padding:4px 0px 0px 5px;
}

/* seasonal topper */

#topper.seasonal {
  background:url(../images/WWOZ-S15-player.jpg) left top repeat-x;
}

#topper.seasonal .site-title {
  color:#7dd8ed;
}

#topper.seasonal .pledge-button {
  float:right;
  font-weight:bold;
  font-size:14px;
  color:#fff;
  padding:5px 0px 0px 7px;
  background: #0adbff; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhZGJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxODU3YTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #0adbff 0%, #1857a6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0adbff), color-stop(100%,#1857a6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #0adbff 0%,#1857a6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #0adbff 0%,#1857a6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #0adbff 0%,#1857a6 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #0adbff 0%,#1857a6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0adbff', endColorstr='#1857a6',GradientType=0 ); /* IE6-8 */
  height:26px;
  width:89px;
  position:relative;
  top:-34px;
}

#topper.seasonal .pledge-button a {
  display:inline;
  z-index:1000;
}

#quick-links {
  background: url(../images/white-bg2.png) left top no-repeat;
  height:30px;
  font-size:12px;
}

#quick-links span {
  position:relative;
  top:5px;
  padding:0px 5px;
}

#quick-links a {
  color:#27bee1;
}

#quick-links a:hover {
  text-decoration:underline;
}

/* note: this needs to be commented out when the seasonal topper is not in use!
#sidebar-buttons {
  top:60px !important;
} */

/* player */

#player {
  margin-top:10px;
  position:relative;
  width:85%;
  background-color:#555555;
}

#player a.jp-play,
#player a.jp-pause {
  width:140px;
  height:140px;
  position:absolute;
  top:20px;
  left:20px;
  z-index: 2;
}

#player a.jp-play {
  background: url("../images/button-play400.png") 0 0 no-repeat;
  background-size:140px 140px;
}

#player a.jp-pause {
  background: url("../images/button-pause400.png") 0 0px no-repeat;
  display: none;
  background-size:140px 140px;
}

div.jp-audio div.jp-type-single div.jp-interface {
  height:0px;
}

#help {
  overflow: hidden;
  text-indent: -9999px;
}

#help a {
  background:url(../images/button-help400.png) left top no-repeat;
  background-size:48px 48px;
  position:absolute;
  right:10px;
  top:10px;
  height:48px;
  width:48px;
  z-index: 2;
}

.ui-popup > .ui-btn-right {
  top:-40px;
}

#help-modal {
  width:100%;
  position:absolute;
  top:70px;
}

#help-popup {
  width:600px;
  margin:40px auto 10px auto;
  padding:0px 10px 10px 10px;
}

#help-popup h3 {
  margin-top:10px;
}

#help-popup a, #help-popup a:visited {
  font-size:18px;
  color:#333333;
  display:block;
}

#help-popup ul {
  list-style:none;
  padding:0;
  margin:0;
}

#help-popup li {
  border-bottom:1px solid #555555;
  padding:10px 5px;
  background:url(../images/follow-link.png) right center no-repeat;
  background-size:18px 18px;
  font-weight: bold;
}

#help-popup img.close-button {
  width:30px;
  height:30px;
}

#help-popup .ui-collapsible.ui-corner-all {
  border-radius:0px;
  -webkit-border-radius: 0px;
  -moz-border-radius:0px;
}

#help-popup .ui-collapsible h3 {
  background:url(../images/collapse.png) right center no-repeat;
  margin-top: 0px;
  padding-top: 5px;
  border:none;
}

#help-popup .ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner {
  padding-left:0px;
}

#help-popup .ui-collapsible-collapsed h3 {
  background:url(../images/expand.png) right center no-repeat;
  border-bottom: 1px solid #555555;
}

#help-popup .ui-collapsible-content {
  padding:10px 0px;
}

/* volume controls */

div.jp-volume-bar {
  position: absolute;
  overflow:visible;
  background-color: #ccc;
  width:200px;
  height:15px;
  cursor: pointer;
  border-radius:10px;
  -webkit-border-radius: 10px;
  -moz-border-radius:10px;
  z-index: 2;
}
div.jp-audio div.jp-volume-bar {
  bottom:90px;
  left:50px;
}
div.jp-audio-stream div.jp-volume-bar {
  top:37px;
  left:92px;
}
.jp-volume-bar-value {
  width:0px;
  height:15px;
  /*background: url(../images/button-volume-slider.png) right center no-repeat #fff;*/
  background-color: #fff;
  overflow:visible;
  border-radius:10px 0px 0px 10px;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius:10px 0px 0px 10px;
}

.volume-button {
  position:absolute;
  bottom:85px;
  left:20px;
}

a.jp-mute, a.jp-unmute {
  width:25px;
  height:25px;
  margin-top:12px;
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  bottom:0px;
  z-index: 2;
}

a.jp-mute {
  background: url("../images/button-volume400.png") 0 0 no-repeat;
  background-size:25px 25px;
}

a.jp-unmute {
  background: url("../images/button-volume-mute400.png") 0px 0px no-repeat;
  background-size:25px 25px;
  display: none;
}

div.jp-volume-bar .ui-btn-active {
  background-color:#fff;
  background-image:none;
  border-radius:10px 0px 0px 10px;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius:10px 0px 0px 10px;
}

/* song and show info */


.track-info {
  height:55px;
  width:100%;
  background-color: rgba(34, 34, 34, 0.6);
  color:#eeeeee;
  position:absolute;
  bottom:0px;
  overflow:hidden;
  z-index: 2;
  font-size:10px;
}

.track-info .title {
  padding:5px 0px 0px 10px;
  font-size:16px;
}

.track-info .artist-info {
  padding:0px 0px 10px 15px;
  font-size:14px;
}

#info-bar {
  background-color: rgba(34, 34, 34, 0.6);
  width:768px;
  padding:5px 0px;
  color:#eeeeee;
  margin:20px 0px;
}

.stream-info {
  padding-top:10px;
  padding-left:10px;
}

.program-info {
  padding-left:10px;
}

.program-info p,
.stream-info p {
  margin-top:0px;
  font-size:10px;
}

.stream-info a {
  color:#fff;
  font-weight:bold;
}

.stream-info .title,
.stream-info .more-streams {
  font-size:14px;
}

.stream-info .more-streams {
  padding-left: 8px;
}

.program-info a {
  color: #fff;
}

.program-info a:hover {
  text-decoration:underline;
}

.program-info .title {
  font-size:14px;
}

.program-info .time  {
  font-size:14px;
  font-weight:bold;
}

.player-image {
  position: relative;
  max-width: 100%;
  padding-bottom: 75%;
  background:url(../images/wwoz-logo-splash.png) left top no-repeat;
}

.player-image-inner {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.player-image-inner.active {
  z-index: 1;
  bottom: 0;
  right: 0;
}

.player-image img {
  width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

/* sidebar buttons */

#sidebar-buttons .ui-btn-active,
#sidebar-buttons .ui-focus,
#sidebar-buttons .ui-btn:focus
{
    color: #fff !important;
    /*background: none !important;*/
    background-color: transparent !important;
    text-shadow: 0 /*{a-bup-shadow-x}*/
                 1px /*{a-bup-shadow-y}*/
                 0 /*{a-bup-shadow-radius}*/
                 #ffffff /*{a-bup-shadow-color}*/;
  font-weight:normal;
  outline:none;
  border:none;
}

#sidebar-buttons {
  float:right;
  position:absolute;
  top:35px;
  /* top: 59px; */
  right:0px;
}

#sidebar-buttons ul {
  list-style:none;
  margin: 10px 0px 0px 0px;
  padding: 0px;
}

#sidebar-buttons li {
  width:86px;
  height:68px;
  text-align:center;
  font-size:17px;
  margin-bottom:10px;
  position:relative;
  background: #BD1D10; /* Old browsers */
  background: -moz-linear-gradient(top,  #BD1D10 0%, #7A130A 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BD1D10), color-stop(100%,#7A130A)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #BD1D10 0%,#7A130A 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #BD1D10 0%,#7A130A 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #BD1D10 0%,#7A130A 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #BD1D10 0%,#7A130A 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BD1D10', endColorstr='#7A130A',GradientType=0 ); /* IE6-8 */
}

#sidebar-buttons li:hover, #sidebar-buttons li:focus, #sidebar-buttons li.active, #sidebar-buttons li a.active, #sidebar-buttons li a:focus {
  background-image: -ms-linear-gradient(top, #7A130A 0%, #5E0F08 100%);
  background-image: -moz-linear-gradient(top, #7A130A 0%, #5E0F08 100%);
  background-image: -o-linear-gradient(top, #7A130A 0%, #5E0F08 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7A130A), color-stop(1, #5E0F08));
  background-image: -webkit-linear-gradient(top, #7A130A 0%, #5E0F08 100%);
  background-image: linear-gradient(to bottom, #7A130A 0%, #5E0F08 100%);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#sidebar-buttons li a,
#sidebar-buttons li a:hover {
  background-position: 50% 0%;
  background-repeat:no-repeat;
  background-size:50px 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#sidebar-buttons li:focus,
#sidebar-buttons li a:focus {
  outline:none transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

#sidebar-buttons li.streams a,
#sidebar-buttons li.streams a:hover {
  background-size:45px 36px;
  background-position: 50% 10%;
}

#sidebar-buttons li.streams a,
#sidebar-buttons li.streams a:focus {
  background-image:url(../images/icon-streams400.png);
}

#sidebar-buttons li.playlist a {
  background-image:url(../images/icon-playlist400.png);
}

#sidebar-buttons li.gallery a {
  background-image:url(../images/icon-gallery400.png);
}

#sidebar-buttons li.support a {
  background-image:url(../images/icon-support400.png);
}

#sidebar-buttons li.cal a {
  background-image:url(../images/icon-cal400.png);
}

#sidebar-buttons li.share a {
  background-image:url(../images/icon-share400.png);
}

#sidebar-buttons a {
  color:#fff;
  padding:0px 8px;
  height:68px;
  position:relative;
  left:1px;
  top:2px;
}

#sidebar-buttons a .ui-btn-text {
  position:relative;
  top:40px;
  text-shadow: none;
  font-family: 'Patua One', serif;
}

#sidebar-buttons a span:hover {
  color:#E6E7E8;
}

/* revive ads */

.image-responsive {
  margin-bottom: 10px;
  text-align: center;
}

.image-responsive img {
  max-width: 100%;
  height: auto;
}

/* teasers */

#oz-latest {
  text-align:center;
  width:100%;
  background-color:#222222;
  font-size:18px;
  height:30px;
  color: #eeeeee;
}

#news-teasers {
  background-color: rgba(34, 34, 34, 0.6);
  width:100%;
  text-align:center;
  margin:0px auto;
  padding:15px 0px;
}

#news-teasers .headline {
  width:265px;
  padding: 5px;
  font-size:18px;
  font-weight:bold;
  clear:both;
  color:#fff;
  margin:0px auto;
  background-color: rgba(34, 34, 34, 0.8);
  margin-top: -4px;
}

#news-teasers .headline a {
  color:#fff;
}

.owl-theme .owl-controls .owl-buttons div {
  background: none;
  position: absolute;
  padding: 0px;
  border-radius: 0px;
}

.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0px;
  top: 80px;
}

.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0px;
  top: 80px;
}

.owl-theme .owl-controls .owl-pagination {
  display: none;
}

#carousel-prev,
#carousel-next {
  width:25px;
  height:40px;
  background-color: #000;
}

#main-cta, #share-cta {
  width:100%;
  margin:15px auto;
  text-align:center;
}

.promo-link img {
  width: 275px;
  height: auto;
}

/* footer */

#bottom {
  background-color: rgba(34, 34, 34, 0.8);
  height:40px;
  width:100%;
  padding:0px;
  margin:10px auto 0px;
  text-align:center;
}

#bottom img {
  margin:5px 10px;
  width:30px;
  height:30px;
}

/* panels */
.ui-panel {
  top:40px;
  font-size:14px;
}

.ui-panel-inner {
  padding:0px;
}

.ui-panel-inner .close-button {
  float:right;
  width:30px;
  height:30px;
}

.ui-panel-inner h3, .ui-popup h3 {
  margin:0px 0px 5px 0px;
  font-weight:normal;
  font-size:21px;
  padding:15px;
  font-family: 'Patua One', serif;
  color: #555555;
}

.ui-popup h3 {
  padding:10px 5px;
  font-family: 'Patua One', serif;
  color: #555555;
}

.ui-panel-inner p {
  padding-left:15px;
  padding-right:15px;
}

.ui-panel-inner a, .ui-panel-inner a:visited {
  font-size:16px;
  font-weight:normal;
  color:#333333;
}

.ui-panel-inner .panel-link {
  border-bottom:1px solid #555555;
  padding:10px 0px 15px;
  background:url(../images/follow-link.png) 97% center no-repeat;
  background-size:18px 18px;
}

.ui-panel-inner .panel-link a {
  padding-left:15px;
  display:block;
  font-weight: bold;
  padding-right: 25px;
}

#playlist .ui-panel-inner .panel-link {
  border-top:1px solid #555555;
  border-bottom:none;
  padding:10px 5px;
}

.ui-panel-open {
  z-index:5000;
}

.stream-item {
  border-bottom: 1px solid #555555;
  padding:15px 10px;
  min-height: 38px;
}

.stream-item:hover {
  cursor: pointer;
}

.stream-last {
  margin-bottom:20px;
}

#streams .active {
  background:#faf3f3 url(../images/nowplaying.gif) 10px 15px no-repeat;
}

#streams .stream-icon {
  float:left;
}

#streams .active .stream-icon {
  display:none;
}

#playlist .stream-name {
  padding-left: 15px;
  padding-bottom: 10px;
}

#playlist .stream-name,
#streams .name {
  font-size:16px;
  margin-top:-4px;
  font-family: 'Patua One', serif;
  color: #555555;
}

#streams .show-name {
  font-size:14px;
}

#streams .show-name a {
  color:#414042;
}

#streams .show-name a:hover {
  text-decoration:underline;
}

#streams .show-time  {
  font-size:14px;
  font-weight:bold;
}

#streams .stream-inner {
  padding-left:50px;
}

#streams .stream-message:hover {
  cursor: pointer;
}

.playlist-entry {
  padding:5px 15px;
}

.playlist-entry:nth-of-type(odd) {
  background-color: #faf3f3;
}

.playlist-song {
  font-size:16px;
}

.playlist-artist {
  font-size:14px;
  display: inline-block;
}

.tiny-words {
  text-transform:uppercase;
  font-size:11px;
}

.ui-panel .close-button {
  float:right;
  padding:15px;
  width:30px;
  height:30px;
}

#support p, #cal p {
  margin: 0px;
  padding-bottom: 5px;
}

#support a p, #cal a p {
  padding-left:0px;
  color:#414042;
}

#share p.small-text {
  font-size:11px;
}

#share .share-message {
  padding:5px;
  background-color:#E6E7E8;
  border:1px solid #808285;
  margin:0px 15px;
  text-shadow:none;
  min-height:50px;
}

#share .share-message a {
  font-size:14px;
}

#share .share-message img {
  float:left;
  margin:0px 5px 5px 0px
}

#share .ui-panel-inner .panel-link a {
  float: left;
  padding-right: 0px;
}

@media (max-height: 768px) {
  #inner {
    width:602px;
  }

  #info-bar {
    width:84%;
  }
  
  #player {
    width: 84%;
  }
}

@media (max-width: 767px) and (min-height: 769px) {
  #inner {
    width:100%;
  }

  #info-bar {
    width:85%;
  }

  #player a.jp-play {
    background-size:90px 90px;
  }

  #player a.jp-pause {
    background-size:90px 90px;
    display: none;
  }

  #help a {
    background-size:30px 30px;
    height:30px;
    width:30px;
  }

  #help-popup {
    width:100%;
    min-width:420px;
  }
}

@media (max-width: 565px) {
  #sidebar-buttons li {
    width:60px;
    height:48px;
    font-size:13px;
  }

  #sidebar-buttons li.a {

  }

  #sidebar-buttons li span {

  }

  #sidebar-buttons a {
    top:0px;
    padding:0px;
  }

  #sidebar-buttons a .ui-btn-text {
    top:27px;
    padding:25px 2px;
  }

  #sidebar-buttons a span {
    top:0px;
  }

  #sidebar-buttons li a,
  #sidebar-buttons li a:hover {
    background-size:38px 31px;
  }

  #sidebar-buttons li.streams a,
  #sidebar-buttons li.streams a:hover {
    background-size: 28px 22px;
    background-position: 50% 6%;
  }

  #help-popup {
    min-width:320px;
  }

}

@media (max-width: 600px) {
  #inner {
    width:99%;
  }

  #player,
  #info-bar {
    width:80%;
  }

  #player a.jp-play {
    background-size:60px 60px;
  }

  #player a.jp-pause {
    background-size:60px 60px;
    display: none;
  }

  .player-image {
    background-image:url(../images/wwoz-logo-splash-sm.png);
  }

  #help-popup {
    max-width:200px;
    min-width:1px;
  }

  div.jp-volume-bar {
    width:150px;
  }

  div.jp-audio div.jp-volume-bar {
    bottom:75px;
  }

  .volume-button {
    bottom:70px;
  }

  .image-responsive {
    margin-top: 50px;
  }
}

@media (max-width: 350px) {
  .image-responsive {
    margin-top: 70px;
  }
}  

/* Flickr gallery images */
.flickr_badge_image {
  text-align: center !important;
}

.flickr_badge_image img {
  border: 1px solid black !important;
}

#flickr_badge_source_txt {
  padding: 0;
  font: 11px Arial, Helvetica, Sans serif;
  color: #666666;
}

#flickr_badge_icon {
  display: block !important;
  margin: 0 !important;
  border: 1px solid rgb(0, 0, 0) !important;
}

#flickr_icon_td {
  padding: 0 5px 0 0 !important;
}

#flickr_www {
  display: block;
  padding: 0 10px 0 10px !important;
  font: 11px Arial, Helvetica, Sans serif !important;
  color: #3993ff !important;
}

#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {
  text-decoration: none !important;
  background: inherit !important;color:#3993ff;
}

#flickr_badge_source {
  padding: 0 !important;
  font: 11px Arial, Helvetica, Sans serif !important;
  color: #666666 !important;
}

.uppercase {
  text-transform: uppercase;
}

.cursor-pointer {
  cursor: pointer;
}