@charset "utf-8";
/**
	DS SoundCloud Music Player
	Version : 2.0
	Site	: http://danialSabagh.com/dssc
	Author	: Danial Sabagh | DanialSabagh.com
*/

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
/** Media Queries */
@media (min-width: 650px) {
    .musicPlayer{
	    width:600px;
	    height:320px;
    }
    .songBox, .playerList{
        float:left;        
    }
    .songBox, .playerList{
	    width:50%;
	    height:100%;
    }
	.songBoxBottom{
	height:20px;
	}
	.songBoxTop{
	height:300px;
	}
	.seekLoad {
	height:20px;
	}
	.endPlayed {
	padding: 1px 4px 0 0;
	}
	.secPlayed {
    padding: 1px 0 0 4px;
	}
	.buttonPause{
	background: url(../img/iconPlay.png) center  no-repeat;
	}
	.buttonNext{
	background:url(../img/iconNext.png) center no-repeat;
	}
	.buttonPrevious{
	background: url(../img/iconPrevious.png) center no-repeat;
	}
	.buttonRepeat{
	background: url(../img/iconRepeat.png) center no-repeat ;
	}
	.buttonPlay{
	background-image: url(../img/iconPause.png);
	}
	.shareFB{
	background: url(../img/iconFaceBook.png) center no-repeat;
	cursor: pointer;
	}
	.shareTW{
	background: url(../img/iconTwitter.png) center no-repeat;
	cursor: pointer;
	}
	.songBox{
		background: url(../img/noArtwork.png) no-repeat;
		background-size: cover;
	}

	.songBoxTop{
	-webkit-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	opacity: 0;
    transition: opacity 0.5s linear;
	}
	.musicPlayer:hover .songBoxTop{
	opacity: 1;
	}
}
@media (max-width: 650px) {
    .musicPlayer{
	    width:280px;
	    height:400px;
    }
    .songBox, .playerList{
        float:left;        
    }
    .songBox, .playerList{
	    width:100%;
	    height:50%;
    }
	.songBoxBottom{
	height:40px;
	}
	.songBoxTop{
	height:160px;
	}
	.seekLoad {
	height:40px;
	}
	.endPlayed {
	padding: 10px 4px 0 0;
	}
	.secPlayed {
    padding: 10px 0 0 4px;
	}
	.buttonPause{
			background:	center  no-repeat;
			background-image: url(../img/res/64-iconPlay.png);
	}
	.buttonNext{
	background:url(../img/res/32-iconNext.png) center no-repeat;
	}
	.buttonPrevious{
	background: url(../img/res/32-iconPrevious.png) center no-repeat;
	}
	.buttonRepeat{
	background: url(../img/res/32-iconRepeat.png) center no-repeat ;
	}
	.shareFB{
	background: url(../img/res/32-iconFaceBook.png) center no-repeat;
	cursor: pointer;
	}
	.shareTW{
	background: url(../img/res/32-iconTwitter.png) center no-repeat;
	cursor: pointer;
	}
	.buttonPlay{
	background-image: url(../img/res/64-iconPause.png);
	}
	.small-Artwork{
		float:left;
		width:50%;
		height:50%;
		background: rgba(255,255,255,0.80) no-repeat;
		background-size: cover;
	}
	.songBox{
	background: url(../img/res/280-noArtwork.png);

		background-size: cover;}
}



.musicPlayer{
	background:#fff;
	margin:0 auto;
	border: solid 1px #525252;
}

