--- a/html/DOM3-Events.html	Sun Aug 25 11:57:12 2013 -0700
+++ b/html/DOM3-Events.html	Sun Aug 25 13:39:13 2013 -0700
@@ -256,7 +256,7 @@
 				<dt>Examples</dt>
 				<dd>
 					<div class="example">
-						<div class="example-title">Example</div>
+						<div class="example-title"></div>
 						<p>This is an example.</p>
 					</div>
 				</dd>
@@ -619,7 +619,7 @@
 				DOM or removed from the DOM.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>In the DOM event flow, event listeners might change the position of the <a class="def" href="#glossary-event-target">
 				event target</a> in the document while the event object is being dispatched; such changes do not affect the propagation path.</p>
 			</div>
@@ -629,7 +629,7 @@
 				handler.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>In the following code, the exception thrown from the call to <code>throw "Error"</code> does not propagate into the parent scope
 				(which would prevent the <code>console.log</code> statement from executing):</p>
 				<pre>var e = document.createEvent("Event");
@@ -719,7 +719,7 @@
 				To cancel an event, call the <a href="#widl-Event-preventDefault"><code>Event.preventDefault()</code></a> method.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>A <a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a> event is dispatched immediately after the user presses down a button on a
 				pointing device (typically a mouse). One possible <a class="def" href="#glossary-default-action">default action</a> taken by the implementation is to set up a state
 				machine that allows the user to drag images or select text. The <a class="def" href="#glossary-default-action">default action</a> depends on what happens next &mdash; for
@@ -732,7 +732,7 @@
 				cases MAY also be performed immediately before the event is dispatched.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>The default action associated with the <a class="eventtype" href="#event-type-click"><code>click</code></a> event on <code>&lt;input
 				type="checkbox"&gt;</code> elements toggles the <code>checked</code> IDL attribute value of that element. If the <a class="eventtype" href="#event-type-click"><code>click</code>
 				</a> event's default action is cancelled, then the value is restored to its former state.</p>
@@ -759,7 +759,7 @@
 				appropriate for that implementation.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>As an example, one implementation might scroll a document view by a certain amount as the <a class="def" href="#glossary-default-action">
 				default action</a> of a <a class="eventtype" href="#event-type-wheel"><code>wheel</code></a> event, while another implementation might instead zoom the document as its <a class="def"
 				href="#glossary-default-action">default action</a>.</p>
@@ -778,7 +778,7 @@
 				these events in the defined order.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>A user double-clicks a passage of text to select a word, then presses the <code class="key">'Del'</code>
 				key to erase the word, triggering the following synchronous sequence of events:
 					<a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a>,
@@ -800,7 +800,7 @@
 				other changes in the DOM, nor to user interaction.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>During loading of a document, an inline script element is parsed and executed. The <a class="eventtype" href="#event-type-load">
 				<code>load</code></a> event is queued to be fired asynchronously at the script element. However, because it is an async event, its order with relation to other synchronous
 				events fired during document load (such as the <a class="eventtype"><code>DOMContentLoaded</code></a> event from <cite><a class="informative" href="#references-HTML5">HTML5</a></cite>) is not guaranteed.</p>
@@ -854,7 +854,7 @@
 				<a class="def" href="#glossary-activation-trigger">activation trigger</a> occurs.</p>
 
 			<div class="example" id="example-activation">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>Both HTML and SVG have an <code>&lt;a&gt;</code> element which indicates a link.  Relevant <a
 				class="def" href="#glossary-activation-trigger">activation triggers</a> for an <code>&lt;a&gt;</code> element are a <a class="eventtype" href="#event-type-click"><code>
 				click</code></a> event on the text or image  content of the <code>&lt;a&gt;</code> element, or a <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>
@@ -897,7 +897,7 @@
 					activation behavior</a>.</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<p>When a user activates a hyperlink using a keyboard, such as by focusing the hyperlink element
 					and pressing the <a href="#key-Enter"><code class="key">'Enter'</code></a> or <a href="#key-Spacebar"><code class="key">'Space'</code></a> key, a <a class="eventtype"
 					href="#event-type-click"><code>click</code></a> event would be dispatched as the <a class="def" href="#glossary-default-action">default action</a> of the respective
@@ -1139,7 +1139,7 @@
 						before being dispatched multiple times.</p>
 
 					<div class="example">
-						<div class="example-title">Example</div>
+						<div class="example-title"></div>
 						<p>If an <code>EventListener</code> called <code>stopPropagation()</code> or <code>stopImmediatePropagation()</code> during
 						the event's previous dispatch, then after calling this method, the event can be re-dispatched (via <code>dispatchEvent</code>) and will propagate through all candidate
 						event listeners along its propagation path (as it did during the prior dispatch). Similarily, if an <code>EventListener</code> called <code>preventDefault()</code>
@@ -1448,7 +1448,7 @@
 						method (e.g., <code>initEvent</code>, <code>initMouseEvent</code>, etc.) in order to associate it with an event type and related values.</p>
 
 					<div class="example">
