Use new help icon in overlay + Less simplification

plugins/Morpheus/stylesheets/general/_typography.less

@@ -81,12 +81,6 @@ ul.widgetpreview-widgetlist, ul.widgetpreview-categorylist {
     background: none !important;
 }
 
-a#overlayTitle {
-    color: #4d4d4d !important;
-    .font-default(12px, 14px) !important;
-    margin-left: 15px !important;
-}
-
 a {
     color: @theme-color-link;
 }

plugins/Overlay/stylesheets/overlay.css

@@ -20,15 +20,12 @@ body #logo {
 }
 
 a#overlayTitle {
-    font-size: 15px;
-    font-weight: normal;
-    color: #7e7363;
+    font-size: 12px;
     text-decoration: none;
-    vertical-align: text-bottom;
+    color: #4d4d4d;
+    margin-left: 15px;
 }
-
-#overlayTitle img {
-    vertical-align: text-bottom;
+a#overlayTitle .icon-help {
     margin-left: 4px;
 }
 
@@ -155,4 +152,4 @@ body .ui-tooltip.overlayTooltip {
 
 .overlay-sidebar-container {
     width: 220px;
-}
\ No newline at end of file
+}

plugins/Overlay/templates/index.twig

@@ -8,9 +8,9 @@
 
 {% block content %}
     <div class="overlay-sidebar-container">
-        <a id="overlayTitle" href="http://piwik.org/docs/page-overlay/" rel="noreferrer"  target="_blank">
+        <a id="overlayTitle" href="http://piwik.org/docs/page-overlay/" rel="noreferrer" target="_blank">
             {{ 'Overlay_Overlay'|translate }}
-            <img src="plugins/Morpheus/images/help.png" alt="Documentation"/>
+            <span class="icon-help"></span>
         </a>
 
         <div id="overlayDateRangeSelection">