barrels.css

/*
 * CSS specifications for Barrels
 */
@font-face { /* Modified from Font Squirrel http://www.fontsquirrel.com */
	font-family: MedievalEnglish;
	src: url('font/medieval-english-webfont.eot'); /* IE9 compat modes */
	src: local('MedievalEnglish'),
		local('Medieval English'),
		local('MedievalEnglishNormal'),
		local('Medieval English Normal'),
		url('font/medieval-english-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
		url('font/medieval-english-webfont.woff') format('woff'), /* modern browsers */
		url('font/medieval-english-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
		url('font/medieval-english-webfont.svgz#medieval_englishnormal') format('svg'), /* legacy iOS */
		url('font/medieval-english-webfont.svg#medieval_englishnormal') format('svg'); /* legacy iOS */
}

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

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: black url('images/background.jpg');
	background-size: contain;
	color: white;
	overflow: hidden;
}

img {
	border: none;
}

div.visible {
	display: block;
}

.invisible {
	display: none;
}

#startupBlockID, #workingBlockID {
	width: 100%;
	height: 100%;
}

#startupBlockID {
	text-align: center;
}

#loadingProgressID {
	width: 100%;
	padding: 1em;
	text-align: center;
	font-weight: bold;
}

#loggerID {
	display: inline-block;
	text-align: left;
}

#workingBlockID {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	border: none;
	outline: none;
	cursor: pointer; /* IE workaround */
	cursor: url('images/knock.png'), pointer;
}

div.barrel {
	position: absolute;
}

img.barrel {
	width: 100%;
	transition: 1s;
	-ms-transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
}

img.highlight {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#plateID {
	display: table;
	position: absolute;
	left: 100%;
	bottom: 100%;
	background: url('images/cookie.png') center no-repeat;
	background-size: contain;
	color: #f6d892;
	font-family: MedievalEnglish, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.1;
	text-align: center;
	transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	-moz-transform: rotate(0deg) scale(0);
	-webkit-transform: rotate(0deg) scale(0);
	-o-transform: rotate(0deg) scale(0);
}

.success {
	font-size: 25px;
}

#plateContentID {
	display: table-cell;
	vertical-align: middle;
}

#plateContentID h1 {
	font-size: 180%;
	margin: 0;
	padding: 0;
}