/*
 # title: "INI-APP" // http://ini-app.de
 # desc: Modul Splittermond Initiative
 # author: Benjamin Mey - FastJack IT b.mey@fastjack-it.de 
 # powered by FastJack IT - http://fastjack-it.de
*/
	/*@viewport {
	width: 1024px;
}*/
	
	body {
		background: black;
		margin-left: auto;
		margin-right: auto;
		background-color: black;
		font-family: Roboto, Tahoma, Verdana, Arial;
	}
	
	.charActionIcon {
		vertical-align: middle;
		max-height: 65%;
		max-width: 65%;
		margin-top: -4px;
	}
	
	.helper {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.tickbutton {
		height: 75px;
		width: 75px;
		background-color: #C1C5B5;
		color: #000000;
		line-height: 75px;
		text-align: center;
		font-size: 30px;
		float: left;
		cursor: pointer;
		margin: 2px;
	}
	
	.areabutton {
		height: 75px;
		width: 154px;
		background-color: #C1C5B5;
		color: #000000;
		line-height: 75px;
		text-align: center;
		font-size: 25px;
		float: left;
		cursor: pointer;
		margin: 2px;
	}
	
	#tl_active {
		margin-left: 0;
		margin-right: auto;
	}
	
	#tl_standBy {
		margin-left: auto;
		margin-right: 0;
	}
	
	#tl_waiting {
		margin-left: auto;
		margin-right: 0;
	}
	
	.areaContainer {
		top: 80px;
		width: 500px;
	}
	
	#activeCharsArea {
		float: left;
		/*background-color: orange;*/
		left: 0;
	}
	
	#list-container {
		float: left;
		width: 100%;
		/*background-color: yellow;*/
	}
	
	#notActiveCharsArea {
		float: right;
		width: 390px;
		/*background-color: red;*/
	}
	
	#standBylist-container {
		width: 100%;
		margin-right: 0;
		margin-left: auto;
		/*background-color: yellow;*/
	}
	
	#waitinglist-container {
		width: 100%;
		margin-right: 0;
		margin-left: auto;
		/*background-color: yellow;*/
	}
	
	.charActions {
		position: fixed;
		width: 395px;
		left: 50%;
		margin-left: -198px;
		top: 80px;
		background-color: #555555;
	}
	
	.app {
		position: relative;
		width: 100%;
		background-color: black;
	}
	
	.appArea {
		position: absolute;
		left: 0;
		top: 70px;
		width: 100%;
		background-color: black;
	}
	
	.menuArea {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		heigth: 70px;
		line-height: 55px;
		background-color: #D10000;
	}
	
	.menuShowChar {
		position: absolute;
		display: none;
		left: 0;
		top: -20px;
		heigth: 0;
		line-height: 0;
	}
	
	.menu {
		float: left;
		height: 70px;
	}
	
	.menuButton {
		float: left;
		height: 70px;
		width: 70px;
		color: #000000;
		line-height: 70px;
		text-align: center;
		text-decoration: bold;
		cursor: pointer;
		margin-left: 2px;
		margin-right: 2px;
	}
	
	.help {
		float: left;
		height: 60px;
		width: 70px;
		color: white;
		line-height: 70px;
		text-align: center;
		text-decoration: bold;
		font-family: Roboto, Tahoma, Verdana, Arial;
		font-size: 32px;
		margin-left: 2px;
		margin-top: 2px;
		margin-right: 2px;
		cursor: pointer;
	}
	
	.colorbutton {
		height: 75px;
		width: 75px;
		line-height: 75px;
		text-align: center;
		font-size: 30px;
		float: left;
		cursor: pointer;
		margin: 2px;
	}
	
	.clear {
		clear: both;
	}
	
	.char {
		position: relative;
		display: block;
		margin-left: 10px;
		margin-right: auto;
		margin-top: 2px;
		margin-bottom: 2px;
		height: 60px;
		width: 440px;
		background: #bbbbbb;
		color: #444444;
		line-height: 60px;
		font-size: 24px;
		cursor: pointer;
		border-color: black;
		border-width: 1px;
		border-style: solid;
	}
	
	.trigger {
		position: relative;
		display: block;
		margin-left: 10px;
		margin-right: auto;
		margin-top: 2px;
		margin-bottom: 2px;
		height: 60px;
		width: 360px;
		background: #bbbbbb;
		color: #444444;
		line-height: 60px;
		font-size: 24px;
		cursor: pointer;
		border-color: black;
		border-width: 1px;
		border-style: solid;
	}
	
	.standByChar {
		position: relative;
		display: block;
		margin-left: 10px;
		margin-right: auto;
		margin-top: 2px;
		margin-bottom: 2px;
		height: 60px;
		width: 360px;
		background: #bbbbbb;
		color: #444444;
		line-height: 60px;
		font-size: 24px;
		cursor: pointer;
		border-color: #111111;
		border-width: 1px;
		border-style: solid;
	}
	
	.waitingChar {
		position: relative;
		display: block;
		margin-left: 10px;
		margin-right: auto;
		margin-top: 2px;
		margin-bottom: 2px;
		height: 60px;
		width: 360px;
		background: #bbbbbb;
		color: #444444;
		line-height: 60px;
		font-size: 24px;
		cursor: pointer;
		border-color: #111111;
		border-width: 1px;
		border-style: solid;
	}
	
	.areatitle {
		display: block;
		height: 25px;
		width: 200px;
		color: white;
		background-color: #D10000;
		line-height: 25px;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		margin-top: 10px;
		font-family: Roboto, Tahoma, Verdana, Arial;
	}
	
	.char-name {
		float: left;
		height: 60px;
		width: 190px;
		color: #000000;
		line-height: 60px;
		text-align: left;
		font-size: 20px;
		vertical-align: middle;
		overflow: hidden;
	}
	
	.trigger-name {
		float: left;
		height: 60px;
		width: 190px;
		color: #000000;
		line-height: 60px;
		text-align: left;
		font-size: 20px;
		vertical-align: middle;
		overflow: hidden;
		font-style: italic;
	}
	
	.char-ini {
		float: left;
		height: 60px;
		width: 60px;
		color: #555555;
		line-height: 60px;
		text-align: center;
		font-size: 18px;
		vertical-align: middle;
	}
	
	.char-color {
		float: left;
		height: 60px;
		width: 35px;
		background-color: white;
		line-height: 60px;
	}
	
	.char-blank {
		float: left;
		height: 60px;
		width: 10px;
		line-height: 60px;
	}
	
	.char-damage {
		float: left;
		height: 60px;
		width: 80px;
		color: white;
		line-height: 60px;
		text-align: center;
		text-decoration: bold;
		font-size: 25px;
		background-color: orangered;
		vertical-align: middle;
	}
	
	.char-damageMental {
		float: left;
		height: 60px;
		width: 40px;
		color: white;
		line-height: 60px;
		text-align: center;
		text-decoration: bold;
		font-size: 20px;
		background-color: blueviolet;
		vertical-align: middle;
	}
	
	.char-timeslot {
		float: left;
		height: 60px;
		width: 65px;
		color: red;
		line-height: 60px;
		text-align: center;
		text-decoration: bold;
		font-size: 40px;
		vertical-align: middle;
	}
	
	.charActionButton {
		border-color: #111111;
		border-style: solid;
		border-width: 2px;
		height: 60px;
		width: 75px;
		background-color: red;
		color: #000000;
		line-height: 60px;
		text-align: center;
		text-decoration: bold;
		font-size: 20px;
		cursor: pointer;
		float: left;
		vertical-align: middle;
	}
	
	.charActionTitle {
		display: block;
		height: 15px;
		width: 100%;
		color: white;
		line-height: 15px;
		text-align: center;
		text-decoration: bold;
		font-size: 18px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-family: Roboto, Tahoma, Verdana, Arial;
	}
	
	.charTextField {
		font-size: 26px;
		width: 385px;
		margin-left: 5px;
		margin-right: 5px;
		border: 0;
		line-height: 65px;
	}
	
	.textEdit {
		width: 395px;
		background-color: #555555;
		color: black;
		line-height: 75px;
		text-align: left;
		font-size: 24px;
	}
	
	.submitButton {
		float: left;
		font-size: 26px;
		width: 100px;
		margin-left: 90px;
		margin-right: 15px;
		margin-bottom: 5px;
		background-color: #bbbbbb;
		cursor: pointer;
		line-height: 50px;
		text-align: center;
	}
	
	.abortButton {
		float: left;
		font-size: 26px;
		width: 100px;
		margin-right: 90px;
		margin-left: 0;
		margin-bottom: 5px;
		background-color: red;
		color: white;
		cursor: pointer;
		line-height: 50px;
		text-align: center;
	}
	
	.version {
		position: relative;
		float: left;
		height: 25px;
		width: 100%;
		color: silver;
		line-height: 25px;
		text-align: right;
		font-size: 11px;
		font-weight: bold;
		margin-right: 5px;
		bottom: 0;
	}
	
	.menuIcon {
		vertical-align: middle;
		width: 35px;
		margin-top: -4px;
	}

	@media only screen and (max-width:1023px) {
		#notActiveCharsArea {
			float: right;
			margin-left: 0;
			margin-right: auto;
			width: 320px;
			/*background-color: red;*/
		}
		#standBylist-container {
			width: 100%;
			margin-right: auto;
			margin-left: 0;
			/*background-color: yellow;*/
		}
		#waitinglist-container {
			width: 100%;
			margin-right: auto;
			margin-left: 0;
			/*background-color: yell*/
		}
		#tl_standBy {
			margin-left: auto;
			margin-right: 0;
		}
		#tl_waiting {
			margin-left: auto;
			margin-right: 0;
		}
		.menuButton {
			float: left;
			height: 50px;
			width: 40px;
			color: #000000;
			line-height: 50px;
			text-align: center;
			text-decoration: bold;
			cursor: pointer;
			margin-left: 2.5px;
			margin-right: 2.5px;
		}
		.menuShowChar {
			position: relative;
			display: none;
			left: 0;
			top: -5px;
			width: 100%;
			heigth: 20px;
			line-height: 20px;
			background-color: #cccccc;
			color: black;
			text-align: center;
			text-decoration: bold;
			font-family: Roboto, Tahoma, Verdana, Arial;
			font-size: 18px;
		}
		.char {
			position: relative;
			display: block;
			margin-left: 10px;
			margin-right: auto;
			margin-top: 2px;
			margin-bottom: 2px;
			height: 40px;
			width: 290px;
			background: #bbbbbb;
			color: #444444;
			line-height: 40px;
			font-size: 20px;
			cursor: pointer;
			border-color: black;
			border-width: 1px;
			border-style: solid;
		}
		.trigger {
			position: relative;
			display: block;
			margin-left: 10px;
			margin-right: auto;
			margin-top: 2px;
			margin-bottom: 2px;
			height: 40px;
			width: 230px;
			background: #bbbbbb;
			color: #444444;
			line-height: 40px;
			font-size: 20px;
			cursor: pointer;
			border-color: black;
			border-width: 1px;
			border-style: solid;
		}
		.standByChar {
			position: relative;
			display: block;
			margin-left: 10px;
			margin-right: auto;
			margin-top: 2px;
			margin-bottom: 2px;
			height: 40px;
			width: 260px;
			background: #bbbbbb;
			color: #444444;
			line-height: 40px;
			font-size: 20px;
			cursor: pointer;
			border-color: #111111;
			border-width: 1px;
			border-style: solid;
		}
		.waitingChar {
			position: relative;
			display: block;
			margin-left: 10px;
			margin-right: auto;
			margin-top: 2px;
			margin-bottom: 2px;
			height: 40px;
			width: 260px;
			background: #bbbbbb;
			color: #444444;
			line-height: 40px;
			font-size: 20px;
			cursor: pointer;
			border-color: #111111;
			border-width: 1px;
			border-style: solid;
		}
		.char-name {
			float: left;
			height: 40px;
			width: 120px;
			color: #000000;
			line-height: 40px;
			text-align: left;
			font-size: 14px;
			vertical-align: middle;
			overflow: hidden;
		}
		.trigger-name {
			float: left;
			height: 40px;
			width: 120px;
			color: #000000;
			line-height: 40px;
			text-align: left;
			font-size: 14px;
			vertical-align: middle;
			overflow: hidden;
			font-style: italic;
		}
		.char-ini {
			float: left;
			height: 40px;
			width: 40px;
			color: #555555;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			vertical-align: middle;
		}
		.char-color {
			float: left;
			height: 40px;
			width: 20px;
			background-color: white;
			line-height: 40px;
		}
		.char-blank {
			float: left;
			height: 40px;
			width: 10px;
			line-height: 40px;
		}
		
		.char-damage {
			float: left;
			height: 40px;
			width: 60px;
			color: white;
			line-height: 40px;
			text-align: center;
			text-decoration: bold;
			font-size: 16px;
			background-color: orangered;
			vertical-align: middle;
		}
		.char-damageMental {
			float: left;
			height: 40px;
			width: 30px;
			color: white;
			line-height: 40px;
			text-align: center;
			text-decoration: bold;
			font-size: 14px;
			background-color: blueviolet;
			vertical-align: middle;
		}
		.char-timeslot {
			float: left;
			height: 40px;
			width: 40px;
			color: red;
			line-height: 40px;
			text-align: center;
			text-decoration: bold;
			font-size: 25px;
			vertical-align: middle;
		}
		.areaContainer {
			top: 55px;
			width: 320px;
		}
		.tickbutton {
			height: 55px;
			width: 55px;
			background-color: #C1C5B5;
			color: #000000;
			line-height: 55px;
			text-align: center;
			font-size: 30px;
			float: left;
			cursor: pointer;
			margin: 2px;
		}
		.areabutton {
			height: 55px;
			width: 114px;
			background-color: #C1C5B5;
			color: #000000;
			line-height: 55px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			float: left;
			cursor: pointer;
			margin: 2px;
		}
		.charActions {
			position: fixed;
			width: 295px;
			left: 50%;
			margin-left: -146px;
			top: 70px;
			background-color: #555555;
		}
		.colorbutton {
			height: 55px;
			width: 55px;
			line-height: 55px;
			text-align: center;
			font-size: 30px;
			float: left;
			cursor: pointer;
			margin: 2px;
		}
		.menuArea {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			heigth: 50px;
			line-height: 50px;
			background-color: #D10000;
		}
		.menu {
			float: left;
			height: 50px;
		}
		.appArea {
			position: absolute;
			left: 0;
			top: 55px;
			width: 100%;
			background-color: black;
		}
		.charTextField {
			font-size: 26px;
			width: 286px;
			border: 0;
			margin-left: 3.5px;
			margin-right: 3.5px;
			line-height: 65px;
		}
		.textEdit {
			width: 291px;
			background-color: #555555;
			color: black;
			line-height: 75px;
			text-align: left;
			font-size: 20px;
		}
		.submitButton {
			float: left;
			font-size: 26px;
			width: 100px;
			margin-left: 42px;
			margin-right: 10px;
			margin-bottom: 5px;
			background-color: #bbbbbb;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
		}
		.abortButton {
			float: left;
			font-size: 26px;
			width: 100px;
			margin-right: auto;
			margin-left: 10;
			margin-bottom: 5px;
			background-color: red;
			color: white;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
		}
	}
	
	@media only screen and (max-width:639px) {
		#list-container {
			display: block width: 100%;
			/*background-color: yellow;*/
		}
		#notActiveCharsArea {
			float: left;
			margin-left: 0;
			margin-right: auto;
			width: 320px;
			/*background-color: red;*/
		}
		#standBylist-container {
			width: 100%;
			margin-right: auto;
			margin-left: 0;
			/*background-color: yellow;*/
		}
		#waitinglist-container {
			width: 100%;
			margin-right: auto;
			margin-left: 0;
			/*background-color: yell*/
		}
		#tl_standBy {
			margin-left: 0;
			margin-right: auto;
		}
		#tl_waiting {
			margin-left: 0;
			margin-right: auto;
		}