CSS: Keyboard

css-keyboard.markdown

CSS: Keyboard

A functional keyboard using CSS

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<input type="checkbox" id="show-radios"/>
<input type="radio" id="in-0-0" name="g-0"/>
<input type="radio" id="in-0-1" name="g-0"/>
<input type="radio" id="in-0-2" name="g-0"/>
<input type="radio" id="in-0-3" name="g-0"/>
<input type="radio" id="in-0-4" name="g-0"/>
<input type="radio" id="in-0-5" name="g-0"/>
<input type="radio" id="in-0-6" name="g-0"/>
<input type="radio" id="in-0-7" name="g-0"/>
<input type="radio" id="in-0-8" name="g-0"/>
<input type="radio" id="in-0-9" name="g-0"/>
<input type="radio" id="in-0-10" name="g-0"/>
<input type="radio" id="in-0-11" name="g-0"/>
<input type="radio" id="in-0-12" name="g-0"/>
<input type="radio" id="in-0-13" name="g-0"/>
<input type="radio" id="in-0-14" name="g-0"/>
<input type="radio" id="in-0-15" name="g-0"/>
<input type="radio" id="in-0-16" name="g-0"/>
<input type="radio" id="in-0-17" name="g-0"/>
<input type="radio" id="in-0-18" name="g-0"/>
<input type="radio" id="in-0-19" name="g-0"/>
<input type="radio" id="in-0-20" name="g-0"/>
<input type="radio" id="in-0-21" name="g-0"/>
<input type="radio" id="in-0-22" name="g-0"/>
<input type="radio" id="in-0-23" name="g-0"/>
<input type="radio" id="in-0-24" name="g-0"/>
<input type="radio" id="in-0-25" name="g-0"/>
<input type="radio" id="in-0-26" name="g-0"/>
<input type="radio" id="in-0-27" name="g-0"/>
<input type="radio" id="in-0-28" name="g-0"/>
<input type="radio" id="in-0-29" name="g-0"/>
<input type="radio" id="in-0-30" name="g-0"/>
<input type="radio" id="in-0-31" name="g-0"/>
<input type="radio" id="in-0-32" name="g-0"/>
<input type="radio" id="in-0-33" name="g-0"/>
<input type="radio" id="in-0-34" name="g-0"/>
<input type="radio" id="in-0-35" name="g-0"/>
<input type="radio" id="in-0-36" name="g-0"/>
<input type="radio" id="in-0-37" name="g-0"/>
<input type="radio" id="in-0-38" name="g-0"/>
<input type="radio" id="in-0-39" name="g-0"/>
<input type="radio" id="in-0-40" name="g-0"/>
<input type="radio" id="in-0-41" name="g-0"/>
<input type="radio" id="in-0-42" name="g-0"/>
<input type="radio" id="in-0-43" name="g-0"/>
<input type="radio" id="in-0-44" name="g-0"/>
<input type="radio" id="in-0-45" name="g-0"/>
<input type="radio" id="in-0-46" name="g-0"/>
<input type="checkbox" id="shift-0-shift"/>
<input type="radio" id="in-1-delete" name="g-0" checked="checked"/>
<input type="radio" id="in-1-0" name="g-1"/>
<input type="radio" id="in-1-1" name="g-1"/>
<input type="radio" id="in-1-2" name="g-1"/>
<input type="radio" id="in-1-3" name="g-1"/>
<input type="radio" id="in-1-4" name="g-1"/>
<input type="radio" id="in-1-5" name="g-1"/>
<input type="radio" id="in-1-6" name="g-1"/>
<input type="radio" id="in-1-7" name="g-1"/>
<input type="radio" id="in-1-8" name="g-1"/>
<input type="radio" id="in-1-9" name="g-1"/>
<input type="radio" id="in-1-10" name="g-1"/>
<input type="radio" id="in-1-11" name="g-1"/>
<input type="radio" id="in-1-12" name="g-1"/>
<input type="radio" id="in-1-13" name="g-1"/>
<input type="radio" id="in-1-14" name="g-1"/>
<input type="radio" id="in-1-15" name="g-1"/>
<input type="radio" id="in-1-16" name="g-1"/>
<input type="radio" id="in-1-17" name="g-1"/>
<input type="radio" id="in-1-18" name="g-1"/>
<input type="radio" id="in-1-19" name="g-1"/>
<input type="radio" id="in-1-20" name="g-1"/>
<input type="radio" id="in-1-21" name="g-1"/>
<input type="radio" id="in-1-22" name="g-1"/>
<input type="radio" id="in-1-23" name="g-1"/>
<input type="radio" id="in-1-24" name="g-1"/>
<input type="radio" id="in-1-25" name="g-1"/>
<input type="radio" id="in-1-26" name="g-1"/>
<input type="radio" id="in-1-27" name="g-1"/>
<input type="radio" id="in-1-28" name="g-1"/>
<input type="radio" id="in-1-29" name="g-1"/>
<input type="radio" id="in-1-30" name="g-1"/>
<input type="radio" id="in-1-31" name="g-1"/>
<input type="radio" id="in-1-32" name="g-1"/>
<input type="radio" id="in-1-33" name="g-1"/>
<input type="radio" id="in-1-34" name="g-1"/>
<input type="radio" id="in-1-35" name="g-1"/>
<input type="radio" id="in-1-36" name="g-1"/>
<input type="radio" id="in-1-37" name="g-1"/>
<input type="radio" id="in-1-38" name="g-1"/>
<input type="radio" id="in-1-39" name="g-1"/>
<input type="radio" id="in-1-40" name="g-1"/>
<input type="radio" id="in-1-41" name="g-1"/>
<input type="radio" id="in-1-42" name="g-1"/>
<input type="radio" id="in-1-43" name="g-1"/>
<input type="radio" id="in-1-44" name="g-1"/>
<input type="radio" id="in-1-45" name="g-1"/>
<input type="radio" id="in-1-46" name="g-1"/>
<input type="checkbox" id="shift-1-shift"/>
<input type="radio" id="in-2-delete" name="g-1" checked="checked"/>
<input type="radio" id="in-2-0" name="g-2"/>
<input type="radio" id="in-2-1" name="g-2"/>
<input type="radio" id="in-2-2" name="g-2"/>
<input type="radio" id="in-2-3" name="g-2"/>
<input type="radio" id="in-2-4" name="g-2"/>
<input type="radio" id="in-2-5" name="g-2"/>
<input type="radio" id="in-2-6" name="g-2"/>
<input type="radio" id="in-2-7" name="g-2"/>
<input type="radio" id="in-2-8" name="g-2"/>
<input type="radio" id="in-2-9" name="g-2"/>
<input type="radio" id="in-2-10" name="g-2"/>
<input type="radio" id="in-2-11" name="g-2"/>
<input type="radio" id="in-2-12" name="g-2"/>
<input type="radio" id="in-2-13" name="g-2"/>
<input type="radio" id="in-2-14" name="g-2"/>
<input type="radio" id="in-2-15" name="g-2"/>
<input type="radio" id="in-2-16" name="g-2"/>
<input type="radio" id="in-2-17" name="g-2"/>
<input type="radio" id="in-2-18" name="g-2"/>
<input type="radio" id="in-2-19" name="g-2"/>
<input type="radio" id="in-2-20" name="g-2"/>
<input type="radio" id="in-2-21" name="g-2"/>
<input type="radio" id="in-2-22" name="g-2"/>
<input type="radio" id="in-2-23" name="g-2"/>
<input type="radio" id="in-2-24" name="g-2"/>
<input type="radio" id="in-2-25" name="g-2"/>
<input type="radio" id="in-2-26" name="g-2"/>
<input type="radio" id="in-2-27" name="g-2"/>
<input type="radio" id="in-2-28" name="g-2"/>
<input type="radio" id="in-2-29" name="g-2"/>
<input type="radio" id="in-2-30" name="g-2"/>
<input type="radio" id="in-2-31" name="g-2"/>
<input type="radio" id="in-2-32" name="g-2"/>
<input type="radio" id="in-2-33" name="g-2"/>
<input type="radio" id="in-2-34" name="g-2"/>
<input type="radio" id="in-2-35" name="g-2"/>
<input type="radio" id="in-2-36" name="g-2"/>
<input type="radio" id="in-2-37" name="g-2"/>
<input type="radio" id="in-2-38" name="g-2"/>
<input type="radio" id="in-2-39" name="g-2"/>
<input type="radio" id="in-2-40" name="g-2"/>
<input type="radio" id="in-2-41" name="g-2"/>
<input type="radio" id="in-2-42" name="g-2"/>
<input type="radio" id="in-2-43" name="g-2"/>
<input type="radio" id="in-2-44" name="g-2"/>
<input type="radio" id="in-2-45" name="g-2"/>
<input type="radio" id="in-2-46" name="g-2"/>
<input type="checkbox" id="shift-2-shift"/>
<input type="radio" id="in-3-delete" name="g-2" checked="checked"/>
<input type="radio" id="in-3-0" name="g-3"/>
<input type="radio" id="in-3-1" name="g-3"/>
<input type="radio" id="in-3-2" name="g-3"/>
<input type="radio" id="in-3-3" name="g-3"/>
<input type="radio" id="in-3-4" name="g-3"/>
<input type="radio" id="in-3-5" name="g-3"/>
<input type="radio" id="in-3-6" name="g-3"/>
<input type="radio" id="in-3-7" name="g-3"/>
<input type="radio" id="in-3-8" name="g-3"/>
<input type="radio" id="in-3-9" name="g-3"/>
<input type="radio" id="in-3-10" name="g-3"/>
<input type="radio" id="in-3-11" name="g-3"/>
<input type="radio" id="in-3-12" name="g-3"/>
<input type="radio" id="in-3-13" name="g-3"/>
<input type="radio" id="in-3-14" name="g-3"/>
<input type="radio" id="in-3-15" name="g-3"/>
<input type="radio" id="in-3-16" name="g-3"/>
<input type="radio" id="in-3-17" name="g-3"/>
<input type="radio" id="in-3-18" name="g-3"/>
<input type="radio" id="in-3-19" name="g-3"/>
<input type="radio" id="in-3-20" name="g-3"/>
<input type="radio" id="in-3-21" name="g-3"/>
<input type="radio" id="in-3-22" name="g-3"/>
<input type="radio" id="in-3-23" name="g-3"/>
<input type="radio" id="in-3-24" name="g-3"/>
<input type="radio" id="in-3-25" name="g-3"/>
<input type="radio" id="in-3-26" name="g-3"/>
<input type="radio" id="in-3-27" name="g-3"/>
<input type="radio" id="in-3-28" name="g-3"/>
<input type="radio" id="in-3-29" name="g-3"/>
<input type="radio" id="in-3-30" name="g-3"/>
<input type="radio" id="in-3-31" name="g-3"/>
<input type="radio" id="in-3-32" name="g-3"/>
<input type="radio" id="in-3-33" name="g-3"/>
<input type="radio" id="in-3-34" name="g-3"/>
<input type="radio" id="in-3-35" name="g-3"/>
<input type="radio" id="in-3-36" name="g-3"/>
<input type="radio" id="in-3-37" name="g-3"/>
<input type="radio" id="in-3-38" name="g-3"/>
<input type="radio" id="in-3-39" name="g-3"/>
<input type="radio" id="in-3-40" name="g-3"/>
<input type="radio" id="in-3-41" name="g-3"/>
<input type="radio" id="in-3-42" name="g-3"/>
<input type="radio" id="in-3-43" name="g-3"/>
<input type="radio" id="in-3-44" name="g-3"/>
<input type="radio" id="in-3-45" name="g-3"/>
<input type="radio" id="in-3-46" name="g-3"/>
<input type="checkbox" id="shift-3-shift"/>
<input type="radio" id="in-4-delete" name="g-3" checked="checked"/>
<input type="radio" id="in-4-0" name="g-4"/>
<input type="radio" id="in-4-1" name="g-4"/>
<input type="radio" id="in-4-2" name="g-4"/>
<input type="radio" id="in-4-3" name="g-4"/>
<input type="radio" id="in-4-4" name="g-4"/>
<input type="radio" id="in-4-5" name="g-4"/>
<input type="radio" id="in-4-6" name="g-4"/>
<input type="radio" id="in-4-7" name="g-4"/>
<input type="radio" id="in-4-8" name="g-4"/>
<input type="radio" id="in-4-9" name="g-4"/>
<input type="radio" id="in-4-10" name="g-4"/>
<input type="radio" id="in-4-11" name="g-4"/>
<input type="radio" id="in-4-12" name="g-4"/>
<input type="radio" id="in-4-13" name="g-4"/>
<input type="radio" id="in-4-14" name="g-4"/>
<input type="radio" id="in-4-15" name="g-4"/>
<input type="radio" id="in-4-16" name="g-4"/>
<input type="radio" id="in-4-17" name="g-4"/>
<input type="radio" id="in-4-18" name="g-4"/>
<input type="radio" id="in-4-19" name="g-4"/>
<input type="radio" id="in-4-20" name="g-4"/>
<input type="radio" id="in-4-21" name="g-4"/>
<input type="radio" id="in-4-22" name="g-4"/>
<input type="radio" id="in-4-23" name="g-4"/>
<input type="radio" id="in-4-24" name="g-4"/>
<input type="radio" id="in-4-25" name="g-4"/>
<input type="radio" id="in-4-26" name="g-4"/>
<input type="radio" id="in-4-27" name="g-4"/>
<input type="radio" id="in-4-28" name="g-4"/>
<input type="radio" id="in-4-29" name="g-4"/>
<input type="radio" id="in-4-30" name="g-4"/>
<input type="radio" id="in-4-31" name="g-4"/>
<input type="radio" id="in-4-32" name="g-4"/>
<input type="radio" id="in-4-33" name="g-4"/>
<input type="radio" id="in-4-34" name="g-4"/>
<input type="radio" id="in-4-35" name="g-4"/>
<input type="radio" id="in-4-36" name="g-4"/>
<input type="radio" id="in-4-37" name="g-4"/>
<input type="radio" id="in-4-38" name="g-4"/>
<input type="radio" id="in-4-39" name="g-4"/>
<input type="radio" id="in-4-40" name="g-4"/>
<input type="radio" id="in-4-41" name="g-4"/>
<input type="radio" id="in-4-42" name="g-4"/>
<input type="radio" id="in-4-43" name="g-4"/>
<input type="radio" id="in-4-44" name="g-4"/>
<input type="radio" id="in-4-45" name="g-4"/>
<input type="radio" id="in-4-46" name="g-4"/>
<input type="checkbox" id="shift-4-shift"/>
<input type="radio" id="in-5-delete" name="g-4" checked="checked"/>
<input type="radio" id="in-5-0" name="g-5"/>
<input type="radio" id="in-5-1" name="g-5"/>
<input type="radio" id="in-5-2" name="g-5"/>
<input type="radio" id="in-5-3" name="g-5"/>
<input type="radio" id="in-5-4" name="g-5"/>
<input type="radio" id="in-5-5" name="g-5"/>
<input type="radio" id="in-5-6" name="g-5"/>
<input type="radio" id="in-5-7" name="g-5"/>
<input type="radio" id="in-5-8" name="g-5"/>
<input type="radio" id="in-5-9" name="g-5"/>
<input type="radio" id="in-5-10" name="g-5"/>
<input type="radio" id="in-5-11" name="g-5"/>
<input type="radio" id="in-5-12" name="g-5"/>
<input type="radio" id="in-5-13" name="g-5"/>
<input type="radio" id="in-5-14" name="g-5"/>
<input type="radio" id="in-5-15" name="g-5"/>
<input type="radio" id="in-5-16" name="g-5"/>
<input type="radio" id="in-5-17" name="g-5"/>
<input type="radio" id="in-5-18" name="g-5"/>
<input type="radio" id="in-5-19" name="g-5"/>
<input type="radio" id="in-5-20" name="g-5"/>
<input type="radio" id="in-5-21" name="g-5"/>
<input type="radio" id="in-5-22" name="g-5"/>
<input type="radio" id="in-5-23" name="g-5"/>
<input type="radio" id="in-5-24" name="g-5"/>
<input type="radio" id="in-5-25" name="g-5"/>
<input type="radio" id="in-5-26" name="g-5"/>
<input type="radio" id="in-5-27" name="g-5"/>
<input type="radio" id="in-5-28" name="g-5"/>
<input type="radio" id="in-5-29" name="g-5"/>
<input type="radio" id="in-5-30" name="g-5"/>
<input type="radio" id="in-5-31" name="g-5"/>
<input type="radio" id="in-5-32" name="g-5"/>
<input type="radio" id="in-5-33" name="g-5"/>
<input type="radio" id="in-5-34" name="g-5"/>
<input type="radio" id="in-5-35" name="g-5"/>
<input type="radio" id="in-5-36" name="g-5"/>
<input type="radio" id="in-5-37" name="g-5"/>
<input type="radio" id="in-5-38" name="g-5"/>
<input type="radio" id="in-5-39" name="g-5"/>
<input type="radio" id="in-5-40" name="g-5"/>
<input type="radio" id="in-5-41" name="g-5"/>
<input type="radio" id="in-5-42" name="g-5"/>
<input type="radio" id="in-5-43" name="g-5"/>
<input type="radio" id="in-5-44" name="g-5"/>
<input type="radio" id="in-5-45" name="g-5"/>
<input type="radio" id="in-5-46" name="g-5"/>
<input type="checkbox" id="shift-5-shift"/>
<input type="radio" id="in-6-delete" name="g-5" checked="checked"/>
<input type="radio" id="in-6-0" name="g-6"/>
<input type="radio" id="in-6-1" name="g-6"/>
<input type="radio" id="in-6-2" name="g-6"/>
<input type="radio" id="in-6-3" name="g-6"/>
<input type="radio" id="in-6-4" name="g-6"/>
<input type="radio" id="in-6-5" name="g-6"/>
<input type="radio" id="in-6-6" name="g-6"/>
<input type="radio" id="in-6-7" name="g-6"/>
<input type="radio" id="in-6-8" name="g-6"/>
<input type="radio" id="in-6-9" name="g-6"/>
<input type="radio" id="in-6-10" name="g-6"/>
<input type="radio" id="in-6-11" name="g-6"/>
<input type="radio" id="in-6-12" name="g-6"/>
<input type="radio" id="in-6-13" name="g-6"/>
<input type="radio" id="in-6-14" name="g-6"/>
<input type="radio" id="in-6-15" name="g-6"/>
<input type="radio" id="in-6-16" name="g-6"/>
<input type="radio" id="in-6-17" name="g-6"/>
<input type="radio" id="in-6-18" name="g-6"/>
<input type="radio" id="in-6-19" name="g-6"/>
<input type="radio" id="in-6-20" name="g-6"/>
<input type="radio" id="in-6-21" name="g-6"/>
<input type="radio" id="in-6-22" name="g-6"/>
<input type="radio" id="in-6-23" name="g-6"/>
<input type="radio" id="in-6-24" name="g-6"/>
<input type="radio" id="in-6-25" name="g-6"/>
<input type="radio" id="in-6-26" name="g-6"/>
<input type="radio" id="in-6-27" name="g-6"/>
<input type="radio" id="in-6-28" name="g-6"/>
<input type="radio" id="in-6-29" name="g-6"/>
<input type="radio" id="in-6-30" name="g-6"/>
<input type="radio" id="in-6-31" name="g-6"/>
<input type="radio" id="in-6-32" name="g-6"/>
<input type="radio" id="in-6-33" name="g-6"/>
<input type="radio" id="in-6-34" name="g-6"/>
<input type="radio" id="in-6-35" name="g-6"/>
<input type="radio" id="in-6-36" name="g-6"/>
<input type="radio" id="in-6-37" name="g-6"/>
<input type="radio" id="in-6-38" name="g-6"/>
<input type="radio" id="in-6-39" name="g-6"/>
<input type="radio" id="in-6-40" name="g-6"/>
<input type="radio" id="in-6-41" name="g-6"/>
<input type="radio" id="in-6-42" name="g-6"/>
<input type="radio" id="in-6-43" name="g-6"/>
<input type="radio" id="in-6-44" name="g-6"/>
<input type="radio" id="in-6-45" name="g-6"/>
<input type="radio" id="in-6-46" name="g-6"/>
<input type="checkbox" id="shift-6-shift"/>
<input type="radio" id="in-7-delete" name="g-6" checked="checked"/>
<input type="radio" id="in-7-0" name="g-7"/>
<input type="radio" id="in-7-1" name="g-7"/>
<input type="radio" id="in-7-2" name="g-7"/>
<input type="radio" id="in-7-3" name="g-7"/>
<input type="radio" id="in-7-4" name="g-7"/>
<input type="radio" id="in-7-5" name="g-7"/>
<input type="radio" id="in-7-6" name="g-7"/>
<input type="radio" id="in-7-7" name="g-7"/>
<input type="radio" id="in-7-8" name="g-7"/>
<input type="radio" id="in-7-9" name="g-7"/>
<input type="radio" id="in-7-10" name="g-7"/>
<input type="radio" id="in-7-11" name="g-7"/>
<input type="radio" id="in-7-12" name="g-7"/>
<input type="radio" id="in-7-13" name="g-7"/>
<input type="radio" id="in-7-14" name="g-7"/>
<input type="radio" id="in-7-15" name="g-7"/>
<input type="radio" id="in-7-16" name="g-7"/>
<input type="radio" id="in-7-17" name="g-7"/>
<input type="radio" id="in-7-18" name="g-7"/>
<input type="radio" id="in-7-19" name="g-7"/>
<input type="radio" id="in-7-20" name="g-7"/>
<input type="radio" id="in-7-21" name="g-7"/>
<input type="radio" id="in-7-22" name="g-7"/>
<input type="radio" id="in-7-23" name="g-7"/>
<input type="radio" id="in-7-24" name="g-7"/>
<input type="radio" id="in-7-25" name="g-7"/>
<input type="radio" id="in-7-26" name="g-7"/>
<input type="radio" id="in-7-27" name="g-7"/>
<input type="radio" id="in-7-28" name="g-7"/>
<input type="radio" id="in-7-29" name="g-7"/>
<input type="radio" id="in-7-30" name="g-7"/>
<input type="radio" id="in-7-31" name="g-7"/>
<input type="radio" id="in-7-32" name="g-7"/>
<input type="radio" id="in-7-33" name="g-7"/>
<input type="radio" id="in-7-34" name="g-7"/>
<input type="radio" id="in-7-35" name="g-7"/>
<input type="radio" id="in-7-36" name="g-7"/>
<input type="radio" id="in-7-37" name="g-7"/>
<input type="radio" id="in-7-38" name="g-7"/>
<input type="radio" id="in-7-39" name="g-7"/>
<input type="radio" id="in-7-40" name="g-7"/>
<input type="radio" id="in-7-41" name="g-7"/>
<input type="radio" id="in-7-42" name="g-7"/>
<input type="radio" id="in-7-43" name="g-7"/>
<input type="radio" id="in-7-44" name="g-7"/>
<input type="radio" id="in-7-45" name="g-7"/>
<input type="radio" id="in-7-46" name="g-7"/>
<input type="checkbox" id="shift-7-shift"/>
<input type="radio" id="in-8-delete" name="g-7" checked="checked"/>
<input type="radio" id="in-8-0" name="g-8"/>
<input type="radio" id="in-8-1" name="g-8"/>
<input type="radio" id="in-8-2" name="g-8"/>
<input type="radio" id="in-8-3" name="g-8"/>
<input type="radio" id="in-8-4" name="g-8"/>
<input type="radio" id="in-8-5" name="g-8"/>
<input type="radio" id="in-8-6" name="g-8"/>
<input type="radio" id="in-8-7" name="g-8"/>
<input type="radio" id="in-8-8" name="g-8"/>
<input type="radio" id="in-8-9" name="g-8"/>
<input type="radio" id="in-8-10" name="g-8"/>
<input type="radio" id="in-8-11" name="g-8"/>
<input type="radio" id="in-8-12" name="g-8"/>
<input type="radio" id="in-8-13" name="g-8"/>
<input type="radio" id="in-8-14" name="g-8"/>
<input type="radio" id="in-8-15" name="g-8"/>
<input type="radio" id="in-8-16" name="g-8"/>
<input type="radio" id="in-8-17" name="g-8"/>
<input type="radio" id="in-8-18" name="g-8"/>
<input type="radio" id="in-8-19" name="g-8"/>
<input type="radio" id="in-8-20" name="g-8"/>
<input type="radio" id="in-8-21" name="g-8"/>
<input type="radio" id="in-8-22" name="g-8"/>
<input type="radio" id="in-8-23" name="g-8"/>
<input type="radio" id="in-8-24" name="g-8"/>
<input type="radio" id="in-8-25" name="g-8"/>
<input type="radio" id="in-8-26" name="g-8"/>
<input type="radio" id="in-8-27" name="g-8"/>
<input type="radio" id="in-8-28" name="g-8"/>
<input type="radio" id="in-8-29" name="g-8"/>
<input type="radio" id="in-8-30" name="g-8"/>
<input type="radio" id="in-8-31" name="g-8"/>
<input type="radio" id="in-8-32" name="g-8"/>
<input type="radio" id="in-8-33" name="g-8"/>
<input type="radio" id="in-8-34" name="g-8"/>
<input type="radio" id="in-8-35" name="g-8"/>
<input type="radio" id="in-8-36" name="g-8"/>
<input type="radio" id="in-8-37" name="g-8"/>
<input type="radio" id="in-8-38" name="g-8"/>
<input type="radio" id="in-8-39" name="g-8"/>
<input type="radio" id="in-8-40" name="g-8"/>
<input type="radio" id="in-8-41" name="g-8"/>
<input type="radio" id="in-8-42" name="g-8"/>
<input type="radio" id="in-8-43" name="g-8"/>
<input type="radio" id="in-8-44" name="g-8"/>
<input type="radio" id="in-8-45" name="g-8"/>
<input type="radio" id="in-8-46" name="g-8"/>
<input type="checkbox" id="shift-8-shift"/>
<input type="radio" id="in-9-delete" name="g-8" checked="checked"/>
<input type="radio" id="in-9-0" name="g-9"/>
<input type="radio" id="in-9-1" name="g-9"/>
<input type="radio" id="in-9-2" name="g-9"/>
<input type="radio" id="in-9-3" name="g-9"/>
<input type="radio" id="in-9-4" name="g-9"/>
<input type="radio" id="in-9-5" name="g-9"/>
<input type="radio" id="in-9-6" name="g-9"/>
<input type="radio" id="in-9-7" name="g-9"/>
<input type="radio" id="in-9-8" name="g-9"/>
<input type="radio" id="in-9-9" name="g-9"/>
<input type="radio" id="in-9-10" name="g-9"/>
<input type="radio" id="in-9-11" name="g-9"/>
<input type="radio" id="in-9-12" name="g-9"/>
<input type="radio" id="in-9-13" name="g-9"/>
<input type="radio" id="in-9-14" name="g-9"/>
<input type="radio" id="in-9-15" name="g-9"/>
<input type="radio" id="in-9-16" name="g-9"/>
<input type="radio" id="in-9-17" name="g-9"/>
<input type="radio" id="in-9-18" name="g-9"/>
<input type="radio" id="in-9-19" name="g-9"/>
<input type="radio" id="in-9-20" name="g-9"/>
<input type="radio" id="in-9-21" name="g-9"/>
<input type="radio" id="in-9-22" name="g-9"/>
<input type="radio" id="in-9-23" name="g-9"/>
<input type="radio" id="in-9-24" name="g-9"/>
<input type="radio" id="in-9-25" name="g-9"/>
<input type="radio" id="in-9-26" name="g-9"/>
<input type="radio" id="in-9-27" name="g-9"/>
<input type="radio" id="in-9-28" name="g-9"/>
<input type="radio" id="in-9-29" name="g-9"/>
<input type="radio" id="in-9-30" name="g-9"/>
<input type="radio" id="in-9-31" name="g-9"/>
<input type="radio" id="in-9-32" name="g-9"/>
<input type="radio" id="in-9-33" name="g-9"/>
<input type="radio" id="in-9-34" name="g-9"/>
<input type="radio" id="in-9-35" name="g-9"/>
<input type="radio" id="in-9-36" name="g-9"/>
<input type="radio" id="in-9-37" name="g-9"/>
<input type="radio" id="in-9-38" name="g-9"/>
<input type="radio" id="in-9-39" name="g-9"/>
<input type="radio" id="in-9-40" name="g-9"/>
<input type="radio" id="in-9-41" name="g-9"/>
<input type="radio" id="in-9-42" name="g-9"/>
<input type="radio" id="in-9-43" name="g-9"/>
<input type="radio" id="in-9-44" name="g-9"/>
<input type="radio" id="in-9-45" name="g-9"/>
<input type="radio" id="in-9-46" name="g-9"/>
<input type="checkbox" id="shift-9-shift"/>
<input type="radio" id="in-10-delete" name="g-9" checked="checked"/>
<input type="radio" id="in-10-0" name="g-10"/>
<input type="radio" id="in-10-1" name="g-10"/>
<input type="radio" id="in-10-2" name="g-10"/>
<input type="radio" id="in-10-3" name="g-10"/>
<input type="radio" id="in-10-4" name="g-10"/>
<input type="radio" id="in-10-5" name="g-10"/>
<input type="radio" id="in-10-6" name="g-10"/>
<input type="radio" id="in-10-7" name="g-10"/>
<input type="radio" id="in-10-8" name="g-10"/>
<input type="radio" id="in-10-9" name="g-10"/>
<input type="radio" id="in-10-10" name="g-10"/>
<input type="radio" id="in-10-11" name="g-10"/>
<input type="radio" id="in-10-12" name="g-10"/>
<input type="radio" id="in-10-13" name="g-10"/>
<input type="radio" id="in-10-14" name="g-10"/>
<input type="radio" id="in-10-15" name="g-10"/>
<input type="radio" id="in-10-16" name="g-10"/>
<input type="radio" id="in-10-17" name="g-10"/>
<input type="radio" id="in-10-18" name="g-10"/>
<input type="radio" id="in-10-19" name="g-10"/>
<input type="radio" id="in-10-20" name="g-10"/>
<input type="radio" id="in-10-21" name="g-10"/>
<input type="radio" id="in-10-22" name="g-10"/>
<input type="radio" id="in-10-23" name="g-10"/>
<input type="radio" id="in-10-24" name="g-10"/>
<input type="radio" id="in-10-25" name="g-10"/>
<input type="radio" id="in-10-26" name="g-10"/>
<input type="radio" id="in-10-27" name="g-10"/>
<input type="radio" id="in-10-28" name="g-10"/>
<input type="radio" id="in-10-29" name="g-10"/>
<input type="radio" id="in-10-30" name="g-10"/>
<input type="radio" id="in-10-31" name="g-10"/>
<input type="radio" id="in-10-32" name="g-10"/>
<input type="radio" id="in-10-33" name="g-10"/>
<input type="radio" id="in-10-34" name="g-10"/>
<input type="radio" id="in-10-35" name="g-10"/>
<input type="radio" id="in-10-36" name="g-10"/>
<input type="radio" id="in-10-37" name="g-10"/>
<input type="radio" id="in-10-38" name="g-10"/>
<input type="radio" id="in-10-39" name="g-10"/>
<input type="radio" id="in-10-40" name="g-10"/>
<input type="radio" id="in-10-41" name="g-10"/>
<input type="radio" id="in-10-42" name="g-10"/>
<input type="radio" id="in-10-43" name="g-10"/>
<input type="radio" id="in-10-44" name="g-10"/>
<input type="radio" id="in-10-45" name="g-10"/>
<input type="radio" id="in-10-46" name="g-10"/>
<input type="checkbox" id="shift-10-shift"/>
<input type="radio" id="in-11-delete" name="g-10" checked="checked"/>
<input type="radio" id="in-11-0" name="g-11"/>
<input type="radio" id="in-11-1" name="g-11"/>
<input type="radio" id="in-11-2" name="g-11"/>
<input type="radio" id="in-11-3" name="g-11"/>
<input type="radio" id="in-11-4" name="g-11"/>
<input type="radio" id="in-11-5" name="g-11"/>
<input type="radio" id="in-11-6" name="g-11"/>
<input type="radio" id="in-11-7" name="g-11"/>
<input type="radio" id="in-11-8" name="g-11"/>
<input type="radio" id="in-11-9" name="g-11"/>
<input type="radio" id="in-11-10" name="g-11"/>
<input type="radio" id="in-11-11" name="g-11"/>
<input type="radio" id="in-11-12" name="g-11"/>
<input type="radio" id="in-11-13" name="g-11"/>
<input type="radio" id="in-11-14" name="g-11"/>
<input type="radio" id="in-11-15" name="g-11"/>
<input type="radio" id="in-11-16" name="g-11"/>
<input type="radio" id="in-11-17" name="g-11"/>
<input type="radio" id="in-11-18" name="g-11"/>
<input type="radio" id="in-11-19" name="g-11"/>
<input type="radio" id="in-11-20" name="g-11"/>
<input type="radio" id="in-11-21" name="g-11"/>
<input type="radio" id="in-11-22" name="g-11"/>
<input type="radio" id="in-11-23" name="g-11"/>
<input type="radio" id="in-11-24" name="g-11"/>
<input type="radio" id="in-11-25" name="g-11"/>
<input type="radio" id="in-11-26" name="g-11"/>
<input type="radio" id="in-11-27" name="g-11"/>
<input type="radio" id="in-11-28" name="g-11"/>
<input type="radio" id="in-11-29" name="g-11"/>
<input type="radio" id="in-11-30" name="g-11"/>
<input type="radio" id="in-11-31" name="g-11"/>
<input type="radio" id="in-11-32" name="g-11"/>
<input type="radio" id="in-11-33" name="g-11"/>
<input type="radio" id="in-11-34" name="g-11"/>
<input type="radio" id="in-11-35" name="g-11"/>
<input type="radio" id="in-11-36" name="g-11"/>
<input type="radio" id="in-11-37" name="g-11"/>
<input type="radio" id="in-11-38" name="g-11"/>
<input type="radio" id="in-11-39" name="g-11"/>
<input type="radio" id="in-11-40" name="g-11"/>
<input type="radio" id="in-11-41" name="g-11"/>
<input type="radio" id="in-11-42" name="g-11"/>
<input type="radio" id="in-11-43" name="g-11"/>
<input type="radio" id="in-11-44" name="g-11"/>
<input type="radio" id="in-11-45" name="g-11"/>
<input type="radio" id="in-11-46" name="g-11"/>
<input type="checkbox" id="shift-11-shift"/>
<input type="radio" id="in-12-delete" name="g-11" checked="checked"/>
<input type="radio" id="in-12-0" name="g-12"/>
<input type="radio" id="in-12-1" name="g-12"/>
<input type="radio" id="in-12-2" name="g-12"/>
<input type="radio" id="in-12-3" name="g-12"/>
<input type="radio" id="in-12-4" name="g-12"/>
<input type="radio" id="in-12-5" name="g-12"/>
<input type="radio" id="in-12-6" name="g-12"/>
<input type="radio" id="in-12-7" name="g-12"/>
<input type="radio" id="in-12-8" name="g-12"/>
<input type="radio" id="in-12-9" name="g-12"/>
<input type="radio" id="in-12-10" name="g-12"/>
<input type="radio" id="in-12-11" name="g-12"/>
<input type="radio" id="in-12-12" name="g-12"/>
<input type="radio" id="in-12-13" name="g-12"/>
<input type="radio" id="in-12-14" name="g-12"/>
<input type="radio" id="in-12-15" name="g-12"/>
<input type="radio" id="in-12-16" name="g-12"/>
<input type="radio" id="in-12-17" name="g-12"/>
<input type="radio" id="in-12-18" name="g-12"/>
<input type="radio" id="in-12-19" name="g-12"/>
<input type="radio" id="in-12-20" name="g-12"/>
<input type="radio" id="in-12-21" name="g-12"/>
<input type="radio" id="in-12-22" name="g-12"/>
<input type="radio" id="in-12-23" name="g-12"/>
<input type="radio" id="in-12-24" name="g-12"/>
<input type="radio" id="in-12-25" name="g-12"/>
<input type="radio" id="in-12-26" name="g-12"/>
<input type="radio" id="in-12-27" name="g-12"/>
<input type="radio" id="in-12-28" name="g-12"/>
<input type="radio" id="in-12-29" name="g-12"/>
<input type="radio" id="in-12-30" name="g-12"/>
<input type="radio" id="in-12-31" name="g-12"/>
<input type="radio" id="in-12-32" name="g-12"/>
<input type="radio" id="in-12-33" name="g-12"/>
<input type="radio" id="in-12-34" name="g-12"/>
<input type="radio" id="in-12-35" name="g-12"/>
<input type="radio" id="in-12-36" name="g-12"/>
<input type="radio" id="in-12-37" name="g-12"/>
<input type="radio" id="in-12-38" name="g-12"/>
<input type="radio" id="in-12-39" name="g-12"/>
<input type="radio" id="in-12-40" name="g-12"/>
<input type="radio" id="in-12-41" name="g-12"/>
<input type="radio" id="in-12-42" name="g-12"/>
<input type="radio" id="in-12-43" name="g-12"/>
<input type="radio" id="in-12-44" name="g-12"/>
<input type="radio" id="in-12-45" name="g-12"/>
<input type="radio" id="in-12-46" name="g-12"/>
<input type="checkbox" id="shift-12-shift"/>
<input type="radio" id="in-13-delete" name="g-12" checked="checked"/>
<input type="radio" id="in-13-0" name="g-13"/>
<input type="radio" id="in-13-1" name="g-13"/>
<input type="radio" id="in-13-2" name="g-13"/>
<input type="radio" id="in-13-3" name="g-13"/>
<input type="radio" id="in-13-4" name="g-13"/>
<input type="radio" id="in-13-5" name="g-13"/>
<input type="radio" id="in-13-6" name="g-13"/>
<input type="radio" id="in-13-7" name="g-13"/>
<input type="radio" id="in-13-8" name="g-13"/>
<input type="radio" id="in-13-9" name="g-13"/>
<input type="radio" id="in-13-10" name="g-13"/>
<input type="radio" id="in-13-11" name="g-13"/>
<input type="radio" id="in-13-12" name="g-13"/>
<input type="radio" id="in-13-13" name="g-13"/>
<input type="radio" id="in-13-14" name="g-13"/>
<input type="radio" id="in-13-15" name="g-13"/>
<input type="radio" id="in-13-16" name="g-13"/>
<input type="radio" id="in-13-17" name="g-13"/>
<input type="radio" id="in-13-18" name="g-13"/>
<input type="radio" id="in-13-19" name="g-13"/>
<input type="radio" id="in-13-20" name="g-13"/>
<input type="radio" id="in-13-21" name="g-13"/>
<input type="radio" id="in-13-22" name="g-13"/>
<input type="radio" id="in-13-23" name="g-13"/>
<input type="radio" id="in-13-24" name="g-13"/>
<input type="radio" id="in-13-25" name="g-13"/>
<input type="radio" id="in-13-26" name="g-13"/>
<input type="radio" id="in-13-27" name="g-13"/>
<input type="radio" id="in-13-28" name="g-13"/>
<input type="radio" id="in-13-29" name="g-13"/>
<input type="radio" id="in-13-30" name="g-13"/>
<input type="radio" id="in-13-31" name="g-13"/>
<input type="radio" id="in-13-32" name="g-13"/>
<input type="radio" id="in-13-33" name="g-13"/>
<input type="radio" id="in-13-34" name="g-13"/>
<input type="radio" id="in-13-35" name="g-13"/>
<input type="radio" id="in-13-36" name="g-13"/>
<input type="radio" id="in-13-37" name="g-13"/>
<input type="radio" id="in-13-38" name="g-13"/>
<input type="radio" id="in-13-39" name="g-13"/>
<input type="radio" id="in-13-40" name="g-13"/>
<input type="radio" id="in-13-41" name="g-13"/>
<input type="radio" id="in-13-42" name="g-13"/>
<input type="radio" id="in-13-43" name="g-13"/>
<input type="radio" id="in-13-44" name="g-13"/>
<input type="radio" id="in-13-45" name="g-13"/>
<input type="radio" id="in-13-46" name="g-13"/>
<input type="checkbox" id="shift-13-shift"/>
<input type="radio" id="in-14-delete" name="g-13" checked="checked"/>
<input type="radio" id="in-14-0" name="g-14"/>
<input type="radio" id="in-14-1" name="g-14"/>
<input type="radio" id="in-14-2" name="g-14"/>
<input type="radio" id="in-14-3" name="g-14"/>
<input type="radio" id="in-14-4" name="g-14"/>
<input type="radio" id="in-14-5" name="g-14"/>
<input type="radio" id="in-14-6" name="g-14"/>
<input type="radio" id="in-14-7" name="g-14"/>
<input type="radio" id="in-14-8" name="g-14"/>
<input type="radio" id="in-14-9" name="g-14"/>
<input type="radio" id="in-14-10" name="g-14"/>
<input type="radio" id="in-14-11" name="g-14"/>
<input type="radio" id="in-14-12" name="g-14"/>
<input type="radio" id="in-14-13" name="g-14"/>
<input type="radio" id="in-14-14" name="g-14"/>
<input type="radio" id="in-14-15" name="g-14"/>
<input type="radio" id="in-14-16" name="g-14"/>
<input type="radio" id="in-14-17" name="g-14"/>
<input type="radio" id="in-14-18" name="g-14"/>
<input type="radio" id="in-14-19" name="g-14"/>
<input type="radio" id="in-14-20" name="g-14"/>
<input type="radio" id="in-14-21" name="g-14"/>
<input type="radio" id="in-14-22" name="g-14"/>
<input type="radio" id="in-14-23" name="g-14"/>
<input type="radio" id="in-14-24" name="g-14"/>
<input type="radio" id="in-14-25" name="g-14"/>
<input type="radio" id="in-14-26" name="g-14"/>
<input type="radio" id="in-14-27" name="g-14"/>
<input type="radio" id="in-14-28" name="g-14"/>
<input type="radio" id="in-14-29" name="g-14"/>
<input type="radio" id="in-14-30" name="g-14"/>
<input type="radio" id="in-14-31" name="g-14"/>
<input type="radio" id="in-14-32" name="g-14"/>
<input type="radio" id="in-14-33" name="g-14"/>
<input type="radio" id="in-14-34" name="g-14"/>
<input type="radio" id="in-14-35" name="g-14"/>
<input type="radio" id="in-14-36" name="g-14"/>
<input type="radio" id="in-14-37" name="g-14"/>
<input type="radio" id="in-14-38" name="g-14"/>
<input type="radio" id="in-14-39" name="g-14"/>
<input type="radio" id="in-14-40" name="g-14"/>
<input type="radio" id="in-14-41" name="g-14"/>
<input type="radio" id="in-14-42" name="g-14"/>
<input type="radio" id="in-14-43" name="g-14"/>
<input type="radio" id="in-14-44" name="g-14"/>
<input type="radio" id="in-14-45" name="g-14"/>
<input type="radio" id="in-14-46" name="g-14"/>
<input type="checkbox" id="shift-14-shift"/>
<input type="radio" id="in-15-delete" name="g-14" checked="checked"/>
<input type="radio" id="in-15-0" name="g-15"/>
<input type="radio" id="in-15-1" name="g-15"/>
<input type="radio" id="in-15-2" name="g-15"/>
<input type="radio" id="in-15-3" name="g-15"/>
<input type="radio" id="in-15-4" name="g-15"/>
<input type="radio" id="in-15-5" name="g-15"/>
<input type="radio" id="in-15-6" name="g-15"/>
<input type="radio" id="in-15-7" name="g-15"/>
<input type="radio" id="in-15-8" name="g-15"/>
<input type="radio" id="in-15-9" name="g-15"/>
<input type="radio" id="in-15-10" name="g-15"/>
<input type="radio" id="in-15-11" name="g-15"/>
<input type="radio" id="in-15-12" name="g-15"/>
<input type="radio" id="in-15-13" name="g-15"/>
<input type="radio" id="in-15-14" name="g-15"/>
<input type="radio" id="in-15-15" name="g-15"/>
<input type="radio" id="in-15-16" name="g-15"/>
<input type="radio" id="in-15-17" name="g-15"/>
<input type="radio" id="in-15-18" name="g-15"/>
<input type="radio" id="in-15-19" name="g-15"/>
<input type="radio" id="in-15-20" name="g-15"/>
<input type="radio" id="in-15-21" name="g-15"/>
<input type="radio" id="in-15-22" name="g-15"/>
<input type="radio" id="in-15-23" name="g-15"/>
<input type="radio" id="in-15-24" name="g-15"/>
<input type="radio" id="in-15-25" name="g-15"/>
<input type="radio" id="in-15-26" name="g-15"/>
<input type="radio" id="in-15-27" name="g-15"/>
<input type="radio" id="in-15-28" name="g-15"/>
<input type="radio" id="in-15-29" name="g-15"/>
<input type="radio" id="in-15-30" name="g-15"/>
<input type="radio" id="in-15-31" name="g-15"/>
<input type="radio" id="in-15-32" name="g-15"/>
<input type="radio" id="in-15-33" name="g-15"/>
<input type="radio" id="in-15-34" name="g-15"/>
<input type="radio" id="in-15-35" name="g-15"/>
<input type="radio" id="in-15-36" name="g-15"/>
<input type="radio" id="in-15-37" name="g-15"/>
<input type="radio" id="in-15-38" name="g-15"/>
<input type="radio" id="in-15-39" name="g-15"/>
<input type="radio" id="in-15-40" name="g-15"/>
<input type="radio" id="in-15-41" name="g-15"/>
<input type="radio" id="in-15-42" name="g-15"/>
<input type="radio" id="in-15-43" name="g-15"/>
<input type="radio" id="in-15-44" name="g-15"/>
<input type="radio" id="in-15-45" name="g-15"/>
<input type="radio" id="in-15-46" name="g-15"/>
<input type="checkbox" id="shift-15-shift"/>
<input type="radio" id="in-16-delete" name="g-15" checked="checked"/>
<input type="radio" id="in-16-0" name="g-16"/>
<input type="radio" id="in-16-1" name="g-16"/>
<input type="radio" id="in-16-2" name="g-16"/>
<input type="radio" id="in-16-3" name="g-16"/>
<input type="radio" id="in-16-4" name="g-16"/>
<input type="radio" id="in-16-5" name="g-16"/>
<input type="radio" id="in-16-6" name="g-16"/>
<input type="radio" id="in-16-7" name="g-16"/>
<input type="radio" id="in-16-8" name="g-16"/>
<input type="radio" id="in-16-9" name="g-16"/>
<input type="radio" id="in-16-10" name="g-16"/>
<input type="radio" id="in-16-11" name="g-16"/>
<input type="radio" id="in-16-12" name="g-16"/>
<input type="radio" id="in-16-13" name="g-16"/>
<input type="radio" id="in-16-14" name="g-16"/>
<input type="radio" id="in-16-15" name="g-16"/>
<input type="radio" id="in-16-16" name="g-16"/>
<input type="radio" id="in-16-17" name="g-16"/>
<input type="radio" id="in-16-18" name="g-16"/>
<input type="radio" id="in-16-19" name="g-16"/>
<input type="radio" id="in-16-20" name="g-16"/>
<input type="radio" id="in-16-21" name="g-16"/>
<input type="radio" id="in-16-22" name="g-16"/>
<input type="radio" id="in-16-23" name="g-16"/>
<input type="radio" id="in-16-24" name="g-16"/>
<input type="radio" id="in-16-25" name="g-16"/>
<input type="radio" id="in-16-26" name="g-16"/>
<input type="radio" id="in-16-27" name="g-16"/>
<input type="radio" id="in-16-28" name="g-16"/>
<input type="radio" id="in-16-29" name="g-16"/>
<input type="radio" id="in-16-30" name="g-16"/>
<input type="radio" id="in-16-31" name="g-16"/>
<input type="radio" id="in-16-32" name="g-16"/>
<input type="radio" id="in-16-33" name="g-16"/>
<input type="radio" id="in-16-34" name="g-16"/>
<input type="radio" id="in-16-35" name="g-16"/>
<input type="radio" id="in-16-36" name="g-16"/>
<input type="radio" id="in-16-37" name="g-16"/>
<input type="radio" id="in-16-38" name="g-16"/>
<input type="radio" id="in-16-39" name="g-16"/>
<input type="radio" id="in-16-40" name="g-16"/>
<input type="radio" id="in-16-41" name="g-16"/>
<input type="radio" id="in-16-42" name="g-16"/>
<input type="radio" id="in-16-43" name="g-16"/>
<input type="radio" id="in-16-44" name="g-16"/>
<input type="radio" id="in-16-45" name="g-16"/>
<input type="radio" id="in-16-46" name="g-16"/>
<input type="checkbox" id="shift-16-shift"/>
<input type="radio" id="in-17-delete" name="g-16" checked="checked"/>
<input type="radio" id="in-17-0" name="g-17"/>
<input type="radio" id="in-17-1" name="g-17"/>
<input type="radio" id="in-17-2" name="g-17"/>
<input type="radio" id="in-17-3" name="g-17"/>
<input type="radio" id="in-17-4" name="g-17"/>
<input type="radio" id="in-17-5" name="g-17"/>
<input type="radio" id="in-17-6" name="g-17"/>
<input type="radio" id="in-17-7" name="g-17"/>
<input type="radio" id="in-17-8" name="g-17"/>
<input type="radio" id="in-17-9" name="g-17"/>
<input type="radio" id="in-17-10" name="g-17"/>
<input type="radio" id="in-17-11" name="g-17"/>
<input type="radio" id="in-17-12" name="g-17"/>
<input type="radio" id="in-17-13" name="g-17"/>
<input type="radio" id="in-17-14" name="g-17"/>
<input type="radio" id="in-17-15" name="g-17"/>
<input type="radio" id="in-17-16" name="g-17"/>
<input type="radio" id="in-17-17" name="g-17"/>
<input type="radio" id="in-17-18" name="g-17"/>
<input type="radio" id="in-17-19" name="g-17"/>
<input type="radio" id="in-17-20" name="g-17"/>
<input type="radio" id="in-17-21" name="g-17"/>
<input type="radio" id="in-17-22" name="g-17"/>
<input type="radio" id="in-17-23" name="g-17"/>
<input type="radio" id="in-17-24" name="g-17"/>
<input type="radio" id="in-17-25" name="g-17"/>
<input type="radio" id="in-17-26" name="g-17"/>
<input type="radio" id="in-17-27" name="g-17"/>
<input type="radio" id="in-17-28" name="g-17"/>
<input type="radio" id="in-17-29" name="g-17"/>
<input type="radio" id="in-17-30" name="g-17"/>
<input type="radio" id="in-17-31" name="g-17"/>
<input type="radio" id="in-17-32" name="g-17"/>
<input type="radio" id="in-17-33" name="g-17"/>
<input type="radio" id="in-17-34" name="g-17"/>
<input type="radio" id="in-17-35" name="g-17"/>
<input type="radio" id="in-17-36" name="g-17"/>
<input type="radio" id="in-17-37" name="g-17"/>
<input type="radio" id="in-17-38" name="g-17"/>
<input type="radio" id="in-17-39" name="g-17"/>
<input type="radio" id="in-17-40" name="g-17"/>
<input type="radio" id="in-17-41" name="g-17"/>
<input type="radio" id="in-17-42" name="g-17"/>
<input type="radio" id="in-17-43" name="g-17"/>
<input type="radio" id="in-17-44" name="g-17"/>
<input type="radio" id="in-17-45" name="g-17"/>
<input type="radio" id="in-17-46" name="g-17"/>
<input type="checkbox" id="shift-17-shift"/>
<input type="radio" id="in-18-delete" name="g-17" checked="checked"/>
<input type="radio" id="in-18-0" name="g-18"/>
<input type="radio" id="in-18-1" name="g-18"/>
<input type="radio" id="in-18-2" name="g-18"/>
<input type="radio" id="in-18-3" name="g-18"/>
<input type="radio" id="in-18-4" name="g-18"/>
<input type="radio" id="in-18-5" name="g-18"/>
<input type="radio" id="in-18-6" name="g-18"/>
<input type="radio" id="in-18-7" name="g-18"/>
<input type="radio" id="in-18-8" name="g-18"/>
<input type="radio" id="in-18-9" name="g-18"/>
<input type="radio" id="in-18-10" name="g-18"/>
<input type="radio" id="in-18-11" name="g-18"/>
<input type="radio" id="in-18-12" name="g-18"/>
<input type="radio" id="in-18-13" name="g-18"/>
<input type="radio" id="in-18-14" name="g-18"/>
<input type="radio" id="in-18-15" name="g-18"/>
<input type="radio" id="in-18-16" name="g-18"/>
<input type="radio" id="in-18-17" name="g-18"/>
<input type="radio" id="in-18-18" name="g-18"/>
<input type="radio" id="in-18-19" name="g-18"/>
<input type="radio" id="in-18-20" name="g-18"/>
<input type="radio" id="in-18-21" name="g-18"/>
<input type="radio" id="in-18-22" name="g-18"/>
<input type="radio" id="in-18-23" name="g-18"/>
<input type="radio" id="in-18-24" name="g-18"/>
<input type="radio" id="in-18-25" name="g-18"/>
<input type="radio" id="in-18-26" name="g-18"/>
<input type="radio" id="in-18-27" name="g-18"/>
<input type="radio" id="in-18-28" name="g-18"/>
<input type="radio" id="in-18-29" name="g-18"/>
<input type="radio" id="in-18-30" name="g-18"/>
<input type="radio" id="in-18-31" name="g-18"/>
<input type="radio" id="in-18-32" name="g-18"/>
<input type="radio" id="in-18-33" name="g-18"/>
<input type="radio" id="in-18-34" name="g-18"/>
<input type="radio" id="in-18-35" name="g-18"/>
<input type="radio" id="in-18-36" name="g-18"/>
<input type="radio" id="in-18-37" name="g-18"/>
<input type="radio" id="in-18-38" name="g-18"/>
<input type="radio" id="in-18-39" name="g-18"/>
<input type="radio" id="in-18-40" name="g-18"/>
<input type="radio" id="in-18-41" name="g-18"/>
<input type="radio" id="in-18-42" name="g-18"/>
<input type="radio" id="in-18-43" name="g-18"/>
<input type="radio" id="in-18-44" name="g-18"/>
<input type="radio" id="in-18-45" name="g-18"/>
<input type="radio" id="in-18-46" name="g-18"/>
<input type="checkbox" id="shift-18-shift"/>
<input type="radio" id="in-19-delete" name="g-18" checked="checked"/>
<input type="radio" id="in-19-0" name="g-19"/>
<input type="radio" id="in-19-1" name="g-19"/>
<input type="radio" id="in-19-2" name="g-19"/>
<input type="radio" id="in-19-3" name="g-19"/>
<input type="radio" id="in-19-4" name="g-19"/>
<input type="radio" id="in-19-5" name="g-19"/>
<input type="radio" id="in-19-6" name="g-19"/>
<input type="radio" id="in-19-7" name="g-19"/>
<input type="radio" id="in-19-8" name="g-19"/>
<input type="radio" id="in-19-9" name="g-19"/>
<input type="radio" id="in-19-10" name="g-19"/>
<input type="radio" id="in-19-11" name="g-19"/>
<input type="radio" id="in-19-12" name="g-19"/>
<input type="radio" id="in-19-13" name="g-19"/>
<input type="radio" id="in-19-14" name="g-19"/>
<input type="radio" id="in-19-15" name="g-19"/>
<input type="radio" id="in-19-16" name="g-19"/>
<input type="radio" id="in-19-17" name="g-19"/>
<input type="radio" id="in-19-18" name="g-19"/>
<input type="radio" id="in-19-19" name="g-19"/>
<input type="radio" id="in-19-20" name="g-19"/>
<input type="radio" id="in-19-21" name="g-19"/>
<input type="radio" id="in-19-22" name="g-19"/>
<input type="radio" id="in-19-23" name="g-19"/>
<input type="radio" id="in-19-24" name="g-19"/>
<input type="radio" id="in-19-25" name="g-19"/>
<input type="radio" id="in-19-26" name="g-19"/>
<input type="radio" id="in-19-27" name="g-19"/>
<input type="radio" id="in-19-28" name="g-19"/>
<input type="radio" id="in-19-29" name="g-19"/>
<input type="radio" id="in-19-30" name="g-19"/>
<input type="radio" id="in-19-31" name="g-19"/>
<input type="radio" id="in-19-32" name="g-19"/>
<input type="radio" id="in-19-33" name="g-19"/>
<input type="radio" id="in-19-34" name="g-19"/>
<input type="radio" id="in-19-35" name="g-19"/>
<input type="radio" id="in-19-36" name="g-19"/>
<input type="radio" id="in-19-37" name="g-19"/>
<input type="radio" id="in-19-38" name="g-19"/>
<input type="radio" id="in-19-39" name="g-19"/>
<input type="radio" id="in-19-40" name="g-19"/>
<input type="radio" id="in-19-41" name="g-19"/>
<input type="radio" id="in-19-42" name="g-19"/>
<input type="radio" id="in-19-43" name="g-19"/>
<input type="radio" id="in-19-44" name="g-19"/>
<input type="radio" id="in-19-45" name="g-19"/>
<input type="radio" id="in-19-46" name="g-19"/>
<input type="checkbox" id="shift-19-shift"/>
<input type="radio" id="in-20-delete" name="g-19" checked="checked"/>
<section id="out"><span id="out-0"></span><span id="out-1"></span><span id="out-2"></span><span id="out-3"></span><span id="out-4"></span><span id="out-5"></span><span id="out-6"></span><span id="out-7"></span><span id="out-8"></span><span id="out-9"></span><span id="out-10"></span><span id="out-11"></span><span id="out-12"></span><span id="out-13"></span><span id="out-14"></span><span id="out-15"></span><span id="out-16"></span><span id="out-17"></span><span id="out-18"></span><span id="out-19"></span>
</section>
<section id="board-0">
  <label for="in-0-0">1</label>
  <label for="in-0-1">2</label>
  <label for="in-0-2">3</label>
  <label for="in-0-3">4</label>
  <label for="in-0-4">5</label>
  <label for="in-0-5">6</label>
  <label for="in-0-6">7</label>
  <label for="in-0-7">8</label>
  <label for="in-0-8">9</label>
  <label for="in-0-9">0</label>
  <label for="in-0-10">-</label>
  <label for="in-0-11">=</label>
  <label for="in-0-12">q</label>
  <label for="in-0-13">w</label>
  <label for="in-0-14">e</label>
  <label for="in-0-15">r</label>
  <label for="in-0-16">t</label>
  <label for="in-0-17">y</label>
  <label for="in-0-18">u</label>
  <label for="in-0-19">i</label>
  <label for="in-0-20">o</label>
  <label for="in-0-21">p</label>
  <label for="in-0-22">[</label>
  <label for="in-0-23">]</label>
  <label for="in-0-24">\</label>
  <label for="in-0-25">a</label>
  <label for="in-0-26">s</label>
  <label for="in-0-27">d</label>
  <label for="in-0-28">f</label>
  <label for="in-0-29">g</label>
  <label for="in-0-30">h</label>
  <label for="in-0-31">j</label>
  <label for="in-0-32">k</label>
  <label for="in-0-33">l</label>
  <label for="in-0-34">;</label>
  <label for="in-0-35">'</label>
  <label for="in-0-36">z</label>
  <label for="in-0-37">x</label>
  <label for="in-0-38">c</label>
  <label for="in-0-39">v</label>
  <label for="in-0-40">b</label>
  <label for="in-0-41">n</label>
  <label for="in-0-42">m</label>
  <label for="in-0-43">,</label>
  <label for="in-0-44">.</label>
  <label for="in-0-45">/</label>
  <label for="in-0-46">space</label>
  <label for="shift-0-shift">shift</label>
  <label for="in-0-delete">delete</label>
