Added load and save. Save works, load doesn't (yet).

resources/public/css/phone.css

@@ -37,7 +37,7 @@ body {
 #nav:hover #nav-menu {
 	display: inline;
 }
-	
+
 #nav-icon {
   padding: 0.25em;
 }
@@ -52,7 +52,7 @@ body {
   display: inline;
 }
 
-#nav ul li a { 
+#nav ul li a {
   color: white;
   text-decoration: none;
   font-weight: bold;
@@ -68,6 +68,12 @@ li.nav-item a:active { background: gray; color: white; }
     color: white;
 }
 
+/* there isn't enough room on a phone display for optional elements, and
+  load/save isn't going to work on a phone anyway */
+.nav-optional {
+  display: none;
+}
+
 .widget {
   margin: 0;
   padding: 0.25em 1em;

resources/public/css/standard.css

@@ -6,7 +6,7 @@ body {
 /* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
 #main-container{
   clear: both;
-  width:100%;
+/*  width:100%; */
 }
 
 /* footer of the document */
@@ -54,7 +54,7 @@ body {
   display: inline;
 }
 
-#nav ul li a { 
+#nav ul li a {
   color: white;
   text-decoration: none;
   font-weight: bold;

resources/public/css/tablet.css

@@ -53,7 +53,7 @@ body {
 #nav:hover #nav-menu {
 	display: inline;
 }
-	
+
 #nav-icon {
   padding: 0.25em;
 }
@@ -68,7 +68,7 @@ body {
   display: inline;
 }
 
-#nav ul li a { 
+#nav ul li a {
   color: white;
   text-decoration: none;
   font-weight: bold;
@@ -84,6 +84,12 @@ li.nav-item a:active { background: gray; color: white; }
     color: white;
 }
 
+/* there isn't enough room on a tablet display for optional elements, and
+  load/save isn't going to work on a tablet anyway */
+.nav-optional {
+  display: none;
+}
+
 .widget {
   margin: 0;
   padding: 0.25em 1em;

resources/templates/base.html

@@ -23,9 +23,11 @@
       <img id="nav-icon" src="{{servlet-context}}/img/threelines.png" alt="Menu"/>
       <ul id="nav-menu" class="nav">
         <li class="{{home-selected}}"><a href="{{servlet-context}}/">Home</a></li>
+        <li class="{{world-selected}}"><a href="{{servlet-context}}/world">World</a></li>
         <li class="{{params-selected}}"><a href="{{servlet-context}}/params">Parameters</a></li>
         <li class="{{rules-selected}}"><a href="{{servlet-context}}/rules">Rules</a></li>
-        <li class="{{world-selected}}"><a href="{{servlet-context}}/world">World</a></li>
+        <li class="{{save-selected}} nav-optional"><a href="{{servlet-context}}/saved-map.mwm">Save</a></li>
+        <li class="{{load-selected}} nav-optional"><a href="{{servlet-context}}/load">Load</a></li>
         <li class="{{about-selected}}"><a href="{{servlet-context}}/about">About</a></li>
         <li class="{{docs-selected}}"><a href="{{servlet-context}}/docs">Documentation</a></li>
       </ul>
@@ -37,12 +39,12 @@
 
     <div id="main-container" class="container">
 	  {% if message %}
-		<div id="announcement">
+		<div id="message">
 			<p class="message">{{message}}</p>
 		</div>
 	  {% endif %}
 	  {% if error %}
-		<div id="announcement">
+		<div id="error">
 			<p class="error">{{error}}</p>
 		</div>
 	  {% endif %}