/***for responsive mobile screen***/
@media only screen and (max-width: 321px) {
	#logoDiv{
		float: none;
		margin: auto;
	}
	
	#titleDiv{
		float: none;
		margin: auto;
		text-align: center;
		width: 100%;
	}
	
	.btmDiv{
		padding-left: 15px;
	}
		
	div.jp-audio div.jp-type-single div.jp-progress{
		left: 40px;
		width: 186px;
	}
	
	div.jp-audio div.jp-progress{
		top: 5px;
	}
	
	div.jp-audio div.jp-type-single div.jp-time-holder{
		left: 10px;
		width: 90%;
	}
	div.jp-audio div.jp-time-holder{
		top: 25px;
	}
	
	div.jp-audio ul.jp-controls{
		padding-top: 40px;
	}
	
	div.jp-audio ul.jp-controls{
		width: 220px;
	}
	
	div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-unmute{
		margin-left: 10px;
	}
	
	div.jp-audio div.jp-volume-bar{
		left: 125px;
		top: 58px;
	}

}

@media only screen and (min-width: 321px) and (max-width: 536px) {
	#logoDiv{
		float: left;
	}
	
	#titleDiv{
		float: left;
		text-align: center;
		width: 350px;
		margin-top: 15px;
	}
	
	.btmDiv{
		padding-left: 15px;
	}
	
	div.jp-audio div.jp-type-single div.jp-progress{
		width: 170px;
	}
	
	div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-unmute{
		margin-left: 190px;
	}
	
	div.jp-audio div.jp-volume-bar{
		left: 305px;
	}

}

@media only screen and (max-width: 1000px) {
	#outermostDiv{
		width: 95%;
	}
	
	#outerDiv{
		width: 95%;
	}
	
	.msgBox{
		width: 90%;
	}
	
	.txtBox{
		width: 90%;
	}
	
	
	#imageDiv{
		width: 90%;
	}
	
	#imageDiv img{
		width: 100%;
	}
	
	#progressbar.ui-progressbar{
	
		width: 90%;
		
	}
	
	#divPercentage{
		width: 90%;
	}
	
	.player{
		width: 90%;
	}
	
	div.jp-audio{
		width: 100%;
	}
	
	#headerDiv{
		height: auto;
	}
	
	#titleDiv{
		
		line-height: 22px;;
	}
}