</section>
<section id="board-1">
  <label for="in-1-0">1</label>
  <label for="in-1-1">2</label>
  <label for="in-1-2">3</label>
  <label for="in-1-3">4</label>
  <label for="in-1-4">5</label>
  <label for="in-1-5">6</label>
  <label for="in-1-6">7</label>
  <label for="in-1-7">8</label>
  <label for="in-1-8">9</label>
  <label for="in-1-9">0</label>
  <label for="in-1-10">-</label>
  <label for="in-1-11">=</label>
  <label for="in-1-12">q</label>
  <label for="in-1-13">w</label>
  <label for="in-1-14">e</label>
  <label for="in-1-15">r</label>
  <label for="in-1-16">t</label>
  <label for="in-1-17">y</label>
  <label for="in-1-18">u</label>
  <label for="in-1-19">i</label>
  <label for="in-1-20">o</label>
  <label for="in-1-21">p</label>
  <label for="in-1-22">[</label>
  <label for="in-1-23">]</label>
  <label for="in-1-24">\</label>
  <label for="in-1-25">a</label>
  <label for="in-1-26">s</label>
  <label for="in-1-27">d</label>
  <label for="in-1-28">f</label>
  <label for="in-1-29">g</label>
  <label for="in-1-30">h</label>
  <label for="in-1-31">j</label>
  <label for="in-1-32">k</label>
  <label for="in-1-33">l</label>
  <label for="in-1-34">;</label>
  <label for="in-1-35">'</label>
  <label for="in-1-36">z</label>
  <label for="in-1-37">x</label>
  <label for="in-1-38">c</label>
  <label for="in-1-39">v</label>
  <label for="in-1-40">b</label>
  <label for="in-1-41">n</label>
  <label for="in-1-42">m</label>
  <label for="in-1-43">,</label>
  <label for="in-1-44">.</label>
  <label for="in-1-45">/</label>
  <label for="in-1-46">space</label>
  <label for="shift-1-shift">shift</label>
  <label for="in-1-delete">delete</label>
