/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/

canvas {
    image-rendering: -webkit-optimize-contrast;               /* Awesome future-browsers       */
}

canvas:not(.is-retina) {
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
}

canvas.is-retina {
    mask-image: url(/_/images/wavform_mask_2.png);
    -webkit-mask-image: url(/_/images/wavform_mask_2.png);
}

ul.playlist li.highlight.half canvas.is-retina ,
ul.playlist.top li canvas.is-retina {
    mask-image: url(/_/images/wavform_mask_4.png);
    -webkit-mask-image: url(/_/images/wavform_mask_4.png);
}


.form-control:focus {
	box-shadow: none !important;
}

ul.playlist {
    list-style-type:none;
    margin:0 auto;
    padding:0;
    position: relative;
    width: 100%;
    z-index: 0;
    max-width: 1200px;
}

ul.playlist.top {
	padding: 0 20px;
    z-index: 1;
    max-width: 1500px;
}

ul.playlist li { 
    display: block; 
    width:auto;     
    color: #fff; 
    text-decoration: none; 
    position: relative;
    background: transparent;
    min-height: 100px;
    margin-bottom: 35px;
    -webkit-animation: player 0.5s ; /* Chrome, Safari, Opera */
   animation: player 0.5s ;
}

ul.playlist li.track_placeholder {
	-webkit-animation: none  !important ; /* Chrome, Safari, Opera */
   animation: none !important ;
   -webkit-transition: 0s !important;
	transition: 0s !important;
	-webkit-animation: 0s  !important; /* Chrome, Safari, Opera */
	animation: 0s  !important;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes player {
from {opacity: 0;}
to {opacity: 1;}
}

/* Standard syntax */
@keyframes player {
from {opacity: 0;}
to {opacity: 1;}
}


ul.playlist.top li {
	margin-bottom: 0;

}

ul.playlist li:hover canvas,
ul.playlist li:hover .functions,
ul.playlist li:hover .time,
ul.playlist li:hover .infobits,
ul.playlist li:hover .dna_container {
    opacity: 1 !important;
    
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused {
    min-height: 150px;
}

ul.playlist li.comments_disabled.sm2_playing,
ul.playlist li.comments_disabled.sm2_paused {
    min-height: 100px;
}

ul.playlist.top li.sm2_playing,
ul.playlist.top li.sm2_paused {
    min-height: 100px;
}



ul.playlist li .cover{
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   top:0;
   left:-110px;
   width: 100px;
   height: 100px;
   cursor: pointer;
   background: rgba(0,0,0,0.2);
   border-radius: 10px;
   background-size: cover !important;
}



ul.playlist li .player-link {
    display:block;
    text-decoration:none;
    color:#333;
    outline:none;
    position:absolute;
    z-index:10;
    font-size: 16px;
    font-weight: bold;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    
    width: 38px;
	height: 38px;
	border: 2px solid #cb1606;
	border-radius: 50%;
    padding: 0;
    background: transparent;
	
}


ul.playlist li.sm2_playing .player-link, 
ul.playlist li.sm2_paused .player-link {
	background: #cb1606 !important;
	border-color: #cb1606 !important;
}

ul.playlist li .player-link i {
	-webkit-transition: all 0.5s;
    transition: all 0.5s;
}


ul.playlist li .player-link:hover { 
	background: #cb1606 !important;
	border-color: #cb1606 !important;
}

ul.playlist li .player-link:hover i, 
ul.playlist li.sm2_paused .player-link i { 
	color: #fff !important;
}

ul.playlist li .headline {
    display:block;
    text-decoration:none;
    color:var(--text_color);
    outline:none;
    position:absolute;
    font-size: 18px;
    font-weight: bold;
    left: 50px;
    top: -5px;
    right: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
    
}

ul.playlist li .headline a {
    color:var(--text_color);
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

ul.playlist li .headline .roof a {
    color:#888;
    font-weight: 600;
     cursor: pointer;
}





.track-detail ul.playlist li a {
    cursor: default !important;
}

.track-detail ul.playlist li a.hc-name {
    display: none !important;
}


.track-detail ul.playlist li .player-link {
    cursor: pointer !important;
}






ul.playlist li .headline a:hover {
    text-decoration: none;
}

ul.playlist li .headline span{
    display:inline-block;
    text-decoration:none;
    color:#888;
    outline:none;
    font-size: 13px;
    font-weight: normal;
    padding-right: 5px;
    line-height: 16px;
    width: 100%;
    font-weight: 400;
    
     
}

ul.playlist li .headline i,
ul.playlist li .headline a{
    font-weight: normal;
    font-style: normal;
    
}

ul.playlist li .headline i.text-right{
    position: absolute;
    right: 0;
    top: 6px;
    font-size: 10px;
    line-height: 14px;
    cursor: default;
    display: inline-block;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
}

ul.playlist li .headline i.text-right a {
    font-size: 11px;
    cursor: pointer;
}

ul.playlist li .headline a:hover{
    opacity: 0.5;
    text-decoration: none;
}


.track-detail ul.playlist li .headline a:hover{
    opacity: 1 !important;
}


ul.playlist li .headline font{
    font-weight: normal;
     
}


ul.playlist li a span{
    display:inline-block;
    text-decoration:none;
    color:#333;
    outline:none;
    font-size: 12px;
    font-weight: normal;
    padding-right: 15px;
     
}

ul.playlist li .controls {
    display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
    display:none;
    position:absolute;
    top:0.55em;
    right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
    position:relative;
    display:block;
}

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
    display:inline;
    display:inline-block;
}

ul.playlist.use-peak li .peak {
    display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {

}

ul.playlist li:hover .controls .statusbar {
    position:relative;
    cursor:ew-resize;
    cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {

}

ul.playlist li .controls {
    position:relative;
}

ul.playlist li .controls .statusbar {
    position:relative;
    height:50px;
    overflow:hidden;
    cursor:-moz-grab;
    cursor:grab;
    z-index: 1;
}

.track-detail ul.playlist.top li.sm2_playing .controls .statusbar, 
.track-detail ul.playlist.top li.sm2_paused .controls .statusbar {
	height:70px;
}


ul.playlist li .controls.dragging .statusbar {
    cursor:-moz-grabbing;
    cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
    position:absolute;
    left:0;
    top:0;
    height:0.5em;
}


ul.playlist li .controls .statusbar div.annotation:first-child {
    display: none !important;

}

ul.playlist li .controls .statusbar .position {
    opacity: 1;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
    opacity: 1;
}

ul.playlist li .controls .statusbar .loading {
    opacity: 1;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
    width:0;
}


ul.playlist li .timing {
    position: absolute;
    display: block;
    text-align: left;
    right: -5px;
    top: 20px;
    width: auto;
    padding: 0 5px;
    font-size: 10px !important;
    vertical-align: middle;
    z-index: 9;
    color: #333;
    line-height: 15px;
    -webkit-transition: opacity 0.5s;
    transition: all 0.5s;
    opacity: 0;
}


ul.playlist li.sm2_paused .timing,
ul.playlist li.sm2_playing .timing {
	opacity: 1;
}

ul.playlist li .timing-data {
   font-size: 10px !important;
}

ul.playlist li .time {
    position: absolute;
    display: block;
    text-align: left;
    right: -5px;
    top: 20px;
    width: auto;
    padding: 0 5px;
    font-size: 10px !important;
    vertical-align: middle;
    z-index: 9;
    color: #333;
    line-height: 15px;
    -webkit-transition: opacity 0.5s;
    transition: all 0.5s;
    opacity: 1;

}


.listeners-played ul.playlist li.half.light .time,
.listeners-played ul.playlist li.half.light .timing,
.content-col ul.playlist li.half.light .time,
.content-col ul.playlist li.half.light .timing {
	text-shadow: 
		1px 0 0 #fff,
		-1px 0 0 #fff,
		0 1px 0 #fff,
		0 -1px 0 #fff,
		1px -1px 0 #fff,
		1px 1px 0 #fff,
		-1px -1px 0 #fff,
		-1px 1px 0 #fff,
		2px 0 0 #fff,
		2px -2px 0 #fff,
		2px 2px 0 #fff,
		-2px 2px 0 #fff,
		-2px 0 0 #fff,
		0 2px 0 #fff,
		0 -2px 0 #fff,
		0 -1px 0 #fff,
		3px 0 0 #fff,3px -3px 0 #fff,3px 3px 0 #fff,-3px 3px 0 #fff,-3px 0 0 #fff,0px 3px 0 #fff,0px -3px 0 #fff
		;
		font-weight: 600;
		right: -5px;
		top: 16px;
}

.listeners-played ul.playlist li.half.light .functions,
.content-col ul.playlist li.half.light .functions {
    background: #fff;
}

.listeners-played ul.playlist li.half.light .functions:after,
.content-col ul.playlist li.half.light .functions:after {
    content: " ";
    position: absolute;
    top: 0;
    right: -50px;
    height: 24px;
    width: 50px;
    z-index: 21;
    /* Permalink4- use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
		
}

.listeners-played ul.playlist li.highlight .time,
.listeners-played ul.playlist li.highlight .timing,
.content-col ul.playlist li.highlight .time,
.content-col ul.playlist li.highlight .timing {
	text-shadow: none;
	top: 20px;
    right: -5px;
    color: #fff !important
}


ul.playlist li.sm2_paused .time,
ul.playlist li.sm2_playing .time {
	opacity: 0 !important;
}

ul.playlist.top li .time,
ul.playlist.top li .timing
{
	color: #fff;
}

#control-template {
    display:none;
}

ul.playlist li canvas {
    width: 100%;
    height: 100px;
    display: block;
    position: absolute;
    z-index: 1;
    opacity: 0;
    bottom: 0;
    left: 0;
    color: #666666;
}



ul.playlist li .controls .statusbar .position, 
ul.playlist li .controls .statusbar .loading {
    height: 100px;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
}

ul.playlist li .comments,
ul.playlist li .playlist_container {
    width: 100%;
    height: 0;
    display: block;
    position: absolute;
    top: 68px;
    left: 0;
    opacity: 0.4;
    z-index: 12;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

ul.playlist li .playlist_container {
	cursor: pointer;
}


ul.playlist li.sm2_paused .comments,
ul.playlist li.sm2_playing .comments,
ul.playlist li.sm2_paused .playlist_container,
ul.playlist li.sm2_playing .playlist_container {
	opacity: 1;
	height: 17px;
}


ul.playlist li .controls .marker {
    background: #fff;
    height: 50px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    z-index: 300;
    top: 0;
    display: none !important;
}


ul.playlist li .comments .marker,
ul.playlist li .playlist_container .marker {
    height: 16px;
    overflow: hidden;
    position: absolute;
    top: 0;
    background-color: rgba(255,255,255,0.5);
    border-left: 1px solid #fff;
    color: var(--text_color);
    font-size: 10px;
    padding: 0 5px;
    z-index: 300;
    white-space: nowrap;
    line-height: 12px;
    
}

ul.playlist li .comments img,
ul.playlist li .comments canvas {
    display: block;
    width: 10px !important;
    position: absolute;
    z-index: 2;
    top: 0;
    opacity: 1 !important;
    overflow: hidden;
    outline: none;
    border: none;
    height: 10px !important;
    margin-top: -6px;
    border-radius: 50%;
    cursor: crosshair;
}

ul.playlist.top li .comments img,
ul.playlist.top li .comments canvas {
    width: 20px !important;
    height: 20px !important;
    margin-top: -11px;
}


ul.playlist.top li .comments {
	top: 74px;
}


.track-detail ul.playlist.top li .comments {
	top: 305px;
	opacity: 1;
	display: block;
}

ul.playlist li.comment_write_active .comments img,
ul.playlist li.comment_write_active .comments canvas {
}

ul.playlist li .comments .background,
ul.playlist li .playlist_container .background {
    display: none;
    

}

ul.playlist li.embeded .comments {
    bottom: 4px;    
}


ul.playlist li.sm2_playing .controls, 
ul.playlist li.sm2_paused .controls {
    position: absolute;
    display: block;
    top: 39px;
    left: 0;
    z-index: 4;
    width: 100%;
}


.track-detail ul.playlist.top li.sm2_playing .controls, 
.track-detail ul.playlist.top li.sm2_paused .controls {
    top: 230px;
}

ul.playlist li .infobits {
    position: absolute;
    display: block;
    top: 76px;
    right: 5px;
    color: #888;
    font-size: 11px;
    -webkit-transition: top 0.5s;
    transition: top 0.5s;
}

ul.playlist li.black .infobits {
	color: #fff;
}

ul.playlist li .infobits span {
    display: inline-block;
    margin-right: 8px;
}

ul.playlist li.sm2_playing .infobits,
ul.playlist li.sm2_paused .infobits {
    top: 85px;
    z-index: 13;
}


ul.playlist li .functions i,
ul.playlist li .infobits i {
    
    font-size: 11px;
}

ul.playlist li .infobits i {
    margin-right: 5px;
    font-size: 11px;
}

ul.playlist li .functions .hidden-sm {
	margin-left: 5px;
}

ul.playlist li .functions .fa-chevron-circle-down {
	margin-right: 5px;
}

ul.playlist li .functions button.active i,
ul.playlist li .functions span.active i {
    color: #cb1606 !important;
}

ul.playlist.top li .functions button.active i,
ul.playlist.top li .functions span.active i {
    color: #fff !important;
}

ul.playlist li .functions {
    position: absolute;
    display: block;
    top: 76px;
    left: 0;
    
    font-size: 12px;
    
    -webkit-transition: top 0.2s;
    transition: top 0.2s;
}


ul.playlist li .functions > * {
	opacity: 0.8;
	-webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

ul.playlist li .functions .dropdown.open {
	opacity: 1;
}


ul.playlist li .functions .buy_fct{
	opacity: 1;
	font-weight: 600;
}


ul.playlist li .track-edit-button {
	-webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0 !important;
}

ul.playlist li:hover .track-edit-button {
    opacity: 1 !important;
}



ul.playlist li.sm2_playing .functions,
ul.playlist li.sm2_paused .functions {
    opacity: 1;
    top: 120px;
}

ul.playlist li.comments_disabled.sm2_playing .functions,
ul.playlist li.comments_disabled.sm2_paused .functions {
    opacity: 1;
    top: 76px;
}


ul.playlist li:hover .functions > *,
ul.playlist li .functions:hover > *,
ul.playlist li:hover .comments,
ul.playlist li:hover .playlist_container,
ul.playlist li.sm2_playing .functions  > *,
ul.playlist li.sm2_paused .functions  > * {
    opacity: 1;
}

ul.playlist.top li .functions,
ul.playlist.top li .functions  > *,
ul.playlist li.highlight .functions  > *,
ul.playlist li.highlight .functions {
    opacity: 1;
}


ul.playlist li .functions button,
ul.playlist li .functions span,
ul.playlist li .functions a {
    display: inline-block;    
    padding:0px 7px;
    border-radius:0;
    font-size: 11px !important;
    vertical-align:middle;
    z-index: 200;
    cursor: pointer;
    color: #222;
    outline: 0;
    text-decoration: none;
    border: 0;
    border-radius: 2px;
    border: 1px solid #fff; /* Old browsers */
    -webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	line-height: 20px;
    margin-right: 3px;
    background: transparent;
}

ul.playlist li .functions .dropdown a {
	background: transparent;
}


ul.playlist li .functions button:hover,
ul.playlist li .functions span:hover,
ul.playlist li .functions a:hover
 {
   
   border: 1px solid #d0d0d0; /* Old browsers */
    color: #555;
       
}




ul.playlist li .functions button:active
ul.playlist li .functions span:active
 {
    border: 1px solid #e0e0e0; /* Old browsers */
}


ul.playlist li .functions .dropdown-menu span,
.track-meta-info .functions .dropdown-menu .btn-default,
ul.playlist li .functions .dropdown-menu a {
	border: 0;
    border-bottom: 1px solid #efefef;
    border-radius: 0 !important;
   	padding: 5px 0 3px 3px;
    text-align: left;
    margin: 0 !important;
}

ul.playlist li .functions .dropdown-menu .btn-primary {
	border-radius: 2px;
}

ul.playlist li .functions .dropdown-menu span:hover,
.track-meta-info .functions .dropdown-menu .btn-default:hover,
ul.playlist li .functions .dropdown-menu a:hover {
	color: var(--text_color);
}


.track-meta-info .functions .dropdown-menu .btn-default:last-child {
	border: 0;
}

ul.playlist li .functions .dropdown-menu .fa, 
.track-meta-info .functions .dropdown-menu .fa {
	margin-right: 8px;
}



ul.playlist li .functions .dropdown-menu span:hover, 
ul.playlist li .functions .dropdown-menu span:active, 
ul.playlist li .functions .dropdown-menu a:hover,
ul.playlist li .functions .dropdown-menu a:active {
	border: 0;
    border-bottom: 1px solid #efefef;
}

ul.playlist li .functions .dropdown-menu span:last-child, 
ul.playlist li .functions .dropdown-menu a:last-child {
	border: 0 !important;
}

ul.playlist li .functions .active {
    background: transparent !important; /* Old browsers */
    border: 1px solid transparent;
}


.refeed_fct.active {
    background: transparent !important; /* Old browsers */
    border: 1px solid transparent;
}


.like_fct.active {
    background: transparent !important; /* Old browsers */
    border: 1px solid transparent;
}


.follow_fct.active {
    background: transparent !important; /* Old browsers */
    border: 1px solid transparent;
}

.buy_fct {
	background: #cb1606  !important;
	color: #fff !important;
	border: 1px solid #cb1606 !important;
}


.buy_fct:hover {
	opacity: 0.7;
}




/*
 ------------------------------------------
 -- annotations (sub-tracks, notes etc.) --
 ------------------------------------------
*/


ul.playlist li a.sm2_link .metadata {
 display:none; /* hide by default */
}

ul.playlist li .metadata span {
 padding-right: 5px !important;
}

ul.playlist li.sm2_paused .player-link.sm2_link .metadata,
ul.playlist li.sm2_playing .player-link.sm2_link .metadata {
 display:inline;
}

ul.playlist li ul {
 list-style-type:none;
 margin:0;
 padding:0;
 position:relative;
 font-size:small;
 display:none;
}

ul.playlist li ul li {
 position:relative;
 margin:0;
 padding:2px 3px;
 border:1px solid transparent;

 margin-right:1em;
 font-family:helvetica,verdana,tahoma,arial,"sans serif";
 font-size:x-small;
 font-weight:400;
 letter-spacing:0;
 background-color:transparent;
 opacity:0.66;
}

ul.playlist li ul li:hover {
 opacity:1;
 background-color:#fff;
 border-color:#ccc;
 color:#666;
}

ul.playlist li.sm2_playing ul li,
ul.playlist li.sm2_paused ul li {
 color:#fff;
}

ul.playlist li.sm2_playing ul li:hover {
 background-color:#fff;
 color:#5588bb;
 border-color:#336699;
 opacity:0.9;
}

ul.playlist li.sm2_paused ul li:hover {
 background-color:#888;
}

/* metadata */

ul.playlist li .metadata .duration {
 /* optional timing data */
 display:none;
}

ul.playlist li .metadata ul li p {
 margin:0;
 padding:0;
}

ul.playlist li .metadata ul li span {
 display:none;
}

ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 background-color:transparent;
 top:20px;
 color:#666;
 text-align:right;
 margin-left:8px;
 height:15px;
 width:15px;
 z-index: 1000;
 opacity: 1;
}


ul.playlist.top li .controls .statusbar .annotation {
	top: 63px;
}


.track-detail ul.playlist.top li .controls .statusbar .annotation {
	top: 62px;
}


ul.playlist li .controls .statusbar .annotation:hover {
 z-index:12; /* sit on top of note */
}

ul.playlist li .controls .statusbar .annotation span.bubble {
 /* using · */
 display:inline-block;
 background-color:#fff;
 border:1px solid #666;
 border-radius:6px;
}

ul.playlist li .controls .statusbar .annotation span {
    display:block;
    background:transparent url(/_/image/divot-bottom.png) no-repeat 50% 0;
    width:15px;
    margin-left:-15px;
    height:12px;
    text-align:center;

}


ul.playlist li .controls .statusbar .annotation span:hover {
 cursor:none; /* Fx3 rules. */
}


ul.playlist li .note {
    position:absolute;
    display:none;
    left:0;
    top:-5px;
    z-index:999;
    font-size:x-small;
    padding:2px 4px 2px 4px;
    width:auto;
    color:#666;
    background-color:#fff;
    font-size: 10px;

}

ul.playlist li .controls font {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+88,0+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 88%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 88%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 88%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

	bottom: 23px !important;
}

ul.playlist.top li .controls font {
	bottom: 0 !important;
}

.page-top.content-col ul.playlist.top li .controls font {
	bottom: 18px !important;
}


ul.playlist.top li .note {
	top: 35px;
}

ul.playlist li .note:hover {
 display:block !important;
}

ul.playlist li .sm2_divider {
 font-size:16px;
 padding-left: 5px; 
 padding-right: 5px; 
}

ul.playlist li .sm2_divider,
ul.playlist li .sm2_metadata {
 font-size:12px;
 font-weight: 400;
}

/* COMMENTS //////////////////////////////////////*/

ul.playlist .comments img {
	margin-left: -4px;
}

ul.playlist .comment_write_active #write_comment {
    position: absolute;
    bottom: -29px;
    left: -10px;
    right: -3px;
    z-index: 10000;
}

.content-core ul.playlist #write_comment #comment_text {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: rgba(255,255,255,0.2);
    border-radius: 60px;
}

.content-core ul.playlist .highlight #write_comment #comment_text {
	color: #fff;
	border: 0;
}

