body {
	background-color: black;
	color: white;
	/*position: relative;*/
	margin: 5px;
}

table#nodes {
	border-collapse: collapse;
	overflow: hidden;
}

table#nodes td {
	background-color: #111111;
	border: 1px solid gray;
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;

	opacity: 0.7;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
}

table#nodes td:hover { opacity: 1.0; }

table#nodes td.start { background-color: green; }
table#nodes td.end   { background-color: red;   }
table#nodes td.wall  { background-color: blue;  }

table#nodes td.open { box-shadow: 0px 0px 3px 1px #3EFF17 inset; }
table#nodes td.closed { box-shadow: 0px 0px 3px 1px #1783FF inset; }

table#nodes td small {
	display: block;
	position: relative;
	font-size: 10px;
	top: 0px;
	left: 0px;
}
table#nodes td small.f { top: -2px; }
table#nodes td small.g { top: 23px; }
table#nodes td small.h { top: 10px; left: 32px; }

/* arrow */
table#nodes td div {
	background: url('sprite.png') 0px 0px;

	width: 10px;
	height: 10px;

	position: relative;
	top: -25px;
	left: 20px;
}
table#nodes td div.arrow_0_-1  { }
table#nodes td div.arrow_1_-1  { transform: rotate(45deg);  -ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg);  }
table#nodes td div.arrow_1_0   { transform: rotate(90deg);  -ms-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  }
table#nodes td div.arrow_1_1   { transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); }
table#nodes td div.arrow_0_1   { transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); }
table#nodes td div.arrow_-1_1  { transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); }
table#nodes td div.arrow_-1_0  { transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); }
table#nodes td div.arrow_-1_-1 { transform: rotate(315deg); -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); }

table#nodes td div.pathmark {
	background: url('sprite.png') 0px -10px;
}

form {
	/* fallback */
	background-color: #5E5E5E;

	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7E7E7E), to(#5E5E5E));
	background: -webkit-linear-gradient(top, #7E7E7E, #5E5E5E);
	background: -moz-linear-gradient(top, #7E7E7E, #5E5E5E);
	background: -ms-linear-gradient(top, #7E7E7E, #5E5E5E);
	background: -o-linear-gradient(top, #7E7E7E, #5E5E5E);

	box-shadow: 0px 0px 3px 0px #2E2E2E inset;

	padding: 5px 10px;

	position: fixed;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

button, input {
	box-shadow: 0px 0px 3px 0px #3E3E3E;
}

input {
	text-align: right;
}

span#msg {
	position: absolute;
	top: -1.5em;

	transition: all 1s 0.5s;
	-moz-transition: all 1s 0.5s;
	-o-transition: all 1s 0.5s;
	-webkit-transition: all 1s 0.5s;
}

span#msg.hide {
	opacity: 0.0;
	z-index: -1;
	
	transform: translateY(1.5em);
	-moz-transform: translateY(1.5em);
	-o-transform: translateY(1.5em);
	-webkit-transform: translateY(1.5em);
}

span#mapSettings {
	float: right;
}