* {transition:.25s;}

body {padding:24px; transition:1s; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
@media screen and (max-width:575px) {
	body {padding:12px;}
}

div#container {text-align:center; background-color:#E6F1FE; color:#222; max-width:600px; border-radius:16px; padding:18px;}
div#container {background-color:#9bd7ff; color:#444;}
div#container {box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25); transition:.5s;}
div#container:hover {box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.25);}

@media screen and (max-width:767px) { div#container {padding:12px;} }

/*div#container > div.row {margin-top:12px;}*/

div#container div.head-row h2 {text-align:center; margin-bottom:24px;}
div#container div.head-row h2 img {height:34px; position:relative; bottom:3px;}

div#container div.inputGroup {background-color:rgba(0,0,0,0.1); padding:12px; border-radius:5px; box-shadow:0px 1px 1px rgba(0,0,0,.5);}
div#container div.inputGroup div.keys-row div.col-xs-2 {width:11.1111%;}
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(1) {padding-right:3px;}
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(2), #container .inputGroup .keys-row div.col-xs-2:nth-of-type(3),
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(4), #container .inputGroup .keys-row div.col-xs-2:nth-of-type(5), 
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(6), #container .inputGroup .keys-row div.col-xs-2:nth-of-type(7), 
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(8) {padding-left:3px; padding-right:3px;}
div#container div.inputGroup div.keys-row div.col-xs-2:nth-of-type(9) {padding-left:3px;}
div#container div.inputGroup div.keys-row div.col-xs-2 label {color:rgba(0,0,0,0.5);}
div#container div.inputGroup div.keys-row div.col-xs-2 label.num {display:none;}
div#container div.inputGroup div.keys-row div.col-xs-2 input {width:100%; border-radius:5px; border:1px solid #444; text-align:center; padding:6px 0;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox {padding:18px 0 0;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox input.noteSelect {display:none;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox input.noteSelect + label {padding:2px 0; border-radius:4px; cursor:pointer; font-size:18px; width:100%; border:1px solid #444;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox input.noteSelect + label.clear {border:none; padding:0;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox input.noteSelect:checked + label {background-color:dodgerblue;}
div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox input.noteSelect:checked + label.clear {background-color:initial;}
@media screen and (max-width:300px) {
	div#container div.inputGroup div.keys-row div.col-xs-2 div.noteSelectBox {display:none;}
}

div#container div.inputGroup div.button-row {margin-top:12px;}
div#container div.inputGroup div.button-row div.L {padding-right:4px;}
div#container div.inputGroup div.button-row div.R {padding-left:4px;}
div#container div.inputGroup div.button-row button {width:100%; border-radius:5px; border:1px solid #888; padding:6px; background-color:#EEE; box-shadow:0px 1px 1px rgba(0,0,0,.5); font-weight:bold;}
div#container div.inputGroup div.button-row button:hover {box-shadow:0px 2px 2px rgba(0,0,0,.5);}
div#container div.inputGroup div.button-row button.primary {background-color:dodgerblue; color:white; /*border:1px solid white;*/}

div#container div.output-row {margin-top:12px; display:none;}
div#container div.output-row div.L {padding-right:2px;}
div#container div.output-row div.R {padding-left:2px;}
div#container div.output-row div.display {font-weight:bold; background-color:rgba(255,255,255,0.5); border-radius:5px; padding:8px 0 4px; /*margin:16px 0;*/ box-shadow:0px 1px 1px rgba(0,0,0,.5);}

div#container div.pic-row {margin-top:16px;}
div#container div.pic-row div#scaleDisplay {/*margin-bottom:10px;*/ /*width:100%; display:inline-block;*/ position:relative;}
div#container div.pic-row div#scaleDisplay img {width:100%; max-width:575px; box-shadow:0px 1px 2px rgba(0,0,0,.5); border-radius:5px;}
div#container div.pic-row div#scaleDisplay div.highlight {background-color:rgba(255,0,0,0.5); background-color:rgba(255,150,0,0.5); border-radius:50%; padding:1.5%; display:inline-block;}
div#container div.pic-row div#scaleDisplay div.highlight {position:absolute; top:0; left:50%; transform:translateX(-50%);}
div#container div.pic-row div#scaleDisplay div.highlight.white {top:75%;}
div#container div.pic-row div#scaleDisplay div.highlight.black {top:50%;}

div#container div#circleOfFifths {margin-top:12px; background-image:radial-gradient( rgba(0,0,0,.25), transparent, transparent ); }
div#container div#circleOfFifths div.fRow {margin-top:8px;}
div#container div#circleOfFifths div.fRow:nth-of-type(1) .fColumn:nth-of-type(2) {width:84%;}
div#container div#circleOfFifths div.fRow div.fColumn {display:inline-block; box-sizing:border-box; position:relative;}
div#container div#circleOfFifths div.fRow div.fColumn div.edge {font-weight:normal; font-style:italic;}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox {background-color:rgba(255,255,255,0.5); border-radius:5px; margin:0 .25rem; padding:.25rem; cursor:pointer;}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox {box-shadow:0px 1px 1px rgba(0,0,0,.5);}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox:hover {box-shadow:0px 3px 3px rgba(0,0,0,.5);}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox.ring {border:2px solid dodgerblue;}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox.highlight {background-color:rgba(255,150,0,0.5);}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox div.scaleTitle {font-weight:bold;}
div#container div#circleOfFifths div.fRow div.fColumn div.fBox div.scaleList {overflow:hidden; /*transition:1s;*/}

div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(1), 
div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(4) {width:8%;}
div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(2), 
div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(3) {width:42%;}
div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(1) div.edge {position:absolute; top:50%; left:0; transform:translateY(-50%);}
div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(4) div.edge {position:absolute; top:50%; right:0; transform:translateY(-50%);}

/* mobile (xs) */
@media screen and (max-width:575px) {
	div#container div#circleOfFifths div.fRow:nth-of-type(1) .fColumn:nth-of-type(2) {width:100%;}
	div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(1), 
	div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(4) {font-size:0; width:0;}
	div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(2), 
	div#container div#circleOfFifths div.fRow div.fColumn:nth-of-type(3) {width:100%; width:50%;}
	div#container div#circleOfFifths div.fRow div.fColumn div.fBox {padding:1.5rem .25rem}
	div#container div#circleOfFifths div.fRow div.fColumn div.fBox div.scaleTitle {font-size:1.1em;}
	div#container div#circleOfFifths div.fRow div.fColumn div.fBox div.scaleList {font-size:0;}
}