/**
 * @Package: WordPress Plugin
 * @Subpackage: Audio Player
 * @Since: Audio Player 1.0
 * @Current Version: Audio Player 1.0
 * @WordPress Version Supported: 4.0 and above
 * @Older WordPress Version Supported: 3.6, 3.7, 3.8, 3.9
 * @Plugin Author URL: http://codecanyon.net/user/themepassion/portfolio
 * This file is part of Audio Player WordPress Plugin.
 */

/*-------------------------------------------
	player override
---------------------------------------------*/

.apjs-container .apjs-controls{
	position: relative;
}



.apjs-container{
	height: auto !important;
	width: auto !important;
	background: transparent;
	font-family: inherit;
}

.apjs-container .apjs-controls{
	display: inline-block !important;
	height: auto;
}


.apjs-controls div.apjs-time-rail{
	padding-top: 0px;
}



/*-------------------------------------
general
---------------------------------------*/

.audpl-wrapper, .audpl-wrapper *{
	box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;

        -webkit-transition: border-color ease-in-out .15s,background ease-in-out .15s,color ease-in-out .15s;
        transition: border-color ease-in-out .15s,background ease-in-out .15s,color ease-in-out .15s;
        -moz-transition: border-color ease-in-out .15s,background ease-in-out .15s,color ease-in-out .15s;
        -ms-transition: border-color ease-in-out .15s,background ease-in-out .15s,color ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,background ease-in-out .15s,color ease-in-out .15s;
        vertical-align: top;
}

.audpl-wrapper {
	display: inline-block;
	position: relative;
}

.audpl-wrapper .hidden{
	opacity:0;
	overflow:hidden;
	height:0px;
	width:0px;
	visibility:hidden;
	max-height:0px;
	max-width:0px;
}

.audpl-wrapper .songinfo span{
	display: block;
	width: 100%;
	position: relative;
}

.apscroll-rails{
	background-color: rgba(200,200,200,0.7);
	opacity: 1;
}

/*-------------------------------------------
	templates layout
---------------------------------------------*/

.audpl-template1 .center, 
.audpl-template2 .center, 
.audpl-template3 .center, 
.audpl-template4 .center,
.audpl-template15 .center, 
.audpl-template16 .center {
	float:left;
	display: inline-block;
	position: relative;
	width: 100%;
}

.audpl-template1 .top, .audpl-template1 .bottom,
.audpl-template2 .top, .audpl-template2 .bottom,
.audpl-template3 .top, .audpl-template3 .bottom,
.audpl-template4 .top, .audpl-template4 .bottom,
.audpl-template15 .top, .audpl-template15 .bottom,
.audpl-template16 .top, .audpl-template16 .bottom,
.audpl-template5 .left .content,
.audpl-template6 .left .content,
.audpl-template7 .right .content,
.audpl-template8 .right .content,
.audpl-template9 .left .content, .audpl-template9 .right .content, 
.audpl-template10 .left .content, .audpl-template10 .right .content,
.audpl-template11 .left .content, .audpl-template11 .right .content,
.audpl-template12 .left .content, .audpl-template12 .right .content,
.audpl-template13 .left .content, .audpl-template13 .right .content,
.audpl-template14 .left .content, .audpl-template14 .right .content
{
	overflow-y: auto;
	overflow-x:hidden;
	width: 100% !important;
	height: auto;
}

.audpl-template9 .center,
.audpl-template10 .center, 
.audpl-template11 .center,
.audpl-template12 .center,
.audpl-template13 .center,
.audpl-template14 .center{
	overflow-y: visible;
	overflow-x: visible;
	width: 100% !important;
	height: auto;
}



.audpl-template1 .player,
.audpl-template2 .player, 
.audpl-template3 .player,
.audpl-template4 .player,
.audpl-template15 .player,
.audpl-template16 .player,
.audpl-template5 .left .player,
.audpl-template6 .left .player,
.audpl-template7 .right .player,
.audpl-template8 .right .player,
.audpl-template9 .player,
.audpl-template10 .player,
.audpl-template11 .player,
.audpl-template12 .player,
.audpl-template13 .player,
.audpl-template14 .player
{
	overflow-y: visible;
	overflow-x: visible;
	width: 100% !important;
	height: auto;
}



.audpl-template5 .left, .audpl-template5 .right,
.audpl-template6 .left, .audpl-template6 .right,
.audpl-template7 .left, .audpl-template7 .right,
.audpl-template8 .left, .audpl-template8 .right,
.audpl-template9 .left, .audpl-template9 .right,
.audpl-template10 .left, .audpl-template10 .right,
.audpl-template11 .left, .audpl-template11 .right,
.audpl-template12 .left, .audpl-template12 .right,
.audpl-template13 .left, .audpl-template13 .right,
.audpl-template14 .left, .audpl-template14 .right {
	float:left;
	display: inline-block;
	position: relative;
}

 .audpl-template11 .left,  .audpl-template11 .right,
 .audpl-template12 .left, .audpl-template12 .right {
 	z-index: 1;
 }

 .audpl-template11 .center{
 	position: absolute;
 	bottom: 0px;
 	left: 0px;
 	z-index: 2;
 }

 .audpl-template12 .center{
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	z-index: 2;
 }

