/*这个网站的CSS极其混乱，实在是没什么参考价值（@Lunch注）*/

/*      
     /  /\         /  /\         /  /\         /  /\              
    /  /::|       /  /::\       /  /::\       /  /::\             
   /  /:|:|      /  /:/\:\     /  /:/\:\     /  /:/\:\            
  /  /:/|:|__   /  /::\ \:\   /  /:/  \:\   /  /::\ \:\           
 /__/:/_|::::\ /__/:/\:\_\:\ /__/:/ \__\:| /__/:/\:\ \:\          
 \__\/  /~~/:/ \__\/  \:\/:/ \  \:\ /  /:/ \  \:\ \:\_\/          
       /  /:/       \__\::/   \  \:\  /:/   \  \:\ \:\            
      /  /:/        /  /:/     \  \:\/:/     \  \:\_\/            
     /__/:/        /__/:/       \__\::/       \  \:\              
     \__\/         \__\/            ~~         \__\/              
      ___                                                         
     /  /\          __                                            
    /  /::\        |  |\                                          
   /  /:/\:\       |  |:|                                         
  /  /::\ \:\      |  |:|                                         
 /__/:/\:\_\:|     |__|:|__                                       
 \  \:\ \:\/:/     /  /::::\                                      
  \  \:\_\::/     /  /:/~~~~                                      
   \  \:\/:/     /__/:/                                           
    \__\::/      \__\/                                            
        ~~                                                        
      ___       ___           ___           ___           ___     
     /  /\     /  /\         /  /\         /  /\         /  /\    
    /  /:/    /  /:/        /  /::|       /  /::\       /  /:/    
   /  /:/    /  /:/        /  /:|:|      /  /:/\:\     /  /:/     
  /  /:/    /  /:/        /  /:/|:|__   /  /:/  \:\   /  /::\ ___ 
 /__/:/    /__/:/     /\ /__/:/ |:| /\ /__/:/ \  \:\ /__/:/\:\  /\
 \  \:\    \  \:\    /:/ \__\/  |:|/:/ \  \:\  \__\/ \__\/  \:\/:/
  \  \:\    \  \:\  /:/      |  |:/:/   \  \:\            \__\::/ 
   \  \:\    \  \:\/:/       |__|::/     \  \:\           /  /:/  
    \  \:\    \  \::/        /__/:/       \  \:\         /__/:/   
     \__\/     \__\/         \__\/         \__\/         \__\/   
*/

/*----------------------------------------------------------------------------
Content - Synthesizer
----------------------------------------------------------------------------*/

#main {
  display: inline-block;
  border: none;
  width: 390px;
  align-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-align: center;
}

#main h1 {
  margin-bottom: 8px;
  margin-top: 0;
  background-color: black;
  color: white;
  cursor: default;
}

#main a {
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  color: black;
  margin-top: 8px;
  transition: background-color 0.25s, color 0.25s;
  padding: 4px;
}

#main a:hover {
  background-color: black;
  color: white;
}

#grids {
  text-align: center;
}

#canvas {
  position: relative;
  border: none;
  cursor: crosshair;
}

.glideCell,
.noteCell {
  border: thin solid black;
  width: 20px;
  height: 10px;
  background-color: white;
  transition: background-color 0.125s, opacity 0.125s;
}

/*控制按钮*/

#transport {
  padding-top: 2px;
  width: 390px;
  height: 30px;
  text-align: center;
}

#transport td {
  width: 130px;
  height: 30px;
  border: none;
  transition: color 0.125s, background-color 0.125s;
  cursor: crosshair;
  color: #c1c1c1;
}

#transport td:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.38);
}

#sliders {
  width: 100%;
  border-collapse: none;
  cursor: crosshair;
  text-align: left;
  table-layout: fixed;
}

#sliders input {
  cursor: crosshair;
}

/*表格内字体定义*/

#sliders p {
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  font-family: whiteversepixel;
  font-size: 14px;
  letter-spacing: -4px;
}

#sliders td {
  height: 30px;
}

.controlbutton {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white;
  opacity: 0.8;
  font-family: whiteversepixel;
  font-size: 14px;
  letter-spacing: -4px;
}

