Consistent formatting for Examples, Notes and Warnings.
authorGary Kacmarcik <garykac@google.com>
Tue, 04 Jun 2013 13:15:03 -0700
changeset 418 4998aa3eb6a5
parent 417 3af9a4e6464d
child 419 92bc9a229da4
Consistent formatting for Examples, Notes and Warnings.

Previous examples were a mixture of <p> and <div>. This changelist makes the formatting consistent for all examples in the spec.

Add the override.css file to override some respec formatting for Examples, Notes and Warnings.
html/DOM3-Events.html
html/override.css
--- a/html/DOM3-Events.html	Tue Jun 04 13:07:53 2013 -0700
+++ b/html/DOM3-Events.html	Tue Jun 04 13:15:03 2013 -0700
@@ -9,6 +9,7 @@
 	<link rel="stylesheet" type="text/css" href="spec-WD.css" />
 	<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/w3c-tr.css" />
 	<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD" />
+	<link rel="stylesheet" type="text/css" href="override.css" />
 	<script type="text/javascript" src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
 	<script type="text/javascript">
 	var respecConfig = {
@@ -243,7 +244,12 @@
 				<dd><p class="warning"><strong>Warning!</strong> This is a warning.  It is used on security notes and to mark <a class="def" href="#glossary-deprecated">deprecated</a> features.</p></dd>
 
 				<dt>Examples</dt>
-				<dd><p class="example"><strong>Example:</strong> This is an example.</p></dd>
+				<dd>
+					<div class="example">
+						<div class="example-title">Example</div>
+						<p>This is an example.</p>
+					</div>
+				</dd>
 
 				<!-- [Not current used in this document] <dt>Features at risk</dt>
 					<dd><p class="atrisk">This is a feature at risk, which is likely to be removed from the specification.</p></dd>-->
@@ -601,14 +607,19 @@
 				propagation path <span class="mustnot">must not</span> be changed; for DOM implementations, this applies even if an element in the propagation path is moved within the
 				DOM.  or removed from the DOM.</p>
 
-			<p class="example"><strong>Example:</strong> In the DOM event flow, event listeners might change the position of the <a class="def" href="#glossary-event-target">
+			<div class="example">
+				<div class="example-title">Example</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>
 
 			<p>Exceptions thrown inside event listeners <span class="mustnot">must not</span> stop the propagation of the event or affect the
 				<a class="def" href="#glossary-propagation-path">propagation path</a>. The exception itself <span class="mustnot">must not</span> propogate outside the scope of the event
 				handler.</p>
 
-			<div class="example"><p><strong>Example:</strong> In the following code, the exception thrown from the call to <code>throw "Error"</code> does not propogate into the parent scope,
+			<div class="example">
+				<div class="example-title">Example</div>
+				<p>In the following code, the exception thrown from the call to <code>throw "Error"</code> does not propogate into the parent scope,
 				(which would prevent the <code>console.log</code> statement from executing):</p>
 				<pre>var e = document.createEvent("Event");
 e.initEvent("myevent", false, false);
@@ -696,19 +707,25 @@
 				<em>default action</em></a>. Cancelable event objects can be associated with one or more <a class="def" href="#glossary-default-action">default actions</a>.
 				To cancel an event, call the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a> method.</p>
 
-			<p class="example"><strong>Example:</strong> 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
+			<div class="example">
+				<div class="example-title">Example</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--for
 				example, if the user's pointing device is over text, a text selection might begin. If the user's pointing device is over an image, then an image-drag action could
 				begin. Preventing the <a class="def" href="#glossary-default-action">default action</a> of a <a class="eventtype" href="#event-type-mousedown"><code>mousedown</code></a>
 				event prevents these actions from occuring.</p>
+			</div>
 
 			<p><a class="def" href="#glossary-default-action">Default actions</a> <span class="should">should</span> be performed after the event dispatch has been completed, but in exceptional
 				cases <span class="may">may</span> also be performed immediately before the event is dispatched.</p>
 
-			<p class="example"><strong>Example:</strong> The default action associated with the <a class="eventtype" href="#event-type-click"><code>click</code></a> event on &lt;input
+			<div class="example">
+				<div class="example-title">Example</div>
+				<p>The default action associated with the <a class="eventtype" href="#event-type-click"><code>click</code></a> event on &lt;input
 				type="checkbox"&gt; 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>
+			</div>
 
 			<p id="events-dt-cancelable-event">When an event is canceled, then the conditional <a class="def" href="#glossary-default-action">default actions</a> associated with the event <span class="must">must</span> be skipped (or
 				as mentioned above, if the <a class="def" href="#glossary-default-action">default actions</a> are carried out before the dispatch, their effect <span class="must">must</span> be undone).
@@ -730,9 +747,12 @@
 				are associated with certain event objects. Further, implementations <span class="may">may</span> associate <a class="def" href="#glossary-default-action">default actions</a> with events as necessary and
 				appropriate for that implementation.</p>
 
-			<p class="example"><strong>Example:</strong> As an example, one implementation might scroll a document view by a certain amount as the <a class="def" href="#glossary-default-action">
+			<div class="example">
+				<div class="example-title">Example</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>
+			</div>
 		</section>
 
 		<section id="sync-async">
@@ -746,20 +766,26 @@
 				these events are governed by the <a class="def" href="#glossary-event-order">event order</a> algorithms defined for that set of events, and a user agent <span class="must">must</span> dispatch
 				these events in the defined order.</p>
 
-			<p class="example"><strong>Example:</strong> A user double-clicks a passage of text to select a word, then presses the <code class="key">'Del'</code>
+			<div class="example">
+				<div class="example-title">Example</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>, <a
 				class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>, <a class="eventtype" href="#event-type-click"><code>click</code></a>, <a class="eventtype"
 				href="#event-type-mousedown"><code>mousedown</code></a>, <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a>, <a class="eventtype" href="#event-type-click">
 				<code>click</code></a>, <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>, <a class="eventtype" href="#event-type-select"><code>select</code></a>,
 				<a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>, <a class="eventtype" href="#event-type-DOMCharacterDataModified"><code>DOMCharacterDataModified</code></a>.
 				Each of these events are fired in the sequence initiated by the user's actions.</p>
+			</div>
 
 			<p>Events which are asynchronous (<em><q>async events</q></em>) <span class="may">may</span> be dispatched as the results of the action are completed, with no relation to other events, to
 				other changes in the DOM, nor to user interaction.</p>
 
-			<p class="example"><strong>Example:</strong> During loading of a document, an inline script element is parsed and executed. The <a class="eventtype" href="#event-type-load">
+			<div class="example">
+				<div class="example-title">Example</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>
+			</div>
 
 			<section id="event-order-and-loops">
 				<h3>Event order and event loops</h3>
@@ -808,12 +834,15 @@
 				href="#glossary-host-language">host language</a> <span class="should">should</span> initiate these <a class="def" href="#glossary-activation-behavior">activation behavior</a> when the associated
 				<a class="def" href="#glossary-activation-trigger">activation trigger</a> occurs.</p>
 
-			<p class="example" id="example-activation"><strong>Example:</strong> Both HTML and SVG have an <code>&lt;a&gt;</code> element which indicates a link.  Relevant <a
+			<div class="example" id="example-activation">
+				<div class="example-title">Example</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>
 				event with a <a href="#events-KeyboardEvent-key">key</a> attribute value of <a href="#key-Enter"><code class="key">'Enter'</code></a> key when the <code>&lt;a&gt;</code>
 				element has focus.  The activation behavior for an <code>&lt;a&gt;</code> element is normally to change the content of the window to the content of the new document,
 				in the case of external links, or to reposition the current document relative to the new anchor, in the case of internal links.</p>
+			</div>
 
 			<p>An <a class="def" href="#glossary-activation-trigger">activation trigger</a> is a user action or an event which indicates to the implementation that an activation
 				behavior <span class="should">should</span> be initiated.  User-initiated <a class="def" href="#glossary-activation-trigger">activation triggers</a> include clicking a mouse button on an activatable
@@ -848,10 +877,13 @@
 					with the <a href="#events-event-type-preventDefault"><code>Event.preventDefault()</code></a>, <span class="must">must</span> stop the initiation of the <a class="def" href="#glossary-activation-behavior">
 					activation behavior</a>.</p>
 
-				<p class="example"><strong>Example:</strong>  When a user activates a hyperlink using a keyboard, such as by focusing the hyperlink element
+				<div class="example">
+					<div class="example-title">Example</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
 					<a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event.</p>
+				</div>
 
 				<p>Implementations <span class="must">must</span> dispatch the synthesized <a class="eventtype" href="#event-type-click"><code>click</code></a> event as described above even if they do not
 					normally dispatch such an event (e.g., when activation is requested by a voice command, since this specification does not address <a class="def" href="#glossary-event-type">
@@ -866,7 +898,9 @@
 					activation trigger</a>.  However, such implementations <span class="should">should</span> only initiate the associated <a class="def" href="#glossary-activation-behavior">activation behavior</a>
 					once for any given occurrence of an <a class="def" href="#glossary-activation-trigger">activation trigger</a>.</p>
 
-				<p class="example"><strong>Example:</strong> The <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a>
+				<div class="example">
+					<div class="example-title">Example</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 <span class="required">required</span> 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
 					of XForms is intended for installation in a native implementation of this specification which does not support the <a class="eventtype" href="#event-type-DOMActivate">
@@ -879,6 +913,7 @@
 					cues might be whether the <a class="eventtype" href="#event-type-click"><code>click</code></a> event is <a href="#trusted-events">trusted</a>, or whether its <a
 					class="def" href="#glossary-event-target">event target</a> has a <a class="eventtype" href="#event-type-DOMActivate"><code>DOMActivate</code></a> event listener
 					registered.</p>
+				</div>
 
 				<p class="note"><strong>Authoring Note:</strong>  Don't rely upon the interoperable support of <a class="eventtype" href="#event-type-DOMActivate">
 					<code>DOMActivate</code></a> in many <a class="def" href="#glossary-user-agent">user agents</a>. Use the <a class="eventtype" href="#event-type-click"><code>click</code></a>
@@ -1101,10 +1136,13 @@
 					<p>This method <span class="must">must</span> also reset the event object's internal-propagation and default-action-prevention states. This allows an event object to be "reset"
 						before being dispatched multiple times.</p>
 
-					<p class="example"><strong>Example:</strong> If an <code>EventListener</code> called <code>stopPropagation()</code> or <code>stopImmediatePropagation()</code> during
+					<div class="example">
+						<div class="example-title">Example</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>
 						during the event's previous dispatch, then after calling this method, the event's <code>defaultPrevented</code> property will be <code>false</code>.</p>
+					</div>
 
 					<p class="warning" id="warning-initEvent-untrusted"><strong>Warning!</strong> For security reasons, events modified using <a href="#events-event-type-initEvent"><code>
 						Event.initEvent()</code></a> <span class="must">must</span> have a <code class="attribute-name"><a href="#events-event-type-isTrusted">isTrusted</a></code> attribute value of <code>false</code>.
@@ -1414,11 +1452,14 @@
 								<a href="#events-Event"><code>Event</code></a> will need to be initialized with the appropriate event initialization
 								method (e.g., <code>initEvent</code>, <code>initMouseEvent</code>, etc.) in order to associate it with an event type and related values.</p>
 
-							<p class="example"><strong>Example:</strong>  A content author wishing to synthesize some kind of <a href="#events-UIEvent"><code>UIEvent</code></a>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>A content author wishing to synthesize some kind of <a href="#events-UIEvent"><code>UIEvent</code></a>
 								would invoke <a href="#events-DocumentEvent-createEvent"><code>DocumentEvent.createEvent("UIEvent")</code></a>. The <a href="#events-event-type-initUIEvent"><code>
 								UIEvent.initUIEvent()</code></a> method could then be called on the newly created <a class="noxref" href="#events-UIEvent"><code>UIEvent</code></a> object to
 								set the specific type of user interface event to be dispatched, <a class="eventtype" href="#event-type-scroll"><code>scroll</code></a> for example, and set its
 								context information, e.g., <a href="#events-UIEvent-detail"><code>UIEvent.detail</code></a>.</p>
+							</div>
 
 							<p>For backward compatibility, the following case-insensitive feature names are valid values for the parameter <code>eventInterface</code>:</p>
 
@@ -1854,10 +1895,13 @@
 					</tr>
 				</table>
 
-				<p class="example"><strong>Example: </strong>The following is one way to interpret the above table: the <a class="eventtype" href="#event-type-load"><code>load</code></a> event will
+				<div class="example">
+					<div class="example-title">Example</div>
+					<p>The following is one way to interpret the above table: 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>,
 					<code>Document</code>, or <code>Element</code> nodes, or if it is attached to the bubbling phase only, this event listener would not be triggered.</p>
+				</div>
 
 				<p class="note"><strong>Note: </strong>Don't interpret the above table as definitive for the listed event types. For example, the <a class="eventtype"><code>load</code></a> event is used in other
 					specifications, for example, in XMLHttpRequest. Similarly, <a href="#events-EventTarget-dispatchEvent"><code>dispatchEvent</code></a> can be used to dispatch untrusted events to
@@ -3242,13 +3286,16 @@
 					<p>If the <a class="def" href="#glossary-event-target">event target</a> (e.g. the target element) is removed from the DOM during the mouse events sequence, the remaining
 						events of the sequence <span class="mustnot">must not</span> be fired on that element.</p>
 
-					<p class="example"><strong>Example:</strong> if the target element is removed from the DOM as the result of a <a class="eventtype" href="#event-type-mousedown">
+					<div class="example">
+						<div class="example-title">Example</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
 						activation events; however, the <a class="eventtype" href="#event-type-mouseup"><code>mouseup</code></a> event will still be dispatched on the element that is exposed
 						to the mouse after the removal of the initial target element. Similarly,  if the target element is removed from the DOM during the dispatch of a <a class="eventtype"
 						href="#event-type-mouseup"><code>mouseup</code></a> event, the <a class="eventtype" href="#event-type-click"><code>click</code></a> and subsequent events will
 						not be dispatched.</p>
+					</div>
 
 				</section>
 
@@ -3331,12 +3378,15 @@
 								href="#event-type-click"><code>click</code></a> event <span class="may">may</span> also be followed by the <a class="eventtype" href="#event-type-dblclick"><code>dblclick</code></a>
 								event.</p>
 
-							<p class="example"><strong>Example:</strong> If a user mouses down on a text node child of a &lt;p&gt; 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 &lt;p&gt;
-								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
-								a <a class="eventtype" href="#event-type-click"><code>click</code></a> event (if it falls within the normal temporal hysteresis for a <a class="eventtype" href="#event-type-click">
-								<code>click</code></a>), since the user has stayed within the scope of the same element; user-agent-generated mouse events are not dispatched on text nodes.
-							</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>If a user mouses down on a text node child of a &lt;p&gt; 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 &lt;p&gt;
+									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
+									a <a class="eventtype" href="#event-type-click"><code>click</code></a> event (if it falls within the normal temporal hysteresis for a <a class="eventtype" href="#event-type-click">
+									<code>click</code></a>), since the user has stayed within the scope of the same element; user-agent-generated mouse events are not dispatched on text nodes.
+								</p>
+							</div>
 
 							<p>In addition to being associated with pointer devices, the <a class="eventtype" href="#event-type-click"><code>click</code></a> event type <span class="must">must</span> be dispatched as
 								part of an element activation, as described in <a href="#event-flow-activation">Activation triggers and behavior</a>.</p>
@@ -3999,8 +4049,11 @@
 				<p>Wheels are devices that can be rotated in one or more spatial dimensions, and which can be associated with a pointer device. The coordinate system depends on the
 					environment configuration.</p>
 
-				<p class="example"><strong>Example:</strong> The user's environment might be configured to associate vertical scrolling with rotation along the y-axis, horizontal
+				<div class="example">
+					<div class="example-title">Example</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>
 
 				<p>The deltaX, deltaY, and deltaZ attributes of <a href="#events-WheelEvent"><code>WheelEvent</code></a> objects indicate a measurement along their respective axes
 					in units of pixels, lines, or pages. The reported measurements are provided after an environment-specific algorithm translates the actual rotation/movement of
@@ -4226,42 +4279,60 @@
 							<p>The key activation <span class="mustnot">must not</span> be distinguished as the left or right version of the key, and did not originate from the numeric keypad (or did not originate with
 							a virtual key corresponding to the numeric keypad).</p>
 
-							<p class="example"><strong>Example:</strong> the <code class="key">'Q'</code> key on a PC 101 Key US keyboard.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The <code class="key">'Q'</code> key on a PC 101 Key US keyboard.</p>
+							</div>
 						</dd>
 
 						<dt>const unsigned long DOM_KEY_LOCATION_LEFT = 0x01</dt>
 						<dd>
 							<p>The key activated originated from the left key location (there is more than one possible location for this key).</p>
 
-							<p class="example"><strong>Example:</strong> the left <code class="key">'Control'</code> key on a PC 101 Key US keyboard.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The left <code class="key">'Control'</code> key on a PC 101 Key US keyboard.</p>
+							</div>
 						</dd>
 
 						<dt>const unsigned long DOM_KEY_LOCATION_RIGHT = 0x02</dt>
 						<dd>
 							<p>The key activation originated from the right key location (there is more than one possible location for this key).</p>
 
-							<p class="example"><strong>Example:</strong> the right <code class="key">'Shift'</code> key on a PC 101 Key US keyboard.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The right <code class="key">'Shift'</code> key on a PC 101 Key US keyboard.</p>
+							</div>
 						</dd>
 
 						<dt>const unsigned long DOM_KEY_LOCATION_NUMPAD = 0x03</dt>
 						<dd>
 							<p>The key activation originated on the numeric keypad or with a virtual key corresponding to the numeric keypad.</p>
 
-							<p class="example"><strong>Example:</strong> the <code class="key">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The <code class="key">'1'</code> key on a PC 101 Key US keyboard located on the numeric pad.</p>
+							</div>
 						</dd>
 
 						<dt>const unsigned long DOM_KEY_LOCATION_MOBILE = 0x04</dt>
 						<dd>
 							<p>The key activation originated on a mobile device, either on a physical keypad or a virtual keyboard.</p>
 
-							<p class="example"><strong>Example:</strong> the <code class="key">'#'</code> key or softkey on a mobile device.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The <code class="key">'#'</code> key or softkey on a mobile device.</p>
+							</div>
 						</dd>
 
 						<dt>const unsigned long DOM_KEY_LOCATION_JOYSTICK = 0x05</dt>
 						<dd>
 							<p>The key activation originated on a game controller or a joystick on a mobile device.</p>
 
-							<p class="example"><strong>Example:</strong> the <code class="key">'DownLeft'</code> key on a game controller.</p>
+							<div class="example">
+								<div class="example-title">Example</div>
+								<p>The <code class="key">'DownLeft'</code> key on a game controller.</p>
+							</div>
 						</dd>
 
 						<dt>readonly attribute DOMString char</dt>
@@ -5841,10 +5912,8 @@
 					filter key input using cryptic, platform- and implementation-specific numeric codes, with poor internationalization, such as the following pseudocode:</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
-					<pre><code>
-if ( ( event.charCode == 45 || event.charCode == 36 ) ||
+					<div class="example-title">Example</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 ) ) {
    <span class="comment">// minus sign, dollar sign, and numeric characters from keyboard and numpad</span>
@@ -5865,10 +5934,8 @@
 					advanced internationalization support, such as the following pseudocode:</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
-					<pre><code>
-if ( event.key == "-" || event.key.match("\p{Sc}") || event.key.match("\p{N}") ) {
+					<div class="example-title">Example</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>
 }
@@ -5885,9 +5952,12 @@
 				<p>In addition, because Unicode categorizes each assigned <a class="def" href="#glossary-unicode-code-point">code point</a> into a group of code points used by a particular
 					human writing system, even more advanced capabilities are possible.</p>
 
-				<p class="example"><strong>Example:</strong> A content author can match characters from a particular human script (e.g., Tibetan) using a regular expression such as
+				<div class="example">
+					<div class="example-title">Example</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>
+				</div>
 
 				<p>To facilitate this, implementations <span class="should">should</span> support Unicode range detection using regular expressions, in a manner such as the Perl Compatible Regular Expressions
 					(PCRE) [<a href="#references-pcre">PCRE</a>].</p>
@@ -5911,8 +5981,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
 							shiftKey</a></code></li>
@@ -5929,8 +5998,7 @@
 					<code>keyup</code></a> event:</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
 							shiftKey</a></code></li>
@@ -5944,8 +6012,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Control'</code>, ctrlKey</li>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'v'</code> (<code class="char">'\u0076'</code>, Latin Small Letter
@@ -5980,8 +6047,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
 						<li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
@@ -6001,8 +6067,7 @@
 					available) after pressing a <a class="def" href="#glossary-dead-key">dead key</a>:</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
 						<li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
@@ -6043,8 +6108,7 @@
 					pronounced <q>shi</q>, so the user would use the <code class="key">'Convert'</code> key to select the proper option.</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
 							S key)</li>
