diff --git a/src/main/resources/configuration.txt b/src/main/resources/configuration.txt
index 938367df..18cc1ee8 100644
--- a/src/main/resources/configuration.txt
+++ b/src/main/resources/configuration.txt
@@ -68,11 +68,12 @@ components:
   #  filename: regions.yml
   #  basenode: regions
   #  use3dregions: true
-  #  infowindow: '<div class="infowindow"><span style="font-size:120%;">%regionname% - %priority% (%parent%)</span><br /> Owners <span style="font-weight:bold;">%playerowners% %groupowners%</span><br />Members <span style="font-weight:bold;">%playermembers% %groupmembers%</span><br />Flags<br /><span style="font-weight:bold;">%flags%</span></div>'
   #  regionstyle:
-  #    strokeColor: "#FF0000"
-  #    strokeOpacity: 0.8
-  #    strokeWeight: 3
+  #    stroke: true
+  #    color: "#FF0000"
+  #    opacity: 0.8
+  #    weight: 3
+  #    fill: true
   #    fillColor: "#FF0000"
   #    fillOpacity: 0.35
   #  # Optional setting to limit which regions to show, by name - if commented out, all regions are shown
diff --git a/web/css/regions.css b/web/css/regions.css
new file mode 100644
index 00000000..8a3cb79b
--- /dev/null
+++ b/web/css/regions.css
@@ -0,0 +1,39 @@
+.regioninfo > * {
+	display: block;
+}
+
+.regioninfo > *:empty {
+	display: none;
+}
+
+.regioninfo .regionname {
+	font-size: 120%;
+	font-weight: bold;
+}
+
+.regioninfo .owners {
+	margin-left: 20px;
+}
+
+.regioninfo .regionflags .regionflag {
+	display: block;
+	font-size: 90%;
+	color: gray;
+	margin-left: 5px;
+}
+
+.regioninfo .owners:before {
+	content: "Owners: ";
+}
+
+.regioninfo .members:before {
+	content: "Members: ";
+}
+
+.regioninfo .regionflags:before {
+	content: "Flags: ";
+}
+
+.regioninfo .regionpriority:before {
+	content: "Priority: ";
+}
\ No newline at end of file
diff --git a/web/js/dynmaputils.js b/web/js/dynmaputils.js
index 9b628133..07ace996 100644
--- a/web/js/dynmaputils.js
+++ b/web/js/dynmaputils.js
@@ -154,6 +154,27 @@ function loadjs(url, completed) {
 	(document.head || document.getElementsByTagName('head')[0]).appendChild(script);
 }
 