.content-core ul.playlist .highlight #write_comment #comment_text::-webkit-input-placeholder { 
  color: #fff;
}
.content-core ul.playlist .highlight #write_comment #comment_text::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.content-core ul.playlist .highlight #write_comment #comment_text:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.content-core ul.playlist .highlight #write_comment #comment_text:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}



ul.playlist.top #write_comment {
	left: 0;
	right: 0;
	bottom: -62px;
	position: absolute;
	z-index: 0;
}



ul.playlist .comment_write_active .functions,
ul.playlist .comment_write_active .infobits,
ul.playlist .comment_write_active .marker {
}


/* PLAYLISTS //////////////////////////////////////*/

ul.playlist .playlist_write_active #write_playlist {
    position: fixed;
    z-index: 10000;
    width: 600px;
    margin: 10px 0 0 10px;
}


ul.playlist .playlist_write_active .functions,
ul.playlist .playlist_write_active .infobits,
ul.playlist .playlist_write_active .marker {
    display: none !important;
}


ul.playlist li .mover {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10000;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background: transparent url(/_/images/mover.png) center center no-repeat;
}

ul.playlist li.move-active .time,
ul.playlist li.move-active .timing  {
    margin-right: 35px;
}

ul.playlist li.ui-sortable-helper {
    margin-top: 200px;
}





