/* --------------------------------------------- */
/* Author: http://codecanyon.net/user/CodingJack */
/* --------------------------------------------- */

/* LEGEND
   
    1 - GLOBAL STYLES  
	2 - WHITE SKIN
	3 - BLACK SKIN
	4 - GRAY SKIN
	5 - BLACK/GRAY ICONS
    6 - RETINA ICONS
	
*/

/* ..............................................  1 - GLOBAL STYLES  */

/* reset */
.cj-music-player, 
.cj-music-player div,
.cj-music-player span,
.cj-music-player a {

	margin: 0;
	padding: 0;
	border: none;
	font: inherit;
	background: none;
	text-align: inherit;
	line-height: inherit;
	text-shadow: inherit;
	
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	
	-moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
	
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
}

/* The main plugin wrapper */
.cj-music-player {
	
	font: 13px "Questrial", sans-serif;
	line-height: 13px;
	margin-top: 13px;
	
	position: relative;
	text-align: left;
	visibility: hidden;
	
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
	
}

/* first instance has no top margin */
.cj-music-player:first-child {

	margin-top: 0;
	
}

/* The big button */
.cj-music-player .cj-music-button {

	width: 39px;
	height: 39px;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	display: block;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	
}

/* The big button icon */
.cj-music-player .cj-music-button:after {
	
	position: absolute;
	display: block;
	content: "";
	top: 11px;
	left: 10px;
	
}

/* no controls */
.cj-music-player .cj-music-button.cj-button-only {

	position: relative;
	
}

/* We hide the song list markup */
.cj-music-player .cj-song-list {

	display: none;
	
}

/* The main player wrapper */
.cj-music-player .cj-music-container {
	
	position: relative;
	top: 3px;
	height: 32px;
	overflow: hidden;
	display: inline-block;
	
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;
	border-radius: 17px;
	
}

/* Player inner container */
.cj-music-player .cj-music-holder {
	
	position: relative;
	height: 100%;
	
}

/* open/close animation */
.cj-music-trans {

	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	
}

/* The text and controls */ 
.cj-music-player .cj-music-content {

	white-space: nowrap;
	height: 100%;
		
}

/* The current song number and title */
.cj-music-player .cj-music-meta {
	
	height: 100%;
	float: left;
	
}

/* clearfix */
.cj-music-player .cj-music-content:before,
.cj-music-player .cj-music-content:after,
.cj-music-player .cj-music-meta:before, 
.cj-music-player .cj-music-meta:after { 

	content: "\0020"; 
	display: block; 
	height: 0; 
	overflow: hidden; 
	
}

/* clearfix */
.cj-music-player .cj-music-content:after,
.cj-music-player .cj-music-meta:after { 

	clear: both; 
	
}

/* containers for player elements */
.cj-music-player .cj-music-numbers,
.cj-music-player .cj-song-holder, 
.cj-music-player .cj-music-controls {

	padding: 0 11px 0 11px;
	display: block;
	float: left;
	
}

/* icon container */
.cj-music-player .cj-music-controls {

	padding-right: 12px;
	
}

/* Song Numbers, Song Text */
.cj-music-player .cj-music-numbers,
.cj-music-player .cj-song-holder {
	
	display: block;
	float: left;
	position: relative;
	margin-top: 11px;
	height: 100%;
	
}

/* removes divider when controls aren't used */
.cj-music-player.cj-no-controls .cj-song-holder:after {
	
	border: none !important;
	
}

/* The current song text */
.cj-music-player .cj-song {

	width: 70px;
	display: inline-block;
	overflow: hidden;
	cursor: default;
	
}

/* Song text inner container */
.cj-music-player .cj-song-text {

	display: inline-block;
	
}

/* Hyperlinked song text */
.cj-music-player a {

	text-decoration: none;
	
}

/* Divider lines */
.cj-music-player .cj-music-numbers:after,
.cj-music-player .cj-song-holder:after {
	
	position: absolute;
	display: block;
	top: -11px;
	right: 0;
	content: "";
	width: 0;
	height: 100%;
	
}

/* The play, pause, left and right buttons */
.cj-music-player .cj-music-controls {
	
	float: left;
	margin-top: 6px;
	
}

