Changed gui by lechd + map per world client-configuration.

configuration.txt

@@ -42,23 +42,34 @@ web:
     clock: timeofday
     #clock: digital
     
-    # The name of the map shown when opening Dynmap's page (must be in menu).
-    defaultmap: defaultmap
-    
-    # The maps shown in the menu.
-    shownmaps:
-      - type: KzedMapType
-        name: defaultmap
-        prefix: t
-      - type: KzedMapType
-        name: cavemap
-        prefix: ct
-    
-    # The name of the world shown when opening Dynmap's page.
     defaultworld: world
-    
-    # The worlds shown in the menu.
-    shownworlds:
-      - world
-      - nether
-      - world_bad
+    worlds:
+      - title: World
+        name: world
+        maps:
+          - type: KzedMapType
+            title: Surface
+            name: surface
+            prefix: t
+          - type: KzedMapType
+            title: Cave
+            name: cave
+            prefix: ct
+      - title: Corrupted World
+        name: world_bad
+        maps:
+          - type: KzedMapType
+            title: Surface
+            name: surface
+            prefix: t
+          - type: KzedMapType
+            title: Cave
+            name: cave
+            prefix: ct
+      - title: Nether
+        name: nether
+        maps:
+          - type: KzedMapType
+            title: Surface
+            name: nether
+            prefix: t

web/clock_style.css

@@ -0,0 +1,16 @@
+.clock {
+	padding-left: 16px;
+	color: #dede90;
+	background-repeat: no-repeat;
+}
+.clock.night { background-image: url(clock_night.png); }
+.clock.day { background-image: url(clock_day.png); }
+
+.timeofday { background-repeat: no-repeat; }
+.timeofday.sun { background-image: url(sun.png); }
+.timeofday.moon { background-image: url(moon.png); }
+
+.compass {
+	background-repeat: no-repeat;
+	background-image: url(compass.png);
+}

web/dynmap_style.css

