*{
    
margin: 0;
    
padding: 0;
    
border: none;
    
outline: none;

}






body{
	
font-family:arial;
	
font-size:18px;
	
line-height:1.5em;
	
color:#fff;
	
background: url(../images/bg2.jpg);
background-position: center; 
}




a{
	
font-family:arial;
	
font-size:18px;
	
line-height:1.5em;
	
color:blue;
	
}
















.clearfix{
	
clear:both;

}





#container{
	
width:660px;
	
min-height:400px;
	
background:#000;
	
overflow:auto;
	
margin:60px auto;
	
-moz-border-radius:10px;
	
-webkit-border-radius:10px;
	
border-radius:10px;
	
border:#fff solid 2px;

}




#audio-image{
	
position:relative;
	
overflow:hidden;
	
height:200px;
	
margin-bottom:15px;

}




#audio-info{
	
text-align:center;

}




#audio-info .artist{
	
font-weight:bold;

}




.cover{
	
width:100%;
	
z-index:1;

}




input#volume {
	
width:95%;
	
margin-left:2%;
    
-webkit-appearance: none !important;
    
background:#ccc;
    
height:1px;
	
margin-bottom:20px;

}



input#volume::-webkit-slider-thumb {
    
-webkit-appearance: none !important;
    
background:url(../images/knob.png) no-repeat;
    
height:12px;
    
width:12px;

}
















#buttons{
	
width:43.5%;
	
display: block;
    
margin: 15px auto;
	
overflow:auto;

float:center;

border:blue solid 0px;
}



button#play{
	
width:70px;
	
height:70px;
	
background:url(../images/2play.png) no-repeat;
float:left;

margin-left:2px ;
border:blue solid 0px;
}



button#pause{
	
width:70px;
	
height:70px;
	
background:url(../images/2pause.png) no-repeat;
float:left;
margin-left:2px ;
}



button#stop{
	
width:70px;
	
height:70px;
	
background:url(../images/2stop.png) no-repeat;
float:left;

margin-left:2px ;
}


button#prev{
	
width:70px;
	
height:70px;
	
background:url(../images/2prev.png) no-repeat;
	
float:left;
	
margin-left:2px ;
}


button#next{
	
width:70px;
	
height:70px;
	
background:url(../images/2next.png) no-repeat;
	
float:right;
	

}























#playlist {
    
list-style-type: none;
	
padding:10px;

border:green solid 0px;


}




#playlist li {
    
cursor: pointer;
    
margin:5px;

}




#tracker{
	
position:relative;
	
width:100%;

}




#playlist li.active {
    
font-weight: bold;
	
padding:3px;
	
background:#262626;

border:#333333 solid 1px;


}












#progressBar { 
   
width:39%;
   
margin-left:30%;
  
margin-bottom:20px;
   
margin-top:9px;
   
height:10px;
   
background:url(../images/progress_bg.png) no-repeat;
   
float:center;

border:yellow solid 0px;


}





#progress {
   
background:url(../images/progress_fg.gif) no-repeat;
   
height:10px;
   
display:inline-block;

margin-bottom:20px;
  
}






#duration{
	
position:absolute;
	
top:0;
	right:10px;
	
padding:4px 8px;
	
background:#000;
	
border-radius:5px;

}







#albumname{
	
margin:auto;

text-align: center;
}








#divbox{
	
width:88%;
	
display: flex;
margin:auto;

justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

border:blue solid 0px;

}





#leftbox{
	
float:left;

border:green solid 0px;	
margin-bottom:115px;  
}



#midbox{
	
float:left;

border:yellow solid 0px;
}





#rightbox{

float:right;

border:red solid 0px;
margin-bottom:115px; 
}