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

html, body {

	width: 100%;
	height: 100%;
	
}

body {

	margin: 0;
	padding: 0;
	
	font: 13px 'Metrophobic', sans-serif;
	color: #555;

	background: #000 url(../img/audio_poster.jpg);
	
}

.wrapper {
	
	width: 100%;
	height: 100%;
	
	display: table;
	text-align: center;
	margin: 0;
	padding: 0;
	
}

.holder {
	
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	
}

/* The main plugin wrapper */
.cj-music-player {
	
	display: inline-block;	
	text-align: left;
	line-height: 12px;
	
}

.cj-flash {
	
	height: 0;
	line-height: 0;
	overflow: hidden;
	
}

/* The main player wrapper */
.cj-music-container {
	
	width: 172px;
	height: 32px;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	border: 2px solid #FFF;
	border-bottom: 2px solid #F5F5F5;
	
	background: #FFF url(../img/graphics/music/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 #333;
    -webkit-box-shadow: 0px 2px 5px #333;
    box-shadow: 0px 2px 5px #333;
	filter: progid:DXImageTransform.Microsoft.Shadow(Direction=180, Strength=3, Color="#333333");
	
}

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

	padding: 0 7px 0 11px;
		
}

/* The current song number and title */
.cj-music-meta {

	float: left;
	
}

/* The meta tag containers */
.cj-music-meta p {
	
	position: absolute;
	top: 10px;
	margin: 0;
	
}

/* The 1px vertical dividers */
.cj-music-meta .cj-divider {
	
	position: absolute;
	top: 0;
	display: block;
	height: 33px;
	
	border-left: 1px solid #FFF;
	border-right: 1px solid #DDD;
	
}

/* The first divider */
.cj-divider-one {
	
	left: 42px;
	
}

/* The second divider */
.cj-divider-two {
	
	left: 134px;
	
}

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

	width: 112px;
	height: 28px;
	overflow: hidden;
	
}

/* The play, pause, left and right buttons */
.cj-music-controls {
	
	float: right;
	padding: 6px 2px 0 0;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	
}

/* Each button exists inside a span tag */
.cj-music-controls-btn {
	
	width: 18px;
	height: 18px;
	
	cursor: pointer;
	display: block;
	position: relative;
	
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	
	border: 1px solid #D5D5D5;
	border-bottom: 1px solid #CCC;
	
	-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/graphics/music/ie_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%); 

}

.cj-music-controls .cj-music-play-icon {

	display: block;
	margin: 4px 0 0 7px;
	
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #999;
	
}

.cj-music-controls .cj-music-pause-icon:before,
.cj-music-controls .cj-music-pause-icon:after {
	
	content: "";
	position: absolute;
	top: 5px;
	left: 6px;
	
	border: 1px solid #999;
	height: 6px;
	
}

.cj-music-controls .cj-music-pause-icon:before {

	left: 10px;
	
}

/* Hyperlinks */
.cj-music-player a {

	color: #555;
	text-decoration: none;
	outline: none;
	
}

/* Hyperlink visited */
.cj-music-player a:visited {

	color: #555;
	
}

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

	color: #777;
	
}

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

	.cj-music-container {
	
		margin: -11px 0 0 10px;
		
	}
	
}