</section>
<section id="board-2">
  <label for="in-2-0">1</label>
  <label for="in-2-1">2</label>
  <label for="in-2-2">3</label>
  <label for="in-2-3">4</label>
  <label for="in-2-4">5</label>
  <label for="in-2-5">6</label>
  <label for="in-2-6">7</label>
  <label for="in-2-7">8</label>
  <label for="in-2-8">9</label>
  <label for="in-2-9">0</label>
  <label for="in-2-10">-</label>
  <label for="in-2-11">=</label>
  <label for="in-2-12">q</label>
  <label for="in-2-13">w</label>
  <label for="in-2-14">e</label>
  <label for="in-2-15">r</label>
  <label for="in-2-16">t</label>
  <label for="in-2-17">y</label>
  <label for="in-2-18">u</label>
  <label for="in-2-19">i</label>
  <label for="in-2-20">o</label>
  <label for="in-2-21">p</label>
  <label for="in-2-22">[</label>
  <label for="in-2-23">]</label>
  <label for="in-2-24">\</label>
  <label for="in-2-25">a</label>
  <label for="in-2-26">s</label>
  <label for="in-2-27">d</label>
  <label for="in-2-28">f</label>
  <label for="in-2-29">g</label>
  <label for="in-2-30">h</label>
  <label for="in-2-31">j</label>
  <label for="in-2-32">k</label>
  <label for="in-2-33">l</label>
  <label for="in-2-34">;</label>
  <label for="in-2-35">'</label>
  <label for="in-2-36">z</label>
  <label for="in-2-37">x</label>
  <label for="in-2-38">c</label>
  <label for="in-2-39">v</label>
  <label for="in-2-40">b</label>
  <label for="in-2-41">n</label>
  <label for="in-2-42">m</label>
  <label for="in-2-43">,</label>
  <label for="in-2-44">.</label>
  <label for="in-2-45">/</label>
  <label for="in-2-46">space</label>
  <label for="shift-2-shift">shift</label>
  <label for="in-2-delete">delete</label>
