.center {
	margin:0 auto;
	text-align:center;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}
.float-clear {
	clear:both;
}

.pointer {
	cursor:pointer;
}

.flex-center {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex-start {
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.flex-end {
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.flex-evenly {
	display:flex;
	justify-content:space-evenly;
	align-items:center;
}

.flex-top {
	display:flex;
	align-items:flex-start;
}
.flex-middle {
	display:flex;
	align-items:center;
}


.small {
	font-size:0.9em;
	line-height:1.2em;
	color:#666;
}
.smaller {
	font-size:0.9em;
	font-family:Calibri;
}

.dim {
	font-size:0.8em;
	opacity:0.6;
}


/* text-logo */
span.text-logo { font-family:Exo2; font-style:italic; font-size:1em; display:inline-flex; align-items:baseline; cursor:pointer; position:relative; /* color:#f52; */ }
span.text-logo.white { color:white }
span.text-logo .tune { font-weight:lighter; opacity:0.8; font-size:0.85em }
span.text-logo .made { font-weight:bold; margin-left:0.1em }
span.text-logo .tune::after { position:relative; top:-0.15em; font-size:0.4em; -opacity:0.8; margin:0 -0.05em; content:"|"; text-shadow:none }


/* width scale */
.width-80 { max-width:80% }
.width-75 { max-width:75% }
.width-70 { max-width:70% }
.width-67 { max-width:67% }
.width-60 { max-width:60% }
.width-50 { max-width:50% }
.half     { max-width:50% }
.width-40 { max-width:40% }
.width-33 { max-width:33% }
.width-25 { max-width:25% }
.quarter  { max-width:25% }
.width-20 { max-width:20% }


/* memo */
span.memo button { display:inline-block; font-family:monospace; padding:0 3px; border:1px solid #ccc; border-radius:2px; cursor:pointer; transition:border-color .3s ease, color .3s ease; margin:0 5px }
span.memo button::after { content:"+" }
span.memo button:hover { border-color:#d55; color:#d55; transition:border-color .3s ease, color .3s ease }
span.memo div { font-size:0.8rem; color:#444; margin:5px 0 0 25px; border-left:3px solid #ddd; padding:0 1em; display:none; line-height:1rem; text-align:left }
span.memo ul { list-style-type:none }
span.memo ul li::before { content:"\2022"; color:orange; font-weight:bold; display:inline-block; width:1em; margin-left:-1em }



div.content-not-loaded {
	width:300px;
	border:7px solid #ccc;
	padding:40px; margin:0 auto;
	text-align:center;
}

div.content-not-loaded::after {
	content:"content not loaded";
}




span.ims {
	font-family:Exo2;
	font-style:italic;
}
span.ims::after {
	content:"Interactive Music Studio";
}

span.bold {
	font-weight:bold;
}
span.large {
	font-size:1.25em;
}




div.design-comment {
	font-size:0.75em;
	font-family:Malgun Gothic;
	color:#888;
}
div.design-comment::before {
	content:"* ";
}
div.design-comment::after {
	content:" *";
}