/* BLACK THEME //////////////////////////////////////*/


ul.playlist li.black .player-link,
ul.playlist li.black .player-link,
ul.playlist li.black.sm2_playing,
ul.playlist li.black.sm2_paused, 
ul.playlist li.black.sm2_playing .player-link {
    color: #fff;
    border-color: #fff !important;
    background: transparent !important;

}

ul.playlist li.black .player-link i {
	color: #fff !important;
}

ul.playlist li.black .player-link:hover {
	opacity: 0.6;
}


ul.playlist li.black .player-link:hover,
ul.playlist li.black.sm2_playing .player-link {
    background: transparent !important;

}

ul.playlist li.black .player-link span,
ul.playlist li.black .headline,
ul.playlist li.black .headline a,
ul.playlist li.black .headline small,
ul.playlist li.black .headline span {
    color: #fff !important;
}

ul.playlist li.black .headline .roof,
ul.playlist li.black .headline .roof a,
ul.playlist li.black .headline .roof span {
	color: #ddd !important;
}

ul.playlist li.black .time {
	color: #fff;
}

section.page-top.home-page ul.playlist.top li .controls .note,
section.page-top.home-page ul.playlist.top li .controls .annotation,
section.page-top.home-page ul.playlist.top li .controls font {
	display: none !important;
}

