*
{
	margin: 0;
	padding: 0;
}

body
{
	background-image: url(backdrop.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;

	font-family: "Segoe UI", sans-serif;
}

.progressList dl
{
	height: 20px;
}

.progressList dt
{
	display: inline-block;
	height: 100%;
	line-height: 20px;
	vertical-align: middle;
	
	margin: 10px;
	margin-top: 0px;
	margin-bottom: 0px;

	font-size: 18px;

	width: 120px;
	color: #fff;
}

.progressList dd
{
	display: inline-block;
	height: 100%;
	vertical-align: middle;

	position: relative;
}

.progressList dd span, .progressList dd i
{
	position: absolute;
	top: 0px;
	left: 0px;

	display: block;
	height: 20px;
}

.progressList dd span
{
	transition: width 200ms linear; /* linear to not have easing ruin our multi-step updates */
}

.progressList dd i
{
	width: 100%;	
}

.progressList .not-done i
{
	animation: glowy 750ms ease-in-out infinite alternate;
}

.log
{
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 600px;
	height: 240px;

	overflow: hidden;
	
	color: #fff;

	list-style: none;

	font-size: 70%;

	font-family: "Lucida Console", monospace;
}

.log li:last-child:after
{
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	animation: ellipsis steps(4,end) 1500ms infinite;
	content: "...";
	width: 0px;
}

@keyframes glowy
{
	from {
		opacity: 1.0;
	}
	to {
		opacity: 0.7;
	}
}

@keyframes ellipsis
{
	to
	{
		width: 2.1em;    
	}
}