</section>
<section id="board-3">
  <label for="in-3-0">1</label>
  <label for="in-3-1">2</label>
  <label for="in-3-2">3</label>
  <label for="in-3-3">4</label>
  <label for="in-3-4">5</label>
  <label for="in-3-5">6</label>
  <label for="in-3-6">7</label>
  <label for="in-3-7">8</label>
  <label for="in-3-8">9</label>
  <label for="in-3-9">0</label>
  <label for="in-3-10">-</label>
  <label for="in-3-11">=</label>
  <label for="in-3-12">q</label>
  <label for="in-3-13">w</label>
  <label for="in-3-14">e</label>
  <label for="in-3-15">r</label>
  <label for="in-3-16">t</label>
  <label for="in-3-17">y</label>
  <label for="in-3-18">u</label>
  <label for="in-3-19">i</label>
  <label for="in-3-20">o</label>
  <label for="in-3-21">p</label>
  <label for="in-3-22">[</label>
  <label for="in-3-23">]</label>
  <label for="in-3-24">\</label>
  <label for="in-3-25">a</label>
  <label for="in-3-26">s</label>
  <label for="in-3-27">d</label>
  <label for="in-3-28">f</label>
  <label for="in-3-29">g</label>
  <label for="in-3-30">h</label>
  <label for="in-3-31">j</label>
  <label for="in-3-32">k</label>
  <label for="in-3-33">l</label>
  <label for="in-3-34">;</label>
  <label for="in-3-35">'</label>
  <label for="in-3-36">z</label>
  <label for="in-3-37">x</label>
  <label for="in-3-38">c</label>
  <label for="in-3-39">v</label>
  <label for="in-3-40">b</label>
  <label for="in-3-41">n</label>
  <label for="in-3-42">m</label>
  <label for="in-3-43">,</label>
  <label for="in-3-44">.</label>
  <label for="in-3-45">/</label>
  <label for="in-3-46">space</label>
  <label for="shift-3-shift">shift</label>
  <label for="in-3-delete">delete</label>
