From 6517e231e8f3c2267ec68b4fd91750485228de39 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 21 Sep 2019 00:13:29 +0300
Subject: [PATCH] v1.0.44

---
 index.css                      |  22 +++----
 index.html                     |  92 ++++++++++++++++++-----------
 modules/ui/biomes-editor.js    |   1 +
 modules/ui/burg-editor.js      |  33 +++++++++++
 modules/ui/burgs-editor.js     |   2 +-
 modules/ui/cultures-editor.js  |   1 +
 modules/ui/diplomacy-editor.js |   1 +
 modules/ui/heightmap-editor.js |   2 +-
 modules/ui/labels-editor.js    |   9 ++-
 modules/ui/layers.js           | 102 ++++++++++++++++++++++++---------
 modules/ui/options.js          |  18 ++++++
 modules/ui/provinces-editor.js |   5 +-
 modules/ui/relief-editor.js    |   1 +
 modules/ui/religions-editor.js |   1 +
 modules/ui/rivers-editor.js    |   1 +
 modules/ui/routes-editor.js    |   9 ++-
 modules/ui/states-editor.js    |   1 +
 modules/ui/tools.js            |  54 +++++++++--------
 modules/ui/zones-editor.js     |   1 +
 modules/utils.js               |   8 +--
 20 files changed, 260 insertions(+), 104 deletions(-)

diff --git a/index.css b/index.css
index 2f077fa0..b442fd05 100644
--- a/index.css
+++ b/index.css
@@ -252,7 +252,7 @@ i.icon-lock {
 #brushCircle {
 	stroke: #373737;
 	stroke-width: 1.5px;
-	stroke-dasharray: 6;
+	stroke-dasharray: 7;
 	stroke-linecap: butt;
 	fill: none;
 }
@@ -474,13 +474,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 	font-weight: bold;
 }
 
-#styleContent button.styleButton {
-	font-size: 70%;
-	border-radius: 15%;
-	margin: 0;
-}
-
-#styleContent button.presetButton {
+#layersContent button.presetButton {
   position: absolute;
   height: 2em;
   border-radius: 15%;
@@ -488,6 +482,13 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: .7em;
 }
 
+#styleContent button.styleButton {
+	font-size: 70%;
+	border-radius: 15%;
+	margin: 0;
+}
+
+#layersContent button.active,
 #styleContent button:active {
 	transform: translate(0px, 1px);
 }
