diff --git a/app/assets/javascripts/Jit/test.js b/app/assets/javascripts/Jit/test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/assets/javascripts/Jit/topicCard.js b/app/assets/javascripts/Jit/topicCard.js
index 64557892..82e4c6c4 100644
--- a/app/assets/javascripts/Jit/topicCard.js
+++ b/app/assets/javascripts/Jit/topicCard.js
@@ -45,6 +45,7 @@ function buildCardWithHogan(node) {
     nodeValues.synapse_count = node.getData("synapseCount");
     nodeValues.id = node.id;
     nodeValues.metacode = node.getData("metacode");
+    nodeValues.metacode_class = 'mbg' + node.getData("metacode").replace(/\s/g,'');
     nodeValues.imgsrc = imgArray[node.getData("metacode")].src;
     nodeValues.name = node.name;
     nodeValues.userid = node.getData("userid");
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 14dea4c2..bd3932c7 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -147,7 +147,8 @@ function updateMetacode(node, metacode) {
         url: "/topics/" + node.id,
         data: mdata,
         success: function (data) {
-            $('.CardOnGraph').find('.metacodeTitle').text(metacode);
+            $('.CardOnGraph').find('.metacodeTitle').text(metacode)
+                .attr('class', 'metacodeTitle mbg' + metacode.replace(/\s/g,''));
             $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacode].src + ')');
             node.setData("metacode", metacode);
             Mconsole.plot();
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index b099ea06..dcb9b4cc 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1993,6 +1993,10 @@ div.mapInfoStat {
 .blackBox td {
     padding: 10px;
 }
+.blackBox td.iconURL {
+     max-width: 415px;
+     word-wrap: break-word; 
+}
 .blackBox .field {
     margin: 15px 0 5px;
 }
diff --git a/app/assets/stylesheets/metacode_backgrounds.css b/app/assets/stylesheets/metacode_backgrounds.css
new file mode 100644
index 00000000..adf69d4e
--- /dev/null
+++ b/app/assets/stylesheets/metacode_backgrounds.css
@@ -0,0 +1,120 @@
+.mbgAction {
+    background-color: #bd6c85 !important;
+}
+.mbgActivity {
+    background-color: #6ebf65 !important;    
+}
+.mbgArgument {
+    background-color: #7FAEFD !important;    
+}
+.mbgBizarre {
+    background-color: #bdb25e !important;    
+}
+.mbgCatalyst {
+    background-color: #EF8964 !important;    
+}
+.mbgClosed {
+    background-color: #ABB49F !important;    
+}
+.mbgCon {
+    background-color: #CF7C74 !important;    
+}
+.mbgDecision {
+    background-color: #cca866 !important;    
+}
+.mbgExample {
+    background-color: #598559 !important;    
+}
+.mbgExperience {
+    background-color: #BE995F !important;    
+}
+.mbgForesight {
+    background-color: #b0b0b0 !important;    
+}
+.mbgFutureDev {
+    background-color: #25A17F !important;    
+}
+.mbgGoodPractice {
+    background-color: #BD9E86 !important;    
+}
+.mbgGroup {
+    background-color: #7076BC !important;    
+}
+.mbgIdea {
+    background-color: #c4bc5e !important;    
+}
+.mbgImplication {
+    background-color: #83DECA !important;    
+}
+.mbgInsight {
+    background-color: #B074AD !important;    
+}
+.mbgIntention {
+    background-color: #baeaff !important;    
+}
+.mbgKnowledge {
+    background-color: #60acf7 !important;    
+}
+.mbgList {
+    background-color: #B7A499 !important;    
+}
+.mbgLocation {
+    background-color: #abd9a7 !important;    
+}
+.mbgMovieMap {
+    background-color: #a5a0de !important;    
+}
+.mbgNote {
+    background-color: #a389a1 !important;    
+}
+.mbgOpenIssue {
+    background-color: #9bbf71 !important;    
+}
+.mbgOpinion {
+    background-color: #54a19d !important;    
+}
+.mbgOpportunity {
+    background-color: #889F64 !important;    
+}
+.mbgPerson {
+    background-color: #de925f !important;    
+}
+.mbgPlatform {
+    background-color: #21C8FE !important;    
+}
+.mbgPro {
+    background-color: #89b879 !important;    
+}
+.mbgProblem {
+    background-color: #99cfc4 !important;    
+}
+.mbgQuestion {
+    background-color: #709899 !important;    
+}
+.mbgReference {
+    background-color: #A7A7A7 !important;    
+}
+.mbgRequirement {
+    background-color: #d2a7d4 !important;    
+}
+.mbgResearch {
+    background-color: #CD8E89 !important;    
+}
+.mbgResource {
+    background-color: #c98c63 !important;    
+}
+.mbgRole {
+    background-color: #a8595d !important;    
+}
+.mbgTask {
+    background-color: #2f89ba !important;    
+}
+.mbgTool {
+    background-color: #828282 !important;    
+}
+.mbgTrajectory {
+    background-color: #b3953d !important;    
+}
+.mbgWildcard {
+    background-color: #73c7de !important;    
+}
\ No newline at end of file
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index 5040089f..fc6b241f 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -127,7 +127,7 @@
         </span>
         <div class="links">
             <div class="linkItem icon">
-                <div class="metacodeTitle">{{metacode}}</div>
+                <div class="metacodeTitle {{metacode_class}}">{{metacode}}</div>
                 <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
             </div>
             <div class="linkItem contributor hoverForTip">
diff --git a/app/views/maps/_fork.html.erb b/app/views/maps/_fork.html.erb
index 065426e7..2ec5fa82 100644
--- a/app/views/maps/_fork.html.erb
+++ b/app/views/maps/_fork.html.erb
@@ -58,7 +58,7 @@
   <p class="permText">*new topics and synapses take on the same permission as the map they are created on</p>
   
   <div class="buttonWrapper">
-    <button class="button" onclick="cancelMapCreate('fork_map'); return false;">Cancel</button>
+    <button class="button" onclick="closeLightbox(); return false;">Cancel</button>
     <%= form.submit "Create!", class: "add" %>
   </div>
   
diff --git a/app/views/maps/_new.html.erb b/app/views/maps/_new.html.erb
index db89cbb5..10b1c1ce 100644
--- a/app/views/maps/_new.html.erb
+++ b/app/views/maps/_new.html.erb
@@ -53,7 +53,7 @@
   <p class="permText">*new topics and synapses take on the same permission as the map they are created on</p>
   
   <div class="buttonWrapper">
-    <button class="button" onclick="cancelMapCreate('new_map'); return false;">Cancel</button>
+    <button class="button" onclick="closeLightbox(); return false;">Cancel</button>
     <%= form.submit "Create!", class: "add" %>
   </div>
   
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 6fd4daf9..58a3b3a8 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -104,13 +104,13 @@ if (json.length > 0) {
     
 <% if authenticated? && (@map.permission == "commons" || @map.user == user) %>
 // this is for the heroku staging environment
-window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
+//window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
     
 // this is for metamaps.cc
 //window.realtime.socket = io.connect('http://metamaps.cc:5001'); 
     
 // this is for localhost development    
-//window.realtime.socket = io.connect('http://localhost:5001'); 
+window.realtime.socket = io.connect('http://localhost:5001'); 
 
 window.realtime.socket.on('connect', function () {
     console.log('socket connected');
diff --git a/app/views/metacodes/index.html.erb b/app/views/metacodes/index.html.erb
index dea08a6f..323af079 100644
--- a/app/views/metacodes/index.html.erb
+++ b/app/views/metacodes/index.html.erb
@@ -16,7 +16,7 @@
 <% @metacodes.each do |metacode| %>
   <tr>
     <td><%= metacode.name %></td>
-    <td><%= metacode.icon %></td>
+    <td class="iconURL"><%= metacode.icon %></td>
     <td><img width='40' src='<%= metacode.icon %>' /></td>
     <td><%= link_to 'Edit', edit_metacode_path(metacode) %></td>
   </tr>