html {
 font-family:sans-serif;
 -ms-text-size-adjust:100%;
 -webkit-text-size-adjust:100%
}
body {
 margin:0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
 display:block
}
audio,
canvas,
progress,
video {
 display:inline-block;
 vertical-align:baseline
}
audio:not([controls]) {
 display:none;
 height:0
}
[hidden],
template {
 display:none
}
a {
 background:transparent
}
a:active,
a:hover {
 outline:0
}
abbr[title] {
 border-bottom:1px dotted
}
b,
strong {
 font-weight:bold
}
dfn {
 font-style:normal
}
h1 {
 font-size:2em;
 margin:0.67em 0
}
mark {
 background:#ff0;
 color:#000
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sup {
 top:-0.5em
}
sub {
 bottom:-0.25em
}
img {
 border:0
}
svg:not(:root) {
 overflow:hidden
}
figure {
 margin:1em 40px
}
hr {
 box-sizing:content-box;
 height:0
}
pre {
 overflow:auto
}
code,
kbd,
pre,
samp {
 font-family:monospace,monospace;
 font-size:1em
}
button,
input,
optgroup,
select,
textarea {
 color:inherit;
 font:inherit;
 margin:0
}
button {
 overflow:visible
}
button,
select {
 text-transform:none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
 -webkit-appearance:button;
 cursor:pointer
}
button[disabled],
html input[disabled] {
 cursor:default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
 border:0;
 padding:0
}
input {
 line-height:normal
}
input[type="checkbox"],
input[type="radio"] {
 box-sizing:border-box;
 padding:0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
 height:auto
}
input[type="search"] {
 -webkit-appearance:textfield;
 box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
 -webkit-appearance:none
}
fieldset {
 border:1px solid #c0c0c0;
 margin:0 2px;
 padding:0.35em 0.625em 0.75em
}
legend {
 border:0;
 padding:0
}
textarea {
 overflow:auto
}
optgroup {
 font-weight:bold
}
table {
 border-collapse:collapse;
 border-spacing:0
}
td,
th {
 padding:0
}
body,
html {
 font-family:"Roboto",sans-serif;
 font-weight:300;
 font-size:10pt;
 padding:0;
 margin:0;
 background:#000000;
 height:100%;
 min-height:100%;
 overflow:hidden;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 text-rendering:optimizeLegibility
}
a {
 text-decoration:none;
 color:inherit;
 outline-width:0
}
b,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight:400
}
.preloader {
 display:block;
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 text-align:center;
 font-size:1.07em;
 color:#2f2f2f;
 background:rgba(250,250,250,0.95);
 transition:all 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
 -webkit-transition:all 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
 z-index:999
}
.preloader.loadComplete {
 opacity:0;
 visibility:hidden
}
.preloader .text_area {
 display:block;
 position:absolute;
 height:50px;
 left:0;
 right:0;
 top:40%;
 margin-top:-25px
}
.main-container {
 font-size:0;
 margin:0 auto;
 overflow:hidden;
 white-space:nowrap;
 width:360px;
 height:475px
 }
