--- a/ttml10-sdp-us/Overview.html	Wed Nov 28 22:49:22 2012 -0700
+++ b/ttml10-sdp-us/Overview.html	Wed Nov 28 23:49:46 2012 -0700
@@ -833,6 +833,14 @@
 <div><div class="numbered constraint" title="R0012">The alpha component of backgroundColor for a region <em class="rfc2119" title="must">must</em> be zero (0).</div></div>
 <div><div class="numbered constraint" title="R0013">The presentation processor <em class="rfc2119" title="must">must</em> allow the user to specify a backgroundColor for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#color-values">Color Values</a> ).</div></div>
 <div><div class="numbered constraint" title="R0014">The presentation processor <em class="rfc2119" title="must">must</em> allow the user to specify a backgroundColor for p and span elements to allow for semi-transparent and transparent opacities.</div></div>
+<div><div class="numbered" title="E0002">Multiple Background Styles. The <code>tts:backgroundColor</code> is specified distinctly for a region, a paragraph selected into
+that region, and a span of text in that paragraph.</div></div>
+<div class="example"><div class="example-title"><span>Example 2</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">&lt;region id="r1" tts:backgroundColor="#00000000"/&gt;
+...
+&lt;p region="r1" tts:backgroundColor="#1049edff"&gt;
+  Twinkle, twinkle, little bat!&lt;br&gt;
+  How &lt;span tts:backgroundColor="#ed1078ff"&gt;I wonder&lt;/span&gt; where you're at!
+&lt;/p&gt;</pre></div>
 </section>
 </section>
 <section id="Constrained_TTML_Feature_color">
@@ -939,8 +947,8 @@
 so that a line fills up incrementally, and then as new lines are added the upper lines are scrolled out of view.</p>
 <p>A Paint-on caption typically appears on the screen one character at a time and is displayed like a Pop-up caption.</p>
 <p>These caption styles are further elucidated by examples below.</p>
-<div><div class="numbered" title="E0002">Pop-up style</div></div>
-<div class="example"><div class="example-title"><span>Example 2</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span>
+<div><div class="numbered" title="E0003">Pop-up style</div></div>
+<div class="example"><div class="example-title"><span>Example 3</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span>
 <span style="color: blue;">    </span><span style="color: red;">xmlns:s</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span style="color: blue;"> </span>
 <span style="color: blue;">    </span><span style="color: red;">xmlns:p</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#parameter</span>'<span style="color: blue;"> &gt;</span>
 <span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
@@ -962,14 +970,14 @@
 <span style="color: blue;">&lt;/</span><span style="color: #a31515;">tt</span><span style="color: blue;">&gt;</span></pre></div>
 <!-- div data-include=example1.xml'></div --></section>
 <section>
-<div><div class="numbered" title="E0003">Positioned style. An off-screen narrator is present and no graphics are used. Content placed in a single region in the bottom one-third of that region.</div></div>
+<div><div class="numbered" title="E0004">Positioned style. An off-screen narrator is present and no graphics are used. Content placed in a single region in the bottom one-third of that region.</div></div>
 <!-- div data-include=example2.xml'></div -->
-<div class="example"><div class="example-title"><span>Example 3</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span>
+<div class="example"><div class="example-title"><span>Example 4</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">bottomMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 58%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span>
 <span style="color: blue;">&lt;</span><span style="color: #a31515;">style</span><span style="color: blue;"> </span><span style="color: red;">xml:id</span><span style="color: blue;">=</span>"<span style="color: blue;">topMidStyle</span>"<span style="color: blue;"> </span><span style="color: red;">s:textAlign</span><span style="color: blue;">=</span>"<span style="color: blue;">center</span>"<span style="color: blue;"> </span><span style="color: red;">s:textOutline</span><span style="color: blue;">=</span>"<span style="color: blue;">black 1px</span>"<span style="color: blue;"> </span><span style="color: red;">s:backgroundColor</span><span style="color: blue;">=</span>"<span style="color: blue;">transparent</span>"<span style="color: blue;"> </span><span style="color: red;">s:color</span><span style="color: blue;">=</span>"<span style="color: blue;">#ffffffff</span>"<span style="color: blue;"> </span><span style="color: red;">s:origin</span><span style="color: blue;">=</span>'<span style="color: blue;">20% 10%</span>'<span style="color: blue;"> </span><span style="color: red;">s:extent</span><span style="color: blue;">=</span>'<span style="color: blue;">60% 18%</span>'<span style="color: blue;">/&gt;</span></pre></div></section>
 <section>
