Broke out annotation and highlight styles 🎨

Setting a bg color for the highlight obscured the image underneath. CSS is clunky because I'm not using multiple classes per note/highlight. It's not clear whether that's even possible, and in any case it would make the manifest less readable to use the cascade and have more compact CSS

Author: triplingual

recipe/0045-css/manifest.json

@@ -57,7 +57,7 @@
 			  "body": {
 			  	"id": "{{ id.path }}/body/sr1",
 				"type": "SpecificResource",
-				"styleClass": "author1",
+				"styleClass": "author1note",
 				"source": {
 			  	  "id": "{{ id.path }}/body/text1",
 				  "type": "TextualBody",
@@ -69,7 +69,7 @@
               "target": {
 				"type": "SpecificResource",
                 "source": "{{ id.path }}/canvas/p1",
-                "styleClass": "author2",
+                "styleClass": "author2highlight",
                 "selector": {
                   "type": "FragmentSelector",
                   "value": "xywh=700,1250,1850,1150"
@@ -84,7 +84,7 @@
 			  "body": {
 			  	"id": "{{ id.path }}/body/sr2",
 				"type": "SpecificResource",
-				"styleClass": "author2",
+				"styleClass": "author2note",
 				"source": {
 			  	  "id": "{{ id.path }}/body/text2",
 				  "type": "TextualBody",
@@ -96,7 +96,7 @@
               "target": {
 				"type": "SpecificResource",
                 "source": "{{ id.path }}/canvas/p1",
-                "styleClass": "author2",
+                "styleClass": "author2highlight",
                 "selector": {
                   "type": "FragmentSelector",
                   "value": "xywh=170,160,2200,1000"

recipe/0045-css/style.css

@@ -1,11 +1,21 @@
-.author1 {
+.author1note {
 	color: #f00;
 	background-color: #fff;
 	border-color: #f00;
 }
 
-.author2 {
+.author1highlight {
+	color: #f00;
+	border-color: #f00;
+}
+
+.author2note {
 	color: #1a1;
 	background-color: #fff;
 	border-color: #0f0;
-}
+}
+
+.author1highlight {
+	color: #0f0;
+	border-color: #0f0;
+}