@font-face {
    font-family: 'perfect_dos';
    src: url('../fonts/perfect_dos_vga_437-webfont.eot');
    src: url('../fonts/perfect_dos_vga_437-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/perfect_dos_vga_437-webfont.woff') format('woff'),
         url('../fonts/perfect_dos_vga_437-webfont.ttf') format('truetype'),
         url('../fonts/perfect_dos_vga_437-webfont.svg#perfect_dos_vga_437regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'perfect_dos', Monospace;
	background: #111;
	color: #fff;
	padding: 10px 20px;
}

a {
	color: #bbb;
}

a:hover {
	color: yellow;
}

h2 a {
	color: white;
	text-decoration: none;
}

.hide {
	visibility: hidden;
}

.wrapper {
	width: 960px;
	margin: auto;
}

select {
	background: black;
	color: white;
	font-family: 'perfect_dos', Monospace;
	font-size: 16px;
	padding: 7px 10px 5px 10px;
	text-transform: uppercase;
	margin-bottom: 20px;
	border: 2px solid #333;
	height: 32px;
	vertical-align: bottom;
}

.input {
	width: 930px;
	height: 40px;
	margin-bottom: 20px;
	padding: 15px;
	background: #333;
	border: none;
	color: yellow;
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

button {
	background: #111;
	font-family: 'perfect_dos', Monospace;
	font-size: 16px;
	color: white;
	padding: 7px 10px 5px 10px;
	text-transform: uppercase;
	margin-bottom: 20px;
	border: 2px solid #333;
	display: inline-block;
}

button:focus {
	outline: none;
}

button:hover {
	border: 2px solid white;
	cursor: pointer;
}

button.active {
	color: yellow;
}

button.toggled {
	color: #0f0;
	border: 2px solid #0f0;
}

.admin-console {
	color: #0f0;
}

.panel {
	display: none;
}

.panel.active {
	display: block;
}

.instructions-content {
	background: #bbb;
	color: #444;
	padding: 1px 10px;
	font-family: monospace;
	margin-bottom: 20px;
	display: none;
}

.instructions-content.active {
	display: block;
}

.user-encode,
.user-import {
	height: 210px;
}

.user-share,
.ticket-id {
	width: 450px;
	max-width: 450px;
	height: 18px;
	max-height: 18px;
	font-size: 18px;
	color: yellow;
	margin-bottom: 30px;
	padding: 10px;
	background: #333;
	display: inline-block;
	overflow: hidden;
}

.palette {
	width: 960px;
	padding: 4px 1px;
	margin-bottom: 15px;
}

.palette:after {
	content: "";
	display: table;
	clear: both;
}

.palette .tile-group {
	width: 30px;
	height: 30px;
	position: relative;
	float: left;
	margin: 0 6px 6px 0;
	overflow: visible;
}

.palette .tile-group.selected {
	outline: 2px solid white;
}

.palette .sub-group {
	position: absolute;
	top: 30px;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 20;
	display: none;
}

.palette .tile-group:hover .sub-group {
	display: block;
}

.palette .tile {
	position: relative;
}

.palette .tile0 { background: #999 url(../images/floor.png) repeat; }

.price,
.priceDiff {
	display: inline-block;
	margin-left: 20px;
}

.price:before {
	content: "Value: $";
}

.priceDiff:before {
	content: "$";
}

.priceDiff {
	display: none;
	color: #0f0;
}

.priceDiff.toggled {
	display: inline-block;
}

.console {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 14px;
	padding: 5px 0;
	font-size: 14px;
	text-align: center;
	background: black;
	border-top: 2px solid #333;
	z-index: 30;
}

.console .error {
	color: red;
	text-transform: uppercase;
}

.house {
	width: 960px;
	height: 960px;
	background: #999 url(../images/floor.png) repeat;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	margin-bottom: 100px;
}

.house.zoom {
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

.house.eyedropper .tile:hover {
	cursor: crosshair;
}

.tile {
	width: 30px;
	height: 30px;
	position: absolute;
	background: transparent url(../images/tiles-30x30.png);
	font-size: 10px;
	font-family: Monospace;
	z-index: 10;
}

.tile.diff:after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,255,0,0.2);
}

.tile[dataCode="0"]:after {
	display: none;
}

.mobile:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background: transparent url(../images/tiles-30x30.png);
}

.house.grid .tile {
	box-shadow: inset 0 0 1px rgba(255,255,255,0.8);
}

.house.view-grid:after {
	box-sizing: border-box;
	pointer-events: none;
	content: "";
	color: red;
	width: 540px;
	height: 390px;
	position: absolute;
	top: 300px;
	left: 0;
	border: 2px solid red;
	z-index: 100;
}

.house.view-grid:before {
	box-sizing: border-box;
	pointer-events: none;
	content: "";
	color: red;
	width: 390px;
	height: 690px;
	position: absolute;
	top: 150px;
	left: 0;
	border: 2px solid orange;
	z-index: 100;
}

.tile:hover {
	outline: 1px solid white;
	opacity: 0.5;
	cursor: pointer;
}

.tile.selected {
	outline: 2px solid white;
}

.tile998:hover {
	cursor: auto;
	opacity: 1;
	outline: none;
}

/* Outer wall */
.tile998 { background: #333;}

/* Wooden wall */
.tile1 { background-position: -30px 0; }
.tile1-2 { background-position: -30px -30px }
.tile1-3 { background-position: -30px -60px }
.tile1-4 { background-position: -30px -90px }

/* Steel wall */
.tile2 { background-position: -60px 0; }
.tile2-3 { background-position: -60px -60px; }

/* Concrete wall */
.tile3 { background-position: -90px 0; }
.tile3-4 { background-position: -90px -90px; }

/* Door */
.tile21 { background-position: -120px 0; }
.tile21-2 { background-position: -120px 0; }

/* Window */
.tile20 { background-position: -150px 0; }
.tile20-2 { background-position: -150px -30px; }
.tile20-3 { background-position: -150px -60px; }

/* Pit */
.tile111 { background-position: -180px 0; }
.tile111-3 { background-position: -180px -30px; }

/* Power */
.tile103 { background-position: -210px 0; }
.tile103-2 { background-position: -210px -30px; }

/* Wire */
.tile102 { background-position: -240px 0; }
.tile102-2 { background-position: -240px -120px; }
.tile102-5 { background-position: -240px -30px; }

/* Wire Vertical */
.tile120 { background-position: -270px 0; }
.tile120-2 { background-position: -270px -120px; }
.tile120-5 { background-position: -270px -30px; }

/* Wire Horizontal */
.tile121 { background-position: -300px 0; }
.tile121-2 { background-position: -300px -120px; }
.tile121-5 { background-position: -300px -30px; }

/* Wired wall */
.tile51 { background-position: -330px 0; }
.tile51-2 { background-position: -330px -120px; }
.tile51-3 { background-position: -330px -30px; }
.tile51-4 { background-position: -330px -60px; }
.tile51-5 { background-position: -330px -90px; }

/* Switch, OFF */
.tile101,
.tile101-2 { background-position: -360px 0; }

/* Switch, ON */
.tile108,
.tile108-2 { background-position: -390px 0 }

/* Switch, sticky */
.tile100 { background-position: -420px 0; }
.tile100-2 { background-position: -420px -30px; }

/* Switch, rotary */
.tile107 { background-position: -450px 0; }
.tile107-2 { background-position: -450px -30px; }

/* Indicator light */
.tile109 { background-position: -480px 0; }
.tile109-2 { background-position: -480px -30px; }

/* Indicator light (Non-Conducting) */
.tile113 { background-position: -480px -60px; }
.tile113-2 { background-position: -480px -90px; }

/* Wire bridge */
.tile106 { background-position: -510px 0; }
.tile106-2 { background-position: -510px -30px; }

/* Relay */
.tile104 { background-position: -540px 0; }
.tile104-2 { background-position: -540px -30px; }
.tile104-3 { background-position: -540px -60px; }

/* Relay, inverted */
.tile105 { background-position: -570px 0; }
.tile105-2 { background-position: -570px -30px; }
.tile105-3 { background-position: -570px -60px; }

/* Door, powered */
.tile30 { background-position: -600px 0; }
.tile30-2 { background-position: -600px 0; }
.tile30-4 { background-position: -600px -30px; }
.tile30-5 { background-position: -600px -60px; }

/* Electric floor */
.tile110 { background-position: -660px 0; }
.tile110-2 { background-position: -660px -30px; }
.tile110-3 { background-position: -660px -60px; }
.tile110-4 { background-position: -660px -90px; }

/* Pit, powered */    
.tile112 { background-position: -690px 0; }
.tile112-2 { background-position: -690px -30px; }
.tile112-3 { background-position: -690px -60px; }

/* Pit bull */
.tile70,
.tile70-11 { background-position: -720px 0; }

.tile111_70-2 { background-position: -720px -30px; }
.tile111_70-20 { background-position: -720px -30px; }
.tile111_70-23 { background-position: -720px -30px; }
.tile111_70-24 { background-position: -720px -30px; }

.tile112_70-2 { background-position: -720px -210px; }
.tile112_70-20 { background-position: -720px -210px; }
.tile112_70-23 { background-position: -720px -210px; }
.tile112_70-24 { background-position: -720px -210px; }

.tile112-2_70-2 { background-position: -720px -210px; }
.tile112-2_70-20 { background-position: -720px -210px; }
.tile112-2_70-23 { background-position: -720px -210px; }
.tile112-2_70-24 { background-position: -720px -210px; }

.tile110-2_70-3 { background-position: -720px -60px; }
.tile110_70-3 { background-position: -720px -90px; }
.tile70-5 { background-position: -720px -120px; }
.tile70-7 { background-position: -720px -150px; }
.tile70-6 { background-position: -720px -180px; }

/*Chihuahua */
.tile71 { background-position: -750px 0; }

.tile111_71-2 { background-position: -750px -30px; }
.tile111_71-20 { background-position: -750px -30px; }
.tile111_71-23 { background-position: -750px -30px; }
.tile111_71-24 { background-position: -750px -30px; }

.tile112_71-2 { background-position: -750px -210px; }
.tile112_71-20 { background-position: -750px -210px; }
.tile112_71-23 { background-position: -750px -210px; }
.tile112_71-24 { background-position: -750px -210px; }

.tile112-2_71-2 { background-position: -750px -210px; }
.tile112-2_71-20 { background-position: -750px -210px; }
.tile112-2_71-23 { background-position: -750px -210px; }
.tile112-2_71-24 { background-position: -750px -210px; }

.tile110-2_71-3 { background-position: -750px -60px; }
.tile110_71-3 { background-position: -750px -90px; }

.tile71-5 { background-position: -750px -120px; }
.tile71-7 { background-position: -750px -150px; }
.tile71-6 { background-position: -750px -180px; }

/* Cat */
.tile72 { background-position: -780px 0; }

.tile111_72-2 { background-position: -780px -30px; }
.tile111_72-20 { background-position: -780px -30px; }
.tile111_72-23 { background-position: -780px -30px; }
.tile111_72-24 { background-position: -780px -30px; }

.tile112_72-2 { background-position: -780px -210px; }
.tile112_72-20 { background-position: -780px -210px; }
.tile112_72-23 { background-position: -780px -210px; }
.tile112_72-24 { background-position: -780px -210px; }

.tile112-2_72-2 { background-position: -780px -210px; }
.tile112-2_72-20 { background-position: -780px -210px; }
.tile112-2_72-23 { background-position: -780px -210px; }
.tile112-2_72-24 { background-position: -780px -210px; }

.tile110-2_72-3 { background-position: -780px -60px; }
.tile110_72-3 { background-position: -780px -90px; }
.tile72-5 { background-position: -780px -120px; }
.tile72-7 { background-position: -780px -180px; }

/* Wife */
.tile1010 { background-position: -810px 0; }
.tile1011 { background-position: -840px 0; }
.tile1012 { background-position: -870px 0; }
.tile1013 { background-position: -900px 0; }

/* Wife shot */
.tile1010-5 { background-position: -810px -30px; }
.tile1011-5 { background-position: -840px -30px; }
.tile1012-5 { background-position: -870px -30px; }
.tile1013-5 { background-position: -900px -30px; }

/* Wife Clubbed */
.tile1010-7 { background-position: -810px -60px; }
.tile1011-7 { background-position: -840px -60px; }
.tile1012-7 { background-position: -870px -60px; }
.tile1013-7 { background-position: -900px -60px; }

/* Son */
.tile1020 { background-position: -930px 0; }
.tile1021 { background-position: -960px 0; }
.tile1022 { background-position: -990px 0; }
.tile1023 { background-position: -1020px 0; }

/* Son Shot */
.tile1020-5 { background-position: -930px -30px }
.tile1021-5 { background-position: -960px -30px }
.tile1022-5 { background-position: -990px -30px }
.tile1023-5 { background-position: -1020px -30px }

/* Son Clubbed */
.tile1020-7 { background-position: -930px -60px }
.tile1021-7 { background-position: -960px -60px }
.tile1022-7 { background-position: -990px -60px }
.tile1023-7 { background-position: -1020px -60px }

/* Daughter */
.tile1040 { background-position: -1050px 0; }
.tile1041 { background-position: -1080px 0; }
.tile1042 { background-position: -1110px 0; }
.tile1043 { background-position: -1140px 0; }

/* Daughter - Shot */
.tile1040-5 { background-position: -1050px -30px }
.tile1041-5 { background-position: -1080px -30px }
.tile1042-5 { background-position: -1110px -30px }
.tile1043-5 { background-position: -1140px -30px }

/* Daughter - clubbed */
.tile1040-7 { background-position: -1050px -60px }
.tile1041-7 { background-position: -1080px -60px }
.tile1042-7 { background-position: -1110px -60px }
.tile1043-7 { background-position: -1140px -60px }

/* Vault */
.tile999 { background-position: -1170px 0; }
.tile999-2 { background-position: -1170px -180px; }

/* Robber */
.tilerobber { background-position: -1200px 0; }
.tilerobber-2 { background-position: -1200px -30px; }
.tilerobber-20 { background-position: -1200px -150px; }
.tilerobber-3 { background-position: -1200px -60px; }
.tilerobber-4 { background-position: -1200px -90px; }
.tilerobber-40 { background-position: -1200px -120px; }
.tilerobber-99 { background-position: -1200px -180px; }

/* Panic button */
.tile131 { background-position: -1230px 0; }
.tile131-2 { background-position: -1230px -30px; }

/* Shotgun */
.tile130 { background-position: -1260px 0; }

.fill-preview {
	position: absolute;
	border: 1px dashed white;
	width: 30px;
	height: 30px;
	z-index: 0;
	background: rgba(255,255,255,0.3);
	overflow: hidden;
	opacity: 0.8;
}

.pointer-events .fill-preview {
	z-index: 30;
	pointer-events: none;
}

.fill-preview .tile {
	position: static;
	float: left;
}

/* Canvas stuff */
.sprites {
	width: 0;
	height: 0;
	opacity: 0.1;
}

.canvas {
	position: absolute;
	left: 200vw;
	top: -200vh;
	width: 480px;
	height: 480px;
	border: 1px solid blue;
}

.houses {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.houses .house-preview {
	width: calc(25% - 15px);
	text-decoration: none;
	margin-bottom: 30px;
	overflow: hidden;
}

.houses .house-preview:hover img,
.houses .house-preview:hover .placeholder {
	opacity: 1;
}

.houses .house-preview img {
	max-width: 100%;
	opacity: 0.9;
}

.houses .house-preview .placeholder {
	position: relative;
	width: 100%;
	padding-top: calc(100% - 14px);
	background: #333;
	border: 7px solid black;
	box-sizing: border-box;
	opacity: 0.9;
}

.house-preview .placeholder .house-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 8px;
	word-break: break-all;
}

.houses .house-preview .title {
	color: white;
}

.houses .house-preview .ip,
.houses .house-preview .date {
	font-family: monospace;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: no-wrap;
}