<input type="checkbox" id="onoff" checked />
<div id="notice">
This replica of the Casio SA-20 has sound, but it only works on Google Chrome or Chromium-based browsers.
</div>
<div id="keyboard">
<div class="speaker" id="speaker-left">
<div class="circle"></div>
<div class="bar bar-top"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar bar-mid"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar bar-bottom"></div>
</div>
<div class="speaker" id="speaker-right">
<div class="circle"></div>
<div class="bar bar-top"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar bar-mid"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar bar-bottom"></div>
</div>
<div class="nav" id="nav-top">
<div id="casio">CASIO<span>SA-2O</span></div>
<div class="bluetext" id="onehundred">100<span>sound</span></div>
<div class="bluetext" id="tonebank">
<span class="larger">T</span><span>O</span
><span class="together">NE</span><span class="larger">B</span
><span>A</span><span class="together">NK</span>
</div>
<ol>
<li>Piano</li>
<li>Elec Piano</li>
<li>Honkey-Tonk Piano</li>
<li>Harpsichord</li>
<li>Jazz Organ</li>
<li>Elec Organ</li>
<li>Pipe Organ</li>
<li>Church Organ</li>
<li>Street Organ</li>
<li>Accordion</li>
<li>Brass Ens</li>
<li>Warm Brass</li>
<li>Trumpet</li>
<li>Tuba</li>
<li>Brass Hit</li>
<li>Wind Ens</li>
<li>English Horn</li>
<li>Oboe</li>
<li>Bassoon</li>
<li>Clarinet</li>
<li>Samba Whistle</li>
<li>Whistle</li>
<li>Quena</li>
<li>Flute</li>
<li>Flute Vib</li>
<li>Ocarina</li>
<li>Bagpipe</li>
<li>Harmonica</li>
<li>Chorus</li>
<li>Brass-Strings</li>
<li>Strings</li>
<li>Warm Strings</li>
<li>Violin</li>
<li>Violin-Piano</li>
<li>Cello</li>
<li>Elec Guitar</li>
<li>Jazz Guitar</li>
<li>Mute Guitar</li>
<li>Metal Guitar</li>
<li>Blap Bass</li>
<li>Elec Bass</li>
<li>Mood Bass</li>
<li>Snare Bass</li>
<li>Ukulele</li>
<li>Banjo</li>
<li>Sitar</li>
<li>Mandolin</li>
<li>Harp</li>
<li>Taishokoto</li>
<li>Shamisen</li>
<li>Synth-Piano</li>
<li>Synth-Celesta</li>
<li>Synth-Claw</li>
<li>Synth-Accordion</li>
<li>Synth-Brass</li>
<li>Synth-Heed</li>
<li>Synth-Lead</li>
<li>Synth-Strings</li>
<li>Synth-Guitar</li>
<li>Synth-Bass</li>
<li>Glass Harmonica</li>
<li>Fantasy</li>
<li>WAW Voice</li>
<li>Twinkle Echo</li>
<li>Metal Lead</li>
<li>Cathedral</li>
<li>Cosmic Dance</li>
<li>Plunk Extend</li>
<li>Pop Lead</li>
<li>Pearl Drop</li>
<li>Airplane</li>
<li>Ambulance</li>
<li>Insect</li>
<li>Emergency Alarm</li>
<li>Laser Beam</li>
<li>Cosmic Sound</li>
<li>Telephone</li>
<li>Car Horn</li>
<li>Computer Sound</li>
<li>Typewriter</li>
<li>Vibraphone</li>
<li>Marimba</li>
<li>Church Bells</li>
<li>Bells</li>
<li>Gamelan</li>
<li>Afro Percussion</li>
<li>Ethnic Percussion</li>
<li>Sample Percussion</li>
<li>Matsuri</li>
<li>Wadaiko</li>
<li>Triangle</li>
<li>Conga/Agogo</li>
<li>Cowbell/Clave</li>
<li>Tom</li>
<li>Rock Drum</li>
<li>Swing Drum</li>
<li>Bass/Piano</li>
<li>Bass/Trumpet</li>
<li>Piano/Flute</li>
<li>Strings/Oboe</li>
</ol>
<div class="text" id="powertext">POWER</div>
<div class="text" id="offontext">OFF _ _ ON</div>
<div class="text" id="pulse">
<span>P</span>ulse<span>C</span>ode<span>M</span>odulation
</div>
<div class="text" id="volume">Volume</div>
<div class="text" id="rythm">RYTHM/SUPER ACCOMPANIMENT</div>
<div class="text" id="volume-symbols"></div>
<div class="text" id="demo">DEMO</div>
<div class="text" id="tone">TONE</div>
<div id="tones">
<div class="tone">0</div>
<div class="tone">1</div>
<div class="tone">2</div>
<div class="tone">3</div>
<div class="tone">4</div>
<div class="tone">5</div>
<div class="tone">6</div>
<div class="tone">7</div>
<div class="tone">8</div>
<div class="tone">9</div>
</div>
<div class="text" id="tempo">TEMPO</div>
<div class="text" id="select">SELECT</div>
<div class="text" id="stop">STOP</div>
</div>
<div class="nav" id="nav-mid" style="color:#e0e0e0;">
<div id="super">«SUPER ACCOMPANIMENT»</div>
<div id="sa-rythm">RHYTHM</div>
<div id="green-lines"></div>
<div id="white-lines"></div>
<div id="line1">
<div id="sa-rock">rock</div>
<div id="sa-pops">pops</div>
<div id="sa-funk">funk</div>
<div id="sa-slow-rock">slow-rock</div>
<div id="sa-latin">latin</div>
<div id="sa-jungle">jungle</div>
<div id="sa-orient">orient</div>
<div id="sa-bagpiper">bagpiper</div>
<div id="sa-fanfare">fanfare</div>
<div id="sa-childs-play">childs-play</div>
<div id="sa-classical">classical</div>
<div id="sa-computer">computer</div>
<div id="sa-new-age-music">new-age-music</div>
</div>
<div id="line2">
<div id="sa-rock1">rock1</div>
<div id="sa-rock2">rock2</div>
<div id="sa-16-beat-1">16-beat-1</div>
<div id="sa-16-beat-2">16-beat-2</div>
<div id="sa-disco-1">disco-1</div>
<div id="sa-disco-2">disco-2</div>
<div id="sa-disco-3">disco-3</div>
<div id="sa-pops-1">pops-1</div>
<div id="sa-pops-2">pops-2</div>
<div id="sa-pops-3">pops-3</div>
<div id="sa-slow-rocK">slow-rocK</div>
<div id="sa-swing">swing</div>
<div id="sa-march">march</div>
<div id="sa-reggae">reggae</div>
<div id="sa-tango">tango</div>
<div id="sa-samba">samba</div>
<div id="sa-bossa-nova">bossa-nova</div>
<div id="sa-beguine">beguine</div>
<div id="sa-waltz">waltz</div>
</div>
</div>
<div id="button-section">
<label class="onoff" for="onoff">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
<div id="blue-buttons">
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
</div>
<div id="other-buttons">
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
<div class="holder">
<label class="button"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
</div>
</div>
</div>
<div id="keys">
<label tabindex="1" class="key key1"></label>
<label tabindex="2" class="key key2"></label>
<label tabindex="3" class="key key3"></label>
<label tabindex="4" class="key key4"></label>
<label tabindex="5" class="key key5"></label>
<label tabindex="6" class="key key6"></label>
<label tabindex="7" class="key key7"></label>
<label tabindex="8" class="key key8"></label>
<label tabindex="9" class="key key9"></label>
<label tabindex="10" class="key key10"></label>
<label tabindex="11" class="key key11"></label>
<label tabindex="12" class="key key12"></label>
<label tabindex="13" class="key key13"></label>
<label tabindex="14" class="key key14"></label>
<label tabindex="15" class="key key15"></label>
<label tabindex="16" class="key key16"></label>
<label tabindex="17" class="key key17"></label>
<label tabindex="18" class="key key18"></label>
<label tabindex="19" class="key key19"></label>
<label tabindex="20" class="key key20"></label>
<label tabindex="21" class="key key21"></label>
<label tabindex="22" class="key key22"></label>
<label tabindex="23" class="key key23"></label>
<label tabindex="24" class="key key24"></label>
<label tabindex="25" class="key key25"></label>
<label tabindex="26" class="key key26"></label>
<label tabindex="27" class="key key27"></label>
<label tabindex="28" class="key key28"></label>
<label tabindex="29" class="key key29"></label>
<label tabindex="30" class="key key30"></label>
<label tabindex="31" class="key key31"></label>
<div class="sound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-key.mp3" />
</div>
<div id="keysounds">
<div class="keysound">
<object data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-0.mp3"></object>
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-2.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-4.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-6.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-7.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-9.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-11.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-12.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-14.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-16.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-18.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-19.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-21.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-23.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-24.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-26.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-28.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-30.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-31.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-1.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-3.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-5.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-8.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-10.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-13.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-15.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-17.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-20.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-22.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-25.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-27.mp3" />
</div>
<div class="keysound">
<embed src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1506195/keyboard-32-29.mp3" />
</div>
</div>
</div>
</div>@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Orbitron:700|Play|Squada+One|Kanit:900");
html,
body {
font-family: arial, verdana, sans-serif;
}
#notice {
font-size: 10px;
}
input,
.sound,
.keysound,
.keysound object {
display: none;
position: absolute;
width: 0;
top: -10000px;
top: -100vmax;
}
#keyboard {
width: 1000px;
height: 287px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
overflow: hidden;
}
#keyboard::after {
content: "";
z-index: -1;
position: absolute;
top: 2px;
left: 6px;
bottom: 0px;
right: 6px;
background: #363534;
box-shadow: inset 0 0 8px 2px black, inset 0 0 11px white, inset 0 0 3px black;
}
#keyboard .speaker {
position: absolute;
width: 182px;
height: 100%;
z-index: 3;
}
#keyboard .speaker::before,
#keyboard .speaker::after {
content: "";
position: absolute;
z-index: -1;
position: absolute;
top: 5px;
left: 2px;
right: 2px;
height: 70px;
background: #363534;
}
#keyboard .speaker::after {
top: auto;
bottom: 5px;
height: 170px;
}
#keyboard .speaker .circle {
position: absolute;
width: 130px;
height: 130px;
background: rgba(0, 0, 0, 0.4);
left: 26px;
bottom: 26px;
border-radius: 130px;
}
#keyboard .speaker .circle::before,
#keyboard .speaker .circle::after {
content: "";
position: absolute;
left: 35px;
top: 0;
width: 8px;
height: 100%;
background: #323232;
}
#keyboard .speaker .circle::after {
left: auto;
right: 35px;
}
#keyboard .speaker .bar {
position: relative;
width: 182px;
height: 11px;
background: #434241;
border-radius: 2px;
margin-top: 2px;
box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e,
inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827,
2px 1px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker .bar:nth-child(n + 7) {
box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e,
inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827,
2px 0px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker .bar.bar-top {
height: 13px;
margin-top: 0;
border-radius: 20px 4px 4px 4px;
}
#keyboard .speaker .bar.bar-mid {
height: 12px;
margin-top: 27px;
}
#keyboard .speaker .bar.bar-bottom {
height: 13px;
border-radius: 4px 4px 4px 20px;
}
#keyboard .speaker#speaker-right {
right: 0;
}
#keyboard .speaker#speaker-right .bar {
box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e,
inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827,
-2px 1px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker#speaker-right .bar:nth-child(n + 7) {
box-shadow: inset 0 1px 1px #6a6866, inset 0 -1px 1px #0f0f0e,
inset 3px 3px 1px #5d5b5a, inset 0 -3px 3px #292827,
-2px 0px 2px rgba(0, 0, 0, 0.5);
}
#keyboard .speaker#speaker-right .bar.bar-top {
height: 13px;
border-radius: 4px 20px 4px 4px;
}
#keyboard .speaker#speaker-right .bar.bar-bottom {
height: 13px;
border-radius: 4px 4px 20px 4px;
}
#keyboard .nav {
position: relative;
left: 184px;
background: #323232;
width: 632px;
border-radius: 2px;
box-shadow: inset 1px 1px 1px #727272, inset 0 -2px 1px #181818,
0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 2;
}
#keyboard .nav#nav-top {
border-radius: 2px 2px 1px 1px;
height: 78px;
}
#keyboard .nav#nav-top .text {
position: absolute;
font-weight: bold;
opacity: 0.8;
font-size: 5.5px;
}
#keyboard .nav#nav-top #casio {
position: absolute;
left: 20px;
top: 8px;
font-family: Orbitron;
font-weight: bold;
color: #abb8c9;
opacity: 0.8;
font-size: 14px;
}
#keyboard .nav#nav-top #casio span {
font-weight: lighter;
margin-left: 6px;
font-family: play;
}
#keyboard .nav#nav-top .bluetext {
position: absolute;
font-family: kanit, play, arial, sans-serif;
color: #6688cc;
opacity: 0.66;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
left: 20px;
font-size: 18px;
}
#keyboard .nav#nav-top .bluetext#onehundred {
top: 19px;
}
#keyboard .nav#nav-top .bluetext#onehundred span {
font-size: 0.7em;
margin-left: 5px;
}
#keyboard .nav#nav-top .bluetext#tonebank {
top: 30px;
}
#keyboard .nav#nav-top .bluetext#tonebank span.together {
letter-spacing: -5px;
margin-right: 6px;
}
#keyboard .nav#nav-top .bluetext#tonebank span.larger {
font-size: 1.2em;
}
#keyboard .nav#nav-top ol {
top: 8px;
right: 8px;
position: absolute;
list-style: none;
padding-left: 0;
margin: 0;
padding: 0;
color: #abb8c9;
counter-reset: modes 0;
font-size: 3.25px;
font-weight: bold;
column-count: 10;
opacity: 0.8;
text-transform: uppercase;
}
#keyboard .nav#nav-top ol li::before {
content: counter(modes, decimal-leading-zero);
color: #6688cc;
margin-right: 2px;
}
#keyboard .nav#nav-top ol li::after {
counter-increment: modes;
content: "";
}
#keyboard .nav#nav-top #powertext {
color: #eebb66;
bottom: 12px;
left: 8px;
}
#keyboard .nav#nav-top #offontext {
color: #c0c0c0;
font-size: 5px;
bottom: 4px;
left: 6px;
}
#keyboard .nav#nav-top #pulse {
color: #c0c0c0;
bottom: 12px;
left: 111px;
}
#keyboard .nav#nav-top #pulse span {
color: #eebb66;
font-size: 6px;
font-weight: bold;
margin-left: 2px;
}
#keyboard .nav#nav-top #volume,
#keyboard .nav#nav-top #rythm,
#keyboard .nav#nav-top #tone {
color: #eebb66;
bottom: 12px;
left: 195px;
text-transform: uppercase;
}
#keyboard .nav#nav-top #rythm {
left: 275px;
font-size: 5.5px;
}
#keyboard .nav#nav-top #tone {
left: 499px;
}
#keyboard .nav#nav-top #volume-symbols {
position: absolute;
bottom: 4px;
left: 192px;
color: #c0c0c0;
opacity: 0.8;
font-size: 5px;
}
#keyboard .nav#nav-top #volume-symbols::before {
content: "▼";
}
#keyboard .nav#nav-top #volume-symbols::after {
content: "▲";
padding-left: 20px;
}
#keyboard .nav#nav-top #demo {
position: absolute;
bottom: 10px;
left: 238px;
display: inline-block;
font-size: 5.5px;
background: #eebb66;
font-weight: bold;
padding: 2px 1.5px;
border-radius: 1px;
opacity: 0.8;
}
#keyboard .nav#nav-top #tones {
position: absolute;
right: 0;
bottom: 4px;
width: 250px;
display: flex;
}
#keyboard .nav#nav-top #tones .tone {
text-align: center;
-webkit-flex: 1;
flex: 1;
color: #c0c0c0;
font-size: 5px;
opacity: 0.8;
}
#keyboard .nav#nav-top #tempo {
color: #c0c0c0;
font-size: 5px;
bottom: 4px;
left: 274px;
}
#keyboard .nav#nav-top #tempo::before {
margin-right: 2px;
display: inline-block;
content: "▼";
}
#keyboard .nav#nav-top #tempo::after {
content: "▲";
display: inline-block;
margin-left: 2px;
}
#keyboard .nav#nav-top #select,
#keyboard .nav#nav-top #stop {
bottom: 4px;
left: 317px;
color: #c0c0c0;
}
#keyboard .nav#nav-top #stop {
left: 346px;
}
#keyboard .nav#nav-mid {
margin-top: 27px;
height: 30px;
}
#keyboard .nav#nav-mid #super,
#keyboard .nav#nav-mid #sa-rythm {
position: absolute;
color: #44ccaa;
font-family: "Squada One", Play, arial, sans-serif;
font-size: 10px;
opacity: 0.8;
top: 6px;
left: 12px;
}
#keyboard .nav#nav-mid #sa-rythm {
color: #c0c0c0;
left: auto;
right: 12px;
font-family: Arial;
font-size: 7px;
top: auto;
bottom: 8px;
}
#keyboard .nav#nav-mid #green-lines,
#keyboard .nav#nav-mid #white-lines {
position: absolute;
top: 12px;
left: 5px;
width: 0;
height: 7px;
border-left: 1px solid #44ccaa;
opacity: 0.6;
}
#keyboard .nav#nav-mid #green-lines::before,
#keyboard .nav#nav-mid #green-lines::after,
#keyboard .nav#nav-mid #white-lines::before,
#keyboard .nav#nav-mid #white-lines::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 0;
border-top: 1px solid #44ccaa;
}
#keyboard .nav#nav-mid #green-lines::after,
#keyboard .nav#nav-mid #white-lines::after {
top: auto;
bottom: 0;
width: 560px;
}
#keyboard .nav#nav-mid #white-lines {
left: auto;
right: 5px;
height: 7px;
top: 18px;
border-left: 1px solid #c0c0c0;
}
#keyboard .nav#nav-mid #white-lines::before,
#keyboard .nav#nav-mid #white-lines::after {
border-top: 1px solid #c0c0c0;
left: auto;
right: 0px;
}
#keyboard .nav#nav-mid #white-lines::after {
width: 620px;
}
#keyboard .nav#nav-mid #line1,
#keyboard .nav#nav-mid #line2 {
font-size: 4px;
color: #44ccaa;
position: absolute;
bottom: 9px;
color: #44ccaa;
opacity: 0.8;
width: 600px;
height: 0;
}
#keyboard .nav#nav-mid #line1 div,
#keyboard .nav#nav-mid #line2 div {
position: absolute;
top: -4px;
line-height: 4px;
display: inline-block;
background: #323232;
text-transform: uppercase;
transform: translate(-50%, 0);
padding: 0px 2px;
white-space: nowrap;
}
#keyboard .nav#nav-mid #line2 {
bottom: 4px;
color: #c0c0c0;
}
#keyboard .nav#nav-mid #line2 div {
top: -3px;
}
#keyboard .nav#nav-mid #sa-rock {
left: 4.9%;
}
#keyboard .nav#nav-mid #sa-pops {
left: 11%;
}
#keyboard .nav#nav-mid #sa-funk {
left: 16.8%;
}
#keyboard .nav#nav-mid #sa-slow-rock {
left: 27%;
}
#keyboard .nav#nav-mid #sa-latin {
left: 33.4%;
}
#keyboard .nav#nav-mid #sa-jungle {
left: 43.4%;
}
#keyboard .nav#nav-mid #sa-orient {
left: 49.6%;
}
#keyboard .nav#nav-mid #sa-bagpiper {
left: 56.1%;
}
#keyboard .nav#nav-mid #sa-fanfare {
left: 66%;
}
#keyboard .nav#nav-mid #sa-childs-play {
left: 72.3%;
}
#keyboard .nav#nav-mid #sa-classical {
left: 82.5%;
}
#keyboard .nav#nav-mid #sa-computer {
left: 88.4%;
}
#keyboard .nav#nav-mid #sa-new-age-music {
left: 94.7%;
}
#keyboard .nav#nav-mid #sa-rock1 {
left: 12px;
}
#keyboard .nav#nav-mid #sa-rock2 {
left: 8%;
}
#keyboard .nav#nav-mid #sa-16-beat-1 {
left: 13.8%;
}
#keyboard .nav#nav-mid #sa-16-beat-2 {
left: 19.6%;
}
#keyboard .nav#nav-mid #sa-disco-1 {
left: 24%;
}
#keyboard .nav#nav-mid #sa-disco-2 {
left: 30.2%;
}
#keyboard .nav#nav-mid #sa-disco-3 {
left: 36.6%;
}
#keyboard .nav#nav-mid #sa-pops-1 {
left: 40.4%;
}
#keyboard .nav#nav-mid #sa-pops-2 {
left: 46.6%;
}
#keyboard .nav#nav-mid #sa-pops-3 {
left: 52.6%;
}
#keyboard .nav#nav-mid #sa-slow-rocK {
left: 58.6%;
}
#keyboard .nav#nav-mid #sa-swing {
left: 62.9%;
}
#keyboard .nav#nav-mid #sa-march {
left: 69%;
}
#keyboard .nav#nav-mid #sa-reggae {
left: 75.4%;
}
#keyboard .nav#nav-mid #sa-tango {
left: 79.3%;
}
#keyboard .nav#nav-mid #sa-samba {
left: 85.5%;
}
#keyboard .nav#nav-mid #sa-bossa-nova {
left: 91.8%;
}
#keyboard .nav#nav-mid #sa-beguine {
left: 98%;
}
#keyboard .nav#nav-mid #sa-waltz {
left: 102.2%;
}
#keyboard #keys {
position: relative;
left: 184px;
background: #323232;
width: 632px;
border-radius: 2px;
box-shadow: inset 1px 1px 1px #727272, inset 0 -2px 1px #181818,
0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 2;
height: 145px;
border-radius: 0;
display: flex;
z-index: 1;
}
#keyboard #keys .key {
display: block;
-webkit-flex: 1;
flex: 1;
margin-right: 1px;
border-radius: 0px 0px 3px 3px;
background: #fbfaf5;
box-shadow: inset 0px -2px 2px 0px #c1b163, inset 0px -13px 0px -7px white,
inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 #ded6ac,
0 0 1px 0 #ded6ac;
transition: all 0.25s;
}
#keyboard #keys .key:hover {
cursor: pointer;
}
#keyboard #keys .key:active {
box-shadow: inset 0px -1px 3px 0px #c1b163, inset 0px -9px 0px -3px white,
inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 #ded6ac,
0 0 1px 0 #ded6ac;
}
#keyboard #keys .key:last-child {
margin-right: 0;
}
#keyboard #keys .key:nth-child(n + 20) {
position: absolute;
top: 0;
height: 85px;
width: 18px;
background: #1e1e1e;
border-radius: 0 0 3px 3px;
box-shadow: none;
transform: translate(-50%, 0);
box-shadow: inset 0 -5px 1px black,
inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 black,
0 0 1px 0px black;
}
#keyboard #keys .key:nth-child(n + 20):active {
box-shadow: inset 0 -1px 1px 0 black,
inset 2px 5px 3px rgba(255, 255, 255, 0.25), inset 0px 3px 0 black,
0 0 1px 0px black;
}
#keyboard #keys .key:nth-child(20) {
left: 4.7%;
}
#keyboard #keys .key:nth-child(21) {
left: 10.4%;
}
#keyboard #keys .key:nth-child(22) {
left: 16%;
}
#keyboard #keys .key:nth-child(23) {
left: 25.8%;
}
#keyboard #keys .key:nth-child(24) {
left: 31.8%;
}
#keyboard #keys .key:nth-child(25) {
left: 41.3%;
}
#keyboard #keys .key:nth-child(26) {
left: 47.2%;
}
#keyboard #keys .key:nth-child(27) {
left: 53.3%;
}
#keyboard #keys .key:nth-child(28) {
left: 62.6%;
}
#keyboard #keys .key:nth-child(29) {
left: 68.6%;
}
#keyboard #keys .key:nth-child(30) {
left: 78.4%;
}
#keyboard #keys .key:nth-child(31) {
left: 84%;
}
#keyboard #keys .key:nth-child(32) {
left: 90%;
}
#keyboard #button-section {
position: absolute;
top: 78px;
left: 184px;
width: 632px;
height: 25px;
z-index: 1;
}
#keyboard #button-section .onoff {
position: absolute;
top: 4px;
bottom: 1px;
left: 5px;
background: #c0c0c0;
width: 30px;
overflow: hidden;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.15s;
}
#keyboard #button-section .onoff .line {
position: relative;
float: left;
width: 2px;
height: 100%;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(0, 0, 0, 0.2),
inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
#keyboard #button-section .onoff .line:nth-child(n + 7) {
float: right;
}
#keyboard #button-section .button {
display: block;
width: 8px;
height: 21px;
background: #6688cc;
margin: auto auto;
margin-top: 4px;
box-shadow: inset 0 -1px 1px black,
inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset 0px 0px 0 black,
0 0 1px 0px black, 1px 1px 1px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
#keyboard #button-section .button:active {
box-shadow: inset 0 -1px 1px black,
inset 1px 1px 2px rgba(255, 255, 255, 0.25), inset 0px 0px 0 black,
0 0 1px 0px black, 0px 0px 1px rgba(0, 0, 0, 0.1);
}
#keyboard #button-section #blue-buttons {
position: absolute;
right: 0;
width: 250px;
height: 100%;
display: flex;
}
#keyboard #button-section #blue-buttons .holder {
-webkit-flex: 1;
flex: 1;
}
#keyboard #button-section #other-buttons {
position: absolute;
right: 267px;
width: 183px;
height: 100%;
display: flex;
}
#keyboard #button-section #other-buttons .holder {
-webkit-flex: 1;
flex: 1;
}
#keyboard #button-section #other-buttons .holder .button {
background: #eebb66;
}
#keyboard #button-section #other-buttons .holder:nth-child(n + 4) .button {
background: #44ccaa;
}
#keyboard #button-section #other-buttons .holder:nth-child(3),
#keyboard #button-section #other-buttons .holder:nth-child(2) {
margin-right: 4px;
}
@media all and (max-width: 1000px) {
#keyboard {
transform: translate(-50%, -50%) scale(0.6);
}
}
#onoff:checked ~ #keyboard .onoff {
left: 9px;
}
#onoff:checked ~ #keyboard #button-section label:active ~ .sound {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(1):active
~ #keysounds
.keysound:nth-child(1),
#onoff:checked
~ #keyboard
#keys
label:nth-child(1):active
~ #keysounds
.keysound:nth-child(1)
object {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(2):active
~ #keysounds
.keysound:nth-child(2),
#onoff:checked
~ #keyboard
#keys
label:nth-child(2):active
~ #keysounds
.keysound:nth-child(2)
object {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(3):active
~ #keysounds
.keysound:nth-child(3)
object {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(4):active
~ #keysounds
.keysound:nth-child(4) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(5):active
~ #keysounds
.keysound:nth-child(5) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(6):active
~ #keysounds
.keysound:nth-child(6) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(7):active
~ #keysounds
.keysound:nth-child(7) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(8):active
~ #keysounds
.keysound:nth-child(8) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(9):active
~ #keysounds
.keysound:nth-child(9) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(10):active
~ #keysounds
.keysound:nth-child(10) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(11):active
~ #keysounds
.keysound:nth-child(11) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(12):active
~ #keysounds
.keysound:nth-child(12) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(13):active
~ #keysounds
.keysound:nth-child(13) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(14):active
~ #keysounds
.keysound:nth-child(14) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(15):active
~ #keysounds
.keysound:nth-child(15) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(16):active
~ #keysounds
.keysound:nth-child(16) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(17):active
~ #keysounds
.keysound:nth-child(17) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(18):active
~ #keysounds
.keysound:nth-child(18) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(19):active
~ #keysounds
.keysound:nth-child(19) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(20):active
~ #keysounds
.keysound:nth-child(20) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(21):active
~ #keysounds
.keysound:nth-child(21) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(22):active
~ #keysounds
.keysound:nth-child(22) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(23):active
~ #keysounds
.keysound:nth-child(23) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(24):active
~ #keysounds
.keysound:nth-child(24) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(25):active
~ #keysounds
.keysound:nth-child(25) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(26):active
~ #keysounds
.keysound:nth-child(26) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(27):active
~ #keysounds
.keysound:nth-child(27) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(28):active
~ #keysounds
.keysound:nth-child(28) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(29):active
~ #keysounds
.keysound:nth-child(29) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(30):active
~ #keysounds
.keysound:nth-child(30) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(31):active
~ #keysounds
.keysound:nth-child(31) {
display: block;
}
#onoff:checked
~ #keyboard
#keys
label:nth-child(32):active
~ #keysounds
.keysound:nth-child(32) {
display: block;
}
#onoff:not(:checked) ~ #keyboard label:active ~ .sound {
display: block;
}
@media all and (max-width: 600px) {
#keyboard {
transform: translate(-50%, -50%) scale(0.4);
}
}
@media all and (max-width: 414px) {
#keyboard {
transform: translate(-50%, -50%) scale(0.35);
}
}
/*focus*/
#onoff:checked~#keyboard #keys label:nth-child(1):focus~#keysounds .keysound:nth-child(1),
#onoff:checked~#keyboard #keys label:nth-child(1):focus~#keysounds .keysound:nth-child(1) object {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(2):focus~#keysounds .keysound:nth-child(2),
#onoff:checked~#keyboard #keys label:nth-child(2):focus~#keysounds .keysound:nth-child(2) object {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(3):focus~#keysounds .keysound:nth-child(3) object {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(4):focus~#keysounds .keysound:nth-child(4) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(5):focus~#keysounds .keysound:nth-child(5) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(6):focus~#keysounds .keysound:nth-child(6) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(7):focus~#keysounds .keysound:nth-child(7) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(8):focus~#keysounds .keysound:nth-child(8) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(9):focus~#keysounds .keysound:nth-child(9) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(10):focus~#keysounds .keysound:nth-child(10) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(11):focus~#keysounds .keysound:nth-child(11) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(12):focus~#keysounds .keysound:nth-child(12) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(13):focus~#keysounds .keysound:nth-child(13) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(14):focus~#keysounds .keysound:nth-child(14) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(15):focus~#keysounds .keysound:nth-child(15) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(16):focus~#keysounds .keysound:nth-child(16) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(17):focus~#keysounds .keysound:nth-child(17) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(18):focus~#keysounds .keysound:nth-child(18) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(19):focus~#keysounds .keysound:nth-child(19) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(20):focus~#keysounds .keysound:nth-child(20) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(21):focus~#keysounds .keysound:nth-child(21) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(22):focus~#keysounds .keysound:nth-child(22) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(23):focus~#keysounds .keysound:nth-child(23) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(24):focus~#keysounds .keysound:nth-child(24) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(25):focus~#keysounds .keysound:nth-child(25) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(26):focus~#keysounds .keysound:nth-child(26) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(27):focus~#keysounds .keysound:nth-child(27) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(28):focus~#keysounds .keysound:nth-child(28) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(29):focus~#keysounds .keysound:nth-child(29) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(30):focus~#keysounds .keysound:nth-child(30) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(31):focus~#keysounds .keysound:nth-child(31) {
display: block;
}
#onoff:checked~#keyboard #keys label:nth-child(32):focus~#keysounds .keysound:nth-child(32) {
display: block;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.