* { font: 12px "Tahoma", "Bitstream Vera Sans"; margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; cursor: default; }
html { height: 100%; }
body { background: #125; color: #fff; user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; }

#header {
	position: relative; z-index: 2; height: 32px; line-height: 32px; padding: 0 16px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.35); border-bottom: 1px solid #333;
	
	background: #979797;
	background: -moz-linear-gradient(top, #979797 0%, #5b5b5b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#979797), color-stop(100%,#5b5b5b));
	background: -webkit-linear-gradient(top, #979797 0%,#5b5b5b 100%);
	background: -o-linear-gradient(top, #979797 0%,#5b5b5b 100%);
	background: -ms-linear-gradient(top, #979797 0%,#5b5b5b 100%);
	background: linear-gradient(to bottom, #979797 0%,#5b5b5b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#5b5b5b',GradientType=0 );
}

#header > div { height: 32px; line-height: 32px; }

#contents { position: absolute; top: 57px; right: 0; left: 0; bottom: 0; overflow: hidden; }
.tab_contents { position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; }

.scrollarea { position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; }
.scrollarea > div { position: absolute; top: 0; left: 0; overflow: visible; }

#map_light { position: absolute; top: 0; left: 0; width: 4096px; height: 4096px; background: url("http://static.frigolit.net/img/gamemaps/zelda-alttp-light-world.png"); }
.map_grid { position: absolute; top: 0; left: 0; width: 4096px; height: 4096px; background: url("/tmp/grid-16x16.png"); opacity: 1.0; }
.map_grid16 { position: absolute; top: 0; left: 0; width: 4096px; height: 4096px; background: url("/dynamic/projects/zelda-alttp-minecraft/16x-grid.png"); }
.statusbar { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: #fff; line-height: 20px; text-indent: 4px; color: #000; }

#map_dark { position: absolute; top: 0; left: 0; width: 4096px; height: 4096px; background: url("http://static.frigolit.net/img/gamemaps/zelda-alttp-dark-world.png"); }

.tablist {
	position: relative; z-index: 1; height: 25px; padding: 0 2px 0 0; border-bottom: 1px solid #333; text-shadow: 0 1px 0 #fff;
	
	background: #e8e8e8;
	background: -moz-linear-gradient(top, #e8e8e8 0%, #cecece 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#cecece));
	background: -webkit-linear-gradient(top, #e8e8e8 0%,#cecece 100%);
	background: -o-linear-gradient(top, #e8e8e8 0%,#cecece 100%);
	background: -ms-linear-gradient(top, #e8e8e8 0%,#cecece 100%);
	background: linear-gradient(to bottom, #e8e8e8 0%,#cecece 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#cecece',GradientType=0 );
}

.tablist > div { display: inline-block; vertical-align: top; height: 24px; line-height: 24px; padding: 0 8px; color: #000; }
.tablist > div:hover {
	background: #f4f4f4;
	background: -moz-linear-gradient(top, #f4f4f4 0%, #e7e7e7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e7e7e7));
	background: -webkit-linear-gradient(top, #f4f4f4 0%,#e7e7e7 100%);
	background: -o-linear-gradient(top, #f4f4f4 0%,#e7e7e7 100%);
	background: -ms-linear-gradient(top, #f4f4f4 0%,#e7e7e7 100%);
	background: linear-gradient(to bottom, #f4f4f4 0%,#e7e7e7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e7e7e7',GradientType=0 );
}

.tablist > div.selected {
	color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25);
	
	background: #4673a3;
	background: -moz-linear-gradient(top, #4673a3 0%, #4f85bb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4673a3), color-stop(100%,#4f85bb));
	background: -webkit-linear-gradient(top, #4673a3 0%,#4f85bb 100%);
	background: -o-linear-gradient(top, #4673a3 0%,#4f85bb 100%);
	background: -ms-linear-gradient(top, #4673a3 0%,#4f85bb 100%);
	background: linear-gradient(to bottom, #4673a3 0%,#4f85bb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4673a3', endColorstr='#4f85bb',GradientType=0 );
}

#tab_map_live { background: #fff; color: #333; overflow: hidden; }
#tab_map_live iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }

.map_layer_selector { position: absolute; top: 8px; right: 8px; opacity: 0.5; padding: 2px; background: #fff; border: 1px solid #000; color: #000; user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; transition: opacity 0.25s; }
.map_layer_selector:hover { opacity: 1.0; }

.map_layer_selector > div { font-size: 10px; padding: 2px; }

.map_layer_selector > div.checked {
	color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
	
	background: #7abcff;
	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
	background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
}

.map_layer_selector > div:hover:not(.checked) {
	background: #c3e1ff;
	background: -moz-linear-gradient(top, #c3e1ff 0%, #b8dafc 44%, #a9d0f7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e1ff), color-stop(44%,#b8dafc), color-stop(100%,#a9d0f7));
	background: -webkit-linear-gradient(top, #c3e1ff 0%,#b8dafc 44%,#a9d0f7 100%);
	background: -o-linear-gradient(top, #c3e1ff 0%,#b8dafc 44%,#a9d0f7 100%);
	background: -ms-linear-gradient(top, #c3e1ff 0%,#b8dafc 44%,#a9d0f7 100%);
	background: linear-gradient(to bottom, #c3e1ff 0%,#b8dafc 44%,#a9d0f7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e1ff', endColorstr='#a9d0f7',GradientType=0 );
}