@CHARSET "UTF-8";

* {
	box-sizing: border-box;
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
}

html {
	background: #1D1F1F;
	color: #F6E9E0;
	font-family: arial;
	font-size: 12pt;
	height: 100%;
	width: 100%;
}

body {
	height: 100%;
	width: 100%;
}

a, nav .dropdown+.dropdown input[type="submit"] {
	color: #CE422B;
	cursor: pointer;
	text-decoration: none;
}

a:active, a:hover, a.active, nav .dropdown+.dropdown input[type="submit"]:active,
	nav .dropdown+.dropdown input[type="submit"]:hover {
	color: #FF6A00;
}

button, input[type=submit] {
	min-width: 50px;
	padding: 5px;
}

canvas {
	/*border: 1px solid black;*/
	vertical-align: bottom;
}

footer {
	border-width: 1px 0 0 0;
	bottom: 0;
}

footer, nav {
	background: #303232;
	/*box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);*/
	border: 1px solid black;
	display: flex;
	left: 0;
	position: fixed;
	height: 65px;
	width: 100%;
	z-index: 10000;
}

footer section, nav section {
	border: 1px solid black;
	border-width: 0 1px;
}

footer section+section, nav section+section {
	border-width: 0 1px 0 0;
}

footer>section>div, nav>section>a, nav>div>section>a, nav>div>section>div
	{
	align-items: center;
	display: flex;
	height: 100%;
	padding: 0 20px;
}

form>table {
	width: 100%;
}

form>table td {
	vertical-align: middle;
}

form>table>tr>td:nth-child(1) {
	width: 100px;
}

h1, h2 {
	background: #232525;
	border-bottom: 1px solid #080808;
	display: flex;
	font-size: 12pt;
	font-weight: bold;
	padding: 0px;
}

h1+aside {
	background: rgba(0, 0, 0, .5);
	float: right;
	padding: 10px;
}

h1>*, h2>* {
	flex: 99;
}

h1>div {
	padding: 20px;
}

h2>div {
	padding: 10px;
}

h1 button,
h2 button {
	border: 1px solid #000000;
	border-width: 0 0 0 1px;
	flex: 0 0 25px;
	margin: 0;
	padding: 1px;
	min-width: 58px;
}

h2 button {
	min-width: 38px;
}

h1 button:focus,
h1 button:hover,
h2 button:focus,
h2 button:hover {
	background: #303232;
	border-color: #ffffff;
	border-width: 1px;
	cursor: pointer;
}

h1 button.drag:hover,
h2 button.drag:hover {
	cursor: move;
}

button.confirm:focus,
button.confirm:hover {
	background: #802020;
	border: 1px solid #ff4040;
	color: #ff4040;
}