-<div><div class="numbered" title="E0004">Moving regions. Content is positioned based on location of speaker, visible in the bottom two lines individually positioned in region(s) so as to avoid background content..</div></div>
+<div><div class="numbered" title="E0005">Moving regions. Content is positioned based on location of speaker, visible in the bottom two lines individually positioned in region(s) so as to avoid background content..</div></div>
 <!-- div data-include=example3.xml'></div -->
-<div class="example"><div class="example-title"><span>Example 4</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>"<span style="color: blue;">?&gt;</span>
+<div class="example"><div class="example-title"><span>Example 5</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color: blue;">&lt;?</span><span style="color: #a31515;">xml</span><span style="color: blue;"> </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>"<span style="color: blue;">?&gt;</span>
 <span style="color: blue;">&lt;</span><span style="color: #a31515;">tt</span><span style="color: blue;"> </span><span style="color: red;">xml:lang</span><span style="color: blue;">=</span>"<span style="color: blue;">en-us</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns</span><span style="color: blue;">=</span>"<span style="color: blue;">http://www.w3.org/ns/ttml</span>"<span style="color: blue;"> </span><span style="color: red;">xmlns:s</span><span style="color: blue;">=</span>'<span style="color: blue;">http://www.w3.org/ns/ttml#styling</span>'<span style="color: blue;">&gt;</span>
 <span style="color: blue;">  &lt;</span><span style="color: #a31515;">head</span><span style="color: blue;">&gt;</span>
 <span style="color: blue;">    &lt;</span><span style="color: #a31515;">styling</span><span style="color: blue;">&gt;</span>
@@ -1196,8 +1204,8 @@
 <h4><span class="secno">7.8.2 </span>Constraints</h4>
 <p>None</p>
 <section>
-<div><div class="numbered" title="E0005">Using 10% for the tts:extent of the root container region (for example, of an 720x640 region), the equivalence to pixel units (px) could be obtained. For example, using this snippet:</div></div>
-<div class="example"><div class="example-title"><span>Example 5</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">style</span><span style="color:blue;"> </span><span style="color:red;">xml:id</span><span style="color:blue;">=</span>"<span style="color:blue;">topLeftStyle</span>"<span style="color:blue;"> </span><span style="color:red;">s:fontSize</span><span style="color:blue;">=</span>"<span style="color:blue;">150%</span>"<span style="color:blue;"> </span><span style="color:red;">s:textAlign</span><span style="color:blue;">=</span>"<span style="color:blue;">left</span>"<span style="color:blue;"> </span><span style="color:red;">s:backgroundColor</span><span style="color:blue;">=</span>"<span style="color:blue;">#ffffffff</span>"<span style="color:blue;"> </span><span style="color:red;">s:color</span><span style="color:blue;">=</span>"<span style="color:blue;">#ff0000ff</span>"<span style="color:blue;"> </span><span style="color:red;">s:origin</span><span style="color:blue;">=</span>'<span style="color:blue;">10% 10%</span>'<span style="color:blue;"> </span><span style="color:red;">s:extent</span><span style="color:blue;">=</span>'<span style="color:blue;">40% 18%</span>'<span style="color:blue;">/&gt;</span></pre></div>
+<div><div class="numbered" title="E0006">Using 10% for the tts:extent of the root container region (for example, of an 720x640 region), the equivalence to pixel units (px) could be obtained. For example, using this snippet:</div></div>
+<div class="example"><div class="example-title"><span>Example 6</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">style</span><span style="color:blue;"> </span><span style="color:red;">xml:id</span><span style="color:blue;">=</span>"<span style="color:blue;">topLeftStyle</span>"<span style="color:blue;"> </span><span style="color:red;">s:fontSize</span><span style="color:blue;">=</span>"<span style="color:blue;">150%</span>"<span style="color:blue;"> </span><span style="color:red;">s:textAlign</span><span style="color:blue;">=</span>"<span style="color:blue;">left</span>"<span style="color:blue;"> </span><span style="color:red;">s:backgroundColor</span><span style="color:blue;">=</span>"<span style="color:blue;">#ffffffff</span>"<span style="color:blue;"> </span><span style="color:red;">s:color</span><span style="color:blue;">=</span>"<span style="color:blue;">#ff0000ff</span>"<span style="color:blue;"> </span><span style="color:red;">s:origin</span><span style="color:blue;">=</span>'<span style="color:blue;">10% 10%</span>'<span style="color:blue;"> </span><span style="color:red;">s:extent</span><span style="color:blue;">=</span>'<span style="color:blue;">40% 18%</span>'<span style="color:blue;">/&gt;</span></pre></div>
 <!-- div data-include=fontsize-example.xml'></div >
                         <style xml:id="topLeftStyle" s:fontSize="150%" s:textAlign="left" s:backgroundColor="#ffffffff" s:color="#ff0000ff" 
                          s:origin='10% 10%' s:extent='40% 18%'/> -->
