/* RESET */
.fsp-container,
.fsp-container ul,
.fpd-container li,
.fsp-container div,
.fsp-container span,
.fsp-container p,
.fsp-container img   {
	margin: 0;
	padding: 0;
	list-style: none !important;
	list-style-type: none !important;
	max-width: 100%;
	outline: none;
	border: none;
}


/*****************************
******* COLOR THEMES *********
*****************************/

/********* Orange ***********/

.fsp-orange .fsp-play {
	background-image: url(../images/fsp/play-orange.png);
}

.fsp-orange .fsp-pause {
	background-image: url(../images/fsp/pause-orange.png);
}

.fsp-orange .fsp-play:hover {
	background-image: url(../images/fsp/play-orange-hover.png);
}

.fsp-orange .fsp-pause:hover {
	background-image: url(../images/fsp/pause-orange-hover.png);
}

.fsp-orange .fsp-played,
.fsp-orange .fsp-buffer,
.fsp-orange .fsp-volume-bar > div {
	background: #F49903;
}

.fsp-orange .fsp-info-btn,
.fsp-orange .fsp-time-display,
.fsp-orange .fsp-close-info {
	color: #F49903;
}

/********* Black ***********/

.fsp-black .fsp-play {
	background-image: url(../images/fsp/play-black.png);
}

.fsp-black .fsp-pause {
	background-image: url(../images/fsp/pause-black.png);
}

.fsp-black .fsp-play:hover {
	background-image: url(../images/fsp/play-black-hover.png);
}

.fsp-black .fsp-pause:hover {
	background-image: url(../images/fsp/pause-black-hover.png);
}

.fsp-black .fsp-played,
.fsp-black .fsp-buffer,
.fsp-black .fsp-volume-bar > div {
	background: #2B2B2B;
}

.fsp-black .fsp-info-btn,
.fsp-black .fsp-time-display,
.fsp-black .fsp-close-info {
	color: #2B2B2B;
}

/********* Blue ***********/

.fsp-blue .fsp-play {
	background-image: url(../images/fsp/play-blue.png);
}

.fsp-blue .fsp-pause {
	background-image: url(../images/fsp/pause-blue.png);
}

.fsp-blue .fsp-play:hover {
	background-image: url(../images/fsp/play-blue-hover.png);
}

.fsp-blue .fsp-pause:hover {
	background-image: url(../images/fsp/pause-blue-hover.png);
}

.fsp-blue .fsp-played,
.fsp-blue .fsp-buffer,
.fsp-blue .fsp-volume-bar > div {
	background: #1243A5;
}

.fsp-blue .fsp-info-btn,
.fsp-blue .fsp-time-display,
.fsp-blue .fsp-close-info {
	color: #1243A5;
}

/********* Green ***********/

.fsp-green .fsp-play {
	background-image: url(../images/fsp/play-green.png);
}

.fsp-green .fsp-pause {
	background-image: url(../images/fsp/pause-green.png);
}

.fsp-green .fsp-play:hover {
	background-image: url(../images/fsp/play-green-hover.png);
}

.fsp-green .fsp-pause:hover {
	background-image: url(../images/fsp/pause-green-hover.png);
}

.fsp-green .fsp-played,
.fsp-green .fsp-buffer,
.fsp-green .fsp-volume-bar > div {
	background: #27B877;
}

.fsp-green .fsp-info-btn,
.fsp-green .fsp-time-display,
.fsp-green .fsp-close-info {
	color: #27B877;
}


/*****************************
******* LAYOUT *************
*****************************/

/******* STANDARD **********/

.fsp-standard > div {
	min-width: 200px;
}

.fsp-standard .fsp-player-wrapper {
	width: 50%;
	height: 300px;
	float: left;
	position: relative;
}

.fsp-standard .fsp-player-wrapper > img {
	width: 100%;
	height: 100%;
}

.fsp-standard .fsp-play-pause {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
}

.fsp-standard .fsp-controls {
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 20px;
	display: none;
}

.fsp-standard .fsp-player-wrapper:hover .fsp-controls {
	display: block;
}

.fsp-standard .fsp-volume-bar {
	background: #fff;
	border: 1px solid #fff;
	width: 100px;
	height: 12px;
	position: relative;
	float: left;
	cursor: pointer;
	margin-bottom: 10px;
}

