Index: trunk/webapps/einotebook/index.html
===================================================================
--- trunk/webapps/einotebook/index.html	(revision 393)
+++ trunk/webapps/einotebook/index.html	(revision 401)
@@ -62,5 +62,5 @@
       </tr>
 -->
-      <tr style="height: 120px">
+      <tr style="height: 80px">
         <td colspan='3' class="tabMenu">
         
Index: trunk/webapps/einotebook/maps/index.html
===================================================================
--- trunk/webapps/einotebook/maps/index.html	(revision 386)
+++ trunk/webapps/einotebook/maps/index.html	(revision 401)
@@ -31,6 +31,6 @@
 	
 	    <!-- The Map -->
-	    <div id="googleMapContent" style="display:none;">
-<iframe src="https://www.google.com/maps/d/embed?mid=11RLV4iMbnXW7HlZCATvTa9z1Y01gngzR&zoom=9" width="640" height="480"></iframe>
+	    <div id="googleMapContent">
+<iframe src="https://www.google.com/maps/d/embed?mid=11RLV4iMbnXW7HlZCATvTa9z1Y01gngzR&z=10" width="640" height="480"></iframe>
         <div>
 <!--
@@ -38,9 +38,7 @@
 	    	scrolling=no src="https://drive.google.com/open?id=11RLV4iMbnXW7HlZCATvTa9z1Y01gngzR&usp=sharing" marginheight=0 marginwidth=0></iframe>  -->
 
-        <div id="atmsMapContent" style="display:inline;"><iframe frameborder=0 width=740 height=600 
+        <div id="atmsMapContent"><iframe frameborder=0 width="740" height="600" 
         	scrolling=no src="../../cptms/index.html" marginheight=0 marginwidth=0></iframe></div>
-<!--        <div id="atmsMapContent" style="display:inline;"><iframe frameborder=0 width=740 height=600 
-        	scrolling=no src="../../cptms.html" marginheight=0 marginwidth=0></iframe></div>
--->
+
     </center>
   </body>
Index: trunk/webapps/einotebook/script/script.js
===================================================================
--- trunk/webapps/einotebook/script/script.js	(revision 359)
+++ trunk/webapps/einotebook/script/script.js	(revision 401)
@@ -51,5 +51,5 @@
 			
 			// IF there was previously a current event THEN
-			if (highlightLatestEvent.oldEvent.id != Event.invalidID)
+			if (highlightLatestEvent.oldEvent.id != Event.invalidID && currentEvent.id != 0)
 			{
 				highlightLatestEvent.oldEvent.unhighlight();
@@ -64,4 +64,22 @@
 }
 
+
+/** Change color of text of expired events so they appear disabled.
+  * @param events The list of events
+  * @param currEvent The current event
+  */
+function greyOldEvents(events, currEvent)
+{
+	  // Examine all events
+   for (var evtNum = 0; evtNum < events.length; evtNum++)
+   {
+		// Change color of those before current time and Event
+      if (events[evtNum].time.compareTo(currEvent.time) < 0 && currEvent.id != events[evtNum].id) 
+      {
+			events[evtNum].unhighlight();
+      }
+	}
+}
+
 /**
  * Loads the the script tab for the given document.
@@ -83,6 +101,6 @@
 		// add the Event's html
 		html += Script.events[i].html();
-        //console.log(Script.events[i].html());
-	}
+	}
+       
 	
 	// display events in iframe
@@ -97,4 +115,5 @@
 	Script.events.win.scrollTo(0, readCookie('scriptScrollY'));
 	
+	greyOldEvents(Script.events, Script.events.getLastExecutedEvent(readCookie("time")));
 	highlightLatestEvent();
 
Index: trunk/webapps/einotebook/notebook.css
===================================================================
--- trunk/webapps/einotebook/notebook.css	(revision 399)
+++ trunk/webapps/einotebook/notebook.css	(revision 401)
@@ -7,5 +7,5 @@
 body
 {
-    margin:0px;
+   margin:0px;
    font-family: Verdana, sans-serif;
    background-color:#FFFFFF;
@@ -86,4 +86,7 @@
    margin-bottom: 2px;
    padding-right: 16px;
+   /* Fix #152 attempt 
+   resize: both;
+   overflow: auto; */
    /*width: 30%;*/
     /* width: 30%;   */
@@ -170,5 +173,5 @@
    border: 1px solid #66CC66; 
    border-top: 0px; 
