.readmore style changes

* for WCAG - use something other than color to show as link (it's now bold)
* instead of link underline, use border-bottom as we do elsewhere
* since the right arrow isn't really content, use :before in hopes that screen readers skip it
* improve margin (2px) between text and right arrow and between arrow and 'read more'
* use same text color as .lesser-text -- we're making it bold but we don't want it too dark that it stands out too much
* note the added <span> (schoolview.js) -- we want the border-bottom on just 'continue reading', not the right arrow content :before it.

css/style.css

@@ -149,6 +149,24 @@ a:hover .fa-stack-1x {
 }
 .expandable-text .body { display:none; }
 
+a.readmore {
+	font-weight: bold;
+	color: inherit;
+	text-decoration: none;
+}
+.readmore:before {
+	content: " \2192 "; /* → is → is \2192 */
+	margin-left: 2px;
+}
+.readmore span {
+    border-bottom: 1px dotted;
+    margin-left: 2px;
+    color: #717171;
+}
+.readmore:hover span {
+    border-bottom-style: solid;
+}
+
 .school-description .field-label {
 	font-size: 25px;
 	color: #d72d6c;

js/views/schoolview.js

@@ -63,7 +63,7 @@ app = app || {};
 
     var result;
     if (breakpoint < text.length) { // build a teaser and full text.
-      var continueReading = '<a href="#" class="readmore"> &rarr; Continue Reading </a>';
+      var continueReading = '<a href="#" class="readmore"><span>Continue Reading</span></a>';
 
       // regex looking for short_text worth of characters + whatever it takes to get to a whitespace
       // (we only want to break on whitespace, so we don't cut words in half)