</section>
<section id="board-4">
  <label for="in-4-0">1</label>
  <label for="in-4-1">2</label>
  <label for="in-4-2">3</label>
  <label for="in-4-3">4</label>
  <label for="in-4-4">5</label>
  <label for="in-4-5">6</label>
  <label for="in-4-6">7</label>
  <label for="in-4-7">8</label>
  <label for="in-4-8">9</label>
  <label for="in-4-9">0</label>
  <label for="in-4-10">-</label>
  <label for="in-4-11">=</label>
  <label for="in-4-12">q</label>
  <label for="in-4-13">w</label>
  <label for="in-4-14">e</label>
  <label for="in-4-15">r</label>
  <label for="in-4-16">t</label>
  <label for="in-4-17">y</label>
  <label for="in-4-18">u</label>
  <label for="in-4-19">i</label>
  <label for="in-4-20">o</label>
  <label for="in-4-21">p</label>
  <label for="in-4-22">[</label>
  <label for="in-4-23">]</label>
  <label for="in-4-24">\</label>
  <label for="in-4-25">a</label>
  <label for="in-4-26">s</label>
  <label for="in-4-27">d</label>
  <label for="in-4-28">f</label>
  <label for="in-4-29">g</label>
  <label for="in-4-30">h</label>
  <label for="in-4-31">j</label>
  <label for="in-4-32">k</label>
  <label for="in-4-33">l</label>
  <label for="in-4-34">;</label>
  <label for="in-4-35">'</label>
  <label for="in-4-36">z</label>
  <label for="in-4-37">x</label>
  <label for="in-4-38">c</label>
  <label for="in-4-39">v</label>
  <label for="in-4-40">b</label>
  <label for="in-4-41">n</label>
  <label for="in-4-42">m</label>
  <label for="in-4-43">,</label>
  <label for="in-4-44">.</label>
  <label for="in-4-45">/</label>
  <label for="in-4-46">space</label>
  <label for="shift-4-shift">shift</label>
  <label for="in-4-delete">delete</label>
