Index: /trunk/webapps/cms_monitor.html
===================================================================
--- /trunk/webapps/cms_monitor.html	(revision 328)
+++ /trunk/webapps/cms_monitor.html	(revision 331)
@@ -4,17 +4,53 @@
 <!-- Launch with  python -m CGIHTTPServer 80  -->
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-    <title>CMS Monitor v0.1</title> 
+    <title>CMS Monitor v0.2</title> 
 <style>
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        background-color: darkgray;
-      }
+* {
+  box-sizing: border-box;
+}
+body {
+   background-color: #000033;
+}
+/* Create three unequal columns that float next to each other */
+.column {
+  float: left;
+  padding: 10px;
+  background-color:black; 
+  color:goldenrod
+}
+
+.left {
+  width: 50%;
+}
+
+.middle, .right {
+  width: 25%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
 </style>
-  </head>
+</head>
 <body>
-Active CMS Messages
-<div id="msgs"></div>
+<div class="row">
+  <div class="column left" >
+    <h2>Active CMS Messages</h2>
+    <p id="msgs"></p>
+  </div>
+  <div class="column middle" >
+    <h2>Active HAR Messages</h2>
+    <p>Not implemented yet.</p>
+  </div>
+  <div class="column right" >
+    <h2>Active Lane Closures</h2>
+    <p>Not implemented yet.</p>
+  </div>
+</div>
+
+
     <script  src="js/common.js"></script>
    <script>
@@ -51,16 +87,16 @@
                 var cmsLoc = cmsLocations[item.cms.index];
                 // Build the message display
-                var current = (item.cms.message.phase1.Line1 + ":" +
-                    item.cms.message.phase1.Line2 + ":" +
-                    item.cms.message.phase1.Line3 + ":" +
-                    item.cms.message.phase2.Line1 +  ":" +
-                    item.cms.message.phase2.Line2 + ":" +
-                    item.cms.message.phase2.Line3)
-                // If the message isn't blank, append it to the div
+                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())
+                // If the message isn't blank, append it to the list
                 if (current != ":::::")
                 {
                     display.innerHTML += "<br>" + item.cms.index + ": " + 
                         cmsLoc.properties.location + " " + cmsLoc.properties.street;
-                    display.innerHTML += "<br>" + current;
+                    display.innerHTML += "<br>" + current + "<br>";
                 }
             }