@@ -6072,8 +6136,7 @@
 					(Escape key).</p>
 
 				<div class="example">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
 							S key)</li>
@@ -6132,8 +6195,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
 							shiftKey</a></code></li>
@@ -6154,8 +6216,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
 							shiftKey</a></code></li>
@@ -6179,8 +6240,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">
-					<p><strong>Example:</strong></p>
-
+					<div class="example-title">Example</div>
 					<ol>
 						<li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
 						<li><em>The <a class="def" href="#glossary-default-action">default action</a> of the <a class="eventtype" href="#event-type-keydown"><code>keydown</code></a> event is
@@ -6243,8 +6303,7 @@
 				</ol>
 
 				<div class="example">
-					<p><strong>Examples:</strong></p>
-
+					<div class="example-title">Example</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
@@ -7710,8 +7769,11 @@
 			These init methods needed a long list of parameters that, in most cases, did not fully initialize all attributes of the event object. In order to fully initialize
 			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>
 
-		<p class="example"><strong>Example: </strong>Initializing all the attributes of a MutationEvent requires calls to two initializer methods: <code>initEvent</code> and
-			<code>initMutationEvent</code>.</p>
+		<div class="example">
+			<div class="example-title">Example</div>
+			<p>Initializing all the attributes of a MutationEvent requires calls to two initializer methods: <code>initEvent</code> and
+				<code>initMutationEvent</code>.</p>
+		</div>
 
 		<p>Due in part to the length of time in the development of this standard, some implementations <span class="may">may</span> have taken a dependency on a set of initializer methods that were
 			formerly defined in this specification. For completeness, these legacy event intializers are described in this Appendix.</p>
