body {
background: #cb60b3;
background: -moz-linear-gradient(-45deg, #cb60b3 0%, #0c4d85 0%, #528f93 35%, #3f6b92 49%, #7d7f94 80%, #7d5c95 91%, #7d5c97 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cb60b3), color-stop(0%,#0c4d85), color-stop(35%,#528f93), color-stop(49%,#3f6b92), color-stop(80%,#7d7f94), color-stop(91%,#7d5c95), color-stop(100%,#7d5c97));
background: -webkit-linear-gradient(-45deg, #cb60b3 0%,#0c4d85 0%,#528f93 35%,#3f6b92 49%,#7d7f94 80%,#7d5c95 91%,#7d5c97 100%);
background: -o-linear-gradient(-45deg, #cb60b3 0%,#0c4d85 0%,#528f93 35%,#3f6b92 49%,#7d7f94 80%,#7d5c95 91%,#7d5c97 100%);
background: -ms-linear-gradient(-45deg, #cb60b3 0%,#0c4d85 0%,#528f93 35%,#3f6b92 49%,#7d7f94 80%,#7d5c95 91%,#7d5c97 100%);
background: linear-gradient(135deg, #cb60b3 0%,#0c4d85 0%,#528f93 35%,#3f6b92 49%,#7d7f94 80%,#7d5c95 91%,#7d5c97 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#7d5c97',GradientType=1 );

/*
background: -moz-linear-gradient(270deg, rgba(255,0,0,1) 0%, rgba(0,128,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,0,0,1)), color-stop(100%, rgba(0,128,0,1))); 
background: -webkit-linear-gradient(270deg, rgba(255,0,0,1) 0%, rgba(0,128,0,1) 100%);
background: -o-linear-gradient(270deg, rgba(255,0,0,1) 0%, rgba(0,128,0,1) 100%);
background: -ms-linear-gradient(270deg, rgba(255,0,0,1) 0%, rgba(0,128,0,1) 100%);
background: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(0,128,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#008000',GradientType=0 );
*/
}

a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none
}

body {
    height: 100%;
    color: #f5f5f5;
    font-family: 'Open Sans', Helvetica, cursive;
    font-size: 12px;
    background-color: #000;
    font-weight: 400;
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2)
}

a {
    color: #F5F5F5;
    outline-width: 0px;
    outline-style: none;
    text-decoration: none
}

a:hover {
    color: #ffffff
}

.clearfix {
    clear: both
}

img,
form {
    border: 0;
    margin: 0;
    padding: 0
}

input[type=checkbox] {
    display: none
}

input[type=checkbox]+label {
    height: 20px;
    width: 20px;
    display: inline-block;
    padding: 0;
    margin: 0;
    background: url("../images/webradio.sprite.png") no-repeat -100px 0;
    vertical-align: middle;
    cursor: pointer
}

input[type=checkbox]:checked+label {
    background: #0080FF;
    height: 20px;
    width: 20px;
    display: inline-block;
    padding: 0;
    margin: 0;
    background: url("../images/webradio.sprite.png") no-repeat -120px 0
}

.switch {
 --button-width: 3.5em;
 --button-height: 1em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

#wrapper {
    display: block;
    min-width: 720px
}

#header {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px
}

#header ul {
    padding: 0;
    margin: 0;
    width: 100%;
    min-width: 550px;
    height: 100%;
    /*background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.15)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);*/
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 6px rgba(0, 0, 0, 0.2)
}

#header ul li {
    float: left;
    display: block;
    width: 100px;
    margin: 0;
    padding: 0 0 0 2px;
    text-align: center;
    height: 100%;
    line-height: 40px
}

#header ul li>a {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    color: #D7D7D7;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out
}

#header ul li>a:hover {
    opacity: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1)
}

#header ul li:first-child {
    background: none
}

#header ul li#logo {
    width: 306px
}

#header ul li#logo a {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 180px;
    height: 60px;
    background: url("../images/webradio.sprite.png") no-repeat 2px -150px
}

#header ul li#logo a:hover {
    padding: 0;
    border: 0
}

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    background: url("../images/webradio.sprite.png") no-repeat;
    vertical-align: middle
}

.icon.twitter {
    background-position: 0 0
}

.icon.web {
    background-position: -212px -3px
}

.icon.like {
    background-position: -20px 0
}

.icon.settings {
    background-position: -40px 0
}

.icon.close {
    background-position: -60px 0
}

.icon.favourite {
    background-position: -80px 0
}

