@CHARSET "ISO-8859-1";

/**
 * Reset CSS
 */

/* disable ios/winmobile font size changes */
@media screen and (max-device-width: 480px) {
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

/* consistent box model */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/** RESET **/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; -moz-box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/**
 * Default styles
 */

body {
	font-size: 13px;
	font-family: Arial, sans-serif;
	line-height: normal;
	text-align: left;
	background: #e2e2e2;
}

/**
 * Toolbar styles
 */

.controls {
	background: #eee;
	padding: 5px 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.controls--control {
	float: left;
	text-align: center;
	padding: 0 5px;
}

.controls--control-label {
	font-size: 75%;
	padding-bottom: 5px;
}

.controls--control-button {
	display: inline-block;
	border: 1px solid #ccc;
	background-color: #ddd;
	border-radius: 5px;
	padding: 6px 8px;
	height: 29px;
	cursor: pointer;
}
.controls--control-button:hover,
.control-open .controls--control-button[data-action="menu-open"] {
	border-color: #aaa;
	background-color: #ccc;
}

.controls--control-group {
	zoom:1;
}
.controls--control-group:before,
.controls--control-group:after {
	content:'';
    display:table;
}
.controls--control-group:after {
	clear:both;
}

.controls--control-group [class^="controls--control-"] {
	float: left;
	border-radius: 0;
}
.controls--control-group [class^="controls--control-"]:first-child {
	border-radius: 5px 0 0 5px;
}
.controls--control-group [class^="controls--control-"]:last-child {
	border-radius: 0 5px 5px 0;
}

.controls--control-dd select {
	width: 100%;
	font-size: 75%;
	padding: 2px;
	height: 29px;
}
.controls--control-number {
	display: inline-block;
	vertical-align: top;
	width: 50px;
	border-radius: 5px;
}
.controls--control-number input {
	padding: 5px;
	width: 100%;
	font-size: 75%;
	height: 29px;
	border: 1px solid #ccc;
	border-radius: inherit;
}
.controls--control-number input[type="number"]::-webkit-inner-spin-button,
.controls--control-number input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}
.controls--spacer {
	float: left;
	width: 20px;
	height: 1px;
}

/**
 * Disabled controls
 */
.controls.disabled {
	pointer-events: none;
}
.controls.disabled,
.controls--control.disabled .controls--control-label,
.controls--control.disabled .controls--control-button {
	opacity: 0.5;
}

.spinner-disabled .controls--control-number {
	width: 35px;
}
.spinner-disabled input[type="number"]::-webkit-inner-spin-button,
.spinner-disabled input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.spinner-disabled input[type="number"] {
	-moz-appearance: textfield;
}

.controls--control.disabled {
	cursor: default;
}

.controls--control.disabled [data-tooltip]:hover:before,
.controls--control.disabled [data-tooltip]:hover:after {
	display: none;
}

.controls--control.disabled .controls--control-button:hover {
	  background-color: #ddd;
	  border-color: #ccc;
}

/**
 * Clearfix via CSS-Tricks
 * http://css-tricks.com/snippets/css/clear-fix/
 */
.controls:after {
	content: '';
	display: table;
	clear: both;
}

/**
 * Utility and cleanup
 */
.hide {
	display: none;
}

/**
 * Tooltip utility data attribute
 */
[data-tooltip] {
	position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
	position: absolute;
	content: '';
	display: block;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .2s linear;
	transition: opacity .2s linear;
}

[data-tooltip]:before {
	content: attr(data-tooltip);
	color: #fff;
	font-size: 90%;
	background-color: #000;
	z-index: 1;
	padding: 2px 4px;
	border-radius: 3px;
	top: 100%;
	margin-top: 10px;
	white-space: nowrap;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

[data-tooltip]:after {
	border: 5px solid transparent;
	border-bottom-color: #000;
	top: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 0.85;
}

.controls.disabled [data-tooltip]:before,
.controls.disabled [data-tooltip]:after,
.touch-device [data-tooltip]:before,
.touch-device [data-tooltip]:after {
	display: none;
}

.controls.disabled .controls--control-button:hover,
.touch-device .controls--control-button:hover {
	background-color: #ddd;
	border-color: #ccc;
}

.touch-device .control-open .controls--control-button[data-action="menu-open"] {
	border-color: #aaa;
	background-color: #ccc;
}

/**
 * Full-screen utility classes
 */
 .fullscreen-show {
	display: none;
}

.fullscreen-hide:-webkit-full-screen,
:-webkit-full-screen .fullscreen-hide {
	display: none;
}
.fullscreen-hide:-moz-full-screen,
:-moz-full-screen .fullscreen-hide {
	display: none;
}
.fullscreen-hide:-ms-fullscreen,
:-ms-fullscreen .fullscreen-hide {
	display: none;
}
.fullscreen-hide:fullscreen,
:fullscreen .fullscreen-hide {
	display: none;
}

.fullscreen-show:-webkit-full-screen,
:-webkit-full-screen .fullscreen-show {
	display: inline-block;
}
.fullscreen-show:-moz-full-screen,
:-moz-full-screen .fullscreen-show {
	display: inline-block;
}
.fullscreen-show:-ms-fullscreen,
:-ms-fullscreen .fullscreen-show {
	display: inline-block;
}
.fullscreen-show:fullscreen,
:fullscreen .fullscreen-show {
	display: inline-block;
}

/**
 * Full-screen preview styles
 */
.preview:-webkit-full-screen {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	padding-right: 0;
	padding-top: 0;
}
.preview:-webkit-full-screen iframe {
	width: 100vw;
	height: 100vh;
}

.preview:-moz-full-screen {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	padding-right: 0;
	padding-top: 0;
}
.preview:-moz-full-screen iframe {
	width: 100vw;
	height: 100vh;
}
 
.preview:-ms-fullscreen {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	padding-right: 0;
	padding-top: 0;
}
.preview:-ms-fullscreen iframe {
	width: 100vw;
	height: 100vh;
}
 
.preview:fullscreen {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	padding-right: 0;
	padding-top: 0;
}
.preview:fullscreen iframe {
	width: 100vw;
	height: 100vh;
}

/* totally a hack */

:-webkit-full-screen [data-tooltip-fullscreen]:before {
	content: attr(data-tooltip-fullscreen);
}

:-moz-full-screen [data-tooltip-fullscreen]:before {
	content: attr(data-tooltip-fullscreen);
}

:-ms-fullscreen [data-tooltip-fullscreen]:before {
	content: attr(data-tooltip-fullscreen);
}

.preview:fullscreen [data-tooltip-fullscreen]:before {
	content: attr(data-tooltip-fullscreen);
}

/**
 * Breakpoint classes
 */

.visible-small {
	display: none;
}

.controls-small .visible-small {
	display: inline-block;
}

.controls-small .visible-large {
	display: none;
	position: absolute;
}

.controls-small .controls--control {
	padding: 0 3px;
}

.controls-small .control-open .controls--control-group.visible-large {
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	margin-top: 3px;
	direction: rtl;
}

.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"] {
	border-radius: 0;
	float: none;
	width: 100%;
	text-align: left;
	white-space: nowrap;
}
.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"] .fa {
}
.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"][data-tooltip]:before {
	position: static;
	visibility: visible;
	opacity: 1;
	background: transparent;
	color: inherit;
	display: inline;
	margin: 0;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"][data-tooltip]:after {
	display: none;
}
.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"]:first-child {
	border-radius: 5px 5px 0 0;
}
.controls-small .control-open .controls--control-group.visible-large [class^="controls--control-"]:last-child {
	border-radius: 0 0 5px 5px;
}