@@ -531,9 +532,10 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 }
 
 .tab > button.options {
-	width: 23.25%;
+	/* width: 23.25%; */
+	width: 18.6%;
 	height: 100%;
-	padding: 7px 10px;
+	padding: 7px 0px;
 }
 
 button.options {
diff --git a/index.html b/index.html
index 77569b0a..a3faa870 100644
--- a/index.html
+++ b/index.html
@@ -890,13 +890,14 @@
 
       <div class="tab">
         <button id="optionsHide" data-tip="Click to hide options pane. Shortcut: Tab to close this or Esc to close all dialogs" class="options" onclick="hideOptions(event)">◄</button>
-        <button id="styleTab" data-tip="Click to open style menu" class="options active">Style</button>
+        <button id="layersTab" data-tip="Click to change map layers" class="options active">Layers</button>
+        <button id="styleTab" data-tip="Click to open style editor" class="options">Style</button>
         <button id="optionsTab" data-tip="Click to change generation and UI options" class="options">Options</button>
         <button id="toolsTab" data-tip="Click to open tools menu" class="options">Tools</button>
         <button id="aboutTab" data-tip="Click to see Generator info" class="options">About</button>
       </div>
 
-      <div id="styleContent" class="tabcontent" style="display: block">
+      <div id="layersContent" class="tabcontent" style="display: block">
         <p data-tip="Select a map layers preset" style="display: inline-block;">Layers preset:</p>
         <select data-tip="Select a map layers preset" id="layersPreset" onchange="changePreset(this.value)" style="width:45%">
           <option value="political" selected>Political map</option>
@@ -912,34 +913,36 @@
         <button id="savePresetButton" data-tip="Click to save displayed layers as a new preset" class="icon-plus presetButton" style="display:none" onclick="savePreset()"></button>
         <button id="removePresetButton" data-tip="Click to remove current custom preset" class="icon-minus presetButton" style="display:none" onclick="removePreset()"></button>
 
-        <p data-tip="Click to toggle a layer, drag to raise or lower a layer">Displayed layers:</p>
-        <ul data-tip="Click to toggle a layer, drag to raise or lower a layer" id="mapLayers">
-          <li id="toggleTexture" data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Shortcut: X" class="buttonoff" onclick="toggleTexture()">Te<u>x</u>ture</li>
-          <li id="toggleHeight" data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Shortcut: H" class="buttonoff" onclick="toggleHeight()"><u>H</u>eightmap</li>
-          <li id="toggleBiomes" data-tip="Biomes: click to toggle, drag to raise or lower the layer. Shortcut: B" class="buttonoff" onclick="toggleBiomes()"><u>B</u>iomes</li>
-          <li id="toggleCells" data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Shortcut: E" class="buttonoff" onclick="toggleCells()">C<u>e</u>lls</li>
-          <li id="toggleGrid" data-tip="Grid: click to toggle, drag to raise or lower. Select type in styles dropdown below. Shortcut: G" class="buttonoff" onclick="toggleGrid()"><u>G</u>rid</li>
-          <li id="toggleCoordinates" data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Shortcut: O" class="buttonoff" onclick="toggleCoordinates()">C<u>o</u>ordinates</li>
-          <li id="toggleCompass" data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Shortcut: W" class="buttonoff" onclick="toggleCompass()"><u>W</u>ind Rose</li>
-          <li id="toggleRivers" data-tip="Rivers: click to toggle, drag to raise or lower the layer. Shortcut: V" onclick="toggleRivers()">Ri<u>v</u>ers</li>
-          <li id="toggleRelief" data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Shortcut: F" class="buttonoff" onclick="toggleRelief()">Relie<u>f</u></li>
-          <li id="toggleReligions" data-tip="Religions: click to toggle, drag to raise or lower the layer. Shortcut: R" class="buttonoff" onclick="toggleReligions()"><u>R</u>eligions</li>
-          <li id="toggleCultures" data-tip="Cultures: click to toggle, drag to raise or lower the layer. Shortcut: C" class="buttonoff" onclick="toggleCultures()"><u>C</u>ultures</li>
-          <li id="toggleStates" data-tip="States: click to toggle, drag to raise or lower the layer. Shortcut: S" onclick="toggleStates()"><u>S</u>tates</li>
-          <li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Shortcut: N" class="buttonoff" onclick="toggleProvinces()">Provi<u>n</u>ces</li>
-          <li id="toggleZones" data-tip="Zones: click to toggle, drag to raise or lower the layer. Shortcut: Z" class="buttonoff" onclick="toggleZones()"><u>Z</u>ones</li>
-          <li id="toggleBorders" data-tip="State borders: click to toggle, drag to raise or lower the layer. Shortcut: D" onclick="toggleBorders()">Bor<u>d</u>ers</li>
-          <li id="toggleRoutes"data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Shortcut: U" onclick="toggleRoutes()">Ro<u>u</u>tes</li>
-          <li id="toggleTemp" data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Shortcut: T" class="buttonoff" onclick="toggleTemp()"><u>T</u>emperature</li>
-          <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Shortcut: P" class="buttonoff" onclick="togglePopulation()"><u>P</u>opulation</li>
-          <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Shortcut: A" class="buttonoff" onclick="togglePrec()">Precipit<u>a</u>tion</li>
-          <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Shortcut: L" onclick="toggleLabels()"><u>L</u>abels</li>
-          <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Shortcut: I" onclick="toggleIcons()"><u>I</u>cons</li>
-          <li id="toggleMarkers" data-tip="Markers: click to toggle, drag to raise or lower the layer. Shortcut: M" class="buttonoff" onclick="toggleMarkers()"><u>M</u>arkers</li>
-          <li id="toggleRulers" data-tip="Rulers: click to toggle, drag to move, click on label to delete. Shortcut: = (equal)" class="buttonoff" onclick="toggleRulers()">Rulers</li>
-          <li id="toggleScaleBar" data-tip="Scale Bar: click to toggle, drag to move. Shortcut: - (minus)" onclick="toggleScaleBar()" class="solid">Scale Bar</li>
+        <p data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style">Displayed layers and layers order:</p>
+        <ul data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style" id="mapLayers">
+          <li id="toggleTexture" data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: X" class="buttonoff" onclick="toggleTexture(event)">Te<u>x</u>ture</li>
+          <li id="toggleHeight" data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: H" class="buttonoff" onclick="toggleHeight(event)"><u>H</u>eightmap</li>
+          <li id="toggleBiomes" data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: B" class="buttonoff" onclick="toggleBiomes(event)"><u>B</u>iomes</li>
+          <li id="toggleCells" data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: E" class="buttonoff" onclick="toggleCells(event)">C<u>e</u>lls</li>
+          <li id="toggleGrid" data-tip="Grid: click to toggle, drag to raise or lower. Select type in styles dropdown below. Ctrl + click to edit layer style. Shortcut: G" class="buttonoff" onclick="toggleGrid(event)"><u>G</u>rid</li>
+          <li id="toggleCoordinates" data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: O" class="buttonoff" onclick="toggleCoordinates(event)">C<u>o</u>ordinates</li>
+          <li id="toggleCompass" data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: W" class="buttonoff" onclick="toggleCompass(event)"><u>W</u>ind Rose</li>
+          <li id="toggleRivers" data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: V" onclick="toggleRivers(event)">Ri<u>v</u>ers</li>
+          <li id="toggleRelief" data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: F" class="buttonoff" onclick="toggleRelief(event)">Relie<u>f</u></li>
+          <li id="toggleReligions" data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: R" class="buttonoff" onclick="toggleReligions(event)"><u>R</u>eligions</li>
+          <li id="toggleCultures" data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: C" class="buttonoff" onclick="toggleCultures(event)"><u>C</u>ultures</li>
+          <li id="toggleStates" data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: S" onclick="toggleStates(event)"><u>S</u>tates</li>
+          <li id="toggleProvinces" data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="toggleProvinces(event)">Provi<u>n</u>ces</li>
+          <li id="toggleZones" data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Z" class="buttonoff" onclick="toggleZones(event)"><u>Z</u>ones</li>
+          <li id="toggleBorders" data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: D" onclick="toggleBorders(event)">Bor<u>d</u>ers</li>
+          <li id="toggleRoutes"data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: U" onclick="toggleRoutes(event)">Ro<u>u</u>tes</li>
+          <li id="toggleTemp" data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: T" class="buttonoff" onclick="toggleTemp(event)"><u>T</u>emperature</li>
+          <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P" class="buttonoff" onclick="togglePopulation(event)"><u>P</u>opulation</li>
+          <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A" class="buttonoff" onclick="togglePrec(event)">Precipit<u>a</u>tion</li>
+          <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L" onclick="toggleLabels(event)"><u>L</u>abels</li>
+          <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I" onclick="toggleIcons(event)"><u>I</u>cons</li>
+          <li id="toggleMarkers" data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M" class="buttonoff" onclick="toggleMarkers(event)"><u>M</u>arkers</li>
+          <li id="toggleRulers" data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style. Shortcut: = (equal)" class="buttonoff" onclick="toggleRulers(event)">Rulers</li>
+          <li id="toggleScaleBar" data-tip="Scale Bar: click to toggle, drag to move. Ctrl + click to edit style. Shortcut: - (minus)" onclick="toggleScaleBar(event)" class="solid">Scale Bar</li>
         </ul>
+      </div>
 
+      <div id="styleContent" class="tabcontent">
         <p data-tip="Select an element to edit its style" style="display: inline-block;">Select element:</p>
         <select data-tip="Select an element to edit its style (list is ordered alphabetically)" id="styleElementSelect" style="width:42%">
           <option value="anchors">Anchor Icons</option>
@@ -980,7 +983,7 @@
 
           <tbody id="styleGroup">
             <tr data-tip="Select element group">
-              <td>Group</td>
+              <td><b>Group</b></td>
               <td>
                 <select id="styleGroupSelect"><option value="regions">regions</option></select>
               </td>
@@ -1460,7 +1463,7 @@
         </table>
 
         <div id="mapFilters" data-tip="Set a filter to be applied to the map in general">
-          <p>Toggle filters:</p>
+          <p>Toggle global filters:</p>
           <button id="grayscale" class="radio">Grayscale</button>
           <button id="sepia" class="radio">Sepia</button>
           <button id="dingy" class="radio">Dingy</button>
@@ -2019,6 +2022,8 @@
         <span id="labelTextRandom" data-tip="Generate random name" class="icon-shuffle pointer"></span>
       </div>
 
+      <button id="labelEditStyle" data-tip="Edit label group style in Style Editor" class="icon-brush"></button>
+
       <button id="labelSizeShow" data-tip="Show the font size section" class="icon-text-height"></button>
       <div id="labelSizeSection" style="display: none">
         <button id="labelSizeHide" data-tip="Hide the font size section" class="icon-text-height"></button>
@@ -2053,6 +2058,7 @@
         <span id="riverReset" data-tip="Reset transformation to default" class="icon-cancel pointer"></span>
       </div>
 
+      <button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
       <button id="riverLength" data-tip="River length in selected units">0</button>
       <button id="riverCopy" data-tip="Copy river" class="icon-clone"></button>
       <button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button>
@@ -2069,6 +2075,8 @@
         <span id="routeGroupAdd" data-tip="Create new group for this route" class="icon-plus pointer"></span>
         <span id="routeGroupRemove" data-tip="Remove all routes of this group" class="icon-trash-empty pointer"></span>
       </div>
+
+      <button id="routeEditStyle" data-tip="Edit route group style in Style Editor" class="icon-brush"></button>
       <button id="routeLength" data-tip="Route length in selected units">0</button>
       <button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button>
       <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
@@ -2201,6 +2209,7 @@
       </div>
 
       <div id="reliefBottom">
+        <button id="reliefEditStyle" data-tip="Edit Relief Icons style in Style Editor" class="icon-brush"></button>
         <button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button>
         <button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button>
         <button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
@@ -2226,6 +2235,14 @@
         <span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span>
       </div>
 
+      <button id="burgStyleShow" data-tip="Show style edit section" class="icon-brush"></button>
+      <div id="burgStyleSection" style="display: none">
+        <button id="burgStyleHide" data-tip="Hide style edit section" class="icon-brush"></button>
+        <button id="burgEditLabelStyle" data-tip="Edit label style for burg group in Style Editor" class="icon-font"></button>
+        <button id="burgEditIconStyle" data-tip="Edit icon style for burg group in Style Editor" class="icon-dot-circled"></button>
+        <button id="burgEditAnchorStyle" data-tip="Edit port icon (anchor) style for burg group in Style Editor" class="icon-anchor"></button>        
+      </div>
+
       <button id="burgSeeInMFCG" data-tip="Open the burg representation in the Medieval Fantasy City Generator by Watabou" class="icon-map-o"></button>
       <button id="burgOpenCOA" data-tip="Open burg's COA in the Iron Arachne Heraldry Generator" class="icon-fleur"></button>
       <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
@@ -2322,8 +2339,8 @@
 
       <div id="brushesSliders" style="display: none">
         <div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px"><div style="width:3.2em; display: inline-block"><i>Radius:</i></div>
-          <input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min=5 max=50 value=25>
-          <input id="brushRadiusNumber" oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value" type="number" min=5 max=50 value=25 style="border: 1px solid #d4d4d4">
+          <input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min=1 max=50 value=25>
+          <input id="brushRadiusNumber" oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value" type="number" min=1 max=50 value=25 style="border: 1px solid #d4d4d4">
         </div>
 
         <div data-tip="Set the brush power"><div style="width:3.2em; display: inline-block"><i>Power:</i></div>
@@ -2474,6 +2491,7 @@
 
       <div id="biomesBottom">
         <button id="biomesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="biomesEditStyle" data-tip="Edit biomes style in Style Editor" class="icon-adjust"></button>
         <button id="biomesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
         <button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
         <button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button>
@@ -2519,6 +2537,7 @@
 
       <div id="statesBottom">
         <button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="statesEditStyle" data-tip="Edit states style in Style Editor" class="icon-adjust"></button>
         <button id="statesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
         <button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
         <button id="statesChart" data-tip="Show states bubble chart" class="icon-chart-area"></button>
@@ -2578,6 +2597,7 @@
 
       <div id="provincesBottom">
         <button id="provincesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="provincesEditStyle" data-tip="Edit provinces style in Style Editor" class="icon-adjust"></button>
         <button id="provincesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
         <button id="provincesChart" data-tip="Show provinces chart" class="icon-chart-area"></button>
         <button id="provincesToggleLabels" data-tip="Toggle province labels" class="icon-font"></button>
@@ -2611,6 +2631,7 @@
 
       <div id="diplomacyBottom" style="margin-top: .1em">
         <button id="diplomacyEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="diplomacyEditStyle" data-tip="Edit states (including diplomacy view) style in Style Editor" class="icon-adjust"></button>
         <button id="diplomacyRegenerate" data-tip="Regenerate diplomatical relations" class="icon-retweet"></button>
         <button id="diplomacyHistory" data-tip="Show relations history" class="icon-hourglass-1"></button>
         <button id="diplomacyMatrix" data-tip="Show relations matrix" class="icon-list-bullet"></button>
@@ -2674,6 +2695,7 @@
 
       <div id="culturesBottom">
         <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
         <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
         <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
         <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
@@ -2750,6 +2772,7 @@
       </div>
 
       <div id="zonesBottom">
+        <button id="zonesEditStyle" data-tip="Edit zones style in Style Editor" class="icon-adjust"></button>
         <button id="zonesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
         <button id="zonesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
 
@@ -2810,10 +2833,11 @@
 
       <div id="religionsBottom">
         <button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
         <button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
         <button id="religionsPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
-        <button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-fork"></button>
-        <button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-adjust"></button>
+        <button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
+        <button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-eye-off"></button>
 
         <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
         <div id="religionsManuallyButtons" style="display: none">
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 3908912b..4fd8d587 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -22,6 +22,7 @@ function editBiomes() {
 
   // add listeners
   document.getElementById("biomesEditorRefresh").addEventListener("click", refreshBiomesEditor);
+  document.getElementById("biomesEditStyle").addEventListener("click", () => editStyle("biomes"));
   document.getElementById("biomesLegend").addEventListener("click", toggleLegend);
   document.getElementById("biomesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("biomesManually").addEventListener("click", enterBiomesCustomizationMode);
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index 0511dd14..a29fc5d6 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -14,6 +14,8 @@ function editBurg() {
   const my = elSelected.attr("id") == d3.event.target.id ? "center bottom" : "center top+10";
   const at = elSelected.attr("id") == d3.event.target.id ? "top" : "bottom";
 
+  document.getElementById("burgEditAnchorStyle").style.display = +pack.burgs[id].port ? "inline-block" : "none";
+
   $("#burgEditor").dialog({
     title: "Edit Burg: " + elSelected.text(), resizable: false,
     position: {my, at, of: d3.event.target, collision: "fit"},
@@ -37,6 +39,12 @@ function editBurg() {
   document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
   document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
 
+  document.getElementById("burgStyleShow").addEventListener("click", showStyleSection);
+  document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection);
+  document.getElementById("burgEditLabelStyle").addEventListener("click", editGroupLabelStyle);
+  document.getElementById("burgEditIconStyle").addEventListener("click", editGroupIconStyle);
+  document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle);
+
   document.getElementById("burgSeeInMFCG").addEventListener("click", openInMFCG);
   document.getElementById("burgOpenCOA").addEventListener("click", openInIAHG);
   document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
@@ -211,6 +219,31 @@ function editBurg() {
     changeName();
   }
 
+  function showStyleSection() {
+    document.querySelectorAll("#burgEditor > button").forEach(el => el.style.display = "none");
+    document.getElementById("burgStyleSection").style.display = "inline-block";
+  }
+
+  function hideStyleSection() {
+    document.querySelectorAll("#burgEditor > button").forEach(el => el.style.display = "inline-block");
+    document.getElementById("burgStyleSection").style.display = "none";
+  }
+
+  function editGroupLabelStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("labels", g);
+  }
+
+  function editGroupIconStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("burgIcons", g);
+  }
+
+  function editGroupAnchorStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("anchors", g);
+  }
+
   function openInMFCG() {
     const id = elSelected.attr("data-id");
     const name = elSelected.text();
diff --git a/modules/ui/burgs-editor.js b/modules/ui/burgs-editor.js
index bfbdcfa9..6cc55dc5 100644
--- a/modules/ui/burgs-editor.js
+++ b/modules/ui/burgs-editor.js
@@ -20,7 +20,7 @@ function editBurgs() {
 
   // add listeners
   document.getElementById("burgsEditorRefresh").addEventListener("click", refreshBurgsEditor);
-  document.getElementById("burgsChart").addEventListener("click", showBurgsChart);  
+  document.getElementById("burgsChart").addEventListener("click", showBurgsChart);
   document.getElementById("burgsFilterState").addEventListener("change", burgsEditorAddLines);
   document.getElementById("burgsFilterCulture").addEventListener("change", burgsEditorAddLines);
   document.getElementById("regenerateBurgNames").addEventListener("click", regenerateNames);
diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js
index 9ad8bbcc..c1562171 100644
--- a/modules/ui/cultures-editor.js
+++ b/modules/ui/cultures-editor.js
@@ -22,6 +22,7 @@ function editCultures() {
 
   // add listeners
   document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
+  document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
   document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
   document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index f9fe4c62..a74dddf4 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -34,6 +34,7 @@ function editDiplomacy() {
 
   // add listeners
   document.getElementById("diplomacyEditorRefresh").addEventListener("click", refreshDiplomacyEditor);
+  document.getElementById("diplomacyEditStyle").addEventListener("click", () => editStyle("regions"));
   document.getElementById("diplomacyRegenerate").addEventListener("click", regenerateRelations);
   document.getElementById("diplomacyMatrix").addEventListener("click", showRelationsMatrix);
   document.getElementById("diplomacyHistory").addEventListener("click", showRelationsHistory);
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 0b792be3..7f5b34ef 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1190,4 +1190,4 @@ function getHeight(h) {
     }
   }
 
-}
+}
\ No newline at end of file
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index 9d39a7e5..70606b0b 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -34,7 +34,9 @@ function editLabel() {
   document.getElementById("labelTextShow").addEventListener("click", showTextSection);
   document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
   document.getElementById("labelText").addEventListener("input", changeText);
-  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName); 
+  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
+
+  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
 
   document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
   document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
@@ -281,6 +283,11 @@ function editLabel() {
     changeText();
   }
 
+  function editGroupStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("labels", g);
+  }
+
   function showSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => el.style.display = "none");
     document.getElementById("labelSizeSection").style.display = "inline-block";
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index f9f89ab7..7390b948 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -113,11 +113,13 @@ function getCurrentPreset() {
   savePresetButton.style.display = "inline-block";
 }
 
-function toggleHeight() {
+function toggleHeight(event) {
   if (!terrs.selectAll("*").size()) {
     turnButtonOn("toggleHeight");
     drawHeightmap();
+    if (event && event.ctrlKey) editStyle("terrs");
   } else {
+    if (event && event.ctrlKey) {editStyle("terrs"); return;}
     if (customization === 1) {tip("You cannot turn off the layer when heightmap is in edit mode", false, "error"); return;}
     turnButtonOff("toggleHeight");
     terrs.selectAll("*").remove();
@@ -208,11 +210,13 @@ function getColor(value, scheme = getColorScheme()) {
   return scheme(1 - (value < 20 ? value - 5 : value) / 100);
 }
 
-function toggleTemp() {
+function toggleTemp(event) {
   if (!temperature.selectAll("*").size()) {
     turnButtonOn("toggleTemp");
     drawTemp();
+    if (event && event.ctrlKey) editStyle("temperature");
   } else {
+    if (event && event.ctrlKey) {editStyle("temperature"); return;}
     turnButtonOff("toggleTemp");
     temperature.selectAll("*").remove();
   }
@@ -310,11 +314,13 @@ function drawTemp() {
   console.timeEnd("drawTemp");
 }
 
-function toggleBiomes() {
+function toggleBiomes(event) {
   if (!biomes.selectAll("path").size()) {
     turnButtonOn("toggleBiomes");
     drawBiomes();
+    if (event && event.ctrlKey) editStyle("biomes");
   } else {
+    if (event && event.ctrlKey) {editStyle("biomes"); return;}
     biomes.selectAll("path").remove();
     turnButtonOff("toggleBiomes");
   }
@@ -365,11 +371,13 @@ function drawBiomes() {
   }
 }
 
-function togglePrec() {
+function togglePrec(event) {
   if (!prec.selectAll("circle").size()) {
     turnButtonOn("togglePrec");
     drawPrec();
+    if (event && event.ctrlKey) editStyle("prec");
   } else {
+    if (event && event.ctrlKey) {editStyle("prec"); return;}
     turnButtonOff("togglePrec");
     const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
     prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0);
@@ -391,11 +399,13 @@ function drawPrec() {
     .transition(show).attr("r", d => rn(Math.max(Math.sqrt(cells.prec[d] * .5), .8),2)); 
 }
 
-function togglePopulation() {
+function togglePopulation(event) {
   if (!population.selectAll("line").size()) {
     turnButtonOn("togglePopulation");
     drawPopulation();
+    if (event && event.ctrlKey) editStyle("population");
   } else {
+    if (event && event.ctrlKey) {editStyle("population"); return;}
     turnButtonOff("togglePopulation");
     const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
     population.select("#rural").selectAll("line").transition(hide).attr("y2", d => d[1]).remove();
@@ -403,7 +413,7 @@ function togglePopulation() {
   }
 }
 
-function drawPopulation() {
+function drawPopulation(event) {
   population.selectAll("line").remove();
   const cells = pack.cells, p = cells.p, burgs = pack.burgs;
   const show = d3.transition().duration(2000).ease(d3.easeSinIn);
@@ -421,11 +431,13 @@ function drawPopulation() {
     .transition(show).delay(500).attr("y2", d => d[2]);
 }
 
-function toggleCells() {
+function toggleCells(event) {
   if (!cells.selectAll("path").size()) {
     turnButtonOn("toggleCells");
     drawCells();
+    if (event && event.ctrlKey) editStyle("cells");
   } else {
+    if (event && event.ctrlKey) {editStyle("cells"); return;}
     cells.selectAll("path").remove();
     turnButtonOff("toggleCells");
   }
@@ -440,17 +452,19 @@ function drawCells() {
   cells.append("path").attr("d", path);
 }
 
-function toggleCultures() {
+function toggleCultures(event) {
   if (!cults.selectAll("path").size()) {
     turnButtonOn("toggleCultures");
     drawCultures();
+    if (event && event.ctrlKey) editStyle("cults");
   } else {
+    if (event && event.ctrlKey) {editStyle("cults"); return;}
     cults.selectAll("path").remove();
     turnButtonOff("toggleCultures");
   }
 }
 
-function drawCultures() {
+function drawCultures(event) {
   console.time("drawCultures");
   
   cults.selectAll("path").remove();
@@ -497,17 +511,19 @@ function drawCultures() {
   console.timeEnd("drawCultures");
 }
 
-function toggleReligions() {
+function toggleReligions(event) {
   if (!relig.selectAll("path").size()) {
     turnButtonOn("toggleReligions");
     drawReligions();
+    if (event && event.ctrlKey) editStyle("relig");
   } else {
+    if (event && event.ctrlKey) {editStyle("relig"); return;}
     relig.selectAll("path").remove();
     turnButtonOff("toggleReligions");
   }
 }
 
-function drawReligions() {
+function drawReligions(event) {
   console.time("drawReligions");
 
   relig.selectAll("path").remove();
@@ -554,12 +570,14 @@ function drawReligions() {
   console.timeEnd("drawReligions");
 }
 
-function toggleStates() {
+function toggleStates(event) {
   if (!layerIsOn("toggleStates")) {
     turnButtonOn("toggleStates");
     regions.attr("display", null);
     drawStates();
+    if (event && event.ctrlKey) editStyle("regions");
   } else {
+    if (event && event.ctrlKey) {editStyle("regions"); return;}
     regions.attr("display", "none").selectAll("path").remove();
     turnButtonOff("toggleStates");
   }
@@ -735,21 +753,25 @@ function drawBorders() {
   console.timeEnd("drawBorders");
 }
 
-function toggleBorders() {
+function toggleBorders(event) {
   if (!layerIsOn("toggleBorders")) {
     turnButtonOn("toggleBorders");
     $('#borders').fadeIn();
+    if (event && event.ctrlKey) editStyle("borders");
   } else {
+    if (event && event.ctrlKey) {editStyle("borders"); return;}
     turnButtonOff("toggleBorders");
     $('#borders').fadeOut();
   }  
 }
 
-function toggleProvinces() {
+function toggleProvinces(event) {
   if (!layerIsOn("toggleProvinces")) {
     turnButtonOn("toggleProvinces");
     drawProvinces();
+    if (event && event.ctrlKey) editStyle("provs");
   } else {
+    if (event && event.ctrlKey) {editStyle("provs"); return;}
     provs.selectAll("*").remove();
     turnButtonOff("toggleProvinces");
   }
@@ -828,12 +850,14 @@ function drawProvinces() {
   console.timeEnd("drawProvinces");
 }
 
-function toggleGrid() {
+function toggleGrid(event) {
   if (!gridOverlay.selectAll("*").size()) {
     turnButtonOn("toggleGrid");
     drawGrid();
     calculateFriendlyGridSize();
+    if (event && event.ctrlKey) editStyle("gridOverlay");
   } else {
+    if (event && event.ctrlKey) {editStyle("gridOverlay"); return;}
     turnButtonOff("toggleGrid");
     gridOverlay.selectAll("*").remove();
   }
@@ -887,11 +911,13 @@ function drawGrid() {
   console.timeEnd("drawGrid");
 }
 
-function toggleCoordinates() {
+function toggleCoordinates(event) {
   if (!coordinates.selectAll("*").size()) {
     turnButtonOn("toggleCoordinates");
     drawCoordinates();
+    if (event && event.ctrlKey) editStyle("coordinates");
   } else {
+    if (event && event.ctrlKey) {editStyle("coordinates"); return;}
     turnButtonOff("toggleCoordinates");
     coordinates.selectAll("*").remove();
   }
@@ -937,7 +963,7 @@ function getViewPoint(x, y) {
   return pt.matrixTransform(view.getScreenCTM().inverse());
 }
 
-function toggleCompass() {
+function toggleCompass(event) {
   if (!layerIsOn("toggleCompass")) {
     turnButtonOn("toggleCompass");
     $('#compass').fadeIn();
@@ -949,24 +975,28 @@ function toggleCompass() {
       svg.select("g#rose > g#sL > line#sL1").attr("y1", -19000).attr("y2", 19000);
       svg.select("g#rose > g#sL > line#sL2").attr("x1", -19000).attr("x2", 19000);
     }
+    if (event && event.ctrlKey) editStyle("compass");
   } else {
+    if (event && event.ctrlKey) {editStyle("compass"); return;}
     $('#compass').fadeOut();
     turnButtonOff("toggleCompass");
   }
 }
 
-function toggleRelief() {
+function toggleRelief(event) {
   if (!layerIsOn("toggleRelief")) {
     turnButtonOn("toggleRelief");
     if (!terrain.selectAll("*").size()) ReliefIcons();
     $('#terrain').fadeIn();
+    if (event && event.ctrlKey) editStyle("terrain");
   } else {
+    if (event && event.ctrlKey) {editStyle("terrain"); return;}
     $('#terrain').fadeOut();
     turnButtonOff("toggleRelief");
   }
 }
 
-function toggleTexture() {
+function toggleTexture(event) {
   if (!layerIsOn("toggleTexture")) {
     turnButtonOn("toggleTexture");
     // append default texture image selected by default. Don't append on load to not harm performance
@@ -976,88 +1006,106 @@ function toggleTexture() {
     }
     $('#texture').fadeIn();
     zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
+    if (event && event.ctrlKey) editStyle("texture");
   } else {
+    if (event && event.ctrlKey) {editStyle("texture"); return;}
     $('#texture').fadeOut();
     turnButtonOff("toggleTexture");
   }
 }
 
-function toggleRivers() {
+function toggleRivers(event) {
   if (!layerIsOn("toggleRivers")) {
     turnButtonOn("toggleRivers");
     $('#rivers').fadeIn();
+    if (event && event.ctrlKey) editStyle("rivers");
   } else {
+    if (event && event.ctrlKey) {editStyle("rivers"); return;}
     $('#rivers').fadeOut();
     turnButtonOff("toggleRivers");
   }
 }
 
-function toggleRoutes() {
+function toggleRoutes(event) {
   if (!layerIsOn("toggleRoutes")) {
     turnButtonOn("toggleRoutes");
     $('#routes').fadeIn();
+    if (event && event.ctrlKey) editStyle("routes");
   } else {
+    if (event && event.ctrlKey) {editStyle("routes"); return;}
     $('#routes').fadeOut();
     turnButtonOff("toggleRoutes");
   }
 }
 
-function toggleMarkers() {
+function toggleMarkers(event) {
   if (!layerIsOn("toggleMarkers")) {
     turnButtonOn("toggleMarkers");
     $('#markers').fadeIn();
+    if (event && event.ctrlKey) editStyle("markers");
   } else {
+    if (event && event.ctrlKey) {editStyle("markers"); return;}
     $('#markers').fadeOut();
     turnButtonOff("toggleMarkers");
   }
 }
 
-function toggleLabels() {
+function toggleLabels(event) {
   if (!layerIsOn("toggleLabels")) {
     turnButtonOn("toggleLabels");
     labels.style("display", null)
     invokeActiveZooming();
+    if (event && event.ctrlKey) editStyle("labels");
   } else {
+    if (event && event.ctrlKey) {editStyle("labels"); return;}
     turnButtonOff("toggleLabels");
     labels.style("display", "none");
   }
 }
 
-function toggleIcons() {
+function toggleIcons(event) {
   if (!layerIsOn("toggleIcons")) {
     turnButtonOn("toggleIcons");
     $('#icons').fadeIn();
+    if (event && event.ctrlKey) editStyle("burgIcons");
   } else {
+    if (event && event.ctrlKey) {editStyle("burgIcons"); return;}
     turnButtonOff("toggleIcons");
     $('#icons').fadeOut();
   }  
 }
 
-function toggleRulers() {
+function toggleRulers(event) {
   if (!layerIsOn("toggleRulers")) {
     turnButtonOn("toggleRulers");
     $('#ruler').fadeIn();
+    if (event && event.ctrlKey) editStyle("ruler");
   } else {
+    if (event && event.ctrlKey) {editStyle("ruler"); return;}
     $('#ruler').fadeOut();
     turnButtonOff("toggleRulers");
   }
 }
 
-function toggleScaleBar() {
+function toggleScaleBar(event) {
   if (!layerIsOn("toggleScaleBar")) {
     turnButtonOn("toggleScaleBar");
     $('#scaleBar').fadeIn();
+    if (event && event.ctrlKey) editUnits();
   } else {
+    if (event && event.ctrlKey) {editUnits(); return;}
     $('#scaleBar').fadeOut();
     turnButtonOff("toggleScaleBar");
   }
 }
 
-function toggleZones() {
+function toggleZones(event) {
   if (!layerIsOn("toggleZones")) {
     turnButtonOn("toggleZones");
     $('#zones').fadeIn();
+    if (event && event.ctrlKey) editStyle("zones");
   } else {
+    if (event && event.ctrlKey) {editStyle("zones"); return;}
     turnButtonOff("toggleZones");
     $('#zones').fadeOut();
   }  
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 67f2d8a8..9674733e 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -59,6 +59,7 @@ options.querySelector("div.tab").addEventListener("click", function(event) {
   document.getElementById(id).classList.add("active");
   options.querySelectorAll(".tabcontent").forEach(e => e.style.display = "none");
 
+  if (id === "layersTab") layersContent.style.display = "block"; else
   if (id === "styleTab") styleContent.style.display = "block"; else
   if (id === "optionsTab") optionsContent.style.display = "block"; else
   if (id === "toolsTab") customization === 1 
@@ -81,6 +82,22 @@ function collapse(e) {
   }
 }
 
+// select element to be edited
+function editStyle(element, group) {
+  showOptions();
+  styleTab.click();
+  styleElementSelect.value = element;
+  if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
+  selectStyleElement();
+
+  styleElementSelect.classList.add("glow");
+  if (group) styleGroupSelect.classList.add("glow");
+  setTimeout(() => {
+    styleElementSelect.classList.remove("glow");
+    if (group) styleGroupSelect.classList.remove("glow");
+  }, 1500);
+}
+
 // Toggle style sections on element select
 styleElementSelect.addEventListener("change", selectStyleElement);
 function selectStyleElement() {
@@ -804,6 +821,7 @@ function changeCultureSet() {
 
 function changeStatesNumber(value) {
   regionsInput.value = regionsOutput.value = value;
+  regionsOutput.style.color = +value ? null : "#b12117";
   burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
   labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
 }
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index b54ff395..4eb1a47b 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -20,6 +20,7 @@ function editProvinces() {
 
   // add listeners
   document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
+  document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
   document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
   document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("provincesChart").addEventListener("click", showChart);
@@ -552,7 +553,7 @@ function editProvinces() {
     const oldProvince = cells.province[center];
     if (oldProvince && provinces[oldProvince].center === center) {tip("The cell is already a center of a different province. Select other cell", false, "error"); return;}
     const state = cells.state[center];
-    if (!state) {tip("You cannot create a province in neutral lands> Please assign this land to a state first", false, "error"); return;}
+    if (!state) {tip("You cannot create a province in neutral lands. Please assign this land to a state first", false, "error"); return;}
 
     if (d3.event.shiftKey === false) exitAddProvinceMode();
 
@@ -640,7 +641,7 @@ function editProvinces() {
 
   function closeProvincesEditor() {
     if (customization === 11) exitProvincesManualAssignment("close");
-    if (customization === 12) exitAddStateMode();
+    if (customization === 12) exitAddProvinceMode();
   }
 
 }
diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js
index a361daa6..a3653aa2 100644
--- a/modules/ui/relief-editor.js
+++ b/modules/ui/relief-editor.js
@@ -30,6 +30,7 @@ function editReliefIcon() {
   document.getElementById("reliefEditorSet").addEventListener("change", changeIconsSet);
   reliefIconsDiv.querySelectorAll("svg").forEach(el => el.addEventListener("click", changeIcon));
 
+  document.getElementById("reliefEditStyle").addEventListener("click", () => editStyle("terrain"));
   document.getElementById("reliefCopy").addEventListener("click", copyIcon);
   document.getElementById("reliefMoveFront").addEventListener("click", () => elSelected.raise());
   document.getElementById("reliefMoveBack").addEventListener("click", () => elSelected.lower());
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
index 795e5799..ab5a5950 100644
--- a/modules/ui/religions-editor.js
+++ b/modules/ui/religions-editor.js
@@ -23,6 +23,7 @@ function editReligions() {
 
   // add listeners
   document.getElementById("religionsEditorRefresh").addEventListener("click", refreshReligionsEditor);
+  document.getElementById("religionsEditStyle").addEventListener("click", () => editStyle("relig"));
   document.getElementById("religionsLegend").addEventListener("click", toggleLegend);
   document.getElementById("religionsPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("religionsHeirarchy").addEventListener("click", showHierarchy);
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 5d9a3e60..f06cd9f9 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -34,6 +34,7 @@ function editRiver() {
   document.getElementById("riverScale").addEventListener("input", changeScale);
   document.getElementById("riverReset").addEventListener("click", resetTransformation);
 
+  document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
   document.getElementById("riverCopy").addEventListener("click", copyRiver);
   document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
   document.getElementById("riverLegend").addEventListener("click", editRiverLegend);
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 28c2cca2..4e02d31b 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -30,6 +30,8 @@ function editRoute(onClick) {
   document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
   document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
   document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
+
+  document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
   document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
   document.getElementById("routeLegend").addEventListener("click", editRouteLegend);
   document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode);
@@ -189,7 +191,12 @@ function editRoute(onClick) {
         },
         Cancel: function() {$(this).dialog("close");}
       }
-    });   
+    });
+  }
+
+  function editGroupStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("routes", g);
   }
 
   function toggleRouteSplitMode() {
diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js
index 73f0f45d..f37885f6 100644
--- a/modules/ui/states-editor.js
+++ b/modules/ui/states-editor.js
@@ -22,6 +22,7 @@ function editStates() {
 
   // add listeners
   document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
+  document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
   document.getElementById("statesLegend").addEventListener("click", toggleLegend);
   document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("statesChart").addEventListener("click", showStatesChart);
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index a4256988..155609af 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -135,11 +135,18 @@ function regenerateBurgs() {
 
 function regenerateStates() {
   Math.seedrandom(Math.floor(Math.random() * 1e9)); // new random seed
-  const burgs = pack.burgs.filter(b => b.i && !b.removed), states = pack.states.filter(s => s.i && !s.removed);
-  // burgs sorted by a bit randomized population:
+  const burgs = pack.burgs.filter(b => b.i && !b.removed);
+  if (!burgs.length) {
+    tip("No burgs to generate states. Please create burgs first", false, "error");
+    return;
+  }
+  if (burgs.length < +regionsInput.value) {
+    tip(`Not enought burgs to generate ${regionsInput.value} states. Will generate only ${burgs.length} states`, false, "warn");
+  }
+
+  // burg ids sorted by a bit randomized population:
   const sorted = burgs.map(b => [b.i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]);
   const capitalsTree = d3.quadtree();
-  let spacing = (graphWidth + graphHeight) / 2 / states.length; // min distance between capitals
 
   // turn all old capitals into towns
   burgs.filter(b => b.capital).forEach(b => {
@@ -147,30 +154,31 @@ function regenerateStates() {
     b.capital = false;
   });
 
-  states.forEach(s => {
-    let newCapital = 0, x = 0, y = 0;
+  const neutral = pack.states[0].name;
+  const count = Math.min(+regionsInput.value, burgs.length);
+  let spacing = (graphWidth + graphHeight) / 2 / count; // min distance between capitals
+  pack.states = d3.range(count).map(i => {
+    if (!i) return {i, name: neutral};
 
-    for (let i=0; i < sorted.length && !newCapital; i++) {
-      newCapital = burgs[sorted[i]];
-      x = newCapital.x, y = newCapital.y;
-      if (capitalsTree.find(x, y, spacing) !== undefined) {
-        spacing -= 1;
-        if (spacing < 1) spacing = 1;
-        newCapital = 0;
-      }
+    let capital = null, x = 0, y = 0;
+    for (let i=0; i < sorted.length; i++) {
+      capital = burgs[sorted[i]];
+      x = capital.x, y = capital.y;
+      if (capitalsTree.find(x, y, spacing) === undefined) break;
+      spacing = Math.max(spacing - 1, 1);
     }
 
     capitalsTree.add([x, y]);
-    newCapital.capital = true;
-    s.capital = newCapital.i;
-    s.center = newCapital.cell;
-    s.culture = newCapital.culture;
-    s.expansionism = rn(Math.random() * powerInput.value + 1, 1);
-    const basename = newCapital.name.length < 9 && newCapital.cell%5 === 0 ? newCapital.name : Names.getCulture(s.culture, 3, 6, "", 0);
-    s.name = Names.getState(basename, s.culture);
-    const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[newCapital.cell]);
-    s.type = nomadic ? "Nomadic" : pack.cultures[s.culture].type === "Nomadic" ? "Generic" : pack.cultures[s.culture].type;
-    moveBurgToGroup(newCapital.i, "cities");
+    capital.capital = true;
+    moveBurgToGroup(capital.i, "cities");
+
+    const culture = capital.culture;
+    const basename = capital.name.length < 9 && capital.cell%5 === 0 ? capital.name : Names.getCulture(culture, 3, 6, "", 0);
+    const name = Names.getState(basename, culture);
+    const nomadic = [1, 2, 3, 4].includes(pack.cells.biome[capital.cell]);
+    const type = nomadic ? "Nomadic" : pack.cultures[culture].type === "Nomadic" ? "Generic" : pack.cultures[culture].type;
+    const expansionism = rn(Math.random() * powerInput.value + 1, 1);
+    return {i, name, type, capital:capital.i, center:capital.cell, culture, expansionism};
   });
 
   unfog();
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 4f380a31..1c29a1f6 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -14,6 +14,7 @@ function editZones() {
   });
 
   // add listeners
+  document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
   document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
   document.getElementById("zonesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("zonesManually").addEventListener("click", enterZonesManualAssignent);
diff --git a/modules/utils.js b/modules/utils.js
index b5f90884..2b27deb6 100644
--- a/modules/utils.js
+++ b/modules/utils.js
@@ -43,12 +43,13 @@ function findGridCell(x, y) {
   return Math.floor(Math.min(y / grid.spacing, grid.cellsY -1)) * grid.cellsX + Math.floor(Math.min(x / grid.spacing, grid.cellsX-1));
 }
 
-// return array of cell indexes in radius  on a regular square grid
+// return array of cell indexes in radius on a regular square grid
 function findGridAll(x, y, radius) {
   const c = grid.cells.c;
-  let found = [findGridCell(x, y)];
   let r = Math.floor(radius / grid.spacing);
-  if (r > 0) found = found.concat(c[found[0]]); 
+  let found = [findGridCell(x, y)];
+  if (!r || radius === 1) return found;
+  if (r > 0) found = found.concat(c[found[0]]);
   if (r > 1) {
     let frontier = c[found[0]];
     while (r > 1) {
@@ -68,7 +69,6 @@ function findGridAll(x, y, radius) {
   }
   
   return found;
-
 }
 
 // return closest pack points quadtree datum