ul.playlist li.black .functions button,
ul.playlist li.black .functions span,
ul.playlist li.black .functions a {
    display: inline-block;
    margin-right: 3px;
    
    padding:0px 7px;
    border-radius:0;
    font-size: 11px !important;
    vertical-align:middle;
    z-index: 200;
    cursor: pointer;
    color: #fff;
    
    background: transparent;
    border: 1px solid rgba(255,255,255,0); /* Old browsers */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}




ul.playlist li.black .functions button:hover,
ul.playlist li.black .functions span:hover,
ul.playlist li.black .functions a:hover {
   border: 1px solid rgba(255,255,255,0.8);
    

}

ul.playlist li.black .functions .active {
   background: transparent !important; /* Old browsers */
   border: 1px solid transparent !important;
    

}


ul.playlist li.black .functions .dropdown-menu span,
ul.playlist li.black .functions .dropdown-menu a {
	color: #666;
	border-bottom: 1px solid #efefef;
}


ul.playlist li.black .functions .dropdown-menu span:hover,
ul.playlist li.black .functions .dropdown-menu a:hover {
	color: var(--text_color);
}



ul.playlist li.black .infobits {
}

ul.playlist li.black .controls .statusbar .annotation {
 opacity: 0.8;
}

ul.playlist li.black canvas {
    color: #ffffff;
}
ul.playlist li.black .comments img,
ul.playlist li.black .comments canvas {
    color: #ffffff;
}

