#illustration
{
	margin: 0 0 1px 20px;
	padding: 0;
	width: 300px;
	height: 214px;
	float: right;
	background-image: url('/visuals/lounge.jpg');
	border-radius: 1px;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.tv-effect { position: relative; }
.tv-effect:after {
	content: url('/visuals/lounge.jpg');
	position: absolute;
	overflow: hidden;
	left: 1px;
	top: 0;
	width: 300px;
	height: 214px;
	clip: rect(0, 300px, 0, 0);
	opacity: 0.66;
	animation: kf_tv-effect-1 3s infinite linear alternate-reverse;
}
.tv-effect:before {
	content: url('/visuals/lounge.jpg');
	position: absolute;
	overflow: hidden;
	left: -2px;
	top: 0;
	width: 300px;
	height: 214px;
	clip: rect(0, 300px, 0, 0);
	opacity: 0.5;
	animation: kf_tv-effect-2 4s infinite linear alternate-reverse;
}

@keyframes kf_tv-effect-1 {
	0% { clip: rect(3px, 300px, 18px, 0); }
	5% { clip: rect(42px, 300px, 16px, 0); }
	10% { clip: rect(74px, 300px, 79px, 0); }
	15% { clip: rect(94px, 300px, 67px, 0); }
	20% { clip: rect(75px, 300px, 70px, 0); }
	25% { clip: rect(70px, 300px, 14px, 0); }
	30% { clip: rect(86px, 300px, 77px, 0); }
	35% { clip: rect(99px, 300px, 98px, 0); }
	40% { clip: rect(91px, 300px, 40px, 0); }
	45% { clip: rect(51px, 300px, 11px, 0); }
	50% { clip: rect(28px, 300px, 64px, 0); }
	55% { clip: rect(34px, 300px, 13px, 0); }
	60% { clip: rect(63px, 300px, 6px, 0); }
	65% { clip: rect(31px, 300px, 4px, 0); }
	70% { clip: rect(93px, 300px, 78px, 0); }
	75% { clip: rect(51px, 300px, 81px, 0); }
	80% { clip: rect(99px, 300px, 32px, 0); }
	85% { clip: rect(41px, 300px, 24px, 0); }
	90% { clip: rect(97px, 300px, 39px, 0); }
	95% { clip: rect(27px, 300px, 52px, 0); }
	100% { clip: rect(259px, 300px, 91px, 0); }
}

@keyframes kf_tv-effect-2 {
	0% { clip: rect(98px, 300px, 63px, 0); }
	5% { clip: rect(60px, 300px, 83px, 0); }
	10% { clip: rect(98px, 300px, 46px, 0); }
	15% { clip: rect(88px, 300px, 41px, 0); }
	20% { clip: rect(44px, 300px, 90px, 0); }
	25% { clip: rect(49px, 300px, 76px, 0); }
	30% { clip: rect(42px, 300px, 80px, 0); }
	35% { clip: rect(54px, 300px, 2px, 0); }
	40% { clip: rect(88px, 300px, 69px, 0); }
	45% { clip: rect(77px, 300px, 46px, 0); }
	50% { clip: rect(87px, 300px, 87px, 0); }
	55% { clip: rect(35px, 300px, 42px, 0); }
	60% { clip: rect(22px, 300px, 11px, 0); }
	65% { clip: rect(71px, 300px, 33px, 0); }
	70% { clip: rect(4px, 300px, 12px, 0); }
	75% { clip: rect(51px, 300px, 62px, 0); }
	80% { clip: rect(87px, 300px, 22px, 0); }
	85% { clip: rect(93px, 300px, 66px, 0); }
	90% { clip: rect(36px, 300px, 88px, 0); }
	95% { clip: rect(61px, 300px, 74px, 0); }
	100% { clip: rect(100px, 300px, 29px, 0); }
}

input[type=button] { padding: 3px; margin: 0.5em 0 1em 2em; }

td.emuicon
{
	width: 122px;
	vertical-align: middle;
}
td.emuicon img
{
	padding: 5px 4px;
	border: 1px #ddd solid;
	border-radius: 12px;
	background-color: transparent;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
td.emuicon img:hover { background-color: #eee; border-color: #e8e8e8; }
td.emuicon img:active { border-color: #ccc; }

td.emutext
{
	vertical-align: top;
	padding-top: 6px;
}

img.atariawards
{
	height: 40px;
	width: 55px;
	float: right;
	margin: 0.75em 0 0.5em 0.5em;
}

@media screen and (max-width: 600px) {
	#illustration {
		display: block;
		float: none;
		margin: 1em 0;
		max-width: 100%;
	}
	.tv-effect:after,
	.tv-effect:before { max-width: 100%; }
}

@media screen and (max-width: 550px) {
	table.emu, table.emu tbody, table.emu tr, table.emu td { display: block; }
	img.atariawards { margin-top: 1.25em; }
}