-						<div class="example-title">Example</div>
+						<div class="example-title"></div>
 						<p>A content author wishing to synthesize some kind of <a href="#interface-UIEvent"><code>UIEvent</code></a>
 						would invoke <a href="#widl-DocumentEvent-createEvent"><code>DocumentEvent.createEvent("UIEvent")</code></a>. The <a href="#widl-UIEvent-initUIEvent"><code>
 						UIEvent.initUIEvent()</code></a> method could then be called on the newly created <a class="noxref" href="#interface-UIEvent"><code>UIEvent</code></a> object to
@@ -1784,7 +1784,7 @@
 					at the end of this document.</p>
 				
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<p>The following is one way to interpret the above tables: the <a class="eventtype" href="#event-type-load"><code>load</code></a> event will
 					trigger event listeners attached on <code>Element</code> nodes for that event and on the capture and target phases. This event is not cancelable. If an event listener for the
 					<a class="eventtype" href="#event-type-load"><code>load</code></a> event is attached to a node other than <a class="def" href="#glossary-defaultView"><code>defaultView</code></a>,
@@ -3137,7 +3137,7 @@
 						events of the sequence MUST NOT be fired on that element.</p>
 
 					<div class="example">
-						<div class="example-title">Example</div>
+						<div class="example-title"></div>
 						<p>If the target element is removed from the DOM as the result of a <a class="eventtype" href="#event-type-mousedown">
 						<code>mousedown</code></a> event, no events for that element will be dispatched for <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>,
 						<a class="eventtype" href="#event-type-click"><code>click</code></a>, or <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>, nor any default
@@ -3229,7 +3229,7 @@
 								event.</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>If a user mouses down on a text node child of a <code>&lt;p&gt;</code> element which has been styled with
 									a large line-height, shifts the mouse slightly such that it is no longer over an area containing text but is still within the containing block of that <code>&lt;p&gt;</code>
 									element (i.e., the pointer is between lines of the same text block, but not over the text node per se), then subsequently mouses up, this will likely still trigger
@@ -3900,7 +3900,7 @@
 					environment configuration.</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<p>The user's environment might be configured to associate vertical scrolling with rotation along the y-axis, horizontal
 					scrolling with rotation along the x-axis, and zooming with rotation along the z-axis.</p>
 				</div>
@@ -4255,7 +4255,7 @@
 							a virtual key corresponding to the numeric keypad).</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The <code class="key">'Q'</code> key on a PC 101 Key US keyboard.</p>
 							</div>
 						</dd>
@@ -4265,7 +4265,7 @@
 							<p>The key activated originated from the left key location (there is more than one possible location for this key).</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The left <code class="key">'Control'</code> key on a PC 101 Key US keyboard.</p>
 							</div>
 						</dd>
@@ -4275,7 +4275,7 @@
 							<p>The key activation originated from the right key location (there is more than one possible location for this key).</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The right <code class="key">'Shift'</code> key on a PC 101 Key US keyboard.</p>
 							</div>
 						</dd>
@@ -4285,7 +4285,7 @@
 							<p>The key activation originated on the numeric keypad or with a virtual key corresponding to the numeric keypad.</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The <code class="key">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</p>
 							</div>
 						</dd>
@@ -4295,7 +4295,7 @@
 							<p>The key activation originated on a mobile device, either on a physical keypad or a virtual keyboard.</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The <code class="key">'#'</code> key or softkey on a mobile device.</p>
 							</div>
 						</dd>
@@ -4305,7 +4305,7 @@
 							<p>The key activation originated on a game controller or a joystick on a mobile device.</p>
 
 							<div class="example">
-								<div class="example-title">Example</div>
+								<div class="example-title"></div>
 								<p>The <code class="key">'DownLeft'</code> key on a game controller.</p>
 							</div>
 						</dd>
