@charset "utf-8";
@font-face {
  font-family:'MajorMonoDisplay';
  src: url('MajorMonoDisplay.ttf')  format('truetype');
}
::-webkit-scrollbar {
  width:5px;
}
::-webkit-scrollbar-track {
  box-shadow:inset 0 0 5px grey;
  border-radius:10px;
}
::-webkit-scrollbar-thumb {
  background:#F9E000;
  border-radius: 5px;
}
html,body{
  position:absolute;
	width:100%;
	height:100%;
  margin:0;
	padding:0;
	border:0;
	background-color:#000;
  background-image: url("back.jpg");
  background-repeat: no-repeat;
  font-family:'MajorMonoDisplay',Fallback,monospace;
  font-size:10px;
  color:#FFF;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  overflow-x:hidden;
}
h1,h2{
  padding-top:15px;
  text-overflow:clip;
  text-decoration:none;
}
#newtrackfield{
  padding-top:0px;
}
p.footer,p.names{
  position:relative;
  float:left;
  width:auto;
  height:auto;
  margin:10px;
}
p.names{
  float:right;
}
img{
  object-fit:contain;
  -webkit-filter: drop-shadow(-2px -1px 2px rgba(64,0,64,0.35));
  filter: drop-shadow(-2px -1px 2px rgba(64,0,64,0.35));
}
img.arrow{
  position:relative;
  float:right;
  margin-right:-11px;
  margin-top:-15px;
  margin-bottom:2px;
}
#headtext{
  position:absolute;
  left:245px;
  width:50%;
  font-size:12px;
}
#errormsg,#feedbackmsg{
  display:none;
  position:absolute;
  width:26%;
  height:13%;
  left:37%;
  top:50%;
  margin:0px,-18px,-18px,-18px;
  padding:15px;
  border:#F80 3px solid;
  color:#F80;
  background-color:rgba(13,6,13,0.75);
  -webkit-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  -moz-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
}
#feedbackmsg{
  top:37%;
  margin-top:-33px;
  color:#FFF;
}
#header{
  position:absolute;
  height:16.666666667%;
  width:100%;
  background-color:rgba(255,136,0,0.075);
  border-bottom:rgba(255,136,0,0.05) 3px inset;
  -webkit-box-shadow: inset-7px 9px 35px -13px rgba(64,0,64,0.2);
  -moz-box-shadow:inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  box-shadow:inset -7px 9px 35px -13px rgba(64,0,64,0.2);
}
img.logo{
  position:relative;
  float:left;
  height:auto;
  width:auto;
  margin-top:25px;
  margin-left:25px;
  object-fit:contain;
}
#content{
  position:absolute;
  height:75%;
  width:100%;
  top:16.666666667%;
  overflow-y:scroll;
}
#collomrigth,#collomleft{
  position:relative;
  float:left;
  height:auto;
  width:auto;
  max-width:50%;
}
img.track-icon,img.track-audcon,img.load-icon,img.play,img.pause,img.stop,img.vollow,img.volhig{
  margin:15px 5px 15px 5px;
}
#track{
  position:relative;
  float:left;
  margin:25px;
  margin-top:40px;
  height:auto;
  width:225px;
  font-size:10px;
  text-align:center;
  background-color:rgba(255,136,0,0.1);
  -webkit-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  -moz-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
}
#new-track,#new-track-locked{
  position:relative;
  float:right;
  height:100%;
  width:225px;
  font-size:10px;
  text-align:center;
}
#new-track{
  background-color:#F80;
}
#new-track-locked{
  background-color:rgba(13,6,13,0.2);
}
#player{
  position:relative;
  float:left;
  height:70px;
  width:225px;
  margin-top:15px;
  border:0px;
  font-size:10px;
  text-align:center;
  -webkit-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  -moz-box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
  box-shadow: inset -7px 9px 35px -13px rgba(64,0,64,0.2);
}
.bar,.prog{
  position:relative;
  float:left;
  height:5px;
  margin-left:-2px;
  margin-top:5px;
  border:0px;
  font-size:10px;
  text-align:center;
}
.bar{
  background-color:#212;
  border:#FFF 2px inset;
}
.prog{
  margin-top:0px;
  background-color:#F80;
  border:0px;
}
.btnload,.btnupload{
  position:relative;
  float:left;
  width:100%;
  height:40px;
  margin-top:15px;
  margin-bottom:15px;
}
#more{
  width:35%;
  margin-left:65%;
}
#select_itm,#deselect_itm{
  position:absolute;
  float:none;
  width:210px;
  left:4%;
  margin-left:-15px;
  bottom:0px;
}
#post_newtrack{
  position:absolute;
  float:none;
  width:210px;
  right:4%;
  bottom:0px;
}
label.new_track_title,input.new_track_title{
  position:absolute;
  float:none;
  height:25px;
  width:20%;
  left:40%;
  bottom:0px;
}
label.new_track_title{
  color:#F80;
  bottom:20px;
}
label.vote{
  margin-top:30px;
  font-size:14px;
}
p.formlabel{
  position:absolute;
  height:auto;
  width:225px;
  margin:0px;
  left:0px;
  top:10px;
  font-size:14px;
  text-align:center;
  text-shadow: -2px -1px 2px rgba(64,0,64,0.75);
}
img.load-icon{
  position:absolute;
  margin:0px;
  left:15px;
  top:0px;
}
div.unlocked,div.voteing{
  border:inset #F80 3px;
  border-top:0px;
  border-bottom:0px;
}
h1.unlocked,h1.voteing{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0px;
  padding:15px 0.5% 15px 0.5%;
  border:0px;
  font-size:12px;
  background-color:#F80;
}
div.locked{
  border:inset #212 3px;
}
div.waiting,div.voted{
  border:inset #FFF 3px;
}
h1.locked{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0px;
  padding:15px 0.5% 15px 0.5%;
  border:0px;
  font-size:12px;
  background-color:#212;
}
div.done{
  border:inset #FFF 3px;
  border-top:0px;
  border-bottom:0px;
}
h1.done,h1.waiting,h1.voted{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0px;
  padding:15px 0.5% 15px 0.5%;
  border:0px;
  font-size:12px;
  background-color:rgba(255,255,255,0.5);
}
h2{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:10px 0px 0px 0px;
  padding:15px 0.5% 15px 0.5%;
  font-size:10px;
  border:0px;
}
p.unlocked,p.locked,p.voteing{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0px;
  padding:15px 0.5% 15px 0.5%;
  color:#212;
  font-size:10px;
  border:0px;
}
p.unlocked,p.voteing{background-color:#F80;}
p.locked{background-color:#FFF;}
p.done{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0px;
  padding:15px 0.5% 15px 0.5%;
  background-color:#212;
  font-size:10px;
  border:0px;
}
#uploads,#error{
  position:relative;
  float:left;
  width:96%;
  height:auto;
  margin:2%;
  text-align:left;
  color:#FFF;
}
#error{
  color:#F80;
}
input,textarea,select,label{
  position:relative;
  float:left;
  width:99%;
  height:auto;
  margin:0.5%;
  margin-top:5px;
  font-size:10px;
}
textarea{
  resize:none;
  height:auto;
  min-height:100px;
}
#footer{
  position:absolute;
  height:8.3333333335%;
  width:100%;
  top:91.666666666%;
  background-color:#212;
  -webkit-box-shadow: -7px 9px 35px -13px rgba(255,136,0,0.1);
  -moz-box-shadow: -7px 9px 35px -13px rgba(255,136,0,0.1);
  box-shadow: -7px 9px 35px -13px rgba(255,136,0,0.1);
}
#database{
  display:none;
  position:absolute;
  width:100%;
  height:75%;
  top:16.666666667%;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color:rgba(255,136,0,0.5);
}
div.databaseitm{
  position:relative;
  float:left;
  width:320px;
  height:310px;
  margin:15px;
  overflow:hidden;
  background-color:#000;
}
div.databaseitmdisplay{
  position:relative;
  float:left;
  width:96%;
  height:96%;
  margin:2%;
  overflow:hidden;
  background-color:#000;
}
audio{
  position:absolute;
  float:none;
  width:92%;
  height:40px;
  left:4%;
  bottom:65px;
}
img.track-audcon{
  padding-left:50%;
  margin-left:-15px;
}
video,object{
  position:relative;
  float:left;
  width:100%;
  height:100%;
  top:-65px;
}
iframe{
  position:relative;
  float:left;
  width:100%;
  height:100%;
  background-color:#FFF;
}