/**
 *  Copyright 2015 Zach Hall
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 **/

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #E8E7E2;
	font-family: 'Anonymous Pro';
}

p {
    margin-top: 5px;
    margin-bottom: 5px;
}

#container {
	position: absolute;
	top: 0;
	left: 0;
	width: 78%;
	padding-left: 1%;
}

#github {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #ddd;
	font-size: 12px;
	padding-left: 5px;
	padding-right: 5px;
}

/* MIDI Monitor */
#monitor {
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	height: 100%;
	background: #ccc;
	padding-left: 5px;
	overflow: scroll;
}

.note-off {
	color: red;
}

.note-on {
	color: green;
}

.btn-green, #triggerZone:active, #triggerZone:focus {
	background-color:#44c767;
	border-color:#18ab29;
	color:#ffffff;
	text-shadow:0px 1px 0px #2f6627;
	outline: 0;
}
.btn-green:hover {
	background-color:#5cbf2a;
}
button img {
	box-shadow: 0px 1px 1px #2f6627;
}

.btn-red {
	background-color:#e4685d;
	border-color:#ffffff;
	text-shadow:0px 1px 0px #b23e35;
}
.btn-red:hover {
	background-color:#b8544b;
}
.btn-red:active {
	position:relative;
	top:1px;
}

button:focus {
	outline:0;
}
button {
	background-color:#7892c2;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:5px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
button:hover {
	background-color:#476e9e;
}
button:active {
	position:relative;
	top:1px;
}

#actions {
    line-height: 32px;
}

#triggerZone {
	width: 100%;
}

/* Cannon */
#box {
	max-height: 400px;
	overflow: scroll;
}

table {
	font-size: 10px;
	border: 1px solid #566963;
	border-collapse: collapse;
}

tr, td, th {
	border: 1px solid #566963;
}

td {
	text-align: center;
}

tr.active {
	background: #566963;
	color: white;
}

#lastQueue {
	height: 30px;
}

#lastQueue td {
	padding: 10px;
}

.remove-sequence, .position {
	cursor: pointer;
}

/* Groups */
.group {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
}

.group-header {
	font-variant: small-caps;
	border-bottom: 2px solid;
}

.group-red {
	background: #ffbbb5;
}

.group-red .group-header {
	border-color: #e4685d;
}

.group-green {
	background: #71ff97;
}

.group-green .group-header {
	border-color: #44c767;
}

.group-blue {
	background: #b7d0ff;
}

.group-blue .group-header {
	border-color: #7892c2;
}