style: Ass <span class="snon-speech"> and make <span class="thought"> red in preparation for its removal

I went a bit overboard with literal thought quotes and it didn't even fit
all my use cases so I decided to replace it with an alternative that better
fits what I want to use it for.

TODO: Change the solid triangle on <span class="speech"> for the open ones
currently used for <span class="non-speech"> and find a new symbol to use
for non-speech.

html_resources/style.css

@@ -112,7 +112,7 @@ span.speech::after {
   bottom: 0.15em;
 }
 
-span.thought {
+span.non-speech {
   color: #303030;
 }
 span.thought::before {
@@ -130,6 +130,26 @@ span.thought::after {
   bottom: 0.15em;
 }
 
+/*TODO: Remove and replace with speech/non-speech where appropriate*/
+span.thought {
+  color: red;
+  /*color: #303030;*/
+}
+span.thought::before {
+  color: red;
+  content: "\25b9";
+  font-size: 0.75em;
+  position: relative;
+  bottom: 0.15em;
+}
+span.thought::after {
+  color: red;
+  content: "\25c3";
+  font-size: 0.75em;
+  position: relative;
+  bottom: 0.15em;
+}
+
 button.back {
 	font-size: 2.8em;
 	width: 1.3em;