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>";
                 }
             }