.icon.sound {
    background-position: -100px 0
}

.icon.share {
    background-position: -333px 0
}

.icon.closeset {
    background-position: -60px 0;
    width: 20px;
    height: 20px
}

#content-top {
    display: block;
    width: 100%;
    clear: both;
    height: 45px;
    margin: 0;
    padding: 0;
    background: url("../images/webradio.sprite.png") no-repeat 0px -96px;
    position: absolute;
    z-index: 20;
    top: 75px
}

#content {
    display: block;
    width: 720px;
    margin: 0 auto;
    position: relative;
    height: 180px
}

#content .main {
    margin-top: 15px;
    padding-top: 20px
}

#content .extra {
    width: 100%;
    display: block;
    height: 180px;
    position: absolute;
    z-index: 15;
    top: 0;
    //display: none
}

#content .extra .sline {
    display: block;
    width: 100%;
    height: 40px;
    vertical-align: text-middle;
    line-height: 40px
}

#content .extra .settings.close {
    position: absolute;
    bottom: -10px;
    right: 40px;
    z-index: 101;
    height: 28px;
    width: 28px
}

#content .left {
    display: inline-block;
    width: 345px;
    padding-right: 15px;
    text-align: right;
    vertical-align: middle
}

#content .left .onair {
    display: inline-block;
    font-size: 220%;
    font-weight: 300;
    margin-right: 40px;
    vertical-align: middle
}

#content .left #station {
    font-size: 175%;
    font-weight: bold;
}


#content .left img {
    vertical-align: middle;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out
}

#content .left img:hover {
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.1);
    cursor: pointer
}

#content .right {
    display: inline-block;
    width: 350px;
    padding: 0;
    text-align: left;
    vertical-align: middle
}

#content .right #artist {
    font-size: 180%;
    font-weight: 300
}

#content .right #title {
    font-size: 150%;
    font-weight: 300
}

#content .center {
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-size: 105%
}

#content .center #next {
    color: #00D500
}

#footer {
    display: block;
    height: 105px;
    width: 720px;
    margin: 0 auto;
    background: url("../images/webradio.sprite.png") no-repeat center -21px;
    padding-top: 20px
}

#footer #playlists {
    display: inline-block;
    height: 100px;
    font-size: 11px;
    vertical-align: top;
    text-align: center;
    width: 275px;
    background: url("../images/webradio.sprite.png") no-repeat 0 -340px;
    padding-top: 2px
}

.mbl {
    display: none;
}

#footer #playlists .icon {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    opacity: 0.8
}

#footer #playlists .icon.wmp {
    background-position: -51px -160px
}

#footer #playlists .icon.android {
    background-position: -9px -286px;
}

#footer #playlists .icon.ios {
    background-position: -57px -286px;
}

#footer #playlists .icon.winamp {
    background-position: -1px -160px
}

.icon.android2 {
    background-position: -203px -160px
}

.icon.win {
    background-position: -250px -160px
}

.icon.ios2 {
    background-position: -302px -160px;
}

.icon.face2 {
    background-position: -215px 0px;
}

icon.mouse {
    background-position: 0px -338px;
}

.icon.voltar {
    background-position: -258px 1px
}

.icon.home {
    background-position: -283px 0px
}

.icon.chat {
    background-position: -305px 0px
}

.footer p {
    padding-bottom: 2px;
}

.footer2 {
    width: 100%;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    bottom: 0px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    z-index: 999;
}

.recadinhos {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 5px;
}

.recadinhos h2 {
    color: #365899;
}


/*  Janela flutuante */

.btn {
    font-size: 3vmin;
    padding: 0.75em 1.5em;
    background-color: #fff;
    border: 1px solid #bbb;
    color: #333;
    text-decoration: none;
    display: inline;
    border-radius: 4px;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
}

.btn:hover {
    background-color: #ddd;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
}

.btn-small {
    padding: .75em 1em;
    font-size: 0.8em;
}

.modal-box {
    display: none;
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 98%;
    background: white;
    border-bottom: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
}

.modal-box h2 {
    margin: 1px;
	color: #000;
}

.modal-box header,
.modal-box .modal-header {
    padding: 0.625em 0.75em;
    border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
    margin: 0;
}

.modal-box .modal-body {
    padding: 1em 0.75em;
}

.modal-box footer,
.modal-box .modal-footer {
    padding: 1.5em;
    border-top: 1px solid #ddd;
    background: rgba(0, 0, 0, 0.02);
    text-align: right;
}

.modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
    line-height: 1;
    font-size: 3em;
    position: absolute;
    top: 7px;
    right: 2%;
    text-decoration: none;
    color: #bbb;
}

a.close:hover {
    color: #222;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}


/* banner rodape */

.bann-baixo {
    width: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    position: fixed;
    bottom: 0px;
    margin: 0;
}

.bann-baixo img {
    width: 100%;
    max-height: 100px;
    border: none;
    margin: 0;
    padding: 0;
}

#footer {
    background: url(../images/footer-shade.png) no-repeat center -21px
}

#footer #playlists .icon.realplayer {
    background-position: -101px -160px
}

#footer #playlists .icon.quicktime {
    background-position: -150px -160px
}

#footer #playlists a {
    display: inline-block;
    width: 50px;
    height: 50px
}

#footer #playlists a:hover>.icon {
    margin-top: -2px;
    opacity: 1
}

#radio-player {
    display: inline-block;
    width: 440px;
    height: 70px
}

#radio-player .control {
    display: inline-block;
    width: 72px;
    vertical-align: middle;
    margin-top: 10px;
    margin-left: 10px
}

#radio-player .control .play {
    display: inline-block;
    position: relative;
    width: 72px;
    height: 72px;
    background: url("../images/webradio.sprite.png") no-repeat -1px -210px;
    cursor: pointer;
    vertical-align: bottom
}

#radio-player .control .play:hover {
    background-position: -83px -210px
}

#radio-player .control .stop {
    display: inline-block;
    position: relative;
    width: 72px;
    height: 72px;
    background: url("../images/webradio.sprite.png") no-repeat -165px -210px;
    cursor: pointer;
    vertical-align: bottom
}

#radio-player .control .stop:hover {
    background-position: -247px -210px
}

#radio-player .control .stop .spinner {
    display: block;
    width: 72px;
    height: 72px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/webradio.sprite.png") no-repeat -330px -210px;
    -webkit-animation: playspin 2s infinite linear;
    -moz-animation: playspin 2s infinite linear;
    -o-animation: playspin 2s infinite linear;
    -ms-animation: playspin 2s infinite linear;
    animation: playspin 2s infinite linear
}

#radio-player .control .stop .search {
    display: block;
    width: 72px;
    height: 72px;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/webradio.sprite.png") no-repeat -402px -210px;
    -webkit-animation: playspin 0.3s infinite linear;
    -moz-animation: playspin 0.3s infinite linear;
    -o-animation: playspin 0.3s infinite linear;
    -ms-animation: playspin 0.3s infinite linear;
    animation: playspin 0.3s infinite linear
}

#radio-player .volume {
    display: inline-block;
    font-size: 11px;
    height: 40px;
    width: 340px;
    //text-align: center;
    position: relative;
    top: 15px;
    margin-left: 10px
}

#radio-player .volume .mute {
    display: inline-block;
    vertical-align: bottom;
    width: 20px;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: url("../images/webradio.sprite.png") no-repeat -81px 0
}

#radio-player .volume .bar {
    display: inline-block;
    width: 280px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-left: 8px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.1)
}

#radio-player .volume .bar .vol {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.52);
    overflow: visible;
    border-radius: 3px
}

#radio-player .volume .bar a {
    display: block;
    position: absolute;
    width: 23px;
    height: 23px;
    background: transparent url("../images/webradio.sprite.png") no-repeat -160px 0;
    z-index: 98;
    margin-top: -15px;
    margin-left: -11.5px
}

#radio-player .volume .bar a div {
    width: 23px;
    height: 23px
}

#radio-player .volume .bar a:hover {
    background-position: -183px 0;
    background-color: transparent
}

@-webkit-keyframes playspin {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes playspin {
    0% {
        -moz-transform: rotate(0deg)
    }
    100% {
        -moz-transform: rotate(360deg)
    }
}

@-o-keyframes playspin {
    0% {
        -o-transform: rotate(0deg)
    }
    100% {
        -o-transform: rotate(360deg)
    }
}

@-ms-keyframes playspin {
    0% {
        -ms-transform: rotate(0deg)
    }
    100% {
        -ms-transform: rotate(360deg)
    }
}

@-keyframes playspin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.nosupport,
.loading {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.85);
    color: #000;
    z-index: 99999
}

.nosupport .text,
.loading .text {
    position: relative;
    font-size: 15px;
    width: 500px;
    height: 50px;
    text-align: center;
    top: 30%;
    left: 50%;
    margin-left: -250px;
    margin-top: -25px
}

