Enhance the ‘how to do placeholders’ hint

This commit makes the ‘how to do placeholders’ box part of the tour,
with the same blue background.

It also adds some Javascript enhancement so that:
- it responds to the contents of the message template
- has a ‘show me’ link which inserts ‘Dear ((name))’ into the template
  contents textbox

We’ve found that this has helped people understnad what placeholders
are, and how to do them.

app/assets/stylesheets/components/banner.scss

@@ -80,6 +80,11 @@
     list-style-type: decimal;
   }
 
+  p {
+    @include core-19;
+    margin: 0 0 10px 0;
+  }
+
 }
 
 .banner-tip-with-tick {

app/assets/stylesheets/components/textbox.scss

@@ -1,6 +1,6 @@
 .textbox-highlight {
 
-  $tag-background: rgba($light-blue, 0.7);
+  $tag-background: rgba($light-blue, 0.6);
 
   &-wrapper {
     position: relative;