/** Backgound Colour **/
.buttonPause, .buttonNext, .buttonPrevious, .buttonRepeat, .playHits, .buttonDownload, .shareFB, .shareTW{
	background-color:rgba(255,255,255,0.80) !important;
	box-shadow: inset 0 0 1px #000;
}
.buttonPause:hover, .buttonNext:hover, .buttonPrevious:hover, .buttonRepeat:hover, .buttonDownload:hover, .buttonBuy:hover, .shareFB:hover, .shareTW:hover{box-shadow:#000000 0 0 10px;}
/** Active effect **/
.buttonNext:active, .buttonPrevious:active, .buttonDownload:active, .shareFB:active, .shareTW:active{background-color:rgba(255,255,255,0.99) !important;}
/** Float Left **/
.buttonPause, .buttonNext, .buttonPrevious, .buttonRepeat, .playHits, .shareFB, .shareTW, .playBar{
	float:left;
}
/** Float Right **/
.buttonDownload{
	float:right;
}
/** 50% x 50% box (Full) **/
.playpausebtn, .buttonDownload {
	width:50%;
	height:50%;
}
/** 50% x 25% box (Half) **/
.buttonRepeat, .playHits {
	width:50%;
	height:25%;
}
.buttonRepeat.active{
	box-shadow: inset 0px 0px 20px 0px #000000;
}
/** 25% x 25% box (qube) **/
.buttonNext, .buttonPrevious, .shareFB, .shareTW{
	width:25%;
	height:25%;
}
/** fonts **/
.songDuration, .playHits{
	font-family: 'Oswald', sans-serif;
}
.songBox{position:relative;
	background-size: cover;
}

.songBoxBottom{
	bottom:0px;
	position: absolute;
    bottom: 0;
	width: 100%;
}

.playerList{
	background: #FFF;
	overflow-y:scroll;
}

.playHits{
	font-size:24px;
	text-height:20px;
	text-align: center;
	justify-content: center; /* align horizontal */
    align-items: center !important; /* align vertical */
	display:flex;
	-webkit-justify-content: center; /* align horizontal */
    -webkit-align-items: center !important; /* align vertical */
	display:-webkit-flex;
}
.buttonDownload{
	background: url(../img/iconDownload.png) center no-repeat;
}
.buttonBuy{
	background: url(../img/iconBuy.png) center no-repeat;
}
.buttonNA{
	background: url(../img/iconNA.png) center no-repeat;
	box-shadow: inset 0 0 20px #000;
}
.buttonNA:hover{box-shadow: inset 0 0 20px #000;}

/** similar height for SongBoxBottom **/
.seekBase {
    width:100%;
    height:100%;
    background:#000000;
}
.seekLoad {
    width:0;
    background:rgba(203,10,13,1.00);
}
.endPlayed, .secPlayed{
	font-family:'Oswald', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: white;
	cursor: default;
}
.endPlayed {
    float:right;
    
}
.secPlayed {
    float: left;
}


/* List */
.list {
  font-family:sans-serif;
  margin:0;
  padding:0 0 0;
  cursor: default;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.list > li:hover{
    background-color: rgba(0,0,0,0.13);
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
.songDuration{
    font-size: 20px;
	margin-top: -20px;
    margin-bottom:0;
    float:right;
}
.SCuser{
    font-size: 11px;
    margin:0;
    font-style:italic;
}
.list > li:hover{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s eease-in-out;
}

/* Scroll Bar */
/* Chrome */
.playerList::-webkit-scrollbar{
width:16px;
background-color: #fff;
opacity: 0.4;
} 
.playerList::-webkit-scrollbar-thumb{
background-color:#2E2A2A;
border-radius:10px;
}
.playerList::-webkit-scrollbar-thumb:hover{
	background: #464040;
	border:1px solid #333333;
}
.playerList::-webkit-scrollbar-thumb:active{

border:1px solid #333333;
}
.red{
	background-color:rgba(255,255,255,0.99) !important;
}

.SCCredits{
	float:right;
	background:url(../img/SoundCloudLOGO.png) center center no-repeat;
	background-size:100% auto;
	width:100px;
	height:35px;
}
.SCTrackLink{
	color:#000000;
	text-decoration:none;
	font-size:18px;
}
.SCTrackLink:hover{
	color: #3B3B3B;
}

/** SVG FONT STYLE **/
@font-face {
	font-family: 'icomoon';
	src:url('../img/SVGfonts/icomoon.eot?-o6h6l4');
	src:url('../img/SVGfonts/icomoon.eot?#iefix-o6h6l4') format('embedded-opentype'),
		url('../img/SVGfonts/icomoon.ttf?-o6h6l4') format('truetype'),
		url('../img/SVGfonts/icomoon.woff?-o6h6l4') format('woff'),
		url('../img/SVGfonts/icomoon.svg?-o6h6l4#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-soundcloud:before {
	content: "\e601";
}
.musicPlayer{
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: default;
}
.songTitle{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 80%;
}