img {
	vertical-align: top;
	/* unselectable */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

button, input[type="submit"], .input {
	background: #1D1F1F;
	border: 1px solid #FF6A00;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	padding: 5px;
	margin: 5px;
}

input[type="password"], input[type="text"], textarea {
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
	margin: 0;
}

main {
	padding: 105px 0 65px 40px;
}

main article {
	display: inline-block;
	padding: 0 40px 40px 0;
	vertical-align: top;
}

main article+article {
	padding-top: 0;
}

main article+div {
	padding-top: 0;
}

main article>div {
	background: #303232;
	/*box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);*/
	border: 1px solid black;
}

main article>div>div {
	padding: 20px;
}

nav {
	border-width: 0 0 1px 0;
	top: 0;
}

nav>div {
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

nav .dropdown+.dropdown a, nav .dropdown+.dropdown input[type="submit"]
	{
	background: #303232;
	border: 1px solid black;
	border-width: 1px;
	display: block;
	padding: 5px 20px;
	margin: 0;
}

nav .dropdown+.dropdown a+a, nav .dropdown+.dropdown a+form>input[type="submit"],
	nav .dropdown+.dropdown form+a, nav .dropdown+.dropdown form+form>input[type="submit"]
	{
	border-width: 0 1px 1px 1px;
}

nav>section>a:hover, nav>div>section>a:hover, nav>section>a.active {
	/*background: linear-gradient(to right,#CE422B,#FF6A00);*/
	/*color: #000000;*/
	/*background: linear-gradient(to bottom,#303232 80%,#CE422B,#FF6A00);*/
	border: 5px solid #FF6A00;
	border-width: 0 0 5px 0;
}

p+p {
	margin-top: 20px;
}

table {
	border-collapse: collapse;
	display: table;
}

table.evenodd>tr:nth-child(odd), table.evenodd>tr:nth-child(odd), table.evenodd>tbody>tr:nth-child(odd),
	table.evenodd>tbody>tr:nth-child(odd) {
	background: #303232;
}

table.evenodd>tr:nth-child(even), table.evenodd>tr:nth-child(even),
	table.evenodd>tbody>tr:nth-child(even), table.evenodd>tbody>tr:nth-child(even)
	{
	background: #232525;
}

table.padded>tr>td, table.padded>tr>th, table.padded>tbody>tr>td, table.padded>tbody>tr>th
	{
	padding: 5px 10px;
	text-align: left;
	vertical-align: top;
}

textarea {
	height: 300px;
	resize: vertical;
	width: 100%;
}

/* classes */
.admin {
	display: flex;
}

.admin a {
	flex-grow: 1;
	padding: 1px 6px;
	text-align: center;
}

.admin a:hover, .admin a:active {
	background: rgba(0, 0, 0, 0.5);
}

.buttons {
	text-align: right;
}

div.buttons {
	margin-top: 10px;
}

.dropdown+.dropdown {
	display: none;
	position: absolute;
}

.dropdown:hover+.dropdown {
	display: block;
}

.dropdown+.dropdown:hover {
	display: block;
}

.fill {
	width: 100%;
}
/*.fill h1
{
	background: linear-gradient(to right,#CE422B,#FF6A00);
}*/
.error > div, .info > div, .warn > div {
	border-width: 2px;
}
.error > div, input.multiclick-ack-3 {
	/*background: linear-gradient(#800, #303232 5%, 95% #303232, #800);*/
	border-color: #800;
}

.info > div, input.multiclick-ack-1 {
	/*background: linear-gradient(#080, #303232 5%, #303232 95%, #080);*/
	border-color: #080;
}

.warn > div, input.multiclick-ack-2 {
	/*background: linear-gradient(#880, #303232 5%, #303232 95%, #880);*/
	border-color: #880;
}

.input {
	display: flex;
	align-items: center;
}

.input>input[type=checkbox] {
	margin-right: 5px;
}

.input>label+input[type=checkbox] {
	margin-left: 10px;
}

.hidden {
	display: none;
}

.progress {
	cursor: pointer;
}

.progress>td {
	padding: 0 !important;
}

.progress div[name=bar] {
	/*background: linear-gradient(to right, #303232, #CE422B);*/
	background: linear-gradient(to right, #CE422B, #FF6A00);
	height: 5px;
	width: 100%;
}

.progress div[name=background] {
	background: rgba(0, 0, 0, 0.5);
}

.reload {
	background: url(../icons/reload10.png);
	display: inline-block;
	height: 24px;
	margin-left: 10px;
	width: 24px;
}

.reload:hover {
	background: url(../icons/reload11.png);
}

.spinner {
	padding: 16px;
}

.strip {
	background: rgba(0, 0, 0, 0.50);
	display: flex;
	justify-content: center;
}

.strip img {
	padding: 10px 5px;
}

.template {
	display: none !important;
}

/* unique boxes */
#messages {
	position: fixed;
	left: 50%;
	top: 50px;
	z-index: 20000;
}

.message {
	display: block;
	overflow: hidden;
	padding: 0;
}

.message+.message {
	padding-top: 5px;
}

#games>table>tr>th, #games>table>tbody>tr>th {
	border: 1px solid #000000;
	font-weight: bold;
	padding: 20px;
	text-align: center;
}

#games>table>tr>td, #games>table>tbody>tr>td {
	border: 1px solid #000000;
	padding: 10px;
	vertical-align: top;
}

#games>table>tr>td[name=game], div#image-preview, #games>table>tbody>tr>td[name=game]
	{
	background-position: center center;
	background-size: cover;
	font-weight: bold;
	width: 200px;
}

div#image-preview {
	height: 100px;
	margin: 5px;
	padding: 5px;
}

#games>table table {
	width: 100%;
}

#games>table table td+td {
	padding-left: 10px;
	text-align: right;
}

#games td[name=game]>div, div.game-title {
	align-items: center;
	background-color: rgba(0,0,0,.75);
	border-radius: 5px;
	display: inline-flex;
}

#games td[name=game]>div>*, div.game-title>* {
	padding: 2px 3px;
}

#games td[name=jobs] a {
	padding: 1px 6px;
}

#games td[name=jobs]>div>div {
	display: flex;
}

#games td[name=jobs]>div>div>a:nth-child(2) {
	flex-grow: 1;
}

#games td[name=jobs] a.progress {
	display: block;
	padding: 6px;
}

#games td[name=jobs] a:hover, #games td[name=jobs] a:active {
	background: rgba(0, 0, 0, 0.5);
}

#games td[name=status] > div {
	display: flex;
}

#games td[name=status] > div > span {
	flex: 1;
}

#outputLines>tr:hover, #outputLines>tbody>tr:hover {
	background: rgba(0, 0, 0, 0.5);
}

#outputLines>tr>td:nth-child(1), #outputLines>tbody>tr>td:nth-child(1) {
	color: #CE422B;
	font-size: 0.75em;
	padding-right: 20px;
	text-align: right;
	vertical-align: middle;
	/* unselectable */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#outputLines>tr>td:nth-child(2), #outputLines>tbody>tr>td:nth-child(2) {
	word-break: break-all;
}

#user {
	font-weight: bold;
}

/* Graph */
#AnnihGraphPopup {
	background-color: rgba(255, 128, 0, .75);
	border: 1px solid #ff8000;
	display: none;
	padding: 5px;
	position: absolute;
}

#AnnihGraphHline, #AnnihGraphVline {
	border: 1px dashed #ff8000;
	display: none;
	position: absolute;
}

#AnnihGraphHline {
	border-width: 1px 0;
}

#AnnihGraphVline {
	border-width: 0 1px;
}

table.graph {
	height: 100%;
	width: 100%;
}

table.graph>tr>td:nth-child(1) {
	width: 1%;
}

/* Enlagement */
img.enlargeable {
	cursor: pointer;
	max-height: 150px;
	max-width: 150px;
}

#annihEnlarged {
	background-color: rgba(0, 0, 0, .5);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 20000;
}

#annihEnlarged>* {
	position: relative;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}