@charset "utf-8";
/* CSS Document */

@font-face{
	font-family:"Eras Medium ITC";
/*	src:url("https://flash.ifactorystream.net/users/sogestim/player-sogestim3/fonts/ERASMD.ttf"), url("https://flash.ifactorystream.net/users/sogestim/player-sogestim3/fonts/ERASMD.eot");*/
	src:url("fonts/ERASMD.ttf"), url("fonts/ERASMD.eot");
}
@font-face{
	font-family:"calibri";
	/*src:url("https://flash.ifactorystream.net/users/sogestim/player-sogestim3/fonts/calibri.ttf"), url("https://flash.ifactorystream.net/users/sogestim/player-sogestim3/fonts/calibri.eot");*/
	src:url("fonts/calibri.ttf"), url("fonts/calibri.eot");
}

body{
	text-align:center; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size:16px; color:#CCC; margin:0;
}
/* Complete player customization including volume bar */
#mp3_playerHolder{
	text-align:center; 
	max-width:98%; 
	width:450px; 
	height:175px;
	background:#000;
	
	background: -webkit-linear-gradient(top, #232323, #514d4d); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, #232323, #514d4d); /* For Opera 11.1 to 12.0 */
	background: linear-gradient(top, #232323, #514d4d);
	background:-moz-linear-gradient(top, #232323, #514d4d);
	/*background:#e1e1e1;*/
	border-radius:10px; 
	/*border-style:solid; 
	border-color:#e1e1e1;*/
}
/* Complete player except volume section barcustomization*/
#mp3_playerHolder1{
	max-width:98%; 
	width:450px; 
	height:95px;
	/*margin:15px 40px 0px 10px;*/
	padding:15px;
}

/*Complete volume section customization*/
#volume_player{
	max-width:98%;
	width:450px;
	height:45px;
	background:#FFF;
	border-radius:5px;
	margin-left:5px;
	padding-top:0px;
}
/*Volume section customization*/
#volumeP{
	text-align:center; 
	list-style:none;
	font-size:23px;
	color:#333;
	margin:0;
	padding:0; 
}

#volumeP li{
	display:inline-block; 
}
/*Mute Icon customization*/
#muteBtn{
	width:8%;
}

/*Volume slider customization*/
#vslider{
	width:250px;	
	background:#666;
	border-radius:8px;
}

/*Album Image holder customization*/
#imageHolder{
	max-width:100%;
	width:100px;
	max-height::100%;
	height:100px;
}
/*This is complete title holder customization*/
#titleHolder{
	position:relative;
	margin-top:-100px;
	margin-left:110px;
	color:#999;
	font-weight:700;
	width:80%;
	text-align:left;
	font-size:12px;
}
/*album title customization*/
.titleH{
	font-family:"Eras Medium ITC";
	font-size:15px;
	width:65%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

/*album title customization*/
.demoH{
	position:absolute;
	font-family:"Eras Medium ITC";
	font-size:15px;
	width:auto;
	height:auto;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	visibility:hidden;
	left:-999999px;
	top:-9999999px
}


/*title artist and track title customization*/
.titleC{
	font-family:calibri;
	color:#aee141;
	font-size:12px;
	width:65%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}


/*title artist and track title customization*/
.demoC{
	position:absolute;
	font-family:calibri;
	color:#aee141;
	font-size:12px;
	width:auto;
	height:auto;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	visibility:hidden;
	left:-999999px;
	top:-9999999px
}



/* buy buttons Holder customization*/
#buttonH{
	width:32%;
	float:right;
	display:inline-table;
	margin:-47px 0;
}
/* Buy Text customization*/
#b1{
	width:60px;
	text-align:center;
	font-family:calibri;
	font-size:15px;
}