.sliderValue {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: whiteversepixel;
  font-size: 1px;
}

input[type='text'] {
  color: rgba(255, 255, 255, 0.8);
  font-family: whiteversepixel;
  font-size: 14px;
  letter-spacing: -4px;
  height: 30px;
  width: 30px;
  border: none;
  background: none;
}

input[type='text']:focus {
  outline: none;
}

/*滑条*/

input[type='range'] {
  -webkit-appearance: none;
  width: 220px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
}

input[type='range']:focus {
  outline: none;
}

/*滑块*/

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: rgba(229, 229, 229, 0.6);
}

/*单选框*/

.radios {
  height: 30px;
  text-align: left;
}

input[type='radio'] {
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  outline: 0;
  line-height: 20px;
}

input[type='radio']:checked {
  background-color: rgba(229, 229, 229, 0.6);
  color: #000;
}

.float-img {
  position: absolute;
  opacity: 0.3;
  z-index: -1;
}

#bubble {
  left: -166px;
  top: 47px;
}
#instruction {
  display: block;
  /* display:block for javascript operation */
  top: 119px;
  left: 398px;
}
#instructionButton {
  right: -167px;
  top: 46px;
}
#respondButton {
  left: -167px;
  top: 46px;
}
#addTrackButton {
  left: -167px;
  top: 130px;
}
#backToMainButton {
  left: -167px;
  top: 88px;
}
#goodnightMoonButton {
  left: -167px;
  top: 256px;
}
.text-button {
  position: absolute;
  width: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white;
  opacity: 0.8;
  font-family: whiteversepixel;
  font-size: 14px;
  letter-spacing: -4px;
  transition: all 0.5s;
}
.text-button:hover {
  cursor: crosshair;
  background-color: rgba(0, 0, 0, 0.38);
  transition: all 0.5s;
}
.text-button:active {
  background-color: rgba(0, 0, 0, 0.89);
  transition: all 0.5s;
}

/*示波器*/

#CRToverlap {
  position: absolute;
  right: 23px;
  top: 7px;
  left: auto;
  bottom: auto;
  opacity: 0.4;
}

#oscilloscope {
  position: absolute;
  right: 23px;
  top: 7px;
}

/*移动端示波器文字*/

#oscilloscopeWord {
  line-height: 12px;
  width: 200px;
  height: 109px;
  font-family: whiteversepixel;
  text-overflow: ellipsis;
  text-align: left;
  color: rgba(104, 125, 193, 1);
  letter-spacing: normal;
  position: absolute;
  right: 21px;
  top: 22px;
}

/*摇滚哥布林*/
.rocker {
  position: absolute;
}

#goblin_body {
  left: 107px;
  bottom: 0px;
}

#goblin_head {
  left: 111px;
  bottom: 16px;
}

#goblin_spear {
  left: 125px;
  bottom: 0px;
}

#goblin2_body {
  left: 165px;
  bottom: 0px;
}

#goblin2_head {
  left: 164px;
  bottom: 16px;
}

#goblin2_spear {
  left: 140px;
  bottom: 0px;
}

#me_head {
  left: 191px;
  bottom: 39px;
}

#me_body {
  left: 191px;
  bottom: 7px;
}

/*矩阵两侧的装饰*/
.note-decoration {
  position: absolute;
  z-index: -1;
  word-spacing: 11px;
  opacity: 0.3;
  color: white;
}
#notePos {
  display: block;
  top: 108px;
  left: 12px;
}

#notePos2 {
  top: 130px;
  left: -12px;
}

/*方块模块*/

.modeTable {
  position: absolute;
  color: white;
  cursor: crosshair;
  table-layout: fixed;
}

.modeTable input {
  cursor: crosshair;
}

.modeTable div {
  color: white;
  opacity: 0.8;
  cursor: crosshair;
  text-align: center;
}

/*音序选择*/

#sequencerTable {
  left: -143px;
  top: 464px;
}

/*调式选择*/

#scaleModeTable {
  left: -143px;
  top: 734px;
}

/*失真选择*/

#distortionTable {
  position: absolute;
  top: 425px;
  color: rgba(255, 255, 255, 0.8);
  cursor: crosshair;
  left: 425px;
  text-align: center;
}

