diff --git a/binaries/data/mods/official/art/textures/ui/session/icons/icon_sheet_resource.dds b/binaries/data/mods/official/art/textures/ui/session/icons/icon_sheet_resource.dds
new file mode 100644
index 0000000000..332f4a0064
--- /dev/null
+++ b/binaries/data/mods/official/art/textures/ui/session/icons/icon_sheet_resource.dds
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c8880f4829285e8afb16f364f8d8d62612d22c29e962622290ddaa6d01c1c749
+size 87568
diff --git a/binaries/data/mods/official/art/textures/ui/session/snCounterEdge.dds b/binaries/data/mods/official/art/textures/ui/session/snCounterEdge.dds
new file mode 100644
index 0000000000..439129500f
--- /dev/null
+++ b/binaries/data/mods/official/art/textures/ui/session/snCounterEdge.dds
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dcd77a00ab7cef25bbd2afc43a7cb2d260b4ccfc0930a26b941d84baee434e84
+size 1520
diff --git a/binaries/data/mods/official/art/textures/ui/session/snCounterTile.dds b/binaries/data/mods/official/art/textures/ui/session/snCounterTile.dds
new file mode 100644
index 0000000000..e6a0f42405
--- /dev/null
+++ b/binaries/data/mods/official/art/textures/ui/session/snCounterTile.dds
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a422eb6c6098fa2465e90386d66cb74db0f8b2104eefe74f126c74ef1a8170a8
+size 1520
diff --git a/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter.dds b/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter.dds
deleted file mode 100644
index 1aebe4620a..0000000000
--- a/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter.dds
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e64bee73f6b140badcebd83bc6f508c7e844113ba0bf8a3f3de3c5252507af54
-size 4224
diff --git a/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter_long.dds b/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter_long.dds
deleted file mode 100644
index bac8057966..0000000000
--- a/binaries/data/mods/official/art/textures/ui/session/ui_session_panel_resource_counter_long.dds
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b6c8a13802a0f817120a6604b05cbbbdc51ecdb5d296a35d199d8e7384ee4df1
-size 4224
diff --git a/binaries/data/mods/official/entities/template_entity_script.js b/binaries/data/mods/official/entities/template_entity_script.js
index 355a94f05d..fe8fb04a52 100644
--- a/binaries/data/mods/official/entities/template_entity_script.js
+++ b/binaries/data/mods/official/entities/template_entity_script.js
@@ -460,7 +460,7 @@ function performHeal( evt )
 			break;
 			default:
 				// Deduct resources to pay for healing.
-				this.player.resource[resource]-= evt.target.actions.heal.cost * evt.target.traits.creation.cost[resource];
+				getGUIGlobal().deductResources(toTitleCase (resource.toString()), parseInt(evt.target.actions.heal.cost * evt.target.traits.creation.cost[resource]));
 			break;
 		}
 	}
diff --git a/binaries/data/mods/official/gui/test/2_mainmenu.xml b/binaries/data/mods/official/gui/test/2_mainmenu.xml
index ddaf3d94ea..12095546d3 100644
--- a/binaries/data/mods/official/gui/test/2_mainmenu.xml
+++ b/binaries/data/mods/official/gui/test/2_mainmenu.xml
@@ -20,11 +20,27 @@
 			curr_music.loop();
 
 			// Display a .cfg file variable to prove we can access it.
-			console.write ("Volume: " + g_ConfigDB.system["sound.mastergain"] + ".")
+//			console.write ("Volume: " + g_ConfigDB.system["sound.mastergain"] + ".")
 			// Unfortunately, although Philip's workaround certainly works,
 			// a] The value cannot be modified.
 			// b] Variables a step up in the hierarchy are not recognised (eg system.sound.mastergain).
 		]]></action>
+		
+		<!--
+		==========================================
+		- MAIN MENU - STATIC TOOLTIP WINDOW
+		(Put at the top so that it is recognised by those using it.)
+		==========================================
+		-->
+
+		<object	name="pgToolTip"
+			style="fancyTextHeadWhite"
+			type="text"
+			hidden="true"
+			sprite="bkTranslucent"
+			size="69% 6.3802% 97.0703125% 28.125%"
+		>tooltipText
+		</object>		
 
 		<!--
 		==========================================
@@ -2022,21 +2038,5 @@ A large landmass with rivers, forests and coastal fishing grounds.
 			]]></action>
 		</object>
 		
-		<!--
-		==========================================
-		- MAIN MENU - STATIC TOOLTIP WINDOW
-		(Put down the bottom so it stays on top.)
-		==========================================
-		-->
-
-		<object	name="pgToolTip"
-			style="fancyTextHeadWhite"
-			type="text"
-			hidden="true"
-			sprite="bkTranslucent"
-			size="69% 6.3802% 97.0703125% 28.125%"
-		>tooltipText
-		</object>		
-
 	</object>
 </objects>