ul.playlist li.black .controls .marker {
    background: var(--bg_black);
}

ul.playlist li.black .comments .marker {
    background-color: rgba(0,0,0,0.5);
    border-left: 1px solid #000;
    color: #fff;

}



ul.playlist li.black .controls .statusbar .annotation {
 opacity: 1;
}



ul.playlist li.black .functions .refeed_fct.active {
    background: transparent !important; /* Old browsers */
}

ul.playlist li.played .fa-play,
ul.playlist li.played .player-link{
    color: #7a7a7a !important;
    border-color: #7a7a7a;
}

/*
ul.playlist li.played .player-link:after {
    content: "\f04b";
    font-family: "FontAwesome";
    font-size: 8px;
    color: #fff;
    left: 15px;
    position: absolute;
    top: 5px;
}
*/

/*
ul.playlist li.played .player-link .fa-play {	
    left: 11px;
}
ul.playlist li.played .player-link .fa-play:before {	
    content: "\f01e" !important;
}

ul.playlist li.played:hover .player-link .fa-play,
ul.playlist li.black .player-link .fa-play,
ul.playlist li.sm2_paused .player-link .fa-play,
ul.playlist li.sm2_playing .player-link .fa-play {
    left: 13px;
}
ul.playlist li.sm2_paused .player-link .fa-play:before,
ul.playlist li.sm2_playing .player-link .fa-play:before,
ul.playlist li.played:hover .player-link .fa-play:before,
ul.playlist li.black .player-link .fa-play:before {
    content: "\f04b" !important;
}


*/

