.strum-pattern-content {
	margin-top:40px; 
	margin-bottom:40px; 
}

.strum-pattern-content table {
	text-align:center; 
}

.strum-pattern-content table td:focus {
	outline:none; 
}

.beat-label {
	font-size:1.5em;
}

.arrow {
	cursor:pointer; 
}

.up-arrow, .down-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	margin:0 auto;
}

.up-arrow {
	border-width: 0 15px 30px 15px;
}

.arrow.on .up-arrow {
	border-color: transparent transparent #ff3a4b transparent;
}

.arrow.off .up-arrow {
	border-color: transparent transparent #ccc transparent;
}

.down-arrow {
	border-width: 30px 15px 0 15px;
}

.arrow.on .down-arrow {
	border-color: #ff3a4b transparent transparent transparent;
}

.arrow.off .down-arrow {
	border-color: #ccc transparent transparent transparent;
}

.arrow-tail {
	width: 10px;
	height: 150px;
	margin: 0 auto;
}

.arrow.on .arrow-tail {
	background: #ff3a4b;
}

.arrow.off .arrow-tail {
	background: #ccc; 
}

.strum-pattern-editor {
	margin-top:20px; 
	text-align:center; 
}

.strum-pattern-editor label {
	margin-right:20px; 
}

.strum-pattern-editor input[type=text] {
	max-width:100%; 
	font-size:0.75em; 
}

.strum-pattern-editor input[type=text].measure-label {
	width:50px;
	min-width:50px; 
	font-size:1em;  
} 

.strum-pattern-editor input[type=text].output {
	flex:1 0 auto; 
	-webkit-flex:1 0 auto; 
	-ms-flex:1 0 auto; 
} 

.measure-labels-container {
	display:inline-block; 
} 

.pattern-output-container {
	display:flex; 
	display:-webkit-flexbox; 
	display:-ms-flexbox; 
	flex-direction:row; 
	-webkit-flex-direction:row;
	-ms-flex-direction:row; 
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

@media only screen and (max-width: 480px) {
	.up-arrow {
		border-width: 0 10px 20px 10px;
	}

	.down-arrow {
		border-width: 20px 10px 0 10px;
	}

	.arrow-tail {
		width:5px; 
		height:100px; 
	}
}