.main-container .view {
 font-size:10pt;
 vertical-align:top;
 display:inline-block;
 width:100%;
 margin:0;
 transition:margin-left cubic-bezier(0.25, 0.8, 0.25, 1) 550ms;
 white-space:normal
}
.main-container .view.main .artist-image {
 display:inline-block;
 position:relative;
 width:100%;
 height:auto;
 vertical-align:middle;
 overflow:hidden
}
.main-container .view.main .artist-image .artist-img img,
.main-container .view.main .artist-image .artist-img {
 display:block;
 width:360px;
 height:360px
}
.main-container .view.main .artist-image .artist-preload {
 position:absolute;
 right:0;
 left:0;
 height:4px;
 bottom:0;
 z-index:6;
 background-color:#159756;
 -webkit-animation:preloaderbackground linear 3s infinite;
 animation:preloaderbackground linear 3s infinite
}
.main-container .view.main .artist-image .artist-preload:after,
.main-container .view.main .artist-image .artist-preload:before {
 display:block;
 position:absolute;
 bottom:0;
 z-index:9;
 width:0;
 height:4px;
 background:#afa;
 -webkit-animation:preloaderfront ease-in 3s infinite;
 animation:preloaderfront ease-in 3s infinite;
 content:''
}
.main-container .view.main .artist-image .artist-preload:after {
 right:50%
}
.main-container .view.main .artist-image .artist-preload:before {
 left:50%
}
.main-container .view.history {
 background-color:#eaeaea;
 position:relative;
 height:100%
}
.main-container .view.history .table-scroll {
 padding:10px 15px;
 display:block;
 overflow-y:auto;
 overflow-x:hidden;
 max-height:405px
}
.main-container .view.history .table-scroll::-webkit-scrollbar {
 width:8px;
 height:8px
}
.main-container .view.history .table-scroll::-webkit-scrollbar-track {
 background:transparent;
 border-radius:2px
}
.main-container .view.history .table-scroll::-webkit-scrollbar-thumb {
 background-color:#df7c72;
 border-radius:2px
}
.main-container .view.history .table-scroll::-webkit-scrollbar-thumb:hover {
 background:#e48f86
}
.main-container .view.history .table-scroll::-webkit-scrollbar-thumb:window-inactive {
 background:#db695d
}
.main-container .view.history table {
 width:100%;
 text-align:left
}
.main-container .view.history table thead tr th {
 font-weight:normal;
 padding:2px 5px 5px
}
.main-container .view.history table tr th,
.main-container .view.history table tr td {
 padding:4px 6px
}
.main-container .view.history table tr th.timeago,
.main-container .view.history table tr td.timeago {
 text-align:right;
 min-width:75px;
 padding-right:6px
}
.main-container .view.history table tr th.history-artwork,
.main-container .view.history table tr td.history-artwork {
 width:32px;
 text-align:right;
 padding-left:6px
}
.main-container .view.history table tr th img,
.main-container .view.history table tr td img {
 vertical-align:middle
}
.main-container .view.history table tr:hover>td {
 background:rgba(0,0,0,0.05)
}
.main-container .view.channels {
 position:relative;
 background-color:#eaeaea;
 height:100%
}
.main-container .view.channels h3 {
 padding:0 0 0 30px
}
.main-container .view.channels ul.channel-list {
 padding:0;
 margin:0;
 list-style:none;
 max-height:375px;
 overflow:auto
}
.main-container .view.channels ul.channel-list::-webkit-scrollbar {
 width:8px;
 height:8px
}
.main-container .view.channels ul.channel-list::-webkit-scrollbar-track {
 background:transparent;
 border-radius:2px
}
.main-container .view.channels ul.channel-list::-webkit-scrollbar-thumb {
 background-color:#df7c72;
 border-radius:2px
}
.main-container .view.channels ul.channel-list::-webkit-scrollbar-thumb:hover {
 background:#e48f86
}
.main-container .view.channels ul.channel-list::-webkit-scrollbar-thumb:window-inactive {
 background:#db695d
}
.main-container .view.channels ul.channel-list li {
 display:block;
 padding:0;
 margin:0
}
.main-container .view.channels ul.channel-list li a {
 display:block;
 padding:10px 10px 10px 30px
}
.main-container .view.channels ul.channel-list li a:hover {
 background:rgba(192,57,43,0.05)
}
.main-container .view.channels ul.channel-list li a.active {
 font-weight:500
}
.main-container .bottom-back {
 position:absolute;
 bottom:20px;
 right:15px;
 font-weight:500
}
.main-container .bottom-back a {
 padding:5px 16px;
 background:#c0392b;
 color:#fff;
 border-radius:2px
}
.main-container .bottom-back a:hover {
 background:#d44e40
}
.player {
 margin:0;
 padding:10px 10px 5px;
 position:relative;
}
.player .onair {
 display:block;
 position:absolute;
 padding:0 10px;
 left:15px;
 right:10px;
 top:7px;
 bottom:10px;
 text-align:left;
 color:#fff;
 line-height:1.4;
 font-weight:400
}
.player .onair a {
 color:#fff
}
.player .onair .artist-container,
.player .onair .title-container {
 position:relative;
 overflow:hidden
}
.player .onair .artist-container span,
.player .onair .title-container span {
 margin-right:25px
}
.player .onair .artist-container.title-container,
.player .onair .title-container.title-container {
 height:36px;
 border-bottom:1px solid rgba(255,255,255,0.25)
}
.player .onair .artist-container.artist-container,
.player .onair .title-container.artist-container {
 height:29px
}
.player .onair .artist {
 position:absolute;
 font-size:1.6em;
 overflow:hidden;
 padding:4px 0 0;
 white-space:nowrap
}
.player .onair .title {
 position:absolute;
 font-size:1.3em;
 overflow:hidden;
 font-style: normal;
 white-space:nowrap;
 color: rgb(175,175,175);
 padding:3px 0 3px
}
.player .playback {
 display:inline-block;
 width:68px;
 height:68px
}
.player .playback .play,
.player .playback .stop {
 cursor:pointer;
 float:left;
 opacity:0.9
}
.player .playback .play circle,
.player .playback .stop circle {
 fill:#fff;
 transition:fill 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
 -webkit-transition:fill 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
 stroke-width:0
}
.player .playback .play path,
.player .playback .stop path {
 fill:#c0392b
}
.player .playback .play:hover,
.player .playback .stop:hover {
 opacity:1
}
.player .playback .play:hover circle,
.player .playback .stop:hover circle {
 fill:#fff
}
.options-status {
 padding:4px;
 border-top:1px solid #81261d
}
.options-status .player-status {
 display:inline-block;
 color:#fff;
 font-size:0.9em;
 text-align:left;
 vertical-align:middle;
 max-width:200px;
 padding:2px 5px
}
.options-status .options {
 display:inline-block;
 float:right
}
.options-status .options a {
 display:inline-block;
 width:24px;
 text-align:center;
 line-height:normal;
 vertical-align:middle
}
.options-status .sharing-area.sharing_disabled {
 display:none
}
@-webkit-keyframes preloaderbackground {
 0%,
 24.9% {
  background-color:#159756
 }
 25%,
 49.9% {
  background-color:#da4733
 }
 50%,
 74.9% {
  background-color:#3b78e7
 }
 75%,
 100% {
  background-color:#fdba2c
 }
}
@keyframes preloaderbackground {
 0%,
 24.9% {
  background-color:#159756
 }
 25%,
 49.9% {
  background-color:#da4733
 }
 50%,
 74.9% {
  background-color:#3b78e7
 }
 75%,
 100% {
  background-color:#fdba2c
 }
}
@-webkit-keyframes preloaderfront {
 0% {
  width:0;
  background-color:#da4733
 }
 24.9% {
  width:50%;
  background-color:#da4733
 }
 25% {
  width:0;
  background-color:#3b78e7
 }
 49.9% {
  width:50%;
  background-color:#3b78e7
 }
 50% {
  width:0;
  background-color:#fdba2c
 }
 74.9% {
  width:50%;
  background-color:#fdba2c
 }
 75% {
  width:0%;
  background-color:#159756
 }
 100% {
  width:50%;
  background-color:#159756
 }
}
@keyframes preloaderfront {
 0% {
  width:0;
  background-color:#da4733
 }
 24.9% {
  width:50%;
  background-color:#da4733
 }
 25% {
  width:0;
  background-color:#3b78e7
 }
 49.9% {
  width:50%;
  background-color:#3b78e7
 }
 50% {
  width:0;
  background-color:#fdba2c
 }
 74.9% {
  width:50%;
  background-color:#fdba2c
 }
 75% {
  width:0%;
  background-color:#159756
 }
 100% {
  width:50%;
  background-color:#159756
 }
}