ul.playlist li.black .player-link:after,
ul.playlist li.sm2_paused .player-link:after,
ul.playlist li.sm2_playing .player-link:after {
	display: none !important;
}






@media only screen and (max-width: 780px) {
    .tob-bar canvas {
        display: none;
    }
    
    ul.playlist li {
        border-radius: 0;
        margin-bottom: 0;
    }
    
    .footer_head {
        display: none !important;
    }
}


@media only screen and (max-width: 400px) {
    ul.playlist li .playlist_fct,
    ul.playlist li .share_fct {
        display: none !important;
    }
    
    ul.playlist li.with-image::before,
    ul.playlist li.with-image .cover,
    ul.playlist li.with-image::after { 
        display: none !important;
    }
}



@media only screen and (max-width: 780px) {
      
    

}

#sm2-container {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
}




/**
 * SoundManager 2 + useFlashBlock
 * ------------------------------
 * Flash positioning and flashblock / clicktoflash handling
 */

#sm2-container {
 /**
  * where the SM2 flash movie goes. by default, relative container.
  * set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
  */
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 /* screw IE 6, just make it display nice */
 _overflow: hidden;
}

#sm2-container object,
#sm2-container embed {
 /**
  * the actual SWF movie bit.
  * important: The SWF needs to be able to be moved off-screen without display: or position: changes.
  * changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock
  * e.g., SM2 starts but strange errors, no whileplaying() etc.
  */
 width: 48px;
 height: 48px;
 /* some flash blockers may also respect this rule */
 max-width: 48px;
 max-height: 48px;
}

