Edited QtWebKit Guide CSS chapter. Created example links.

Reviewed-by: David Boddie

4 files changed, 587 insertions, 793 deletions

diff --git a/doc/src/index.qdoc b/doc/src/index.qdoc
index 4781127..90caf06 100644
--- a/doc/src/index.qdoc
+++ b/doc/src/index.qdoc
@@ -59,8 +59,8 @@
             \enddiv
             \list
             \o \l{Qt Demonstrations}{Application Gallery}
-            \o \l{Tutorials}
-            \o \l{Qt Examples}{Examples}
+            \o \l{Tutorials}{Step-by-Step Tutorials}
+            \o \l{Qt Examples}{Qt Example Code}
             \o \l{QML Examples and Demos}
             \endlist
         \enddiv
@@ -104,7 +104,7 @@
             \o \l{external: Setting Up Development Environment for Symbian}{Setting Up Development Environment for Symbian}
             \o \l{external: Setting Up Development Environment for Maemo}{Setting Up Development Environment for Maemo}
             \o \l{qt-mobile-demos}{Mobile Applications and Demos}
-            \o \l{external: Publishing Applications to Ovi Store}{Publishing Applications to Ovi Store}
+            \o \l{QtWebKit Guide}{QtWebKit Developer Guide}
             \endlist
             \list
             \o \l{Qt Development: The Steps from Challenge to Achievement}{The Steps from Challenge to Achievement}
diff --git a/doc/src/webkit/guide/chapter_css.qdoc b/doc/src/webkit/guide/chapter_css.qdoc
index e299e57..9dd35bc 100644
--- a/doc/src/webkit/guide/chapter_css.qdoc
+++ b/doc/src/webkit/guide/chapter_css.qdoc
@@ -45,70 +45,54 @@
 \title Level 3 CSS (BETA)
 
 \chapter Level 3 CSS
-This section serves as an introduction to various Level 3 CSS features
+This section of the Qt WebKit Guide serves as an introduction to various Level 3 CSS features
 supported by QtWebKit:
 
 \list
 
-\o The \l{Media Queries} section discusses a simple client-based
-technique to present different interfaces and functionality from a
-single source of content to different classes of mobile device.
+\o The \l{Media Queries} section discusses a simple client-based technique to
+present different interfaces and functionality from a single source of content
+to different classes of mobile device.
 
-\o The \l{Selectors} section concentrates on recently introduced
-syntax elements that make applying formatting and gathering DOM
-elements more flexible.
+\o The \l{Selectors} section concentrates on recently introduced syntax elements
+that make applying formatting and gathering DOM elements more flexible.
 
-\o The \l{Visual Effects} section surveys numerous formatting
-properties,
+\o The \l{Visual Effects} section surveys numerous formatting properties,
 including new color models and advanced WebKit effects.
 
-\o Finally,
-the \l{Dynamic CSS} section discusses 2D transforms,
-transitions,
+\o Finally, the \l{Dynamic CSS} section discusses 2D transforms, transitions,
 and keyframe animations.
 
 \endlist
 
-This section features links to numerous sample pages that demonstrate
-how various CSS3 features may be applied within a mobile interface.
-For best results,
-view these samples with a modern Webkit-based browser such as Apple
-Safari or Google Chrome.
-Resize the window in which the sample appears to roughly match the
-dimensions of a touch-screen mobile device.
+This section features links to numerous sample pages that demonstrate how
+various CSS3 features may be applied within a mobile interface. For best
+results, view these samples with a modern Webkit-based browser such as Apple
+Safari or Google Chrome. Resize the window in which the sample appears to
+roughly match the dimensions of a touch-screen mobile device.
 
 \section1 Media Queries
 
-CSS media \bold{queries} extend media \bold{types} with more detailed
-capabilities.
-Media Queries offer a simple client-side mechanism to customize
-interfaces comprehensively via CSS.
+CSS \e{media queries} extend \e{media types} with more detailed capabilities.
+Media queries offer a simple client-side mechanism to customize interfaces
+comprehensively via CSS.
 
-Media queries are especially useful when extending a body of content
-for presentation on mobile browsers.
-Prior to support for this feature,
-there were two basic approaches to provisioning mobile web content,
-both server-based:
+Media queries are especially useful when extending a body of content for
+presentation on mobile browsers. Prior to support for this feature, there were
+two basic approaches to provisioning mobile web content, both server-based:
 
 \list
-
-\o \bold{Mobile-specific domains}.
-Content providers might provide a separate access points for default
-content at \bold{www.website.com},
-with mobile content available at \bold{m.website.com} or
-\bold{website.mobi}.
-There might also be an additional \bold{touch.website.com} access
-point targeted for higher-end touch-screen browsers.
-
-\o \bold{Dynamic Server-based Adaptation}.
-In this case,
-there is a single access point,
-but the server sends different content,
-typically depending on the \bold{User-Agent} header included in all
-browsers\' HTTP requests.
+\o \e{Mobile-specific domains}. Content providers might provide a separate
+access points for default content at \c{www.website.com}, with mobile content
+available at \c{m.website.com} or \c{website.mobi}. There might also be an
+additional \c{touch.website.com} access point targeted for higher-end
+touch-screen browsers.
+
+\o \e{Dynamic Server-based Adaptation}. In this case, there is a single access
+point, but the server sends different content, typically depending on the
+\e{User-Agent} header included in all browsers' HTTP requests.
 This approach may leverage databases of device characteristics such as
-\bold{WURFL} or \bold{DeviceAtlas}.
-
+\l{WURFL} or \l{DeviceAtlas}.
 \endlist
 
 This section describes how to provision CSS entirely on the mobile
@@ -116,33 +100,27 @@ client.
 
     \section2 Media Types and Media Queries
 
-    If you only want to serve interfaces for desktop browsers and low-end
-    mobile browsers,
-    specify external CSS files within your HTML\'s \c{head} region using
-    media types:
+    If you only want to serve interfaces for desktop browsers and low-end mobile
+    browsers, specify external CSS files within your HTML's \c{head} region
+    using media types:
 
     \code
     <link media="screen" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
     <link media="handheld" href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>
     \endcode
 
-    The \c{media} attribute specifies different \bold{types} of browser:
-    \c{screen} for large-screen desktop browsers,
-    and \c{handheld} for mobile browsers.
+    The \c{media} attribute specifies different \e{types} of browser: \c{screen}
+    for large-screen desktop browsers, and \c{handheld} for mobile browsers.
     Browsers identifying themselves as \c{handheld} are served the
-    \bold{mobile.css} file,
-    which should specify a dramatically simplified mobile interface.
-
-    A problem arises,
-    however,
-    when the majority of higher-end touch browsers identify themselves as
-    the \c{screen} media type,
-    to avoid being served overly simplified content that is beneath their
-    capabilities.
-    The example above serves a desktop-oriented design to later-generation
-    mobile browsers.
-    To target a higher-end mobile design to these browsers,
-    you need to specify additional media \bold{queries}:
+    \c{mobile.css} file, which should specify a dramatically simplified
+    mobile interface.
+
+    A problem arises, however, when the majority of higher-end touch browsers
+    identify themselves as the \c{screen} media type, to avoid being served
+    overly simplified content that is beneath their capabilities. The example
+    above serves a desktop-oriented design to later-generation mobile browsers.
+    To target a higher-end mobile design to these browsers, you need to specify
+    additional media \c{queries}:
 
     \code
     <link media="only screen and (min-device-width: 481px)" href="/path/to/desktop.css" type="text/css" rel="stylesheet"/>
@@ -163,23 +141,24 @@ client.
     }
     \endcode
 
-    The following example demonstrates a simple message identifying your
-    class of browser,
-    which appears dynamically based on CSS that is linked using media
-    types and media query syntax:
+    The following example demonstrates a simple message identifying your class
+    of browser, which appears dynamically based on CSS that is linked using
+    media types and media query syntax:
 
     \l{mob_mediaquery}{\inlineimage webkit-guide/scr_mob_mediaquery.png
     }
 
+    \e{Click on the image to view the example live in a browser or click on the
+    following links to view the CSS files.}
+
     \l{mq_desktop_css}{(Desktop CSS)}
     \l{mq_touch_css}{(Touch-Screen CSS)}
     \l{mq_mobile_css}{(Low-end Mobile CSS)}
 
-    The following example shows a skeletal interface that appears
-    differently based on the type of browser viewing it.
-    The image below shows how it appears when viewed on a touch-based
-    browser,
-    but a desktop browser renders a more elaborate three-column layout:
+    The following example shows a skeletal interface that appears differently
+    based on the type of browser viewing it. The image below shows how it
+    appears when viewed on a touch-based browser, but a desktop browser renders
+    a more elaborate three-column layout:
 
     \l{mob_layout}{\inlineimage webkit-guide/scr_mob_layout.png
     }
@@ -209,44 +188,37 @@ client.
         and (max-device-width: 1024px)" href="/path/to/ipad.css"/>
     \endcode
 
-        \section3 In-line Media Queries
+    \section2 In-line Media Queries
 
-        While it\'s generally good practice to keep CSS for different designs
-        within separate files,
-        you can also consolidate them.
-        The following example provides a default san-serif font styling for
-        \c{h1} elements,
-        then different sets of style sheets for three browser categories:
+    While it's generally good practice to keep CSS for different designs within
+    separate files, you can also consolidate them. The following example
+    provides a default san-serif font styling for \c{h1} elements, then
+    different sets of style sheets for three browser categories:
 