+function loadcss(url, completed) {
+	var script = document.createElement('link');
+	script.setAttribute('href', url);
+	script.setAttribute('rel', 'stylesheet');
+	var isloaded = false;
+	if (completed) {
+		script.onload = function() {
+			if (isloaded) { return; }
+			isloaded = true;
+			completed();
+		};
+		
+		// Hack for IE, don't know whether this still applies to IE9.
+		script.onreadystatechange = function() {
+			script.onload();
+		};
+	}
+	
+	(document.head || document.getElementsByTagName('head')[0]).appendChild(script);
+}
+
 function splitArgs(s) {
 	var r = s.split(' ');
 	delete arguments[0];
diff --git a/web/js/regions.js b/web/js/regions.js
index 1c12e377..fd1426a5 100644
--- a/web/js/regions.js
+++ b/web/js/regions.js
@@ -1,70 +1,110 @@
 var regionConstructors = {};
 
-function createPolygonSurfaces(latlng, maxx, minx, maxy, miny, maxz, minz) {
-	return [
-		new L.Polygon([
-			latlng(minx,miny,minz),
-			latlng(maxx,miny,minz),
-			latlng(maxx,miny,maxz),
-			latlng(minx,miny,maxz)
-			], {}),
-		new L.Polygon([
-			latlng(minx,maxy,minz),
-			latlng(maxx,maxy,minz),
-			latlng(maxx,maxy,maxz),
-			latlng(minx,maxy,maxz)
-			], {}),
-		new L.Polygon([
-			latlng(minx,miny,minz),
-			latlng(minx,maxy,minz),
-			latlng(maxx,maxy,minz),
-			latlng(maxx,miny,minz)
-			], {}),
-		new L.Polygon([
-			latlng(maxx,miny,minz),
-			latlng(maxx,maxy,minz),
-			latlng(maxx,maxy,maxz),
-			latlng(maxx,miny,maxz)
-			], {}),
-		new L.Polygon([
-			latlng(minx,miny,maxz),
-			latlng(minx,maxy,maxz),
-			latlng(maxx,maxy,maxz),
-			latlng(maxx,miny,maxz)
-			], {}),
-		new L.Polygon([
-			latlng(minx,miny,minz),
-			latlng(minx,maxy,minz),
-			latlng(minx,maxy,maxz),
-			latlng(minx,miny,maxz)
-			], {})
-		];
-}
-
 componentconstructors['regions'] = function(dynmap, configuration) {
-	regionCfg = configuration;
-	var regionType = regionCfg.name;
+	
+	// Helper functions
+	latlng = function(x, y, z) {
+		return dynmap.getProjection().fromLocationToLatLng(new Location(undefined, x,y,z));
+	}
+	
+	function create3DBoxLayer(maxx, minx, maxy, miny, maxz, minz) {
+		return new L.FeatureGroup([
+			new L.Polygon([
+				latlng(minx,miny,minz),
+				latlng(maxx,miny,minz),
+				latlng(maxx,miny,maxz),
+				latlng(minx,miny,maxz)
+				], configuration.regionstyle),
+			new L.Polygon([
+				latlng(minx,maxy,minz),
+				latlng(maxx,maxy,minz),
+				latlng(maxx,maxy,maxz),
+				latlng(minx,maxy,maxz)
+				], configuration.regionstyle),
+			new L.Polygon([
+				latlng(minx,miny,minz),
+				latlng(minx,maxy,minz),
+				latlng(maxx,maxy,minz),
+				latlng(maxx,miny,minz)
+				], configuration.regionstyle),
+			new L.Polygon([
+				latlng(maxx,miny,minz),
+				latlng(maxx,maxy,minz),
+				latlng(maxx,maxy,maxz),
+				latlng(maxx,miny,maxz)
+				], configuration.regionstyle),
+			new L.Polygon([
+				latlng(minx,miny,maxz),
+				latlng(minx,maxy,maxz),
+				latlng(maxx,maxy,maxz),
+				latlng(maxx,miny,maxz)
+				], configuration.regionstyle),
+			new L.Polygon([
+				latlng(minx,miny,minz),
+				latlng(minx,maxy,minz),
+				latlng(minx,maxy,maxz),
+				latlng(minx,miny,maxz)
+				], configuration.regionstyle)
+			]);
+	}
+	
+	function create2DBoxLayer(maxx, minx, maxy, miny, maxz, minz) {
+		return new L.Polygon([
+				latlng(minx,64,minz),
+				latlng(maxx,64,minz),
+				latlng(maxx,64,maxz),
+				latlng(minx,64,maxz)
+				], configuration.regionstyle);
+	}
+	
+	function createPopupContent(name, region) {
+		return $('<div/>').addClass('regioninfo')
+			.append($('<span/>').addClass('regionname').text(name))
+			.append($('<span/>').addClass('owners')
+				.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.owners.players.concat()))
+				.append(region.owners.groups && $('<span/>').addClass('groupowners').text(region.owners.groups.concat()))
+				)
+			.append($('<span/>').addClass('members')
+				.append(region.members.players && $('<span/>').addClass('playermembers').text(region.members.players.concat()))
+				.append(region.members.groups && $('<span/>').addClass('groupmembers').text(region.members.groups.concat()))
+				)
+			.append(region.parent && $('<span/>').addClass('regionparent').text(region.parent))
+			.append(region.flags && function() {
+				var regionflags = $('<span/>').addClass('regionflags');
+				$.each(region.flags, function(name, value) {
+					regionflags.append($('<span/>').addClass('regionflag').text(name + ': ' + value));
+				});
+				return regionflags;
+			}())
+			.append($('<span/>').addClass('regionpriority').text(region.priority))
+			[0];
+	}
+	
+	var self = this;
+	loadcss('css/regions.css');
+	var regionType = configuration.name;
 	loadjs('js/regions_' + regionType + '.js', function() {
-		var regionsLayer = undefined;
+		var activeLayer = undefined;
 		function undraw() {
-			if (regionsLayer) {
-				dynmap.map.removeLayer(regionsLayer);
-				regionsLayer = undefined;
+			if (activeLayer) {
+				dynmap.map.removeLayer(activeLayer);
+				activeLayer = undefined;
 			}
 		}
 		function redraw() {
 			undraw();
 			var worldName = dynmap.world && dynmap.world.name;
 			if (worldName) {
-				regionConstructors[regionType](dynmap, worldName, function(regionLayers) {
-					var newRegionsLayer = new L.LayerGroup();
-					$.each(regionLayers, function(name, layer) {
-						console.log(name, layer);
-						newRegionsLayer.addLayer(layer);
-					});
-					regionsLayer = newRegionsLayer;
-					dynmap.map.addLayer(newRegionsLayer);
-				});
+				regionConstructors[regionType](dynmap, $.extend({}, configuration, {
+						component: self,
+						worldName: worldName,
+						createPopupContent: createPopupContent,
+						createBoxLayer: configuration.use3dregions ? create3DBoxLayer : create2DBoxLayer,
+						result: function(regionsLayer) {
+							activeLayer = regionsLayer;
+							dynmap.map.addLayer(activeLayer);
+						}
+					}));
 			}
 		}
 		$(dynmap).bind('mapchanged', redraw);
diff --git a/web/js/regions_Residence.js b/web/js/regions_Residence.js
index 8df9672a..406ce240 100644
--- a/web/js/regions_Residence.js
+++ b/web/js/regions_Residence.js
@@ -1,31 +1,26 @@
-function createPolygonsFromResidence(latlng, name, residence) {
-	return createPolygonSurfaces(residence.X1, residence.X2, residence.Y1, residence.Y2, residence.Z1, residence.Z2);
-}
-function createPopupContent(name, region) {
-	return $('<div/>')
-		.append($('<span/>').addClass('regionname').text(name))
-		.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.permissions.owner))
-		[0];
-};
+regionConstructors['Residence'] = function(dynmap, configuration) {
+	// Helper function.
+	function createBoxFromArea(area, boxCreator) {
+		return boxCreator(area.X1, area.X2, area.Y1, area.Y2, area.Z1, area.Z2);
+	}
 
-regionConstructors['Residence'] = function(dynmap, worldName, result) {
-	var latlng = function(x, y, z) {
-		return dynmap.getProjection().fromLocationToLatLng(new Location(undefined, x,y,z));
-	};
-	
 	$.getJSON('standalone/res_' + worldName + '.json', function(data) {
-		var regionLayers = {};
+		var boxLayers = [];
 		$.each(data, function(name, residence) {
-			if(map === residence.Permissions.World) {
-				var polygons = createPolygonsFromResidence(latlng, name, residence);
-				var regionLayer = new L.FeatureGroup(polygons);
-				
-				regionLayer.bindPopup(createPopupContent(name, region));
-				
-				regionLayers[name] = regionLayer;
+			if(worldName == residence.Permissions.World) {
+				$.each(residence.Areas, function(name, area) {
+					var boxLayer = configuration.createBoxLayer(area.X1, area.X2, area.Y1, area.Y2, area.Z1, area.Z2);
+					
+					boxLayer.bindPopup(configuration.createPopupContent(name, $.extend(residence, {
+						owners: { players: [residence.Permissions.Owner] },
+						flags: region.Permissions.AreaFlags
+					})));
+					
+					boxLayers.push(boxLayer);
+				});
 			}
 		});
-		result(regionLayers);
+		configuration.result(new L.LayerGroup(boxLayers));
 		
 	});
 };
diff --git a/web/js/regions_WorldGuard.js b/web/js/regions_WorldGuard.js
index 0684f3a1..90e5d6a7 100644
--- a/web/js/regions_WorldGuard.js
+++ b/web/js/regions_WorldGuard.js
@@ -1,68 +1,37 @@
-Array.max = function( array ) {
-    return Math.max.apply( Math, array );
-};
-Array.min = function( array ) {
-    return Math.min.apply( Math, array );
-};
-
-function createPolygonsFromWorldGuardRegion(latlng, name, region) {
-	if(region.points) {
-		var i;
-		var xs = region.points.map(function(p) { return p.x; });
-		var zs = region.points.map(function(p) { return p.z; });
-		return createPolygonSurfaces(latlng, Array.max(xs), Array.min(xs), region['max-y'], region['min-y'], Array.max(zs), Array.min(zs));
-	}
-	if(!region.min || !region.max)
-		return [];
-	if(region.max.y <= region.min.y)
-		region.min.y = region.max.y - 1;
-	return createPolygonSurfaces(latlng, region.max.x, region.min.x, region.max.y, region.min.y, region.max.z, region.min.z);
-}
-
-function createPopupContent(name, region) {
-	
-	return $('<div/>')
-		.append($('<span/>').addClass('regionname').text(name))
-		.append(region.owners.players && $('<span/>').addClass('playerowners').text(region.owners.players.concat()))
-		.append(region.owners.groups && $('<span/>').addClass('groupowners').text(region.owners.groups.concat()))
-		.append(region.members.players && $('<span/>').addClass('playermembers').text(region.members.players.concat()))
-		.append(region.members.groups && $('<span/>').addClass('groupmembers').text(region.members.groups.concat()))
-		.append(region.parent && $('<span/>').addClass('regionparent').text(region.parent))
-		.append(region.flags && function() {
-			var regionflags = $('<span/>').addClass('regionflags');
-			$.each(region.flags, function(name, value) {
-				regionflags.append($('<span/>').addClass('regionflag').text(name + ': ' + value));
-			});
-			return regionflags;
-		}())
-		.append($('<span/>').addClass('regionpriority').text(region.priority))
-		[0];
-};
-
-regionConstructors['WorldGuard'] = function(dynmap, worldName, result) {
-	var latlng = function(x, y, z) {
-		var l;
-		if (typeof x === 'Object' && !y && !z) {
-			l = x;
-		} else {
-			l = new Location(undefined, x,y,z);
+regionConstructors['WorldGuard'] = function(dynmap, configuration) {
+	// Helper function.
+	function createBoxFromRegion(region, boxCreator) {
+		function ArrayMax( array ) {
+		return Math.max.apply( Math, array );
 		}
-		return dynmap.getProjection().fromLocationToLatLng(l);
-	};
+		function ArrayMin( array ) {
+			return Math.min.apply( Math, array );
+		}
+		if(region.points) {
+			var i;
+			var xs = region.points.map(function(p) { return p.x; });
+			var zs = region.points.map(function(p) { return p.z; });
+			return boxCreator(ArrayMax(xs), ArrayMin(xs), region['max-y'], region['min-y'], ArrayMax(zs), ArrayMin(zs));
+		}
+		if(!region.min || !region.max)
+			return [];
+		if(region.max.y <= region.min.y)
+			region.min.y = region.max.y - 1;
+		return boxCreator(region.max.x, region.min.x, region.max.y, region.min.y, region.max.z, region.min.z);
+	}
 	
-	regionFile = regionCfg.filename.substr(0, regionCfg.filename.lastIndexOf('.'));
-	regionFile += '_'+worldName+'.json';
+	var regionFile = configuration.filename.substr(0, configuration.filename.lastIndexOf('.'));
+	regionFile += '_'+configuration.worldName+'.json';
 	$.getJSON('standalone/'+regionFile, function(data) {
-		var regionLayers = {};
+		var boxLayers = [];
 		$.each(data, function(name, region) {
-			var polygons = createPolygonsFromWorldGuardRegion(latlng, name, region);
-			var regionLayer = new L.FeatureGroup(polygons);
+			var boxLayer = createBoxFromRegion(region, configuration.createBoxLayer);
 			
-			regionLayer.bindPopup(createPopupContent(name, region));
+			boxLayer.bindPopup(configuration.createPopupContent(name, region));
 			
-			regionLayers[name] = regionLayer;
+			boxLayers.push(boxLayer);
 		});
-		result(regionLayers);
+		configuration.result(new L.LayerGroup(boxLayers));
 		
 	});
 };
\ No newline at end of file