#sm2-container.swf_timedout {
 /* expand to show the timed-out SWF content */
 position: relative;
 width: 48px;
 height: 48px;
}

#sm2-container.swf_timedout,
#sm2-container.swf_timedout object,
#sm2-container.swf_timedout embed {
 /**
  * when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
  * 48px square flash placeholder is typically used by blockers.
  */
 min-width: 48px;
 min-height: 48px;
}

#sm2-container.swf_unblocked {
 /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
 width: 1px;
 height: 1px;
}

#sm2-container.swf_loaded object,
#sm2-container.swf_loaded embed,
#sm2-container.swf_unblocked object,
#sm2-container.swf_unblocked embed {
 /* hide flash off-screen (relative to container) when it has loaded OK */
 left: -9999em;
 top: -9999em;
}

#sm2-container.swf_error {
 /* when there is a fatal error (flash loaded, but SM2 failed) */
 display: none;
}

#sm2-container.high_performance,
#sm2-container.high_performance.swf_timeout {
 /* "high performance" case: keep on-screen at all times */
 position: absolute;
 position: fixed;
}

#sm2-container.high_performance {
 overflow: hidden;
 _top: 9999px; /* IE 6 hax, no position:fixed */
 bottom: 0;
 left: 0;
 /**
  * special case: show at first with w/h, hide when unblocked.
  * might be bad/annoying.
  * try to stay within ClickToFlash "invisible" limits (so it won't be blocked.)
  */
 z-index: 99; /* try to stay on top */
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked {
 z-index: auto;
}

#sm2-container.high_performance.swf_loaded,
#sm2-container.high_performance.swf_unblocked,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /**
  * 8x8px is required minimum to load in fx/win32 in some cases(?)
  * 6x6+ good for fast performance, even better when on-screen via position:fixed
  * also, clickToFlash (Safari <5.1) may auto-load "invisible" SWFs at this size
  */
 height: 8px;
 width: 8px;
}

#sm2-container.high_performance.swf_loaded {
 /* stay bottom/left */
 top: auto;
 bottom: 0;
 left: 0;
}

#sm2-container.high_performance.swf_loaded object,
#sm2-container.high_performance.swf_loaded embed,
#sm2-container.high_performance.swf_unblocked object,
#sm2-container.high_performance.swf_unblocked embed {
 /* high-performance case must stay on-screen */
 left: auto;
 top: auto;
}

#sm2-container.high_performance.swf_timedout {
 z-index: 99; /* try to stay on top */
}

ul.playlist li canvas.half {
    height: 50px;
    bottom: 50px;
}




















/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/




ul.playlist li .dna_container {
   width: 100% !important;
   height: 3px !important;
   position: absolute;
   z-index: 10;
   left: 0;
   right: 0;
   top: 71px;
   background-size:  100% 5px;
   opacity: 1;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
    
}
.content-col ul.playlist li .dna_container,
.listeners-played ul.playlist li .dna_container {
	top: 65px;
    border-top: 1px solid rgba(255,255,255,1);
    border-bottom: 1px solid rgba(255,255,255,1);
    height: 4px !important;
    background-size: contain;
}

.listeners-played ul.playlist li .dna_container:after,
.content-col ul.playlist li .dna_container:after {
	content: ' ';
	width: 100% !important;
   	height: 13px;
   	position: absolute;
   	z-index: 10;
   	left: 0;
   	right: 0;
   	bottom: -10px;
   	background: rgba(255,255,255,0.7);
}

.listeners-played ul.playlist li .dna_container.empty:after,
.listeners-played ul.playlist li:hover .dna_container:after,
.listeners-played ul.playlist li.sm2_playing .dna_container:after,
.listeners-played ul.playlist li.sm2_paused .dna_container:after,
.content-col ul.playlist li .dna_container.empty:after,
.content-col ul.playlist li:hover .dna_container:after,
.content-col ul.playlist li.sm2_playing .dna_container:after,
.content-col ul.playlist li.sm2_paused .dna_container:after {
    height: 10px;
}


.listeners-played ul.playlist li.highlight .dna_container,
.listeners-played ul.playlist.top li .dna_container,
.content-col ul.playlist li.highlight .dna_container,
.content-col ul.playlist.top li .dna_container {
	display: none;
}

