diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
index d3fc4edd20..d72db57491 100644
--- a/assets/css/browser-solidity.css
+++ b/assets/css/browser-solidity.css
@@ -297,6 +297,13 @@ input[type="file"] {
     opacity: 0.7
 }
 
+.highlightreferenceline {
+    position:absolute;
+    z-index:20;
+    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
+    opacity: 0.7
+}
+
 .highlightcode {
     position:absolute;
     z-index:20;
diff --git a/src/app.js b/src/app.js
index e4791e4501..15022e8d22 100644
--- a/src/app.js
+++ b/src/app.js
@@ -397,7 +397,9 @@ function run () {
     highlight: (position, node) => {
       if (compiler.lastCompilationResult && compiler.lastCompilationResult.source && compiler.lastCompilationResult.source.target === config.get('currentFile')) {
         position = offsetToLineColumnConverter.offsetToLineColumn(position, position.file, compiler.lastCompilationResult)
+        var css = 'highlightreference'
         if (node.children && node.children.length) {
+          css = 'highlightreferenceline'
           position = {
             start: {
               line: position.start.line,
@@ -409,7 +411,7 @@ function run () {
             }
           }
         }
-        return editor.addMarker(position, config.get('currentFile'), 'highlightreference')
+        return editor.addMarker(position, config.get('currentFile'), css)
       }
       return null
     },