Adding QtWebKit Guide CSS files.

41 files changed, 4271 insertions, 0 deletions

diff --git a/examples/webkit/webkit-guide/css/anim_accord.css b/examples/webkit/webkit-guide/css/anim_accord.css
new file mode 100755
index 0000000000..c9c013affa
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_accord.css
@@ -0,0 +1,246 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    width               : 100;
+}
+
+body > section {
+    border-radius       : 1em;
+    background          : #ffffff;
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    min-height          : 70%;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
+.nav > a {
+    display             : inline-block;
+    width               : 48px;
+    height              : 48px;
+}
+
+h1, h2, h3, h4 {
+    margin-top          : 0.0em;
+    font-size           : smaller;
+    padding-top         : 1em;
+}
+
+body > section.main {
+    position            : absolute;
+    left                : 1em;
+    right               : 1em;
+    top                 : 1em;
+    min-height          : 50%;
+    border-radius       : 0.5em;
+    background          : #aaaaaa;
+    padding             : 0;
+}
+
+section.main > article {
+    background          : #ffffff;
+    padding             : 1em;
+    margin-bottom       : 10em;
+    border-radius       : 0.5em;
+}
+
+#accordion,
+#accordion > dt,
+#accordion > dd,
+{
+    display             : block;
+}
+
+#accordion > dt {
+    border-top          : thin solid #777777;
+}
+
+#accordion > dd {
+    border-bottom       : thin solid #777777;
+}
+
+#accordion > dd {
+    background-image    : -webkit-gradient(linear,center top,center bottom,from(#aaaaaa),to(#ffffff));
+}
+
+#accordion.collapsed {
+    background-size     : auto;
+    background-image    : url(../img/icon_expand-nav.png);
+    background-repeat   : no-repeat;
+    background-position : 0.25em 0.25em;
+}
+
+#accordion {
+    position        : absolute;;
+    right           : 2em;
+    top             : 0em;
+    overflow        : hidden;
+    background      : #ffffff;
+    cursor          : pointer;
+    z-index         : 100;
+    font-weight     : bold;
+}
+
+#accordion.expanded {
+    border          : thin solid #206ead;
+    width           : 80%;
+    height          : 90%;
+    -webkit-transition:
+        width 0.5s ease-in-out 0.0s,
+        height 0.5s ease-in-out 0.5s
+    ;
+}
+
+#accordion.collapsed {
+    width       : 15%;
+    height      : 9%;
+    -webkit-transition:
+        height 0.5s ease-in-out 0.0s,
+        width 0.5s ease-in-out 0.5s
+    ;
+}
+
+#accordion.collapsed > dt,
+#accordion.collapsed > dd {
+    -webkit-transform       : translate(100%);
+    -webkit-transition      : -webkit-transform 0.5s ease-in-out 0.5s;
+}
+
+#accordion.expanded > dt,
+#accordion.expanded > dd {
+    -webkit-transform       : translate(0%);
+    -webkit-transition      : -webkit-transform 0.5s ease-in-out 0.0s;
+}
+
+#accordion > dt > a {
+    margin-left             : 0.5em;
+}
+
+#accordion > dt ,
+#accordion > dd {
+    padding                 : 0.5em;
+}
+
+#accordion > dt ~ dd {
+    margin                  : 0;
+}
+
+#accordion > dd > ul,
+#accordion > dd > ul > li
+{
+    padding                 : 0;
+    margin                  : 0;
+}
+
+#accordion a,
+#accordion a:active,
+#accordion a:hover,
+#accordion a:visited
+{
+    text-decoration     : none;
+    color               : #000000;
+}
+
+#accordion > dt.expanded:before {
+    content                 : url(../img/icon_head-expanded_x13.png);
+}
+
+#accordion > dt.collapsed:before {
+    content                 : url(../img/icon_head-collapsed_x13.png);
+}
+
+#accordion > dt.expanded {
+    background-image        : -webkit-gradient(linear, center top, center bottom, from(#aaaaaa), to(#ffffff));
+}
+
+#accordion > dt.collapsed {
+    background-image        : -webkit-gradient(linear, center top, center bottom, from(#aaaaaa), to(#ffffff));
+}
+
+#accordion > dt + dd {
+    background              : #ffffff;
+    display                 : block;
+}
+
+#accordion dd {
+    overflow                : none;
+}
+
+#accordion > dt.collapsed + dd {
+    max-height              : 0%;
+    opacity                 : 0;
+    -webkit-transform       : scaleY(0);
+    -webkit-transition      : all 0.5s ease-in-out;
+}
+
+#accordion > dt.expanded + dd {
+    max-height              : 50%;
+    opacity                 : 1;
+    -webkit-transform       : scaleY(1);
+    -webkit-transition      : all 0.5s ease-in-out;
+}
+
+#accordion > dd  {
+    margin                  : 0;
+    padding                 : 0;
+}
+
+#accordion > dd > ul > li {
+    padding-top             : 0.25em;
+    padding-bottom          : 0.5em;
+    padding-left            : 1.0em;
+    padding-right           : 1.0em;
+}
+
+#accordion> dt.collapsed:last-of-type {
+    border-bottom           : thin solid #aaaaaa;
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_demo-rotate.css b/examples/webkit/webkit-guide/css/anim_demo-rotate.css
new file mode 100755
index 0000000000..fa3bd0dee8
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_demo-rotate.css
@@ -0,0 +1,95 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+body {
+    background                      : #aaaaaa;
+    font-weight                     : bold;
+}
+
+section {
+    color                           : #ffffff;
+    background                      : #777777;
+    font-size                       : x-large;
+    -webkit-transform               : translate(-150%) scale(1);
+    position                        : absolute;
+    text-align                      : center;
+    padding                         : 1em;
+    top                             : 3em;
+    left                            : 3em;
+    bottom                          : 3em;
+    right                           : 3em;
+}
+
+@-webkit-keyframes demoRotate {
+    0% { -webkit-transform          : translate(-150%); }
+    10% { -webkit-transform         : rotate(0deg) translate(0); }
+    50% { -webkit-transform         : rotate(180deg) translate(0); }
+    90% { -webkit-transform         : rotate(360deg) translate(0); }
+    100% { -webkit-transform        : translate(150%); }
+}
+
+@-webkit-keyframes demoRotateOrigin {
+    0% { -webkit-transform          : rotate(0deg) translate(-150%); }
+    10% { -webkit-transform         : rotate(0deg) translate(0); }
+    50% { -webkit-transform         : rotate(-180deg) translate(0); }
+    90% { -webkit-transform         : rotate(-360deg) translate(0); }
+    100% { -webkit-transform        : rotate(-360deg) translate(150%) }
+}
+
+@-webkit-keyframes end {
+    0% { -webkit-transform          : translate(150%); }
+    30% { -webkit-transform         : translate(0); }
+    70% { -webkit-transform         : translate(0); }
+    100% { -webkit-transform        : translate(150%); }
+}
+
+.rotate {
+    -webkit-animation                   : demoRotate 9s 2s;
+    -webkit-transform-origin            : center;
+    -webkit-animation-timing-function   : linear;
+}
+.rotateOrigin {
+    -webkit-animation                   : demoRotateOrigin 9s 12s;
+    -webkit-transform-origin            : top left;
+    -webkit-animation-timing-function   : linear;
+}
+.end {
+    -webkit-animation                   : end 3s 22s;
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_demo-scale.css b/examples/webkit/webkit-guide/css/anim_demo-scale.css
new file mode 100755
index 0000000000..1fef86cc8b
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_demo-scale.css
@@ -0,0 +1,112 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background              : #aaaaaa;
+    font-weight    	        : bold;
+}
+
+section {
+    color                   : #ffffff;
+    background              : #777777;
+    font-size               : x-large;
+    -webkit-transform       : translate(-150%) scale(1);
+    position                : absolute;
+    text-align              : center;
+    padding                 : 1em;
+    top                     : 3em;
+    left                    : 3em;
+    bottom                  : 3em;
+    right                   : 3em;
+}
+
+@-webkit-keyframes demoScale {
+    0% { -webkit-transform      : translate(-150%) scale(1); }
+    10% { -webkit-transform     : scale(1.0) translate(0); }
+    30% { -webkit-transform     : scale(0.5) translate(0); }
+    50% { -webkit-transform     : scale(1.0) translate(0); }
+    70% { -webkit-transform     : scale(1.5) translate(0); }
+    90% { -webkit-transform     : scale(1.0) translate(0); }
+    100% { -webkit-transform    : translate(150%) scale(1); }
+}
+
+@-webkit-keyframes demoScaleX {
+    0% { -webkit-transform      : translate(-150%) scale(1); }
+    10% { -webkit-transform     : scaleX(1.0) translate(0); }
+    30% { -webkit-transform     : scaleX(0.5) translate(0); }
+    50% { -webkit-transform     : scaleX(1.0) translate(0); }
+    70% { -webkit-transform     : scaleX(1.5) translate(0); }
+    90% { -webkit-transform     : scaleX(1.0) translate(0); }
+    100% { -webkit-transform    : translate(150%) scale(1); }
+}
+
+@-webkit-keyframes demoScaleY {
+    0% { -webkit-transform      : translate(-150%) scale(1); }
+    10% { -webkit-transform     : scaleY(1.0) translate(0); }
+    30% { -webkit-transform     : scaleY(0.5) translate(0); }
+    50% { -webkit-transform     : scaleY(1.0) translate(0); }
+    70% { -webkit-transform     : scaleY(1.5) translate(0); }
+    90% { -webkit-transform     : scaleY(1.0) translate(0); }
+    100% { -webkit-transform    : translate(150%) scale(1); }
+}
+
+@-webkit-keyframes end {
+    0% { -webkit-transform      : translate(150%); }
+    30% { -webkit-transform     : translate(0); }
+    70% { -webkit-transform     : translate(0); }
+    100% { -webkit-transform    : translate(150%); }
+}
+
+.scale {
+    -webkit-animation           : demoScale 9s 2s;
+    -webkit-transform-origin    : bottom;
+}
+.scaleX {
+    -webkit-animation           : demoScaleX 9s 12s;
+    -webkit-transform-origin    : left;
+}
+.scaleY {
+    -webkit-animation           : demoScaleY 9s 22s;
+    -webkit-transform-origin    : center;
+}
+.end {
+    -webkit-animation           : end 3s 32s;
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_demo-skew.css b/examples/webkit/webkit-guide/css/anim_demo-skew.css
new file mode 100755
index 0000000000..2d90bf9574
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_demo-skew.css
@@ -0,0 +1,98 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background              : #aaaaaa;
+    font-weight             : bold;
+}
+
+section {
+    color                   : #ffffff;
+    background              : #777777;
+    font-size               : x-large;
+    -webkit-transform       : translate(-150%) scale(1);
+    position                : absolute;
+    text-align              : center;
+    padding                 : 1em;
+    top                     : 3em;
+    left                    : 3em;
+    bottom                  : 3em;
+    right                   : 3em;
+}
+
+@-webkit-keyframes demoSkew {
+    0% { -webkit-transform      : translate(-150%); }
+    10% { -webkit-transform     : skew(0deg) translate(0); }
+    30% { -webkit-transform     : skew(30deg) translate(0); }
+    50% { -webkit-transform     : skew(0deg) translate(0); }
+    70% { -webkit-transform     : skew(-30deg) translate(0); }
+    90% { -webkit-transform     : skew(0deg) translate(0); }
+    100% { -webkit-transform    : translate(150%); }
+}
+
+@-webkit-keyframes demoSkewY {
+    0% { -webkit-transform      : translate(-150%); }
+    10% { -webkit-transform     : skewY(0deg) translate(0); }
+    30% { -webkit-transform     : skewY(30deg) translate(0); }
+    50% { -webkit-transform     : skewY(0deg) translate(0); }
+    70% { -webkit-transform     : skewY(-30deg) translate(0); }
+    90% { -webkit-transform     : skewY(0deg) translate(0); }
+    100% { -webkit-transform    : translate(150%); }
+}
+
+@-webkit-keyframes end {
+    0% { -webkit-transform      : translate(150%); }
+    30% { -webkit-transform     : translate(0); }
+    70% { -webkit-transform     : translate(0); }
+    100% { -webkit-transform    : translate(150%); }
+}
+
+.skew {
+    -webkit-animation           : demoSkew 9s 2s;
+    -webkit-transform-origin    : bottom;
+}
+.skewY {
+    -webkit-animation           : demoSkewY 9s 12s;
+    -webkit-transform-origin    : left;
+}
+.end {
+    -webkit-animation           : end 3s 22s;
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_gallery.css b/examples/webkit/webkit-guide/css/anim_gallery.css
new file mode 100755
index 0000000000..fe14aa263c
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_gallery.css
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family             : sans-serif;
+    background              : #444444;
+}
+.gallery > div > div {
+    border-radius           : 1.0em;
+    padding                 : 1em;
+    background              : #dddddd;
+    min-height              : 75%;
+}
+.gallery > div {
+    -webkit-transition      : all 0.5s ease-in-out;
+    z-index                 : 0;
+    position                : absolute;
+    top                     : 2.0em;
+    bottom                  : 2.0em;
+    left                    : 2.0em;
+    right                   : 2.0em;
+}
+.gallery > div.selected {
+    -webkit-transform       : translate(0) scale(1);
+    opacity                 : 1.0;
+    z-index                 : 1;
+}
+.gallery > div.queueR {
+    -webkit-transform       : translate(70%) scale(0.5);
+    opacity                 : 0.75;
+}
+.gallery > div.queueL {
+    -webkit-transform       : translate(-70%) scale(0.5);
+    opacity                 : 0.75;
+}
+.gallery > div.hideR {
+    -webkit-transform       : translate(200%) scale(0.5);
+    opacity                 : 0.0;
+}
+.gallery > div.hideL {
+    -webkit-transform       : translate(-200%) scale(0.5);
+    opacity                 : 0.0;
+}
+.gallery img {
+    max-width               : 100%;
+    max-height              : 100%;
+    border-radius           : 1.0em;
+}
+
+.gallery > #reveal > div, .gallery > div > img {
+    -webkit-transform       : scaleX(1) scaleY(1);
+    -webkit-transition      : -webkit-transform 0.25s ease-out 0.25s;
+}
+.gallery > div > div, .gallery > #reveal > img {
+    -webkit-transform       : scaleX(0) scaleY(1);
+    -webkit-transition      : -webkit-transform 0.25s ease-out;
+}
+
+section > div {
+    text-align              : center;
+}
+
+section > div > img {
+    display                 : inline-block;
+}
+
+section > div > div {
+    position                : absolute;
+    top                     : 0;
+    left                    : 1.5em;
+    right                   : 1.5em;
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_panel.css b/examples/webkit/webkit-guide/css/anim_panel.css
new file mode 100755
index 0000000000..87037c9a9e
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_panel.css
@@ -0,0 +1,116 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+section {
+    background          : #aaaaaa;
+    position            : absolute;
+    left                : 1em;
+    right               : 1em;
+    top                 : 1em;
+    bottom              : 1em;
+}
+
+.force {
+    padding-right       : 5in;
+}
+
+#panel {
+    text-align          : justify;
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+    background          : #ffffff;
+    max-height          : 2.0em;
+    float               : right;
+    overflow            : hidden;
+}
+
+nav.expanded {
+    max-width           : 95%;
+    -webkit-transition  : max-width 0.5s ease-in-out;
+}
+
+nav.collapsed {
+    max-width           : 12%;
+    -webkit-transition  : max-width 0.5s ease-in-out;
+
+}
+
+nav.expanded > .button {
+    display             : none;
+}
+
+nav.collapsed > .button {
+    display        : inline-block;
+}
+
+nav.expanded > .option {
+    opacity             : 1;
+    -webkit-transform   : scale(1);
+    -webkit-transition  : all 0.5s linear;
+}
+nav.collapsed > .option {
+    opacity             : 0;
+    -webkit-transform   : scale(0);
+    -webkit-transition  : all 0.5s linear;
+}
+
+#dbg {
+    padding             : 1em;
+    border-radius       : 1em;
+    position            : absolute;
+    top                 : 75%;
+    bottom              : 1em;
+    left                : 1em;
+    right               : 1em;
+    background          : #ffffff;
+}
+
+.measure {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    width               : 320px;
+    background          : green;
+}
diff --git a/examples/webkit/webkit-guide/css/anim_pulse.css b/examples/webkit/webkit-guide/css/anim_pulse.css
new file mode 100755
index 0000000000..4b850b9bc8
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_pulse.css
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
+.force {
+    padding-left        : 100%
+}
+
+nav {
+    text-align          : justify;
+}
+
+nav > a {
+    background-size     : contain;
+    background-repeat   : no-repeat;
+}
+
+nav > a {
+    display             : inline-block;
+    width               : 2em;
+    height              : 2em;
+}
+
+nav > a:nth-of-type(1) { background-image : url(../img/ic_fe_032.png); }
+nav > a:nth-of-type(2) { background-image : url(../img/ic_ni_032.png); }
+nav > a:nth-of-type(3) { background-image : url(../img/ic_he_032.png); }
+nav > a:nth-of-type(4) { background-image : url(../img/ic_na_032.png); }
+nav > a:nth-of-type(5) { background-image : url(../img/ic_zn_032.png); }
+nav > a:nth-of-type(6) { background-image : url(../img/ic_o_032.png); }
+
+h1,h2,h3 { margin-top : 0; }
+
+nav > a:target { -webkit-animation : pulse 1s infinite; }
+
+@-webkit-keyframes pulse {
+    0% { opacity    : 1.0 }
+    50% { opacity   : 0.7 }
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_skew.css b/examples/webkit/webkit-guide/css/anim_skew.css
new file mode 100755
index 0000000000..e44a633e96
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_skew.css
@@ -0,0 +1,186 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background              : #aaaaaa;
+    padding                 : 1em;
+    font-family             : "Helvetica";
+    font-weight             : bold;
+}
+
+span {
+    background              : #ffffff;
+    font-weight             : bold;
+    cursor                  : pointer;
+}
+
+.items > div {
+    cursor                  : pointer;
+    background              : #ffffff;
+    height                  : 2em;
+    padding                 : 0.5em 0.5em 0.0em 0.5em;
+    border-radius           : 0.25em;
+    position                : absolute;
+    left                    : 1em;
+    right                   : 1em;
+    -webkit-transition-property         : -webkit-transform, top;
+    -webkit-transition-duration         : 0.5s, 0.5s;
+    -webkit-transition-delay            : 0s, 0.5s;
+    -webkit-transition-timing-function  : ease-in-out;
+}
+
+.hide {
+    -webkit-transform-origin            : bottom left;
+    -webkit-transform                   : skew(40deg) translate(140%,0em);
+}
+
+.items > div:after {
+    content                 : url(../img/icon_dismiss_x22.png);
+    float                   : right;
+}
+
+.row1 {
+    top                     : 3.5em;
+}
+.row2 {
+    top                     : 6.5em;
+}
+.row3 {
+    top                     : 9.5em;
+}
+.row4 {
+    top                     : 12.5em;
+}
+.row5 {
+    top                     : 15.5em;
+}
+.row6 {
+    top                     : 18.5em;
+}
+.row7 {
+    top                     : 21.5em;
+}
+.row8 {
+    top                     : 24.5em;
+}
+.row9 {
+    top                     : 27.5em;
+}
+.row10 {
+    top                     : 30.5em;
+}
+.row11 {
+    top                     : 33.5em;
+}
+.row12 {
+    top                     : 36.5em;
+}
+.row13 {
+    top                     : 39.5em;
+}
+.row14 {
+    top                     : 42.5em;
+}
+.row15 {
+    top                     : 45.5em;
+}
+
+.items > div {
+    padding-left            : 3.0em;
+    color                   : #444444;
+    background-size         : contain;
+    background-repeat       : no-repeat;
+}
+
+.items > div[title='cat1'] {
+    background-image            : url(../img/ic_fe_036.png);
+}
+
+.items > div[title='cat2'] {
+    background-image            : url(../img/ic_na_036.png);
+}
+
+.items > div[title='cat3'] {
+    background-image            : url(../img/ic_ni_036.png);
+}
+
+.items > div[title='cat4'] {
+    background-image            : url(../img/ic_mg_036.png);
+}
+
+nav {
+    position                : absolute;
+    background              : #aaaaaa;
+    top                     : 0;
+    left                    : 0;
+    right                   : 0;
+    z-index                 : 10;
+    height                  : 2em;
+    text-align              : center;
+    padding                 : 0.5em;
+}
+
+nav > div {
+    background-size         : contain;
+    background-repeat       : no-repeat;
+    display                 : inline-block;
+    width                   : 36px;
+    height                  : 36px;
+    margin-left             : 0.25em;
+    margin-right            : 0.25em;
+    background-image        : -webkit-gradient(linear,center top,center bottom,from(#ffffff),to(#eeeeee));
+}
+
+nav > div {
+    background-image            : url(../img/icon_list-all.png);
+}
+nav > .cat1 {
+    background-image            : url(../img/ic_fe_036.png);
+}
+nav > .cat2 {
+    background-image            : url(../img/ic_na_036.png);
+}
+nav > .cat3 {
+    background-image            : url(../img/ic_ni_036.png);
+}
+nav > .cat4 {
+    background-image            : url(../img/ic_mg_036.png);
+}
+
diff --git a/examples/webkit/webkit-guide/css/anim_slide.css b/examples/webkit/webkit-guide/css/anim_slide.css
new file mode 100755
index 0000000000..7997cc2c2b
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_slide.css
@@ -0,0 +1,148 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* main layout */
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+h1 {
+    min-height          : 1.5em;
+    background          : #ffffff;
+    margin-left         : 1em;
+    margin-right        : 1em;
+    text-align          : center;
+    font-size           : 18px;
+    padding-top         : 0.25em;
+    padding-bottom      : 0.25em;
+    border-radius       : 0.5em;
+}
+
+.panel {
+    position            : absolute;
+    top                 : 0em;
+    bottom              : 0em;
+    left                : 0em;
+    right               : 0em;
+}
+
+article {
+    background          : #ffffff;
+    padding             : 1em;
+    border-radius       : 1em;
+    margin              : 1em;
+}
+
+.panel > ul {
+    padding             : 0em;
+    list-style-type     : none;
+}
+.panel > ul > li {
+    background          : #fff;
+    margin              : 0.5em 1.0em 0.5em 1.0em;
+    padding             : 0.5em;
+    display             : block;
+    border-radius       : 0.5em;
+}
+.panel > ul > li > a {
+    width               : 100%;
+    display             : block;
+    text-decoration     : none;
+    text-align          : justify;
+    color               : #000000;
+}
+.panel > a {
+    background          : #fff;
+    margin              : 0 1.0em 1.0em 0em;
+    padding             : 0.5em;
+}
+/* navigational hints */
+
+a.go_out {
+    background          : transparent;
+    position            : absolute;
+    top                 : 0.5em;
+    left                : 1.2em;
+    content             : url(../img/icon_drill-up_x32.png);
+    padding             : 0.25em;
+    border-radius       : 1em;
+    display             : block;
+}
+
+.panel > ul > li > a:after {
+    text-align          : right;
+    float               : right;
+    font-size           : 1em;
+    font-weight         : bold;
+}
+.panel > ul > li > a:after {
+    -webkit-transform   : translate(0, -0.5em);
+    content             : url(../img/icon_drill-down_x32.png);
+}
+
+/* animations */
+#in:target {
+    -webkit-animation   : slide_in 0.25s;
+}
+#out:target + .panel {
+    -webkit-animation   : slide_out 0.25s;
+}
+@-webkit-keyframes slide_in {
+    from {
+        left            : 80%;
+        right           : -80%;
+    }
+    to {
+        left            : 0em;
+        right           : 0em;
+    }
+}
+@-webkit-keyframes slide_out {
+    from {
+        left            : -80%;
+        right           : 80%;
+    }
+    to {
+        left            : 0em;
+        right           : 0em;
+    }
+}
diff --git a/examples/webkit/webkit-guide/css/anim_tabbedSkew.css b/examples/webkit/webkit-guide/css/anim_tabbedSkew.css
new file mode 100755
index 0000000000..1c03e48966
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/anim_tabbedSkew.css
@@ -0,0 +1,113 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+section {
+    background          : #ffffff;
+    position            : absolute;
+    left                : 1em;
+    right               : 1em;
+    top                 : 1em;
+    min-height          : 60%;
+    padding             : 1.0em;
+    border-radius       : 0.5em;
+}
+
+nav {
+    text-align          : right;
+    width               : 3.5em;
+    height              : 4em;
+    float               : right;
+}
+
+nav > a {
+    border-radius       : 0.25em;
+    width               : 1em;
+    height              : 1em;
+    text-align          : center;
+    font-weight         : bold;
+    font-size           : 2em;
+    text-decoration     : none;
+    color               : black;
+    position            : relative;
+    background-size     : contain;
+    display             : block;
+}
+
+nav > a:nth-of-type(1) {
+    margin-bottom       : 0.1em;
+    background-image    : url(../img/ic_he_032.png);
+    -webkit-transform   : skew(-30deg);
+}
+
+nav > a:nth-of-type(2) {
+    background-image    : url(../img/ic_o_032.png);
+    -webkit-transform   : skew(30deg);
+}
+
+nav > a:nth-of-type(3) {
+    background-image    : url(../img/ic_na_032.png);
+    -webkit-transform   : rotate(-60deg) skew(-30deg) translate(1.7em, -1px);
+}
+
+article {
+    display             : none;
+    margin-bottom       : 4em;
+}
+
+article:target {
+    display             : block;
+}
+
+h3 + div {
+    display             : inline-block;
+    float               : right;
+    width               : 12px;
+    height              : 3em;
+}
+
+h1,h2,h3,h4 {
+    margin-top          : 0.5em;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_backgrounds.css b/examples/webkit/webkit-guide/css/css3_backgrounds.css
new file mode 100755
index 0000000000..c2a3a300e0
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_backgrounds.css
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family             : sans-serif;
+    background              : #aaaaaa;
+}
+
+h1,h2,h3,h4 {
+    background              : #ffffff;
+    text-align              : center;
+    margin                  : 0.5em;
+    padding                 : 0.5em;
+    border-radius           : 0.5em;
+}
+
+.accordion {
+    margin                  : 0.5em 0.5em 6em 0.5em;
+    border-radius           : 0.5em;
+    border                  : thin solid #aaa;
+    background              : #ffffff;
+    overflow                : hidden;
+    padding                 : 1.0em 0.5em 1.0em 0.5em;
+
+}
+
+.accordion > dt {
+    cursor                  : pointer;
+    border-top              : thin solid #aaa;
+    border-radius           : 0.5em;
+    padding                 : 0.5em 0.5em 0.5em 2.5em;
+    font-weight             : bold;
+    background-size         : auto;
+    background-image        : url(../img/icon_head-collapsed_x13.png);
+    background-repeat       : no-repeat;
+    background-position     : 12px 12px;
+}
+
+.accordion > dt:first-of-type {
+    border-top              : none;
+}
+
+.accordion > dt.selected {
+    background-image        : url(../img/icon_head-expanded_x13.png)    , url(../img/gradient.jpg);
+    background-repeat       : no-repeat                , repeat-x;
+    background-position     : 12px 12px                , 0 0;
+    margin-bottom           : 0em;
+}
+
+dt + dd {
+    max-height              : 0%;
+    margin                  : 0;
+    opacity                 : 0;
+    padding                 : 0.5em;
+    overflow-y              : hidden;
+    max-height              : 0;
+    -webkit-transform       : scaleY(0);
+    -webkit-transition      : all 0.5s linear;
+}
+
+dt.selected + dd {
+    -webkit-transform           : scaleY(1);
+    -webkit-transform-origin    : center;
+    max-height                  : 1000px;
+    -webkit-transition          : all 0.5s linear;
+    opacity                     : 1;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_border-img.css b/examples/webkit/webkit-guide/css/css3_border-img.css
new file mode 100755
index 0000000000..1293e2e27c
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_border-img.css
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background              : #aaaaaa;
+    font-family             : sans-serif;
+}
+
+h1,h2,h3,h4 {
+    text-align              : center;
+}
+
+section {
+    position                : absolute;
+    top                     : 0;
+    left                    : 0;
+    right                   : 0;
+    bottom                  : 0;
+}
+
+article {
+    background              : #ffffff;
+    border-radius           : 1.0em;
+    padding                 : 1.0em;
+    margin                  : 1em;
+    min-height              : 50%;
+}
+
+.fruit {
+    padding                 : 2.5em;
+    -webkit-border-image    : url(../img/border-frame.png) 2 stretch stretch;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_grad-radial.css b/examples/webkit/webkit-guide/css/css3_grad-radial.css
new file mode 100755
index 0000000000..7799153dbd
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_grad-radial.css
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background                  : #aaaaaa;
+    font-family                 : sans-serif;
+    font-weight                 : bold;
+}
+
+h1,h2,h3,h4 {
+    text-align                  : center;
+}
+
+section {
+    position                    : absolute;
+    top                         : 0;
+    left                        : 0;
+    right                       : 0;
+    bottom                      : 0;
+}
+
+article {
+    background                  : #ffffff;
+    border-radius               : 1.0em;
+    padding                     : 1.0em;
+    margin                      : 1em;
+    min-height                  : 70%;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_gradientBack.css b/examples/webkit/webkit-guide/css/css3_gradientBack.css
new file mode 100755
index 0000000000..48f9d68633
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_gradientBack.css
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family         : sans-serif;
+}
+
+section {
+    position            : absolute;
+    top                 : 0.0em;
+    left                : 0.0em;
+    right               : 0.0em;
+    background          : #aaaaaa;
+    background          : -webkit-gradient(linear, center top, center bottom, from(#dddddd), to(#777777) );
+    padding             : 1em;
+}
+
+article {
+    background          : #ffffff;
+    padding             : 1em;
+    border-radius       : 0.5em;
+    border              : thin #aaaaaa solid;
+    margin-bottom       : 12em;
+}
+
+h1, h2, h3, h4 {
+    text-align          : center;
+    margin-top          : 0.5em;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_gradientBackStop.css b/examples/webkit/webkit-guide/css/css3_gradientBackStop.css
new file mode 100755
index 0000000000..0fbaf526ef
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_gradientBackStop.css
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family         : sans-serif;
+}
+
+section {
+    position            : absolute;
+    top                 : 0.0em;
+    left                : 0.0em;
+    right               : 0.0em;
+    background          : #aaaaaa;
+    background          : -webkit-gradient(linear, center top, center bottom, from(#777777), color-stop(50%,#dddddd), to(#777777) );
+    padding             : 1em;
+}
+
+article {
+    background          : #ffffff;
+    padding             : 1em;
+    border-radius       : 0.5em;
+    border              : thin #aaaaaa solid;
+    margin-bottom       : 12em;
+}
+
+h1, h2, h3, h4 {
+    text-align          : center;
+    margin-top          : 0.5em;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_gradientButton.css b/examples/webkit/webkit-guide/css/css3_gradientButton.css
new file mode 100755
index 0000000000..6d0c9f77c8
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_gradientButton.css
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #ffffff;
+}
+
+article {
+    background          : #ffffff;
+    position            : absolute;
+    margin              : 0;
+    left                : 0;
+    right               : 0;
+    top                 : 0;
+    bottom              : 0;
+}
+
+ul {
+    font-weight         : bold;
+    padding             : 0;
+    list-style          : none;
+    margin              : 0.5em 0.5em 6em 0.5em;
+}
+
+ul > li {
+    margin-bottom       : 0.5em;
+}
+
+ul > li > a {
+    padding             : 0.5em;
+    display             : block;
+    text-decoration     : none;
+    color               : #000000;
+    border              : thin #aaaaaa solid;
+    border-radius       : 0.5em;
+    background          : #dddddd;
+    background          : -webkit-gradient(linear, center top, center bottom,
+                from(#cccccc), to(#ffffff) );
+}
+
+ul > li > a:active {
+    color               : #ffffff;
+    background          : #ffffff;
+    background          : -webkit-gradient(linear, center top, center bottom,
+                from(#dddddd), to(#444444) );
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_mask-grad.css b/examples/webkit/webkit-guide/css/css3_mask-grad.css
new file mode 100755
index 0000000000..24f0b227a7
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_mask-grad.css
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family                 : sans-serif;
+    background                  : #ffffff;
+}
+
+h1,h2,h3,h4 {
+    text-align                  : center;
+}
+
+img {
+    -webkit-mask-box-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+    border-radius               : 0.25em;
+    margin                      : 0.1em;
+}
+
+img.select {
+    -webkit-mask-box-image      : none;
+    -webkit-box-shadow          : 0.2em 0.2em 0.4em #aaaaaa;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_mask-img.css b/examples/webkit/webkit-guide/css/css3_mask-img.css
new file mode 100755
index 0000000000..0203d814fc
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_mask-img.css
@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family             : sans-serif;
+    background              : #333333;
+}
+
+h1,h2,h3,h4 {
+    text-align              : center;
+}
+
+img {
+    position                : absolute;
+    left                    : 5%;
+    top                     : 5%;
+    height                  : 90%;
+    width                   : 90%;
+    -webkit-mask-box-image  : url(../img/mask.png) 5% stretch;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_multicol.css b/examples/webkit/webkit-guide/css/css3_multicol.css
new file mode 100755
index 0000000000..3c07f8b604
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_multicol.css
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    font-family         : sans-serif;
+    background          : #aaaaaa;
+}
+
+section {
+    bottom              : 0;
+    left                : 0;
+    top                 : 12%;
+    right               : 0;
+    position            : absolute;
+    padding-bottom      : 6em;
+}
+
+article {
+    border-radius       : 1em;
+    margin              : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+    margin-top          : 0.0em;
+}
+
+nav.ad {
+    width               : 500%;
+    border              : thin #aaaaaa solid;
+    background          : #dddddd;
+    position            : absolute;
+    top                 : 0%;
+    height              : 10%;
+    column-count        : 5;
+    column-width        : 100%;
+    -webkit-animation   : banner_scroll 30s infinite;
+}
+
+nav.ad > a {
+    width               : 20%;
+    height              : 100%;
+    display             : inline-block;
+    text-align          : center;
+    padding-top         : 0.5em;
+    text-decoration     : none;
+    font-weight         : bold;
+    color               : #000000;
+    font-size           : larger;
+}
+
+nav.ad > a:nth-of-type(5n-0) { background : lightgreen; }
+nav.ad > a:nth-of-type(5n-1) { background : pink; }
+nav.ad > a:nth-of-type(5n-2) { background : plum; }
+nav.ad > a:nth-of-type(5n-3) { background : lightblue; }
+nav.ad > a:nth-of-type(5n-4) { background : lightcoral; }
+
+@-webkit-keyframes banner_scroll {
+    0%  { left  : 0%; }
+    18% { left : 0%; }
+    20% { left : -100%; }
+    38% { left : -100%; }
+    40% { left : -200%; }
+    58% { left : -200%; }
+    60% { left : -300%; }
+    78% { left : -300%; }
+    80% { left : -400%; }
+    95% { left : -400%; }
+    100% { left : 0%; }
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_reflect.css b/examples/webkit/webkit-guide/css/css3_reflect.css
new file mode 100755
index 0000000000..1f2e4542e8
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_reflect.css
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+body > section {
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    margin-bottom       : 10em;
+    min-height          : 70%;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
+.nav > a {
+    display             : inline-block;
+    width               : 48px;
+    height              : 48px;
+}
+
+body > section.main {
+    position            : absolute;
+    left                : 0em;
+    right               : 0em;
+    top                 : 0em;
+    min-height          : 50%;
+    border-radius       : 0.5em;
+    background          : #aaaaaa;
+    padding             : 0;
+}
+
+section.main > article {
+    background          : #ffffff;
+    padding             : 1em;
+    margin              : 1em 1em 10em 1em;
+    border-radius       : 0.5em;
+}
+
+h1, h2, h3 {
+    color               : #206ead;
+    margin-top          : 0em;
+    text-align          : center;
+    margin-bottom       : 1em;
+    -webkit-box-reflect : below -0.25em -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.25, transparent), to(black));
+}
+
+.nav1 { background-image : url(../img/ic_he_032.png) }
+.nav2 { background-image : url(../img/ic_o_032.png) }
+.nav3 { background-image : url(../img/ic_ni_032.png) }
+.nav4 { background-image : url(../img/ic_fe_032.png) }
+.nav5 { background-image : url(../img/ic_na_032.png) }
+.nav6 { background-image : url(../img/ic_zn_032.png) }
+
+h1 { font-size : 1.5em; }
+h2 { font-size : 1.2em; }
+h3 { font-size : 1.0em; }
+
+figure {
+    display             : block;
+    text-align          : center;
+}
+
+figure > img {
+    width               : 70%;
+    margin-bottom       : 3em;
+    -webkit-box-reflect : below 0.25em -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.50, transparent), to(black));
+}
+
+p:first-line {
+    font-weight         : bold;
+}
+
+p:first-letter {
+    font-size           : 200%;
+    float               : left;
+    padding-right       : 0.1em;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_scroll.css b/examples/webkit/webkit-guide/css/css3_scroll.css
new file mode 100755
index 0000000000..ae37c34d1e
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_scroll.css
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background-color        : #aaaaaa;
+    font-family             : sans-serif;
+}
+
+h1,h2,h3,h4 {
+    margin-top              : 0.5em;
+    font-size               : 18px;
+    text-align              : center;
+}
+
+article {
+    background              : #ffffff;
+    border-radius           : 1.0em;
+    padding                 : 1.0em;
+    margin                  : 1.0em 0.5em 6.0em 0.5em;
+    min-height              : 50%;
+}
+
+pre {
+    font-weight             : bold;
+    font-family             : monospace;
+    padding                 : 1.0em 3em 1.0em 1.0em;
+    border                  : thin solid #aaaaaa;
+    border-radius           : 1.5em;
+    overflow-x              : auto;
+    background-image        : -webkit-gradient(linear,left center,right center,from(#ffffff),to(#777777));
+}
+
+pre::-webkit-scrollbar {
+    height                  : 3em;
+}
+
+pre::-webkit-scrollbar-button:increment {
+    background-image        : url(../img/icon_scroll-right.png);
+x    background-size        : contain;
+    background-repeat       : no-repeat;
+    width                   : 3em;
+    height                  : 3em;
+}
+
+pre::-webkit-scrollbar-button:decrement {
+    background-image        : url(../img/icon_scroll-left.png);
+    background-size         : contain;
+    background-repeat       : no-repeat;
+    width                   : 3em;
+    height                  : 3em;
+}
+
+pre::-webkit-scrollbar-track {
+    display                 : none;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_sel-nth.css b/examples/webkit/webkit-guide/css/css3_sel-nth.css
new file mode 100755
index 0000000000..aa1e04b52a
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_sel-nth.css
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+img {
+    position            : absolute;
+    width               : 48px;
+    height              : 48px;
+    padding             : 0.25em;
+    border              : #ffffff medium solid;
+    border-radius       : 0.5em;
+}
+
+/* columns */
+img:nth-of-type(4n-3)       { left    : 2% }
+img:nth-of-type(4n-2)       { left    : 27% }
+img:nth-of-type(4n-1)       { left    : 52% }
+img:nth-of-type(4n-0)       { left    : 77% }
+
+/* rows */
+img:nth-of-type(n)          { top    : 5% }
+img:nth-of-type(n+5)        { top    : 20% }
+img:nth-of-type(n+9)        { top    : 35% }
+img:nth-of-type(n+13)       { top    : 50% }
+img:nth-of-type(n+17)       { top    : 65% }
+img:nth-of-type(n+21)       { top    : 80% }
+
diff --git a/examples/webkit/webkit-guide/css/css3_shadow.css b/examples/webkit/webkit-guide/css/css3_shadow.css
new file mode 100755
index 0000000000..d2f3040a4a
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_shadow.css
@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+body > section {
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    margin-bottom       : 10em;
+    min-height          : 70%;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
+.nav > a {
+    display             : inline-block;
+    width               : 48px;
+    height              : 48px;
+}
+
+nav > a:active {
+    -webkit-transform   : scale(0.8);
+}
+
+h1, h2 {
+    margin-top          : 0em;
+    font-size           : 18px;
+    text-align          : center;
+}
+
+h2 {
+    border-top          : solid thin #aaaaaa;
+}
+
+body > section.main {
+    position            : absolute;
+    left                : 0em;
+    right               : 0em;
+    top                 : 5em;
+    min-height          : 50%;
+    border-radius       : 0.5em;
+    background          : #aaaaaa;
+    padding             : 0;
+}
+
+section.main > article {
+    background          : #ffffff;
+    padding             : 1em;
+    margin              : 1em 1em 10em 1em;
+    border-radius       : 0.5em;
+}
+
+section.nav {
+    z-index             : 10;
+    border-radius       : 0;
+    background          : #aaaaaa;
+    background          : transparent;
+    position            : absolute;;
+    padding             : 1em;
+    top                 : 0;
+    right               : 0.0em;
+    left                : 0.0em;
+}
+
+nav {
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+    background          : #ffffff;
+    top                 : 10px;
+    text-align          : justify;
+    height              : 36px;
+    overflow            : hidden;
+}
+
+nav > a {
+    display             : inline-block;
+    background-repeat   : no-repeat;
+    height              : 36px;
+    width               : 36px;
+}
+
+#force_justify {
+    padding-left        : 100%;
+}
+
+.nav1 { background-image : url(../img/ic_he_032.png) }
+.nav2 { background-image : url(../img/ic_o_032.png) }
+.nav3 { background-image : url(../img/ic_ni_032.png) }
+.nav4 { background-image : url(../img/ic_fe_032.png) }
+.nav5 { background-image : url(../img/ic_na_032.png) }
+.nav6 { background-image : url(../img/ic_zn_032.png) }
+
+nav {
+    -webkit-box-shadow  : 0.5em 0.5em #777777;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_shadowBlur.css b/examples/webkit/webkit-guide/css/css3_shadowBlur.css
new file mode 100755
index 0000000000..f44892735d
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_shadowBlur.css
@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+body > section {
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    margin-bottom       : 10em;
+    min-height          : 70%;
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
+.nav > a {
+    display             : inline-block;
+    width               : 48px;
+    height              : 48px;
+}
+
+h1, h2 {
+    margin-top          : 0em;
+    font-size           : 18px;
+    text-align          : center;
+}
+
+h2 {
+    border-top          : solid thin #aaaaaa;
+}
+
+body > section.main {
+    position            : absolute;
+    left                : 0em;
+    right               : 0em;
+    top                 : 5em;
+    min-height          : 50%;
+    border-radius       : 0.5em;
+    background          : #aaaaaa;
+    padding             : 0;
+}
+
+section.main > article {
+    background          : #ffffff;
+    padding             : 1em;
+    margin              : 1em 1em 10em 1em;
+    border-radius       : 0.5em;
+}
+
+section.nav {
+    z-index             : 10;
+    border-radius       : 0;
+    background          : #aaaaaa;
+    background          : transparent;
+    position            : absolute;;
+    padding             : 1em;
+    top                 : 0;
+    right               : 0.0em;
+    left                : 0.0em;
+}
+
+nav {
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+    background          : #ffffff;
+    top                 : 10px;
+    text-align          : justify;
+    height              : 36px;
+    overflow            : hidden;
+}
+
+nav > a {
+    display             : inline-block;
+    background-repeat   : no-repeat;
+    height              : 36px;
+    width               : 36px;
+}
+
+nav > a:active {
+    -webkit-transform    : scale(0.8);
+}
+
+#force_justify {
+    padding-left        : 100%;
+}
+
+.nav1 { background-image : url(../img/ic_he_032.png) }
+.nav2 { background-image : url(../img/ic_o_032.png) }
+.nav3 { background-image : url(../img/ic_ni_032.png) }
+.nav4 { background-image : url(../img/ic_fe_032.png) }
+.nav5 { background-image : url(../img/ic_na_032.png) }
+.nav6 { background-image : url(../img/ic_zn_032.png) }
+
+nav {
+    -webkit-box-shadow : 0.5em 0.5em 0.5em #444444;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_text-overflow.css b/examples/webkit/webkit-guide/css/css3_text-overflow.css
new file mode 100755
index 0000000000..ba491c41ae
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_text-overflow.css
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
+.accordion {
+    border              : #777777 solid thin;
+    padding             : 0.0em;
+    border-radius       : 0.5em;
+    list-style          : none;
+}
+
+.accordion > li {
+    padding             : 0.5em;
+    border-bottom       : #777777 solid thin;
+    white-space         : nowrap;
+    max-height          : 1.5em;
+    overflow            : hidden;
+    text-overflow       : clip;
+    text-overflow       : ellipsis;
+    text-overflow       : ellipsis-word;
+    -webkit-transition  : max-height 1s ease-in-out;
+}
+
+.accordion > li:last-of-type {
+    border-bottom       : none;
+}
+
+.accordion > li.selected {
+    -webkit-transition  : max-height 1s ease-in-out;
+    max-height          : 100em;
+    white-space         : normal;
+    font-weight         : normal;
+}
+
+.accordion > li.selected:first-line {
+    font-weight        : bold;
+}
+
+.accordion > li.selected:first-letter {
+    font-size           : 200%;
+    float               : left;
+    padding-right       : 0.1em;
+}
+
+.dismiss {
+    content             : url(../img/icon_dismiss.png);
+}
+
+.accordion > li > .dismiss {
+    display             : none;
+}
+
+.accordion > li.selected > .dismiss {
+    display             : block;
+    float               : right;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_text-shadow.css b/examples/webkit/webkit-guide/css/css3_text-shadow.css
new file mode 100755
index 0000000000..9f06662c95
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_text-shadow.css
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+    text-shadow         : 0.20em 0.20em 0.20em #999;
+    color               : #206ead;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
diff --git a/examples/webkit/webkit-guide/css/css3_text-stroke.css b/examples/webkit/webkit-guide/css/css3_text-stroke.css
new file mode 100755
index 0000000000..4116de8223
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/css3_text-stroke.css
@@ -0,0 +1,75 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+h1,h2,h3,h4 {
+    margin-top          : 0.5em;
+    text-align          : center;
+}
+
+h1 {
+    -webkit-text-stroke : 2px #000000;
+    font-size           : 40px;
+}
+
+h1, h2, h3 {
+    color               : #206ead;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
diff --git a/examples/webkit/webkit-guide/css/form_tapper.css b/examples/webkit/webkit-guide/css/form_tapper.css
new file mode 100755
index 0000000000..75142b5b19
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/form_tapper.css
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* MOBILE UI */
+
+body {
+     background         : #aaaaaa;
+     font-family        : sans-serif;
+}
+
+body > section {
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    margin              : 1em 1em 10em 1em;
+    min-height          : 70%
+}
+
+h1, h2 {
+    margin-top          : 1em;
+    font-size           : smaller;
+    text-align          : center;
+    padding-top         : 1em;
+}
+
+h2 {
+    border-top          : solid thin #dddddd;
+}
+
+/* FORM */
+
+form {
+    font-weight         : bold;
+    font-size           : small;
+}
+
+input[type=radio],
+input[type=checkbox] {
+    -webkit-appearance  : button;
+    float               : right;
+    margin-bottom       : -2em;
+    opacity             : 0;
+}
+
+label,
+input[type=radio],
+input[type=checkbox] {
+    width               : 90%;
+    display             : block;
+    padding             : 0.5em;
+    height              : 2em;
+}
+
+label {
+    padding-top         : 0.5em;
+    border              : medium solid #aaaaaa;
+    border-radius       : 1.0em;
+}
+
+input[type=radio]:checked + label,
+input[type=checkbox]:checked + label {
+    border              : medium solid green;
+}
+
+input[type=radio]:checked + label:after,
+input[type=checkbox]:checked + label:after {
+    float               : right;
+    padding-right       : 0.5em;
+    content             : url(../img/icon_check_x24green.png);
+}
+
diff --git a/examples/webkit/webkit-guide/css/form_toggler.css b/examples/webkit/webkit-guide/css/form_toggler.css
new file mode 100755
index 0000000000..224053f834
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/form_toggler.css
@@ -0,0 +1,200 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* MOBILE UI */
+
+body {
+     background         : #aaaaaa;
+     font-family        : sans-serif;
+}
+
+body > section {
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    margin              : 1em 1em 10em 1em;
+    min-height          : 70%
+}
+
+h1, h2 {
+    margin-top          : 1em;
+    font-size           : smaller;
+    text-align          : center;
+    padding-top         : 1em;
+}
+
+h2 {
+    border-top          : solid thin #dddddd;
+}
+
+                  /* FORM */
+
+form
+{
+    line-height         : 250%;
+    font-weight         : bold;
+    font-size           : small;
+}
+
+             /* DEFAULT INPUT */
+
+input[type=radio],
+input[type=checkbox]
+{
+    text-align          : right;
+    padding-top         : 0.1em;
+    text-transform      : uppercase;
+    float               : right;
+    -webkit-appearance  : button;
+    border              : 0.25em #aaaaaa solid;
+    background          : #aaaaaa;
+    background          : -webkit-gradient(linear,center top,center bottom,from(#999999),to(#ffffff));
+    border-radius       : 0.5em;
+    min-width           : 6em;
+    height              : 2em;
+    display             : inline-block;
+}
+
+             /* CHECKED INPUT */
+
+input[type=radio]:checked,
+input[type=checkbox]:checked
+{
+    text-align          : left;
+}
+
+             /* FLIPPED INPUT */
+
+input.invert
+{
+    text-align          : left;
+}
+
+input.invert:checked
+{
+    text-align          : right;
+}
+
+              /* DEFAULT TEXT */
+
+input[type=radio]:before,
+input[type=checkbox]:before
+{
+    color               : #888888;
+    height              : 1.4em;
+    display             : inline-block;
+    background          : pink;
+    background          : -webkit-gradient(linear,center top,center bottom,from(pink),to(#ffffff));
+    min-width           : 50%;
+    content             : "off";
+    text-align          : center;
+    font-weight         : bold;
+    padding-left        : 0.5em;
+    padding-right       : 0.5em;
+    border-radius       : 0.25em;
+}
+
+              /* CHECKED TEXT */
+
+input[type=radio]:checked:before,
+input[type=checkbox]:checked:before
+{
+    color               : #ffffff;
+    content             : "on";
+    background          : #00aa00;
+    background          : -webkit-gradient(linear,center top,center bottom,from(green),to(cyan));
+}
+
+               /* ALTERNATE DISPLAY */
+
+input.yn:before
+{
+    content             : "no";
+}
+
+input.yn:checked:before
+{
+    content             : "yes";
+}
+
+input.tf:before
+{
+    content             : "false";
+}
+
+input.tf:checked:before
+{
+    content             : "true";
+}
+
+                /* BINARY */
+
+input.binary {
+    display             : inline-block;
+}
+
+input.binary:checked {
+    display             : none;
+}
+
+input.binary:before {
+    background          : #00aa00;
+    background          : -webkit-gradient(linear,center top,center bottom,from(green),to(cyan));
+    color               : #ffffff;
+}
+
+input.binary:nth-of-type(odd) {
+    text-align          : left;
+}
+
+input.binary:nth-of-type(even) {
+    text-align          : right;
+}
+
+                /* CUSTOM */
+
+input.ampm:nth-of-type(odd):before { content : "am"; }
+input.ampm:nth-of-type(even):before { content : "pm"; }
+
+input.sex:nth-of-type(odd):before { content : "male"; }
+input.sex:nth-of-type(even):before { content : "female"; }
+
+input.sex { width : 8em }
+
diff --git a/examples/webkit/webkit-guide/css/layout_link-fmt.css b/examples/webkit/webkit-guide/css/layout_link-fmt.css
new file mode 100755
index 0000000000..5a31aa0736
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/layout_link-fmt.css
@@ -0,0 +1,137 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background              : #aaaaaa;
+    font-family             : sans-serif;
+    font-weight             : bold;
+}
+
+p {
+    font-weight             : normal;
+}
+
+a {
+    text-wrap               : suppress;
+    -webkit-text-wrap       : suppress;
+}
+
+article {
+    background              : #ffffff;
+    position                : absolute;
+    top                     : 1em;
+    left                    : 1em;
+    right                   : 1em;
+    padding                 : 1em;
+    border-radius           : 1em;
+    margin-bottom           : 2em;
+}
+
+ol {
+    padding-left            : 1em;
+}
+
+ol.links {
+    margin-bottom           : 1em;
+    border                  : #aaaaaa thin solid;
+    list-style              : none;
+    padding-top             : 0.5em;
+    padding-bottom          : 0.5em;
+    padding-left            : 0em;
+    border-radius           : 1.0em;
+}
+
+ol.links > li {
+    min-height              : 2em;
+    border-bottom           : #aaaaaa thin solid;
+    padding-left            : 0.5em;
+    padding-right           : 0.5em;
+    padding-top             : 0.5em;
+}
+
+ol.links > li:last-of-type {
+    border                  : none;
+}
+
+p a[href]:after {
+    -webkit-transform           : scale(0.6);
+    -webkit-transform-origin    : bottom;
+    padding-left                : 0.25em;
+    padding-right               : 0.0em;
+    display                     : inline-block;
+}
+
+a[href] {
+    text-decoration             : none;
+}
+
+ol.links > li > a {
+    display                     : block;
+}
+
+ol.links a:after {
+    -webkit-transform           : scale(0.8);
+    -webkit-transform-origin    : top;
+}
+
+a[href^="http://"]:after, a[href^="https://"]:after {
+    content                     : url(../img/icon_link-external.png);
+}
+
+a[href^="mailto:"]:after { content : url(../img/icon_link-email.png); }
+
+a[href^="sms:"]:after { content : url(../img/icon_link-sms.png); }
+
+a[href^="tel:"]:after { content : url(../img/icon_link-tel.png); }
+
+a[href$=".doc"]:after { content : url(../img/icon_link-doc.png); }
+
+a[href$=".ppt"]:after { content : url(../img/icon_link-ppt.png); }
+
+a[href$=".rss"]:after,
+a[href$=".xml"]:after { content : url(../img/icon_link-rss.png); }
+
+a[href$=".pdf"]:after { content : url(../img/icon_link-pdf.png); }
+
+a[href$=".xls"]:after { content : url(../img/icon_link-xls.png); }
+
+ol.links a:after {
+    float                       : right;
+}
diff --git a/examples/webkit/webkit-guide/css/layout_tbl-keyhole.css b/examples/webkit/webkit-guide/css/layout_tbl-keyhole.css
new file mode 100755
index 0000000000..1205822e6d
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/layout_tbl-keyhole.css
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+}
+
+.mobile {
+    display             : block;
+}
+
+.mobile > thead > th,
+.mobile > thead > tr {
+     display            : none;
+}
+
+.mobile > tbody > tr {
+    display             : none;
+    background          : #ffffff;
+    padding             : 0.5em;
+    padding-top         : 0.5em;
+    border-radius       : 0.25em;
+}
+
+.mobile > tbody > tr:target {
+    display             : block;
+    border              : medium solid #aaaaaa;
+}
+
+.mobile > tbody > tr:nth-of-type(1) {
+    padding-top         : 0.5em;
+}
+
+.mobile td {
+     display            : block;
+}
+
+.mobile td:before {
+    font-style          : italic;
+    font-weight         : bold;
+}
+
+.mobile td:nth-of-type(5n+1) {
+    font-weight         : bold;
+    color               : #206ead;
+}
+
+.mobile td:nth-of-type(5n+2):before {
+    content             : 'Price: ';
+}
+.mobile td:nth-of-type(5n+3):before {
+    content             : 'Location: ';
+}
+.mobile td:nth-of-type(5n+4):before {
+    content             : 'Posted: ';
+}
+
+table th.nav {
+    display             : none;
+}
+
+.mobile tbody th.nav {
+    display             : block;
+    width               : 36px;
+    float               : right;
+}
+
+th.nav a {
+    display             : inline-block;
+    width               : 36px;
+    height              : 36px;
+    background          : #ffffff;
+    content             : url(../img/icon_nav-up.png);
+    margin-bottom       : 0.5em;
+}
+
+th.nav a:nth-of-type(even) {
+    -webkit-transform   : rotate(180deg);
+}
+
+tr:first-of-type th.nav a:nth-of-type(odd),
+tr:last-of-type th.nav a:nth-of-type(even)
+{
+    content             : url(../img/icon_dismiss.png);
+}
+
+tr th.nav a {
+    display             : none;
+}
+
+tr:first-of-type th.nav a,
+tr:last-of-type th.nav a,
+tr:target th.nav a {
+    display             : block;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 0.5em;
+    margin              : 0.5em;
+    padding             : 0.5em;
+}
+
+h1 {
+    margin-top          : 0.5em;
+    text-align          : center;
+    font-size           : 18px;
+}
+
diff --git a/examples/webkit/webkit-guide/css/mob_condjs.css b/examples/webkit/webkit-guide/css/mob_condjs.css
new file mode 100755
index 0000000000..6e312926ec
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mob_condjs.css
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#js {
+    background          : pink;
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+}
+#js, #design {
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+}
+#js {
+    background          : pink;
+}
+#design {
+    background          : lightgreen;
+}
diff --git a/examples/webkit/webkit-guide/css/mob_mediaquery.css b/examples/webkit/webkit-guide/css/mob_mediaquery.css
new file mode 100755
index 0000000000..bbd0fbcc88
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mob_mediaquery.css
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#design {
+    padding             : 0.5em;
+    border-radius       : 0.5em;
+    background          : lightgreen;
+}
+
+#design {
+    background          : lightgreen;
+}
diff --git a/examples/webkit/webkit-guide/css/mobile.css b/examples/webkit/webkit-guide/css/mobile.css
new file mode 100755
index 0000000000..5b9332c3ce
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mobile.css
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    width               : 100;
+}
+
+body > section {
+    border-radius       : 1em;
+    background          : #ffffff;
+    border-radius       : 1em;
+    padding             : 1em;
+    background          : #ffffff;
+    min-height          : 70%
+}
+
+.hidden {
+    display             : none;
+}
+
+.active {
+    color               : blue;
+    cursor              : pointer;
+    text-decoration     : none;
+}
+
+.nav > a {
+    display             : inline-block;
+    width               : 48px;
+    height              : 48px;
+}
+
+h1, h2 {
+    margin-top          : 1em;
+    font-size           : smaller;
+    text-align          : center;
+    padding-top         : 1em;
+}
+
+h2 {
+    border-top          : solid thin #dddddd;
+}
+
diff --git a/examples/webkit/webkit-guide/css/mq_desktop.css b/examples/webkit/webkit-guide/css/mq_desktop.css
new file mode 100755
index 0000000000..32d49bfa63
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mq_desktop.css
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
+#design:before {
+    content        : "CSS thinks you are viewing this page with a full desktop browser."
+}
+
diff --git a/examples/webkit/webkit-guide/css/mq_mobile.css b/examples/webkit/webkit-guide/css/mq_mobile.css
new file mode 100755
index 0000000000..f1e87f67ce
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mq_mobile.css
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
+#design:before {
+    content             : "CSS thinks you are viewing this page with a non-touch mobile browser."
+}
diff --git a/examples/webkit/webkit-guide/css/mq_touch.css b/examples/webkit/webkit-guide/css/mq_touch.css
new file mode 100755
index 0000000000..3d2a5b6cd5
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mq_touch.css
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background          : #aaaaaa;
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+h1,h2,h3,h4 {
+    text-align          : center;
+}
+
+section {
+    position            : absolute;
+    top                 : 0;
+    left                : 0;
+    right               : 0;
+    bottom              : 0;
+}
+
+article {
+    background          : #ffffff;
+    border-radius       : 1.0em;
+    padding             : 1.0em;
+    margin              : 1em;
+    min-height          : 50%;
+}
+
+#design:before {
+    content             : "CSS thinks you are viewing this page with a touch-based mobile browser."
+}
diff --git a/examples/webkit/webkit-guide/css/mqlayout_desktop.css b/examples/webkit/webkit-guide/css/mqlayout_desktop.css
new file mode 100755
index 0000000000..0875732145
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mqlayout_desktop.css
@@ -0,0 +1,92 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* Desktop UI */
+
+body {
+    font-family         : sans-serif;
+    font-weight         : bold;
+        min-width       : 60em;
+}
+
+nav, body > section, header, footer {
+    border-radius       : 0.5em;
+    padding             : 0.5em;
+}
+
+nav, section {
+    min-height          : 30em;
+}
+
+header {
+    background-color    : pink;
+    height              : 3em;
+    margin-bottom       : 1em;
+}
+
+section#main {
+    background-color    : lightgreen;
+    float               : left;
+    margin-bottom       : 1em;
+    margin-left         : 2%;
+    min-width           : 60%;
+}
+
+nav {
+    background-color    : lightblue;
+    float               : left;
+    margin-bottom       : 1em;
+    width               : 15%;
+}
+
+section#sidebar {
+    background-color    : plum;
+    float               : left;
+    margin-bottom       : 1em;
+    margin-left         : 2%;
+    width               : 15%;
+}
+
+footer {
+    background-color    : gold;
+    clear               : both;
+    height              : 3em;
+}
+
diff --git a/examples/webkit/webkit-guide/css/mqlayout_mobile.css b/examples/webkit/webkit-guide/css/mqlayout_mobile.css
new file mode 100755
index 0000000000..dcd4943749
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mqlayout_mobile.css
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* Mobile UI */
+
+body {
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+nav, body > section, header, footer {
+    padding             : 0.5em;
+}
+
+header {
+    display             : none;
+}
+
+section#main {
+    background-color    : lightgreen;
+    margin-bottom       : 1em;
+}
+
+nav:after {
+    float               : right;
+    content             : '[ICON]';
+}
+
+nav:before {
+    content             : 'SIMPLE ';
+}
+
+nav {
+    background-color    : lightblue;
+    margin-bottom       : 1em;
+}
+
+section#sidebar {
+    display             : none;
+}
+
+footer {
+    background-color    : gold;
+}
+
diff --git a/examples/webkit/webkit-guide/css/mqlayout_touch.css b/examples/webkit/webkit-guide/css/mqlayout_touch.css
new file mode 100755
index 0000000000..78ed1741c3
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/mqlayout_touch.css
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/* Touch UI */
+
+body {
+    font-family         : sans-serif;
+    font-weight         : bold;
+}
+
+nav, body > section, header, footer {
+    border-radius       : 0.5em;
+    padding             : 0.5em;
+}
+
+header {
+    background-color    : pink;
+    margin-bottom       : 1em;
+    float               : left;
+    width               : 30%;
+    height              : 3em;
+}
+
+section#main {
+    background-color    : lightgreen;
+    margin-bottom       : 1em;
+    min-height          : 20em;
+}
+
+nav:before {
+    content             : 'TOUCH ';
+}
+
+nav {
+    background-color    : lightblue;
+    margin-bottom       : 1em;
+    margin-left         : 40%;
+    max-width           : 60%;
+    height              : 3em;
+}
+
+section#sidebar {
+    display             : none;
+}
+
+footer {
+    background-color    : gold;
+}
+
diff --git a/examples/webkit/webkit-guide/css/storage.css b/examples/webkit/webkit-guide/css/storage.css
new file mode 100755
index 0000000000..a1f1a13921
--- /dev/null
+++ b/examples/webkit/webkit-guide/css/storage.css
@@ -0,0 +1,156 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt WebKit module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+body {
+    background-color    : #aaaaaa;
+    font-family         : sans-serif;
+    padding:    1em;
+}
+
+body.off > h1 {
+    background-color    : pink;
+    background-image    : url(../img/offline.png), -webkit-gradient(linear,center top,center bottom,from(#ffffff),to(#ffffff))
+;
+}
+
+body.on > h1 {
+    background-color    : lightgreen;
+    background-image    : url(../img/online.png), -webkit-gradient(linear,center top,center bottom,from(#ffffff),to(#ffffff))
+;
+}
+
+body.unknown > h1 {
+    background-image    : url(../img/offline_idle.png), -webkit-gradient(linear,center top,center bottom,from(#ffffff),to(#ffffff));
+}
+
+
+h1 {
+    background-color        : #ffffff;
+    background-repeat       : no-repeat;
+    background-position     : 0.5em center, 0 0;
+    height                  : 1.25em;
+    border-radius           : 0.5em;
+    margin                  : 0.0em;
+    padding                 : 0.5em;
+    text-align              : center;
+    font-size               : 18px;
+}
+
+form.show {
+    display                 : block;
+    z-index                 : 99;
+}
+
+form.hide {
+    display                 : none;
+}
+
+#cred {
+    background              : #ffffff;
+    padding                 : 1em;
+    border-radius           : 1.0em;
+    position                : absolute;
+    left                    : 1.0em;;
+    right                   : 1.0em;;
+    top                     : 1.0em;;
+    bottom                  : 1.0em;;
+}
+
+#cred > input, #email > input {
+    height                  : 2.0em;
+    width                   : 95%;
+    border-radius           : 0.5em;
+    padding-left            : 0.5em;
+}
+
+#cred > img {
+    float                   : right;
+}
+
+#cred > div:first-of-type {
+    margin-top              : 2em;
+}
+
+#cred > div, #email > div {
+    font-weight             : bold;
+    margin                  : 0.5em;
+}
+
+#cred > input[type='submit'] {
+    background              : lightgreen;
+    font-weight             : bold;
+}
+
+#cred > input[type='submit']:active {
+    background              : #777777;
+    color                   : #ffffff;
+}
+
+#cred > input.validate:invalid {
+    background              : pink;
+}
+
+#cred > input.validate:invalid:after {
+    content                 : "need!";
+}
+
+#cred > input {
+    background              : #ffffff;
+    -webkit-transition      : all 1s linear;
+}
+
+#openform {
+    float                   : right;
+}
+
+#email {
+    background              : #ffffff;
+    min-height              : 6em;
+    margin-top              : 1em;
+    border-radius           : 0.5em;
+    padding                 : 0.5em;
+}
+
+textarea {
+    min-height              : 10em;
+    width                   : 95%;
+    border-radius           : 0.5em;
+}
+