.controls-small .controls--spacer {
	width: 5px; /* 10px */
}

.controls-small .control-open [data-action='menu-open'][data-tooltip]:before,
.controls-small .control-open [data-action='menu-open'][data-tooltip]:after {
	display: none;
}

.controls--control.control-open {
	position: relative;
}

/**
 * Playback styles
 */

#controls-play .fa {
  width: 12px;
}

#controls-play .label-stop,
#controls-play .fa-stop {
	display: none;
}

#controls-play.playing .label-play,
#controls-play.playing .fa-play {
	display: none;
}
#controls-play.playing .label-stop {
	display: inline;
}
#controls-play.playing .fa-stop {
	display: inline-block;
}

#controls-play.playing [data-tooltip-stop]:before {
	content: attr(data-tooltip-stop);
}

/**
 * Custom stuff
 */
.music-char-small {
	font-size: 75%;
}
.music-char:before {
	content: '';
	display: inline-block;
	height: 15px;
	line-height: 15px;
}
.music-char-sharp:before {
  content: '\266F';
}
.music-char-flat:before {
  content: '\266D';
}
.music-char-note:first-child {
  letter-spacing: 2px;
}
.music-char-note:before {
	/**
	 * 2669 - quarter note
	 * 266A - eighth note
	 * 266B - beamed eigth notes
	 * 266C - beamed sixteenth notes
	 */
	content: '\266A';
}