html {font-family:sans-serif;font-size:62.5%;height:100%;}
body {background-color:#fff;color:#000;display:flex;font-size:1.6rem;height:100%;margin:0;text-align:center;}

main {flex:1;overflow-y:scroll;padding-top:4rem;}

.tab {position:relative;}
.template {display:none;}

.edit {display:none;position:absolute;left:calc(100% + 1rem);top:0;text-align:left;white-space:nowrap;}
.tab:hover .edit {display:block;}
.edit div {background-color:#f6f6f6;border-radius:0.5rem;cursor:pointer;display:inline-block;line-height:2.4rem;margin-bottom:0.5rem;padding:0 0.25rem;vertical-align:middle;}
.edit div:hover {background-color:#eee;}
.edit div:hover + div {display:none;}
.edit div span {display:inline-block;pointer-events:none;text-align:center;width:1.25em;}
.edit div:hover:after {content:attr(data-label);font-size:0.8em;line-height:2rem;margin-right:0.75rem;vertical-align:middle;}

.button[name="addLine"] {border-radius:0.5rem;cursor:pointer;display:inline-block;line-height:2.5rem;margin:1rem auto 20rem;padding-bottom:0.25rem;width:20rem;}
.button[name="addLine"]:hover {background-color:#eee;}

input[for] {background:#fff none;border:none;border-radius:0.5rem;box-sizing:border-box;display:block;margin:1rem auto 0;padding:0.5rem;width:100%;max-width:69.5rem;}
input[for]:hover, input[for]:focus {background-color:#f4f4f4;}
.line {background:repeating-linear-gradient(180deg, black, black 1px, transparent 1px, transparent 2rem);display:inline-block;margin:1.5rem auto;padding-bottom:1px;position:relative;}
.line:before {color:#ccc;content:attr(index);font-size:0.8em;padding-right:1rem;position:absolute;right:100%;top:0;}

.block {border-right:1px solid black;display:inline-block;padding:0 0.5rem;position:relative;}
.block:first-child {border-left:1px solid black;}

.beat {display:inline-block;margin:-1rem 0;vertical-align:bottom;}
.beat.active {background-color:rgba(224,0,0,0.25);}

.note {cursor:pointer;font-weight:bold;line-height:2rem;position:relative;width:2rem;height:2rem;}
.note:hover {box-shadow:0 0 0 1px #d00 inset;}
.note:not(:empty) {background-color:white;}
.beat.active .note[name] {background-color:#f7bfbf;}

.note[name]:before, .note[name]:after {pointer-events:none;position:absolute;z-index:1;}
.note[name]:hover:before {background-color:#222;border-radius:2px;color:#fff;content:attr(name);font-size:0.8em;padding:0.2rem 0;bottom:2.5rem;left:-1rem;width:4rem;}
.note[name]:hover:after {border:0.5rem solid #222;border-color:#222 transparent transparent;content:'';bottom:1.5rem;left:0.5rem;}

body.strings4 .note[string="4"],
body.strings4 .note[string="5"],
body.strings5 .note[string="5"],
body.strings4 #keyboard-strings [string="4"],
body.strings4 #keyboard-strings [string="5"],
body.strings5 #keyboard-strings [string="5"] {display:none;}