diff --git a/binaries/data/mods/official/gui/test/4_session.xml b/binaries/data/mods/official/gui/test/4_session.xml
index 2682d8778b..7dee65ce2d 100644
--- a/binaries/data/mods/official/gui/test/4_session.xml
+++ b/binaries/data/mods/official/gui/test/4_session.xml
@@ -114,31 +114,31 @@
 					addCrd (this.name, rt, 100, 0);
 				]]></action>
 
-				<object name="snMiniMapButton1"
+				<object name="snMiniMapButton_1"
 					style="skin*Hele*Button"
 					type="button"
 				>
 				</object>
-				<object name="snMiniMapButton2"
+				<object name="snMiniMapButton_2"
 					style="skin*Hele*Button"
 					type="button"
 				>
 				</object>
-				<object name="snMiniMapButton3"
+				<object name="snMiniMapButton_3"
 					style="skin*Hele*Button"
 					type="button"
 				>
 				</object>
-				<object name="snMiniMapButton4"
+				<object name="snMiniMapButton_4"
 					style="skin*Hele*Button"
 					type="button"
 				>
 					<action on="Load"><![CDATA[
 						// Seek through this group of buttons (determining length from last object's name).
-						max = this.name.substring (this.name.lastIndexOf ("n")+1, this.name.length);
+						max = this.name.substring (this.name.lastIndexOf ("_")+1, this.name.length);
 						for (loop = 1; loop <= max; loop++)
 						{
-							tempName = this.name.substring (0, this.name.lastIndexOf ("n")+1) + loop;
+							tempName = this.name.substring (0, this.name.lastIndexOf ("_")+1) + loop;
 							// Set size/position.
 							addCrd (tempName,
 								rb, 100, 100, 0,
@@ -166,74 +166,43 @@
 				guiToggle(this.name);
 			]]></action>
 
-			<object name="snResourceCounter_Food" 
-				style="resource_counter"
+			<object name="snResourceCounter_1" 
+				style="snCounter"
 				type="button" 
-				sprite="resource_food_counter"
-				tooltip="Food, plus some word-wrapping: Material, usually of plant or animal origin, that contains or consists of essential body nutrients, such as carbohydrates, fats, proteins, vitamins, or minerals, and is ingested and assimilated by an organism to produce energy, stimulate growth, and maintain life."
 			>
-				<action on="Load"><![CDATA[
-					addCrd (this.name, rb, 50, 0, -200, 4, snConst.MiniIcon.Width+54, snConst.MiniIcon.Height);
-					addCrd (this.name, lb, 50, 0);	
-					addCrd (this.name, lt, 50, 100);
-					addCrd (this.name, rt, 50, 100);
-				]]></action>
 			</object>
-
-			<object name="snResourceCounter_Wood" 
-				style="resource_counter"
+			<object name="snResourceCounter_2" 
+				style="snCounter"
 				type="button" 
-				sprite="resource_wood_counter"
-				tooltip="Wood"
 			>
-				<action on="Load"><![CDATA[
-					addCrd (this.name, rb, 50, 0, Crd[Crd.last].coord[rb].x+Crd[Crd.last].coord[rb].width+5, Crd[Crd.last].coord[rb].y, Crd[Crd.last].coord[rb].width, Crd[Crd.last].coord[rb].height);
-					addCrd (this.name, lb, 50, 0);	
-					addCrd (this.name, lt, 50, 100);
-					addCrd (this.name, rt, 50, 100);
-				]]></action>
 			</object>
-
-
-			<object name="snResourceCounter_Stone" 
-				style="resource_counter"
+			<object name="snResourceCounter_3" 
+				style="snCounter"
 				type="button" 
-				sprite="resource_stone_counter"
-				tooltip="Stone"
 			>
-				<action on="Load"><![CDATA[
-					addCrd (this.name, rb, 50, 0, Crd[Crd.last].coord[rb].x+Crd[Crd.last].coord[rb].width+5, Crd[Crd.last].coord[rb].y, Crd[Crd.last].coord[rb].width, Crd[Crd.last].coord[rb].height);
-					addCrd (this.name, lb, 50, 0);	
-					addCrd (this.name, lt, 50, 100);
-					addCrd (this.name, rt, 50, 100);
-				]]></action>
 			</object>
-
-			<object name="snResourceCounter_Ore" 
-				style="resource_counter"
+			<object name="snResourceCounter_4" 
+				style="snCounter"
 				type="button" 
-				sprite="resource_ore_counter"
-				tooltip="Wood"
 			>
-				<action on="Load"><![CDATA[
-					addCrd (this.name, rb, 50, 0, Crd[Crd.last].coord[rb].x+Crd[Crd.last].coord[rb].width+5, Crd[Crd.last].coord[rb].y, Crd[Crd.last].coord[rb].width, Crd[Crd.last].coord[rb].height);
-					addCrd (this.name, lb, 50, 0);	
-					addCrd (this.name, lt, 50, 100);
-					addCrd (this.name, rt, 50, 100);
-				]]></action>
 			</object>
-
-			<object name="snResourceCounter_Population" 
-				style="resource_counter"
+			<object name="snResourceCounter_5" 
+				style="snCounter"
 				type="button" 
-				sprite="resource_population_counter"
-				tooltip="Population"
 			>
 				<action on="Load"><![CDATA[
-					addCrd (this.name, rb, 50, 0, Crd[Crd.last].coord[rb].x+Crd[Crd.last].coord[rb].width+5, Crd[Crd.last].coord[rb].y, Crd[Crd.last].coord[rb].width+9, Crd[Crd.last].coord[rb].height);
-					addCrd (this.name, lb, 50, 0);	
-					addCrd (this.name, lt, 50, 100);
-					addCrd (this.name, rt, 50, 100);
+					// Seek through this group of buttons (determining length from last object's name).
+					max = this.name.substring (this.name.lastIndexOf ("_")+1, this.name.length);
+					for (loop = 1; loop <= max; loop++)
+					{
+						// Get name of current object in group.
+						tempName = this.name.substring (0, this.name.lastIndexOf ("_")+1) + loop;
+						// Create coordinates for object (the actual coordinates are refreshed when the
+						// resource is updated, so at this point we don't sweat that they have the same
+						// coordinates).
+						addCrds (tempName, 50, 0, -200, 4,
+							snConst.MiniIcon.Width+54, snConst.MiniIcon.Height+5);
+					}
 				]]></action>
 			</object>
 		</object>
diff --git a/binaries/data/mods/official/gui/test/functions_page_pregame_load.js b/binaries/data/mods/official/gui/test/functions_page_pregame_load.js
index 44bf289049..e7f7ae3bf6 100644
--- a/binaries/data/mods/official/gui/test/functions_page_pregame_load.js
+++ b/binaries/data/mods/official/gui/test/functions_page_pregame_load.js
@@ -29,21 +29,28 @@ function startMap (mapName, losSetting, openWindow)
 	// Display loading screen.	
 	startLoadingScreen();
 
-        // Begin game session.
-        if (! startGame())
-        {
-                // Failed to start the game; go back to the main menu.
-                guiSwitch ("ld", "pg");
-                // Show an error message
-                btCaptions = new Array("OK");
-                btCode = new Array("");
-                messageBox(400, 200, "The game could not be started with the given parameters. You probably have entered an invalid map name.", "Error", 0, btCaptions, btCode);
-        }
+	// Begin game session.
+	if (! startGame())
+	{
+			// Failed to start the game; go back to the main menu.
+			guiSwitch ("ld", "pg");
+			// Show an error message
+			btCaptions = new Array("OK");
+			btCode = new Array("");
+			messageBox(400, 200, "The game could not be started with the given parameters. You probably have entered an invalid map name.", "Error", 0, btCaptions, btCode);
+	}
 		
-        // Initialise Resource Pools by attaching them to the Player object.
-        // (CPlayer code takes care of giving a copy to each player.)
-        createResources();
+	// Set starting UI layout.
+	GUIType=rb;
+	flipGUI (GUIType);
 	
+	// Initialise Resource Pools by attaching them to the Player object.
+	// (CPlayer code takes care of giving a copy to each player.)
+	createResources();
+	
+	// Set session UI sprites to match the skin for the player's civilisation.
+	// (We don't have skins for all civs yet, so we're using the standard menu skin. But it should be settable from here later.)
+	setSkin ("wheat");	
 }
 
 // ====================================================================
@@ -128,16 +135,13 @@ function setupSession ()
 		}
 	}
 */
