[css-ruby] Use correct color scheme in example

Author: frivoal

css-ruby-1/Overview.bs

@@ -795,17 +795,17 @@ Inline-axis Interlinear Layout</h4>
 		[=base boxes=] and [=annotation boxes=] are assumed to have ''ruby-align: center'',
 		while <!--[=base containers=] and --> [=annotation containers=] are assumed to have ''ruby-align: space-between''.
 
-		Red brackets (<span style=color:red>[ ]</span>) represent [=base boxes=],
-		blue brackets (<span style=color:blue>[ ]</span>) represent [=annotation boxes=],
+		Blue brackets (<span style=color:blue>[ ]</span>) represent [=base boxes=],
+		red brackets (<span style=color:red>[ ]</span>) represent [=annotation boxes=],
 		and gray bars (<span style=color:gray>|</span>) represent the limits of [=ruby columns=].
 		[=Ruby containers=], [=base containers=], and [=annotation containers=] are omitted.
 
 		<dl>
 			<dt id=ex-separate>Separate / non spanning:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>  a1  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>  a2  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>annotation-3<span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>base 1<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>base 2<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   base 3   <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>  a2  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>annotation-3<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>   base 3   <span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				Boxes within each [=column=] are sized to match the widest box of that [=column=].
@@ -815,8 +815,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-short-span>Spanning (short):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>  a1  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>   short span  <span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>base 1<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>base 2<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>base 3<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   short span  <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 3<span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				When a [=spanning annotation=] is shorter than the spanned [=bases=],
@@ -828,8 +828,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-long-span>Spanning (long):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>  a1  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>spanning annotation<span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>base 1<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> base 2 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> base 3 <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>spanning annotation<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 2 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				When the [=spanning annotation=] is longer than the spanned [=base boxes=],
@@ -838,8 +838,8 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-short-merge>Merged (short):
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>merged        annotation<span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>base 1<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>base 2<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>base 3<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>merged        annotation<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 2<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>base 3<span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				A [=merged annotation=] behaves similarly to a [=spanning=] one,
@@ -860,14 +860,14 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-multi-level-span>Several levels, with spanning annotation:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>   a1   <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> annotation-2 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>   a3   <span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>long annotation spanning all content<span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span> base 1 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>    base 2    <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> base 3 <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>   a1   <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> annotation-2 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   a3   <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>long annotation spanning all content<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span> base 1 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>    base 2    <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span>  xx  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>annotation spanning bases<span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span>  a1  <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> annotation-2 <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>   a3   <span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span>base 1<span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>    base 2    <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> base 3 <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>  xx  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>annotation spanning bases<span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span>  a1  <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span> annotation-2 <span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span>   a3   <span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span>base 1<span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span>    base 2    <span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span> base 3 <span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				In these two examples with multiple [=levels=],
@@ -880,10 +880,10 @@ Inline-axis Interlinear Layout</h4>
 			<dt id=ex-multi-level-mutli-span>Several levels, with multiple spanning annotations:
 			<dd>
 				<pre class=highlight>
-				<span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span>  xx  <span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3>  </span><span style=color:green>annotation spanning bases</span><span style=background:orange;opacity:0.3>  </span><span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span>  a1  <span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>annotation-2<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>  a3  <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:blue>[</span><span style=color:#ae4a00>lengthy annotation spanning base content</span><span style=color:blue>]</span><span style=color:gray>|</span>
-				<span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span>base 1<span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>   base 2   <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>base 3<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span>  xx  <span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3>  </span><span style=color:green>annotation spanning bases</span><span style=background:orange;opacity:0.3>  </span><span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span>  a1  <span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>annotation-2<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span><span style=color:red>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>  a3  <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:red>[</span><span style=color:#ae4a00>lengthy annotation spanning base content</span><span style=color:red>]</span><span style=color:gray>|</span>
+				<span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span>base 1<span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>   base 2   <span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span><span style=color:blue>[</span><span style=background:orange;opacity:0.3> </span><span style=background:green;opacity:0.3> </span>base 3<span style=background:green;opacity:0.3> </span><span style=background:orange;opacity:0.3> </span><span style=color:blue>]</span><span style=color:gray>|</span>
 				</pre>
 
 				When there are multiple [=spanning annotations=],