Merge branch 'mimir' into 4.7

Conflicts:
	doc/src/declarative/qdeclarativemodels.qdoc
	doc/src/index.qdoc
	doc/src/template/style/style.css
	tools/qdoc3/atom.h
	tools/qdoc3/doc.cpp
	tools/qdoc3/doc/qdoc-manual.qdoc
	tools/qdoc3/doc/qdoc-manual.qdocconf

14 files changed, 370 insertions, 255 deletions

diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc
index 1d9e28c..02cd31a 100644
--- a/doc/src/declarative/basictypes.qdoc
+++ b/doc/src/declarative/basictypes.qdoc
@@ -153,9 +153,6 @@
     Image { source: "pics/logo.png" }
     \endqml
 
-    \raw HTML
-    \endraw
-
     \sa {QML Basic Types}
 */
 
diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc
index be2d0c7..06bd819 100644
--- a/doc/src/declarative/examples.qdoc
+++ b/doc/src/declarative/examples.qdoc
@@ -147,7 +147,6 @@ The examples can be found in Qt's \c examples/declarative directory.
 
 \section2 Touch Interaction
 \list
-\o \l{declarative/touchinteraction/gestures}{Gestures}
 \o \l{declarative/touchinteraction/mousearea}{MouseArea}
 \endlist
 
diff --git a/doc/src/declarative/positioners.qdoc b/doc/src/declarative/positioners.qdoc
index 0ac6a2b..763bc88 100644
--- a/doc/src/declarative/positioners.qdoc
+++ b/doc/src/declarative/positioners.qdoc
@@ -56,7 +56,7 @@ graphical elements:
 
 \section2 Column
 
-\div{float-right}
+\div {class="float-right"}
 \inlineimage qml-column.png
 \enddiv
 
@@ -73,7 +73,7 @@ must be added to a parent Rectangle, if desired.
 
 \section2 Row
 
-\div{float-right}
+\div {class="float-right"}
 \inlineimage qml-row.png
 \enddiv
 
@@ -90,7 +90,7 @@ left around the edges of the horizontally centered Row item.
 
 \section2 Grid
 
-\div{float-right}
+\div {class="float-right"}
 \inlineimage qml-grid-spacing.png
 \enddiv
 
@@ -111,7 +111,7 @@ at the appropriate places in the Grid definition.
 
 \section2 Flow
 
-\div{float-right}
+\div {class="float-right"}
 \inlineimage qml-flow-text1.png
 \inlineimage qml-flow-text2.png
 \enddiv
@@ -140,7 +140,7 @@ control of spacing between items and between lines of items.
 
 \section1 Repeaters
 
-\div{float-right}
+\div {class="float-right"}
 \inlineimage qml-repeater-grid-index.png
 \enddiv
 
diff --git a/doc/src/development/designer-manual.qdoc b/doc/src/development/designer-manual.qdoc
index d347c0f..0f38c61 100644
--- a/doc/src/development/designer-manual.qdoc
+++ b/doc/src/development/designer-manual.qdoc
@@ -1385,17 +1385,13 @@
 
 
     \target CreatingAMenu
-    \raw HTML
-    <div style="float: left; margin-right: 2em">
-    \endraw
+    \div {class="float-left"}
     \inlineimage designer-creating-menu1.png
     \inlineimage designer-creating-menu2.png
     \br
     \inlineimage designer-creating-menu3.png
     \inlineimage designer-creating-menu4.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 Creating a Menu
 
@@ -1410,9 +1406,8 @@
     \key Escape to reject it. You can undo the editing operation later if
     required.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 
     Menus can also be rearranged in the menu bar simply by dragging and
     dropping them in the preferred location. A vertical red line indicates the
@@ -1423,17 +1418,13 @@
     navigating the menu structure in the usual way.
 
     \target CreatingAMenuEntry
-    \raw HTML
-    <div style="float: right; margin-left: 2em">
-    \endraw
+    \div {class="float-right"}
     \inlineimage designer-creating-menu-entry1.png
     \inlineimage designer-creating-menu-entry2.png
     \br
     \inlineimage designer-creating-menu-entry3.png
     \inlineimage designer-creating-menu-entry4.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 Creating a Menu Entry
 
