region bubbles

1 files changed, 23 insertions, 0 deletions

diff --git a/play.html b/play.html
index 81dd669..5277612 100644
--- a/play.html
+++ b/play.html
@@ -63,6 +63,21 @@ div.state:hover {
 	background-color: #fff8;
 }
 
+div.region {
+	position: absolute;
+	box-sizing: border-box;
+	background-clip: padding-box;
+	background-color: #0008;
+	border-radius: 50%;
+	border: 5px solid transparent;
+	width: 65px;
+	height: 65px;
+}
+
+div.region:hover {
+	background-color: #fff8;
+}
+
 .piece {
 	position: absolute;
 	background-repeat: no-repeat;
@@ -590,6 +605,7 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<!-- END SVG -->
 		</svg>
 
+
 		<div id="VT" class="state" style="top:125px;left:785px;"></div>
 		<div id="NH" class="state" style="top:63px;left:857px;"></div>
 		<div id="MA" class="state" style="top:42px;left:982px;"></div>
@@ -599,6 +615,13 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<div id="DE" class="state" style="top:312px;left:966px;"></div>
 		<div id="MD" class="state" style="top:372px;left:920px;"></div>
 
+		<div id="West" class="region" style="top:273px;left:99px;width:55px;height:55px;"></div>
+		<div id="Plains" class="region" style="top:203px;left:374px;"></div>
+		<div id="South" class="region" style="top:473px;left:541px;"></div>
+		<div id="MidWest" class="region" style="top:266px;left:579px;"></div>
+		<div id="AtlanticAppalachia" class="region" style="top:333px;left:764px;"></div>
+		<div id="NorthEast" class="region" style="top:158px;left:881px;"></div>
+
 		<div id="turn" class="piece turn" style="left:800px;top:765px;"></div>
 		<div class="piece congress" style="left:500px;top:765px;"></div>
 		<div class="piece red1" style="left:350px;top:100px;"></div>