/*
 * CSS styleshet for the "Madsonic 4k" theme.
 */

@import "font-Montserrat.css";

@import "default.css";

@import "scrollbar-px.css"; 

@import "playericons/playericons4klight.css";


.browse-index-shortcut {
    font-size: 150% !important;
}

.maincontrol a {
    font-weight: 500; 
}

.maincontrol a img {
	padding-bottom: 3px;
	padding-right: 1px;
	padding-left: 1px;
}

.leftpanel p.dense{
    clear: both;
    padding: 4px;
    border-bottom: 1px dotted #ccc;
    line-height: 1.1em;
    font-family: 'Montserrat', sans-serif !important; 
    font-weight: 400;
    font-size: 8pt;
}

.mainframe #content_artist  #anchor_list a{
    font-size: 16pt;    
}

h2 {
    margin: 10px 0 0 5px;
   font-size: 10pt; 
}

.album {
    font-size: 9pt;
    font-weight: 500;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    /* background: #ECECEC; */
}

/* Custom */
span.off {
    background: #FFF !important;
}

span.on {
    background: #33B5E5 !important;
    color: #fff !important;
}

span.off:hover {
    background: #33B5E5 !important;
    border: solid 1px #333  !important;
    }
    
span.on:hover  {
    background: #44B5E5 !important;
    border: solid 1px #333  !important;
    }    
    

span.off2 {
    background: #333;    
    cursor: pointer;
    float:left;
    padding: 4px 9px;
    margin: 2px;
    color: #FFF;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: solid 1px #333;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    white-space: nowrap;
    font-size: 8pt;    
}

span.on2 {
    	cursor: pointer;
		float:left;
		padding: 4px 9px;
		margin: 2px;
        background: #33B5E5;
		color: #FFF;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
        border: solid 1px #ccc;
		-webkit-transition-duration: 0.1s;
		-moz-transition-duration: 0.1s;
		transition-duration: 0.1s;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
		white-space: nowrap;
        
    font-size: 8pt;    
}

span.on2:hover  {
    background: #33B5E5 !important;
    border: solid 1px #444 !important;
}

span.off2:hover  {
    background: #000 !important;
    border: solid 1px #444 !important;
}
    
table.music th { line-height: 35px !important; } 
table.songs tr { line-height: 40px !important; }
table.music.songs tr { line-height: 40px !important; } 

table.music tr:nth-of-type(even) { background: rgba(0,0,0,.02); }
table.music tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); }

table.content tr:nth-of-type(even) { background: rgba(0,0,0,.02); } 
table.content tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); }

table.content tr { border-bottom: 1px solid rgba(128,128,128,0.05) !important; }

#playlistBody tr:nth-of-type(even) { background: rgba(0,0,0,.02); border-bottom: 1px solid rgba(128,128,128,0.05) !important; }
#playlistBody tr:nth-of-type(odd)  { background: rgba(0,0,0,.04); border-bottom: 1px solid rgba(128,128,128,0.05) !important; }

#startButton, #stopButton {
    cursor:pointer; font-size:30px; color:#0090BB !important;
}

.playlistframe #progress, #progress-slider, #volume, #volume-slider {
    background: #ccc !important;
}

.ui-slider-range-min {
    background: #0090BB !important;
}

.ui-slider .ui-slider-handle {
    background: #0090BB !important;
}

#cc-on, #cast-active {
    color: #0090BB !important;
}

#play, #pause, #buffer {
    font-size: 24px !important;
    color: #0090BB !important;
}

.flowplayer, .flowplayer.is-playing, .flowplayer.is-fullscreen .fp-player {
    background-color: #ECECEC !important;
}


.starred {
    color: #009BCA !important;
}

.loved {
    color: #009BCA !important;
}

.control {
    color: #888 !important;
}

.hot {
    color: orange !important;
}