@@ -1453,9 +1444,8 @@
     be accessible via the \l{#TheActionEditor}{Action Editor}, and any
     associated keyboard shortcut can be set there.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 
     Just like with menus, entries can be moved around simply by dragging and
     dropping them in the preferred location. When an entry is dragged over a
@@ -1465,13 +1455,9 @@
 
     \section1 Toolbars
 
-    \raw HTML
-    <div style="float: left; margin-right: 2em">
-    \endraw
+    \div {class="float-left"}
     \inlineimage designer-creating-toolbar.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 Creating and Removing a Toolbar
 
@@ -1483,9 +1469,8 @@
     Toolbars are removed from the form via an entry in the toolbar's context
     menu.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 
     \section2 Adding and Removing Toolbar Buttons
 
@@ -1494,14 +1479,10 @@
     Since actions can be represented by menu entries and toolbar buttons,
     they can be moved between menus and toolbars.
 
-    \raw HTML
-    <div style="float: right; margin-left: 2em">
-    \endraw
+    \div {class="float-right"}
     \inlineimage designer-adding-toolbar-action.png
     \inlineimage designer-removing-toolbar-action.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     To share an action between a menu and a toolbar, drag its icon from the
     action editor to the toolbar rather than from the menu where its entry is
@@ -1510,9 +1491,8 @@
 
     Toolbar buttons are removed via the toolbar's context menu.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 
     \section1 Actions
 
@@ -1521,13 +1501,9 @@
     action editor window, simplifying the creation and management of actions.
 
     \target TheActionEditor
-    \raw HTML
-    <div style="float: left; margin-right: 2em">
-    \endraw
+    \div {class="float-left"}
     \inlineimage designer-action-editor.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 The Action Editor
 
@@ -1543,9 +1519,8 @@
     \gui{Detailed View}. You can also copy and paste actions between menus,
     toolbars and forms.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 
     \section2 Creating an Action
 
@@ -1560,19 +1535,14 @@
 
     Once the action is created, it can be used wherever actions are applicable.
 
-    \raw HTML
-    <div style="clear: left" />
-    \endraw
+    \div {class="clear-left"}
+    \enddiv
 
     \target AddingAnAction
-    \raw HTML
-    <div style="float: right; margin-left: 2em">
-    \endraw
+    \div {class="float-right"}
     \inlineimage designer-adding-menu-action.png
     \inlineimage designer-adding-toolbar-action.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 Adding an Action
 
@@ -1584,9 +1554,8 @@
     will be added. Release the mouse button to add the action when you have
     found the right spot.
 
-    \raw HTML
-    <div style="clear: right" />
-    \endraw
+    \div {class="clear-right"}
+    \enddiv
 
     \section1 Dock Widgets
 
@@ -1598,13 +1567,9 @@
 
     \target AddingADockWidget
 
-    \raw HTML
-    <div style="float: left; margin-right: 2em">
-    \endraw
+    \div {class="float-left"}
     \inlineimage designer-adding-dockwidget.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
     \section2 Adding a Dock Widget
 
@@ -1623,9 +1588,8 @@
     \l{QDockWidget::}{windowTitle} property. This also helps to identify them on the
     form.
 
-    \raw HTML
-    <div style="clear: both" />
-    \endraw
+    \div {class="clear-both"}
+    \enddiv
 */
 
 
diff --git a/doc/src/examples/fademessage.qdoc b/doc/src/examples/fademessage.qdoc
index b8a09e8..09c1d94 100644
--- a/doc/src/examples/fademessage.qdoc
+++ b/doc/src/examples/fademessage.qdoc
@@ -29,13 +29,9 @@
     \example effects/fademessage
     \title Fade Message Effect Example
 
-    \raw HTML
-    <div style="text-align: center">
-    \endraw
+    \div { style="text-align: center"}
     \inlineimage fademessageeffect-example.png
     \inlineimage fademessageeffect-example-faded.png
-    \raw HTML
-    </div>
-    \endraw
+    \enddiv
 
 */
diff --git a/doc/src/examples/globalVariables.qdoc b/doc/src/examples/globalVariables.qdoc
index 4629801..224a3a7 100644
--- a/doc/src/examples/globalVariables.qdoc
+++ b/doc/src/examples/globalVariables.qdoc
@@ -101,48 +101,25 @@
     The \c xmlpatterns command loads and parses \c globals.gccxml,
     runs the XQuery \c reportGlobals.xq, and generates this report:
 
-    \raw HTML
-<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="en" lang="en">
-    <head>
-        <title>Global variables report for globals.gccxml</title>
-    </head>
-    <style type="text/css">
-        .details
-        {
-            text-align: left;
-            font-size: 80%;
-            color: blue
-        }
-        .variableName
-        {
-            font-family: courier;
-	    color: blue
-        }
-    </style>
-    <body>
-        <p class="details">Start report: 2008-12-16T13:43:49.65Z</p>
-        <p>Global variables with complex types:</p>
-        <ol>
-            <li>
-                <span class="variableName">mutableComplex1</span> in globals.cpp at line 14</li>
-            <li>
-                <span class="variableName">mutableComplex2</span> in globals.cpp at line 15</li>
-            <li>
-                <span class="variableName">constComplex1</span> in globals.cpp at line 16</li>
-            <li>
-                <span class="variableName">constComplex2</span> in globals.cpp at line 17</li>
-        </ol>
-        <p>Mutable global variables with primitives types:</p>
-        <ol>
-            <li>
-                <span class="variableName">mutablePrimitive1</span> in globals.cpp at line 1</li>
-            <li>
-                <span class="variableName">mutablePrimitive2</span> in globals.cpp at line 2</li>
-        </ol>
-        <p class="details">End report: 2008-12-16T13:43:49.65Z</p>
-    </body>
-</html>
-    \endraw
+    \div {class="details"} 
+    Start report: 2008-12-16T13:43:49.65Z
+    \enddiv
+
+    Global variables with complex types:
+    \list 1
+    \o \span {class="variableName"} {mutableComplex1} in globals.cpp at line 14
+    \o \span {class="variableName"} {mutableComplex2} in globals.cpp at line 15
+    \o \span {class="variableName"} {constComplex1} in globals.cpp at line 16
+    \o \span {class="variableName"} {constComplex2} in globals.cpp at line 17
+    \endlist
+
+    Mutable global variables with primitives types:
+    \list 1
+    \o \span {class="variableName"} {mutablePrimitive1} in globals.cpp at line 1
+    \o \span {class="variableName"} {mutablePrimitive2} in globals.cpp at line 2
+    \endlist
+
+    \div {class="details"} End report: 2008-12-16T13:43:49.65Z \enddiv
 
     \section1 XQuery Code Walk-Through  
 
diff --git a/doc/src/examples/icons.qdoc b/doc/src/examples/icons.qdoc
index 1f959f9..3966bf4 100644
--- a/doc/src/examples/icons.qdoc
+++ b/doc/src/examples/icons.qdoc
@@ -147,8 +147,8 @@
     render the other six mode/state combinations, QIcon uses the
     search algorithm described in the table below:
 
-    \table
-    \header \o{2,1} Requested Pixmap \o{8,1} Preferred Alternatives (mode/state)
+    \table 100%
+    \header \o{2,1} Requested Pixmap \o {8,1} Preferred Alternatives (mode/state)
     \header \o Mode \o State \o 1  \o 2 \o 3 \o 4 \o 5 \o 6 \o 7 \o 8
     \row \o{1,2} Normal \o Off \o \bold N0 \o A0 \o N1 \o A1 \o D0 \o S0 \o D1 \o S1
     \row \o On \o N1 \o \bold A1 \o N0 \o A0 \o D1 \o S1 \o D0 \o S0
diff --git a/doc/src/getting-started/how-to-learn-qt.qdoc b/doc/src/getting-started/how-to-learn-qt.qdoc
index 239c8a1..8d9508b 100644
--- a/doc/src/getting-started/how-to-learn-qt.qdoc
+++ b/doc/src/getting-started/how-to-learn-qt.qdoc
@@ -51,7 +51,7 @@
     key overviews to deepen your understanding of Qt: The Qt \l{Object
     Model} and \l{Signals and Slots}.
 
-    \div{float-left}
+    \div {class="float-left"}
     \inlineimage qtdemo-small.png
     \enddiv
 
diff --git a/doc/src/getting-started/installation.qdoc b/doc/src/getting-started/installation.qdoc
index 5dfea21..2e93367 100644
--- a/doc/src/getting-started/installation.qdoc
+++ b/doc/src/getting-started/installation.qdoc
@@ -1008,78 +1008,113 @@ We hope you will enjoy using Qt.
 
     \image x11_dependencies.png Qt for X11 Dependencies
 
-    \raw HTML
-    <style type="text/css" id="colorstyles">
-     #QtGuiColor { background-color: #98fd00; color: black }
-     #QtCoreColor { background-color: #9c9cff; color: black }
-     #DefaultColor { background-color: #f6f6dc; color: black }
-     #FreetypeColor { background-color: #e6e6fa; color: black }
-     #GLColor { background-color: #ffc0cb; color: black }
-     #PthreadColor { background-color: #bdb76b; color: black }
-     #OptionalColor { background-color: #cae1ff; color: black }
-     #SMColor { background-color: #c2fafa; color: black }
-     #MiscColor { background-color: #f0f9ff; color: black }
-     #GlibColor { background-color: #b3b3b3; color: black }
-    </style>
-    \endraw
-
     The QtGui module and the QtCore module, which provides the non-GUI features required
     by QtGui, depend on the libraries described in the following table. To build
     Qt from its source code, you will also need to install the development
     packages for these libraries for your system.
 
-    \raw HTML
-    <table class="generic"> 
-    <thead><tr class="qt-style topAlign"><th>Name</th><th>Library</th><th>Notes</th><th>Configuration options</th><th>Minimum working version 
-    <tr id="OptionalColor">
-    <td> XRender </td><td> libXrender </td><td> X Rendering Extension; used for anti-aliasing</td>
-    <td><tt>-xrender</tt> or auto-detected</td><td>0.9.0</td>
-    </tr><tr id="OptionalColor">
-    <td> Xrandr </td><td> libXrandr </td><td> X Resize and Rotate Extension</td>
-    <td><tt>-xrandr</tt> or auto-detected</td><td>1.0.2</td>
-    </tr><tr id="OptionalColor">
-    <td> Xcursor </td><td> libXcursor </td><td> X Cursor Extension</td>
-    <td><tt>-xcursor</tt> or auto-detected</td><td>1.1.4</td>
-    </tr><tr id="OptionalColor">
-    <td> Xfixes </td><td> libXfixes </td><td> X Fixes Extension</td>
-    <td><tt>-xfixes</tt> or auto-detected</td><td>3.0.0</td>
-    </tr><tr id="OptionalColor">
-    <td> Xinerama </td><td> libXinerama </td><td> Multi-head support</td>
-    <td><tt>-xinerama</tt> or auto-detected</td><td>1.1.0</td>
-
-    </tr><tr id="OptionalColor">
-    <td> Fontconfig </td><td> libfontconfig </td><td> Font customization and configuration</td>
-    <td><tt>-fontconfig</tt> or auto-detected</td><td>2.1</td>
-    </tr><tr id="OptionalColor">
-    <td> FreeType </td><td> libfreetype </td><td> Font engine</td>
-    <td></td><td>2.1.3</td>
-
-    </tr><tr id="DefaultColor">
-    <td> Xi </td><td> libXi </td><td> X11 Input Extensions</td>
-    <td><tt>-xinput</tt> or auto-detected</td><td>1.3.0</td>
-    </tr><tr id="DefaultColor">
-    <td> Xt </td><td> libXt </td><td> Xt Intrinsics</td><td></td><td>0.99</td>
-    </tr><tr id="DefaultColor">
-    <td> Xext </td><td> libXext </td><td> X Extensions</td><td></td><td>6.4.3</td>
-    </tr><tr id="DefaultColor">
-    <td> X11 </td><td> libX11 </td><td> X11 Client-Side Library</td><td></td><td>6.2.1</td>
-
-    </tr><tr id="SMColor">
-    <td> SM </td><td> libSM </td><td> X Session Management</td>
-    <td><tt>-sm</tt> or auto-detected</td><td>6.0.4</td>
-    </tr><tr id="SMColor">
-    <td> ICE </td><td> libICE </td><td> Inter-Client Exchange</td>
-    <td><tt>-sm</tt> or auto-detected</td><td>6.3.5</td>
-
-    </tr><tr id="GlibColor">
-    <td> glib </td><td> libglib-2.0 </td><td> Common event loop handling</td>
-    <td><tt>-glib</tt> or auto-detected</td><td>2.8.3</td>
-    </tr><tr id="PthreadColor">
-    <td> pthread </td><td> libpthread </td><td> Multithreading</td>
-    <td></td><td>2.3.5</td>
-    </tr></th></tr></thead> 
-    </table>  
-    \endraw
+    \table 100% 
+    \header
+    \o Name
+    \o Library
+    \o Notes
+    \o Configuration options
+    \o Minimum working version 
+    \row {id="OptionalColor"}
+    \o XRender
+    \o libXrender
+    \o X Rendering Extension; used for anti-aliasing
+    \o \tt{-xrender} or auto-detected
+    \o 0.9.0
+    \row {id="OptionalColor"}
+    \o Xrandr 
+    \o libXrandr
+    \o X Resize and Rotate Extension
+    \o \tt{-xrandr} or auto-detected
+    \o 1.0.2
+    \row {id="OptionalColor"}
+    \o Xcursor 
+    \o libXcursor
+    \o X Cursor Extension
+    \o \tt{-xcursor} or auto-detected
+    \o 1.1.4
+    \row {id="OptionalColor"}
+    \o Xfixes
+    \o libXfixes
+    \o X Fixes Extension
+    \o \tt{-xfixes} or auto-detected
+    \o 3.0.0
+    \row {id="OptionalColor"}
+    \o Xinerama 
+    \o libXinerama
+    \o Multi-head support
+    \o \tt{-xinerama} or auto-detected
+    \o 1.1.0
+
+    \row {id="OptionalColor"}
+    \o Fontconfig
+    \o libfontconfig
+    \o Font customization and configuration
+    \o \tt{-fontconfig} or auto-detected
+    \o 2.1
+    \row {id="OptionalColor"}
+    \o FreeType
+    \o libfreetype
+    \o Font engine
+    \o 
+    \o 2.1.3
+
+    \row {id="DefaultColor"}
+    \o Xi
+    \o libXi
+    \o X11 Input Extensions
+    \o \tt{-xinput} or auto-detected
+    \o 1.3.0
+    \row {id="DefaultColor"}
+    \o Xt
+    \o libXt
+    \o Xt Intrinsics
+    \o
+    \o 0.99
+    \row {id="DefaultColor"}
+    \o Xext
+    \o libXext
+    \o X Extensions
+    \o
+    \o 6.4.3
+    \row {id="DefaultColor"}
+    \o X11
+    \o libX11
+    \o X11 Client-Side Library
+    \o
+    \o 6.2.1
+
+    \row {id="SMColor"}
+    \o SM
+    \o libSM
+    \o X Session Management
+    \o \tt{-sm} or auto-detected
+    \o 6.0.4
+    \row {id="SMColor"}
+    \o ICE
+    \o libICE
+    \o Inter-Client Exchange
+    \o \tt{-sm} or auto-detected
+    \o 6.3.5
+
+    \row {id="GlibColor"}
+    \o glib
+    \o libglib-2.0
+    \o Common event loop handling
+    \o \tt{-glib} or auto-detected
+    \o 2.8.3
+    \row {id="PthreadColor"}
+    \o pthread
+    \o libpthread
+    \o Multithreading
+    \o
+    \o 2.3.5
+    \endtable  
 
     \note You must compile with XRender support to get alpha transparency
     support for pixmaps and images.
diff --git a/doc/src/howtos/scalabilityintro.qdoc b/doc/src/howtos/scalabilityintro.qdoc
index 66c7bb7..5b4e58b 100644
--- a/doc/src/howtos/scalabilityintro.qdoc
+++ b/doc/src/howtos/scalabilityintro.qdoc
@@ -196,7 +196,7 @@
     defined in a proportional way using a combination of
 
     \list
-    \o \l{Item::}{anchors} within an Item
+    \o \l{Item::anchors.top}{anchors} within an Item
     \o \l{Row} / \l{Column} / \l{Grid}
     \o simple javascript expressions such as width: Math.round(parent.width / 3.0).
     \endlist
diff --git a/doc/src/overviews.qdoc b/doc/src/overviews.qdoc
index 73900c4..eb9b2be 100644
--- a/doc/src/overviews.qdoc
+++ b/doc/src/overviews.qdoc
@@ -62,7 +62,7 @@
 
 /*!
     \group qt-graphics
-	\ingroup qt-basic-concepts
+    \ingroup qt-basic-concepts
     \title Qt Graphics and Printing
 
     \brief The Qt components for doing graphics.
diff --git a/doc/src/template/style/style.css b/doc/src/template/style/style.css
index 4cb8fef..4071145 100755
--- a/doc/src/template/style/style.css
+++ b/doc/src/template/style/style.css
@@ -7,7 +7,7 @@
         color: #000000;
         background: #FFFFFF;
     }
-    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
+    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, th, td
     {
         margin: 0;
         padding: 0;
@@ -185,7 +185,161 @@
     {
         float: right; margin-left: 2em
     }
+    div.clear-both
+    {
+        clear: both 
+    }
+    div.clear-left
+    {
+        clear: left 
+    }
+    div.clear-right
+    {
+        clear: right 
+    }
 
+    #color-white
+    {
+        background: #ffffff; 
+        color: #000000;
+    }
+    #color-black
+    {
+        background: #000000;
+        color: #ffffff;
+    }
+    #color-red
+    {
+        background: #ff0000;
+        color: #000000;
+    }
+    #color-darkRed
+    {
+        background: #800000;
+        color: #ffffff;
+    }
+    #color-green
+    {
+        background: #00ff00;
+        color: #000000;
+    }
+    #color-darkGreen
+    {
+        background: #008000;
+        color: #ffffff;
+    }
+    #color-blue
+    {
+        background: #0000ff;
+        color: #ffffff;
+    }
+    #color-darkBlue
+    {
+        background: #000080;
+        color: #ffffff;
+    }
+    #color-cyan
+    {
+        background: #00ffff;
+        color: #000000;
+    }
+    #color-darkCyan
+    {
+        background: #008080;
+        color: #ffffff;
+    }
+    #color-magenta
+    {
+        background: #ff00ff;
+        color: #000000;
+    }
+    #color-darkMagenta
+    {
+        background: #800080;
+        color: #ffffff;
+    }
+    #color-yellow
+    {
+        background: #ffff00;
+        color: #000000;
+    }
+    #color-darkYellow
+    {
+        background: #808000;
+        color: #ffffff;
+    }
+    #color-gray
+    {
+        background: #a0a0a4;
+        color: #000000;
+    }
+    #color-darkGray
+    {
+        background: #808080;
+        color: #ffffff;
+    }
+    #color-lightGray
+    {
+        background: #c0c0c0;
+        color: #000000;
+    }
+    #QtGuiColor
+    {
+      background-color: #98fd00;
+      color: black;
+    }
+    #QtCoreColor
+    {
+      background-color: #9c9cff;
+      color: black;
+    }
+    #DefaultColor
+    {
+      background-color: #f6f6dc;
+      color: black;
+    }
+    #FreetypeColor
+    {
+      background-color: #e6e6fa;
+      color: black;
+    }
+    #GLColor
+    {
+      background-color: #ffc0cb;
+      color: black;
+    }
+    #PthreadColor
+    {
+      background-color: #bdb76b;
+      color: black;
+    }
+    #OptionalColor
+    {
+      background-color: #cae1ff;
+      color: black;
+    }
+    #SMColor
+    {
+      background-color: #c2fafa;
+      color: black;
+    }
+    #MiscColor
+    {
+      background-color: #f0f9ff;
+      color: black;
+    }
+    #GlibColor
+    {
+      background-color: #b3b3b3;
+      color: black;
+    }
+    .figCaption
+    {
+      color:#363534;
+      font:italic 11px/1.2 Verdana;
+      text-align: center;
+      padding-top:0;
+    }
     span.comment
     {
         color: #008B00;
@@ -1031,11 +1185,28 @@
         padding:0px;
     }
 
-    .content .alignedsummary
-    {
-        margin: 15px;
-    }
-
+        .content .alignedsummary
+        {
+          margin: 15px;
+        }
+
+        .details
+        {
+            text-align: left;
+            font-size: 80%;
+            color: blue
+        }
+        .variableName
+        {
+            font-family: courier;
+	    color: blue
+        }
+        .newStuff
+        {
+            text-align: left;
+            font-size: 80%;
+            color: red
+        }
 
     .qmltype
     {
diff --git a/doc/src/tutorials/widgets-tutorial.qdoc b/doc/src/tutorials/widgets-tutorial.qdoc
index 2125edc..6c5df66 100644
--- a/doc/src/tutorials/widgets-tutorial.qdoc
+++ b/doc/src/tutorials/widgets-tutorial.qdoc
@@ -133,19 +133,13 @@
     In the following example, we use QWidget to create and show a window with
     a default size:
 
-    \raw HTML
-    <table align="left" width="100%">
-    <tr class="qt-code"><td>
-    \endraw
-    \snippet tutorials/widgets/toplevel/main.cpp main program
-    \raw HTML
-    </td><td align="right">
-    \endraw
-    \inlineimage widgets-tutorial-toplevel.png
-    \raw HTML
-    </td></tr>
-    </table>
-    \endraw
+    \div {class="qt-code"}
+    \table
+    \row
+    \o \snippet tutorials/widgets/toplevel/main.cpp main program
+    \o \inlineimage widgets-tutorial-toplevel.png
+    \endtable
+    \enddiv
 
     To create a real GUI, we need to place widgets inside the window. To do
     this, we pass a QWidget instance to a widget's constructor, as we will
@@ -161,19 +155,13 @@
     passing \c window as the parent to its constructor. In this case, we add a
     button to the window and place it in a specific location:
 
-    \raw HTML
-    <table align="left" width="100%">
-    <tr class="qt-code"><td>
-    \endraw
-    \snippet tutorials/widgets/childwidget/main.cpp main program
-    \raw HTML
-    </td><td align="right">
-    \endraw
-    \inlineimage widgets-tutorial-childwidget.png
-    \raw HTML
-    </td></tr>
-    </table>
-    \endraw
+    \div {class="qt-code"}
+    \table
+    \row
+    \o \snippet tutorials/widgets/childwidget/main.cpp main program
+    \o \inlineimage widgets-tutorial-childwidget.png
+    \endtable
+    \enddiv
 
     The button is now a child of the window and will be deleted when the
     window is destroyed. Note that hiding or closing the window does not
@@ -189,19 +177,13 @@
     construct a label and line edit widget that we would like to arrange
     side-by-side.
 
-    \raw HTML
-    <table align="left" width="100%">
-    <tr class="qt-code"><td>
-    \endraw
-    \snippet tutorials/widgets/windowlayout/main.cpp main program
-    \raw HTML
-    </td><td align="right">
-    \endraw
-    \inlineimage widgets-tutorial-windowlayout.png
-    \raw HTML
-    </td></tr>
-    </table>
-    \endraw
+    \div {class="qt-code"}
+    \table
+    \row
+    \o \snippet tutorials/widgets/windowlayout/main.cpp main program
+    \o \inlineimage widgets-tutorial-windowlayout.png
+    \endtable
+    \enddiv
 
     The \c layout object we construct manages the positions and sizes of
     widgets supplied to it with the \l{QHBoxLayout::}{addWidget()} function.
@@ -233,20 +215,14 @@
     \c{mainLayout} is a QVBoxLayout that contains \c{queryLayout} and a
     QTableView arranged vertically.
 
-    \raw HTML
-    <table align="left" width="100%">
-    <tr class="qt-code"><td>
-    \endraw
-    \snippet tutorials/widgets/nestedlayouts/main.cpp first part
-    \snippet tutorials/widgets/nestedlayouts/main.cpp last part
-    \raw HTML
-    </td><td align="right">
-    \endraw
-    \inlineimage widgets-tutorial-nestedlayouts.png
-    \raw HTML
-    </td></tr>
-    </table>
-    \endraw
+    \div {class="qt-code"}
+    \table
+    \row
+    \o \snippet tutorials/widgets/nestedlayouts/main.cpp first part
+       \snippet tutorials/widgets/nestedlayouts/main.cpp last part
+    \o \inlineimage widgets-tutorial-nestedlayouts.png
+    \endtable
+    \enddiv
 
     Note that we call the \c{mainLayout}'s \l{QBoxLayout::}{addLayout()}
     function to insert the \c{queryLayout} above the \c{resultView} table.
diff --git a/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc b/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
index ad2d702..f734e43 100644
--- a/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
+++ b/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
@@ -41,7 +41,7 @@
 
     现在您已经编写了一些小型可用的应用程序，并对 Qt 编程有更加广泛的了解。您可以直接着手做自己的项目，但我们建议您阅读以下一些关键简介以加深您对 Qt 的了解：\l{Qt Object Model}Qt 对象模型}和\l{Signals and Slots}{信号和槽}。
 
-    \div {float-left}
+    \div {class="float-left"}
     \inlineimage qtdemo-small.png
     \enddiv