/* buy buttons customization*/
.btn{
	width:55px;
	height:auto;
	background-color:#000;
	border-radius:6px;
	
	font-family:calibri;
	color:#aee141;
	
	margin-top:6px;
	margin-bottom:1px; 
	text-align:center;
	padding:10px 1px;
	background: -webkit-linear-gradient(bottom, #000, #3b3939); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #000, #3b3939); /* For Opera 11.1 to 12.0 */
	background: linear-gradient(bottom, #000, #3b3939);
	background:-moz-linear-gradient(bottom, #000, #3b3939);
	
	box-shadow: 0px 0px 4px #000;
	
}

.btn a:link, a:hover, a:visited, a:active{
	text-decoration:none;
	color:#aee141;
}


/*This is complete player customization*/
#mp3_player{
	width:48%; 
	height:45px; 
	padding:5px; 
	margin:0px; 
	float:left;  
	margin-left:140px;
}

/*Play pause section customization.*/
ul#audioP{
	text-align:left; 
	list-style:none; 
	padding:0; 
	margin:0;
}
ul#audioP li{
	display:inline-block; 
	width:30%;
}

/*Play button customization.*/
#playH{
	width:25px;
	height:25px;
	border:2px #aee141 solid; 
	border-radius:70px;
	/*background-color:#FFF; */
	padding:5px; 
	font-size:22px; 
	color:#aee141; 
	text-align:center;
	text-shadow: 0px 3px 3px #000;
}

/*Pause button customization.*/
#pauseH{
	width:25px;
	height:25px;
	border:2px #aee141 solid; 
	border-radius:70px;
	/*background-color:#FFF; */
	padding:5px; 
	font-size:22px; 
	color:#aee141; 
	text-align:center;
	text-shadow: 0px 3px 3px #000;
}


/********************/
/*Volume Bar background customization.*/
.volume{
	background:#000;
	height:15px;
	border-radius:15px;
}

/*Volume Bar upper part customization.*/
.volumeBar {
    display:block;
    height:15px;
	border-radius:15px;
    background-color:#aee141;
    z-index:10;
}
/*Station name Customization.*/
#stationName{
	width:100%;
	text-align:center;
	font-size:14px;
	font-family:Eras Medium ITC;
	color:#000;
}


/*Volume button customization.*/
#speakBtn{
	width:8%;
	right:10px;
}


#pauseBtn{
	/*float:right;*/
	right:10px;
}




/* will be settled later once the web version will be Okay.*/
/*
@media (max-width: 240px){
	body{
		font-size:10px;
	}
	#buttonH{
		margin-top:-25px;
	}
	#mp3_playerHolder1{
		width:91%;
	}
	#titleHolder{width:66%;}
	.btn{width:60px;}
	#mp3_player{
		width:57%;
		margin-top:40px;
		margin-left::10px;
	}
}
*/
@media (min-width:250px) and (max-width: 350px){
	body{
		font-size:12px;
	}
	#mp3_playerHolder{
		max-width:100%;
	}
	
	#mp3_playerHolder1{
		width:98%;
	}
	#imageHolder{
		width:100px;
		height:100px;
	}
	#titleHolder{width:60%;margin-left:110px;margin-top:-100px;}
	.titleH{font-size:12px;}
	.titleC{font-size:12px;}
	.titleC{font-size:10px;}
	.demoC{font-size:10px;}
	#mp3_player{
		margin-top:0px;
		margin-left:120px;
	}
	
	#buttonH{
		margin-top:-40px;
		font-size:12px;
	}
	
	ul#audioP{margin:0px;}
	#playH{width:20px; height:20px; font-size:18px;}
	#pauseH{width:20px; height:20px; font-size:18px;}
	#volumeP{font-size:18px; padding-top:5px;}
	#vslider{width:200px;}
	.volume{height:12px;}
	.volumeBar{height:12px;}
	
	
}
@media (min-width:360px) and (max-width: 400px){
	body{
		font-size:14px;
	}
	#mp3_playerHolder{
		max-width:100%;
	}
	#mp3_playerHolder1{
		width:100%;
	}
	#titleHolder{width:67%;}
	#mp3_player{
		margin-top:0px;
		margin-left:130px;		
	}
	ul#audioP{margin:0px;}
	#playH{width:25px; height:25px; font-size:20px;}
	#pauseH{width:25px; height:25px; font-size:20px;}

}