Use ID instead of class for grid divs.

2 files changed, 12 insertions, 12 deletions

diff --git a/play.html b/play.html
index 8d6a0c7..4baa982 100644
--- a/play.html
+++ b/play.html
@@ -14,12 +14,12 @@
 <script defer src="ui.js"></script>
 <style>
 
-.grid_center { background-color: slategray; }
-.grid_role { background-color: gainsboro; }
+#grid_center { background-color: slategray; }
+#grid_role { background-color: gainsboro; }
 .card_info { background-color: silver; }
-.grid_top { background-color: silver; }
-.Tripolitania .grid_top.your_turn { background-color: salmon; }
-.United_States .grid_top.your_turn { background-color: skyblue; }
+#grid_top { background-color: silver; }
+.Tripolitania #grid_top.your_turn { background-color: salmon; }
+.United_States #grid_top.your_turn { background-color: skyblue; }
 .one .role_name { background-color: skyblue; }
 .two .role_name { background-color: salmon; }
 
@@ -51,8 +51,8 @@
 	border-bottom: 2px dotted gainsboro;
 }
 
-.Observer .grid_center > #hand_cards { display: none; }
-.Observer .grid_center > .hand_separator { display: none; }
+.Observer #grid_center > #hand_cards { display: none; }
+.Observer #grid_center > .hand_separator { display: none; }
 
 .card {
 	width: 250px;
@@ -294,9 +294,9 @@ body.United_States #popup div.us_always { display: block; }
 <form class="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
 </div>
 
-<div class="grid_window">
+<div id="grid_window">
 
-	<div class="grid_top">
+	<div id="grid_top">
 
 		<div class="menu">
 			<div class="menu_title"><img src="/images/cog.svg"></div>
@@ -326,7 +326,7 @@ body.United_States #popup div.us_always { display: block; }
 		<div id="exit_button" class="image_button hide" onclick="send_exit()"><img src="/images/exit-door.svg"></div>
 	</div>
 
-	<div class="grid_role">
+	<div id="grid_role">
 		<div class="role one">
 			<div class="role_name">
 				United States
@@ -348,7 +348,7 @@ body.United_States #popup div.us_always { display: block; }
 
 	<div id="log"></div>
 
-	<div class="grid_center">
+	<div id="grid_center">
 
 <div id="mapwrap" class="mapwrap fit">
 <div id="map" class="map">
diff --git a/ui.js b/ui.js
index 2c27695..92fb42f 100644
--- a/ui.js
+++ b/ui.js
@@ -551,6 +551,6 @@ function on_click_card(evt) {
 /* INITIALIZE CLIENT */
 
 build_map();
-scroll_with_middle_mouse(".grid_center");
+scroll_with_middle_mouse("#grid_center");
 init_map_zoom();
 init_client([ "United States", "Tripolitania" ]);