@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nova+Square');
/* CSS Document */

#container{
	width: 990px;
	position:absolute;
	height: 370px;
	background-image:url(../img/bg.png);
	background-repeat:no-repeat;
	font-size: 18px;
	font-family: 'Nova Square', cursive;

}

#preload{
	width: 990px;
	position:absolute;
	height: 370px;
	border.radius: 20px;  
 	-moz-border-radius:20px;  
 	-webkit-border-radius:20px;
	background-image: url(../img/bg-load2.jpg);
	font-size: 11px;
	font-family: 'Nova Square', cursive;
	z-index: 5000;

}
#cover img{
	border:thin #FFF 4px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px;
	border-top-right-radius: 250px;
	border-top-left-radius: 250px;
	border.radius: 250px;  
 	-moz-border-radius:250px;  
 	-webkit-border-radius:250px;}

 #cover2 img{
	border:thin #FFF 4px;
	border-bottom-left-radius: 250px;
	border-bottom-right-radius: 250px;
	border-top-right-radius: 250px;
	border-top-left-radius: 250px;
	border.radius: 250px;  
 	-moz-border-radius:250px;  
 	-webkit-border-radius:250px;}

#cover2{
	width: 202px;
	height: 202px;
	border: 2px #666;
	position:absolute;
	border: 0px;
	left: 83px;
	top: 85px;
}

#cover{
	width: 202px;
	height: 202px;
	border: 2px #666;
	position:absolute;
	border: 0px;
	left: 705px;
	top: 85px;
}


#pick-turn-left{
	background-image: url(../img/turntable-pick-left.png);
	background-repeat:no-repeat;
	width: 176px;
	height: 177px;
	position: absolute;
	top: 98px;
	left: -5px;
	z-index:2;
	}
	
#pick-turn-right{
	background-image: url(../img/turntable-pick.png);
	background-repeat:no-repeat;
	width: 176px;
	height: 177px;
	position: absolute;
	top: 97px;
	left: 821px;
	z-index:2;
	}


#currentSong{
	width: 107px;
	height: 32px;
	position: absolute;
	left: 440px;
	top: 148px;
	font-size:10px;
	text-align: left;
	}

#equalizer{
	width: 119px;
	height: 68px;
	position: absolute;
	left: 427px;
	font-size:10px;
	text-align:center;
	top: 200px;
	}
	
#clock{
	width: 70px;
	height: 20px;
	position: relative;
	left: 453px;
	top: 60px;
	}
	
#mobile{
	width: 110px;
	height: 31px;
	position: absolute;
	left: 425px;
	top: 99px;
	}

#other-repro{
	width: 103px;
	height: 31px;
	position: absolute;
	left: 481px;
	top: 299px;
	}

#social{
	position:absolute;
	width:15px;
	height:37px;
	left:549px;
	padding-bottom: 3px;
	top: 143px;
}
#onda{
	position:absolute;
	width:180px;
	height:73px;
	left:404px;
	top: 267px;
}

.other{
	position:absolute;
	width:58px;
	height:16px;
	left:185px;
	top: 32px;}

#lastplayed{
	position:absolute;
	width:268px;
	height:190px;
	left:11px;
	top: 25px;
}
p{
	margin: 4px;}

#volume{
	height: 273px;
	width: 47px;
	position:absolute;
	top: 69px;
	left: 608px;
}

#volume2{
	height: 273px;
	width: 47px;
	position:absolute;
	top: 69px;
	left: 334px;
}

#slider-vertical{
	height:220px;
	width:0px;
	border: 0px;
	background:none;
	position:relative;
	left: 16px;
	top: 43px;
	text-align:center;}

#slider-vertical2{
	height:220px;
	width:0px;
	border: 0px;
	background:none;
	position:relative;
	left: 18px;
	top: 43px;
	text-align:center;}


#volvalue{
	height: 14px;
	width: 45px;
	position:absolute;
	top: 50px;
	left: 608px;
	text-align:center;
	margin-top: 5px;
	font-size: 11px;
	color: #0099ff;

        
	}

#volvalue2{
	height: 14px;
	width: 45px;
	position:absolute;
	top: 50px;
	left: 337px;
	text-align:center;
	margin-top: 5px;
	font-size: 11px;
	color: #0099ff;
        
	}
	
.controls{
	height:130px;
	width:167px;
	position:absolute;
	left: 836px;
	top: 224px;
	z-index: 4;
}

#play{
	background-image:url(../img/play.png);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	position:absolute;
	left: 870px;
	top: 289px;
	z-index: 45;
}

#pause{
	background-image:url(../img/pause.png);
	background-repeat:no-repeat;
	height:60px;
	width:61px;
	position:absolute;
	left: 870px;
	top: 289px;
	z-index: 45;
}

#stop{
	background-image:url(../img/stop.PNG);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	position: absolute;
	left: 922px;
	top: 245px;
	z-index: 45;
}

#mute{
	height:60px;
	width:60px;
	position: absolute;
	left: 92px;
	top: 89px;
	z-index: 46;
}



 REPRO DECK2

.controls2{
	height:130px;
	width:167px;
	position:absolute;
	left: 136px;
	top: 224px;
	z-index: 4;
}

#play2{
	background-image:url(../img/play.png);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	position:absolute;
	left: 60px;
	top: 290px;
	z-index: 45;
}

#pause2{
	background-image:url(../img/pause.png);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	position:absolute;
	left: 60px;
	top: 290px;
	z-index: 45;
}

#stop2{
	background-image:url(../img/stop.PNG);
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	position: absolute;
	left: 10px;
	top: 245px;
	z-index: 45;
}

#mute2{
	height:60px;
	width:60px;
	position: absolute;
	left: 92px;
	top: 89px;
	z-index: 46;
}





input{
	border: 0px;
	background-color:transparent;}
	
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
	position:absolute;
	left:-13px;
	border: 0px solid #d3d3d3/*{borderColorDefault}*/; 
	background: url(../img/pick-slide.png) no-repeat;
	width: 39px;
	height: 32px;
	text-decoration:none;
	 }
	

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { 
	position:absolute;
	left:-13px;
	border: 0px solid #d3d3d3/*{borderColorDefault}*/; 
	background: url(../img/pick-slide.png) no-repeat;
	width: 39px;
	height: 32px;
	text-decoration:none;
	cursor: pointer;
	}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { 	position:absolute;
	left:-13px;
	border: 0px solid #d3d3d3/*{borderColorDefault}*/; 
	background: url(../img/pick-slide.png) no-repeat;
	width: 39px;
	height: 32px;
	text-decoration:none;
	}


.example5 {
 position: absolute;
 width: 100%;
 /*height: 100%;*/
 top: 20px;
 left:400px;
 line-height: 30px;
 color: #ffffff;
 z-index: 20;

}
.example6 {
 position: absolute;
 width: 100%;
 font-size: 12px;
 top: 155px;
 left:447px;
 

}