#t-ui-ruler {
	white-space: nowrap;
	overflow-x:auto;
	position:relative;

	text-align:center;
	margin-top:1em; 
	min-height:4em;
}

.t-ruler {
	position:absolute;
	height:1px;
	background-color:#000;
	width:100%;
	left:0px;
	bottom:0px;
}
.t-unit {
	min-width:4em;
	text-align:center;
	position:relative;
	display:inline-block;
	padding-bottom:1em;
	border-bottom:1px solid #666;
	color:#888;
}
.t-unit.active {
	color:#000;
	font-weight:600;
}

.t-unit:hover {
	color:#000;
}

.t-unit:active {
	color:#000;
}

.t-unit:after {
	position:absolute;
	width:0.5em;
	height:0.5em;
	left:50%;
	top:100%;

	transform: translateX(-50%) translateY(-50%);
	content:"";
	background-color: #666;
	-webkit-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
}

.t-unit.active:after {
	background-color: #000;
	width:0.8em;
	height:0.8em;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
}

#t-ui-panel {
	margin-top:1em;
	min-height:4em;
}

#t-title {
	overflow:auto;
	padding-left:1em;
}

.t-label-data { font-weight: 900; }
.t-label-title { font-style: italic; font-weight: 300;  }

.t-but { 
	cursor: pointer; cursor: hand;
	opacity:0.6;
	background-color:#fff;
	display: inline-block;
	margin-right:0.2em;
	width:1.6em;
	height:1.6em;
}

@media ( max-width: 450px ){
	.t-but { 
		/*display: block; */
		margin-bottom:0.2em; 
	}
}

.t-but:hover {
	opacity:1;
}

.t-but:active {
	opacity:1;
}

.t-but.press {
	background-color:#ddd;
}

.t-but.playing {
	background-color:#4bec26;
}

.t-but.playing.press {
	background-color:#30ff00;
}