Add more documentation, add more handling if there is not nav bar, a=chris

diff --git a/css/game.css b/css/game.css
index 2aa15f1..e08ea74 100644
--- a/css/game.css
+++ b/css/game.css
@@ -14,11 +14,15 @@
  * @link https://www.frise.org/
  * @copyright 2022 - 2023
  */
+// make sure game tags we don't want to display, we don't display
 x-game,
 x-action
 {
     display: none;
 }
+/*
+ * General useful classes
+ */
 .float-right
 {
     float: right;
@@ -63,6 +67,18 @@ x-action
 {
     border: solid 2px black;
 }
+.outline
+{
+    color: white;
+    text-shadow:
+        -1px -1px 0 black,
+        1px -1px 0 black,
+        -1px 1px 0 black,
+        1px 1px 0 black;
+}
+/*
+ * Styles specific to the game content and nav areas
+ */
 #game-content
 {
     font-family: "Oswald", serif;
@@ -80,7 +96,7 @@ x-action
 }
 .rtl
 {
-    direction:rtl;
+    direction: rtl;
 }
 .rtl #game-content
 {
@@ -88,6 +104,13 @@ x-action
     right: 300px;
     transition: right .25s ease-in;
 }
+.no-nav #game-content
+{
+    left: 20px;
+    right: 20px;
+    transition: unset;
+    width: calc(100% - 40px);
+}
 #main-nav,
 #main-bar
 {
@@ -179,15 +202,17 @@ x-action
 {
     text-align: right;
 }
+.footer-space {
+    height: 1in;
+}
+/*
+ * Styles related to a Save/Load Game Location
+ */
 .filled
 {
     background-color: blue;
     color: white;
 }
-.float-right
-{
-    float: right;
-}
 table.save-table
 {
     width: 7in;
@@ -226,6 +251,10 @@ table.save-table td.save-name
 {
     visibility: hidden;
 }
+/*
+ * Styles specific to how we want HTML to appear in the game
+ * as well as the new x- tags that we use for presentation
+ */
 h1
 {
     margin: 0px;
@@ -325,6 +354,3 @@ x-speaker figure:first-of-type > img
     width: 70px;
     height: 70px;
 }
-.footer-space {
-    height: 1in;
-}
diff --git a/js/game.js b/js/game.js
index 994e429..a6be9e4 100644
--- a/js/game.js
+++ b/js/game.js
@@ -750,6 +750,13 @@ class Game
      * and with objects and locations parsed out of the current HTML file
      */
     constructor()
+    {
+        this.reset();
+    }
+    /**
+     * Used to reset the game to the condition at the start of a game
+     */
+    reset()
     {
         this.history = [];
         this.future_history = [];
@@ -844,6 +851,9 @@ class Game
         if (is_right_to_left) {
             html.classList.add("rtl");
         }
+        if (!this.hasNavBar) {
+            html.classList.add("no-nav");
+        }
         if(!is_mobile) {
             return;
         }
@@ -1157,7 +1167,7 @@ class Game
      * should show the page as if it had been scrolled to where the element
      * with id attribute fragment is. In the FRISE game a fragment has
      * the form #action_1_name;action_2_name;...;action_n_name;next_location_id
-     * Such a fragment when process by takeTurn will cause the Javascript in
+     * Such a fragment when processed by takeTurn will cause the Javascript in
      * x-action tags with id's action_1_name, action_2_name,...,action_n_name
      * to be invoked in turn. Then the main-character object is moved to
      * location next_location_id.  If the fragment, only consists of