@@ -0,0 +1,305 @@
+/*******************
+ * Page setup
+ */
+
+html { 
+	height: 100%
+}
+
+body {
+	height: 100%;
+
+	font-family: sans-serif;
+	font-size: 11px;
+
+	color: #fff;
+	background: #000;
+
+	margin: 0px;
+	padding: 0px ; 
+}
+
+.dynmap .map .tile img {
+	image-rendering: -moz-crisp-edges;
+	-ms-interpolation-mode: nearest-neighbor;
+}
+
+
+/*******************
+ * fieldset and legend styles
+ */
+
+.dynmap fieldset {
+	border: none;
+	border-top: 1px solid rgba(196,196,196,0.4);
+}
+
+.dynmap legend {
+	padding: 8px 4px;
+	font-weight: bold;
+}
+
+
+/*******************
+ * Map Setup
+ */
+
+#mcmap {
+	width: 100%;
+	height: 100%
+}
+
+.dynmap {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+}
+
+.dynmap > .map {
+	width: 100%;
+	height: 100%;
+	background-color: #000;
+}
+
+/* Map Controls */
+.gmnoprint{
+	margin-top:-75px;
+	margin-left:-20px
+}
+
+/* Google branding */
+
+.dynmap > div.map > DIV > DIV:first-child + DIV, 
+.dynmap > div.map > DIV > DIV:first-child + DIV + DIV { 
+	visibility: hidden !important; 
+}
+
+
+/*******************
+ * Alerts
+ */
+
+.alertbox {
+	position: fixed;
+	width: 50%;
+
+	top: 0;
+	left: 0;
+	right: 0;
+
+	text-align: center;
+	color: #a00;
+	background-color: #fff;
+
+	margin: auto;
+	padding: 5px;
+
+	border: 1px solid #a00;
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
+	border-radius: 0 0 3px 3px;
+}
+
+
+/*******************
+ * shared rules
+ */
+
+.dynmap .panel ul, .dynmap .panel li {
+	list-style: none;
+
+	padding: 0;
+	margin: 0;
+}
+
+.maplist li a,
+.playerlist li a {
+	outline: none;
+	text-decoration: none;
+}
+
+/*******************
+ * sidebar panels
+ */
+
+.dynmap .sidebar {
+
+	display: block;
+	position: absolute;
+
+	top: 0px;
+	right: 0px;
+
+	width: 250px;
+	height: 100%;
+
+	background: rgb(0,0,0); /* FU IE */
+	background: rgba(0,0,0,0.6);
+	color: #fff;
+
+	border-left: 1px solid rgba(0,0,0,0.5);
+
+	margin-right: -253px;
+	/*margin-right: 251px;*/
+
+	-moz-transition: all 0.6s ease-in-out;
+	-webkit-transition: all 0.6s ease-in-out;
+	-o-transition: all 0.6s ease-in-out;
+	transition: all 0.6s ease-in-out;
+}
+
+.dynmap .hitbar {
+
+	display: block;
+	position: fixed;
+
+	right: 0px;
+	top: 0px;
+
+	height: 100%;
+	width: 16px;
+
+	text-align: center;
+
+	background: url(sidebar_hint.png) rgb(0,0,0);
+	background: url(sidebar_hint.png) rgba(0,0,0,0.6);
+	background-repeat: no-repeat;
+	background-position:center;
+
+	border: 1px solid rgba(0,0,0,0.5);
+
+	-moz-transition: all 0.6s ease-in-out;
+	-webkit-transition: all 0.6s ease-in-out;
+	-o-transition: all 0.6s ease-in-out;
+	transition: all 0.6s ease-in-out;
+}
+
+/* magic and metrics */
+
+.dynmap .sidebar:hover,
+.dynmap .sidebar.pinned {
+	margin-right: 0px;
+}
+
+.dynmap .sidebar < .hitbar:hover {
+	margin-right: 0px;	
+}
+
+.dynmap .sidebar:hover .hitbar,
+.dynmap .sidebar.pinned .hitbar {
+	right: -120px;
+}
+
+
+/*******************
+ * map list-specific styling
+ */
+
+.dynmap .panel .world {
+	display: block;
+	clear: both;
+
+	width: 100%;
+	line-height: 18px;
+	margin: 0 0 30px 0;
+
+	border-bottom: 1px solid rgba(128,128,128,0.3);
+
+}
+
+.dynmap .maplist .map {
+	display: block;
+	float: left;
+
+	height: 18px;
+	width: 18px;
+
+	padding: 2px;
+	margin: 5px 2px;
+	
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	
+	background: rgba(32,32,32,0.6);
+	border: 1px solid rgba(64,64,64,0.6);
+}
+
+.dynmap .maplist .map:hover {
+	background: rgba(64,64,64,0.6);
+	border: 1px solid rgba(128,128,128,0.6);
+}
+
+.dynmap .maplist .map.selected {
+	background: rgba(128,128,128,0.5);
+	border: 1px solid rgba(255,255,255,0.5);
+}
+
+.dynmap .maplist .map > a {
+	display: block;
+
+	text-indent: -99999px;
+	outline: none;
+}
+
+.dynmap .maplist .map > a {
+	background-repeat: no-repeat;
+	background-position:center;
+}
+
+/*******************
+ * player list-specific styles
+ */
+
+.dynmap .playerlist .player {
+
+	display: inline-block;
+	float: left;
+	width: 100%;
+
+	padding: 4px 0;
+	border: 3px solid transparent;
+}
+
+.dynmap .playerlist .player:hover {
+	background: rgba(64,64,64,0.6);
+}
+
+.dynmap .playerlist .player a {
+	color: #fff;
+}
+
+/* may need to tweak this for canvas */
+
+.dynmap .playerlist .playerIcon > * {
+	vertical-align: middle;
+	border: none;
+}
+
+.dynmap .playerlist .playerIcon {
+	width: 16px;
+	height: 16px;
+	margin: 0px 7px;
+	display: block;
+	float: left;
+}
+
+.dynmap .playerlist .player.following {
+	background: rgba(128,128,128,0.5);
+	border: 1px solid rgba(255,255,255,0.5);
+	border-radius: 3px;
+	padding: 6px 2px;
+	-moz-border-radius: 3px;
+}
+
+.dynmap .playerlist .player:hover .playericon {
+	background: url(player_follow_off.png) no-repeat;
+}
+
+.dynmap .playerlist .player.following .playericon {
+	background: url(player_follow_on.gif) no-repeat;
+}
+
+.dynmap .playerlist .player.following .playericon > *,
+.dynmap .playerlist .player:hover .playericon > * {
+	visibility: hidden;
+}

web/index.html

@@ -10,7 +10,8 @@
 	</title> 
 	<link rel="shortcut icon" href="follow_off.png" type="image/png" />
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="dynmap_style.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="clock_style.css" media="screen" />
 	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 	<script type="text/javascript" src="jquery.json.js"></script>
 	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