</section>
<section id="board-5">
  <label for="in-5-0">1</label>
  <label for="in-5-1">2</label>
  <label for="in-5-2">3</label>
  <label for="in-5-3">4</label>
  <label for="in-5-4">5</label>
  <label for="in-5-5">6</label>
  <label for="in-5-6">7</label>
  <label for="in-5-7">8</label>
  <label for="in-5-8">9</label>
  <label for="in-5-9">0</label>
  <label for="in-5-10">-</label>
  <label for="in-5-11">=</label>
  <label for="in-5-12">q</label>
  <label for="in-5-13">w</label>
  <label for="in-5-14">e</label>
  <label for="in-5-15">r</label>
  <label for="in-5-16">t</label>
  <label for="in-5-17">y</label>
  <label for="in-5-18">u</label>
  <label for="in-5-19">i</label>
  <label for="in-5-20">o</label>
  <label for="in-5-21">p</label>
  <label for="in-5-22">[</label>
  <label for="in-5-23">]</label>
  <label for="in-5-24">\</label>
  <label for="in-5-25">a</label>
  <label for="in-5-26">s</label>
  <label for="in-5-27">d</label>
  <label for="in-5-28">f</label>
  <label for="in-5-29">g</label>
  <label for="in-5-30">h</label>
  <label for="in-5-31">j</label>
  <label for="in-5-32">k</label>
  <label for="in-5-33">l</label>
  <label for="in-5-34">;</label>
  <label for="in-5-35">'</label>
  <label for="in-5-36">z</label>
  <label for="in-5-37">x</label>
  <label for="in-5-38">c</label>
  <label for="in-5-39">v</label>
  <label for="in-5-40">b</label>
  <label for="in-5-41">n</label>
  <label for="in-5-42">m</label>
  <label for="in-5-43">,</label>
  <label for="in-5-44">.</label>
  <label for="in-5-45">/</label>
  <label for="in-5-46">space</label>
  <label for="shift-5-shift">shift</label>
  <label for="in-5-delete">delete</label>
</section>
<section id="board-6">
  <label for="in-6-0">1</label>
  <label for="in-6-1">2</label>
  <label for="in-6-2">3</label>
  <label for="in-6-3">4</label>
  <label for="in-6-4">5</label>
  <label for="in-6-5">6</label>
  <label for="in-6-6">7</label>
  <label for="in-6-7">8</label>
  <label for="in-6-8">9</label>
  <label for="in-6-9">0</label>
  <label for="in-6-10">-</label>
  <label for="in-6-11">=</label>
  <label for="in-6-12">q</label>
  <label for="in-6-13">w</label>
  <label for="in-6-14">e</label>
  <label for="in-6-15">r</label>
  <label for="in-6-16">t</label>
  <label for="in-6-17">y</label>
  <label for="in-6-18">u</label>
  <label for="in-6-19">i</label>
  <label for="in-6-20">o</label>
  <label for="in-6-21">p</label>
  <label for="in-6-22">[</label>
  <label for="in-6-23">]</label>
  <label for="in-6-24">\</label>
  <label for="in-6-25">a</label>
  <label for="in-6-26">s</label>
  <label for="in-6-27">d</label>
  <label for="in-6-28">f</label>
  <label for="in-6-29">g</label>
  <label for="in-6-30">h</label>
  <label for="in-6-31">j</label>
  <label for="in-6-32">k</label>
  <label for="in-6-33">l</label>
  <label for="in-6-34">;</label>
  <label for="in-6-35">'</label>
  <label for="in-6-36">z</label>
  <label for="in-6-37">x</label>
  <label for="in-6-38">c</label>
  <label for="in-6-39">v</label>
  <label for="in-6-40">b</label>
  <label for="in-6-41">n</label>
  <label for="in-6-42">m</label>
  <label for="in-6-43">,</label>
  <label for="in-6-44">.</label>
  <label for="in-6-45">/</label>
  <label for="in-6-46">space</label>
  <label for="shift-6-shift">shift</label>
  <label for="in-6-delete">delete</label>
</section>
<section id="board-7">
  <label for="in-7-0">1</label>
  <label for="in-7-1">2</label>
  <label for="in-7-2">3</label>
  <label for="in-7-3">4</label>
  <label for="in-7-4">5</label>
  <label for="in-7-5">6</label>
  <label for="in-7-6">7</label>
  <label for="in-7-7">8</label>
  <label for="in-7-8">9</label>
  <label for="in-7-9">0</label>
  <label for="in-7-10">-</label>
  <label for="in-7-11">=</label>
  <label for="in-7-12">q</label>
  <label for="in-7-13">w</label>
  <label for="in-7-14">e</label>
  <label for="in-7-15">r</label>
  <label for="in-7-16">t</label>
  <label for="in-7-17">y</label>
  <label for="in-7-18">u</label>
  <label for="in-7-19">i</label>
  <label for="in-7-20">o</label>
  <label for="in-7-21">p</label>
  <label for="in-7-22">[</label>
  <label for="in-7-23">]</label>
  <label for="in-7-24">\</label>
  <label for="in-7-25">a</label>
  <label for="in-7-26">s</label>
  <label for="in-7-27">d</label>
  <label for="in-7-28">f</label>
  <label for="in-7-29">g</label>
  <label for="in-7-30">h</label>
  <label for="in-7-31">j</label>
  <label for="in-7-32">k</label>
  <label for="in-7-33">l</label>
  <label for="in-7-34">;</label>
  <label for="in-7-35">'</label>
  <label for="in-7-36">z</label>
  <label for="in-7-37">x</label>
  <label for="in-7-38">c</label>
  <label for="in-7-39">v</label>
  <label for="in-7-40">b</label>
  <label for="in-7-41">n</label>
  <label for="in-7-42">m</label>
  <label for="in-7-43">,</label>
  <label for="in-7-44">.</label>
  <label for="in-7-45">/</label>
  <label for="in-7-46">space</label>
  <label for="shift-7-shift">shift</label>
  <label for="in-7-delete">delete</label>
</section>
<section id="board-8">
  <label for="in-8-0">1</label>
  <label for="in-8-1">2</label>
  <label for="in-8-2">3</label>
  <label for="in-8-3">4</label>
  <label for="in-8-4">5</label>
  <label for="in-8-5">6</label>
  <label for="in-8-6">7</label>
  <label for="in-8-7">8</label>
  <label for="in-8-8">9</label>
  <label for="in-8-9">0</label>
  <label for="in-8-10">-</label>
  <label for="in-8-11">=</label>
  <label for="in-8-12">q</label>
  <label for="in-8-13">w</label>
  <label for="in-8-14">e</label>
  <label for="in-8-15">r</label>
  <label for="in-8-16">t</label>
  <label for="in-8-17">y</label>
  <label for="in-8-18">u</label>
  <label for="in-8-19">i</label>
  <label for="in-8-20">o</label>
  <label for="in-8-21">p</label>
  <label for="in-8-22">[</label>
  <label for="in-8-23">]</label>
  <label for="in-8-24">\</label>
  <label for="in-8-25">a</label>
  <label for="in-8-26">s</label>
  <label for="in-8-27">d</label>
  <label for="in-8-28">f</label>
  <label for="in-8-29">g</label>
  <label for="in-8-30">h</label>
  <label for="in-8-31">j</label>
  <label for="in-8-32">k</label>
  <label for="in-8-33">l</label>
  <label for="in-8-34">;</label>
  <label for="in-8-35">'</label>
  <label for="in-8-36">z</label>
  <label for="in-8-37">x</label>
  <label for="in-8-38">c</label>
  <label for="in-8-39">v</label>
  <label for="in-8-40">b</label>
  <label for="in-8-41">n</label>
  <label for="in-8-42">m</label>
  <label for="in-8-43">,</label>
  <label for="in-8-44">.</label>
  <label for="in-8-45">/</label>
  <label for="in-8-46">space</label>
  <label for="shift-8-shift">shift</label>
  <label for="in-8-delete">delete</label>
</section>
<section id="board-9">
  <label for="in-9-0">1</label>
  <label for="in-9-1">2</label>
  <label for="in-9-2">3</label>
  <label for="in-9-3">4</label>
  <label for="in-9-4">5</label>
  <label for="in-9-5">6</label>
  <label for="in-9-6">7</label>
  <label for="in-9-7">8</label>
  <label for="in-9-8">9</label>
  <label for="in-9-9">0</label>
  <label for="in-9-10">-</label>
  <label for="in-9-11">=</label>
  <label for="in-9-12">q</label>
  <label for="in-9-13">w</label>
  <label for="in-9-14">e</label>
  <label for="in-9-15">r</label>
  <label for="in-9-16">t</label>
  <label for="in-9-17">y</label>
  <label for="in-9-18">u</label>
  <label for="in-9-19">i</label>
  <label for="in-9-20">o</label>
  <label for="in-9-21">p</label>
  <label for="in-9-22">[</label>
  <label for="in-9-23">]</label>
  <label for="in-9-24">\</label>
  <label for="in-9-25">a</label>
  <label for="in-9-26">s</label>
  <label for="in-9-27">d</label>
  <label for="in-9-28">f</label>
  <label for="in-9-29">g</label>
  <label for="in-9-30">h</label>
  <label for="in-9-31">j</label>
  <label for="in-9-32">k</label>
  <label for="in-9-33">l</label>
  <label for="in-9-34">;</label>
  <label for="in-9-35">'</label>
  <label for="in-9-36">z</label>
  <label for="in-9-37">x</label>
  <label for="in-9-38">c</label>
  <label for="in-9-39">v</label>
  <label for="in-9-40">b</label>
  <label for="in-9-41">n</label>
  <label for="in-9-42">m</label>
  <label for="in-9-43">,</label>
  <label for="in-9-44">.</label>
  <label for="in-9-45">/</label>
  <label for="in-9-46">space</label>
  <label for="shift-9-shift">shift</label>
  <label for="in-9-delete">delete</label>
</section>
<section id="board-10">
  <label for="in-10-0">1</label>
  <label for="in-10-1">2</label>
  <label for="in-10-2">3</label>
  <label for="in-10-3">4</label>
  <label for="in-10-4">5</label>
  <label for="in-10-5">6</label>
  <label for="in-10-6">7</label>
  <label for="in-10-7">8</label>
  <label for="in-10-8">9</label>
  <label for="in-10-9">0</label>
  <label for="in-10-10">-</label>
  <label for="in-10-11">=</label>
  <label for="in-10-12">q</label>
  <label for="in-10-13">w</label>
  <label for="in-10-14">e</label>
  <label for="in-10-15">r</label>
  <label for="in-10-16">t</label>
  <label for="in-10-17">y</label>
  <label for="in-10-18">u</label>
  <label for="in-10-19">i</label>
  <label for="in-10-20">o</label>
  <label for="in-10-21">p</label>
  <label for="in-10-22">[</label>
  <label for="in-10-23">]</label>
  <label for="in-10-24">\</label>
  <label for="in-10-25">a</label>
  <label for="in-10-26">s</label>
  <label for="in-10-27">d</label>
  <label for="in-10-28">f</label>
  <label for="in-10-29">g</label>
  <label for="in-10-30">h</label>
  <label for="in-10-31">j</label>
  <label for="in-10-32">k</label>
  <label for="in-10-33">l</label>
  <label for="in-10-34">;</label>
  <label for="in-10-35">'</label>
  <label for="in-10-36">z</label>
  <label for="in-10-37">x</label>
  <label for="in-10-38">c</label>
  <label for="in-10-39">v</label>
  <label for="in-10-40">b</label>
  <label for="in-10-41">n</label>
  <label for="in-10-42">m</label>
  <label for="in-10-43">,</label>
  <label for="in-10-44">.</label>
  <label for="in-10-45">/</label>
  <label for="in-10-46">space</label>
  <label for="shift-10-shift">shift</label>
  <label for="in-10-delete">delete</label>
</section>
<section id="board-11">
  <label for="in-11-0">1</label>
  <label for="in-11-1">2</label>
  <label for="in-11-2">3</label>
  <label for="in-11-3">4</label>
  <label for="in-11-4">5</label>
  <label for="in-11-5">6</label>
  <label for="in-11-6">7</label>
  <label for="in-11-7">8</label>
  <label for="in-11-8">9</label>
  <label for="in-11-9">0</label>
  <label for="in-11-10">-</label>
  <label for="in-11-11">=</label>
  <label for="in-11-12">q</label>
  <label for="in-11-13">w</label>
  <label for="in-11-14">e</label>
  <label for="in-11-15">r</label>
  <label for="in-11-16">t</label>
  <label for="in-11-17">y</label>
  <label for="in-11-18">u</label>
  <label for="in-11-19">i</label>
  <label for="in-11-20">o</label>
  <label for="in-11-21">p</label>
  <label for="in-11-22">[</label>
  <label for="in-11-23">]</label>
  <label for="in-11-24">\</label>
  <label for="in-11-25">a</label>
  <label for="in-11-26">s</label>
  <label for="in-11-27">d</label>
  <label for="in-11-28">f</label>
  <label for="in-11-29">g</label>
  <label for="in-11-30">h</label>
  <label for="in-11-31">j</label>
  <label for="in-11-32">k</label>
  <label for="in-11-33">l</label>
  <label for="in-11-34">;</label>
  <label for="in-11-35">'</label>
  <label for="in-11-36">z</label>
  <label for="in-11-37">x</label>
  <label for="in-11-38">c</label>
  <label for="in-11-39">v</label>
  <label for="in-11-40">b</label>
  <label for="in-11-41">n</label>
  <label for="in-11-42">m</label>
  <label for="in-11-43">,</label>
  <label for="in-11-44">.</label>
  <label for="in-11-45">/</label>
  <label for="in-11-46">space</label>
  <label for="shift-11-shift">shift</label>
  <label for="in-11-delete">delete</label>
