body {
	font-family:sans-serif;
	font-size:18px;
}

div.container {
	margin:0 auto;
	width:820px;
	touch-action:manipulation;
}

img.logo {
	float:left;
	margin-right:15px;
	width:50px;
}

div.row {
	margin-bottom:15px;
}

div.row div {
	display:inline-block;
}

div.row div.label {
	width:120px;
}

span.seventh,
span.flat5 {
	vertical-align:super;
	font-size:90%;
}

button {
	padding:0 15px;
}

div.third,
div.highlighted span.minor {
	color:#0080ff;
}

div.seventh,
div.highlighted span.major7 {
	color:#a000ff;
}

div.fifth,
div.highlighted span.flat5 {
	color:#00a000;
}

div.shaded {
	color:#c0c0c0;
}

/* Languages
 */
div.language {
	float:right;
}

/* Modality
 */
div.modality {
	margin-top:100px;
}

div.modality div.line {
	margin-top:40px;
}

div.modality div.item:nth-child(n+2) div:first-child {
	color:#e0e0e0;
}

div.modality div.item div:first-child {
	width:100px;
	transform:rotate(310deg);
	transform-origin:top left;
	position:relative;
	left:-5px;
}

div.modality div.item div:nth-child(2) {
	margin-left:3px;
}

div.modality div.item:nth-child(1) {
	color:#ff0000;
}

/* Notes
 */
div.notes div.label {
	margin-top:3px;
}

div.notes div.line {
	height:20px;
}

div.notes div.item {
	margin-top:3px;
}

div.notes div.item:nth-child(1) {
	color:#ff0000;
}

/* Scale name
 */
div.scale_name {
	margin-top:50px;
	height:25px;
}

div.scale_name div.line {
	font-weight:bold;
}

/* Scale
 */
div.scale {
	height:25px;
}

/* Chords
 */
div.chords {
	height:25px;
}

div.chords div.highlighted > span,
div.chords7 div.highlighted > span {
	border-bottom:3px double #ff0000;
}

/* Basis. difference
 */
div.basis {
	margin-top:50px;
}
div.basis div.line div.item,
div.difference div.line div.item {
	width:40px;
}

div.basis div.line div.mode,
div.difference div.line div.mode {
	width:170px;
}

div.difference div.line div.marked {
	color:#ff0000;
}

div.info {
	margin-top:15px;
	color:#a0a0a0;
	font-size:13px;
	float:right;
}

div.info a {
	color:inherit;
	text-decoration:none;
}

div.info a:hover {
	text-decoration:underline;
}

/* Mobile view
 */
@media (max-width:991px) {
	div.container {
		width:550px;
	}

	div.row div.label {
		display:block;
		margin-bottom:5px;
	}

	div.row div.buttons {
		display:block;
		text-align:right;
		margin-top:5px;
	}

	div.scale {
		margin-bottom:50px;
	}

	div.scale div.label {
		margin-bottom:15px;
	}

	div.chords7 div.line {
		margin-top:25px;
	}

	select {
		font-size:20px;
		width:150px;
	}

	button {
		font-size:20px;
		width:75px;
	}
}