#flybox {background:#000;}
#flytxt {background:#900; border:2px solid #B00; color:#FFF;}
#flybox {position:absolute; width:100%; height:100%; left:-110%; z-index:100; opacity:0; transition: opacity 0.6s ;}
#flytxt {position:relative; width:80%; height:50%; left:-110%; top:20%; z-index:101; opacity:1; padding:10px 5%; border-radius:12px;text-align:left; font-size:1em; line-height:1.3em; font-weight:bold;}
#flytxt li {margin:5px 5px 5px 18px;}

/* .csAcc {color:white;}
.day {color:black;} */


/* border:1px solid #292909 */

h1 {border-bottom: 1px solid #292909;}
.day h1 {border-bottom: 1px solid #E9E9E5;}
h2, .repeatedH2 {color:#608888;}
.day h2, .day .repeatedH2 {color:#268;}

h1.tabSummDescr {border: 1px solid #554;}
.tabSummDescrSpacer {border: 1px solid #554;}
h1.tabSummDescr.dimmed {color:#665;}


#warningsTxt h3 {color:#C22;}
.blue #warningsTxt h3 {color:#D33 !important;}
.blue #warningsTxt {color:#FFF;}

#descrScreen p {color:#CCC9B0;}
.day #descrScreen p {color:#110;}
.blue #descrScreen p {color:#DDC;}


.browseDot {border:1px solid #554;}
.browseDot.active {background:#332;}
.day .browseDot {border:1px solid #AA9;}
.day .browseDot.active {background:#E9E9E5;}
.blue .browseDot {border:1px solid #888;}
.blue .browseDot.active {background:#A30;}

/* Summary Colors */
.pianoKey {background:#333330; border:2px solid #161513;}
.pianoKey.black {background:#232320;}
.day .pianoKey {background:#DDDDDA; border:1px solid #FFF;}
.day .pianoKey.black {background:#555550; color:#FFF;}


/* #brickBox, #intbtnbox {border:1px dotted #443;} */
.intBtn, .brick {background:#191915; color:#998;}
.day .intBtn, .day .brick {background:#FFF; color:#998;}
.blue .brick {background:none;}

/*.intBtn.black {background:#221; color:#998;}
.intBtn.white {background:#221; color:#998;}*/ 

.treeElem.act {font-weight:bold;}
.treeElem {color:#554;}
.day .treeElem {color:#887; background:none;}
.day .treeElem.act {font-weight:bold;}
.blue .treeElem {color:#689; background:none;}
.blue .treeElem.act {font-weight:bold;}

.treeElem.act.root {color: #691 !important;}
.treeElem.act.third {color: #FA0 !important;}
.treeElem.act.fifth {color: #39A !important;}
.treeElem.act.seventh {color: #F61 !important;}
.treeElem.act.tens {color: #F33 !important;}
.treeElem.act.alt {color: #C38 !important;}

.day .treeElem.act.root {color: #590 !important;}
.day .treeElem.act.third {color: #D70 !important;}
.day .treeElem.act.fifth {color: #168 !important;}
.day .treeElem.act.seventh {color: #C40 !important;}
.day .treeElem.act.tens {color: #D00 !important;}
.day .treeElem.act.alt {color: #A25 !important;}

.blue .treeElem.act.root {color: #590 !important;}
.blue .treeElem.act.third {color: #D70 !important;}
.blue .treeElem.act.fifth {color: #168 !important;}
.blue .treeElem.act.seventh {color: #C40 !important;}
.blue .treeElem.act.tens {color: #D00 !important;}
.blue .treeElem.act.alt {color: #A25 !important;}


.brick.bass {border-color: #553;} /*  background:#19190A; color: #665 */
.intBtn.root, .brick.root {border-color: #690; color: #894;}
.intBtn.third, .brick.third {border-color: #F90; color: #984;}
.intBtn.fifth, .brick.fifth {border-color: #278; color: #588;}
.intBtn.seventh, .brick.seventh {border-color: #F60; color: #A72;}
.intBtn.tens, .brick.tens{border-color: #C00; color: #A66;}
.intBtn.alt, .brick.alt {border-color: #A36; color: #968;}

.intBtn.act {color: #FFF;}
.intBtn.root.act {background: #360;}
.intBtn.third.act {background: #970;}
.intBtn.fifth.act {background: #045;}
.intBtn.seventh.act {background: #C30;}
.intBtn.tens.act {background: #900;}
.intBtn.alt.act {background: #704;} 

.day .brick.bass {border-color: #887;} /*  background:#19190A; color: #665 */
.day .chordToneBubble.root, .day .intBtn.root, .day .brick.root {border-color: #790; color: #360;}
.day .chordToneBubble.third, .day .intBtn.third, .day .brick.third {border-color: #F90; color: #E80;}
.day .intBtn.fifth, .day .brick.fifth {border-color: #279; color: #168;}
.day .intBtn.seventh, .day .brick.seventh {border-color: #E60; color: #D50 ;} /* border-color: #D60; color: #C40 */
.day .intBtn.tens, .day .brick.tens {border-color: #E00; color: #D00;}
.day .intBtn.alt, .day .brick.alt {border-color: #B36; color: #A25;}



.chordToneBubble.root {background: #360; border-color: #690;}
.chordToneBubble.third {background: #970; border-color: #F90;}
.chordToneBubble.fifth {background: #045; border-color: #278;}
.chordToneBubble.seventh {background: #C30; border-color: #F60;}
.chordToneBubble.tens {background: #900; border-color: #C00;}
.chordToneBubble.alt {background: #704; border-color: #A36;}
.chordToneBubble.bass {background: #19190A; border-color: #553;}



.day .chordToneBubble.root, .day .intBtn.root.act, .day .brick.root.act {background: #790; border:1px solid #790;}
.day .chordToneBubble.third, .day .intBtn.third.act, .day .brick.third.act {background: #F90; border:1px solid #F90;}
.day .chordToneBubble.fifth, .day .intBtn.fifth.act, .day .brick.fifth.act {background: #279; border:1px solid #279;}
.day .chordToneBubble.seventh, .day .intBtn.seventh.act, .day .brick.seventh.act {background: #E60; border:1px solid #E60;}
.day .chordToneBubble.tens, .day .intBtn.tens.act, .day .brick.tens.act {background: #E00; border:1px solid #E00;}
.day .chordToneBubble.alt, .day .intBtn.alt.act, .day .brick.alt.act {background: #B36; border:1px solid #B36;} 
.day .chordToneBubble.bass {background: #19190A;}

.day .chordToneBubble, .day .intBtn.act,  .day .brick.act {color: #FFF !important;}


.blue .chordToneBubble.root, .blue .intBtn.root.act, .blue .brick.root.act {background: #790; border:1px solid #790;}
.blue .chordToneBubble.third, .blue .intBtn.third.act, .blue .brick.third.act {background: #F90; border:1px solid #F90;}
.blue .chordToneBubble.fifth, .blue .intBtn.fifth.act, .blue .brick.fifth.act {background: #279; border:1px solid #279;}
.blue .chordToneBubble.seventh, .blue .intBtn.seventh.act, .blue .brick.seventh.act {background: #E60; border:1px solid #E60;}
.blue .chordToneBubble.tens, .blue .intBtn.tens.act, .blue .brick.tens.act {background: #E00; border:1px solid #E00;}
.blue .chordToneBubble.alt, .blue .intBtn.alt.act, .blue .brick.alt.act {background: #B36; border:1px solid #B36;} 
.blue .chordToneBubble.bass {background: #19190A;}

.blue .chordToneBubble, .blue .intBtn.act,  .blue .brick.act {color: #FFF !important;}



.bracket {border: 1px solid #554; color:#665;}
.blue .bracket {border-color:#888777; color:#888777;}

.bracket .tens {color:#900;}
.bracket .alt {color:#728;}
.day .bracket .tens {color:#E00;}
.day .bracket .alt {color:#B36;}



svg.act  {stroke:#C22;} 
#svg7DownLeft.maj {stroke:#950;}
#svg7DownLeft.dim {stroke:#C22; stroke:#B60;}
/*.sthUp, .downLeft {color:#C22;} */
.ignored {color:#C22;}
.dim2Quality {color:#922; color:#B60;}
.maj2Quality {color:#950; color:#B60;}
.csElem, .chBlock {color:#776;}
.dim7txt {color:#776 ;} /* special notes on Piano */

.day svg.act  {stroke:#E00;} 
.day .sthUp, .day .downLeft {color:#E00;} 
.day .ignored {color:#E00 !important;}
.day .csElem, .day .chBlock {color:#443;}
.day .dim7txt {color:#554 !important;}
.day .pianoKey.black .dim7txt {color:#BBBBB6 !important;}


.brick.opt, .intBtn.act.opt, .chordToneBubble.opt {border-style:dashed !important;
	background-image: radial-gradient(#000 32%, transparent 32%) , radial-gradient(#000 32%, transparent 32%);
	background-position: 0 0, 3px 3px;
	background-size: 6px 6px;
;}
.day .brick.act.opt, .day .intBtn.act.opt, .day .chordToneBubble.opt{border-style:solid !important;
	background-image: radial-gradient(#899 23%, transparent 23%) , radial-gradient(#899 23%, transparent 23%);
	background-position: 0 0, 3px 3px;
	background-size: 6px 6px;
;}

.chBlock, .csElem, .treeElem {background:none !important; border:0 !important; overflow:visible;}


.csElemLegend {background:#1C1C1A; color:#998;}
.csElemLegend .optional {color:#776;}
.csElemLegend.noBg, .day .csElemLegend.noBg {background:none;}
.csElemLgndCaption  {background:none; color:#998;}

.day .csElemLegend {background:#DDDDDB; color:#000;}
.day .csElemLegend .optional {color:#998;}
.day .csElemLgndCaption {background:none; color:#665;}
.blue .csElemLgndCaption {background:none; color:#9AA;}

.csElemLegend svg {stroke: #252519;}
.day .csElemLegend svg {stroke: #DDDDDB;}

.brickBoxDescription {color:#AA9;}
.day .brickBoxDescription {color:#332;}

#pianoDescr p, #pianoDescr li, #intDescr p {color:#AA9;}
.day #pianoDescr p, .day #pianoDescr li, .day #intDescr p {color:#332;}

.chordToneBubble {border:2px solid #444440; color:#DDDDDD;} /* bubbles are buttons -> border must be defined */
.chordToneLineTop, .chordToneLineBottom {width:1px; border-left:1px dashed #332;}
.day .chordToneLineTop, .day .chordToneLineBottom {width:1px; border-left:1px dashed #BBBBB5;}


.brickTxtBox {border:1px dotted #443;}
/* .csCol {border-right:1px dashed #292920;}
.day .csCol {border-right:1px dashed #C9C9C0;} */
.csCol:nth-child(5) {border-right:0;}




.qualityTable td {background:#1C1C1A;}
.qualityTable td small {color: #55554C;}

.day .qualityTable td {background:#EEEEEC;}
.day .qualityTable td small {color: #999990;}

.qualityTable {border-spacing: 3px; margin: 10px auto; border-collapse: separate;}
.qualityTable th {font-size:0.75em; text-align:center; color:#777772;}
.qualityTable td {font-size:0.78em !important; padding: 5px 5px; border-radius:5px;  }





#brickBoxGeneralExplBoxContent {padding:5px 0; border: 0;}

#descrScreen p, #descrScreen li {font-size: 0.95em;}
#descrScreen p {margin: 15px 5px; padding:0; line-height:1.45em; text-align:left;}
#descrScreen ul, #descrScreen li {margin:5px 0 5px 15px; padding:0;}

#descrScreen h1 {font-size:1.2em; padding:10px 0; margin:5px 0 0 0;}
#descrScreen h2 {font-size:0.95em; font-weight:normal; text-align:left; padding:10px 0 10px 0; margin:5px 0 0 0;}
#descrScreen h3 {font-size:0.8em; font-weight:bold; text-align:left; padding:10px 0 5px 0; margin:5px 0 0 0;}
#descrScreen h4 {font-size:0.75em; font-weight:normal; text-align:left; padding:15px 0 0 0; margin:5px 0 0 0;}

#descrScreen .accClose .accElemH {padding:10px 5px;}
#descrScreen .accOpen .accElemH {padding:10px 5px;}

.hLeft {text-align:left !important;}
#descrAllChordSymbols, #pianoDescr, #pianoBox, #chordTonesDescr, #chordTonesBox, #intDescr, #intbtnbox, 
#brickBoxContainer, #brickBox, #brickBoxLegendTop, #brickBoxLegendBottom {position:relative; max-width:600px; width:100%; margin: 0px auto; } 
#containerSummary, #containerWarnings, #containerDescription {clear:both; position:relative; max-width:600px; width:100%; margin: 0px auto; vertical-align: top;} 

/* ####### WEB VERSION ####### */

h1.tabSummDescr {font-size:0.9em;  border-width: 1px 1px 0 1px; border-radius: 5px 5px 0 0; border-radius: 4px 4px 0 0;}
.tabSummDescrSpacer {border-width: 0 0 1px 0; opacity:1;}
h1.tabSummDescr {height:40px; padding:8px 0.5% 5px 2.5%; float:left; clear:none; cursor:pointer;}
.tabSummDescrSpacer {height:40px; float:left; clear:none; }

#tabSumm {width:calc(48% - 18px); margin:0;}
#tabDescr {width:calc(48% - 18px); margin:0;}
#vDescr.side.descr #containerSummary {display:none;}
#vDescr.side.summ #containerDescription {display:none;}
#vDescr.full #containerSummary {display:inline-block; width:41%; margin:0 1%; overflow-y:auto; }
#vDescr.full.descr #containerDescription, #vDescr.full.summ #containerDescription { display:inline-block; width:52%; margin:0 0 0 2%; height:900px; overflow-y:auto; }
#vDescr.full.gen #containerDescription {display:none;}
#vDescr.full.gen #brickBoxGeneralExplBoxContent {display:inline-block; width:52%; margin:0 0 0 2%; height:900px; overflow-y:auto;}
#vDescr.full.descr #brickBoxGeneralExplBoxContent {display:none;}

#vDescr.full #tabSumm {width:calc(46% - 36px);}
#vDescr.full #tabDescr, #vDescr.full #tabGenExpl {width:25%; margin:0;}

.tabSummDescrSpacer {width:2%; margin:0; padding:0;}
#vDescr.full .tabSummDescrSpacer {width:1%; }

.tabSummDescrSpacer:nth-child(7), #vDescr.full .tabSummDescrSpacer:nth-child(7){width:36px; padding:3px 0.5%; text-align:right }
h1.tabSummDescr.dimmed {opacity:1; font-size:0.85em !important; border-width: 1px; border-style: dotted dotted solid dotted;}
#btnLeftFull { width:26px; height:26px; margin:0; padding:0; background:none;}
#vDescr.full #lfLeftDashed {stroke-dasharray:0}
#vDescr.full #lfRightDashed {stroke-dasharray:5,6}
#vDescr.full #lfArrowRight {display:none}
#vDescr.side #lfArrowLeft {display:none}

@media screen and (min-width:1151px) {
	#vNeck.hide2000 { visibility:hidden; position:absolute; left:-5000px; top:-5000px}
}

@media screen and (max-width:1150px) {
	#tabSumm {width:calc(48% - 18px - 36px); }
	#tabDescr {width:calc(48% - 18px - 36px); }
	#vDescr.full #tabSumm {width:calc(46% - 36px - 36px);}
	#vDescr.full #tabDescr {width:calc(25% - 28px);}
	#vDescr.full #tabGenExpl {width:calc(25%);}
	#vDescr.hide1150, #vNeck.hide1150 {display:none}
	h1.tabSummDescr { padding:8px 0 5px 1%; } 
}

@media screen and (max-width:900px) {
	h1.tabSummDescr { font-size:0.85em} 
}




#hSummary, #hDescription {display:none;}
/* #containerDescription, #containerSummary {height: 680px; overflow-y: auto;} */
#containerDescription {padding:10px 0;}
/* #summBrowseDots {border: 1px dotted #F90;} */
.dotContainer {float:none; clear:both; text-align:center;}
.browseDot {display:inline-block; width:15px; height:15px; margin:20px 3px 2px 3px; border-radius:4px;}

/* ####### APP VERSION ####### */
/* .dotContainer {float:right; width:80px; height:17px; right:0px; text-align:right;} 
.browseDot {display:inline-block; width:15px; height:15px; margin:1px 3px; border-radius:4px;}*/
 
/* ############## */

 


#brickBoxDescrCsCols ul, #containerWarnings ul {margin: 0px 20px; padding: 0;}
#brickBoxDescrCsCols ul li, #containerWarnings ul li {margin: 0; padding: 0 0 5px 0;}



#brickBox {margin:0;}
#brickBoxContainer {overflow:hidden; margin: 20px auto;}
/* #brickBoxDescrTree, #brickBoxDescrCsCols, #brickBoxDescrCsBlocks {;} */
.brickBoxDescription {height:0; overflow:hidden; ;}
.brickBoxDescription.on {height:auto;}

#pianoBox, #intbtnbox, #chordTonesBox, #pianoDescr, #intDescr, #chordTonesDescr {display:none;} /* */
#pianoBox {height:100px;}
#intbtnbox {height:160px;}
#chordTonesBox {height:120px;}

#pianoDescr, #intDescr {margin:10px auto 5px auto;}
#pianoDescr p, #pianoDescr li, #intDescr p {font-size:0.8em; line-height:1.3em;} 
.day #pianoDescr p, .day #pianoDescr li, .day #intDescr p {font-size:0.8em; line-height:1.3em;} 
#pianoDescr p, #intDescr p  {margin: 3px 0;}
li {margin: 3px 0 9px 20px; list-style-type: square;}

p.dim7txt {margin-top: 0.4em !important;}
p.dim7txt, li.dim7txt {font-size:0.7em !important;}

.chordToneBubble, .chordToneLineTop, .chordToneLineBottom {position: absolute; transition: left 0.9s, width 0.9s, height 0.9s, top 0.9s;}
.chordToneLineTop, .chordToneLineBottom {width:1px;}
.chordToneLineBottom {display:none;}

.intBtn {position: absolute; width:13.5%; font-size:0.6em; overflow:visible !important;}

#intbtnbox, #brickBoxContainer, #brickBox, #treeBox, #chordTonesBox, .intBtn, .brick, .bracket, .pianoKey  {transition: opacity 1s, width 0.9s, height 0.9s, top 0.9s, left 0.9s, borderRadius 1s, border 0.9s;} /* border-color: #665 */

.chordToneBubble {font-size:0.75em; border-radius:50%;}
.chordToneBubble.root {border-radius:7px;}

.intBtn, .brick {border-radius:7px; border-width:2px; border-style:solid;}
.intBtn.circle {border-radius:50% !important;}
.intBtn.lh, .brick.lh {border-radius:5px 0 0 5px; border-width:2px 0 2px 2px;}
.intBtn.rh, .brick.rh {border-radius:0 5px 5px 0; border-width:2px 2px 2px 0;}

.brick.md {border-radius:0; border-width:2px 0 2px 0 !important;}
.intBtn.th {border-radius:5px 5px 0 0; border-width:2px 2px 0 2px;}
.intBtn.bh {border-radius:0 0 5px 5px; border-width:0 2px 2px 2px;}

.day .intBtn, .day .brick {border-width:1px;}
.day .brick.md {border-radius:0; border-width:1px 0 1px 0 !important;}
.day .intBtn.th {border-radius:5px 5px 0 0; border-width:1px 1px 0 1px;}
.day .intBtn.bh {border-radius:0 0 5px 5px; border-width:0 1px 1px 1px;}
.day .intBtn.lh {border-width:1px 0 1px 1px;}
.day .intBtn.rh {border-width:1px 1px 1px 0;}

.blue .intBtn, .blue .brick {border-width:1px;}
.blue .brick.md {border-radius:0; border-width:1px 0 1px 0 !important;}
.blue .intBtn.th {border-radius:5px 5px 0 0; border-width:1px 1px 0 1px;}
.blue .intBtn.bh {border-radius:0 0 5px 5px; border-width:0 1px 1px 1px;}
.blue .intBtn.lh {border-width:1px 0 1px 1px;}
.blue .intBtn.rh {border-width:1px 1px 1px 0;}

.bracket {font-size:0.7em; position:absolute; padding: 0.7em 0 0 0.7em; border-radius:5px 0 0 5px; border-width:1px 0 1px 1px;}
#bassCh {padding: 0.2em 0 0 0.7em;}
#extCh {border-radius:5px 0 0 0; border-width:1px 0 0 1px;}
#bassCh {border-radius:0 0 0 5px; border-width:0 0 1px 1px;} 
#extCh, #bassCh {border-style: dotted;}


#descrTitle {font-size: 1.3em;}

.treeElem {position:absolute; border:0; background:none; font-size:0.65em; transition: top 1.1s;}

#brickBoxCsColsLegend {position:absolute; width:100%; top:0; height:400px; opacity:0; transition: opacity 1.2s, height 0.9s;}
#brickBoxCsColsLegend.on {opacity:1; height:400px;}

#brickBoxBgCanvas {position:absolute; width:100%; opacity:0; height:0; bottom:0; transition: opacity 1s, height 0.9s;}
#brickBoxBgCanvas.on, #brickBoxBgBox {opacity:1; height:100%; height:460px;}
#chBlocksBox, #csColsBox, #treeBox {opacity:0;}
#chBlocksBox.on,  #csColsBox.on, #treeBox.on {opacity:1;}

.csElemLegend {position:absolute; bottom:0; border:0; border-radius:7px; overflow:hidden; transition: opacity 0.9s, bottom 1s;}
.csElemLegend .ignored {display:none;}

#treeBox {position:absolute; width:100%; height:100%;}
#csColsBox, #chBlocksBox, #analyticBox {position:absolute; height:100%; top:0; transition: height 0.9s, opacity 0.9s;}
#csColsBox, #chBlocksBox {width:100%;}
#analyticBox {z-index:10;}
.csCol {position:absolute; transition: height 0.9s, opacity 0.9s; overflow:visible;}
.csElem {position:absolute; width:100%; height:20px; border:0; font-size:0.7em; overflow:visible; background:none; transition: top 0.9s, opacity 0.9s;} /* background:#202015; */
/* .csElem .csSlash {margin:0 ;}  */
#svg7up, #svg7UpRight, #svg7DownLeft  {transition: top 0.9s, opacity 1s;} 
/*.sthUp, .downLeft {font-size:0.65em;}*/
.svg7upDown {position:absolute; display:block;}
.maj2Quality, .dim2Quality {padding-right:2px;}

.csElemLegend svg {position:absolute; height:100%; width:auto; top:0;}
#csElemLegend_root span, #csElemLegend_bass > span {position:relative; font-size:1.8em; top:0.25em;}
.csElemLegend:nth-child(2), .csElemLegend:nth-child(3) {font-size:1.2em;}
#csElemLegend_root .csAcc, #csElemLegend_bass .csAcc {position:relative; font-size:0.7em; top:-0.3em;}
.csElemLgndCaption {position:absolute; font-size:0.6em; text-align:center; line-height: 1.1em; border:0; transition: bottom 1s;}
.csElemLgndParentheses {opacity:0.2; font-weight:bold; font-size:1.4em; padding: 0 0.1em;}

.chBlock { position:absolute; transition: top 1s, opacity 0.9s; text-align:left; padding-left:0.5em; font-size:0.8em; background:none;}
/* #chBlock_adds {border:2px solid red;} */

.brick {position:absolute; width:50px; height:35px; font-size:0.9em;} /* border-color: #990; border-radius:7px; border-width:2px; border-style:solid; */
.brick span {border-color: #990;}
/* .brick svg {display:none; position:absolute; height:80%; width:20px; left:-30px; top:10%;} 
.brick.warn svg {display:block;} */
.brickFlag {display:none; position:absolute; transition: top 0.9s;}
.brickFlag.warn {display:block;}
/* .brick .csAcc, #csElem_root .csAcc {letter-spacing: -0.3em;  top:-0.45em; font-size:0.7em;} */
.brickTxtBox {display: inline-block; width:90%; height:30px; background:none;}
#extLegend {position:absolute; top:30px; transition: opacity 0.9s;}


.pianoKey {position:absolute; height:100%; border-width: 0 2px 2px 2px; border-radius: 0 0 7px 7px; ;}
.pianoKey.black {z-index:2; height:60%; border-width:0 3px 3px 3px;}
.pianoKey.chrom {border-width:0 2px 2px 2px;}
.pianoKey.chrom.black {border-width:0 2px 2px 2px; height:100%;}

.day .pianoKey {position:absolute; height:100%; border-width: 0 1px 1px 1px; border-radius: 0 0 7px 7px; ;}
.day .pianoKey.black {z-index:2; height:60%; border-width:0 1px 1px 1px;}
.day .pianoKey.chrom {border-width:0 1px 1px 1px;}
.day .pianoKey.chrom.black {border-width:0 1px 1px 1px; height:100%;}

.pianoKey > div {position:absolute; width:100%; height:1em; bottom:0.4em; text-align:center; font-size:0.75em; transition:bottom 0.9s;}
.pianoKey > div:nth-child(2) {bottom:2.45em;  font-size:0.55em;}
.pianoKey.black > div {font-size:0.65em;}
.pianoKey.black > div:nth-child(1) {bottom:0.6em;}
.pianoKey.black > div:nth-child(2) {bottom:2em;}
/* .pianoKey.chrom > div {bottom:0em;} */
.pianoKey.chrom.black > div:nth-child(1) {bottom:2em;}
.pianoKey.chrom.black > div:nth-child(2) {bottom:3.4em;}
.pianoKey .csAcc {letter-spacing: -0.25em;  top:-0.45em; font-size:0.7em;}