-	// Set starting UI layout.
-	GUIType=rb;
-        flipGUI (GUIType);
 
-        // Select session peace track.
-        curr_session_playlist_1 = newRandomSound("music", "peace");
-        // Fade out main theme and fade in session theme.
-        crossFade(curr_music, curr_session_playlist_1, 1);
+    // Select session peace track.
+    curr_session_playlist_1 = newRandomSound("music", "peace");
+    // Fade out main theme and fade in session theme.
+    crossFade(curr_music, curr_session_playlist_1, g_ConfigDB.system["sound.mastergain"]);
 
-        // Start refreshing the session controls.
+    // Start refreshing the session controls.
 	setInterval( snRefresh, 1, 100 );
 }
 
diff --git a/binaries/data/mods/official/gui/test/functions_sim_player.js b/binaries/data/mods/official/gui/test/functions_sim_player.js
index 3afe015b02..a113fcd545 100644
--- a/binaries/data/mods/official/gui/test/functions_sim_player.js
+++ b/binaries/data/mods/official/gui/test/functions_sim_player.js
@@ -52,13 +52,33 @@ function addResource (resourceName, resourceQty)
 	{
 		// Define the base resource group if it does not exist.
 		localPlayer.resource = new Array();
+		// Set the length of the array.
+		localPlayer.resource.length = 0;
+		// Create the UI resource array container if it does not exist.
+		resourceUIArray = new Array;
 	}
 	
 	// Store resource's name and starting value.
 	localPlayer.resource.valueOf()[resourceNameU] = resourceQty;