#distortionTable td {
  height: 25px;
}

#distortionTable input {
  cursor: crosshair;
}

#distortionTable div {
  color: white;
  opacity: 0.8;
  cursor: crosshair;
  padding-bottom: 4px;
}

#distortionSlider {
  width: 150px;
}

#distortionInput {
  width: 55px;
  text-align: center;
  height: 21px;
}

#dist3 {
  column-count: 3;
}

#dist2 {
  column-count: 2;
}

/*滑块*/

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  background: rgba(229, 229, 229, 0.6);
}

/*颜色选择*/

#colorSelectBody1 {
  position: absolute;
  top: 15px;
  left: 107px;
}

#colorSelectBody2 {
  position: absolute;
  top: 15px;
  left: 139px;
}

.colorSelectUnit {
  width: 22px;
  height: 22px;
  background: url('../resources/synthesizer/colors.png') no-repeat;
  padding-top: 8px;
}

.colorSelectUnit div {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-top: -6px;
}

.colorSelectUnit:hover {
  filter: brightness(160%);
  -webkit-filter: brightness(160%);
}

.colorSelectUnit:active {
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
}

#colorSelect_1 {
  background: #101010;
}

#colorSelect_2 {
  background: #2e000d;
}

#colorSelect_3 {
  background: #231c4a;
}

#colorSelect_4 {
  background: #050052;
}

#colorSelect_5 {
  background: #003452;
}

#colorSelect_6 {
  background: #002a22;
}

/*钢琴按键*/

#noteKeyContent {
  position: absolute;
  left: -304px;
  bottom: 371px;
}

#noteKeyContent div {
  color: rgba(255, 255, 255, 0.3);
}

.noteKey {
  opacity: 0.3;
  padding: 2px;
  float: left;
}

.noteKey:active {
  opacity: 0.15;
}

.blackKey {
  margin-left: 25px;
  position: absolute;
  float: left;
  z-index: 3;
}

.whiteKey {
  float: left;
  z-index: 2;
}

.whiteKey_1 {
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_1.png) no-repeat;
}

.whiteKey_2 {
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_2.png) no-repeat;
}

.whiteKey_3 {
  padding-right: 2px;
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_3.png) no-repeat;
}

.blackKey_1 {
  position: absolute;
  width: 18px;
  height: 63px;
  background: url(../resources/synthesizer/k_b.png) no-repeat;
}

.whiteKey_1:hover {
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_1_a.png) no-repeat;
}

.whiteKey_2:hover {
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_2_a.png) no-repeat;
}

.whiteKey_3:hover {
  padding-right: 2px;
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_3_a.png) no-repeat;
}

.whiteKey_4 {
  padding-right: 2px;
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_4.png) no-repeat;
}

.whiteKey_4:hover {
  padding-right: 2px;
  width: 32px;
  height: 98px;
  background: url(../resources/synthesizer/k_w_4_a.png) no-repeat;
}

.blackKey_1:hover {
  width: 18px;
  height: 63px;
  background: url(../resources/synthesizer/k_b_a.png) no-repeat;
}

#noteKey_Cs {
  left: 0px;
}

#noteKey_Eb {
  left: 36px;
}

#noteKey_Fs {
  left: 108px;
}

#noteKey_Ab {
  left: 144px;
}

#noteKey_Bb {
  left: 180px;
}

#keyTip1 {
  position: absolute;
  left: 29px;
  top: 44px;
  letter-spacing: 22px;
  z-index: -1;
}

#keyTip2 {
  position: absolute;
  left: 137px;
  top: 44px;
  letter-spacing: 22px;
  z-index: -1;
}

#keyTip3 {
  position: absolute;
  left: 11px;
  bottom: 10px;
  letter-spacing: 22px;
  z-index: -1;
}

/*钢琴八度*/

.octave {
  position: absolute;
  top: -30px;
  width: 45px;
  height: 25px;
}

.octave:hover {
  background-color: rgba(0, 0, 0, 0.38);
}

#octaveUp {
  right: 0px;
}

#octaveDisplay {
  position: absolute;
  top: -30px;
  left: 122px;
}