/* Each button exists inside a span tag */
.cj-music-player .cj-music-controls span {
	
	width: 18px;
	height: 18px;
	
	cursor: pointer;
	position: relative;
	margin-left: 3px;
	display: block;
	float: left;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

}

/* no left margin for first control */
.cj-music-player .cj-music-controls span:first-child {

	margin-left: 0;
	
}

/* Each button exists inside a span tag */
.cj-music-player .cj-music-controls span:after {
	
	position: absolute;
	display: block;
	content: "";

}

/* The play button */
.cj-music-player .cj-music-controls span.cj-music-pause {
	
	display: none;

}

/* icon mouse over style */
.cj-music-player .cj-music-controls span:hover {

	zoom: 1;
    filter: alpha(opacity=65);
    opacity: 0.65;
	
}

/* mouse over style for disabled icon */
.cj-music-player span.cj-icon-disabled,
.cj-music-player span.cj-icon-disabled:hover {
	
	filter: alpha(opacity=50);
	opacity: 0.5;
	cursor: default;
	
}

/* The previous song button icon */
.cj-music-player .cj-music-left:after {
	
	top: 5px;
	left: 5px;

}

/* The next song button icon */
.cj-music-player .cj-music-right:after {
	
	top: 5px;
	left: 7px;

}

/* The play button icon */
.cj-music-player .cj-music-play:after {
	
	top: 5px;
	left: 7px;

}

/* The pause button icon */
.cj-music-player .cj-music-pause:after {
	
	top: 5px;
	left: 6px;

}

/* The buy-now button icon */
.cj-music-player .cj-music-buynow:after {
	
	top: 3px;
	left: 5px;
	font-size: 12px;

}

/* The buy-now button icon */
.cj-music-player .cj-music-download:after {
	
	top: 5px;
	left: 5px;

}

/* position flash backup 1x1 swf */
.cj-music-player > object, 
.cj-music-player > audio {

	position: absolute;
	top: 0;
	left: 0;
	
}

/* set Audio tag's size to 1px */
.cj-music-player > audio {

	width: 1px;
	height: 1px;
	
}

/* remove outline */
.cj-music-player a:focus, 
.cj-music-player a:active, 
.cj-music-player object {

	outline: 0;
	
}


/* ..............................................  2 - WHITE SKIN   */

/* Text color and text shadow */
.cj-music-player.cj-white-skin .cj-music-meta {

	color: #AAA;
	text-shadow: 1px 1px 0 #FFF;
	
}

/* Hyperlinks */
.cj-music-player.cj-white-skin a,
.cj-music-player.cj-white-skin a:visited {

	color: #AAA;
	
}

/* Hyperlink mouse over */
.cj-music-player.cj-white-skin a:hover {

	color: #999;
	
}