+	
+	// The array is now one index longer.
+	localPlayer.resource.length++;
+	
+	// We maintain a sorted array of the resource indexes so that the UI counters can be refreshed in centered order.
+	// (We don't include Housing in the list, though, as it does not have its own resource counter.)
+	if (resourceName != "Housing")
+	{
+		//  If it's an even index,
+		if ((localPlayer.resource.length-1) % 2 == 0)
+			// Add it to the end of the UI array.
+			resourceUIArray.push ((localPlayer.resource.length-1));
+		else
+			// Add it to the beginning of the UI array,
+			resourceUIArray.unshift ((localPlayer.resource.length-1));
+	}
 		
 	// Dynamically adjust width of resource counter based on caption length.
-	refreshResource (resourceName);		
+	refreshResources();		
 	
 	console.write( "Added " + resourceName + " (" + resourceQty + ")" );
 }
@@ -80,7 +100,7 @@ function setResources (resourceName, resourceQty)
 		localPlayer.resource.valueOf()[resourceNameU] = resourceQty;
 		
 		// Dynamically adjust width of resource counter based on caption length.
-		refreshResource (resourceName);		
+		refreshResources();		
 
 		console.write ("Resource set to " + resourceQty + " " + resourceName + ".");
 		return ( true );
@@ -101,16 +121,17 @@ function giveResources (resourceName, resourceQty)
 	resourceName = toTitleCase (resourceName);
 	// Create uppercase name.
 	resourceNameU = resourceName.toUpperCase();
-console.write (localPlayer.resource.valueOf()[resourceNameU]);
+// console.write (localPlayer.resource.valueOf()[resourceNameU]);
 //	if ( localPlayer.resource.valueOf()[resourceNameU] )
 //	{
 		// Set resource value.
 		localPlayer.resource.valueOf()[resourceNameU] += resourceQty;
 	
 		// Dynamically adjust width of resource counter based on caption length.
-		refreshResource (resourceName);		
+		refreshResources();		
 
-		console.write ("Earned " + resourceQty + " " + resourceName + ".");
+		if (resourceName != "Housing" && resourceName != "Population")
+			console.write ("Earned " + resourceQty + " " + resourceName + ".");
 		return ( true );
 //	}
 
@@ -136,9 +157,10 @@ function deductResources (resourceName, resourceQty)
 		localPlayer.resource.valueOf()[resourceNameU] -= resourceQty;
 		
 		// Dynamically adjust width of resource counter based on caption length.
-		refreshResource (resourceName);
+		refreshResources();
 
-		console.write("Deducted " + resourceQty + " " + resourceName + ".");
+		if (resourceName != "Housing" && resourceName != "Population")
+			console.write("Deducted " + resourceQty + " " + resourceName + ".");
 		return( true );
 //	}
 
@@ -149,37 +171,103 @@ function deductResources (resourceName, resourceQty)
 
 // ====================================================================
 
-function refreshResource (resourceName)
+function refreshResources ()
 {
-	// Ignore the "Housing" resource ... It doesn't work like normal resources and doesn't have a counter to resize.
-	if (resourceName == "Housing")
-		resourceName = "Population";
-		
-	// Update GUI resource counter caption.
-	if (resourceName != "Population")
-		getGUIObjectByName ("snResourceCounter_" + resourceName).caption = localPlayer.resource.valueOf()[resourceNameU];
-	else
-		getGUIObjectByName ("snResourceCounter_Population").caption = localPlayer.resource.valueOf()["POPULATION"] + "/" + localPlayer.resource.valueOf()["HOUSING"];		
+	// Refreshes all resource counters after update.
 
-	// Get the index of the resource readout to be resized.
-	crdResult = getCrd ("snResourceCounter_" + resourceName, true);
-	// Get resource readout object.
-	resourceObject = getGUIObjectByName ("snResourceCounter_" + resourceName);
-	
-	// For each coordinate group stored for this control,
-	for (coordGroup in Crd[crdResult].coord)
+	pool = localPlayer.resource;
+	resourceCount = 0;
+	for (resource in pool)
 	{
-		// Set X position so that resources always are immediately next to each other. (Except for Food, which is always the leftmost resource.)
-		if (resourceName != "Food")
-			Crd[crdResult].coord[coordGroup].x
-				= Crd[crdResult-1].coord[coordGroup].x + Crd[crdResult-1].coord[coordGroup].width + 5;
-				
-		// Set width of readout based on length of caption.
-		Crd[crdResult].coord[coordGroup].width = snConst.MiniIcon.Width+5 + resourceObject.caption.length * 10;
-		
-		// Recalculate readout's size coordinates.
-		Crd[crdResult].size[coordGroup] = calcCrdArray (Crd[crdResult].coord[coordGroup].rx, Crd[crdResult].coord[coordGroup].ry, Crd[crdResult].coord[coordGroup].x, Crd[crdResult].coord[coordGroup].y, Crd[crdResult].coord[coordGroup].width, Crd[crdResult].coord[coordGroup].height, Crd[crdResult].coord[coordGroup].rx2, Crd[crdResult].coord[coordGroup].ry2);
+		// Pass the array index of the resource as the second parameter (as we'll need that to determine the centered screen position of each counter).
+		refreshResource (toTitleCase(resource), resourceUIArray[resourceCount]);
+		resourceCount++;
 	}
 }
 
 // ====================================================================