.listeners-played ul.playlist li .dna_container.empty,
.content-col ul.playlist li .dna_container.empty {
    top: 67px;
    border-top: 0 solid rgba(255,255,255,0.7);
    border-bottom: 0 solid rgba(255,255,255,0.7);
    background-color: #fff;
    height: 1px !important;
    opacity: 1 !important;
}

ul.playlist.top li .dna_container,
ul.playlist li.hightlight .dna_container {
	opacity: 1;
}

ul.playlist li.sm2_playing .dna_container,
ul.playlist li.sm2_paused .dna_container {
    opacity: 1;
}



/* SMALL VIEW */



.playlist.small canvas {
     display: none !important;
 }

 
.playlist.small li .player-link, 
.playlist.small li .player-link {
     padding-bottom: 5px;
 }
 
.playlist.small li .cover {
     display: none !important;
 }
 
.playlist.small li {
     margin-left: 0 !important;
 	margin-bottom: 0;
    overflow: hidden;
 }
 
.playlist.small li.half .controls .statusbar {
     background: #eee;
     height: 20px;
     margin-top: 5px;
     margin-bottom: 8px;
 }
 
.playlist.small li.half .controls .statusbar .position {
    height: 20px;
    background: #ba1010;
 }



 ul.playlist li .player-link i {
    font-size: 17px;
	position: absolute;
	left: 10px;
	top: 10px;
 }
 
 ul.playlist li .player-link i.fa-play {
    font-size: 16px;
    left: 13px;
    top: 10px;
 }
 
 ul.playlist li .player-link i.fa-play.fa-circle-o-notch {
 	left: 10px;
 }
 
 
 ul.playlist li .player-link i.fa-refresh {
  font-size: 14px;
  left: 11px;
  top: 10px;
}
 
 
 ul.playlist li .player-link i.fa-circle-o-notch {
    font-size: 15px;
 }
  
 ul.playlist li .player-link i.fa-play,
 ul.playlist li.sm2_paused .player-link i.fa-play {
    display: block !important;
  	
 }
 
 ul.playlist li.sm2_playing .player-link i.fa-pause {
    display: block !important;
    color: #fff !important;
 }
 
 ul.playlist li.sm2_playing .player-link i.fa-play {
    display: none !important;
 }




.sets_playlist {
	height: 110px !important;
	overflow: hidden;
} 

.sets_playlist li {
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-right: 1px solid #e8e8e8;
}

.sets_playlist li:last-child {
	border-right: 0 solid #e8e8e8 !important;
}

.sets_playlist li .cover,
.sets_playlist li .comments,
.sets_playlist li .time,
.sets_playlist li .functions,
.sets_playlist li .infobits 
{
	display: none !important;
}

.sets_playlist li .headline,
.sets_playlist li .player-link {
	opacity: 0 !important;
	z-index: 0 !important;
}

.sets_playlist li:hover .player-link,
.sets_playlist li:hover .headline {
	opacity: 1  !important;
}

ul.playlist li .track-headline {
	width: 100%!important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 100px;
	display: inline-block;
	line-height: 26px;
	margin-top: -4px;
}

.track-detail ul.playlist li .roof > a {
    display: none;
}

.track-detail ul.playlist li .track-headline {
    padding-right: 200px;
    font-size: 34px;
    line-height: 42px;
    margin-top: -20px;
    font-weight: 300;
    white-space: normal;
    word-break: break-word;
}

.track-detail ul.playlist li .track-headline .metadata {
	display: block;
    line-height: 15px;
    margin-top: -10px;
}

.track-detail ul.playlist li .track-headline .metadata .sm2_divider {
	display: none;
}

.content-col.content-col-right .playlist li.more-appended {
	margin-bottom: 100px;
}

.content-col.content-col-right .playlist li .more-by-artist {
    bottom: -71px;
	position: absolute;
	left: 0;
	color: var(--text_color);
	width: 100%;
}

.playlist.top .more-by-artist {
	display: none;
}

 


.not-generated-placeholder {
    background: rgba(128,128,128,0.05);
    padding: 2px 5px;
    width: 100%;
    position: absolute;
    border-radius: 10px;
    top: 42px;
    color: #bbb;
}

.track-detail-header .not-generated-placeholder {
	top: auto;
	background: rgba(128,128,128,0.05);
    padding: 15px 10px;
    width: 100%;
    position: absolute;
    border-radius: 10px;
    bottom: 20px;
    color: #bbb;
}

li.not-generated .controls .statusbar .position {
	border-top: 2px solid rgba(203, 22, 6, 1);
	top: 27px !important;
}

.track-detail-header li.not-generated .controls .statusbar .position {
	border-top: 0;
	top: 0 !important;
	border-bottom: 32px solid rgba(255, 255, 255, 0.6)
}