@@ -5271,7 +5271,7 @@
 					filter key input using cryptic, platform- and implementation-specific numeric codes, with poor internationalization, such as the following pseudocode:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<pre><code>if ( ( event.charCode == 45 || event.charCode == 36 ) ||
      ( event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57 ) ||
      ( event.charCode &gt;= 96 &amp;&amp; event.charCode &lt;= 105 ) ) {
@@ -5293,7 +5293,7 @@
 					advanced internationalization support, such as the following pseudocode:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<pre><code>if ( event.key == "-" || event.key.match("\p{Sc}") || event.key.match("\p{N}") ) {
    <span class="comment">// minus sign, any currency symbol, and numeric characters (regardless of key location)</span>
    <span class="comment">// ...</span>
@@ -5312,7 +5312,7 @@
 					human writing system, even more advanced capabilities are possible.</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<p>A content author can match characters from a particular human script (e.g., Tibetan) using a regular expression such as
 					<code>\p{Tibetan}</code>, to filter out other characters, or discover if a <a class="def" href="#glossary-unicode-code-point">code point</a> is in
 					a certain code block (range of code points), using a regular expression like <code>\p{InCyrillic}</code>.</p>
@@ -5340,7 +5340,7 @@
 					href="#glossary-unicode-code-point">Unicode code point</a> <code class="char">'\u0051'</code>) on a PC/AT US keyboard using a US mapping:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number">1.</td>
@@ -5392,7 +5392,7 @@
 					<code>keyup</code></a> event:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number">1.</td>
@@ -5442,7 +5442,7 @@
 				<p>The following example describes a possible sequence of keys that does not generate a Unicode character (using the same configuration):</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number">1.</td>
@@ -5479,7 +5479,7 @@
 					keyboard layout. The following example shows the sequence of events when an Arabic keyboard layout is used:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number">1.</td>
@@ -5538,7 +5538,7 @@
 					character <code class="glyph">'&#xEA;'</code> (Latin Small Letter E With Circumflex), as preferred by the Unicode Normalization Form <em>NFC</em>:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -5613,7 +5613,7 @@
 					available) after pressing a <a class="def" href="#glossary-dead-key">dead key</a>:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -5708,7 +5708,7 @@
 					pronounced し (<q>shi</q>), so the user needs to use the <code class="key">'Convert'</code> key to select the proper option.</p>
 					
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -5837,7 +5837,7 @@
 					(Escape key).</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -6005,7 +6005,7 @@
 					to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -6063,7 +6063,7 @@
 					to generate the Unicode character Q (Latin Capital Letter Q) on a PC/AT US keyboard using a US mapping:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -6137,7 +6137,7 @@
 					'e'</code> (<code class="char">'\u0065'</code>, Latin Small Letter E key) (on a PC/AT French keyboard using a French mapping and without any modifier activated):</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -6226,7 +6226,7 @@
 				</ol>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<ul>
 						<li>On a PC/AT US keyboard with a right-handed single-hand Dvorak <a class="def" href="#glossary-key-mapping">key mapping</a>, the key labeled <code class="key">
 							'Q'</code> maps to the key values <code class="key">'5'</code> (unmodified) and <code class="key">'%'</code> (shifted).  The primary function of this key
@@ -6699,7 +6699,7 @@
 			an event interface which was derived from the basic <code>Event</code> interface, it was necessary to call the initializer of each of the derived interfaces explicitly.</p>
 
 		<div class="example">
-			<div class="example-title">Example</div>
+			<div class="example-title"></div>
 			<p>Initializing all the attributes of a MutationEvent requires calls to two initializer methods: <code>initEvent</code> and
 				<code>initMutationEvent</code>.</p>
 		</div>
@@ -7628,7 +7628,7 @@
 				once for any given occurrence of an <a class="def" href="#glossary-activation-trigger">activation trigger</a>.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>The <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a>
 				<a class="def" href="#glossary-event-type">event type</a> is REQUIRED to be supported for XForms [<cite><a class="informative" href="#ref-xforms">XFORMS</a></cite>],
 				which is intended for implementation within a <a class="def" href="#glossary-host-language">host language</a>.  In a scenario where a plugin or script-based implementation
@@ -8026,7 +8026,7 @@
 					is demonstrated in the following example:</p>
 
 				<div class="example">
-					<div class="example-title">Example</div>
+					<div class="example-title"></div>
 					<table class="event-sequence-table">
 						<tr>
 							<td class="cell-number"></td>
@@ -8710,7 +8710,7 @@
 				they are using.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>A content author might have created an application which features a dynamically generated bar chart.  This bar chart is meant to be updated
 					every 5 minutes, or when a feed shows new information, or when the user refreshes it manually by clicking a button.  There are several handlers that have to be
 					called when the chart needs to be updated: the application has to fetch the most recent data, show an icon to the user that the event is being updated, and rebuild
@@ -8734,7 +8734,7 @@
 				name in Javascript.</p>
 
 			<div class="example">
-				<div class="example-title">Example</div>
+				<div class="example-title"></div>
 				<p>A particular browser vendor, <q>FooCorp</q>, might wish to introduce a new event, <a class="eventtype"><code>jump</code></a>.  This vendor implements
 					<a class="eventtype"><code>fooJump</code></a> in their browser, using their vendor-specific prefix, <code>'foo'</code>.  Early adopters start experimenting with the event,
 					using <code>someElement.addEventListener("fooJump", doJump, false )</code>, and provide feedback to FooCorp, who change the behavior of <a class="eventtype"><code>fooJump</code></a>

--- a/html/override.css	Sun Aug 25 11:57:12 2013 -0700
+++ b/html/override.css	Sun Aug 25 13:39:13 2013 -0700
@@ -1,5 +1,9 @@
 /* Tweaks to override respec formatting */
 
+body {
+  counter-reset: example;
+}
+
 /* Make h5 and h6 easier to see. */
 
 section > h5 {
@@ -74,17 +78,26 @@
 	margin: 0;
 }
 
+.example-title:before {
+	content: "Example ";
+}
+
 .example-title {
 	font-weight: bold;
 	background-color: #FF4500;
 	color: white;
 	letter-spacing: 0.05em;
 	display: block;
-	width: 4.5em;
+	width: 5.65em;
 	margin: -1em 0em 1em -1em;
 	padding: 0.2em 0.2em 0.1em 0.4em;
 }
 
+.example-title:after {
+	counter-increment: example;
+	content: counter(example);
+}
+
 /* Remove extra margin from around each param description */
 .prmDesc > p {
 	margin: 0 0;