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

body {
	background: #000;
	text-align: center;
	color: #555;
	overflow: hidden;
}

	body > .loading,
	body .login,
	body .center-message {
		/*margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	body .loading {
		display: inline-block;
		width: 36px;
		height: 36px;
		background-image: url("loading.gif");
		background-size: 100% 100%;
	}
	
	body .login {
		width: 200px;
		height: 70px;
	}
	
		body .login > div {
			font-size: 30px;
			color: #333;
			line-height: 40px;
		}
	
		body .login > input {
			width: 180px;
			height: 30px;
			border: none;
			background: #222;
			color: #666;
			padding: 0 10px;
		}
		
			body .login > input:focus {
				outline: none;
			}
		
			body .login > input[readonly] {
				color: #444;
			}
	
	body .center-message {
		height: 50px;
		color: #666;
		font-size: 32px;
	}
	
	body .stream {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		padding: 10px;
	}
	
		body .stream .header {
			height: 70px;
			position: relative;
		}
		
			body .stream .header .about,
			body .stream .header .announcement {
				display: inline-block;
				position: absolute;
				top: 0;
				margin: 0 6px;
			}
			
			body .stream .header .about {
				right: 0;
				text-align: right;
				color: inherit !important;
			}
			
			body .stream .header .announcement {
				left: 0;
				text-align: left;
				max-width: 28%;
			}
			
			body .stream .header .title {
				font-size: 32px;
			}
			
			body .stream .header .controls {
				font-size: 13px;
				font-weight: bold;
			}
			
				body .stream .header .controls .reloads {
					
				}
				
					body .stream .header .controls .reloads .reload {
						color: inherit !important;
						text-decoration: none;
					}
					
						body .stream .header .controls .reloads .reload:not(:first-of-type) {
							margin-left: 8px;
						}
						
						body .stream .header .controls .reloads .reload i {
							margin-right: 3px;
						}
		
		body .stream .player-and-chat {
			display: inline-block;
			width: 100%;
			height: calc(100% - 70px);
		}
		
			body .stream .player-and-chat .player,
			body .stream .player-and-chat .chat {
				background: #111;
			}
		
			body .stream .player-and-chat .player {
				float: left;
				margin-right: 10px;
			}
			
			body .stream .player-and-chat .chat {
				float: right;
			}
			
				body .stream .player-and-chat .player > *,
				body .stream .player-and-chat .chat > * {
					width: 100%;
					height: 100%;
				}