@charset "utf-8";
body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #a3a3a3;
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	min-width: 400px;
}

a {
	color: #a3a3a3;
	text-decoration: none;
}
a:hover {
	color: #5b006b;
}

.header {
/*    background-color: #5b006b;*/
/*    background-color: #8a159e;*/


    text-align: center;
    padding: 1% 0 1.5% 0; 
}
.header .logo img {
    width: 100%;
    max-width: 60px;
    height: auto;
}
.header .date_head  {
    text-align: center;
    font-size: 0.8em;
    margin-top: 1em;
}
.date_body {
    text-align: center;
    display: none;
}


.social i {
	padding: 0px 0.4em;	
}


.now {
    text-align: left;
    margin-top: 3%;
}
.now .song_img {
    float: left;
    width: 25%;
    margin-right: 25px;
    min-height: 105px;
}

.rotate {
/*  -webkit-animation: spin 5s linear infinite; /* Safari browser */
  animation: spin 5s linear infinite;
}


/* for Safari browser  */
/*
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
*/

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.now .text {
    padding-top: 0.8em;
}
.now .song_img img {
    border: 5px solid #ddd;
    background-color: #ddd;
/*
    max-width: 100%;
    max-height: 90px;
    height: auto;
*/
	width: 90px;
	height: 90px;
    border-radius: 60px;
    transition: all 4.0s linear;
}
.now .song_title {
    font-size: 1.2em;
    padding-top: 0.1em;
}
.now .song_artist {
    color: #111;
    font-size: 0.9em;

}
.now .song_mix {
    font-size: 0.76em;
    /*vertical-align: super;*/
}
.now .playing span {
    font-size: 0.5em;
    color: #333;
    border: 1px solid #333;
}


.playing {
    margin: 1.5% 0 1% 0;
}
.playing span {
    color: #666;
    border-radius: 10px;
    border: 1px solid #666;
    text-transform: uppercase;
    font-size: 0.6em;
    padding: 4px 10px 3px 10px;
}

.title {
    margin: 5% 0 2% 0;
}
.title span {
    color: #666;
    border-radius: 10px;
    border: 1px solid #666;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 400;
    padding: 4px 12px 3px 12px;
}

.coming, .past {
    text-align: left;
    margin-top: 4%;
}
.coming {
    color: #666;
}
.coming .playing, .past .playing  {
    margin-bottom: 2%;
    text-align: center;
}
.coming .playing span {
    color: #666;
    border: 1px solid #666;
}

.coming .song_img img {
    border: 1px solid #666;
/*
    max-width: 100%;
    max-height: 45px;
    height: auto;
*/
	width: 45px;
	height: 45px;
    padding: 2px;
    border-radius: 60px;
    float: left;
    margin: 0 3% 1% 0;
}


.past .song_img img {
    border: 1px solid #a3a3a3;
	width: 30px;
	height: 30px;
    padding: 2px;
    border-radius: 30px;
    float: left;
    margin: 0 4% 2.5% 5%;
}

/*
.past:hover {
    color: #666;
}
*/

.listen {
    margin-top: 5%;
}

.listen_btn {
    margin: 5% auto 7% auto;
    display: block;
/*    max-width: 215px;*/
}
.listen_btn span {
    color: #666;
    border: 1px solid #666;
    font-size: 2.5em;
    font-weight: 700;
    text-transform: uppercase;

    border-radius: 50px;
    padding: 4px 10px 3px 10px;
}
.listen_btn span:hover,
.listen_btn span.sel {
    color: #fff;
    border: 1px solid #eb4034;
    background-color: #eb4034;

}


.bitrate {
    margin: 1.5% 0 1% 0;
}
.bitrate span {
    color: #111;
    border-radius: 5px;
    border: 1px solid #111;
    text-transform: uppercase;
    font-size: 1.0em;
    padding: 3px 7px 2px 7px;
}
.bitrate:hover span {
    color: #5b006b; 
    border: 1px solid #111;
    background-color: #111;
}
.player {
    color: #111;
    font-size: 0.7em;
    margin-bottom: 3%;
    margin-left: 4%;
}

.listeners {
    color: #111;
    font-size: 0.8em;
}