@@ -8439,7 +8501,8 @@
 				they are using.</p>
 
 			<div class="example">
-				<p><strong>Example:</strong> A content author might have created an application which features a dynamically generated bar chart.  This bar chart is meant to be updated
+				<div class="example-title">Example</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
 					the chart.  To manage this, the content author can choose to create a custom <q>updateChart</q> event, which is fired whenever one of the trigger conditions is
@@ -8462,7 +8525,8 @@
 				name in Javascript.</p>
 
 			<div class="example">
-				<p><strong>Example:</strong> A particular browser vendor, <q>FooCorp</q>, might wish to introduce a new event, <a class="eventtype"><code>jump</code></a>.  This vendor implements
+				<div class="example-title">Example</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>
 					accordingly.</p>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/html/override.css	Tue Jun 04 13:15:03 2013 -0700
@@ -0,0 +1,63 @@
+/* Tweaks to override respec formatting */
+
+/* Warnings */
+
+section > .warning {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+dd > .warning {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+/* Notes */
+
+.note-title {
+	display: none;
+}
+
+section > .note {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+dd > .note {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+.note > p {
+	margin: 0.5em 0;
+	padding-left: 8px;
+}
+
+/* Examples */
+
+div.example {
+	margin-bottom: 1em;
+}
+
+div.example > p {
+	margin: 0.5em 0 0 0;
+}
+
+div.example > p:first-child {
+	margin: -0.5em 0 0 0;
+}
+
+div.example > ol,ul,pre {
+	margin: 0;
+}
+
+.example-title {
+	font-weight: bold;
+	background-color: #FF4500;
+	color: white;
+	letter-spacing: 0.05em;
+	display: block;
+	width: 4.5em;
+	margin: -1em 0em 1em -1em;
+	padding: 0.2em 0.2em 0.1em 0.4em;
+}