+
+function refreshResource (resourceName, resourceIndex)
+{
+	// Refresh the onscreen counter for a given resource (called to recalculate the size of the coordinates, as these dynamically adjust depending on character length).
+
+	// Ignore the "Housing" resource ... It doesn't work like normal resources and doesn't have a counter to resize.
+	if (resourceName == "Housing")
+		return;
+		
+	// Get resource readout object.
+	resourceObject = getGUIObjectByName ("snResourceCounter_" + (resourceIndex + 1));
+	// Update counter caption (since we need to have up-to-date text to determine the length of the counter).
+	caption 
+		= "[icon=iconResource" + resourceName + " displace=\"0 0\"] "
+		+ localPlayer.resource.valueOf()[resourceName.toUpperCase()];
+	// The Population counter also lists the amount of available housing.		
+	if (resourceName == "Population")
+		caption
+			+= "/" + localPlayer.resource.valueOf()["HOUSING"];	
+	resourceObject.caption = caption;
+	
+	// Update caption tooltip.
+	resourceObject.tooltip = resourceName + ": " + resourceObject.caption;
+			
+	// Get the index of the resource readout to be resized.
+	crdResult = getCrd (resourceObject.name, true);
+	
+	// For each coordinate group stored for this control,
+	for (coordGroup in Crd[crdResult].coord)
+	{
+		// Set width of readout based on length of caption.
+		Crd[crdResult].coord[coordGroup].width = snConst.MiniIcon.Width+5 + resourceObject.caption.length * 10;
+	
+		// Set X and Y position and height so that resources always are immediately besides each other. (Except for the first resource (usually Food), which has the initial starting position)
+		
+		// Determine starting position for the first resource (so that the resources wind up being centered across the screen).
+		if (resourceIndex == 0)
+		{
+			// The first coordinate is in the exact centre of the screen.
+			Crd[crdResult].coord[coordGroup].x = -Crd[crdResult-2].coord[coordGroup].width - 5;
+		}
+		else
+		{	// Resources other than the first one get stacked in sequence to the sides of it.
+		
+			// If we're dealing with an "even" resource index,
+			if (resourceIndex % 2 == 0)
+			{
+				// Put the counter to the right of the previous odd counter.
+				Crd[crdResult].coord[coordGroup].x
+					= Crd[crdResult-2].coord[coordGroup].x + Crd[crdResult-2].coord[coordGroup].width + 5;
+			}
+			else // We're dealing with an "odd" resource index.
+			{
+				// Put the counter to the left of the previous odd counter.
+				if (resourceIndex == 1)
+					Crd[crdResult].coord[coordGroup].x
+						= Crd[crdResult-1].coord[coordGroup].x - Crd[crdResult].coord[coordGroup].width - 5;
+				else
+					Crd[crdResult].coord[coordGroup].x
+						= Crd[crdResult-2].coord[coordGroup].x - Crd[crdResult].coord[coordGroup].width - 5;
+			}
+		
+			// Set Y position to the same as the previous counter.
+			Crd[crdResult].coord[coordGroup].y
+				= Crd[crdResult-1].coord[coordGroup].y;
+				
+			// Set height of readout to the same as the previous counter.
+			Crd[crdResult].coord[coordGroup].height
+				= Crd[crdResult-1].coord[coordGroup].height;
+		}
+		
+		// Recalculate readout's size coordinates.
+		Crd[crdResult].size[coordGroup] = calcCrdArray (Crd[crdResult].coord[coordGroup].rx, Crd[crdResult].coord[coordGroup].ry, Crd[crdResult].coord[coordGroup].x, Crd[crdResult].coord[coordGroup].y, Crd[crdResult].coord[coordGroup].width, Crd[crdResult].coord[coordGroup].height, Crd[crdResult].coord[coordGroup].rx2, Crd[crdResult].coord[coordGroup].ry2);
+		
+		// If this coordinate is part of the currently active set, update the control onscreen too.
+		if (coordGroup == GUIType)
+		{
+			// Update counter size.
+			resourceObject.size = Crd[getCrd(resourceObject.name, true)].size[GUIType];
+		}
+	}
+}
+
+// ====================================================================
+
diff --git a/binaries/data/mods/official/gui/test/functions_utility_coord.js b/binaries/data/mods/official/gui/test/functions_utility_coord.js
index 0fe6a46266..49714fdd5c 100644
--- a/binaries/data/mods/official/gui/test/functions_utility_coord.js
+++ b/binaries/data/mods/official/gui/test/functions_utility_coord.js
@@ -24,6 +24,10 @@ function initCoord()
 // Add a new size coordinate to the array.
 function addCrd (name, group, rx, ry, x, y, width, height, rx2, ry2)
 {
+	// If no group is specified, default to the first one.
+	if (!group)
+		group = rb;
+
 	// Create new coordinate if necessary (it doesn't exist, or we have a new name).
 	if (group == rb || !Crd[Crd.last])
 	{
@@ -57,6 +61,60 @@ function addCrd (name, group, rx, ry, x, y, width, height, rx2, ry2)
 
 // ====================================================================
 
+function addCrds (name, rx, ry, x, y, width, height, rx2, ry2)
+{
+	// This is a shortcut function that saves you having to call addCrd() for each coordinate group. Just do this once for the whole set.
+	// It creates the first, then assumes all the remaining coordinates are flipped to the opposite screen edge.
+	// (True in 90% of cases.)
+	
+	addCrd (name, rb, rx, ry, x, y, width, height, rx2, ry2);
+	
+	// Determine flip relatives.
+	switch (rx)
+	{
+		case 0:
+			rx1 = 100;
+			rx2 = 100;			
+			rx3 = 0;			
+		break;
+		case 50:
+			rx1 = 50;
+			rx2 = 50;
+			rx3 = 50;
+		break;
+		case 100:
+			rx1 = 0;
+			rx2 = 0;			
+			rx3 = 100;		
+		break;
+	}
+	switch (ry)
+	{
+		case 0:
+			ry1 = 0;
+			ry2 = 100;
+			ry3 = 100;
+		break;
+		case 50:
+			ry1 = 50;
+			ry2 = 50;
+			ry3 = 50;
+		break;		
+		case 100:
+			ry1 = 100;
+			ry2 = 0;
+			ry3 = 0;			
+		break;
+	}	
+	
+	// Define the rest of the coordinate set.
+	addCrd (name, lb, rx1, ry1);
+	addCrd (name, lt, rx2, ry2);
+	addCrd (name, rt, rx3, ry3);
+} 
+
+// ====================================================================
+
 // Return coordinate object with a given name.
 // Optionally can choose to return the index to the coordinate, rather than the coordinate itself.
 function getCrd (name, byIndex)
@@ -186,3 +244,44 @@ function setCrd (name, newCrd)
 }
 
 // ====================================================================
+
+function setSkin (skinName)
+{
+//	(Unfortunately, this idea just isn't going to work until the GUI Engine allows us to set the value of a control's style (and therefore refresh its properties
+//	with those of the new style. As it stands, the style property is empty at runtime because styles are all set when the stuff is loaded. And since we're wrapping
+//	sprite info for skins in the styles, it won't be adequate to simply change the sprite properties. So commenting this out for now so we can adapt it later.)
+
+/*
+	// Sets the sprites of all registered controls with a skin (eg *<skinname>*SpriteName) to the specified skin name.
+	// Obviously such sprite names must exist, or it all will go horribly wrong.
+	
+	// Seek through all registered coordinates.
+	for (i = 0; i <= Crd.last; i++)
+	{
+		objectName = getGUIObjectByName (Crd[i].name);
+		
+		// We need to deliberately ignore the minimap object as it has no sprite (and checking for the existence of the property or type doesn't work).
+		if (objectName.name != "snMiniMapDisplay")
+		{
+			// Get first asterisk position.
+			startIndex = objectName.style.indexOf ("*", 1);
+			console.write (startIndex);
+			// If the coordinate begins with a "skin*" (and therefore qualifies for replacement),
+			if (startIndex != -1)
+			{
+				// Look for and return the ending asterisk.
+				endIndex = objectName.style.indexOf ("*", 5);
+				console.write (endIndex);				
+				if (endIndex != -1)
+				{
+					// Set new skin name for sprite.
+					objectName.style = "skin*" + skinName + "*" + objectName.style.substring (endIndex);
+				}
+			}
+			
+		}
+	}	
+*/
+}
+
+// ====================================================================
\ No newline at end of file
diff --git a/binaries/data/mods/official/gui/test/setup.xml b/binaries/data/mods/official/gui/test/setup.xml
index def22fab87..895ee09660 100755
--- a/binaries/data/mods/official/gui/test/setup.xml
+++ b/binaries/data/mods/official/gui/test/setup.xml
@@ -24,6 +24,70 @@
 			sprite_bar_vertical_over="bkWhiteBorderBlack"
 			sprite_bar_vertical_pressed="bkWhiteBorderBlack"
 	/>
+	
+	<!--
+	==========================================
+	- SETUP - ICONS
+	==========================================
+	-->
+
+		<!--
+		==========================================
+		- SETUP - ICONS - GENERIC
+		==========================================
+		-->
+
+		<icon	name="iconProduct"
+			sprite="iconProduct"
+			size="16 16"
+		/>
+		
+		<icon 	name="iconBullet"
+			sprite="iconBullet"
+			size="8 8" 
+		/>
+
+		<icon 	name="iconInfinity"
+			sprite="iconInfinity"
+			size="16 16" 
+		/>
+		
+		<!--
+		==========================================
+		- SETUP - ICONS - RESOURCE
+		==========================================
+		-->
+
+		<icon	name="iconResourceFood"
+				sprite="icon_sheet_resource"
+				cell_id="0"
+				size="20 20" 
+		/>
+
+		<icon	name="iconResourceWood"
+				sprite="icon_sheet_resource"
+				cell_id="1"
+				size="20 20" 
+		/>
+
+		<icon	name="iconResourceStone"
+				sprite="icon_sheet_resource"
+				cell_id="2"
+				size="20 20" 
+		/>
+
+		<icon 	name="iconResourceOre"
+				sprite="icon_sheet_resource"
+				cell_id="3"
+				size="20 20" 
+		/>
+
+		<icon 	name="iconResourcePopulation"
+				sprite="icon_sheet_resource"
+				cell_id="4"
+				size="20 20" 
+		/>
+	
 
         <!--
 NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED 
@@ -91,74 +155,14 @@ NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET
 			sprite_bar_vertical_over="atlas_button_lit"
 			sprite_bar_vertical_pressed="atlas_button_lit"
 	/>
-
-	<!--
-	==========================================
-	- SETUP - ICONS
-	==========================================
-	-->
-
-		<!--
-		==========================================
-		- SETUP - ICONS - GENERIC
-		==========================================
-		-->
-
-		<icon	name="iconProduct"
-			sprite="iconProduct"
-			size="16 16"
-		/>
-		
-		<icon 	name="iconBullet"
-			sprite="iconBullet"
-			size="8 8" 
-		/>
-
-		<icon 	name="iconInfinity"
-			sprite="iconInfinity"
-			size="16 16" 
-		/>
+	
+	
 
         <!--
 NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED 
 NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED 
 	-->
 
-		<!--
-		==========================================
-		- SETUP - ICONS - RESOURCE
-		==========================================
-		-->
-
-		<icon	name="icon_resource_food"
-			sprite="ui_icon_sheet_statistic"
-			cell_id="16"
-			size="20 20" 
-		/>
-
-		<icon	name="icon_resource_wood"
-			sprite="ui_icon_sheet_statistic"
-			cell_id="17"
-			size="20 20" 
-		/>
-
-		<icon	name="icon_resource_stone"
-			sprite="ui_icon_sheet_statistic"
-			cell_id="18"
-			size="20 20" 
-		/>
-
-		<icon 	name="icon_resource_ore"
-			sprite="ui_icon_sheet_statistic"
-			cell_id="19"
-			size="20 20" 
-		/>
-
-		<icon 	name="icon_resource_population"
-			sprite="ui_icon_sheet_statistic"
-			cell_id="20"
-			size="20 20" 
-		/>
 
 		<!--
 		==========================================
diff --git a/binaries/data/mods/official/gui/test/sprite1.xml b/binaries/data/mods/official/gui/test/sprite1.xml
index 87069362db..13a70367be 100644
--- a/binaries/data/mods/official/gui/test/sprite1.xml
+++ b/binaries/data/mods/official/gui/test/sprite1.xml
@@ -22,6 +22,7 @@
 		* Text formatting for lists (eg centering).
 		* DDS transparency (ie main menu buttons).
 		* Ask him about the checkbox and whether it's available for use (show first example in Options).
+		* Bug: If you nest an icon into a caption [icon=""], it's no longer possible to vertically center that control's text.
 	-->
 
 	<sprite name="bkTranslucent">
@@ -951,7 +952,52 @@
 				size="0 0 100% 100%"
 			/>
                 </sprite>
+				
+		<!--
+		==========================================
+		ICON SHEETS - STATISTICS
+		==========================================
+		-->
 
+		<sprite	name="ui_icon_sheet_statistic">
+			<image	texture="session/icons/ui_icon_sheet_statistic.dds"
+					cell_size="64 64"
+					size="0 0 100% 100%"
+			/>
+		</sprite>
+		
+		<!--
+		==========================================
+		ICON SHEETS - RESOURCES
+		==========================================
+		-->	
+		
+		<sprite	name="icon_sheet_resource">
+			<image	texture="session/icons/icon_sheet_resource.dds"
+					cell_size="64 64"
+					size="0 0 100% 100%"
+			/>
+		</sprite>			
+
+        <!--
+		==========================================
+		RESOURCE COUNTER
+		==========================================
+		-->
+		
+		<sprite	name="snCounter">
+			<image	texture="session/snCounterTile.dds"
+					real_texture_placement="0 0 21 21"
+					size="0% 0% 100%-15 100%" 
+			/>
+			<image 	texture="session/snCounterEdge.dds"
+					real_texture_placement="0 0 15 21"
+					size="100%-15 0% 100% 100%" 
+			/>
+		</sprite>
+		
+
+	
 
 
 
@@ -1227,47 +1273,6 @@ NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET
                         <image texture="session/ui_session_panel_status_bg_bottom.dds" texture_size="0 0 256 256" size="0 0 100% 100%" />
                 </sprite>
 
-                <!--
-                ==========================================
-                RESOURCE BAR
-                ==========================================
-                -->
-
-                <sprite name="resource_food_counter">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" real_texture_placement="0 128 64 192" texture_size="0 0 100% 100%" size="0 0 20 20" />
-                        <image texture="session/ui_session_panel_resource_counter.dds" texture_size="0 0 64 64" size="21 0 100% 100%" />
-                </sprite>
-
-                <sprite name="resource_wood_counter">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" real_texture_placement="64 128 128 192" texture_size="0 0 100% 100%" size="0 0 20 20" />
-                        <image texture="session/ui_session_panel_resource_counter.dds" texture_size="0 0 64 64" size="21 0 100% 100%" />
-                </sprite>
-
-                <sprite name="resource_stone_counter">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" real_texture_placement="128 128 192 192" texture_size="0 0 100% 100%" size="0 0 20 20" />
-                        <image texture="session/ui_session_panel_resource_counter.dds" texture_size="0 0 64 64" size="21 0 100% 100%" />
-                </sprite>
-
-                <sprite name="resource_ore_counter">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" real_texture_placement="192 128 256 192" texture_size="0 0 100% 100%" size="0 0 20 20" />
-                        <image texture="session/ui_session_panel_resource_counter.dds" texture_size="0 0 64 64" size="21 0 100% 100%" />
-                </sprite>
-
-                <sprite name="resource_population_counter">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" real_texture_placement="256 128 320 192" texture_size="0 0 100% 100%" size="0 0 20 20" />
-                        <image texture="session/ui_session_panel_resource_counter_long.dds" texture_size="0 0 64 64" size="21 0 100% 100%" />
-                </sprite>
-
-                <!--
-                ==========================================
-                STATISTIC ICONS - SHEETS
-                ==========================================
-                -->
-
-                <sprite name="ui_icon_sheet_statistic">
-                        <image texture="session/icons/ui_icon_sheet_statistic.dds" cell_size="64 64" texture_size="0 0 100% 100%" size="0 0 100% 100%"/>
-                </sprite>
-
         <!--
         ==========================================
         EDITOR GUI - BACKCOLOR SPRITES
diff --git a/binaries/data/mods/official/gui/test/styles.xml b/binaries/data/mods/official/gui/test/styles.xml
index 4c92b120d8..da9dd2e8e1 100755
--- a/binaries/data/mods/official/gui/test/styles.xml
+++ b/binaries/data/mods/official/gui/test/styles.xml
@@ -484,6 +484,16 @@
 			tooltip_style="snToolTip"
 			tooltip="(TBA)"
 		/>
+		
+		<style	name="snCounter"
+				sprite="snCounter"
+				text_align="left"
+				text_valign="center"
+				font="tahoma14"
+				textcolor="white"
+				tooltip_style="snToolTip"
+				ghost="false"
+		/>		
 
         <!--
 NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED 
@@ -496,15 +506,6 @@ NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET CONVERTED NOT YET
 	==========================================
 	-->
 
-	<style name="resource_counter"
-		text_valign="bottom"
-		text_align="right"
-		font="prospero16"
-		textcolor="white"
-		tooltip_style="snToolTip"
-		ghost="false"
-	/>
-
 	<style name="control_group"
 		size="0 0 100% 100%"
 	/>