-   height:90%;
+   height:100%;
    padding:0px;
    margin:0px;
Index: trunk/webapps/cptms/css/styles.css
===================================================================
--- trunk/webapps/cptms/css/styles.css	(revision 400)
+++ trunk/webapps/cptms/css/styles.css	(revision 401)
@@ -39,6 +39,6 @@
         }
         #har-msg-display {
-          margin-right: 100px;
-          margin-left: 100px;
+          margin-right: 50%; /*  100px; */
+          margin-left: 25%;  /*  100px; */
         }
         #har-msgcontent1 {
Index: trunk/webapps/cmsmonitor/index.html
===================================================================
--- trunk/webapps/cmsmonitor/index.html	(revision 386)
+++ trunk/webapps/cmsmonitor/index.html	(revision 401)
@@ -4,6 +4,10 @@
 <!-- Launch with  python -m CGIHTTPServer 80  -->
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-    <title>CMS Monitor v</title> 
+    <title>CMS Monitor v0.2</title> 
 <style>
+@font-face {
+  font-family: Scoreboard;
+  src: url('../cptms/js/scoreboard.ttf');
+}
 * {
   box-sizing: border-box;
@@ -27,5 +31,28 @@
   width: 25%;
 }
-
+/* styling for cms monitor */
+#msgs{
+  padding: 15px 10% 15px 10%;
+}
+#cms_info{
+  font-size: 20px;
+  font-family: Arial;
+  font-weight:lighter;
+  color: white;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+.cms_content{
+  font-size: 34px;
+  font-family: Scoreboard;
+  font-weight: 550;
+  padding: 0px 20% 20px 20%;
+}
+.divider {
+  font-family: Scoreboard;
+  font-weight: 550;
+  padding-left: 5%;
+  padding-right: 5%;
+}
 /* Clear floats after the columns */
 .row:after {
@@ -36,5 +63,5 @@
 </style>
 </head>
-<body onLoad="showRevision();"> 
+<body>
 <div class="row">
   <div class="column left" >
@@ -52,8 +79,10 @@
 </div>
 
-    <script  src="../common/js/displayutils.js"></script>
-    <script  src="../common/js/revision.js"></script>
+
     <script  src="../common/js/fileutils.js"></script>
+    <script  src="../common/js/revision_number.dat"></script>
+    <script  src="../common/js/displayutils.js"></script> 
    <script>
+    showRevision();
     var cmsLocations = {};
     // Load the CMS locations from the geojson file
@@ -88,16 +117,21 @@
                 var cmsLoc = cmsLocations[item.cms.index];
                 // Build the message display
-                var current = (item.cms.message.phase1.Line1.toUpperCase() + ":" +
-                    item.cms.message.phase1.Line2.toUpperCase() + ":" +
-                    item.cms.message.phase1.Line3.toUpperCase() + ":" +
-                    item.cms.message.phase2.Line1.toUpperCase() +  ":" +
-                    item.cms.message.phase2.Line2.toUpperCase() + ":" +
-                    item.cms.message.phase2.Line3.toUpperCase())
+                // divide the display message into 2 phases 
+                var phase1 = item.cms.message.phase1.Line1.toUpperCase() + "<br>" +
+                    item.cms.message.phase1.Line2.toUpperCase() + "<br>" +
+                    item.cms.message.phase1.Line3.toUpperCase() + "<br>";
+                var phase2 = item.cms.message.phase2.Line1.toUpperCase() +  "<br>" +
+                    item.cms.message.phase2.Line2.toUpperCase() + "<br>" +
+                    item.cms.message.phase2.Line3.toUpperCase();
+      
                 // If the message isn't blank, append it to the list
-                if (current != ":::::")
+                // adding a seperate dotted line between phase1 and phase2
+                if (phase1 != "<br><br><br>" || phase2 != "<br><br>")
                 {
-                    display.innerHTML += "<br>" + item.cms.index + ": " + 
-                        cmsLoc.properties.location + " " + cmsLoc.properties.street;
-                    display.innerHTML += "<br>" + current + "<br>";
+                    display.innerHTML += "<div id=\"cms_info\">" + item.cms.index + ": " + 
+                        cmsLoc.properties.location + " " + cmsLoc.properties.street + "</div>";
+                    display.innerHTML += "<div class=\"cms_content\">" + phase1 + "</div>" +
+                      "<div class=\"divider\"> -----------------------------------------------</div>" +
+                      "<div class=\"cms_content\">" + phase2 + "</div>";
                 }
             }