.fsp-volume-bar > div {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.fsp-standard .fsp-time-display {
	background: #fff;
	min-width: 40px;
	height: 15px;
	line-height: 15px;
	padding: 0 2px;
	font-size: 8px;
	float: right;
	margin-bottom: 20px;
}

.fsp-standard .fsp-time-bar {
	background: #fff;
	height: 40px;
	position: relative;
	clear: both;
}

.fsp-standard .fsp-info-btn {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 2px;
	font-size: 10px;
	background: #fff;
	cursor: pointer;
}

.fsp-standard .fsp-info-box {
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	overflow: auto;
}

.fsp-info-box > .fsp-close-info {
	position: absolute;
	top: 10px;
	right: 10px;
	line-height: 15px;
	font-size: 18px;
	cursor: pointer;
}

.fsp-info-box > div {
	margin: 30px 10px 10px;
	font-size: 12px;
}

.fsp-info-box > div p {
	margin: 10px 0;
}

.fsp-standard .fsp-tracklist-wrapper {
	background: #f5f5f5;
	width: 50%;
	height: 300px;
	float: left;
	overflow: auto;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li {
	margin-bottom: 1px;
	padding: 5px;
	cursor: pointer;
	line-height: 16px;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li:hover {
	background: #7a7a7a;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li.fsp-active {
	background: #392b2b !important;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li.fsp-active > a {
	color: #fff;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li > a {
	font-size: 12px;
	color: #000;
	text-decoration: none;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li > a > span {
	font-size: 10px;
}

.fsp-standard .fsp-tracklist-wrapper > ul > li > a:hover {
	text-decoration: none;
}


/******* COVER *************/

.fsp-cover-grid .fsp-player-wrapper {
	height: 50px;
	margin-bottom: 20px;
	margin-top: 10px;
}

.fsp-cover-grid .fsp-play-pause {
	float: left;
	margin-right: 10px;
}

.fsp-cover-grid .fsp-time-bar {
	height: 50px;
}

.fsp-cover-grid .fsp-tracklist-wrapper > ul > li {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
	display: none;
}

.fsp-cover-grid .fsp-tracklist-wrapper > ul > li > a {
	display: block;
	width: 150px;
	height: 150px;
	position: relative;
	overflow: hidden;
	border: 1px solid #f0f0f0;
}

.fsp-cover-grid .fsp-tracklist-wrapper > ul > li > a > * {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: -webkit-transform .33s;
	transition: transform .33s;
}

.fsp-cover-grid .fsp-track-info-wrapper {
	background: rgba(255, 255, 255, 0.9);
	-webkit-transform: scale(0);
	transform: scale(0);
}

.fsp-cover-grid .fsp-tracklist-wrapper > ul > li > a:hover .fsp-track-info-wrapper {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

.fsp-cover-grid .fsp-tracklist-wrapper > ul > li > a:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

.fsp-cover-grid .fsp-active .fsp-track-info-wrapper {
	-webkit-transform: scale(1) !important;
	transform: scale(1) !important;
}

.fsp-cover-grid .fsp-active img {
	-webkit-transform: scale(1) !important;
	transform: scale(1) !important;
}

.fsp-cover-grid .fsp-track-info-wrapper > p {
	padding: 10px;
	font-size: 11px;
	line-height: 16px;
	font-weight: bold;
	color: #0f0f0f;
}

.fsp-cover-grid .fsp-track-info-wrapper > p > span {
	display: block;
	margin-top: 5px;
	font-weight: normal;
}



/*****************************
******* General *************
*****************************/

.fsp-play-pause {
	position: relative;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
}

.fsp-play-pause > * {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
}

.fsp-play-pause > .fsp-pause {
	display: none;
}

.fsp-player-wrapper > .fsp-time-bar {
	overflow: hidden;
	position: relative;
}

.fsp-time-bar > * {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.fsp-time-bar > .fsp-buffer {
	opacity: 0.5;
	filter: alpha(opacity = 50);
}

.fsp-time-bar > img {
	width: 100%;
	height: 100%;
}

/* Hide all soundclouds anchors */
.fsp-container > a {
	display: none;
}


/* Helper */
.fsp-clearfix:before, .fsp-clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.fsp-clearfix:after { clear: both; }
.fsp-clearfix { zoom: 1; }
.fsp-clear {clear: both;}
.fsp-hidden {display: none;}