@@ -1503,7 +1511,7 @@
 <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>The style properites of region and the content selected for the region impact how selected text flows into a region (i.e. selected text may flow outside of the region such as on a mobile device).</p></div></div>
 <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>Constraining one p element to a region logically places content from two different speakers to different region(s).</p></div></div>
 <div class="note"><div class="note-title"><span>Note</span></div><div class=""><p>When a document author wants to construct a single phrase from a speaker with more than one line in a region, the br within a p element can be used. This construction adheres to the constraints in this section. For example for one speaker with more than one line:</p></div></div>
-<div class="example"><div class="example-title"><span>Example 6</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span> I always get the fuzzy end<span style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span style="color:blue;">/&gt;</span>of the lollipop<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
+<div class="example"><div class="example-title"><span>Example 7</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span> I always get the fuzzy end<span style="color:blue;">&lt;</span><span style="color:#a31515;">br</span><span style="color:blue;">/&gt;</span>of the lollipop<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
 </section>
 </section>
 <section id="timing_constraints">
@@ -1543,7 +1551,7 @@
 <li>Exactly 2 digits <em class="rfc2119" title="must">must</em> be used in each of the hours, minutes, and second components (include leading zeros).</li>
 <li>Exactly 3 decimal places <em class="rfc2119" title="must">must</em> be used for the milliseconds component (include zeros).</li>
 </ul>
-<div class="example"><div class="example-title"><span>Example 7</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01.000</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11.123</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div>
+<div class="example"><div class="example-title"><span>Example 8</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01.000</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11.123</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div>
 <div><div class="numbered constraint" title="R0049">For timing in hh:mm:ss.ms, the following format <em class="rfc2119" title="must">must</em> be used:</div></div>
 <ul>
 <li>Exactly 2 digits <em class="rfc2119" title="must">must</em> be used in each of the hours, minutes, second, and frame components (include leading zeros).</li>
@@ -1551,7 +1559,7 @@
 <li>A ttp:frameRateMultiplier attribute <em class="rfc2119" title="may">may</em> be present on the root element.</li>
 </ul>
 <p></p>
-<div class="example"><div class="example-title"><span>Example 8</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01:00</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11:22</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
+<div class="example"><div class="example-title"><span>Example 9</span></div><pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;"><span style="color:blue;">&lt;</span><span style="color:#a31515;">p</span><span style="color:blue;"> </span><span style="color:red;">begin</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:01:00</span>'<span style="color:blue;"> </span><span style="color:red;">end</span><span style="color:blue;">=</span>'<span style="color:blue;">00:00:11:22</span>'<span style="color:blue;"> </span><span style="color:red;">region</span><span style="color:blue;">=</span>"<span style="color:blue;">r1</span>"<span style="color:blue;"> &gt;</span>Test<span style="color:blue;">&lt;/</span><span style="color:#a31515;">p</span><span style="color:blue;">&gt;</span></pre></div></section>
 </section>
 <section id="Constrained_TTML_Feature_time_offset">
 <h3><span class="secno">9.2 </span>Use of Constrained TTML Feature <span>time-offset</span></h3>

--- a/ttml10-sdp-us/Overview.src.html	Wed Nov 28 22:49:22 2012 -0700
+++ b/ttml10-sdp-us/Overview.src.html	Wed Nov 28 23:49:46 2012 -0700
@@ -634,6 +634,16 @@
 <div data-transform='constraint'>The alpha component of backgroundColor for a region MUST be zero (0).</div>
 <div data-transform='constraint'>The presentation processor MUST allow the user to specify a backgroundColor for p and span elements based on a minimum of an 8-color palette of white, black, red, green, blue, yellow, magenta, and cyan (See Minimum Color List in <a href="#color-values">Color Values</a> ).</div>
 <div data-transform='constraint'>The presentation processor MUST allow the user to specify a backgroundColor for p and span elements to allow for semi-transparent and transparent opacities.</div>
+<div data-transform='example'>Multiple Background Styles. The <code>tts:backgroundColor</code> is specified distinctly for a region, a paragraph selected into
+that region, and a span of text in that paragraph.</div>
+<pre class="example" style="font-family: Segoe UI; font-size: 13pt; color: black; background: white;">
+&lt;region id="r1" tts:backgroundColor="#00000000"/&gt;
+...
+&lt;p region="r1" tts:backgroundColor="#1049edff"&gt;
+  Twinkle, twinkle, little bat!&lt;br&gt;
+  How &lt;span tts:backgroundColor="#ed1078ff"&gt;I wonder&lt;/span&gt; where you're at!
+&lt;/p&gt;
+</pre>
 </section>
 </section>
 <section id='Constrained_TTML_Feature_color'>