.nosupport {
    display: none
}

#artist a{
    margin-top: 20px;
	display: inline;
    position: relative;
}

#title a{
    margin-top: 20px;
	display: inline;
    position: relative;
}

#songtitle, .jp-current-time { 
    margin: 1px 1%;
    padding: 0px 5%;
    display: inline-block;
    letter-spacing: 2px;
	line-height: 1px;
    position: relative;
    font-weight: bold;
    text-align: center;
    font-size: 8pt;
    color: #fff;
}

#quality, .jp-current-time { 
    margin: 1px 1%;
    padding: 0px 5%;
    display: inline-block;
    letter-spacing: 2px;
	line-height: 1px;
    position: relative;
    font-weight: bold;
    text-align: center;
    font-size: 8pt;
    color: #fff;
}

#artist a:hover:after,
#title a:hover:after {
    background: #111;
    background: rgba(0, 0, 0, 0.8);
    border-radius: .5em;
    bottom: 1.95em;
    color: #fff;
    content: attr(data-title);
    display: block;
    left: -0.2em;
    padding: .3em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 98;
    font-size: 13px
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1010;
    color: #4B4B4B;
    display: none;
    width: 220px;
    padding: 1px;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
}

.popover.top {
    margin-top: -10px
}

.popover.right {
    margin-left: 10px
}

.popover.bottom {
    margin-top: 10px
}

.popover.left {
    margin-left: -10px
}

.popover-title {
    color: #4B4B4B;
    margin: 0;
    padding: 8px 14px;
    font-size: 110%;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0
}

.popover-content {
    padding: 4px 8px
}

.popover-content p,
.popover-content ul,
.popover-content ol {
    margin-bottom: 0
}

.popover .arrow,
.popover .arrow:after {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.popover .arrow:after {
    content: "";
    z-index: -1
}

.popover.top .arrow {
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px 10px 0;
    border-top-color: #ffffff
}

.popover.top .arrow:after {
    border-width: 11px 11px 0;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -1px;
    left: -11px
}

.popover.right .arrow {
    top: 50%;
    left: -10px;
    margin-top: -10px;
    border-width: 10px 10px 10px 0;
    border-right-color: #ffffff
}

.popover.right .arrow:after {
    border-width: 11px 11px 11px 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
    left: -1px
}

.popover.bottom .arrow {
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-width: 0 10px 10px;
    border-bottom-color: #ffffff
}

.popover.bottom .arrow:after {
    border-width: 0 11px 11px;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    top: -1px;
    left: -11px
}

.popover.left .arrow {
    top: 50%;
    right: -10px;
    margin-top: -10px;
    border-width: 10px 0 10px 10px;
    border-left-color: #ffffff
}

.popover.left .arrow:after {
    border-width: 11px 0 11px 11px;
    border-left-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
    right: -1px
}

.styled-select {
    display: inline-block;
    margin: 0 2px;
    height: 26px;
    width: 220px;
    line-height: 26px;
    color: #414141;
    position: relative;
    /*background: #f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #e6e6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #e6e6e6));
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #e6e6e6 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%, #e6e6e6 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%, #e6e6e6 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #e6e6e6 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0);*/
    border: 1px solid #cccccc;
    box-shadow: inset 0 1px 0 #fff, 0 0 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 0 3px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 0 3px rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: none
}

.styled-select,
.styled-select .curr {
    padding: 0 20px 0 10px
}

.styled-select select {
    padding: 0;
    margin: 0;
    height: 0px;
    width: 0px;
    visibility: hidden
}

.styled-select .curr {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    cursor: pointer
}

.styled-select .curr:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top-color: #0099cc;
    position: absolute;
    top: 12px;
    right: 8px
}

.styled-select ul {
    border: 1px solid #ccc;
    background-color: white;
    margin: 0 0;
    padding: 0 0;
    position: absolute;
    top: 100%;
    right: -1px;
    left: -1px;
    z-index: 99;
    -webkit-box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: auto
}

.styled-select li {
    list-style: none;
    cursor: pointer;
    padding: 0 10px;
    margin: 0 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent
}

.styled-select li:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-top: 1px solid #0087bd;
    border-bottom: 1px solid #0087bd;
    color: white
}

.styled-select li.disabled,
.styled-select li.disabled:hover {
    color: #bbb;
    font-style: italic;
    background: none;
    cursor: text
}

.styled-select .curr.focused {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1)
}

.pull-right {
    display: block;
    float: right !important;
    vertical-align: middle;
}

