@import "reset";

.webremote-portal

	.loading 
		p
			text-align: center;

.webremote-portal-inner

	font-size: 3vmin;
	position: absolute;
	width: 100%;
	height: 100%;

	div.errors
		clear: both;

		p
			color: red;

	div.countdown-background
		position: absolute;
		display: block;
		top: 50%;
		width: 50vw;
		height: 25vw;
		margin-left: -25vw;
		left: 50%;
		margin-top: -12vw;
		background: black;
		opacity: 0.9;

	div.countdown
		position: absolute;
		display: block;
		top: 48%;
		width: 50vw;
		height: 25vw;
		margin-left: -25vw;
		left: 50%;
		margin-top: -12vw;

		p
			text-align: center;
			line-height: 25vw;

	*
		color: white;

	p
		margin: 0;
		padding: 0 1vw;
		margin-top: 5px;
		margin-bottom: 5px;

	h1
		display: none;

	h2
		margin: 0;
		padding: 0 1vw;
		margin-top: 4vw;
		margin-bottom: 1vw;
		font-size: 3vw;

	.connection-information

		position: absolute;
		bottom: 0;
		padding-top: 3vmin;

		h2
			margin-top: 1vw;

	div.active-users
	div.connected-users

		width: 43.5vw;
		float: left;

		ul
			display: block;
			padding: 0.5vw;
			padding-bottom: 0;
			padding-right: 0;
			list-style-type: none;
			margin: 0.5vw;
			background: #333;

			li.clearer
				clear: both;

			li.empty
				background: none;
				width: 100%;

				span
					line-height: 10vw;
					color: gray;

			li
				width: 10vw;
				height: 10vw;
				float: left;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				list-style-type: none;
				background: orange;
				margin-bottom: 0.5vw;
				margin-right: 0.5vw;
				text-align: center;
				font-size: 1.5vw;

				i
					font-size: 5vw;
					display: block;
					text-align: center;
					margin-top: 1vw;
					margin-top: 1vw;

				span
					font-size: serif;
			&:after
			&:before
				clear: both;
				content: " ";
				display: table;

	div.active-users
		float: right;

	@media all and (orientation:portrait)

		font-size: 3vw;

		div.active-users
		div.connected-users

			float: none;
			width: auto;

			ul
				li
					width: 17.2vw;
					height: 17.2vw;

					font-size: 2.5vw;

					i
						font-size: 10vw;

				li.empty
					background: none;
					width: 100%;

					span
						line-height: 17.2vw;
						color: gray;

		h2
			margin-top: 4vw;
			font-size: 3vh;

	.accounts-overlay
		position: absolute;
		background: black;
		opacity: 0.5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	.accounts
		position: absolute;
		left: 50%;
		top: 50%;
		width: 80vw;
		height: 80vh;
		background: black;
		margin-top: -40vh;
		margin-left: -40vw;
		z-index: 1;
		border: 2px solid black;

		h2
			margin-top: 1vw;

		.link-new-account
			margin-top: 4vh;

		a
			color: white;