.icon {
  font-size:12px;
  padding: 7px 5px 4px 5px !important;
  margin:3px 1px 3px 1px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:15px;
  height:15px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon-rank {
  font-size:11px;
  font-family: 'Montserrat', Arial, serif  !important;
  /* padding:7px 4px 2px 4px; */
}

.custom-icon-playlist {
  font-size:11px;
  background:#fff;
  padding:7px 6px 4px 6px;
  margin: 1px;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  color:#888;
 	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); 
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:15px;
  height:15px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon {
  font-size:11px;
  background:#fff;
  padding:7px 6px 4px 6px;
  /*padding: 4px 1px 2px 5px;*/
  margin: 1px 0px 1px 0px;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  color:#888;
 	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); 
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:15px;
  height:15px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}


.custom-icon-small {
  font-size:7px;
  background:#fff;
  padding:7px 6px 4px 6px;
  margin: 1px 0px 1px 0px;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  color:#888;
 	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); 
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:15px  !important;
  height:15px  !important;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon:hover, .custom-icon-playlist:hover {
  background:rgba(1,1,1,0.1);
  border:1px solid #8cce38;
  box-shadow: 0 1px 5px rgba(25, 31, 31, 0.8) !important;    
  color: #009BCA;
}


.custom-icon:active, .custom-icon-playlist:active {
  background: rgba(200,200,200,0.4) !important;
  border:1px solid #fff !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46) !important;    
  color: orange !important;
}

.custom-icon-header {
  font-size:20px !important;
  background:#fff;
  padding:7px 4px 3px 4px;
  margin:0 0 8px 0;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:24px;
  height:24px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon-main {
  font-size:14px !important;
  background:#fff;
  padding: 7px 6px 5px 6px;  
  margin:0 0 8px 0;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:16px;
  height:16px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon-media {
  font-size:14px !important;
  background:#fff;
  padding: 6px 5px 5px 6px;  
  margin:0 0 0 0;
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ccc !important;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:16px;
  height:16px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}


.custom-icon-main:hover {
  border:1px solid #eee !important;	
  color: pink !important;
}

.custom-icon-main:active {
  border:1px solid #fff !important;	
  color: pink !important;
}

.custom-icon-nohover {
  /*font-size:12px;*/
  background:#fff;
  padding:6px 4px 2px 4px;
  margin:0px;
  /* background:rgba(0,0,0,0.2); */
  -webkit-border-radius:25%;
  -moz-border-radius:25%;
  -o-border-radius:25%;
  border-radius:25%;
  border:1px solid #ddd !important;
  color:#888;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:15px;
  height:15px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.custom-icon-nohover:hover {
  color: orange;
}

.cover-icon {
  font-size:9px !important;
  background: rgba(50, 50, 50, 0.90) !important;
  color:#fff !important;
  padding:7px 4px 4px 5px;
  box-shadow: 0 1px 5px rgba(16, 16, 16, 0.90);
  -webkit-border-radius:25% !important;
  -moz-border-radius:25% !important;
  -o-border-radius:25% !important;
  border-radius:25% !important;
  border:1px solid #111 !important;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:12px;
  height:12px;
}

.cover-icon:hover {
  background: rgba(50, 50, 50, 0.80) !important;	
  color: #009BCA  !important;
  border:1px solid #888 !important;
}

.cover-icon:active {
  border:1px solid #fff !important;	
  color: orange !important;
}

.fix-editor {
  display:none;
}
.icon-wrapper {
  display:inline-block;
}

.detail {
    font-size: 9pt;
}

.detailmini {
    font-size: 8pt;
}

.detailcolordark {
    font-size: 8pt;
}

.dd-theme-classic, .dd-all {
    background-color: #fff !important; 
	border-color: #bbb !important;
}

input {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333;
    border-radius: 5px;
    font-family: 'Montserrat', Arial, serif; 
    font-size: 8.5pt;
    padding: 7px 10px 7px 10px;
    border: 1px solid #bbb;
}

select {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px;
    color: #333;
    font-family: 'Montserrat', Arial, serif;
    font-size: 8.5pt;   
    padding: 7px 10px 7px 10px;
    border: 1px solid #bbb;
    -webkit-appearance: none;
}

button {
    /* background: none repeat scroll 0 0 #FFFFFF; */
    /* background-color: #333; */
    color: #eee;
    border-radius: 5px;
    font-family: 'Montserrat', Arial, serif; 
    font-size: 8.5pt;    
    font-weight: 400;
    padding: 7px 10px 7px 10px;
    margin-left: 4px;	
    border: 1px solid #444;
}

.jumbotron {
    color: #333  !important;
    background-color: #888 !important;
}

.playingframe .songTitle{
    line-height: 20px;
    font-weight: 700;
    font-size: 110%;
}

.playingframe .songYear {
    line-height: 25px;
    font-weight: 700;
    font-size: 130%;
}

.playingframe .songDuration {
    line-height: 30px;
    font-weight: 700;
    font-size: 100%;
}
.playingframe .detailmini {
    display: inline-table;
}

.leftpanel p.dense{
    border-bottom: 1px dotted #ddd;
    clear: both;
    padding: 4px;
    line-height: 1.4em;
    font-size: 9pt;	
}
.dropshadowXXX {
    border: 0px solid #111;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    opacity:0.95;
    filter:alpha(opacity=95); 
    -moz-box-shadow:    2px 2px 15px 0 #111;
    -webkit-box-shadow: 2px 2px 15px 0 #111;
    box-shadow:         2px 2px 15px 0 #111;
}

.accent {
    color: #7B9DB6 !important;
    font-weight: 700 !important;
	
}

.trans {
  color: #c7c7c7 !important;
}


/* Color for warning messages. */
.warning {
    color: orange !important;
}

#artistBio {
  line-height: 18px;
  padding-bottom: 25px;
  border-top: 1px dotted #ccc;
  padding-top: 15px;
}

#albumBio {
  line-height: 18px;
  padding-bottom: 25px;
  border-top: 1px dotted #ccc;
  padding-top: 15px;
}

#castOn {
  color:#666;
}