@@ -23,7 +24,7 @@
 	<script type="text/javascript" src="config.js"></script>
 	<script type="text/javascript">
 	$(document).ready(function() {
-		new DynMap($.extend({
+		window.dynmap = new DynMap($.extend({
 			container: $('#mcmap'),
 		}, config));
 	});

web/kzedmaps.js

@@ -112,6 +112,9 @@ KzedMapType.prototype = $.extend(new DynMapType(), {
 			this.dynmap.unregisterTile(this, tileName);
 		}
 		return tile.get(0);
+	},
+	updateTileSize: function(zoom) {
+		//this.tileSize = new google.maps.Size(config.zoomSize[zoom], config.zoomSize[zoom]);
 	}
 });
 

web/map.js

@@ -1,3 +1,4 @@
+"use strict";
 //if (!console) console = { log: function() {} }; 
 
 var maptypes = {};
@@ -26,7 +27,8 @@ DynMapType.prototype = {
 		var src = this.dynmap.getTileUrl(tileName);
 		tile.attr('src', src);
 		tile.show();
-	}
+	},
+	updateTileSize: function(zoom) {}
 };
 
 function MinecraftCompass(element) { this.element = element; }
@@ -52,6 +54,7 @@ function DynMap(options) {
 	})
 }
 DynMap.prototype = {
+	worlds: {},
 	registeredTiles: new Array(),
 	markers: new Array(),
 	chatPopups: new Array(),
@@ -60,16 +63,29 @@ DynMap.prototype = {
 	configure: function(configuration) {
 		var me = this;
 		$.extend(me.options, configuration);
-		if (!me.options.maps) me.options.maps = {};
-		$.each(me.options.shownmaps, function(index, mapentry) {
-			me.options.maps[mapentry.name] = maptypes[mapentry.type](mapentry);
+		
+		$.each(me.options.worlds, function(index, worldentry) {
+			var world = me.worlds[worldentry.name] = $.extend({}, worldentry, {
+				maps: {}
+			});
+			
+			$.each(worldentry.maps, function(index, mapentry) {
+				var map = $.extend({}, mapentry, {
+					world: world,
+					dynmap: me
+				});
+				map = world.maps[mapentry.name] = maptypes[mapentry.type](map);
+				
+				world.defaultmap = world.defaultmap || map;
+			});
+			me.defaultworld = me.defaultworld || world;
 		});
-		me.world = me.options.defaultworld;
 	},
 	initialize: function() {
 		var me = this;
 		
 		var container = $(me.options.container);
+		container.addClass('dynmap');
 		
 		var mapContainer;
 		(mapContainer = $('<div/>'))
@@ -88,6 +104,10 @@ DynMap.prototype = {
 			streetViewControl: false,
 			backgroundColor: 'none'
 		});
+		
+		map.zoom_changed = function() {
+			me.maptype.updateTileSize(me.map.zoom);
+		};
 
 		google.maps.event.addListener(map, 'dragstart', function(mEvent) {
 			me.followPlayer('');
@@ -100,100 +120,71 @@ DynMap.prototype = {
 			me.updateLink();
 		});*/
 
-		// The sidebar
+		// Sidebar
 		var sidebar = me.sidebar = $('<div/>')
 			.addClass('sidebar')
+			//.addClass('pinned')
 			.appendTo(container);
 		
-		// The world list.
-		var worldlist = me.worldlist = $('<div/>')
-			.addClass('worldlist')
+		var panel = $('<div/>')
+			.addClass('panel')
 			.appendTo(sidebar);
 		
-		$.each(me.options.shownworlds, function(index, name) {
-			var worldButton;
-			$('<div/>')
-				.addClass('worldrow')
-				.append(worldButton = $('<input/>')
-					.addClass('worldbutton')
-					.addClass('world_' + name)
-					.attr({
-						type: 'radio',
-						name: 'world',
-						value: name
-						})
-					.attr('checked', me.options.defaultworld == name ? 'checked' : null)
-					)
-				.append($('<label/>')
-						.attr('for', 'worldbutton_' + name)
-						.text(name)
+		// Worlds
+		var worldlist;
+		$('<fieldset/>')
+			.append($('<legend/>').text('Map Types'))
+			.append(me.worldlist = worldlist = $('<ul/>').addClass('worldlist'))
+			.appendTo(panel);
+		
+		$.each(me.worlds, function(index, world) {
+			var maplist; 
+			world.element = $('<li/>')
+				.addClass('world')
+				.text(world.title)
+				.append(maplist = $('<ul/>')
+						.addClass('maplist')
 						)
-				.click(function() {
-						$('.worldbutton', worldlist).removeAttr('checked');
-						map.setMapTypeId('none');
-						me.world = name;
-						// Another workaround for GMaps not being able to reload tiles.
-						window.setTimeout(function() {
-							map.setMapTypeId(me.options.defaultmap);
-						}, 1);
-						worldButton.attr('checked', 'checked');
-					})
-				.data('world', name)
+				.data('world', world)
 				.appendTo(worldlist);
-		});
-		
-		// The map list.
-		var maplist = me.maplist = $('<div/>')
-			.addClass('maplist')
-			.appendTo(sidebar);
-		
-		$.each(me.options.maps, function(name, mapType){
-			mapType.dynmap = me;
-			map.mapTypes.set(name, mapType);
 			
-			var mapButton;
-			$('<div/>')
-				.addClass('maprow')
-				.append(mapButton = $('<input/>')
-					.addClass('mapbutton')
-					.addClass('maptype_' + name)
-					.attr({
-						type: 'radio',
-						name: 'map',
-						value: name
+			$.each(world.maps, function(index, map) {
+				me.map.mapTypes.set(map.world.name + '.' + map.name, map);
+				
+				map.element = $('<li/>')
+					.addClass('map')
+					.append($('<a/>')
+							.attr({ title: map.title, href: '#' })
+							.addClass('maptype')
+							.css({ backgroundImage: 'url(' + (map.icon || 'block_' + map.name + '.png') + ')' })
+							.text(map.title)
+							)
+					.click(function() {
+						me.selectMap(map);
 					})
-					.attr('checked', me.options.defaultmap == name ? 'checked' : null)
-					)
-				.append($('<label/>')
-						.attr('for', 'maptypebutton_' + name)
-						.text(name)
-						)
-				.click(function() {
-						$('.mapbutton', maplist).removeAttr('checked');
-						map.setMapTypeId(name);
-						mapButton.attr('checked', 'checked');
-					})
-				.data('maptype', mapType)
-				.appendTo(maplist);
+					.data('map', map)
+					.appendTo(maplist);
+			});
 		});
-		map.setMapTypeId(me.options.defaultmap);
-		
+
 		// The Player List
-		var playerlist = me.playerlist = $('<div/>')
-			.addClass('playerlist')
-			.appendTo(sidebar);
+		var playerlist;
+		$('<fieldset/>')
+			.append($('<legend/>').text('Players'))
+			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist'))
+			.appendTo(panel);
 		
 		// The clock
 		var clock = me.clock = clocks[me.options.clock](
 				$('<div/>')
-					.appendTo(sidebar)
+					.appendTo(panel)
 		);
 		
 		// The Compass
 		var compass = me.compass = new MinecraftCompass(
 				$('<div/>')
 					.addClass('compass')
-					.appendTo(sidebar)
+					.appendTo(panel)
 		);
 		compass.initialize();
 		
@@ -206,19 +197,37 @@ DynMap.prototype = {
 			.data('link', link)
 			.appendTo(container);*/
 		
+		$('<div/>')
+			.addClass('hitbar')
+			.appendTo(panel);
+		
 		var alertbox = me.alertbox = $('<div/>')
 			.addClass('alertbox')
 			.appendTo(container);
 		
+		me.selectMap(me.defaultworld.defaultmap);
+		
 		setTimeout(function() { me.update(); }, me.options.updaterate);
 	},
+	selectMap: function(map) {
+		var me = this;
+		me.map.setMapTypeId('none');
+		me.world = map.world;
+		me.maptype = map;
+		me.maptype.updateTileSize(me.map.zoom);
+		window.setTimeout(function() {
+			me.map.setMapTypeId(map.world.name + '.' + map.name);
+		}, 1);
+		$('.map', me.worldlist).removeClass('selected');
+		$(map.element).addClass('selected');
+	},
 	update: function() {
 		var me = this;
 		
 		// TODO: is there a better place for this?
 		this.cleanPopups();
 		
-		$.getJSON(me.options.updateUrl + "world/" + me.world + "/" + me.lasttimestamp, function(update) {
+		$.getJSON(me.options.updateUrl + "world/" + me.world.name + "/" + me.lasttimestamp, function(update) {
 				me.alertbox.hide();
 			
 				me.lasttimestamp = update.timestamp;
@@ -274,6 +283,26 @@ DynMap.prototype = {
 			}
 		);
 	},
+	getTileUrl: function(tileName, always) {
+		var me = this;
+		var tile = me.registeredTiles[tileName];
+		
+		if(tile) {
+			return me.options.tileUrl + me.world.name + '/' + tileName + '?' + tile.lastseen;
+		} else {
+			return me.options.tileUrl + me.world.name + '/' + tileName + '?0';
+		}
+	},
+	registerTile: function(mapType, tileName, tile) {
+		this.registeredTiles[tileName] = {
+				tileElement: tile,
+				mapType: mapType,
+				lastseen: '0'
+		};
+	},
+	unregisterTile: function(mapType, tileName) {
+		delete this.registeredTiles[tileName];
+	},
 	cleanPopups: function() {
 		var POPUP_LIFE = 8000;
 		var d = new Date();
@@ -369,7 +398,7 @@ DynMap.prototype = {
 					if (me.options.showplayerfacesonmap) {
 						getMinecraftHead(mi.text, 32, function(head) {
 							$(head)
-								.addClass('playerIcon')
+								.addClass('playericon')
 								.prependTo(div);
 							playerImage.remove();
 						});
@@ -382,35 +411,33 @@ DynMap.prototype = {
 			markers[mi.id] = marker;
 
 			if (mi.type == 'player') {
-				marker.playerRow = $('<div/>')
-					.attr({ id: 'playerrow_' + mi.text })
-					.addClass('playerrow')
-					.append(marker.followButton = $('<input/>')
-						.attr({	type: 'checkbox',
-							name: 'followPlayer',
-							checked: false,
-							value: mi.text
-							})
-						.addClass('followButton')
-						.click(function(e) {
-							me.followPlayer(mi.id != me.followingPlayer ? mi.id : '');
-						}))
-					.append(marker.playerIconContainer = $('<span/>'))
+				marker.playerItem = $('<li/>')
+					.addClass('player')
+					.append(marker.playerIconContainer = $('<span/>')
+							.addClass('playerIcon')
+							.append($('<img/>').attr({ src: 'player_face.png' }))
+							.attr({ title: 'Follow ' + mi.text })
+							.click(function() {
+								var follow = mi.id != me.followingPlayer;
+								me.followPlayer(follow ? mi.id : '')
+							}))
 					.append($('<a/>')
-						.text(mi.text)
-						.attr({ href: '#' })
-						.click(function(e) { map.panTo(markers[mi.id].getPosition()); })
-						);
+							.attr({
+								href: '#',
+								title: 'Center on ' + mi.text
+								})
+							.text(mi.text)
+							)
+					.click(function(e) { map.panTo(markers[mi.id].getPosition()); })
+					.appendTo(me.playerlist);
 
 				if (me.options.showplayerfacesinmenu) {
 					getMinecraftHead(mi.text, 16, function(head) {
-						marker.playerRow.icon = $(head)
-							.addClass('playerIcon')
+						$('img', marker.playerIconContainer).remove();
+						marker.playerItem.icon = $(head)
 							.appendTo(marker.playerIconContainer);
 					});
 				}
-				
-				me.playerlist.append(marker.playerRow);
 			}
 		}
 		
@@ -420,35 +447,15 @@ DynMap.prototype = {
 	},
 	followPlayer: function(name) {
 		var me = this;
-		$('.followButton', me.playerlist).removeAttr('checked');
+		$('.following', me.playerlist).removeClass('following');
 		
 		var m = me.markers[name];
 		if(m) {
-			$(m.followButton).attr('checked', 'checked');
+			$(m.playerItem).addClass('following');
 			me.map.panTo(m.getPosition());
 		}
 		this.followingPlayer = name;
 	},
-	getTileUrl: function(tileName, always) {
-		var me = this;
-		var tile = me.registeredTiles[tileName];
-		
-		if(tile) {
-			return me.options.tileUrl + me.world + '/' + tileName + '?' + tile.lastseen;
-		} else {
-			return me.options.tileUrl + me.world + '/' + tileName + '?0';
-		}
-	},
-	registerTile: function(mapType, tileName, tile) {
-		this.registeredTiles[tileName] = {
-				tileElement: tile,
-				mapType: mapType,
-				lastseen: '0'
-		};
-	},
-	unregisterTile: function(mapType, tileName) {
-		delete this.registeredTiles[tileName];
-	},
 	// TODO: Enable hash-links.
 /*	updateLink: function() {
 		var me = this;

web/style.css

@@ -1,205 +0,0 @@
-html { height: 100% }
-body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
-#mcmap { width:100%; height: 100% }
-
-/* hide gmaps copyrights */
-div.map > DIV > DIV:first-child + DIV { visibility: hidden !important; }
-div.map > DIV > DIV:first-child + DIV + DIV { visibility: hidden !important; }
-
-
-.map {
-	width: 100%; height: 100%;
-	background-color: black;
-}
-
-.sidebar {
-	position: absolute;
-	top: 8px;
-	right: 8px;
-	border: 1px solid #808080;
-	background: #000;
-	opacity: 0.6;
-	padding: 2px;
-}
-
-input {
-	margin: 0px;
-}
-
-.sidebar, label {
-	clear:both;
-	font-family: sans-serif;
-	font-size: 8pt;
-	color: white;
-}
-
-.linkbox {
-	position: absolute;
-	bottom: 4px;
-	left: 80px;
-}
-
-.linkbox input {
-	opacity: 0.6;
-	border: 1px solid #808080;
-	padding: 2px;
-	background: #000;
-	font-size: 8pt;
-	color: #ddd;
-	width: 10em;
-}
-
-a, a:visited, label {
-	color: white;
-	text-decoration: none;
-}
-
-.labels {
-	font-size: 10pt;
-	font-family: sans-serif;
-	white-space: nowrap;
-	color: white;
-	display:none;
-}
-.gmnoprint{
-	margin-top:-75px;
-	margin-left:-20px
-}
-.plisthead{
-	margin-left:3px;
-	margin-right:3px;
-	display:inline-block;
-	height:14px;width:14px;
-	background-color:#000;
-	border: 0px;
-}
-
-.clock {
-	padding-left: 16px;
-	color: #dede90;
-	background-repeat: no-repeat;
-}
-.clock.night { background-image: url(clock_night.png); }
-.clock.day { background-image: url(clock_day.png); }
-
-.compass { 
-	background-repeat: no-repeat;
-	background-image: url(compass.png);
-}
-
-.timeofday {
-	background-repeat: no-repeat; 
-}
-
-.timeofday.sun { background-image: url(sun.png); }
-.timeofday.moon { background-image: url(moon.png); }
-
-.alertbox {
-	padding: 5px;
-	position: fixed;
-	margin: auto;
-	top: 0;
-	left: 0;
-	right: 0;
-	width: 25em;
-	text-align: center;
-	font: 14px/16px sans-serif;
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
-	background-color: InfoBackground;
-	border-radius: 0 0 3px 3px;
-}
-
-.playerIcon {
-}
-
-.playerrow {
-	width: 120px;
-	vertical-align: middle;
-	overflow: hidden;
-	padding: 1px;
-	cursor: pointer;
-}
-
-.playerrow:hover {
-	border: 1px solid #222222;
-	background-color: #333333;
-	padding: 0px;
-}
-
-.playerrow * {
-	vertical-align: middle;
-}
-
-.Marker {
-	font-family: Tahoma;
-	font-size: 12px;
-	color: white;
-	width: 100px;
-	white-space: nowrap;
-
-	margin-left: -12px;
-	margin-top: -12px;
-}
-
-.Marker * {
-	vertical-align: middle;
-}
-
-.Marker span {
-	visibility: hidden;
-}
-
-.Marker:hover span {
-	visibility: visible;
-}
-
-.Marker img {
-	width: 25px;
-	height: 25px;
-}
-
-.playerMarker {
-	margin-left: -16px;
-	margin-top: -16px;
-}
-
-.playerMarker span {
-	visibility: visible;
-}
-
-.followButton {
-	width: 16px;
-	height: 16px;
-	background-image: url(follow_off.png);
-}
-
-.followButton.enabled {
-	background-image: url(follow_on.png);
-}
-
-.maprow {
-	overflow: hidden;
-	width: 120px;
-	padding: 1px;
-}
-
-.maprow:hover {
-	border: 1px solid #222222;
-	background-color: #333333;
-	padding: 0px;
-}
-
-.maprow, .maprow * {
-	cursor: pointer;
-}
-
-.maprow label {
-	display: inline-box;
-	height: 15px;
-	margin-left: 5px;
-}
-
-.tile img {
-	image-rendering: -moz-crisp-edges;
-	-ms-interpolation-mode: nearest-neighbor;
-}