diff --git a/src/editor/MultiRangeInlineEditor.js b/src/editor/MultiRangeInlineEditor.js
index 00e10b375d8..f1396e77c31 100644
--- a/src/editor/MultiRangeInlineEditor.js
+++ b/src/editor/MultiRangeInlineEditor.js
@@ -46,7 +46,8 @@ define(function (require, exports, module) {
         Commands            = require("command/Commands"),
         Strings             = require("strings"),
         CommandManager      = require("command/CommandManager"),
-        PerfUtils           = require("utils/PerfUtils");
+        PerfUtils           = require("utils/PerfUtils"),
+        StringUtils         = require("utils/StringUtils");
 
     /**
      * Remove trailing "px" from a style size value.
@@ -74,9 +75,9 @@ define(function (require, exports, module) {
     SearchResultItem.prototype.$listItem = null;
     
     function _updateRangeLabel(listItem, range) {
-        var text = range.name + " " + range.textRange.document.file.name + " : " + (range.textRange.startLine + 1);
-        listItem.text(text);
-        listItem.attr("title", text);
+        var text = StringUtils.htmlEscape(range.name) + " <span class='related-file'>— " + StringUtils.htmlEscape(range.textRange.document.file.name) + " : " + (range.textRange.startLine + 1) + "</span>";
+        listItem.html(text);
+        listItem.attr("title", listItem.text());
     }
     
     /**
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 88c744880d3..99b256a4236 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -732,16 +732,20 @@ a, img {
         }
 
         li {
-            color: @inline-color-2;
+            color: @tc-emphasized-text;
             margin: 0;
             overflow: hidden;
             padding: 2px 0px 2px 15px;
             text-overflow: ellipsis;
             white-space: nowrap;
+            
+            .related-file {
+                color: @tc-input-placeholder-text;
+            }
         }
 
         .selected {
-            color: @inline-color-3;
+            color: @tc-light-weight-text;
             transition: color 0.1s ease-out .15s;
         }
     }
diff --git a/src/styles/brackets_colors.less b/src/styles/brackets_colors.less
index dcdac2c9228..acf3856b4e2 100644
--- a/src/styles/brackets_colors.less
+++ b/src/styles/brackets_colors.less
@@ -94,6 +94,7 @@
 @tc-selected-row:               #d0d5d5;
 @tc-hover-highlight:            rgba(255, 255, 255, 0.6);
 @tc-text:                       #454545;
+@tc-emphasized-text:            #333;
 @tc-text-shadow:                0 1px 0 #fff;
 @tc-call-to-action:             #288edf;
 @tc-call-to-action-border:      #0055ad;
diff --git a/test/spec/MultiRangeInlineEditor-test.js b/test/spec/MultiRangeInlineEditor-test.js
index 6397f5fd1f5..8828e474b24 100644
--- a/test/spec/MultiRangeInlineEditor-test.js
+++ b/test/spec/MultiRangeInlineEditor-test.js
@@ -104,8 +104,8 @@ define(function (require, exports, module) {
             inlineEditor.load(hostEditor);
             
             var $ruleListItems = $(inlineEditor.htmlContent).find("li");
-            expect($($ruleListItems.get(0)).text()).toBe("div " + inlineDocName + " : 1");
-            expect($($ruleListItems.get(1)).text()).toBe(".foo " + inlineDocName + " : 2");
+            expect($($ruleListItems.get(0)).text()).toBe("div — " + inlineDocName + " : 1");
+            expect($($ruleListItems.get(1)).text()).toBe(".foo — " + inlineDocName + " : 2");
         });
 
         it("should change selection to the next rule", function () {