</section>
<section id="board-12">
  <label for="in-12-0">1</label>
  <label for="in-12-1">2</label>
  <label for="in-12-2">3</label>
  <label for="in-12-3">4</label>
  <label for="in-12-4">5</label>
  <label for="in-12-5">6</label>
  <label for="in-12-6">7</label>
  <label for="in-12-7">8</label>
  <label for="in-12-8">9</label>
  <label for="in-12-9">0</label>
  <label for="in-12-10">-</label>
  <label for="in-12-11">=</label>
  <label for="in-12-12">q</label>
  <label for="in-12-13">w</label>
  <label for="in-12-14">e</label>
  <label for="in-12-15">r</label>
  <label for="in-12-16">t</label>
  <label for="in-12-17">y</label>
  <label for="in-12-18">u</label>
  <label for="in-12-19">i</label>
  <label for="in-12-20">o</label>
  <label for="in-12-21">p</label>
  <label for="in-12-22">[</label>
  <label for="in-12-23">]</label>
  <label for="in-12-24">\</label>
  <label for="in-12-25">a</label>
  <label for="in-12-26">s</label>
  <label for="in-12-27">d</label>
  <label for="in-12-28">f</label>
  <label for="in-12-29">g</label>
  <label for="in-12-30">h</label>
  <label for="in-12-31">j</label>
  <label for="in-12-32">k</label>
  <label for="in-12-33">l</label>
  <label for="in-12-34">;</label>
  <label for="in-12-35">'</label>
  <label for="in-12-36">z</label>
  <label for="in-12-37">x</label>
  <label for="in-12-38">c</label>
  <label for="in-12-39">v</label>
  <label for="in-12-40">b</label>
  <label for="in-12-41">n</label>
  <label for="in-12-42">m</label>
  <label for="in-12-43">,</label>
  <label for="in-12-44">.</label>
  <label for="in-12-45">/</label>
  <label for="in-12-46">space</label>
  <label for="shift-12-shift">shift</label>
  <label for="in-12-delete">delete</label>
</section>
<section id="board-13">
  <label for="in-13-0">1</label>
  <label for="in-13-1">2</label>
  <label for="in-13-2">3</label>
  <label for="in-13-3">4</label>
  <label for="in-13-4">5</label>
  <label for="in-13-5">6</label>
  <label for="in-13-6">7</label>
  <label for="in-13-7">8</label>
  <label for="in-13-8">9</label>
  <label for="in-13-9">0</label>
  <label for="in-13-10">-</label>
  <label for="in-13-11">=</label>
  <label for="in-13-12">q</label>
  <label for="in-13-13">w</label>
  <label for="in-13-14">e</label>
  <label for="in-13-15">r</label>
  <label for="in-13-16">t</label>
  <label for="in-13-17">y</label>
  <label for="in-13-18">u</label>
  <label for="in-13-19">i</label>
  <label for="in-13-20">o</label>
  <label for="in-13-21">p</label>
  <label for="in-13-22">[</label>
  <label for="in-13-23">]</label>
  <label for="in-13-24">\</label>
  <label for="in-13-25">a</label>
  <label for="in-13-26">s</label>
  <label for="in-13-27">d</label>
  <label for="in-13-28">f</label>
  <label for="in-13-29">g</label>
  <label for="in-13-30">h</label>
  <label for="in-13-31">j</label>
  <label for="in-13-32">k</label>
  <label for="in-13-33">l</label>
  <label for="in-13-34">;</label>
  <label for="in-13-35">'</label>
  <label for="in-13-36">z</label>
  <label for="in-13-37">x</label>
  <label for="in-13-38">c</label>
  <label for="in-13-39">v</label>
  <label for="in-13-40">b</label>
  <label for="in-13-41">n</label>
  <label for="in-13-42">m</label>
  <label for="in-13-43">,</label>
  <label for="in-13-44">.</label>
  <label for="in-13-45">/</label>
  <label for="in-13-46">space</label>
  <label for="shift-13-shift">shift</label>
  <label for="in-13-delete">delete</label>
</section>
<section id="board-14">
  <label for="in-14-0">1</label>
  <label for="in-14-1">2</label>
  <label for="in-14-2">3</label>
  <label for="in-14-3">4</label>
  <label for="in-14-4">5</label>
  <label for="in-14-5">6</label>
  <label for="in-14-6">7</label>
  <label for="in-14-7">8</label>
  <label for="in-14-8">9</label>
  <label for="in-14-9">0</label>
  <label for="in-14-10">-</label>
  <label for="in-14-11">=</label>
  <label for="in-14-12">q</label>
  <label for="in-14-13">w</label>
  <label for="in-14-14">e</label>
  <label for="in-14-15">r</label>
  <label for="in-14-16">t</label>
  <label for="in-14-17">y</label>
  <label for="in-14-18">u</label>
  <label for="in-14-19">i</label>
  <label for="in-14-20">o</label>
  <label for="in-14-21">p</label>
  <label for="in-14-22">[</label>
  <label for="in-14-23">]</label>
  <label for="in-14-24">\</label>
  <label for="in-14-25">a</label>
  <label for="in-14-26">s</label>
  <label for="in-14-27">d</label>
  <label for="in-14-28">f</label>
  <label for="in-14-29">g</label>
  <label for="in-14-30">h</label>
  <label for="in-14-31">j</label>
  <label for="in-14-32">k</label>
  <label for="in-14-33">l</label>
  <label for="in-14-34">;</label>
  <label for="in-14-35">'</label>
  <label for="in-14-36">z</label>
  <label for="in-14-37">x</label>
  <label for="in-14-38">c</label>
  <label for="in-14-39">v</label>
  <label for="in-14-40">b</label>
  <label for="in-14-41">n</label>
  <label for="in-14-42">m</label>
  <label for="in-14-43">,</label>
  <label for="in-14-44">.</label>
  <label for="in-14-45">/</label>
  <label for="in-14-46">space</label>
  <label for="shift-14-shift">shift</label>
  <label for="in-14-delete">delete</label>
</section>
<section id="board-15">
  <label for="in-15-0">1</label>
  <label for="in-15-1">2</label>
  <label for="in-15-2">3</label>
  <label for="in-15-3">4</label>
  <label for="in-15-4">5</label>
  <label for="in-15-5">6</label>
  <label for="in-15-6">7</label>
  <label for="in-15-7">8</label>
  <label for="in-15-8">9</label>
  <label for="in-15-9">0</label>
  <label for="in-15-10">-</label>
  <label for="in-15-11">=</label>
  <label for="in-15-12">q</label>
  <label for="in-15-13">w</label>
  <label for="in-15-14">e</label>
  <label for="in-15-15">r</label>
  <label for="in-15-16">t</label>
  <label for="in-15-17">y</label>
  <label for="in-15-18">u</label>
  <label for="in-15-19">i</label>
  <label for="in-15-20">o</label>
  <label for="in-15-21">p</label>
  <label for="in-15-22">[</label>
  <label for="in-15-23">]</label>
  <label for="in-15-24">\</label>
  <label for="in-15-25">a</label>
  <label for="in-15-26">s</label>
  <label for="in-15-27">d</label>
  <label for="in-15-28">f</label>
  <label for="in-15-29">g</label>
  <label for="in-15-30">h</label>
  <label for="in-15-31">j</label>
  <label for="in-15-32">k</label>
  <label for="in-15-33">l</label>
  <label for="in-15-34">;</label>
  <label for="in-15-35">'</label>
  <label for="in-15-36">z</label>
  <label for="in-15-37">x</label>
  <label for="in-15-38">c</label>
  <label for="in-15-39">v</label>
  <label for="in-15-40">b</label>
  <label for="in-15-41">n</label>
  <label for="in-15-42">m</label>
  <label for="in-15-43">,</label>
  <label for="in-15-44">.</label>
  <label for="in-15-45">/</label>
  <label for="in-15-46">space</label>
  <label for="shift-15-shift">shift</label>
  <label for="in-15-delete">delete</label>
</section>
<section id="board-16">
  <label for="in-16-0">1</label>
  <label for="in-16-1">2</label>
  <label for="in-16-2">3</label>
  <label for="in-16-3">4</label>
  <label for="in-16-4">5</label>
  <label for="in-16-5">6</label>
  <label for="in-16-6">7</label>
  <label for="in-16-7">8</label>
  <label for="in-16-8">9</label>
  <label for="in-16-9">0</label>
  <label for="in-16-10">-</label>
  <label for="in-16-11">=</label>
  <label for="in-16-12">q</label>
  <label for="in-16-13">w</label>
  <label for="in-16-14">e</label>
  <label for="in-16-15">r</label>
  <label for="in-16-16">t</label>
  <label for="in-16-17">y</label>
  <label for="in-16-18">u</label>
  <label for="in-16-19">i</label>
  <label for="in-16-20">o</label>
  <label for="in-16-21">p</label>
  <label for="in-16-22">[</label>
  <label for="in-16-23">]</label>
  <label for="in-16-24">\</label>
  <label for="in-16-25">a</label>
  <label for="in-16-26">s</label>
  <label for="in-16-27">d</label>
  <label for="in-16-28">f</label>
  <label for="in-16-29">g</label>
  <label for="in-16-30">h</label>
  <label for="in-16-31">j</label>
  <label for="in-16-32">k</label>
  <label for="in-16-33">l</label>
  <label for="in-16-34">;</label>
  <label for="in-16-35">'</label>
  <label for="in-16-36">z</label>
  <label for="in-16-37">x</label>
  <label for="in-16-38">c</label>
  <label for="in-16-39">v</label>
  <label for="in-16-40">b</label>
  <label for="in-16-41">n</label>
  <label for="in-16-42">m</label>
  <label for="in-16-43">,</label>
  <label for="in-16-44">.</label>
  <label for="in-16-45">/</label>
  <label for="in-16-46">space</label>
  <label for="shift-16-shift">shift</label>
  <label for="in-16-delete">delete</label>
</section>
<section id="board-17">
  <label for="in-17-0">1</label>
  <label for="in-17-1">2</label>
  <label for="in-17-2">3</label>
  <label for="in-17-3">4</label>
  <label for="in-17-4">5</label>
  <label for="in-17-5">6</label>
  <label for="in-17-6">7</label>
  <label for="in-17-7">8</label>
  <label for="in-17-8">9</label>
  <label for="in-17-9">0</label>
  <label for="in-17-10">-</label>
  <label for="in-17-11">=</label>
  <label for="in-17-12">q</label>
  <label for="in-17-13">w</label>
  <label for="in-17-14">e</label>
  <label for="in-17-15">r</label>
  <label for="in-17-16">t</label>
  <label for="in-17-17">y</label>
  <label for="in-17-18">u</label>
  <label for="in-17-19">i</label>
  <label for="in-17-20">o</label>
  <label for="in-17-21">p</label>
  <label for="in-17-22">[</label>
  <label for="in-17-23">]</label>
  <label for="in-17-24">\</label>
  <label for="in-17-25">a</label>
  <label for="in-17-26">s</label>
  <label for="in-17-27">d</label>
  <label for="in-17-28">f</label>
  <label for="in-17-29">g</label>
  <label for="in-17-30">h</label>
  <label for="in-17-31">j</label>
  <label for="in-17-32">k</label>
  <label for="in-17-33">l</label>
  <label for="in-17-34">;</label>
  <label for="in-17-35">'</label>
  <label for="in-17-36">z</label>
  <label for="in-17-37">x</label>
  <label for="in-17-38">c</label>
  <label for="in-17-39">v</label>
  <label for="in-17-40">b</label>
  <label for="in-17-41">n</label>
  <label for="in-17-42">m</label>
  <label for="in-17-43">,</label>
  <label for="in-17-44">.</label>
  <label for="in-17-45">/</label>
  <label for="in-17-46">space</label>
  <label for="shift-17-shift">shift</label>
  <label for="in-17-delete">delete</label>
</section>
<section id="board-18">
  <label for="in-18-0">1</label>
  <label for="in-18-1">2</label>
  <label for="in-18-2">3</label>
  <label for="in-18-3">4</label>
  <label for="in-18-4">5</label>
  <label for="in-18-5">6</label>
  <label for="in-18-6">7</label>
  <label for="in-18-7">8</label>
  <label for="in-18-8">9</label>
  <label for="in-18-9">0</label>
  <label for="in-18-10">-</label>
  <label for="in-18-11">=</label>
  <label for="in-18-12">q</label>
  <label for="in-18-13">w</label>
  <label for="in-18-14">e</label>
  <label for="in-18-15">r</label>
  <label for="in-18-16">t</label>
  <label for="in-18-17">y</label>
  <label for="in-18-18">u</label>
  <label for="in-18-19">i</label>
  <label for="in-18-20">o</label>
  <label for="in-18-21">p</label>
  <label for="in-18-22">[</label>
  <label for="in-18-23">]</label>
  <label for="in-18-24">\</label>
  <label for="in-18-25">a</label>
  <label for="in-18-26">s</label>
  <label for="in-18-27">d</label>
  <label for="in-18-28">f</label>
  <label for="in-18-29">g</label>
  <label for="in-18-30">h</label>
  <label for="in-18-31">j</label>
  <label for="in-18-32">k</label>
  <label for="in-18-33">l</label>
  <label for="in-18-34">;</label>
  <label for="in-18-35">'</label>
  <label for="in-18-36">z</label>
  <label for="in-18-37">x</label>
  <label for="in-18-38">c</label>
  <label for="in-18-39">v</label>
  <label for="in-18-40">b</label>
  <label for="in-18-41">n</label>
  <label for="in-18-42">m</label>
  <label for="in-18-43">,</label>
  <label for="in-18-44">.</label>
  <label for="in-18-45">/</label>
  <label for="in-18-46">space</label>
  <label for="shift-18-shift">shift</label>
  <label for="in-18-delete">delete</label>
