@bg: rgb(40, 40, 40);

html{
	overflow: hidden;
}
body{
	background: @bg;
	font-family: 'Helvetica Neue', Tahoma, Geneva, sans-serif;
	overflow: hidden;
	padding-top: 20px;
}
*{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*
@forward: #6EE862;
@backward: #E87562;
@delay: rgb(210, 210, 210);
@run: #FFE11F;
@loop: #F41FFF;
@pause: rgb(210, 210, 210);
*/
@pause: rgb(210, 210, 210);

@dark_highlight: rgb(170, 140, 150);
@dark: @bg + @bg;
@br: 5px;


/*
	KULER - Max
*/
@forward: rgb(59, 178, 157);
@backward: rgb(223, 73, 73);
@delay: @pause;
@run: rgb(239, 201, 76);
@loop: rgb(48, 80, 92);
@loop_on: rgb(226, 122, 63);

.cmd{
	border: 1px solid;
	color: @bg;
	margin-bottom: 8px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 200;
	letter-spacing: 1px;
	cursor: pointer;
	border-radius: @br;
	&:active{
		background: @bg !important;
		letter-spacing: 8px;
	}
	&.forward{
		background: @forward;
		&:active{
			border-color: @forward;
			color: @forward;
		}
	}
	&.backward{
		background: @backward;
		&:active{
			border-color: @backward;
			color: @backward;
		}
	}
	&.delay{
		background: @delay;
		&:active{
			border-color: @delay;
			color: @delay;
		}
	}
	&.run{
		background: @run;
		&:active{
			border-color: @run;
			color: @run;
		}
	}
	&.loop{
		background: @loop;
		&:active{
			border-color: @loop;
			color: @loop;
		}
		&.on{
			background: @loop_on;
			&:active{
				border-color: @loop_on;
				color: @loop_on;
			}
		}
	}

	&.seq{
		border: 0;
		padding: 0;
		height: 135px;
		div{
			display: block;
			height: 44px;
			float: none;
		}
		.for,
		.back,
		.pause{
			border: 1px solid #000;
			border-radius: @br;
			height: 37px;
			width: 35px;
			text-align: right;
			letter-spacing: normal !important;
			line-height: 59px;
			font-size: 12px !important;
			padding-left: 1px;
			padding-right: 1px;
			margin-right: 5px;
			color: @bg;
			float: left;

			&.highlight{
				border: 1px solid @run;
				background: @run - @dark_highlight;
				color: @run - @dark_highlight;
				&.set{
					background: @run;
					color: @bg;
				}
			}
		}
		.for{
			border-color: @forward;
			//&:active, 
			//&:hover,
			&.set{
				background: @forward;
			}
		}
		.back{
			border-color: @backward;
			//&:active, 
			//&:hover,
			&.set{
				background: @backward;
			}
		}
		.pause{
			border-color: @pause;
			//&:active, 
			//&:hover,
			&.set{
				background: @pause;
			}
		}
	}

}

#monitor{
	position: fixed;
	bottom: 8px;
	text-align: center;
	left: 0;
	right: 0;
	color: white;
	font-family: monospace;
	font-size: 24px;
}