-        \code
-        h1 { font-family : Arial, sans-serif }
-        @media screen {
-          h1 { color: #00008B; }
-        }
-        @media only screen and (max-device-width: 480px) {
-          h1 { color: #00008B; font-size: medium; }
-        }
-        @media handheld {
-          h1 { font-size: medium; font-weight: bold }
-        }
-        \endcode
+    \code
+    h1 { font-family : Arial, sans-serif }
+    @media screen {
+        h1 { color: #00008B; }
+    }
+    @media only screen and (max-device-width: 480px) {
+        h1 { color: #00008B; font-size: medium; }
+    }
+    @media handheld {
+        h1 { font-size: medium; font-weight: bold }
+    }
+    \endcode
 
-        Consolidating style sheets in this manner may reduce the number of
-        separate HTTP requests,
-        help web designers to keep track of variations among designs,
-        and reduce style sheet properties defined redundantly in more than
-        one file.
+    Consolidating style sheets in this manner may reduce the number of separate
+    HTTP requests, help web designers to keep track of variations among designs,
+    and reduce style sheet properties defined redundantly in more than one file.
 
     \section2 Media Queries via JavaScript
 
-    Browsers that support media queries also support APIs to test them
-    from within JavaScript.
-    Browsers based on QtWebKit use the \c{matchMedia} API.
-    Some other browsers use a slightly different (and older)
-    \c{styleMedia} API,
-    which itself used to be called the \c{media} API.
-    Each can be called from the \c{window} object.
-    The following function accounts for all three cases:
+    Browsers that support media queries also support APIs to test them from
+    within JavaScript. Browsers based on QtWebKit use the \c{matchMedia} API.
+    Some other browsers use a slightly different (and older) \c{styleMedia} API,
+    which itself used to be called the \c{media} API. Each can be called from
+    the \c{window} object. The following function accounts for all three cases:
 
     \code
     function matchesMediaQuery(query) {
@@ -261,13 +233,9 @@ client.
     \endcode
 
     The \c{query} argument corresponds to the media query string used to
-    activate the CSS.
-    For example,
-    the following higher-level function tests whether the browser matches
-    design categories provided simple labels such as
-    \c{desktop},
-    \c{touch},
-    or \c{mobile}:
+    activate the CSS. For example, the following higher-level function tests
+    whether the browser matches design categories provided simple labels such as
+    \c{desktop}, \c{touch}, or \c{mobile}:
 
     \code
     function isDesign(str) {
@@ -285,10 +253,9 @@ client.
     }
     \endcode
 
-    You can then use the test whenever there is a need to assign
-    functionality for a specific design.
-    The following gathers a series of images and assigns different
-    panel-viewing functions for \c{desktop} and \c{touch} designs,
+    You can then use the test whenever there is a need to assign functionality
+    for a specific design. The following gathers a series of images and assigns
+    different panel-viewing functions for \c{desktop} and \c{touch} designs,
     with no functionality assigned to the lower-end \c{mobile} design:
 
     \code
@@ -317,12 +284,10 @@ client.
 
 \section1 Selectors
 
-Level 3 CSS provides many useful new \bold{selectors} that make it
-easier to apply formatting to page elements.
-In addition,
-the \bold{Selectors API} makes DOM elements accessible using the same
-CSS expressions you use to apply formatting to them.
-The following show alternate ways to access elements:
+Level 3 CSS provides many useful new \e{selectors} that make it easier to apply
+formatting to page elements. In addition, the \l{Selectors API} makes DOM
+elements accessible using the same CSS expressions you use to apply formatting
+to them. The following show alternate ways to access elements:
 
 \code
 var element = document.getElementById('map');
@@ -337,22 +302,15 @@ selectors might be applied when formatting mobile interfaces.
 
     \section2 Attribute Matching
 
-    It is often useful to offer visual hints marking different kinds of
-    link.
-    Users might want to know the difference between a link to a page on
-    the same website and one on an external site.
-    Links to non-HTML file types might pose special challenges to mobile
-    users.
-    Alternately,
-    mobile users might get special benefit from telephone links.
-
-    You can automate this by using the CSS attribute prefix and suffix
-    matching selectors.
-    The following uses \c{^=} to mark external HTTP links,
-    email,
-    SMS,
-    and telephone links,
-    by inserting an icon after the text of the link:
+    It is often useful to offer visual hints marking different kinds of link.
+    Users might want to know the difference between a link to a page on the same
+    website and one on an external site. Links to non-HTML file types might pose
+    special challenges to mobile users. Alternately, mobile users might get
+    special benefit from telephone links.
+
+    You can automate this by using the CSS attribute prefix and suffix matching
+    selectors. The following uses \c{^=} to mark external HTTP links, email,
+    SMS, and telephone links, by inserting an icon after the text of the link:
 
     \code
     a[href^="http://"]:after, a[href^="https://"]:after
@@ -362,8 +320,7 @@ selectors might be applied when formatting mobile interfaces.
     a[href^="tel:"]:after    { content : url(icon/tel.gif); }
     \endcode
 
-    The following uses \c{$=} to identify various file types by common
-    suffixes:
+    The following uses \c{$=} to identify various file types by common suffixes:
 
     \code
     a[href$=".doc"]:after { content : url(icon/ms_word.gif) }
@@ -374,17 +331,16 @@ selectors might be applied when formatting mobile interfaces.
     a[href$=".xls"]:after { content : url(icon/excel.jpg) }
     \endcode
 
-    You can also use \c{*=} to freely match substrings within any
-    attribute value.
-    The following might distinguish links to a site\'s blog area based on
+    You can also use \c{*=} to freely match substrings within any attribute
+    value. The following might distinguish links to a site's blog area based on
     how the URL is organized:
 
     \code
     a[href*="/blog/"]:after { content : url(icon/blog.jpg )}
     \endcode
 
-    The following example demonstrates links identified by dynamically
-    generated icons:
+    The following example demonstrates links identified by dynamically generated
+    icons:
 
     \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
     }
@@ -393,8 +349,8 @@ selectors might be applied when formatting mobile interfaces.
 
     \section2 Form Input State
 
-    The \c{:checked} dynamic class allows you to style radio and checkbox
-    inputs based on their selection state:
+    The \c{:checked} dynamic class allows you to style radio and checkbox inputs
+    based on their selection state:
 
     \code
     input[type=radio],
@@ -406,116 +362,104 @@ selectors might be applied when formatting mobile interfaces.
     { text-align : left }
     \endcode
 
-    This enables the following mobile-friendly interface,
-    which converts small radio and check boxes to much more accessible
-    toggle buttons:
+    This enables the following mobile-friendly interface, which converts small
+    radio and check boxes to much more accessible toggle buttons:
 
     \l{form_toggler}{\inlineimage webkit-guide/scr_form_toggler.png
     }
 
     \l{form_toggler_css}{(CSS)}
 
-    Using the dynamic \c{:checked} CSS class,
-    the \c{text-align} property toggles from \c{left} to \c{right}
-    depending on whether the \c{input} is checked or not.
-    Note that to display button text,
-    dynamic classes can be chained together to form complex expressions:
+    Using the dynamic \c{:checked} CSS class, the \c{text-align} property
+    toggles from \c{left} to \c{right} depending on whether the \c{input} is
+    checked or not. Note that to display button text, dynamic classes can be
+    chained together to form complex expressions:
     \c{input[type=radio]:checked:before}.
 
-    The example also relies on the \c{-webkit-appearance} property,
-    which allows you to override the default visual presentation of
-    specialized interface elements such as radio and checkbox inputs.
+    The example also relies on the \c{-webkit-appearance} property, which allows
+    you to override the default visual presentation of specialized interface
+    elements such as radio and checkbox inputs.
 
-    The following example provides alternate styling for radio and
-    checkbox inputs,
-    presenting them as tappable buttons:
+    The following example provides alternate styling for radio and checkbox
+    inputs, presenting them as tappable buttons:
 
     \l{form_tapper}{\inlineimage webkit-guide/scr_form_tapper.png
     }
 
     \l{form_tapper_css}{(CSS)}
 
-    Form elements may also be re-styled based on whether they are
-    \c{:enabled} or \c{:disabled}.
-    In addition,
-    the \c{:focus} dynamic class allows you to style text form inputs or
-    other editable content regions that users have currently selected for
-    editing.
+    Form elements may also be re-styled based on whether they are \c{:enabled}
+    or \c{:disabled}. In addition, the \c{:focus} dynamic class allows you to
+    style text form inputs or other editable content regions that users have
+    currently selected for editing.
 
     \section2 Navigational Selectors
 
     Elements within a page that are the target of navigation can receive
-    distinct styling using the \c{:target} dynamic class.
-    The act of navigating to an element can alter its appearance,
-    or even determine if it is to appear at all.
+    distinct styling using the \c{:target} dynamic class. The act of navigating
+    to an element can alter its appearance, or even determine if it is to appear
+    at all.
 
-    The following example relies on anchor navigation to display
-    successive rows of a table within a mobile interface:
+    The following example relies on anchor navigation to display successive rows
+    of a table within a mobile interface:
 
     \l{layout_tbl-keyhole}{\inlineimage webkit-guide/scr_layout_tbl-keyhole.png
     }
 
     \l{layout_tbl-keyhole_css}{(CSS)}
 
-    While the example relies on table-related tags,
-    they are re-styled with block formatting to confine each row of
-    information within the screen.
-    Each row features links to other rows,
-    triggering their display.
-    Other links navigate away from the table,
-    which suppresses its display altogether.
-    This is the main CSS driving the interface:
+    While the example relies on table-related tags, they are re-styled with
+    block formatting to confine each row of information within the screen. Each
+    row features links to other rows, triggering their display. Other links
+    navigate away from the table, which suppresses its display altogether. This
+    is the main CSS driving the interface:
 
     \code
     .mobile > tbody > tr        { display : none  }
     .mobile > tbody > tr:target { display : block }
     \endcode
 
-    The same technique may be used to display or dismiss optional
-    interface elements such as panels,
-    simply by providing navigation links to them within the page.
+    The same technique may be used to display or dismiss optional interface
+    elements such as panels, simply by providing navigation links to them within
+    the page.
 
     \section2 Indirect Sibling Selector
 
-    The Level 2 \c{+} selector allows you to style elements that
-    immediately follow other specified elements.
-    For example,
-    the following refers to a paragraph that immediately
-    follows a heading at the same level of markup:
+    The Level 2 \c{+} selector allows you to style elements that immediately
+    follow other specified elements. For example, the following refers to a
+    paragraph that immediately follows a heading at the same level of markup:
 
     \code
     h1 + p { font-weight: bold }
     \endcode
 
-    In contrast,
-    the Level 3 \c{~} indirect sibling selector allows you to style any
-    subsequent element at the same level within the markup.
-    The following example styles any element that follows an \c{h2} that
-    is classed \c{pullquote}:
+    In contrast, the Level 3 \c{~} indirect sibling selector allows you to style
+    any subsequent element at the same level within the markup. The following
+    example styles any element that follows an \c{h2} that is classed
+    \c{pullquote}:
 
     \code
     h2 ~ .pullquote { font-size: 90% }
     \endcode
 
-    \bold{NOTE:} Webkit-based browsers do not yet allow you to style
+    \note Webkit-based browsers do not yet allow you to style
     elements dynamically via indirect sibling selectors.
 
     \section2 Positional Selectors
 
     Various dynamic classes allow you to style elements depending on their
-    position with a series of elements: either elements of the same type,
-    or other child elements of the same parent.
-    The following example aligns a series of icons to a grid:
+    position with a series of elements: either elements of the same type, or
+    other child elements of the same parent. The following example aligns a
+    series of icons to a grid:
 
     \l{css3_sel-nth}{\inlineimage webkit-guide/scr_css3_sel-nth.png
     }
 
     \l{css3_sel-nth_css}{(CSS)}
 
-    Columns are specified with the \c{:nth-of-type()} selector,
-    which accepts numeric expressions as arguments.
-    The following selectors refer to every fourth \c{img} element,
-    but offset by a specified number:
+    Columns are specified with the \c{:nth-of-type()} selector, which accepts
+    numeric expressions as arguments. The following selectors refer to every
+    fourth \c{img} element, but offset by a specified number:
 
     \code
     img            { position: absolute }
@@ -525,17 +469,13 @@ selectors might be applied when formatting mobile interfaces.
     img:nth-of-type(4n-0)    { left: 77% }
     \endcode
 
-    Alternately,
-    keywords \c{odd} and \c{even} correspond to \c{2n-1} and
-    \c{2n} expressions.
-    These are useful,
-    for example,
-    when styling table rows with alternating background colors.
+    Alternately, keywords \c{odd} and \c{even} correspond to \c{2n-1} and \c{2n}
+    expressions. These are useful, for example, when styling table rows with
+    alternating background colors.
 
-    Rows are represented as the number of the element within the series,
-    plus a fixed number.
-    Each selector redefines the previous selector\'s upper range of
-    values:
+    Rows are represented as the number of the element within the series, plus a
+    fixed number. Each selector redefines the previous selector's upper range
+    of values:
 
     \code
     img:nth-of-type(n)    { top: 5% }
@@ -549,22 +489,14 @@ selectors might be applied when formatting mobile interfaces.
     Level 3 CSS defines the following positional selectors:
 
     \list
+    \o \c{:first-child}, \c{:last-child}, and \c{:only-child} refer to the first
+    or last child element within a series, or when it is the only one.
 
-    \o \c{:first-child},
-    \c{:last-child},
-    and \c{:only-child} refer to the first or last child element within a
-    series,
-    or when it is the only one.
+    \o \c{:first-of-type}, \c{:last-of-type}, and \c{:only-of-type} refer to the
+    first or last specified element within a series, or when it is the only one.
 
-    \o \c{:first-of-type},
-    \c{:last-of-type},
-    and \c{:only-of-type} refer to the first or last specified element
-    within a series,
-    or when it is the only one.
-
-    \o \c{:nth-first-child()} and \c{:nth-last-child()} refer to the
-    specified child element positioned from the start or end of the
-    series.
+    \o \c{:nth-first-child()} and \c{:nth-last-child()} refer to the specified
+    child element positioned from the start or end of the series.
 
     \o \c{:nth-first-of-type()} and \c{:nth-last-of-type()} refer to the
     specified element positioned from the start or end of the series.
@@ -604,24 +536,17 @@ selectors might be applied when formatting mobile interfaces.
 
 \section1 Visual Effects
 
-QtWebKit supports numerous Level 3 CSS features.
-This section briefly demonstrates how many of these recently available
-visual features may be used to refine mobile web designs.
-
-These more advanced CSS3 effects tend to be available only on the
-latest generation of mobile browsers.
-Still,
-it is safe to use them,
-even if the design degrades somewhat for devices that don\'t support
-them.
-When a browser encounters CSS properties or values it can\'t
-interpret,
-it simply ignores them.
-Designers can respond by providing fallback options to allow for
-\bold{graceful degradation}.
-For example,
-the following CSS specifies a plain gray background in case the
-browser does not support gradients:
+QtWebKit supports numerous Level 3 CSS visual features. This section briefly
+demonstrates how many of these recently available visual features may be used to
+refine mobile web designs.
+
+These more advanced CSS3 effects tend to be available only on the latest
+generation of mobile browsers. Still, it is safe to use them, even if the design
+degrades somewhat for devices that don't support them. When a browser
+encounters CSS properties or values it can't interpret, it simply ignores them.
+Designers can respond by providing fallback options to allow for \e{graceful
+degradation}. For example, the following CSS specifies a plain gray background
+in case the browser does not support gradients:
 
 \code
 background: #aaaaaa;
@@ -629,22 +554,17 @@ background: -webkit-gradient(linear, center top, center bottom,
         from(#777777), color-stop(50%,#dddddd), to(#777777) );
 \endcode
 
-Note that many of the CSS properties discussed in this section were
-implemented relatively recently,
-and vendors of browser rendering engines (such as WebKit) may still be
-in the process of testing and standardizing their behavior.
-These property names feature \bold{vendor prefixes} such as
-\c{-webkit-} for WebKit,
-\c{-moz-} for Mozilla,
-and \c{-o-} for Opera.
-
-It may be possible to extend CSS properties to these various browsers
-by providing vendor-specific syntax.
-The following example shows how to extend the \c{border-image}
-property to the Opera browser or Mozilla-based Fennec or the Maemo
-Browser for Nokia N900.
-It also shows the property\'s final name following the process of
-standardization:
+Note that many of the CSS properties discussed in this section were implemented
+relatively recently, and vendors of browser rendering engines (such as WebKit)
+may still be in the process of testing and standardizing their behavior. These
+property names feature \e{vendor prefixes} such as \c{-webkit-} for WebKit,
+\c{-moz-} for Mozilla, and \c{-o-} for Opera.
+
+It may be possible to extend CSS properties to these various browsers by
+providing vendor-specific syntax. The following example shows how to extend the
+\c{border-image} property to the Opera browser or Mozilla-based Fennec or the
+Maemo Browser for Nokia N900. It also shows the property's final name following
+the process of standardization:
 
 \code
 -webkit-border-image     : url(img/border-frame.gif) 10 stretch stretch;
@@ -653,36 +573,28 @@ standardization:
 border-image         : url(img/border-frame.gif) 10 stretch stretch;
 \endcode
 
-In some cases,
-there are slight variations in the syntax each vendor expects as
+In some cases, there are slight variations in the syntax each vendor expects as
 property values.
 
     \section2 Specifying Color and Opacity
 
-    Prior to CSS3,
-    there were three options when specifying color values:
-    named colors,
-    hexadecimal color values,
-    or RGB values.
-    CSS3 provides additional ways to specify colors:
+    Prior to CSS3, there were three options when specifying color values: named
+    colors, hexadecimal color values, or RGB values. CSS3 provides additional
+    ways to specify colors:
 
     \list
-
-    \o \bold{HSL}.
-    Colors defined with the HSL model specify the
-    \bold{hue} as a radial or degree coordinate,
-    then its
-    \bold{saturation} and \bold{luminence} as percentages.
-    The following example specifies red and green values:
+    \o \e{HSL}. Colors defined with the HSL model specify the \e{hue} as a
+    radial or degree coordinate, then its \e{saturation} and \e{luminence}
+    as percentages. The following example specifies red and green values:
 
     \code
     background: hsl(0  , 100%, 60%);
     background: hsl(128, 75% , 33%);
     \endcode
 
-    \o \bold{HSLA}.
+    \o \e{HSLA}.
     Same as HSL,
-    but specifying an additional decimal \bold{alpha} value that
+    but specifying an additional decimal \e{alpha} value that
     corresponds to opacity.
     The following specifies a fully opaque red,
     followed by a partial transparency:
@@ -692,9 +604,9 @@ property values.
     background: hsla(0, 100%, 60%, 0.5);
     \endcode
 
-    \o \bold{RGBA}.
+    \o \e{RGBA}.
     Same as RGB,
-    but specifying an additional decimal \bold{alpha} value that
+    but specifying an additional decimal \e{alpha} value that
     corresponds to opacity.
     The following the same transition from opaque to transparent as shown
     above:
@@ -703,23 +615,19 @@ property values.
     background: rgba(100%, 0%, 0%, 1.0);
     background: rgba(100%, 0%, 0%, 0.5);
     \endcode
-
     \endlist
 
-    With the addition of opacity to color definitions,
-    you can now also specify \c{transparent} as a color name.
-    Note that while RGBA and HSLA options are now available,
-    you can still use the familiar \c{opacity} property independently of
-    color definitions.
+    With the addition of opacity to color definitions, you can now also specify
+    \c{transparent} as a color name. Note that while RGBA and HSLA options are
+    now available, you can still use the familiar \c{opacity} property
+    independently of color definitions.
 
     \section2 Rounded Corners
 
-    In addition to removing harsh edges,
-    rounded corners often help distinguish active items from static
-    background elements.
-    Rounded corners are implemented using the \c{border-radius} property.
-    The following rounds off an edge to the same extent that interior
-    elements are offset:
+    In addition to removing harsh edges, rounded corners often help distinguish
+    active items from static background elements. Rounded corners are
+    implemented using the \c{border-radius} property. The following rounds off
+    an edge to the same extent that interior elements are offset:
 
     \code
     .rounded {
@@ -728,21 +636,19 @@ property values.
     }
     \endcode
 
-    The following example demonstrates how rounded corners can enhance a
-    mobile design,
-    by marking the start and end of large regions of content,
-    such as a list of links:
+    The following example demonstrates how rounded corners can enhance a mobile
+    design, by marking the start and end of large regions of content, such as a
+    list of links:
 
     \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
     }
 
     \l{layout_link-fmt_css}{(CSS)}
 
-    The greater the measurement applied to an element\'s \c{border-radius},
-    the more dramatically rounded are its corners.
-    For example,
-    applying a \c{border-radius} that is half an element\'s overall
-    dimensions results in a circle:
+    The greater the measurement applied to an element's \c{border-radius}, the
+    more dramatically rounded are its corners. For example, applying a
+    \c{border-radius} that is half an element's overall dimensions results in a
+    circle:
 
     \code
     .circle {
@@ -752,8 +658,8 @@ property values.
     }
     \endcode
 
-    You can also set each corner individually,
-    and specify a pair of values to achieve oval-shaped borders:
+    You can also set each corner individually, and specify a pair of values to
+    achieve oval-shaped borders:
 
     \code
     border-top-left-radius : 2em/1em;
@@ -761,81 +667,65 @@ property values.
 
     \section2 Border Images
 
-    Border images allow you to apply customized marquee effects,
-    as in the following example:
+    Border images allow you to apply customized marquee effects, as in the
+    following example:
 
     \l{css3_border-img}{\inlineimage webkit-guide/scr_css3_border-img.png
     }
 
     \l{css3_border-img_css}{(CSS)}
 
-    In this case,
-    the image stretches to fit an element\'s dimensions:
+    In this case, the image stretches to fit an element's dimensions:
 
     \code
     -webkit-border-image : url(img/border-frame.gif) 10 stretch stretch;
     \endcode
 
-    As is true of the \c{border} property,
-    a single numeric argument specifies the width of the border as a
-    whole,
-    or up to four values to modify the width of each side.
+    As is true of the \c{border} property, a single numeric argument specifies
+    the width of the border as a whole, or up to four values to modify the width
+    of each side.
 
-    Any border image you specify substitutes some or all of an element\'s
-    normal border.
-    The \c{border-image} and \c{border-corner-image} each collectively
+    Any border image you specify substitutes some or all of an element's normal
+    border. The \c{border-image} and \c{border-corner-image} each collectively
     represent four more specific properties.
-    For \c{border-image},
-    these properties are:
 
-    \list
+    For \c{border-image}, these properties are:
 
+    \list
     \o \c{border-top-image}
     \o \c{border-right-image}
     \o \c{border-bottom-image}
     \o \c{border-left-image}
-
     \endlist
 
-    For \c{border-corner-image},
-    these properties are:
-
+    For \c{border-corner-image}, these properties are:
     \list
-
     \o \c{border-top-left-image}
     \o \c{border-top-right-image}
     \o \c{border-bottom-right-image}
     \o \c{border-bottom-left-image}
-
     \endlist
 
-    The \c{border-image} property specifies a single image for all four
-    edge borders.
-    The \c{border-corner-image} property specifies an image for all four
-    corner borders.
-    To specify images individually for any of the edge or corner borders,
-    use any of the eight individual properties.
+    The \c{border-image} property specifies a single image for all four edge
+    borders. The \c{border-corner-image} property specifies an image for all
+    four corner borders. To specify images individually for any of the edge or
+    corner borders, use any of the eight individual properties.
 
     When specifying any border edge or corner image values:
 
     \list
-
-    \o A \c{stretch} value stretches one image to fill the element border
-    area,
+    \o A \c{stretch} value stretches one image to fill the element border area,
     as shown in the example above.
 
-    \o A \c{repeat} value repeats one image until it fills the element
-    border area and clips any overflow,
-    for example:
+    \o A \c{repeat} value repeats one image until it fills the element border
+    area and clips any overflow, for example:
 
     \code
     -webkit-border-image : url(img/border-frame.gif) 10 repeat repeat;
     \endcode
 
-    In this case the first \c{repeat} applies to top and bottom edge
-    borders,
+    In this case the first \c{repeat} applies to top and bottom edge borders,
     and the second applies to left and right edge borders.
-
     \endlist
 
     \section2 Backgrounds
@@ -849,12 +739,10 @@ property values.
     \l{css3_backgrounds_css}{(CSS)}
     \l{css3_backgrounds_js}{(JavaScript)}
 
-    By default,
-    tabs display a single icon image,
-    but when selected feature an additional gradient background image.
-    The following CSS shows how both icon and background can receive their
-    own series of specifications,
-    affecting their offset or whether each image repeats:
+    By default, tabs display a single icon image, but when selected feature an
+    additional gradient background image. The following CSS shows how both icon
+    and background can receive their own series of specifications, affecting
+    their offset or whether each image repeats:
 
     \code
     background-image    : url(img/select.png)    , url(img/gradient.jpg);
@@ -862,29 +750,24 @@ property values.
     background-position    : 12px 12px        , 0 0;
     \endcode
 
-    In addition,
-    you may set the \c{background-size} property to
-    \c{contain} to scale images to the size of the containing element.
-    (Level 2 CSS allowed only specific measurements or percentages of the
-    image's size.)
+    In addition, you may set the \c{background-size} property to \c{contain} to
+    scale images to the size of the containing element. (Level 2 CSS allowed
+    only specific measurements or percentages of the image's size.)
 
     \section2 Text Shadow and Stroke
 
-    Shadows can be applied to text.
-    As the following example shows,
-    text shadows may interfere with the legibility of text,
-    and are seldom appropriate unless they\'re used for large,
-    sans-serif display headings:
+    Shadows can be applied to text. As the following example shows, text shadows
+    may interfere with the legibility of text, and are seldom appropriate unless
+    they're used for large, sans-serif display headings:
 
     \l{css3_text-shadow}{\inlineimage webkit-guide/scr_css3_text-shadow.png
     }
 
     \l{css3_text-shadow_css}{(CSS)}
 
-    In addition to the shadow\'s color,
-    the property accepts two measurements to represent its offset from the
-    text,
-    while the third specifies the extent to which the shadow is blurred:
+    In addition to the shadow's color, the property accepts two measurements to
+    represent its offset from the text, while the third specifies the extent to
+    which the shadow is blurred:
 
     \code
     h1,h2,h3,h4 { text-shadow : 0.25em 0.25em 0.25em #aaaaaa; }
@@ -898,9 +781,8 @@ property values.
 
     \l{css3_text-stroke_css}{(CSS)}
 
-    In the following CSS,
-    \c{-webkit-text-fill-color} is synonymous with the standard \c{color}
-    property:
+    In the following CSS, \c{-webkit-text-fill-color} is synonymous with the
+    standard \c{color} property:
 
     \code
     -webkit-text-stroke-color    : #000000;
@@ -910,17 +792,14 @@ property values.
 
     \section2 Text Overflow
 
-    Web developers are familiar with the \c{overflow} property,
-    which can be used to hide content that exceeds an element\'s dimensions,
-    or else to make it accessible via scrolling.
-    CSS3 specifies an additional \c{text-overflow} property that allows
-    you to add ellipses as a suffix to any text that overflows the
-    element,
-    to indicate the presence of additional text.
+    Web developers are familiar with the \c{overflow} property, which can be
+    used to hide content that exceeds an element's dimensions, or else to make
+    it accessible via scrolling. CSS3 specifies an additional \c{text-overflow}
+    property that allows you to add ellipses as a suffix to any text that
+    overflows the element, to indicate the presence of additional text.
 
-    The following example shows how the \c{text-overflow} property allows
-    you to present user-selectable links to expanded regions of text
-    within a page:
+    The following example shows how the \c{text-overflow} property allows you to
+    present user-selectable links to expanded regions of text within a page:
 
     \l{css3_text-overflow}{\inlineimage webkit-guide/scr_css3_text-overflow.png
     }
@@ -928,8 +807,8 @@ property values.
     \l{css3_text-overflow_css}{(CSS)}
     \l{css3_text-overflow_js}{(JavaScript)}
 
-    Use the \c{text-overflow} property in conjunction with \c{overflow}
-    and \c{white-space}:
+    Use the \c{text-overflow} property in conjunction with \c{overflow} and
+    \c{white-space}:
 
     \code
     text-overflow    : ellipsis;
@@ -937,55 +816,48 @@ property values.
     white-space    : nowrap;
     \endcode
 
-    For \c{text-overflow} to work,
-    the element\'s \c{white-space} must be set to \c{nowrap},
-    overriding the default \c{normal} value.
-    This prevents words from wrapping onto another line as is standard
-    behavior outside the \c{pre} tag,
-    and forces text past the right edge of the element.
+    For \c{text-overflow} to work, the element's \c{white-space} must be set to
+    \c{nowrap}, overriding the default \c{normal} value. This prevents words
+    from wrapping onto another line as is standard behavior outside the \c{pre}
+    tag, and forces text past the right edge of the element.
 
-    (The element\'s \c{text-overflow} may specify both \c{ellipsis} and
-    \c{ellipsis-word},
-    the latter of which is not as widely implemented.)
+    (The element's \c{text-overflow} may specify both \c{ellipsis} and
+    \c{ellipsis-word}, the latter of which is not as widely implemented.)
 
     \section2 Custom Scrollbars
 
-    In general,
-    scrollable elements should be avoided wherever possible
-    within mobile interfaces.
-    Drag gestures already allow users to scroll windows vertically,
-    and narrow mobile screens are not suitable for overly wide content.
+    In general, scrollable elements should be avoided wherever possible within
+    mobile interfaces. Drag gestures already allow users to scroll windows
+    vertically, and narrow mobile screens are not suitable for overly wide
+    content.
 
     In cases where content can only be viewed within a scrolling window,
-    scrollbars can be reformatted to make them more accessible to mobile
-    users.
-    The following example presents a block of code within a touch-enabled
-    mobile interface:
+    scrollbars can be reformatted to make them more accessible to mobile users.
+    The following example presents a block of code within a touch-enabled mobile
+    interface:
 
     \l{css3_scroll}{\inlineimage webkit-guide/scr_css3_scroll.png
     }
 
     \l{css3_scroll_css}{(CSS)}
 
-    This interface uses standard scrollbars,
-    but their appearance is enhanced using low-level \bold{pseudo-element}
-    CSS classes that refer to individual components within the scrollbar.
+    This interface uses standard scrollbars, but their appearance is enhanced
+    using low-level \e{pseudo-element} CSS classes that refer to individual
+    components within the scrollbar.
 
-    Simply by invoking the following CSS selector,
-    you disable scrollbars\' default appearance:
+    Simply by invoking the following CSS selector, you disable scrollbars'
+    default appearance:
 
     \code
     pre::-webkit-scrollbar { height : 3em }
     \endcode
 
-    In this case,
-    the specified property increases the scrollbar\'s default \c{height}
-    to make it easier for mobile users to tap it with their fingers.
+    In this case, the specified property increases the scrollbar's default
+    \c{height} to make it easier for mobile users to tap it with their fingers.
 
     Each additional scrollbar component must then be explicitly defined,
-    otherwise it does not render.
-    The following CSS provides custom styling for the horizontal panning
-    buttons:
+    otherwise it does not render. The following CSS provides custom styling for
+    the horizontal panning buttons:
 
     \code
     ::-webkit-scrollbar-button:increment {
@@ -1004,46 +876,40 @@ property values.
     }
     \endcode
 
-    In this case,
-    the scrollbar region between the two navigation icons is still active,
-    but not obviously so since its visual formatting has been overridden.
-    The simpler set of controls is far more suitable for a mobile
+    In this case, the scrollbar region between the two navigation icons is still
+    active, but not obviously so since its visual formatting has been
+    overridden. The simpler set of controls is far more suitable for a mobile
     interface.
 
     Webkit provides pseudo-elements for the following components:
 
     \list
+    \o \c{scrollbar} refers to scrollbar as a whole. Additional dynamic classes
+    can be appended to specify \c{:vertical} and \c{:horizontal} scrollbars. The
+    \c{:corner-present} dynamic class activates when both scrollbars are
+    present.
 
-    \o \c{scrollbar} refers to scrollbar as a whole.
-    Additional dynamic classes can be appended to specify \c{:vertical}
-    and \c{:horizontal} scrollbars.
-    The \c{:corner-present} dynamic class activates when both scrollbars
-    are present.
-
-    \o \c{scrollbar-button} refers to incremental navigation buttons.
-    Each button can be styled separately with \c{:increment} and
-    \c{:decrement} dynamic classes.
+    \o \c{scrollbar-button} refers to incremental navigation buttons. Each
+    button can be styled separately with \c{:increment} and \c{:decrement}
+    dynamic classes.
 
-    \o \c{scrollbar-thumb} refers to the scrollbar\'s slider control.
+    \o \c{scrollbar-thumb} refers to the scrollbar's slider control.
 
     \o \c{scrollbar-track} refers to the active navigation region between
     buttons.
 
-    \o \c{scrollbar-track-piece} refers to each portion of the track on
-    either side of the thumb control.
-    These can be styled separately using \c{:start} and \c{:end} dynamic
-    classes.
-
-    \o \c{scrollbar-corner} refers to the corner where scrollbar tracks
-    meet.
-    The \c{resizer} pseudo-element also refers to this corner,
-    but for resizable elements such as \c{textarea}.
+    \o \c{scrollbar-track-piece} refers to each portion of the track on either
+    side of the thumb control. These can be styled separately using \c{:start}
+    and \c{:end} dynamic classes.
 
-    \o The \c{:double-button} and \c{:single-button} dynamic classes refer
-    to whether incrementor and decrementors are paired together
-    redundantly at each end of the track,
-    while \c{:no-button} refers to whether they display at all.
+    \o \c{scrollbar-corner} refers to the corner where scrollbar tracks meet.
+    The \c{resizer} pseudo-element also refers to this corner, but for resizable
+    elements such as \c{textarea}.
 
+    \o The \c{:double-button} and \c{:single-button} dynamic classes refer to
+    whether incrementor and decrementors are paired together redundantly at each
+    end of the track, while \c{:no-button} refers to whether they display at
+    all.
     \endlist
 
     \bold{See Also:}
@@ -1052,11 +918,9 @@ property values.
 
     \section2 Gradients
 
-    Gradients provide a graduated shading effect that can add subtle
-    texture to background elements,
-    and can provide buttons a three-dimensional,
-    beveled appearance.
-    Explicit support for gradients means there's no longer a need to
+    Gradients provide a graduated shading effect that can add subtle texture to
+    background elements, and can provide buttons a three-dimensional, beveled
+    appearance. Explicit support for gradients means there's no longer a need to
     implement them as repeating background images.
 
     Specify gradients using CSS properties such as the following:
@@ -1067,59 +931,52 @@ property values.
                     from(#dddddd), to(#777777) );
     \endcode
 
-    Note the pair of \c{background} statements.
-    The first specifies a monochrome fallback color for browsers that do
-    not support gradients.
+    Note the pair of \c{background} statements. The first specifies a monochrome
+    fallback color for browsers that do not support gradients.
 
-    The function specifies a simple \c{linear} gradient from the top to
-    the bottom of the element,
-    shifting from a light to a darker gray.
+    The function specifies a simple \c{linear} gradient from the top to the
+    bottom of the element, shifting from a light to a darker gray.
 
-    The following example shows how this gradient can be applied to a
-    background element:
+    The following example shows how this gradient can be applied to a background
+    element:
 
     \l{css3_gradientBack}{\inlineimage webkit-guide/scr_css3_gradientBack.png
     }
 
     \l{css3_gradientBack_css}{(CSS)}
 
-    Gradients cannot be applied to the \c{body} element.
-    Instead,
-    they are here applied to an element covers the background.
+    Gradients cannot be applied to the \c{body} element. Instead, they are here
+    applied to an element that covers the background.
 
-    You can specify more than one gradient for the same element.
-    The following shifts from a dark to a light gray halfway down the
-    element,
-    then back to dark:
+    You can specify more than one gradient for the same element. The following
+    shifts from a dark to a light gray halfway down the element, then back to
+    dark:
 
     \code
     background: -webkit-gradient(linear, center top, center bottom,
             from(#777777), color-stop(50%, #dddddd), to(#777777) );
     \endcode
 
-    Here is how the additional \c{color-stop} appears when applied to the
-    same background element:
+    Here is how the additional \c{color-stop} appears when applied to the same
+    background element:
 
     \l{css3_gradientBackStop}{\inlineimage webkit-guide/scr_css3_gradientBackStop.png
     }
 
     \l{css3_gradientBackStop_css}{(CSS)}
 
-    Gradients can also provide a textured,
-    three-dimensional appearance for buttons.
-    In the following example,
-    the gradient is inverted and darkened when each button is pressed:
+    Gradients can also provide a textured, three-dimensional appearance for
+    buttons. In the following example, the gradient is inverted and darkened
+    when each button is pressed:
 
     \l{css3_gradientButton}{\inlineimage webkit-guide/scr_css3_gradientButton.png
     }
 
     \l{css3_gradientButton_css}{(CSS)}
 
-    In addition to linear gradients,
-    CSS3 also specifies \bold{radial} gradients that emanate from a single
-    point.
-    The following example demonstrates a colorful radial gradient used to
-    mark where users touch the screen:
+    In addition to linear gradients, CSS3 also specifies \bold{radial} gradients
+    that emanate from a single point. The following example demonstrates a
+    colorful radial gradient used to mark where users touch the screen:
 
     \l{css3_grad-radial}{\inlineimage webkit-guide/scr_css3_grad-radial.png
     }
@@ -1127,38 +984,31 @@ property values.
     \l{css3_grad-radial_css}{(CSS)}
     \l{css3_grad-radial_js}{(JavaScript)}
 
-    The syntax is slightly different than for lineal gradients.
-    The first two comma-separated arguments after the \c{radial} statement
-    specify the coordinates of the inner circle,
-    and its radius.
-    The next two arguments specify the coordinates and radius of the outer
-    circle:
+    The syntax is slightly different than for linear gradients. The first two
+    comma-separated arguments after the \c{radial} statement specify the
+    coordinates of the inner circle, and its radius. The next two arguments
+    specify the coordinates and radius of the outer circle:
 
     \code
     background: -webkit-gradient(radial, 90 120, 5, 100 130, 48,
             from(#777777), color-stop(50%, #dddddd), to(#777777) );
     \endcode
 
-    The use of \c{from} and \c{to} values and \c{color-stop} are same as
-    for linear gradients.
+    The use of \c{from}, \c{to} values and \c{color-stop} in radial gradients
+    are the same as for linear gradients.
 
     \section2 Reflections
 
-    Reflections offer a mirror-like effect which,
-    in the following example,
-    adds a sense of weight to headings and images:
+    Reflections offer a mirror-like effect which, in the following example, adds
+    a sense of weight to headings and images:
 
     \l{css3_reflect}{\inlineimage webkit-guide/scr_css3_reflect.png
     }
 
     \l{css3_reflect_css}{(CSS)}
 
-    The property's syntax specifies the edge of the element at which to
-    reflect,
-    the offset,
-    and an overlay color.
-    In this case,
-    the color is a gradient,
+    The property's syntax specifies the edge of the element at which to reflect,
+    the offset, and an overlay color. In this case, the color is a gradient,
     which causes the reflection to gradually fade:
 
     \code
@@ -1169,11 +1019,9 @@ property values.
 
     \section2 Masks
 
-    Masks offer a way to modify an image by overlaying either another
-    image,
-    or a gradient.
-    The following example shows a series of thumbnail images that appear
-    faded at their bottom edge until selected:
+    Masks offer a way to modify an image by overlaying either another image, or
+    a gradient. The following example shows a series of thumbnail images that
+    appear faded at their bottom edge until selected:
 
     \l{css3_mask-grad}{\inlineimage webkit-guide/scr_css3_mask-grad.png
     }
@@ -1181,30 +1029,30 @@ property values.
     \l{css3_mask-grad_css}{(CSS)}
     \l{css3_mask-grad_js}{(JavaScript)}
 
-    The gradient\'s opacity shifts from 1 to 0,
-    an effect that translates to the image:
+    The gradient's opacity shifts from \c 1 to \c 0, an effect that translates
+    to the image:
 
     \code
     -webkit-mask-box-image : -webkit-gradient(linear, left top, left
        bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     \endcode
 
-    The following example demonstrates an image used as a mask to frame
-    another image:
+    The following example demonstrates an image used as a mask to frame another
+    image:
 
     \l{css3_mask-img}{\inlineimage webkit-guide/scr_css3_mask-img.png
     }
 
     \l{css3_mask-img_css}{(CSS)}
 
-    Separately,
-    the component images look like this:
+    Separately, the component images look like these:
+
+    \inlineimage webkit-guide/mask0.png
+    \inlineimage webkit-guide/mask1.png
 
-    \image webkit-guide/mask0.png
-    \image webkit-guide/mask1.png
 
-    The syntax is the same for border images,
-    and allows you to stretch one image over the other:
+    The syntax is the same for border images, and allows you to stretch one
+    image over the other:
 
     \code
     -webkit-mask-box-image : url(img/mask.png) 5% stretch;
@@ -1212,174 +1060,138 @@ property values.
 
 \section1 Dynamic CSS
 
-Animations help enhance touch-based mobile interfaces in many ways.
-They help ease transitions from one display state to another that
-might otherwise appear jarring.
-They help provide a sense of navigational orientation.
-They also often simulate tactile feedback as users\' touches result in
-a tangible visual effect.
-Overall,
-they add a sense of vibrancy that increases users\'
-engagement with the content on display.
-
-Support by QtWebKit for HTML5 allows you to choose from among several
-flavors of web-based animation:
-Canvas,
-SVG,
-and Level 3 CSS.
-Web developers may also be familiar with lower-level JavaScript-based
-animation techniques,
-which form the basis of many popular JavaScript libraries such as
-jQuery and Prototype.
-This section focuses on CSS-based animations,
-since they are more appropriate to integrate throughout a web design,
-without the additional overhead JavaScript libraries require.
-Like Flash,
-SVG and Canvas offer more specialized,
-low-level graphics frameworks whose animation features
-are more appropriate for generating standalone effects.
-
-This section demonstrates animation techniques by offering a series of
-examples that apply to common mobile design tasks.
-While some of these tasks are addressed by existing JavaScript
-frameworks such as jQuery and Prototype,
-the examples provided here illustrate some CSS-only alternatives.
+Animations help enhance touch-based mobile interfaces in many ways. They help
+ease transitions from one display state to another that might otherwise appear
+jarring. They help provide a sense of navigational orientation. They also often
+simulate tactile feedback as users' touches result in a tangible visual effect.
+Overall, they add a sense of vibrancy that increases users' engagement with the
+content on display.
+
+Support by QtWebKit for HTML5 allows you to choose from among several flavors of
+web-based animation: Canvas, SVG, and Level 3 CSS. Web developers may also be
+familiar with lower-level JavaScript-based animation techniques, which form the
+basis of many popular JavaScript libraries such as jQuery and Prototype. This
+section focuses on CSS-based animations, since they are more appropriate to
+integrate throughout a web design, without the additional overhead JavaScript
+libraries require. Like Adobe Flash, SVG and Canvas offer more specialized,
+low-level graphics frameworks whose animation features are more appropriate for
+generating standalone effects.
+
+This section demonstrates animation techniques by offering a series of examples
+that apply to common mobile design tasks. While some of these tasks are
+addressed by existing JavaScript frameworks such as jQuery and Prototype, the
+examples provided here illustrate some CSS-only alternatives.
 
     \section2 CSS Animation Concepts
 
     Level 3 CSS introduces three distinct concepts that are relevant when
-    crafting dynamic effects,
-    which are discussed in the following sections:
+    crafting dynamic effects, which are discussed in the following sections:
 
     \list
-
-    \o \bold{Transforms} offer a series of manipulations to screen
-    elements.
-    By themselves,
-    transforms present only static visual effects,
-    but they become especially useful as part of dynamic transitions and
-    animations.
-    Simple transforms are two-dimensional,
-    with three-dimensional transforms gaining gradual support.
-
-    \o \bold{Transitions} entail a graduated shift from one explicit
-    display state to another.
-    Transitional shifts apply to any CSS property that specifies numeric
-    or color values.
-
-    \o \bold{Animations} offer more complex sequences of transitions that
-    can specify many intermediate display states.
-    Unlike simple transitions,
+    \o \e{Transforms} offer a series of manipulations to screen elements. By
+    themselves, transforms present only static visual effects, but they become
+    especially useful as part of dynamic transitions and animations. Simple
+    transforms are two-dimensional, with three-dimensional transforms gaining
+    gradual support.
+
+    \o \e{Transitions} entail a graduated shift from one explicit display
+    state to another. Transitional shifts apply to any CSS property that
+    specifies numeric or color values.
+
+    \o \e{Animations} offer more complex sequences of transitions that can
+    specify many intermediate display states. Unlike simple transitions,
     animations can also be initiated more freely.
-
     \endlist
 
     \section2 2D Transforms
 
-    Transforms allow you to freely displace box elements from where they
-    would ordinarily appear.
-    Several transform functions are available,
-    allowing you to \bold{scale},
-    \bold{rotate},
-    \bold{skew},
-    or \bold{translate} (move) objects.
+    Transforms allow you to freely displace box elements from where they would
+    ordinarily appear. Several transform functions are available, allowing you
+    to \e{scale}, \e{rotate}, \e{skew}, or \e{translate} (move) objects.
 
-    The \c{translate} function moves an element from its default location,
-    and accepts \bold{x} and \bold{y} measurements as arguments.
-    The following moves an element off the right edge of the screen:
+    The \c{translate} function moves an element from its default location, and
+    accepts \c{x} and \c{y} measurements as arguments. The following moves an
+    element off the right edge of the screen:
 
     \code
     -webkit-transform: translate(120%, 0);
     \endcode
 
-    Alternately,
-    \c{translateX} and \c{translateY} functions allow you to specify each
-    axis independently.
-    This moves the element off the top of the screen:
+    Alternately, \c{translateX} and \c{translateY} functions allow you to
+    specify each axis independently. This moves the element off the top of the
+    screen:
 
     \code
     -webkit-transform: translateX(0.0) translateY(-120%);
     \endcode
 
-    Scale transforms allow you enlarge or shrink an element,
-    with the scale expressed as a decimal.
-    By itself,
-    \c{scale} modifies height and width proportionately,
-    but the alternative \c{scaleX} and \c{scaleY} functions allow you to
-    constrain scaling to a single axis.
+    Scale transforms allow you enlarge or shrink an element, with the scale
+    expressed as a decimal. By itself, \c{scale} modifies height and width
+    proportionately, but the alternative \c{scaleX} and \c{scaleY} functions
+    allow you to constrain scaling to a single axis.
 
-    The following animation demonstrates a \c{translate} function,
-    which moves the element from off the screen,
-    followed by series of \c{scale},
-    \c{scaleX},
-    and \c{scaleY} functions:
+    The following animation demonstrates a \c{translate} function, which moves
+    the element from off the screen, followed by series of \c{scale},
+    \c{scaleX}, and \c{scaleY} functions:
 
     \l{anim_demo-scale}{\inlineimage webkit-guide/scr_anim_demo-scale.png
     }
 
     \l{anim_demo-scale_css}{(CSS)}
 
-    By default,
-    transforms originate from the center of the element,
-    but you can specify any edge using the \c{-webkit-transform-origin}
-    property.
-    The following reduces an element to 75% of its original size,
-    while keeping it at its original bottom edge:
+    By default, transforms originate from the center of the element, but you can
+    specify any edge using the \c{-webkit-transform-origin} property. The
+    following reduces an element to 75% of its original size, while keeping it
+    at its original bottom edge:
 
     \code
     -webkit-transform        : scale(0.75);
     -webkit-transform-origin    : bottom;
     \endcode
 
-    The following example uses this scale transform to shrink icons that
-    are assigned to in-line links,
-    with icons aligning to the text\'s baseline:
+    The following example uses this scale transform to shrink icons that are
+    assigned to in-line links, with icons aligning to the text's baseline:
 
     \l{layout_link-fmt}{\inlineimage webkit-guide/scr_layout_link-fmt.png
     }
 
     \l{layout_link-fmt_css}{(CSS)}
 
-    The \c{rotate} function accepts degree or radian arguments,
-    with negative arguments specifying counter-clockwise motion.
-    The following animation demonstrates two rotations: the first clockwise around the
-    element\'s center point,
-    and the second counter-clockwise around the top left corner:
+    The \c{rotate} function accepts degree or radian arguments, with negative
+    arguments specifying counter-clockwise motion. The following animation
+    demonstrates two rotations: the first clockwise around the element's center
+    point, and the second counter-clockwise around the top left corner:
 
     \l{anim_demo-rotate}{\inlineimage webkit-guide/scr_anim_demo-rotate.png
     }
 
     \l{anim_demo-rotate_css}{(CSS)}
 
-    The \c{skew} function also accepts positive or negative degree
-    arguments,
-    specifying the extent to which to modify the bottom left corner\'s
-    90-degree angle.
-    The \c{skew} and \c{skewX} functions shift the element horizontally,
-    but the alternative \c{skewY} function shifts the element vertically.
-    The following animation demonstrates a \c{skewX} followed by a
-    \c{skewY}:
+    The \c{skew} function also accepts positive or negative degree arguments,
+    specifying the extent to which to modify the bottom left corner's 90-degree
+    angle. The \c{skew} and \c{skewX} functions shift the element horizontally,
+    but the alternative \c{skewY} function shifts the element vertically. The
+    following animation demonstrates a \c{skewX} followed by a \c{skewY}:
 
     \l{anim_demo-skew}{\inlineimage webkit-guide/scr_anim_demo-skew.png
     }
 
     \l{anim_demo-skew_css}{(CSS)}
 
-    In the following example,
-    a variety of transforms make a set of three navigational tab icons
-    appear to be part of a cube:
+    In the following example, a variety of transforms make a set of three
+    navigational tab icons appear to be part of a cube:
 
     \l{anim_tabbedSkew}{\inlineimage webkit-guide/scr_anim_tabbedSkew.png
     }
 
     \l{anim_tabbedSkew_css}{(CSS)}
 
-    The example also implements the tab icons as internal links that
-    activate display of content using the \c{:target} dynamic class.
-    See the \l{Navigational Selectors} section for more information.
+    The example also implements the tab icons as internal links that activate
+    display of content using the \c{:target} dynamic class. See the
+    \l{Navigational Selectors} section for more information.
 
-    Note that transforms can include any combination of the functions
-    described above:
+    Note that transforms can include any combination of the functions described
+    above:
 
     \code
     nav > a:nth-of-type(3) {
@@ -1391,20 +1203,16 @@ the examples provided here illustrate some CSS-only alternatives.
     \section2 Transitions
 
     Transitions allow you to gradually shift from one defined CSS state to
-    another.
-    Any CSS property expressed as a numeric or color value (including a
-    color name or hex value) can be transitioned between two style
-    sheets.
-    Properties such as \c{display} that have discrete sets of named
-    values,
-    such as the \c{display} property's \bold{block} or \bold{none} values,
-    cannot be transitioned.
-    In cases where named values translate internally to numeric values,
-    such as the \c{border-width} property's \c{thin} and \c{thick} values,
-    they can be transitioned.
-
-    The following example shows a series of transitions from a collapsed
-    icon state to an expanded panel:
+    another. Any CSS property expressed as a numeric or color value (including a
+    color name or hex value) can be transitioned between two style sheets.
+    Properties such as \c{display} that have discrete sets of named values, such
+    as the \c{display} property's \c{block} or \c{none} values, cannot be
+    transitioned. In cases where named values translate internally to numeric
+    values, such as the \c{border-width} property's \c{thin} and \c{thick}
+    values, they can be transitioned.
+
+    The following example shows a series of transitions from a collapsed icon
+    state to an expanded panel:
 
     \l{anim_panel}{\inlineimage webkit-guide/scr_anim_panel.png
     }
@@ -1412,10 +1220,9 @@ the examples provided here illustrate some CSS-only alternatives.
     \l{anim_panel_css}{(CSS)}
     \l{anim_panel_js}{(JavaScript)}
 
-    Each style sheet specifies a different \c{max-width} value,
-    and each accompanying transition,
-    defined separately for each state,
-    allows the value to shift over the course of half a second:
+    Each style sheet specifies a different \c{max-width} value, and each
+    accompanying transition, defined separately for each state, allows the value
+    to shift over the course of half of a second:
 
     \code
     nav.expanded {
@@ -1428,8 +1235,7 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    That appreviated syntax can be expanded to several different
-    properties:
+    That shorthand syntax can be expanded to several different properties:
 
     \code
     nav.expanded {
@@ -1446,17 +1252,15 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    Available transition functions include \c{linear},
-    \c{ease-in},
-    \c{ease-out},
-    \c{ease-in-out} and \c{cubic-bezier}.
+    Available transition functions include \c{linear}, \c{ease-in},
+    \c{ease-out}, \c{ease-in-out} and \c{cubic-bezier}.
 
     Note that the \c{max-width} properties in both style sheets both use
-    percentages to specify measurements.
-    Transitions may not work properly if you shift from one unit to another.
+    percentages to specify measurements. Transitions may not work properly if
+    you shift from one unit to another.
 
-    The example above specifies an additional set of transitions affecting
-    the icons nested within the navigation panel:
+    The example above specifies an additional set of transitions affecting the
+    icons nested within the navigation panel:
 
     \code
     nav.expanded > .option {
@@ -1471,25 +1275,21 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    The shifting \c{scale} transform makes icons appear to zoom in to fill
-    the space,
-    while \c{opacity} makes them fade in.
-    Specifying \c{all} as the transition property applies to any valid
-    property that differs between the two states.
+    The shifting \c{scale} transform makes icons appear to zoom in to fill the
+    space, while \c{opacity} makes them fade in. Specifying \c{all} as the
+    transition property applies to any valid property that differs between the
+    two states.
 
-    These nested transitions execute at the same time as those assigned to
-    the parent \c{nav} element.
-    The combined effect appears to be a single transition.
+    These nested transitions execute at the same time as those assigned to the
+    parent \c{nav} element. The combined effect appears to be a single
+    transition.
 
     \section2 Transitional Sequences
 
-    The prior example showed a single transition,
-    but transitions can also be run in sequence to form more complex
-    animations.
-    The following example demonstrates an embedded navigation panel that,
-    when pressed,
-    expands horizontally,
-    then vertically to reveal numerous navigation options:
+    The prior example showed a single transition, but transitions can also be
+    run in sequence to form more complex animations. The following example
+    demonstrates an embedded navigation panel that, when pressed, expands
+    horizontally, then vertically to reveal numerous navigation options:
 
     \l{anim_accord}{\inlineimage webkit-guide/scr_anim_accord.png
     }
@@ -1497,8 +1297,8 @@ the examples provided here illustrate some CSS-only alternatives.
     \l{anim_accord_css}{(CSS)}
     \l{anim_accord_js}{(JavaScript)}
 
-    The style sheets specify separate,
-    comma-separated transitions for \c{width} and \c{height} properties:
+    The style sheets specify separate, comma-separated transitions for \c{width}
+    and \c{height} properties:
 
     \code
     #accordion.expanded {
@@ -1519,8 +1319,8 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    Each transition\'s additional time measurement specifies a delay.
-    The long-form syntax may make this clearer:
+    Each transition's additional time measurement specifies a delay. The
+    long-form syntax may make this clearer:
 
     \code
     #accordion.expanded {
@@ -1541,27 +1341,21 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    The shift to the \c{expanded} state involves two transitions,
-    each of which lasts half a second and relies on the same
-    \c{ease-in-out} function.
-    The first takes place immediately and affects the \c{width} property.
-    The second,
-    affecting the \c{height} property,
-    takes place after a delay that matches the first transition\'s
-    duration.
-    The reverse transition is much the same,
-    only the \c{height} property transitions before the \c{width} to
+    The shift to the \c{expanded} state involves two transitions, each of which
+    lasts half a second and relies on the same \c{ease-in-out} function. The
+    first takes place immediately and affects the \c{width} property. The
+    second, affecting the \c{height} property, takes place after a delay that
+    matches the first transition's duration. The reverse transition is much the
+    same, only the \c{height} property transitions before the \c{width} to
     reverse the effect.
 
-    In addition to the navigation element\'s sequence of transitions,
-    nested accordion-style animations activate when users expand top-level
-    headings.
-    Subheadings are revealed using a \c{scaleY} transform,
-    which makes them appear as if they are flipping upwards.
+    In addition to the navigation element's sequence of transitions, nested
+    accordion-style animations activate when users expand top-level headings.
+    Subheadings are revealed using a \c{scaleY} transform, which makes them
+    appear as if they are flipping upwards.
 
-    The following example shows a photo gallery interface that uses the
-    same techniques.
-    (Size the window to emulate a smaller mobile screen.)
+    The following example shows a photo gallery interface that uses the same
+    techniques. (Size the window to emulate a smaller mobile screen.)
 
     \l{anim_gallery}{\inlineimage webkit-guide/scr_anim_gallery.png
     }
@@ -1569,20 +1363,15 @@ the examples provided here illustrate some CSS-only alternatives.
     \l{anim_gallery_css}{(CSS)}
     \l{anim_gallery_js}{(JavaScript)}
 
-    The main interface uses simple transitions affecting \c{opacity},
-    along with \c{scale} and \c{translate} transforms,
-    which combined make queued images appear dimmer,
-    smaller,
-    and horizontally offset from the main image.
-
-    A separate sequence of transitions activates when users tap selected
-    images.
-    The first transition uses a \c{scaleX} transform to flip the image
-    towards the center.
-    The second then flips out a panel featuring details on the photo.
-    When users navigate away to adjacent photos,
-    the panel automatically flips back to its original state as it is
-    moved to the side.
+    The main interface uses simple transitions affecting \c{opacity}, along with
+    \c{scale} and \c{translate} transforms, which combined make queued images
+    appear dimmer, smaller, and horizontally offset from the main image.
+
+    A separate sequence of transitions activates when users tap selected images.
+    The first transition uses a \c{scaleX} transform to flip the image towards
+    the center. The second then flips out a panel featuring details on the
+    photo. When users navigate away to adjacent photos, the panel automatically
+    flips back to its original state as it is moved to the side.
 
     Another example shows an interface featuring a simple list of items:
 
@@ -1592,44 +1381,37 @@ the examples provided here illustrate some CSS-only alternatives.
     \l{anim_skew_css}{(CSS)}
     \l{anim_skew_js}{(JavaScript)}
 
-    When dismissed,
-    items are wiped off the screen using a \c{skew} transform that
-    provides the illusion of speed.
-    Remaining items move upwards to fill the space vacated by items that
-    have been removed.
-
-    This example uses the same technique of sequential transitions.
-    The first transition applies to the combined \c{translate}/\c{skew}
-    transform.
-    The second,
-    delayed transition modifies the \c{top} property to align remaining
+    When dismissed, items are wiped off the screen using a \c{skew} transform
+    that provides the illusion of speed. Remaining items move upwards to fill
+    the space vacated by items that have been removed.
+
+    This example uses the same technique of sequential transitions. The first
+    transition applies to the combined \c{translate}/\c{skew} transform. The
+    second, delayed transition modifies the \c{top} property to align remaining
     items to a grid.
 
-    Note that for items to reposition themselves in this example,
-    a vertical grid must be explicitly specified.
-    You can only apply transitions between properties you explicitly
-    define and activate,
-    not between values the browser assigns internally to automatically
-    position elements relative to each other.
+    Note that for items to reposition themselves in this example, a vertical
+    grid must be explicitly specified. You can only apply transitions between
+    properties you explicitly define and activate, not between values the
+    browser assigns internally to automatically position elements relative to
+    each other.
 
     \section2 Keyframe Animations
 
-    The previous section showed how you can chain sequences of transitions
-    to produce complex effects.
-    Animations also allow you to define many intermediary interface states,
-    but using a far simpler syntax,
-    and not assigned to transitions between CSS states.
+    The previous section showed how you can chain sequences of transitions to
+    produce complex effects. Animations also allow you to define many
+    intermediary interface states, but using a far simpler syntax, and not
+    assigned to transitions between CSS states.
 
-    The following example shows a simple animation of icons that pulse
-    when selected:
+    The following example shows a simple animation of icons that pulse when
+    selected:
 
     \l{anim_pulse}{\inlineimage webkit-guide/scr_anim_pulse.png
     }
 
     \l{anim_pulse_css}{(CSS)}
 
-    It uses the following CSS,
-    shown here in both abbreviated and long form:
+    It uses the following CSS, shown here in both abbreviated and long form:
 
     \code
     nav > a:target { -webkit-animation : pulse 1s infinite; }
@@ -1641,8 +1423,8 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    You supply a \bold{name} for the animation that corresponds to a
-    \bold{keyframes} rule defined separately within your CSS:
+    You supply a \c{name} for the animation that corresponds to a
+    \c{keyframes} rule defined separately within your CSS:
 
     \code
     @-webkit-keyframes pulse {
@@ -1651,29 +1433,24 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    Percentages mark new animation states within the course of the
-    animation,
-    and behave much like CSS selectors.
-    In this case,
-    the animation shifts between two separate states over
-    the course of a second:
-    opaque and slightly dimmed.
-    With its \c{iteration-count} set to \c{infinite} rather than a set
-    number,
-    the animation only stops when the link is no longer selected.
+    Percentages mark new animation states within the course of the animation,
+    and behave much like CSS selectors. In this case, the animation shifts
+    between two separate states over the course of a second: opaque and slightly
+    dimmed. With its \c{iteration-count} set to \c{infinite} rather than a set
+    number, the animation only stops when the link is no longer selected.
 
     The following example demonstrates a popular mobile design pattern
-    implemented with CSS.
-    Navigation to nested subheads appears to wipe to the right,
-    while navigating upwards in the hierarchy appears to wipe to the left:
+    implemented with CSS. Navigation to nested subheads appears to wipe to the
+    right, while navigating upwards in the hierarchy appears to wipe to the
+    left:
 
     \l{anim_slide1}{\inlineimage webkit-guide/scr_anim_slide1.png
     }
 
     \l{anim_slide_css}{(CSS)}
 
-    It relies on keyframes rules such as the following,
-    which define a simple start and end state:
+    It relies on keyframes rules such as the following, which define a simple
+    start and end state:
 
     \code
     @-webkit-keyframes slide_in {
@@ -1688,25 +1465,22 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    Unlike a transition,
-    the animation is triggered immediately when the page loads,
-    but only if the target of navigation is an anchor whose ID
-    is \bold{in} or \bold{out}.
-    If you navigate to the page itself,
-    no animation occurs.
+    Unlike a transition, the animation is triggered immediately when the page
+    loads, but only if the target of navigation is an anchor whose ID is
+    \c{in} or \c{out}. If you navigate to the page itself, no animation
+    occurs.
 
-    The following example uses a keyframe animation to scroll through
-    banner options at the top of the screen:
+    The following example uses a keyframe animation to scroll through banner
+    options at the top of the screen:
 
     \l{css3_multicol}{\inlineimage webkit-guide/scr_css3_multicol.png
     }
 
     \l{css3_multicol_css}{(CSS)}
 
-    The animation defines a set of rapid shifts alternating with long
-    static phases.
-    It modifies the left offset of an element that is five times the width
-    of the window.
+    The animation defines a set of rapid shifts alternating with long static
+    phases. It modifies the left offset of an element that is five times the
+    width of the window.
 
     \code
     @-webkit-keyframes banner_scroll {
@@ -1724,14 +1498,18 @@ the examples provided here illustrate some CSS-only alternatives.
     }
     \endcode
 
-    Finally,
-    the demonstrations of \l{anim_demo-rotate}{rotate},
-    \l{anim_demo-scale}{scale},
-    and \l{anim_demo-skew}{skew} 2D transforms that opened this section
-    all rely on separate keyframe animations to slide in and manipulate a
-    series of panels.
-    Separate \c{-webkit-animation-delay} settings for each panel control
-    the sequence of each presentation.
+    Finally, the demonstrations of \l{anim_demo-rotate}{rotate},
+    \l{anim_demo-scale}{scale}, and \l{anim_demo-skew}{skew} 2D transforms that
+    opened this section all rely on separate keyframe animations to slide in and
+    manipulate a series of panels. Separate \c{-webkit-animation-delay} settings
+    for each panel control the sequence of each presentation.
 
 */
 
+/*!
+\example webkit/webkit-guide
+\title QtWebKit Guide Files
+This is a listing of \l{QtWebKit Guide} code.
+\note The links to the HTML5 code is found within the guide.
+*/
+
diff --git a/doc/src/webkit/guide/guidelinks.qdoc b/doc/src/webkit/guide/guidelinks.qdoc
index b1db999..379b182 100644
--- a/doc/src/webkit/guide/guidelinks.qdoc
+++ b/doc/src/webkit/guide/guidelinks.qdoc
@@ -43,12 +43,12 @@
 */
 
 /*!
-\externalpage webkit-guide/css/storage.css
+\externalpage webkit-webkit-guide-css-storage-css.html
 \title storage_css
 */
 
 /*!
-\externalpage webkit-guide/js/storage.js
+\externalpage webkit-webkit-guide-js-storage-js.html
 \title storage_js
 */
 
@@ -213,232 +213,248 @@
 */
 
 /*!
-\externalpage webkit-guide/css/anim_accord.css
+\externalpage webkit-webkit-guide-css-anim-accord-css.html
 \title anim_accord_css
 */
 
 /*!
-\externalpage webkit-guide/js/anim_accord.js
+\externalpage wwebkit-webkit-guide-js-anim-accord-js.html
 \title anim_accord_js
 */
 
 /*!
-\externalpage webkit-guide/css/anim_demo-rotate.css
+\externalpage webkit-webkit-guide-css-anim-demo-rotate-css.html
 \title anim_demo-rotate_css
 */
 
 /*!
-\externalpage webkit-guide/css/anim_demo-scale.css
+\externalpage webkit-webkit-guide-css-anim-demo-scale-css.html
 \title anim_demo-scale_css
 */
 
 /*!
-\externalpage webkit-guide/css/anim_demo-skew.css
+\externalpage webkit-webkit-guide-css-anim-demo-skew-css.html
 \title anim_demo-skew_css
 */
 
 /*!
-\externalpage webkit-guide/css/anim_gallery.css
+\externalpage webkit-webkit-guide-css-anim-gallery-css.html
 \title anim_gallery_css
 */
 
 /*!
-\externalpage webkit-guide/js/anim_gallery.js
+\externalpage webkit-webkit-guide-js-anim-gallery-js.html
 \title anim_gallery_js
 */
 
 /*!
-\externalpage webkit-guide/css/anim_panel.css
+\externalpage webkit-webkit-guide-css-anim-panel-css.html
 \title anim_panel_css
 */
 
 /*!
-\externalpage webkit-guide/js/anim_panel.js
+\externalpage webkit-webkit-guide-js-anim-panel-js.html
 \title anim_panel_js
 */
 
 /*!
-\externalpage webkit-guide/css/anim_pulse.css
+\externalpage webkit-webkit-guide-css-anim-pulse-css.html
 \title anim_pulse_css
 */
 
 /*!
-\externalpage webkit-guide/css/anim_skew.css
+\externalpage webkit-webkit-guide-css-anim-skew-css.html
 \title anim_skew_css
 */
 
 /*!
-\externalpage webkit-guide/js/anim_skew.js
+\externalpage webkit-webkit-guide-js-anim-skew-js.html
 \title anim_skew_js
 */
 
 /*!
-\externalpage webkit-guide/css/anim_slide.css
+\externalpage webkit-webkit-guide-css-anim-slide-css.html
 \title anim_slide_css
 */
 
 /*!
-\externalpage webkit-guide/css/anim_tabbedSkew.css
+\externalpage webkit-webkit-guide-css-anim-tabbedskew-css.html
 \title anim_tabbedSkew_css
 */
 
 /*!
-\externalpage webkit-guide/css/form_tapper.css
+\externalpage webkit-webkit-guide-css-form-tapper-css.html
 \title form_tapper_css
 */
 
 /*!
-\externalpage webkit-guide/css/form_toggler.css
+\externalpage webkit-webkit-guide-css-form-toggler-css.html
 \title form_toggler_css
 */
 
 /*!
-\externalpage webkit-guide/css/layout_link-fmt.css
+\externalpage webkit-webkit-guide-css-layout-link-fmt-css.html
 \title layout_link-fmt_css
 */
 
 /*!
-\externalpage webkit-guide/css/layout_tbl-keyhole.css
+\externalpage webkit-webkit-guide-css-layout-tbl-keyhole-css.html
 \title layout_tbl-keyhole_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_backgrounds.css
+\externalpage webkit-webkit-guide-css-css3-backgrounds-css.html
 \title css3_backgrounds_css
 */
 
 /*!
-\externalpage webkit-guide/js/css3_backgrounds.js
+\externalpage webkit-webkit-guide-js-css3-backgrounds-js.html
 \title css3_backgrounds_js
 */
 
 /*!
-\externalpage webkit-guide/css/css3_border-img.css
+\externalpage webkit-webkit-guide-css-css3-border-img-css.html
 \title css3_border-img_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_grad-radial.css
+\externalpage webkit-webkit-guide-css-css3-grad-radial-css.html
 \title css3_grad-radial_css
 */
 
 /*!
-\externalpage webkit-guide/js/css3_grad-radial.js
+\externalpage webkit-webkit-guide-js-css3-grad-radial-js.html
 \title css3_grad-radial_js
 */
 
 /*!
-\externalpage webkit-guide/css/css3_gradientBack.css
+\externalpage webkit-webkit-guide-css-css3-gradientback-css.html
 \title css3_gradientBack_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_gradientBackStop.css
+\externalpage webkit-webkit-guide-css-css3-gradientbackstop-css.html
 \title css3_gradientBackStop_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_gradientButton.css
+\externalpage webkit-webkit-guide-css-css3-gradientbutton-css.html
 \title css3_gradientButton_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_mask-grad.css
+\externalpage webkit-guide/css/webkit-webkit-guide-css-css3-mask-grad-css.html
 \title css3_mask-grad_css
 */
 
 /*!
-\externalpage webkit-guide/js/css3_mask-grad.js
+\externalpage webkit-guide/js/webkit-webkit-guide-js-css3-mask-grad-js.html
 \title css3_mask-grad_js
 */
 
 /*!
-\externalpage webkit-guide/css/css3_mask-img.css
+\externalpage webkit-webkit-guide-css-css3-mask-img-css.html
 \title css3_mask-img_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_multicol.css
+\externalpage webkit-webkit-guide-css-css3-multicol-css.html
 \title css3_multicol_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_reflect.css
+\externalpage webkit-webkit-guide-css-css3-reflect-css.html
 \title css3_reflect_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_scroll.css
+\externalpage webkit-webkit-guide-css-css3-scroll-css.html
 \title css3_scroll_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_sel-nth.css
+\externalpage webkit-webkit-guide-css-css3-sel-nth-css.html
 \title css3_sel-nth_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_text-overflow.css
+\externalpage webkit-webkit-guide-css-css3-text-overflow-css.html
 \title css3_text-overflow_css
 */
 
 /*!
-\externalpage webkit-guide/js/css3_text-overflow.js
+\externalpage webkit-webkit-guide-js-css3-text-overflow-js.html
 \title css3_text-overflow_js
 */
 
 /*!
-\externalpage webkit-guide/css/css3_text-shadow.css
+\externalpage webkit-webkit-guide-css-css3-text-shadow-css.html
 \title css3_text-shadow_css
 */
 
 /*!
-\externalpage webkit-guide/css/css3_text-stroke.css
+\externalpage webkit-webkit-guide-css-css3-text-stroke-css.html
 \title css3_text-stroke_css
 */
 
 /*!
-\externalpage webkit-guide/css/mob_condjs.css
+\externalpage webkit-webkit-guide-css-mob-condjs-css.html
 \title mob_condjs_css
 */
 
 /*!
-\externalpage webkit-guide/js/mob_condjs.js
+\externalpage webkit-webkit-guide-js-mob-condjs-js.html
 \title mob_condjs_js
 */
 
 /*!
-\externalpage webkit-guide/css/mqlayout_desktop.css
+\externalpage webkit-webkit-guide-css-mqlayout-desktop-css.html
 \title mqlayout_desktop_css
 */
 
 /*!
-\externalpage webkit-guide/css/mqlayout_touch.css
+\externalpage webkit-webkit-guide-css-mqlayout-touch-css.html
 \title mqlayout_touch_css
 */
 
 /*!
-\externalpage webkit-guide/css/mqlayout_mobile.css
+\externalpage webkit-webkit-guide-css-mqlayout-mobile-css.html
 \title mqlayout_mobile_css
 */
 
 /*!
-\externalpage webkit-guide/css/mq_desktop.css
+\externalpage webkit-webkit-guide-css-mq-desktop-css.html
 \title mq_desktop_css
 */
 
 /*!
-\externalpage webkit-guide/css/mq_touch.css
+\externalpage webkit-webkit-guide-css-mq-touch-css.html
 \title mq_touch_css
 */
 
 /*!
-\externalpage webkit-guide/css/mq_mobile.css
+\externalpage webkit-webkit-guide-css-mq-mobile-css.html
 \title mq_mobile_css
 */
 
 /*!
-\externalpage webkit-guide/css/mob_mediaquery.css
+\externalpage webkit-webkit-guide-css-mob-mediaquery-css.html
 \title mob_mediaquery_css
 */
 
+/*!
+\externalpage http://deviceatlas.com/
+\title DeviceAtlas
+*/
+
+/*!
+\externalpage http://wurfl.sourceforge.net/
+\title WURFL
+*/
+
+/*!
+\externalpage http://www.w3.org/TR/selectors-api/
+\title Selectors API
+
+*/
+
diff --git a/doc/src/webkit/webkit.qdoc b/doc/src/webkit/webkit.qdoc
index b0c9649..78d27fa 100644
--- a/doc/src/webkit/webkit.qdoc
+++ b/doc/src/webkit/webkit.qdoc
@@ -40,7 +40,7 @@
 /*!
 \page qtwebkit-guide.html
 
-\title Qt WebKit
+\title QtWebKit Guide
 
 \section1 Introduction to QtWebKit