</section>
<section id="board-19">
  <label for="in-19-0">1</label>
  <label for="in-19-1">2</label>
  <label for="in-19-2">3</label>
  <label for="in-19-3">4</label>
  <label for="in-19-4">5</label>
  <label for="in-19-5">6</label>
  <label for="in-19-6">7</label>
  <label for="in-19-7">8</label>
  <label for="in-19-8">9</label>
  <label for="in-19-9">0</label>
  <label for="in-19-10">-</label>
  <label for="in-19-11">=</label>
  <label for="in-19-12">q</label>
  <label for="in-19-13">w</label>
  <label for="in-19-14">e</label>
  <label for="in-19-15">r</label>
  <label for="in-19-16">t</label>
  <label for="in-19-17">y</label>
  <label for="in-19-18">u</label>
  <label for="in-19-19">i</label>
  <label for="in-19-20">o</label>
  <label for="in-19-21">p</label>
  <label for="in-19-22">[</label>
  <label for="in-19-23">]</label>
  <label for="in-19-24">\</label>
  <label for="in-19-25">a</label>
  <label for="in-19-26">s</label>
  <label for="in-19-27">d</label>
  <label for="in-19-28">f</label>
  <label for="in-19-29">g</label>
  <label for="in-19-30">h</label>
  <label for="in-19-31">j</label>
  <label for="in-19-32">k</label>
  <label for="in-19-33">l</label>
  <label for="in-19-34">;</label>
  <label for="in-19-35">'</label>
  <label for="in-19-36">z</label>
  <label for="in-19-37">x</label>
  <label for="in-19-38">c</label>
  <label for="in-19-39">v</label>
  <label for="in-19-40">b</label>
  <label for="in-19-41">n</label>
  <label for="in-19-42">m</label>
  <label for="in-19-43">,</label>
  <label for="in-19-44">.</label>
  <label for="in-19-45">/</label>
  <label for="in-19-46">space</label>
  <label for="shift-19-shift">shift</label>
  <label for="in-19-delete">delete</label>
</section>
<section id="board-20">
  <label for="in-20-0">1</label>
  <label for="in-20-1">2</label>
  <label for="in-20-2">3</label>
  <label for="in-20-3">4</label>
  <label for="in-20-4">5</label>
  <label for="in-20-5">6</label>
  <label for="in-20-6">7</label>
  <label for="in-20-7">8</label>
  <label for="in-20-8">9</label>
  <label for="in-20-9">0</label>
  <label for="in-20-10">-</label>
  <label for="in-20-11">=</label>
  <label for="in-20-12">q</label>
  <label for="in-20-13">w</label>
  <label for="in-20-14">e</label>
  <label for="in-20-15">r</label>
  <label for="in-20-16">t</label>
  <label for="in-20-17">y</label>
  <label for="in-20-18">u</label>
  <label for="in-20-19">i</label>
  <label for="in-20-20">o</label>
  <label for="in-20-21">p</label>
  <label for="in-20-22">[</label>
  <label for="in-20-23">]</label>
  <label for="in-20-24">\</label>
  <label for="in-20-25">a</label>
  <label for="in-20-26">s</label>
  <label for="in-20-27">d</label>
  <label for="in-20-28">f</label>
  <label for="in-20-29">g</label>
  <label for="in-20-30">h</label>
  <label for="in-20-31">j</label>
  <label for="in-20-32">k</label>
  <label for="in-20-33">l</label>
  <label for="in-20-34">;</label>
  <label for="in-20-35">'</label>
  <label for="in-20-36">z</label>
  <label for="in-20-37">x</label>
  <label for="in-20-38">c</label>
  <label for="in-20-39">v</label>
  <label for="in-20-40">b</label>
  <label for="in-20-41">n</label>
  <label for="in-20-42">m</label>
  <label for="in-20-43">,</label>
  <label for="in-20-44">.</label>
  <label for="in-20-45">/</label>
  <label for="in-20-46">space</label>
  <label for="shift-20-shift">shift</label>
  <label for="in-20-delete">delete</label>
</section>
<label for="show-radios">Inputs</label>

style.scss

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
$alpha: 1,2,3,4,5,6,7,8,9,0,"-","=",q,w,e,r,t,y,u,i,o,p,"[","]","\\",a,s,d,f,g,h,j,k,l,";","'",z,x,c,v,b,n,m,",",".","/","space";
$alpha-shift: "!","@","#","$","%","^","&","*","(",")","_","+",Q,W,E,R,T,Y,U,I,O,P,"{","}","|",A,S,D,F,G,H,J,K,L,":",'"',Z,X,C,V,B,N,M,"<",">","?","space";
$board-count: 20;

// build out the selectors for hiding and showing keyboards
// as well as toggling shift and the active state for delete and shift
// labels do not have active states, because they pass it along to their `for` input.
// therefore, to style the "active" state of a label, you do input#id:active ~ label[for="id"] { the style }
$initial-checked-sel: "";
$board-hide-sel: "";
$board-show-sel: "";
$shift-key-sel: "";
$shift-board-sel: "";
$active-sel: "";
@for $i from 0 through $board-count {
  // active states for delete and shift keys
  $active-sel: $active-sel + "#in-#{$i}-delete:active  ~ section#board-#{$i} [for=\"in-#{$i}-delete\"],";
  $active-sel: $active-sel + "#shift-#{$i}-shift:active  ~ section#board-#{$i} [for=\"shift-#{$i}-shift\"],";
  // when shift is checked, style its label to indicate shifting
  $shift-key-sel: $shift-key-sel + "#shift-#{$i}-shift:checked ~ section [for=\"shift-#{$i}-shift\"],";
  // update the board when shift is selected
  $shift-board-sel: $shift-board-sel + "#shift-#{$i}-shift:checked ~ #board-#{$i},";
  // show hide the current character's board
  $board-hide-sel: $board-hide-sel + "[id^=\"in-#{$i}-\"]:not(#in-#{$i}-delete):checked ~ #board-#{$i}:not(:first-of-type), ";
  $board-show-sel: $board-show-sel + "[id^=\"in-#{$i}-\"]:not(#in-#{$i}-delete):checked ~ #board-#{$i + 1}, ";
  @if($i < $board-count - 1) {
    // we need delete keys, since a board's delete is in the _next_ board.
    $initial-checked-sel: $initial-checked-sel + "#in-#{$i + 1}-delete:checked";
    // if less than second to last add tilde to chain the delete key selectors above
    @if($i < $board-count - 2) {
      $initial-checked-sel: $initial-checked-sel + " ~ ";
    }
  }
}

// build out the selectors for output and active state
// for each letter
@for $a from 0 through length($alpha) - 1 {
  $letter-output-sel: "";
  $letter-cap-output-sel: "";
  // for each board
  @for $i from 0 through $board-count {
    // add that board's instance of the letter
    // for the :active state of the input
    $active-sel: $active-sel + "#in-#{$i}-#{$a}:active ~ section#board-#{$i} [for=\"in-#{$i}-#{$a}\"],";
    // for the :checked without shift state of the input
    $letter-output-sel: $letter-output-sel + "#in-#{$i}-#{$a}:checked ~ #shift-#{$i}-shift:not(:checked) ~ #out #out-#{$i}::after, ";
    // for the :checked with shift state of the input
    $letter-cap-output-sel: $letter-cap-output-sel + "#in-#{$i}-#{$a}:checked ~ #shift-#{$i}-shift:checked ~ #out #out-#{$i}::after, ";
  }
  // grab the value for lower and shifted
  $low: nth($alpha, $a + 1);
  $cap: nth($alpha-shift, $a + 1);
  // if letter is "space", change the pseudo content to render as space
  @if $low == "space" { $low: "\00a0"; }
  @if $cap == "space" { $cap: "\00a0"; }
  // set the content.
  #{$letter-output-sel} { content: "#{$low}"; }
  #{$letter-cap-output-sel} { content: "#{$cap}"; }
}

// when input is active, style its label
#{$shift-key-sel},
#{$active-sel} {
  background: #BBB;
  color: #FFF;
  box-shadow: 0px 0px 0px 1px #AAA;
}

// when shifted, uppercase dat ish
#{$shift-board-sel} {
  text-transform: uppercase;
}

// hide all boards
[id^="board-"],
#{$board-hide-sel} {
  display: none;
}

// show board when active
#{$board-show-sel},
#{$initial-checked-sel} ~ #board-0 {
  display: flex;
}

// style keyboard
$gutter: 4px;
$label-h: 56px;
[id^="board-"] {
  width: 740px;
  margin: 1rem auto;
  box-sizing: border-box;
  padding: $gutter * 2;  
  border-radius: 4px;
  background: #EEE;
  box-shadow: 0px 1px 0px 2px #DDD;
  flex-wrap: wrap;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}
  
  // full labels
  label[for^="shift-"],
  label[for$="-46"],
  label[for$="-delete"] {
    text-transform: none;
    font-size: 0.8em;
    line-height: $label-h * 1.5!important;
  }
  label[for^="shift-"] { 
    flex-basis: calc(20% - #{$gutter * 2});
    order: 101; 
    text-align: left!important;
  }
  label[for$="-46"] {
    color: white;
    flex-basis: calc(60% - #{$gutter * 2});
    order: 102;
  }
  label[for$="-delete"] {
    flex-basis: calc(20% - #{$gutter * 2});
    order: 103;
    text-align: right!important;
  }
  
  [id^="board-"] label { 
    text-align: center; 
    box-sizing: border-box;
    height: $label-h;
    line-height: $label-h;
    padding: 0 0.5rem;
    margin: $gutter;
    user-select: none;
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 1px 0px 2px #DDD;
    cursor: pointer;
    position: relative;
    &:hover {
      box-shadow: 0px 0px 0px 1px #AAA;
    }
    &::before {
      font-size: 0.8em;
      display: block;
      text-align: center;
      line-height: 2;
      margin-bottom: $label-h / -4;
      left: 0;
    }
  }
  
  // justify rows. using this map as a guide for which letters on which rows
  $rows: (
    (1,2,3,4,5,6,7,8,9,0,"-","="),
    (q,w,e,r,t,y,u,i,o,p,"[","]","\\"),
    (a,s,d,f,g,h,j,k,l,";","'"),
    (z,x,c,v,b,n,m,",",".","/")
  );
  // verify a char is not a number or symbol by checking against this map
  $letter: (z,x,c,v,b,n,m,a,s,d,f,g,h,j,k,l,q,w,e,r,t,y,u,i,o,p);
  // track the global index by adding to this on each loop through rows
  $add: 0;
  // for eac hrow
  @each $r in $rows {
    $sel: "";
    $count: length($r);
    $rat: 1 / $count;
    // for each item in row
    @for $a from 0 through length($r) - 1 { 
      // make a label selector
      $sel: $sel + "[for$=\"-#{$a + $add}\"], "; 
      // add symbol if not an uppercase on shift
      $shift: nth($alpha-shift, $add + $a + 1);
      $let: nth($alpha, $add + $a + 1);
      $is-letter: index($letter, $let);
      @if $is-letter {
      } @else {
        // override with shift content
        [for$="-#{$a + $add}"]::before {
          content: "#{$shift}";
        }
      }
    }
    // increase the master counter
    $add: $add + $count;
    // give each item in row the same equally divided flex-basis for perfect wrapping
    #{$sel} { flex-basis: calc(#{$rat * 100%} - #{$gutter * 2}); }
  }

// deactivate on last
#board-#{$board-count} label:not([for$="-delete"]) {
  background: #BBB;
  color: #999;
  box-shadow: 0px 0px 0px 1px #AAA;
  font-style: italic;
  pointer-events: none;
}

$out-size: 12rem;
$out-font: 2.4rem;
#out {
  height: $out-size;
  width: 740px;
  margin: 1rem auto;
  font-size: $out-font;
  line-height: $out-size;
  text-align: center;
  padding: 1rem 0;
  background: #222;
  color: white;
  border-radius: 4px;
  text-shadow: 1px 1px 0px black;
  box-shadow: 0px 1px 0px 2px #111;  
  span {
    border-bottom: 1px solid #CCC;
  }
}

body {
  background: #36494E;
  text-align: center;
  padding: 1rem;
}

[for="show-radios"] {
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  background: #222;
  color: #CCC;
  cursor: pointer;
  box-shadow: 0px 0px 0px 2px black;
  border-radius: 4px;
  display: inline-block;
  margin: 1rem 0 0;
  user-select: none;
  &:hover {
    box-shadow: 0px 0px 0px 1px black;
  }
  &::before {
    content: "Show ";
  }
}

#show-radios {
  position: absolute;
  top: -100px;  
  &:not(:checked) ~ input {
    position: absolute;
    top: -100px;
  }
  &:active ~ [for="show-radios"] {
    background: #333;
  }
  &:checked ~ [for="show-radios"]::before {
    content: "Hide ";
  }
}