/* 
Google Fonts
------------
font-family: 'Inconsolata', ;
font-family: 'Signika', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Ubuntu Condensed', sans-serif;
*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed|Fjalla+One|Nunito|Signika|Inconsolata);


/* ----------------------
   big webplayer - on air
   ---------------------- */
body { padding: 0; margin: 0; font-family: 'Ubuntu Condensed', sans-serif; }

.clearall { clear: both; }

#content { width: 100%; height: 100%; max-width: 532px; max-height: 400px; background: #fff url('../images/bg.jpg') no-repeat center center; }

#logo {	float: left; width: 50%; text-align: left; }
#logo > img { margin: 5px; max-width: 100px; width: 100%; }

#now-playing { width: 100%; text-align: center; margin: 0; padding: 0; }

#song-image { float: left; width: 42%; }
#song-image > #cover { background-color: #ddd; float: right; padding: 4px; border: 1px solid #bbb; width: 100%;	max-width: 100px; }

#playing-title { float: right; width: 57%; text-align: left; }
#playing-title > #song, #playing-title > #artist { text-align: left; display: block; font-family: 'Nunito', sans-serif; }
#playing-title > #song { margin-top: 10px; font-size: 20px; font-weight: bold; color: #222; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); }
#playing-title > #artist { margin-top: 18px; font-size: 20px; font-weight: bold; color: #222; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); }

#cc_tunein { float: right; text-align: right; width: 30%; margin-left: 5px; }
#cc_tunein > a { margin: 5px; } 

.on-air { width: 100%; text-align: center; margin: -35px 0 0 0; padding: 0; }
.on-air p {	color: #000; font-size: 38px; font-family: 'Fjalla One', sans-serif; font-weight: bold; line-height: 1px; }




/* ---------------------
   small player - widget
   --------------------- */
#small-now-playing { width: 100%; margin: 0; padding: 0; line-height: 24px; float: right; }
#small-now-playing > .small-on-air p { text-align: right; color: #000; font-size: 22px; font-weight: bold; font-family: 'Fjalla One', sans-serif; line-height: 24px; margin: 5px 0 5px 10px; }

#small-song-image {	float: right; width: 120px; text-align: center; display: inline-block; margin: 0; padding: 0; }
#small-song-image > #small-cover { background-color: #ddd; padding: 4px; border: 1px solid #bbb; width: 100%; max-width: 100px; }

#small-playing-title { float: right; display: inline-block; color: #222; }
#small-playing-title > #small-artist, #small-playing-title > #small-song { color: #222; font-family: "Nunito",sans-serif; font-size: 20px; font-weight: bold; line-height: 31px; margin: 15px 5px; padding: 0; text-align: right; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); }




/* ----------------------
   Recent tracks list
   ---------------------- */
#recent-tracks { border-top: 2px solid #222; border-bottom: 2px solid #222; }
#track { float: left; width:100%; margin: 5px 0 0 0; border-bottom: 1px solid #888; padding-bottom: 10px; }
#track-cover { width:20%; max-width: 150px; float:left; text-align: center; display: inline-block; padding-top: 10px; }
#track-cover img { padding: 6px; background-color: #eee; border: 1px solid #888; text-align:center; width: 100px; }
#track-details { width:78%; float:left; padding-top: 10px; }
#track-artist { width: 95%; display: inline-block; text-align: left; font-size: 24px; font-weight: bold; color: #333; }
#track-song { width: 95%; display: inline-block; text-align: left; font-size: 24px; font-weight: bold; color: #333; }
#track-timestamp { width: 95%; display: inline-block; text-align: left; font-size: 16px; color: #666; }
#id { clear: both; }





/* ---------------------
   jPlayer Customization 
   --------------------- */
.jp-audio, .jp-audio-stream, .jp-video { background-color: transparent; border: none; }
.jp-audio-stream .jp-controls { position: absolute; right: 5px; top: 20px; width: 40px; }

#jp_container_1 { float: right; width: 60px; text-align: right; margin-top: 20px; }

.jp-interface { background-color: transparent; }




/* ----------------------
   3 player News Widget
   ---------------------- */
#jquery_jplayer_news_12, 
#jquery_jplayer_news_18,
#jquery_jplayer_news_desporto { margin-bottom: 5px;  }

.widget_radiosines_news_widget #jp_container_2,
.widget_radiosines_news_widget #jp_container_3,
.widget_radiosines_news_widget #jp_container_4 { float: none; max-width: 300px; width: 100% }

.widget_radiosines_news_widget #jp_container_2 .jp-progress,
.widget_radiosines_news_widget #jp_container_3 .jp-progress,
.widget_radiosines_news_widget #jp_container_4 .jp-progress { width: 210px; }

#jquery_jplayer_news_12 .jp-audio, 
#jquery_jplayer_news_18 .jp-audio,
#jquery_jplayer_news_desporto .jp-audio { width: 100%; }

#jquery_jplayer_news_12 .jp-interface, 
#jquery_jplayer_news_18 .jp-interface,
#jquery_jplayer_news_desporto .jp-interface { background-color: #fff; }

.widget_radiosines_news_widget .jp-audio,
.widget_radiosines_news_widget .jp-audio,
.widget_radiosines_news_widget .jp-audio {
  width: 100% !important;
}

.widget_radiosines_news_widget .jp-audio .jp-controls {
  padding-bottom: 0;
  padding-left: 20px;
  padding-right: 0px !important;
  padding-top: 20px;
  width: 100% !important;
}

@media only screen and (max-width: 320px) {
   .widget_radiosines_news_widget #jp_container_2,
   .widget_radiosines_news_widget #jp_container_3,
   .widget_radiosines_news_widget #jp_container_4 { float: none; max-width: 300px; width: 100% }

   .widget_radiosines_news_widget .jp-audio .jp-controls {padding-left:0; padding-right: 0; width: 300px; }

   .widget_radiosines_news_widget #jp_container_2 .jp-progress, 
   .widget_radiosines_news_widget #jp_container_3 .jp-progress, 
   .widget_radiosines_news_widget #jp_container_4 .jp-progress {width: 185px;}

   .widget_radiosines_news_widget .jp-audio .jp-type-single .jp-progress {left: 85px;}

   .widget_radiosines_news_widget .jp-audio .jp-type-single .jp-time-holder {left: 84px; width: 186px;}
}