/*

* Fancy Music Player V2.1

* Author: Rafael Dery

* Copyright 2011

*

* Only for the sale at the envato marketplaces

*

*/



.fmp-container {

	width: 50px;

	position: relative;

	font-size: 10px;

	font-family: Arial, Helvetica, sans-serif;

	color: #404040;

  padding: 15;

}



/* Play/pause button */

.fmp-pp-button {

	width: 32px;

	height: 32px;

	position: relative;

	float: left;

}





.fmp-previous-button-press, .fmp-next-button-press {

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat 0px -25px;

}



/* States for hover/active of the play/pause buttons */

.fmp-pause-button-normal {

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -60px -25px;

}



.fmp-pause-button-hover {

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -25px -25px;

}



.fmp-play-button-normal {

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -60px -25px;

}



.fmp-play-button-hover {

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -25px -25px;

}





/* Play icon */

.fmp-play {

	width: 10px;

	height: 12px;

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -44px 1px;

	position: relative;

	margin: 9px 0px 0px 12px;

}



/* Pause icon */

.fmp-pause {

	width: 10px;

	height: 16px;

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -33px 3px;

	position: relative;

	margin: 7px 0px 0px 11px;

}





.fmp-tracks-container {

	margin: 8px 0px 0px 5px;

}







/* Current playing title */

.fmp-tracks-container .fmp-current-title {

	line-height: 15px;

	padding: 0 5px 0 0;

	color: white;

	font-size: 18px;

}



/* Container for the playlist */

.fmp-playlist-container {

	width: 100%;

	display: none;

	margin: 20px 0 0 5px;

}



/* Container for the scrollable area */

.fmp-playlist-scroll {

	width: 95%;

	

	overflow: auto;

	outline: none;

}



/* Playlist */

.fmp-playlist {

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

	line-height: 24px !important;

}



.fmp-playlist li {

	position: relative;

	margin: 0px 0px 12px;

	list-style-type: none !important;

	list-style: none !important;

	line-height: 16px !important;

}



.fmp-playlist li .fmp-delete-track {

	position: absolute;

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat -12px 0px;

	width: 8px;

	height: 8px;

	top: 3px;

	left: 0;

	cursor: pointer;

}



/* Titles in the playlist */

.fmp-playlist li span {

	display: inline-block;

	width: 80%;

	font-size: 16px;

  color: black;

	cursor: pointer;

	margin-left: 20px;

	line-height: 13px !important;

}



.fmp-playlist li .fmp-track-link {

	position: absolute;

	background: url('../images/fancyMusicPlayer/white/fmp_sprite.png') no-repeat 0px 0px;

	width: 9px;

	height: 9px;

	top: 4px;

	right: 5px;

	cursor: pointer;

}



/* Custom playlists */



div.fmp-xml-playlist h3 {

	margin: 10px 0 5px;

	color: #439FDB;

	font-size: 14px;

}



ul.fmp-my-playlist {

	padding: 0;

	margin: 0;	

}



.fmp-my-playlist li a {

			 color:red;

       text-decoration: none;

       font-size: 18px;

       font-weight: bold;

      text-shadow: 0px 1px 1px #141419;

}



.fmp-my-playlist li a:hover{ text-decoration: none;

	color: black;

	font-weight: bolder;

	letter-spacing: 2px;

}



/*

 * CSS Styles that are needed by jScrollPane for it to operate correctly.

 *

 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane

 * may not operate correctly without them.

 */



.jspContainer

{

	overflow: hidden;

	position: relative;

}



.jspPane

{

	position: absolute;

}



.jspVerticalBar

{

	position: absolute;

	top: 0;

	right: 0;

	width: 6px;

	height: 100%;

}



.jspHorizontalBar

{

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 16px;

}



.jspVerticalBar *,

.jspHorizontalBar *

{

	margin: 0;

	padding: 0;

}



.jspCap

{

	display: block;

}



.jspHorizontalBar .jspCap

{

	float: left;

}



.jspVerticalBar .jspCap

{

	height: 2px;

}



.jspTrack

{

	background: #e0e0e0;

	border: 1px solid #a6a6a6;

	position: relative;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;  

}



.jspDrag

{

	width: 4px;

	position: relative;

	top: 0;

	left: 0px;

	cursor: pointer;

	background: #fff; 

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}



.jspHorizontalBar .jspTrack,

.jspHorizontalBar .jspDrag

{

	float: left;

	height: 100%;

}



.jspArrow

{

	background: #50506d;

	text-indent: -20000px;

	display: block;

	cursor: pointer;

}



.jspArrow.jspDisabled

{

	cursor: default;

	background: #80808d;

}



.jspVerticalBar .jspArrow

{

	height: 16px;

}



.jspHorizontalBar .jspArrow

{

	width: 16px;

	float: left;

	height: 100%;

}



.jspVerticalBar .jspArrow:focus

{

	outline: none;

}



.jspCorner

{

	background: #eeeef4;

	float: left;

	height: 100%;

}



/* Yuk! CSS Hack for IE6 3 pixel bug :( */

* html .jspCorner

{

	margin: 0 -3px 0 0;

}







/* Helper */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

.clear {clear: both;}



/* IE styles */



.ie8 .fmp-time-bar .fmp-time-arrow-border {

	display: none;	

}



.ie8 .fmp-time-bar .fmp-time-arrow {

	display: none;	

}