html
{
	color: #FFF;
	background-image: url('image/bg.jpg');
	background-size: cover;
	font-family: "Roboto Condensed";
}

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

.ease-opacity
{
	transition: opacity ease 0.3s;
}

#mask
{
	text-align: center;
	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.7);
	visibility: hidden;
	opacity: 0;
}

#power-confirm
{
	position: absolute;
	left: 50%;
	bottom: 50px;
	visibility: hidden;
	opacity: 0;
}

#power-confirm > ul
{
	display: inline-block;
	margin: 0px 0px 0px -50%;
}

#power-confirm li
{
	text-align: center;
	list-style: none;
	display: inline-block;
	margin-left: 2em;
	margin-right: 2em;
}

#power-confirm li a
{
	text-decoration: none;
	color: inherit;
	font-size: 1.5em;
	display: inline-block;
}

#power-confirm li div
{
	display: block;
	height: 96px;
	width: 96px;
	border-radius: 48px;
}

#icon-shutdown
{
	background: url('image/shutdown.png') #C33;
}

#icon-reboot
{
	background: url('image/reboot.png') #33C;
}

#icon-cancel
{
	background: url('image/cancel.png') #3C3;
}

#shutdown
{
	position: absolute;
	right: 50px;
	bottom: 50px;
	cursor: pointer;
	opacity: 0.5;
	width: 96px;
}

.error-icon
{
	font-size: 1.1em;
	font-weight: bold;
	color: #F00;
}

#shutdown:hover
{
	opacity: 1;
}

#users a.user
{
	transition: opacity ease 0.15s;
}

a.user
{
	text-align: center;
	text-decoration: none;
	color: white;
	margin-top: 2em;
	display: block;
}

.avatar
{
	object-fit: cover;
	width: 96px;
	height: 96px;
	border-radius: 48px;
}

.name
{
	display: block;
}

#password-prompt, #password-entry
{
	display: block;
	font-size: 20px;
}

#users
{
	position: absolute;
	bottom: 50px;
	left: 50px;
}

#message-container
{
	font-size: 20px;
}

#password-entry
{
	color: #333;
	opacity: inherit;
	background-color: #FFF;
	padding: 0.2em;
	border: 1px solid #DDD;
	border-radius: 5px;
}

#message-container, #password-container
{
	height: 96px;
	display: table;
	position: absolute;
	padding-left: 2em;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
}

#password-container.shown, #message-container.shown, #mask.shown, #power-confirm.shown
{
	visibility: visible;
	opacity: 1;
	transition: opacity 0.15s linear 0.05s;
}

#message-label, #password-container > form
{
	display: table-cell;
	vertical-align: middle;
}

#date, #time
{
	font-family: Roboto;
	text-align: right;
	color: #FFF;
}

#date
{
	margin-top: 50px;
	margin-right: 65px;
	font-size: 50px;
}

#time
{
	margin-right: 30px;
	font-size: 240px;
}

#session-list
{
	font-family: inherit;
	position: absolute;
	top: 50px;
	left: 50px;
	border: 1px solid #DDD;
	border-radius: 5px;
	padding: 0.2em;
	color: #333;
	opacity: 0.5;
	padding-right: 2em;
	background: url('image/drop-down.svg') no-repeat right #FFF;
	-webkit-appearance: none;
	-moz-appearance: none; /* only for when testing */
}

#session-list:hover
{
	opacity: 1;
}