.show_img img {
    max-width: 120px;
    height: auto;
    border-radius: 5px;
    margin: 0 2% 3% 0;
    float: left;
}
.show_description {
    color: #666;
    padding-right: 5%;
}
.show_description h2 {

    font-size: 1.2em;  
    font-weight: 700;
    margin: 0.5em 0 0.1em 0;
}
.show_description h2 .dj {

    font-size: 0.8em;
	padding-left: 0.2em;
}
.show_description strong {
    color: #a3a3a3;
    font-size: 1.0em;  
    font-weight: 700;
    display: block;
    margin-bottom: 0.5em;
}
.show_description .playing {
    font-size: 0.7em;
    font-weight: 300;
    margin-left: 1em;
    display: inline;
    vertical-align: super;
}
.show_description .on_air_times {
    margin-top: 0.4em;
    
}
.show_description .on_air_times span {
    font-size: 0.7em;
    color: #a3a3a3;
    border-radius: 3px;
    border: 1px solid #a3a3a3;
    text-transform: uppercase;
    padding: 2px 3px 1px 3px;
    margin: 1px 2px 0 0;
    text-align: center;
    width: 56px;
    display: block;
    float: left;
}

.show_now .playing {
    text-align: center;
}

.schedule .playing {
    margin: 1% 0 3% 0;
    text-align:center;
}
.schedule .playing span em {
    font-style: normal;
}
.schedule a {
    text-align: center;
    display: block;
    margin: 0.4% 0.4% 0 0;
    float: left;
}
    
.schedule img {
    max-width: 80px;
    height: auto;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 3px;
    display: block;
}
.schedule img {
	    max-width: 120px;
}
.schedule .current img, .schedule .sel img {
    border: 1px solid #111;
}
.schedule .past img {
    opacity: 0.5;
}
.schedule .past:hover img {
    opacity: 1;
    border: 1px solid #a3a3a3;
}
.schedule .future img {
    filter: grayscale(100%);
    opacity: 0.9;
}
.schedule .future:hover img {
    filter: none;
    opacity: 1;
    border: 1px solid #666;
}

.days {
    margin: 1% 0 4% 0;
}
.days a {
    color: #666;
    border: 1px solid #666;
    border-radius: 5px;
    padding: 4px 14px 3px 14px;
    margin-right: 2px;
    text-transform: uppercase;
	line-height: 2em;
}
.days a:hover, .days a.sel {
    color: #fff;
    background-color: #666;
}
.days a.now {
    color: #5b006b;
    border: 1px solid #5b006b;
}
.days a.now:hover, .days a.now.sel {
    color: #fff;
    background-color: #5b006b;
}

.charts .row {
    color: #666;
    padding: 0.5em 0 1.5em 0;
    min-height: 1.2em;
    border-radius: 10px;
    border-bottom: 1px dashed #fff;
}
.charts .row .clr {

}
.charts .row.down {
    color: #cf8890;
}
.charts .row div {
    float: left;
}
.charts .row:hover {
    background-color: #f6f6f6;
    border-bottom: 1px dashed #a3a3a3;
}
.charts .row .position {
    text-align: center;
    width: 4%;
}
.charts .row .position_previous {
    text-align: center;
    font-size: 0.8em;
    width: 5%;
}
.charts .row .icon {
    text-align: center;
    width: 6%;
}
.charts .row .week {
    text-align: center;
    width: 5%;
}
.charts .row .song {
    width: 80%;
}
.charts .row .song em {
    font-size: 0.8em;
    font-style: normal;
    display: block;
}

.about {
    color: #666;
    font-size: 0.8em;
}

.entries {
    color: #666;
}
.entries .author {
    color: #a3a3a3;
    font-size: 0.8em;
    margin-top: 0.8em;
}
.entries .say {
    margin-top: 1em;
    text-align: center;
}
.entries .say a {
    color: #fff;
    background-color: #666;
    font-size: 1.2em;
    padding: 6px 16px 6px 16px;
    border-radius: 5px;
}
.entries .say a:hover {
    color: #666;
    border: 1px solid #666;
    background: none;
}


.nav span {
    font-size: 1.2em;
    color: #666;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 3px 10px;
    margin-right: 0.3em;
}

.nav a {
    font-size: 1.2em;
    color: #666;
    border: 1px solid #666;
    border-radius: 5px;
    padding: 3px 10px;
    margin-right: 0.3em;
}

.nav a:hover {
    color: #fff;
    background-color: #666;
}


@media only screen and (max-width: 767px) {
    .header {
        text-align: center;
    }
    .listen {
        margin-top: 1%;
    }
    .listen_btn {
        margin: 1em auto;
    }
    .coming, .past {
        font-size: 14px;
    }
    .now {
        margin: auto;
        max-width: 350px;
    }
    .show_img img {
        padding-bottom: 5%;
    }
    .date_head {
        display: none;
    }
    .date_body {
        display: block;
    }
}
@media only screen and (max-width: 980px) {
    .listen_btn span {
        font-size:1.3em;
    }
    .now {
        font-size: 15px;
    }
    .player {
        font-size: 0.6em;
        margin-left: 0;
    }
}


.center {
    text-align: center;
}