body {
	background: #000;
	font-family: "Segoe UI";
	padding: 0;
	margin: 0;
	cursor: pointer;
	overflow: hidden;
}

#page {	
	width: 1920px;
	height: 1080px;
	background: url('HomeUI.png');
	position: relative;
	cursor: auto;
	transform-origin: left top;
	-webkit-transform-origin: left top;
}


/* predator view */
#predator_view {
	position: absolute;
	left:100px;
	top: 40px;
	width:120px;
	height: 100px;
	background: url('pv_bg.png');
	overflow: hidden;
}

#predator_view svg path {
	fill:#1b2c31;
}
#predator_view svg path.tracked {
	stroke:#333;
	fill:#256753;
}
#predator_view svg path.inControl {
	fill:#107c10;
}


/* user switcher*/
#user_switcher {
	position: absolute;
	left:248px;
	top:40px;
	width:500px;
	height:100px;
}

.tile {
	width: 100px;
	height:100px;
	top:0;
	position: absolute;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	background: #222;
	overflow: hidden;
}
.tile img {
	width: 100%;
	height: 100%;
}

.tile[data-index="0"] {	left:0;}
.tile[data-index="1"] {	left:100px;}
.tile[data-index="2"] {	left:200px;}
.tile[data-index="3"] {	left:300px;}
.tile[data-index="4"] {	left:400px;}

.tile.hidden {
	width:0px;
}
.tile.dim *, .tile.c_cover * {
	opacity:0.3;
}
.tile.c_cover {	
	z-index: 1;
}
.tile.flashToDim * {
	animation: flash_to_dim 2s;
	-webkit-animation: flash_to_dim 2s; /* Safari and Chrome */
	opacity: 0.3;
}
.tile.lit * {
	animation: none;
	-webkit-animation: none;
	opacity: 1 !important;
}
.tile.ownHome:after {
	content:" ";
	position: absolute;
	left:0;
	bottom:0;
	width:100px;
	height: 8px;
	background: green;
}
.tile[data]:before {
	content:attr(data);
	position: absolute;
	left:0;
	top:24px;
	width:100px;
	text-align: center;
	font-size:36px;
	color:#fff;
}

@keyframes flash_to_dim
{
	0% {opacity: 1;}
	50% {opacity: 1;}
	100% {opacity: 0.3;}
}

@-webkit-keyframes flash_to_dim /* Safari and Chrome */
{
	0% {opacity: 1; }
	50% {opacity: 1; }
	100% {opacity: 0.3; }
}

/* drag and drop controls*/

#tools {
	background: url('bg.png');
	position: absolute;
	height:300px;
	padding: 0 0 80px;
	bottom: 0;
	width: 100%;
	box-shadow: 0 -4px 8px #0a0a0a;	
	transition: bottom 0.3s;
	-webkit-transition: bottom 0.3s;
}

#close_button {
	height: 50px;
}
#close_button div {
	position: relative;
	top: -50px;
	height: 100px;
	background: transparent;
}

#control {
	margin: auto;
	padding: 40px 0;
	background: transparent;
}

#dashboard {
	width: 600px;
	height: 80px;
	margin: auto;
	border: ridge 2px #888;
	border-top: none;
	border-bottom: none;
	position: relative;
}

.block {	
	width: 50px;
	height: 50px;
	padding:8px;
	position: absolute;
	background: transparent;
	top: 0;
	opacity: 0.3;
	border: solid 2px transparent;
}
.block.inControl {
	border-color: #fff;
}
.block.ownHome {
	background: green;
}
.block.active {
	opacity: 1;
}
.block.dragging {
	z-index: 1;
}
.block img {
	width: 50px;
	height: 50px;
	pointer-events: none;
}
.block .menu {
	position: absolute;
	top:-161px;
	padding-bottom: 6px;
	left: -16px;
	display: none;
	background: transparent;
}
.block .menu .menu_item {
	color: #888;
	padding:16px;
	width: 100px;
	font-size:14px;
	border-left: solid 8px transparent;
}
.block .menu .menu_item.hover {
	border-left-color: red;
}
.block.active.dragging .menu {
	display: block;
}

/* option buttons */
#options {
	text-align: center;
}

#options > div {
	position: relative;
	display: inline-block;
	padding: 16px;
	margin: 4px;
	text-align: center;
	width:120px;
	font-size: 14px;
	background: transparent;
	color:#aaa;
}
#options > div.current {
	background: #107c10;
	color:#ebebeb;
}
#options > div > p {
	width: 120px;
	font-size: 12px;
	text-align: center;
	color:#666;
	position: absolute;
	top: 52px;
}