#castOff {
  color:#666;
}

.browse-index-title {
    background-color: #fff;
    margin-bottom: 10px;
    margin-top: 20px;	
}

.activeHeaderSelected {
    white-space: nowrap;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    background-color: #ddd;
    border: 1px solid #aaa !important;
    border-radius: 3px 3px 3px 3px;
    padding: 5px 10px;
}

#chevronButton {
	color: #26a5d2 !important;
	font-size: 11px;
}

table.dataTable thead th.sorting:after {
	color: #bbbbbb !important;
}

table.dataTable thead th.sorting_asc:after {
	color: #73B6E0 !important;
}

table.dataTable thead th.sorting_desc:after {
	color: #73B6E0 !important;
}

span.genre {
    background: #ddd;
    color: #0090BB;
    border: solid 1px #888;
}

span.genreActive {
    background: #ddd;
    color: #666;	
    border: solid 1px #888;
}

button a:link, button a:active, button a:visited, button a:link *  {
	color: #ffffff !important;
}

button a:hover {
	color: #36CCF9 !important;
}

.help {
	color: #73B6E0 !important;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
	border: 2px solid #73B6E0;
	border-radius: 6px;
	box-shadow: 5px 5px 10px 0 rgba(128,128,128,0.4);
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
	padding: 10px;
	font-size: 12px;		
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: #73B6E0 !important;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
	border-left-color: #6CCF9 !important;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
	border-right-color: #73B6E0 !important;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
	border-top-color: #73B6E0 !important;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color:#73B6E0;top:4px}
.tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow-background { border-right-color:#73B6E0;left:4px}
.tooltipster-sidetip.tooltipster-noir.tooltipster-left .tooltipster-arrow-background { border-left-color:#73B6E0;left:-4px}
.tooltipster-sidetip.tooltipster-noir.tooltipster-top .tooltipster-arrow-background { border-top-color:#73B6E0;top:-4px}