* {
  box-sizing: border-box;
}

body {
/* background-color: #0E131B; */
background-color: #000;
font-family: Consolas, monospace;
font-size: 14px;
color: #7C4;
margin: 0;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #444;
margin: 6px 0;
padding: 0;
}

label {
color: #4BE2D8;
margin-left: 5px;
}

a, a:visited {
color: #cFF;
white-space: nowrap;
}

a:active {
color: #FF0;
background-color: #444;
}

td {
color: #999;
font-size: 12pt;
}

.changelog {
  font-size: 12pt;
  color: #FFE;
}

.changelog b {
  font-size: 12pt;
  font-weight: normal;
  color: #FF9;
}

#search_results {
z-index: 1;
background-color: #000;
color: #EFFFF8;
padding: 4px;
margin-top: 4px;
height: 310px; 
max-height: 310px; 
overflow: auto;
border: 2px solid #333; 
border-radius: 4px; 
}

#search_results_table {
/* float: left; */
}

#sample_names {
position: absolute;
top: 0;
left: 3000px;
background-color: #323d67;
color: #CEF2F2;
height: auto;
font-family: 'Consolas',monospace;
font-size: 18px;
font-weight: bold;
padding: 4px 8px;
margin-top: 4px;
margin-right: 14px;
overflow: auto;
border: 2px solid #828dB7; 
border-radius: 4px; 
line-height: 1;
}

#shoutbox {
position: relative;
float: left;
background-color: #323d67;
color: #CEF2F2;
height: auto;
font-family: 'Consolas',monospace;
font-size: 14px;
font-weight: bold;
padding: 4px;
margin-top: 8px;
overflow: auto;
border: 2px solid #828dB7; 
line-height: 1;
}


@media screen and (max-height:768px) {
  #search_results {
    max-height:300px; 
  }
}

input[type=button], input[type=text] {
border-radius: 3px;
}

input.bt_large {
height: 26px;
font-family: 'Trebuchet MS', sans-serif;
font-size: 10pt;
font-weight: bold;
}

input[type=text] {
border: 2px solid #444;
background-color: #121E29;
color: #d2ff4d;
font-size: 14pt;
font-weight: normal;
padding: 2px;
}

input[type=checkbox] {
-ms-transform: scale(1.25); /* IE */
-moz-transform: scale(1.25); /* FF */
-webkit-transform: scale(1.25); /* Safari and Chrome */
-o-transform: scale(1.25); /* Opera */
position:relative;
top: 3px;

}

input[type=range] {
position:relative;
top: 0px;
}

#right_top_old {
position: absolute;
top: 0;
right: 0;
margin: 8px 16px;
}

#controls_info {
display: block;
margin-top: 6px;
font-family: 'Trebuchet MS', sans-serif;
font-size: 11pt;
color: #a2df2d;
}

/* START: FULLSCREEN OVERLAY ******************************************************************************* */
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.65);
overflow-x: hidden;
}

.filename:hover {
background-color: #323E49;
height:12px;
}

.overlay-content {
position: relative;
top: 25%;
text-align: center;
margin-top: 30px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
}

.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
/* END: FULLSCREEN OVERLAY ******************************************************************************* */

#play, #pause, #next, #previous {
padding: 0;
height: 30px;
width: 30px;
vertical-align: middle;
}

#controls_mp3 {
margin-top: 2px;
}

#controls_ogg {
margin-top: 2px;
color: #cc9;
}

#mod_num {
color: #cc9; 
line-height: 100%;
}

#controls {
margin-top: 10px;
}

#controls_filename {
display: block;
margin-left: 0px;
margin-top: 10px;
font-family: 'Trebuchet MS', sans-serif;
font-size: 14pt;
color: #d2ff4d;
}

.sel_mod {
  background-color: #339;
}