.audpl-template13 .player, .audpl-template14 .player{
	position: absolute;
	bottom:0px;
	z-index: 2;
}




/*-------------------------------------------
	player innner style
---------------------------------------------*/

.audpl-wrapper .imagearea, .audpl-wrapper .playlistarea{
	width: 100%;
	display: inline-block;
	position: relative;
}

.audpl-wrapper .imagearea{
	text-align: center;
}

.audpl-wrapper .imagearea img{
	width:100%;
	height: auto;
	opacity: 1;
}

.audpl-wrapper .imagearea img.fadeit{
	opacity: 0.3;
	transition: opacity 1000ms;
	-o-transition: opacity 1000ms;
	-ms-transition: opacity 1000ms;
	-moz-transition: opacity 1000ms;
	-webkit-transition: opacity 1000ms;
}


.apjs-playlist li:hover, .apjs-playlist li.current{

}




/*-------------------------------------------
	playlist rows style
---------------------------------------------*/

.audpl-plrow li{
	width: 100%;
	display: inline-block;
	clear:both;
}

.audpl-plrow li .icon{
	float:left;
	width: 20%;
	display: inline-block;
}

.audpl-plrow li .info{
	float:left;
	width: 80%;
	display: inline-block;
}

.audpl-plrow li .icon img{
	width: 100%;
	height: auto;
	max-width: 100%;
}

.audpl-plrow li .title,
.audpl-plrow li .album,
.audpl-plrow li .length{
	display: inline-block;
	width: auto;
	clear:both;
	float:left;
}

.audpl-plrow li .title{
	width: 100%;
}

.audpl-plrow li .album,
.audpl-plrow li .length{
	width: auto;
}





/*-------------------------------------------
	playlist grid
---------------------------------------------*/
.audpl-plgrid li {
	width: 50%;
	display: inline-block;
	clear:both;
}

.audpl-plgrid li .icon img {
	width: 100%;
	max-width: 100%;
}

.audpl-plgrid li .icon {
	float:left;
	width: 100%;
	display: inline-block;
	text-align: center;
}

.audpl-plgrid li .info{
	float:left;
	width: 100%;
	display: inline-block;
}

.audpl-plgrid li .title,
.audpl-plgrid li .album,
.audpl-plgrid li .length{
	display: inline-block;
	clear:both;
	float:left;
}

.audpl-plgrid li .title{
	width: 100%;
}

.audpl-plgrid li .album,
.audpl-plgrid li .length{
	width: 100%;
}



/*-------------------------------------------
	button icons
---------------------------------------------*/

.apjs-controls .apjs-button.apjs-prevtrack button:before{ content: "\e603"; }
.apjs-controls .apjs-button.apjs-nexttrack button:before{ content: "\e604"; }

.apjs-controls .apjs-button.apjs-play button:before { content: "\e601"; }
.apjs-controls .apjs-button.apjs-pause button:before{ content: "\e602"; }

.apjs-controls .apjs-button.apjs-loop-on button:before{ content: "\e600"; }
.apjs-controls .apjs-button.apjs-loop-off button:before{ content: "\e600"; }

.apjs-controls .apjs-button.apjs-shuffle-on button:before{ content: "\e607"; }
.apjs-controls .apjs-button.apjs-shuffle-off button:before{ content: "\e607"; }

.apjs-controls .apjs-button.apjs-hide-playlist button:before{ content: "\e608";}
.apjs-controls .apjs-button.apjs-show-playlist button:before{ content: "\e608";}

.apjs-controls .apjs-button.apjs-mute button:before{ content: "\e605"; }
.apjs-controls .apjs-button.apjs-unmute button:before{ content: "\e606"; }


.apjs-controls .apjs-button button, .apjs-controls .apjs-button button:before {
	background-image: none !important; 
	display: inline-block;
	width: auto;
	height: auto;
	text-decoration: inherit;
	font-family: 'audpl';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-transition: color .1s ease-in 0;
	transition: color .1s ease-in 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #eeeeee;
	background: none;
}

.apjs-controls .apjs-button.apjs-show-playlist button,
.apjs-controls .apjs-button.apjs-shuffle-off button,
.apjs-controls .apjs-button.apjs-loop-off button{
	opacity: 0.7;
}




/*float time*/

.audpl-wrapper .player .apjs-controls .apjs-time-rail .apjs-time-float {
	height: 20px;
	width: 46px;
	border-color: rgba(75,75,75,0.8);
	background-color: rgba(75,75,75,0.8);
}


.audpl-wrapper .player .apjs-controls .apjs-time-rail .apjs-time-float-current
{
	height: auto;
	width: auto;
	display: inline-block;
	margin: 0px;
	font-size: 13px;
	color: #ffffff;
	line-height: 13px;
	padding: 2px 6px;
	background-color: rgba(75,75,75,0.8);
}



.audpl-wrapper .player .apjs-controls .apjs-time-rail .apjs-time-float-corner {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	line-height: 0;
	border: solid 5px rgba(75,75,75,0.8);
	border-color: rgba(75,75,75,0.8) transparent transparent transparent;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	top: 18px;
	left: 17px;
}

.audpl-wrapper .player .apjs-time{
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-ms-border-radius: 0px !important;
	-o-border-radius: 0px !important;
}