/* The big button */
.cj-music-player.cj-white-skin .cj-music-button {
	
	border: 2px solid #FFF;
	
	background: #EEE url(../img/white_ie_btn.png) repeat-x;
	background: -moz-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(99%, #EEE)); 
	background: -webkit-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -o-linear-gradient(top, #FFF 0%, #EEE 99%); 
	background: -ms-linear-gradient(top,  #FFF 0%, #EEE 99%); 
	background: linear-gradient(top, #FFF 0%, #EEE 99%); 
	
	-moz-box-shadow: 0px 2px 5px #DDD;
    -webkit-box-shadow: 0px 2px 5px #DDD;
    box-shadow: 0px 2px 5px #DDD;
	filter: progid:DXImageTransform.Microsoft.Shadow(Direction=145, Strength=3, Color="#DDDDDD");
	
}

/* The big button active/open state */
.cj-music-player.cj-white-skin .cj-music-btn-active {
	
	background: #EEE url(../img/white_ie_btn_active.png) repeat-x;
	background: -moz-linear-gradient(top, #EEE 0%, #FFF 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(99%, #FFF));
	background: -webkit-linear-gradient(top, #EEE 0%, #FFF 99%);
	background: -o-linear-gradient(top, #EEE 0%, #FFF 99%);
	background: -ms-linear-gradient(top,  #EEE 0%, #FFF 99%);
	background: linear-gradient(top, #EEE 0%, #FFF 99%);
	
}

/* The big button icon */
.cj-music-player.cj-white-skin .cj-music-button:after {
	
	width: 22px;
	height: 16px;
	background: url(../img/headphones_white.png) no-repeat;
	
}

/* The main player */
.cj-music-player.cj-white-skin .cj-music-container {

	border: 2px solid #FFF;
	border-bottom: 2px solid #F5F5F5;
	
	background: #FFF url(../img/white_ie_ctrl.png) repeat-x; 
	background: -moz-linear-gradient(top, #EEE 0%, #FFF 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(99%, #FFF)); 
	background: -webkit-linear-gradient(top, #EEE 0%, #ffffff 99%); 
	background: -o-linear-gradient(top, #EEE 0%, #FFF 99%); 
	background: -ms-linear-gradient(top,  #EEE 0%, #FFF 99%); 
	background: linear-gradient(top, #EEE 0%, #FFF 99%); 

	-moz-box-shadow: 0px 2px 5px #CCC;
    -webkit-box-shadow: 0px 2px 5px #CCC;
    box-shadow: 0px 2px 5px #DDD;
	filter: progid:DXImageTransform.Microsoft.Shadow(Direction=180, Strength=3, Color="#DDDDDD");
	
}

/* The 1px vertical dividers */
.cj-music-player .cj-music-numbers:after,
.cj-music-player .cj-song-holder:after {
	
	border-left: 1px solid #FFF;
	border-right: 1px solid #DDD;
	
}

/* The player control buttons */
.cj-music-player.cj-white-skin .cj-music-controls span {

	border: 1px solid #E6E6E6;
	border-bottom: 1px solid #DDD;
	
	-moz-box-shadow: inset 0 0 3px #FFF;
    -webkit-box-shadow: inset 0 0 3px #FFF;
    box-shadow: inset 0 0 3px #FFF;
	
	background: #DDD url(../img/white_ie_small_btn.png);
	background: -moz-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(99%, #DDD)); 
	background: -webkit-linear-gradient(top,  #FFF 0%, #DDD 99%); 
	background: -o-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: -ms-linear-gradient(top, #FFF 0%, #DDD 99%); 
	background: linear-gradient(top, #FFF 0%, #DDD 99%); 
	
}

/* The previous song button icon */
.cj-music-player.cj-white-skin .cj-music-left:after {
	
	width: 6px;
	height: 10px;
	background: url(../img/music_left_white.png) no-repeat;

}

/* The next song button icon */
.cj-music-player.cj-white-skin .cj-music-right:after {
	
	width: 6px;
	height: 10px;
	background: url(../img/music_right_white.png) no-repeat;

}

/* The play button icon */
.cj-music-player.cj-white-skin .cj-music-play:after {
	
	width: 6px;
	height: 10px;
	background: url(../img/music_play_white.png) no-repeat;

}

/* The pause button icon */
.cj-music-player.cj-white-skin .cj-music-pause:after {
	
	width: 7px;
	height: 10px;
	background: url(../img/music_pause_white.png) no-repeat;

}

/* The buy now button icon */
.cj-music-player.cj-white-skin .cj-music-buynow:after {
	
	color: #A2A2A2;
	text-shadow: 1px 1px 1px #FFF;
	content: "\0024";

}

/* The download song button icon */
.cj-music-player.cj-white-skin .cj-music-download:after {
	
	width: 9px;
	height: 10px;
	background: url(../img/music_download_white.png) no-repeat;

}



/* ..............................................  3 - Black Skin  */

/* Text color, Hyperlinks */
.cj-music-player.cj-black-skin .cj-music-meta,
.cj-music-player.cj-black-skin a,
.cj-music-player.cj-black-skin a:visited {

	color: #999;
	
}

/* Hyperlink mouse over */
.cj-music-player.cj-black-skin a:hover {

	color: #AAA;
	
}

/* The big button */
.cj-music-player.cj-black-skin .cj-music-button {
	
	border: 2px solid #353535;
	background-color: #444;
	
	-moz-box-shadow: inset 0 -2px 10px #111;
    -webkit-box-shadow: inset 0 -2px 10px #111;
    box-shadow: inset 0 -2px 10px #111;
	
}

/* The big button active/open state */
.cj-music-player.cj-black-skin .cj-music-btn-active {
	
	border: 2px solid #3C3C3C;
	
}

/* The main player */
.cj-music-player.cj-black-skin .cj-music-container {

	border: 2px solid #333;
	background-color: #333;

	-moz-box-shadow: inset 0 0 4px #000;
    -webkit-box-shadow: inset 0 0 4px #000;
    box-shadow: inset 0 0 4px #000;
	
}

/* The 1px vertical dividers */
.cj-music-player.cj-black-skin .cj-music-numbers:after,
.cj-music-player.cj-black-skin .cj-song-holder:after {
	
	border-left: 1px solid #000;
	border-right: 1px solid #555;
	
}

/* The player control buttons */
.cj-music-player.cj-black-skin .cj-music-controls span {

	background-color: #333;
	
	border: 1px solid #444;
	border-top: 1px solid #555;
	
	-moz-box-shadow:inset 0 0 3px #000;
    -webkit-box-shadow:inset 0 0 3px #000;
    box-shadow:inset 0 0 3px #000;
	
}



/* ..............................................  4 - Gray Skin */

/* Text color, Hyperlinks */
.cj-music-player.cj-gray-skin .cj-music-meta,
.cj-music-player.cj-gray-skin a,
.cj-music-player.cj-gray-skin a:visited {

	color: #CCC;
	
}

/* Hyperlink mouse over */
.cj-music-player.cj-gray-skin a:hover {

	color: #BBB;
	
}

/* The big button */
.cj-music-player.cj-gray-skin .cj-music-button {
	
	border: 2px solid #888;
	background-color: #777;
	
	-moz-box-shadow: inset 0 -2px 15px #4D4D4D;
    -webkit-box-shadow: inset 0 -2px 15px #4D4D4D;
    box-shadow: inset 0 -2px 15px #4D4D4D;
	
}

/* The big button active/open state */
.cj-music-player.cj-gray-skin .cj-music-btn-active {
	
	border: 2px solid #777;
	
}

/* The main player */
.cj-music-player.cj-gray-skin .cj-music-container {

	border: 2px solid #888;
	background: #777 url(../img/controls.png);

	-moz-box-shadow: inset 0 0 4px #4D4D4D;
    -webkit-box-shadow: inset 0 0 4px #4D4D4D;
    box-shadow: inset 0 0 4px #4D4D4D;
	
}

/* The 1px vertical dividers */
.cj-music-player.cj-gray-skin .cj-music-numbers:after,
.cj-music-player.cj-gray-skin .cj-song-holder:after {
	
	border-left: 1px solid #666;
	border-right: 1px solid #999;
	
}

/* The player control buttons */
.cj-music-player.cj-gray-skin .cj-music-controls span {

	background-color: #5E5E5E;
	
	border: 1px solid #888;
	border-top: 1px solid #777;
	
	-moz-box-shadow: inset 0 0 3px #333;
    -webkit-box-shadow: inset 0 0 3px #333;
    box-shadow: inset 0 0 3px #333;
	
}




/* ..............................................  5 - Black/Gray Skin Icons */


/* The big button icon */
.cj-music-player.cj-black-skin .cj-music-button:after,
.cj-music-player.cj-gray-skin .cj-music-button:after {
	
	width: 20px;
	height: 14px;
	background: url(../img/headphones_dark.png) no-repeat;
	
}

/* The previous song button icon */
.cj-music-player.cj-black-skin .cj-music-left:after,
.cj-music-player.cj-gray-skin .cj-music-left:after {
	
	left: 6px;
	width: 5px;
	height: 8px;
	background: url(../img/music_left_dark.png) no-repeat;

}

/* The next song button icon */
.cj-music-player.cj-black-skin .cj-music-right:after,
.cj-music-player.cj-gray-skin .cj-music-right:after {
	
	left: 7px;
	width: 5px;
	height: 8px;
	background: url(../img/music_right_dark.png) no-repeat;

}

/* The play button icon */
.cj-music-player.cj-black-skin .cj-music-play:after,
.cj-music-player.cj-gray-skin .cj-music-play:after {
	
	width: 5px;
	height: 8px;
	background: url(../img/music_play_dark.png) no-repeat;

}

/* The pause button icon */
.cj-music-player.cj-black-skin .cj-music-pause:after,
.cj-music-player.cj-gray-skin .cj-music-pause:after {
	
	width: 6px;
	height: 8px;
	background: url(../img/music_pause_dark.png) no-repeat;

}

/* The buy now button icon */
.cj-music-player.cj-black-skin .cj-music-buynow:after, 
.cj-music-player.cj-gray-skin .cj-music-buynow:after {
	
	color: #A2A2A2;
	content: "\0024";

}

/* The download song button icon */
.cj-music-player.cj-black-skin .cj-music-download:after, 
.cj-music-player.cj-gray-skin .cj-music-download:after {
	
	width: 8px;
	height: 9px;
	background: url(../img/music_download_dark.png) no-repeat;

}

/* Song Numbers, Song Text */
.cj-music-player.cj-black-skin .cj-music-numbers,
.cj-music-player.cj-black-skin .cj-song-holder, 
.cj-music-player.cj-gray-skin .cj-music-numbers,
.cj-music-player.cj-gray-skin .cj-song-holder {
	
	margin-top: 10px;
	
}

/* Divider lines */
.cj-music-player.cj-black-skin .cj-music-numbers:after,
.cj-music-player.cj-black-skin .cj-song-holder:after, 
.cj-music-player.cj-gray-skin .cj-music-numbers:after,
.cj-music-player.cj-gray-skin .cj-song-holder:after {
	
	top: -10px;
	
}


/* ..............................................  6 - Retina Icons */

/* Retina icons */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 
	
	/* ********** */
	/* WHITE SKIN */
	/* ********** */
	
	/* big button */
	.cj-music-player.cj-white-skin .cj-music-button:after {
	
		background-image: url(../img/headphones_white@2x.png);
		background-size: 21px 16px;
		
	}
	
	/* The previous song button icon */
	.cj-music-player.cj-white-skin .cj-music-left:after {
		
		background-image: url(../img/music_left_white@2x.png);
		background-size: 6px 10px;
	
	}
	
	/* The next song button icon */
	.cj-music-player.cj-white-skin .cj-music-right:after {
		
		background-image: url(../img/music_right_white@2x.png);
		background-size: 6px 10px;
	
	}
	
	/* The play button icon */
	.cj-music-player.cj-white-skin .cj-music-play:after {
		
		background-image: url(../img/music_play_white@2x.png);
		background-size: 6px 10px;
	
	}
	
	/* The pause button icon */
	.cj-music-player.cj-white-skin .cj-music-pause:after {
		
		background-image: url(../img/music_pause_white@2x.png);
		background-size: 7px 10px;
	
	}
	
	/* The download song button icon */
	.cj-music-player.cj-white-skin .cj-music-download:after {
		
		background: url(../img/music_download_white@2x.png) no-repeat;
		background-size: 9px 10px;
	
	}
	
	
	/* *************** */
	/* BLACK/GRAY SKIN */
	/* *************** */
	
	/* big button */
	.cj-music-player.cj-black-skin .cj-music-button:after,
	.cj-music-player.cj-gray-skin .cj-music-button:after {
	
		background-image: url(../img/headphones_dark@2x.png);
		background-size: 20px 14px;
		
	}
	
	/* The previous song button icon */
	.cj-music-player.cj-black-skin .cj-music-left:after,
	.cj-music-player.cj-gray-skin .cj-music-left:after {
		
		background-image: url(../img/music_left_dark@2x.png);
		background-size: 5px 8px;
	
	}
	
	/* The next song button icon */
	.cj-music-player.cj-black-skin .cj-music-right:after,
	.cj-music-player.cj-gray-skin .cj-music-right:after {
		
		background-image: url(../img/music_right_dark@2x.png);
		background-size: 5px 8px;
	
	}
	
	/* The play button icon */
	.cj-music-player.cj-black-skin .cj-music-play:after,
	.cj-music-player.cj-gray-skin .cj-music-play:after {
		
		background-image: url(../img/music_play_dark@2x.png);
		background-size: 5px 8px;
	
	}
	
	/* The pause button icon */
	.cj-music-player.cj-black-skin .cj-music-pause:after,
	.cj-music-player.cj-gray-skin .cj-music-pause:after {
		
		background-image: url(../img/music_pause_dark@2x.png);
		background-size: 6px 8px;
	
	}
	
	/* The download song button icon */
	.cj-music-player.cj-black-skin .cj-music-download:after, 
	.cj-music-player.cj-gray-skin .cj-music-download:after {
		
		background: url(../img/music_download_dark@2x.png) no-repeat;
		background-size: 8px 9px;
	
	}


}