.logoimg {
    margin-top: 3px
}

@media (max-width:1200px){
	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 360px;
		float: left;
	}
}

@media (max-width:750px) {
    #wrapper,
    #content,
    #footer {
        max-width: 100%;
        width: 100%;
        min-width: 300px;
        clear: both;
        overflow: hidden
    }
    #footer,
    #radio-player,
    #footer #playlists {
        height: auto
    }
    #header ul {
        min-width: 0px
    }
    #header ul li {
        width: auto;
        padding: 0
    }
    #header ul li a {
        float: left;
        padding: 0 10px;
        width: auto
    }
    #content {
        height: auto
    }
    #content .left,
    #content .right {
        float: left;
        width: 48%;
        padding: 10px 1%;
		margin-top: -20px;
    }
    #content .left .onair {
        margin-right: 10px
    }
    #radio-player {
        width: 55%
    }
    #radio-player .volume {
        width: 70%;
        float: left;
        padding-top: 10px
    }
    #radio-player .volume .mute {
        float: left
    }
    #radio-player .volume .bar {
        float: left;
        width: 75%;
        margin: 5px 0 0 5px
    }
    #radio-player .control {
        margin-top: 0px!important;
        float: left;
        display: block
    }
    #footer #playlists {
        width: 43%
    }
    #footer #playlists a {
        width: 20%
    }
    #footer #playlists a i {
        width: 100%
    }
    #footer {
        background: url(../images/footer-shade.png) no-repeat center -21px
    }
    #radio-player .volume .mute {
        float: left
    }
    #nowplaying {
	block-size: auto;
    width: inherit;
    float: left;
    text-align: left;
	margin: 10px 10%;
    }
	
	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 275px;
		float: left;
	}
}

@media (max-width:675px){
	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 250px;
		float: left;
	}
}

@media (max-width:600px) {
    #radio-player .volume {
        width: 68%
    }
	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 230px;
		float: left;
	}
}

@media (max-width:550px) {
    #radio-player .volume {
        width: 66%
    }
    #footer #playlists a {
        width: 23%
    }
	
	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 200px;
		float: left;
	}
}

@media (max-width:520px) {
    #radio-player .volume {
        width: 64%
    }
}

@media (max-width:500px) {
    #content .left .onair {
        font-size: 200%;
    }
    #radio-player .control,
    #radio-player .volume {
        float: left;
        display: block
    }
    #radio-player .volume {
        width: 62%
    }

	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 175x;
		float: left;
	}
}

@media (max-width:480px) {
    #radio-player .volume {
        width: 58%
    }
}

@media (max-width:440px) {
    #radio-player .volume {
        width: 50%
    }
}

@media (max-width:400px) {
    #content .left .onair {
        margin-bottom: -20px !important;
    }
    #content .right #station {
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 9999
    }
    #header ul li>a {
        font-size: 10px
    }
    #content .main {
        padding-top: 0;
        margin-top: 0
    }
    #content .left,
    #content .right {
        float: none;
        clear: both;
        overflow: hidden;
        width: 96%;
        padding: 10px 2% 0;
        text-align: center
    }
    #content .right {
     padding-top: 10px;
    margin-top: -10px;
    }
    #content .left .onair {
        font-size: 220%
    }
    #content .left .onair,
    #content .left img {
        float: none;
        clear: both;
        overflow: hidden;
        padding: 10px 2%;
        text-align: center;
        display: block;
        margin: 0 auto
    }
    #footer {
        float: left;
        width: 100%
    }
    #radio-player .volume {
        margin-left: 5px
    }
    #radio-player .volume .mute {
        float: left
    }
    #radio-player,
    #footer #playlists {
        clear: both;
        overflow: hidden;
        float: none;
        display: block;
        width: 100%
    }
    #radio-player .volume {
        width: 64%
    }
    #footer #playlists {
        padding: 1px 0;
        min-height: 22px
    }
    #radio-player .volume .bar {
        float: left;
        width: 150px;
        margin-left: 5px
    }
    #footer #playlists a {
        width: 20%
    }

	#toggle {
    	display: block;
		position: relative;
		margin-top: -17px;
		margin-left: 208px;
		float: left;
	}
}

.bar {
    margin-bottom: 5px!important;
}

body {
    background-attachment: fixed!important;
}

@media (max-width: 350px) {
    .off350 {
       // display: none;
    }
    .recadinhos {
        width: 95%;
    }
}

@media (max-width: 480px) {}