Add documentation to master branch

Change-Id: I2504bb10f1ae73ec0cbc08b7ba5a88925caa1674
author: Markus Koivisto <markus@vaadin.com> 2016-01-22 14:55:18 +0200
committer: Markus Koivisto <markus@vaadin.com> 2016-01-22 14:55:18 +0200
commit: 99d6de546c74f0eed230ea8253dda6b85109d2e7 (patch)
tree: 10fc21c557566fe3241e6e13499df18d80f8dcb2 /documentation/themes
parent: 610736d9f373d4b37fd39ff8f90aabd13eab7926 (diff)
download: vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.tar.gz
vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.zip
30 files changed, 4435 insertions, 0 deletions
diff --git a/documentation/themes/chapter-themes.asciidoc b/documentation/themes/chapter-themes.asciidoc
new file mode 100644
index 0000000000..727e42b3e9
--- /dev/null
+++ b/documentation/themes/chapter-themes.asciidoc
@@ -0,0 +1,37 @@
+[[themes]]
+== Themes
+
+((("theme", id="term.themes", range="startofrange")))
+
+
+((("CSS", id="term.themes-css", range="startofrange")))
+
+
+This chapter provides details about using and creating __themes__ that control
+the visual look of web applications. Themes are created using Sass, which is an
+extension of CSS (Cascading Style Sheets), or with plain CSS. We provide an
+introduction to CSS, especially concerning the styling of HTML by element
+classes.
+
+
+include::themes-overview.asciidoc[leveloffset=+2]
+
+include::themes-css.asciidoc[leveloffset=+2]
+
+include::themes-sass.asciidoc[leveloffset=+2]
+
+include::themes-compiling.asciidoc[leveloffset=+2]
+
+include::themes-creating.asciidoc[leveloffset=+2]
+
+include::themes-eclipse.asciidoc[leveloffset=+2]
+
+include::themes-valo.asciidoc[leveloffset=+2]
+
+include::themes-fonticon.asciidoc[leveloffset=+2]
+
+include::themes-fonts.asciidoc[leveloffset=+2]
+
+include::themes-responsive.asciidoc[leveloffset=+2]
+(((range="endofrange", startref="term.themes")))
+(((range="endofrange", startref="term.themes-css")))
diff --git a/documentation/themes/img/addon-responsive-flexwrap.png b/documentation/themes/img/addon-responsive-flexwrap.png
new file mode 100644
index 0000000000..e24df04a47
--- /dev/null
+++ b/documentation/themes/img/addon-responsive-flexwrap.png
diff --git a/documentation/themes/img/builtin-runo.png b/documentation/themes/img/builtin-runo.png
new file mode 100644
index 0000000000..039a34137b
--- /dev/null
+++ b/documentation/themes/img/builtin-runo.png
diff --git a/documentation/themes/img/eclipse-theme-compiler.png b/documentation/themes/img/eclipse-theme-compiler.png
new file mode 100644
index 0000000000..a2886a4e68
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-compiler.png
diff --git a/documentation/themes/img/eclipse-theme-created-annotated-hi.png b/documentation/themes/img/eclipse-theme-created-annotated-hi.png
new file mode 100644
index 0000000000..de8152c2da
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-created-annotated-hi.png
diff --git a/documentation/themes/img/eclipse-theme-created-annotated-lo.png b/documentation/themes/img/eclipse-theme-created-annotated-lo.png
new file mode 100644
index 0000000000..fe9fa560d7
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-created-annotated-lo.png
diff --git a/documentation/themes/img/eclipse-theme-created.png b/documentation/themes/img/eclipse-theme-created.png
new file mode 100644
index 0000000000..db1970a461
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-created.png
diff --git a/documentation/themes/img/eclipse-theme-new.png b/documentation/themes/img/eclipse-theme-new.png
new file mode 100644
index 0000000000..9374364298
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-new.png
diff --git a/documentation/themes/img/eclipse-theme-settings.png b/documentation/themes/img/eclipse-theme-settings.png
new file mode 100644
index 0000000000..a7dfd78721
--- /dev/null
+++ b/documentation/themes/img/eclipse-theme-settings.png
diff --git a/documentation/themes/img/example-ui-default.png b/documentation/themes/img/example-ui-default.png
new file mode 100644
index 0000000000..a0e9f9d1ea
--- /dev/null
+++ b/documentation/themes/img/example-ui-default.png
diff --git a/documentation/themes/img/example-ui-themed.png b/documentation/themes/img/example-ui-themed.png
new file mode 100644
index 0000000000..40ebb746cc
--- /dev/null
+++ b/documentation/themes/img/example-ui-themed.png
diff --git a/documentation/themes/img/fonticons-basic.png b/documentation/themes/img/fonticons-basic.png
new file mode 100644
index 0000000000..66ed207cf7
--- /dev/null
+++ b/documentation/themes/img/fonticons-basic.png
diff --git a/documentation/themes/img/fonticons-html.png b/documentation/themes/img/fonticons-html.png
new file mode 100644
index 0000000000..b9d8a2a9c6
--- /dev/null
+++ b/documentation/themes/img/fonticons-html.png
diff --git a/documentation/themes/img/theme-contents-hi.png b/documentation/themes/img/theme-contents-hi.png
new file mode 100644
index 0000000000..d04f7b2d32
--- /dev/null
+++ b/documentation/themes/img/theme-contents-hi.png
diff --git a/documentation/themes/img/theme-contents-lo.png b/documentation/themes/img/theme-contents-lo.png
new file mode 100644
index 0000000000..cef64982e8
--- /dev/null
+++ b/documentation/themes/img/theme-contents-lo.png
diff --git a/documentation/themes/img/themes-css-match-1.png b/documentation/themes/img/themes-css-match-1.png
new file mode 100644
index 0000000000..8f9cf1bd55
--- /dev/null
+++ b/documentation/themes/img/themes-css-match-1.png
diff --git a/documentation/themes/img/themes-css-match-class-2.png b/documentation/themes/img/themes-css-match-class-2.png
new file mode 100644
index 0000000000..c1cab59bf9
--- /dev/null
+++ b/documentation/themes/img/themes-css-match-class-2.png
diff --git a/documentation/themes/img/themes-css-match-class-3.png b/documentation/themes/img/themes-css-match-class-3.png
new file mode 100644
index 0000000000..7062b9abdb
--- /dev/null
+++ b/documentation/themes/img/themes-css-match-class-3.png
diff --git a/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg b/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg
new file mode 100644
index 0000000000..f6b902f45d
--- /dev/null
+++ b/documentation/themes/original-drawings/eclipse-theme-created-annotated.svg
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.46"
+   sodipodi:docname="eclipse-theme-created-annotated.svg"
+   sodipodi:docbase="/home/tsoots/ohj/translations/po"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs1903">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient6082">
+      <stop
+         style="stop-color:#ff5b19;stop-opacity:1;"
+         offset="0"
+         id="stop6084" />
+      <stop
+         style="stop-color:#ff5b19;stop-opacity:0;"
+         offset="1"
+         id="stop6086" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Mend"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow2Mend"
+       style="overflow:visible;">
+      <path
+         id="path3761"
+         style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="scale(0.6) rotate(180) translate(0,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Send"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow2Send"
+       style="overflow:visible;">
+      <path
+         id="path3767"
+         style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="scale(0.3) rotate(180) translate(-2.3,0)" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow1Mend"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="Arrow1Mend"
+       style="overflow:visible;">
+      <path
+         id="path3743"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"
+         transform="scale(0.4) rotate(180) translate(10,0)" />
+    </marker>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective7" />
+    <inkscape:perspective
+       id="perspective2444"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient6082"
+       id="linearGradient6088"
+       x1="107.60961"
+       y1="139.88233"
+       x2="263.68966"
+       y2="139.88233"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="190.7442"
+     inkscape:cy="893.09601"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1287"
+     inkscape:window-height="1025"
+     inkscape:window-x="1667"
+     inkscape:window-y="0"
+     showgrid="false" />
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:1">
+    <image
+       y="10.247781"
+       x="22.357979"
+       id="image2446"
+       height="250.80194"
+       width="318.68155"
+       sodipodi:absref="/home/magi/.encfs/plain/itmill/doc/manual/img/themes/eclipse-theme-created.png"
+       xlink:href="/home/magi/.encfs/plain/itmill/doc/manual/img/themes/eclipse-theme-created.png" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:url(#linearGradient6088);stroke-width:2.10000000000000009;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend);stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 262.63966,65.948222 L 109.60155,212.92542"
+       id="path2450" />
+  </g>
+</svg>
diff --git a/documentation/themes/original-drawings/theme-contents.svg b/documentation/themes/original-drawings/theme-contents.svg
new file mode 100644
index 0000000000..169336beba
--- /dev/null
+++ b/documentation/themes/original-drawings/theme-contents.svg
@@ -0,0 +1,1857 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="theme-contents.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/Users/Shared/phoenix/dev/2832/manual/img/themes/theme-contents-hi.png"
+   inkscape:export-xdpi="150.0585"
+   inkscape:export-ydpi="150.0585"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective645" />
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="TriangleOutL"
+       style="overflow:visible">
+      <path
+         id="path3964"
+         d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
+         transform="scale(0.8)" />
+    </marker>
+    <linearGradient
+       id="linearGradient1699">
+      <stop
+         style="stop-color:#017eff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1700" />
+      <stop
+         style="stop-color:#ecfaff;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1701" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient841"
+       id="linearGradient1944" />
+    <radialGradient
+       xlink:href="#linearGradient841"
+       r="0.54606670"
+       id="radialGradient856"
+       fy="3.5200000"
+       fx="0.54117650"
+       cy="0.89285713"
+       cx="0.50000000" />
+    <linearGradient
+       y2="0.79687500"
+       y1="-0.56250000"
+       xlink:href="#linearGradient1507"
+       x2="0.62222224"
+       x1="0.31111112"
+       id="linearGradient1556" />
+    <linearGradient
+       y2="383.7653"
+       y1="843.20789"
+       xlink:href="#linearGradient1507"
+       x2="547.80806"
+       x1="201.38964"
+       id="linearGradient1506"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="418.53634"
+       y1="236.12772"
+       xlink:href="#linearGradient1501"
+       x2="330.88033"
+       x1="687.96373"
+       id="linearGradient1499"
+       gradientTransform="scale(0.9890091,1.011113)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="287.73826"
+       y1="169.44361"
+       xlink:href="#linearGradient1492"
+       x2="622.33327"
+       x1="741.63899"
+       id="linearGradient1497"
+       gradientTransform="scale(0.9552926,1.0467997)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="689.86002"
+       y1="230.07422"
+       xlink:href="#linearGradient1492"
+       x2="351.7063"
+       x1="728.96644"
+       id="linearGradient1495"
+       gradientTransform="scale(0.955425,1.0466546)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1492">
+      <stop
+         style="stop-color:#dadada;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1493" />
+      <stop
+         style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
+         offset="0.34923077"
+         id="stop1496" />
+      <stop
+         style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1494" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1501">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1502" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop1504" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1507">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop1508" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop1510" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient853"
+       r="0.50000000"
+       id="radialGradient861"
+       fy="0.29885057"
+       fx="0.50704223"
+       cy="0.50000000"
+       cx="0.50000000" />
+    <linearGradient
+       id="linearGradient853">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.29752067;"
+         offset="0.00000000"
+         id="stop854" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop855" />
+    </linearGradient>
+    <linearGradient
+       y2="1.2905406"
+       y1="-1.1486486"
+       xlink:href="#linearGradient853"
+       x2="0.26408452"
+       x1="1.4647887"
+       id="linearGradient859" />
+    <linearGradient
+       xlink:href="#linearGradient846"
+       id="linearGradient850"
+       gradientTransform="scale(0.9646355,1.036661)"
+       x1="30.408737"
+       y1="87.607189"
+       x2="86.629186"
+       y2="87.607189"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient846">
+      <stop
+         style="stop-color:#e7e7e7;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop847" />
+      <stop
+         style="stop-color:#a5a5a5;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop848" />
+    </linearGradient>
+    <linearGradient
+       y2="0.049019609"
+       y1="1.2647059"
+       xlink:href="#linearGradient846"
+       x2="0.57142860"
+       x1="0.64285713"
+       id="linearGradient858" />
+    <linearGradient
+       y2="0.35555556"
+       y1="0.32222223"
+       xlink:href="#linearGradient846"
+       x2="0.80985916"
+       x1="0.39788732"
+       id="linearGradient851" />
+    <linearGradient
+       y2="26.470001"
+       y1="173.90754"
+       xlink:href="#linearGradient1290"
+       x2="-129.90755"
+       x1="-132.24597"
+       id="linearGradient860"
+       gradientTransform="scale(0.8297524,1.2051788)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1290">
+      <stop
+         style="stop-color:#b2a269;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1291" />
+      <stop
+         style="stop-color:#6d5b18;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1292" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient841">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop842" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop843" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient853"
+       r="0.50000000"
+       id="radialGradient864"
+       fy="0.14942528"
+       fx="0.50000000"
+       cy="0.50000000"
+       cx="0.50000000" />
+    <linearGradient
+       y2="85.416771"
+       y1="83.615703"
+       xlink:href="#linearGradient846"
+       x2="102.17324"
+       x1="31.956963"
+       id="linearGradient849"
+       gradientTransform="scale(0.9409737,1.062729)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="0.46568626"
+       y1="0.38235295"
+       xlink:href="#linearGradient853"
+       x2="0.59469700"
+       x1="-0.22348484"
+       id="linearGradient840" />
+    <linearGradient
+       y2="0.50490195"
+       y1="0.49019608"
+       xlink:href="#linearGradient841"
+       x2="0.10833333"
+       x1="1.3833333"
+       id="linearGradient845" />
+    <linearGradient
+       xlink:href="#linearGradient841"
+       id="linearGradient844" />
+    <linearGradient
+       y2="0.50735295"
+       y1="-1.0294118"
+       xlink:href="#linearGradient841"
+       x2="0.63483149"
+       x1="0.56179774"
+       id="linearGradient852" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient227220"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient227266"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       xlink:href="#linearGradient1507"
+       id="linearGradient233555" />
+    <linearGradient
+       y2="0.0078125000"
+       y1="0.97656250"
+       xlink:href="#linearGradient1507"
+       x2="0.78260869"
+       x1="0.052173913"
+       id="linearGradient233553" />
+    <linearGradient
+       y2="0.54687500"
+       y1="-0.54545456"
+       xlink:href="#linearGradient1501"
+       x2="0.062992126"
+       x1="0.94656491"
+       id="linearGradient233551" />
+    <linearGradient
+       y2="1.3281250"
+       y1="0.32812500"
+       xlink:href="#linearGradient1492"
+       x2="-0.37606838"
+       x1="0.63247865"
+       id="linearGradient233549" />
+    <linearGradient
+       y2="1.1796875"
+       y1="0.21093750"
+       xlink:href="#linearGradient1492"
+       x2="0.085470088"
+       x1="0.88034189"
+       id="linearGradient233547" />
+    <linearGradient
+       id="linearGradient233539">
+      <stop
+         style="stop-color:#c6c6c6;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop233541" />
+      <stop
+         style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
+         offset="0.34923077"
+         id="stop233543" />
+      <stop
+         style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop233545" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient233533">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop233535" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop233537" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient1400"
+       r="68.379425"
+       id="radialGradient858"
+       fy="77.944687"
+       fx="79.895966"
+       cy="77.944687"
+       cx="79.895966"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#linearGradient853"
+       r="200.73203"
+       id="radialGradient852"
+       fy="325.76621"
+       fx="240.38737"
+       cy="477.83306"
+       cx="227.0055"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient233522">
+      <stop
+         style="stop-color:#e3f9ff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop233524" />
+      <stop
+         style="stop-color:#73bee7;stop-opacity:1.0000000;"
+         offset="0.36194703"
+         id="stop867" />
+      <stop
+         style="stop-color:#438ec5;stop-opacity:1.0000000;"
+         offset="0.62534887"
+         id="stop856" />
+      <stop
+         style="stop-color:#477daf;stop-opacity:1.0000000;"
+         offset="0.72607356"
+         id="stop1185" />
+      <stop
+         style="stop-color:#2b5798;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop233529" />
+    </linearGradient>
+    <linearGradient
+       y2="112.48578"
+       y1="199.48993"
+       xlink:href="#linearGradient865"
+       x2="61.94431"
+       x1="152.00712"
+       id="linearGradient870"
+       gradientTransform="scale(1.0693225,0.9351716)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="46.947097"
+       y1="25.611177"
+       xlink:href="#linearGradient865"
+       x2="82.344438"
+       x1="105.80702"
+       id="linearGradient864"
+       gradientTransform="scale(1.1084886,0.9021293)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="40.053987"
+       y1="-53.39077"
+       xlink:href="#linearGradient865"
+       x2="38.977112"
+       x1="43.397979"
+       id="linearGradient1010"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="24.174611"
+       y1="180.92995"
+       xlink:href="#linearGradient865"
+       x2="53.211626"
+       x1="77.291655"
+       id="linearGradient1011"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="89.232159"
+       y1="483.82793"
+       xlink:href="#linearGradient1400"
+       x2="-127.58335"
+       x1="-83.094155"
+       id="linearGradient882"
+       gradientTransform="scale(0.8280565,1.2076471)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="-0.079579733"
+       y1="4.0796266"
+       xlink:href="#linearGradient1400"
+       x2="0.52828526"
+       x1="0.99722022"
+       id="linearGradient233515"
+       gradientTransform="scale(1.001713,0.998290)" />
+    <linearGradient
+       y2="89.599754"
+       y1="484.19555"
+       xlink:href="#linearGradient1400"
+       x2="-126.92083"
+       x1="-82.431632"
+       id="linearGradient842"
+       gradientTransform="scale(0.8311735,1.2031182)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       y2="0.092356689"
+       y1="0.83121020"
+       xlink:href="#linearGradient839"
+       x2="0.35897437"
+       x1="0.93772894"
+       id="linearGradient233512" />
+    <linearGradient
+       id="linearGradient839">
+      <stop
+         style="stop-color:#4f4f4f;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop840" />
+      <stop
+         style="stop-color:#bebebe;stop-opacity:1.0000000;"
+         offset="0.27444443"
+         id="stop233509" />
+      <stop
+         style="stop-color:#fff;stop-opacity:1;"
+         offset="1"
+         id="stop841" />
+    </linearGradient>
+    <linearGradient
+       y2="0.41287878"
+       y1="0.34090909"
+       xlink:href="#linearGradient883"
+       x2="0.70434785"
+       x1="1.8869566"
+       id="linearGradient233505" />
+    <linearGradient
+       id="linearGradient883">
+      <stop
+         style="stop-color:#1f1f1f;stop-opacity:0.55371898;"
+         offset="0.0000000"
+         id="stop884" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop885" />
+    </linearGradient>
+    <linearGradient
+       y2="145.51297"
+       y1="98.665952"
+       xlink:href="#linearGradient899"
+       x2="41.235089"
+       x1="40.913932"
+       id="linearGradient848"
+       gradientTransform="scale(1.0773318,0.9282192)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient899">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="0.0000000"
+         id="stop900" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop901" />
+    </linearGradient>
+    <linearGradient
+       y2="187.93358"
+       y1="160.06661"
+       xlink:href="#linearGradient1501"
+       x2="38.546809"
+       x1="35.646257"
+       id="linearGradient1530"
+       gradientTransform="scale(1.5213696,0.6573025)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1527">
+      <stop
+         style="stop-color:#000;stop-opacity:1;"
+         offset="0"
+         id="stop1528" />
+      <stop
+         style="stop-color:#fff;stop-opacity:1;"
+         offset="1"
+         id="stop1529" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient1646"
+       r="0.50000000"
+       id="radialGradient1645"
+       fy="0.67187500"
+       fx="0.38759691"
+       cy="0.50000000"
+       cx="0.50000000" />
+    <linearGradient
+       id="linearGradient1646">
+      <stop
+         style="stop-color:#ff0000;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1647" />
+      <stop
+         style="stop-color:#a00000;stop-opacity:0.71372551;"
+         offset="0.69372094"
+         id="stop1649" />
+      <stop
+         style="stop-color:#960000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop1648" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient865">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop866" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop868" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1400">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.67843139;"
+         offset="0.0000000"
+         id="stop1401" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.32941177;"
+         offset="0.56999999"
+         id="stop1403" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop1402" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient233476">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop233478" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop233480" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient233596"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient233706"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       y2="0.48113209"
+       y1="0.83018869"
+       xlink:href="#linearGradient882"
+       x2="0.51764709"
+       x1="0.24705882"
+       id="linearGradient1063" />
+    <linearGradient
+       y2="-1.0859375"
+       y1="0.51562500"
+       xlink:href="#linearGradient832"
+       x2="-0.40136054"
+       x1="0.76870745"
+       id="linearGradient2577" />
+    <linearGradient
+       y2="0.67187500"
+       y1="0.23437500"
+       xlink:href="#linearGradient838"
+       x2="0.91729325"
+       x1="0.48872182"
+       id="linearGradient2516" />
+    <linearGradient
+       y2="0.71875000"
+       y1="0.46093750"
+       xlink:href="#linearGradient838"
+       x2="0.42335767"
+       x1="0.68613136"
+       id="linearGradient2515" />
+    <linearGradient
+       y2="-0.77419353"
+       y1="0.50806451"
+       xlink:href="#linearGradient2387"
+       x2="0.15686275"
+       x1="0.56470591"
+       id="linearGradient2407" />
+    <linearGradient
+       y2="0.44531250"
+       y1="0.53906250"
+       xlink:href="#linearGradient850"
+       x2="0.51724136"
+       x1="0.42068964"
+       id="linearGradient239208" />
+    <linearGradient
+       y2="0.0078125000"
+       y1="0.97656250"
+       xlink:href="#linearGradient1507"
+       x2="0.78260869"
+       x1="0.052173913"
+       id="linearGradient239206" />
+    <linearGradient
+       y2="0.54687500"
+       y1="-0.55303031"
+       xlink:href="#linearGradient1501"
+       x2="0.062992126"
+       x1="1.5572519"
+       id="linearGradient239204" />
+    <linearGradient
+       y2="1.3281250"
+       y1="0.32812500"
+       xlink:href="#linearGradient1492"
+       x2="-0.37606838"
+       x1="0.63247865"
+       id="linearGradient239202" />
+    <linearGradient
+       y2="1.1796875"
+       y1="0.21093750"
+       xlink:href="#linearGradient1492"
+       x2="0.085470088"
+       x1="0.88034189"
+       id="linearGradient239200" />
+    <linearGradient
+       id="linearGradient239192">
+      <stop
+         style="stop-color:#dadada;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop239194" />
+      <stop
+         style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
+         offset="0.34923077"
+         id="stop239196" />
+      <stop
+         style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop239198" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient239186">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop239188" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop239190" />
+    </linearGradient>
+    <linearGradient
+       y2="-0.11480361"
+       y1="3.3240275"
+       xlink:href="#linearGradient882"
+       x2="0.90986663"
+       x1="-1.1108099"
+       id="linearGradient1064" />
+    <linearGradient
+       y2="0.38461539"
+       y1="0.47435898"
+       xlink:href="#linearGradient850"
+       x2="0.54577464"
+       x1="0.63380283"
+       id="linearGradient239183" />
+    <linearGradient
+       id="linearGradient239176">
+      <stop
+         style="stop-color:#071422;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop851" />
+      <stop
+         style="stop-color:#2c528a;stop-opacity:1.0000000;"
+         offset="0.50000000"
+         id="stop853" />
+      <stop
+         style="stop-color:#a3bfdf;stop-opacity:1.0000000;"
+         offset="0.75000000"
+         id="stop239180" />
+      <stop
+         style="stop-color:#59708a;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop852" />
+    </linearGradient>
+    <linearGradient
+       y2="-6.6841485e-006"
+       y1="2.0080366"
+       xlink:href="#linearGradient882"
+       x2="0.58098590"
+       x1="0.58098590"
+       id="linearGradient881" />
+    <linearGradient
+       y2="0.54166669"
+       y1="0.22395833"
+       xlink:href="#linearGradient838"
+       x2="0.77464789"
+       x1="0.50352114"
+       id="linearGradient837" />
+    <linearGradient
+       id="linearGradient838">
+      <stop
+         style="stop-color:#a5a5a5;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop839" />
+      <stop
+         style="stop-color:#dadada;stop-opacity:1.0000000;"
+         offset="0.17875445"
+         id="stop239166" />
+      <stop
+         style="stop-color:#656565;stop-opacity:1.0000000;"
+         offset="0.48317710"
+         id="stop239168" />
+      <stop
+         style="stop-color:#d5d5d5;stop-opacity:1.0000000;"
+         offset="0.61641997"
+         id="stop239170" />
+      <stop
+         style="stop-color:#454545;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop239172" />
+    </linearGradient>
+    <linearGradient
+       y2="0.80000001"
+       y1="0.012500000"
+       xlink:href="#linearGradient844"
+       x2="0.57394367"
+       x1="0.71830988"
+       id="linearGradient843" />
+    <linearGradient
+       id="linearGradient239158">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.00000000"
+         id="stop845" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop239161" />
+    </linearGradient>
+    <linearGradient
+       y2="1.1954023"
+       y1="0.28160921"
+       xlink:href="#linearGradient832"
+       x2="1.1725352"
+       x1="0.78521127"
+       id="linearGradient835" />
+    <linearGradient
+       id="linearGradient832">
+      <stop
+         style="stop-color:#000;stop-opacity:1;"
+         offset="0"
+         id="stop833" />
+      <stop
+         style="stop-color:#fff;stop-opacity:1;"
+         offset="1"
+         id="stop834" />
+    </linearGradient>
+    <linearGradient
+       y2="0.37869984"
+       y1="0.73598528"
+       xlink:href="#linearGradient832"
+       x2="-0.055982146"
+       x1="0.59630799"
+       id="linearGradient921" />
+    <linearGradient
+       y2="0.43650794"
+       y1="0.047619049"
+       xlink:href="#linearGradient844"
+       x2="0.46666667"
+       x1="0.86538464"
+       id="linearGradient880" />
+    <linearGradient
+       y2="0.33730158"
+       y1="0.66666669"
+       xlink:href="#linearGradient882"
+       x2="0.52358490"
+       x1="0.12264151"
+       id="linearGradient889" />
+    <linearGradient
+       y2="0.51984125"
+       y1="0.087301590"
+       xlink:href="#linearGradient844"
+       x2="0.44897959"
+       x1="0.68877554"
+       id="linearGradient890" />
+    <linearGradient
+       y2="-0.84883720"
+       y1="0.40697673"
+       xlink:href="#linearGradient2387"
+       x2="0.65098041"
+       x1="0.63529414"
+       id="linearGradient836" />
+    <linearGradient
+       y2="-0.54651165"
+       y1="0.74418604"
+       xlink:href="#linearGradient2387"
+       x2="0.56078434"
+       x1="0.55686277"
+       id="linearGradient2386" />
+    <linearGradient
+       id="linearGradient2387">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="0.0000000"
+         id="stop2388" />
+      <stop
+         style="stop-color:#fff;stop-opacity:1;"
+         offset="1"
+         id="stop2389" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient239140">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.33333334;"
+         offset="0.00000000"
+         id="stop883" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.00000000;"
+         offset="1.0000000"
+         id="stop239143" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient239134">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop239136" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop239138" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient239278"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1507"
+       id="linearGradient2870"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       x1="201.38964"
+       y1="843.20789"
+       x2="547.80806"
+       y2="383.7653" />
+    <linearGradient
+       y2="383.76529"
+       y1="843.20789"
+       xlink:href="#linearGradient1507-1"
+       x2="547.80804"
+       x1="201.38963"
+       id="linearGradient1506-5"
+       gradientTransform="scale(0.9446888,1.0585496)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1507-1">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop1508-1" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop1510-4" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3631">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop3633" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop3635" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3638">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop3640" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop3642" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3645">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.095505618;"
+         offset="0.0000000"
+         id="stop3647" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop3649" />
+    </linearGradient>
+    <linearGradient
+       y2="689.86005"
+       y1="230.07422"
+       xlink:href="#linearGradient1492-3"
+       x2="351.7063"
+       x1="728.96643"
+       id="linearGradient1495-5"
+       gradientTransform="scale(0.955425,1.0466546)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1492-3">
+      <stop
+         style="stop-color:#dadada;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1493-4" />
+      <stop
+         style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
+         offset="0.34923077"
+         id="stop1496-0" />
+      <stop
+         style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1494-6" />
+    </linearGradient>
+    <linearGradient
+       y2="418.53635"
+       y1="236.12772"
+       xlink:href="#linearGradient1501-6"
+       x2="330.88034"
+       x1="687.96375"
+       id="linearGradient1499-2"
+       gradientTransform="scale(0.9890091,1.011113)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1501-6">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1502-3" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop1504-4" />
+    </linearGradient>
+    <linearGradient
+       y2="287.73825"
+       y1="169.4436"
+       xlink:href="#linearGradient1492-3"
+       x2="622.33325"
+       x1="741.63898"
+       id="linearGradient1497-4"
+       gradientTransform="scale(0.9552926,1.0467997)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient3661">
+      <stop
+         style="stop-color:#dadada;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop3663" />
+      <stop
+         style="stop-color:#f1f1f1;stop-opacity:1.0000000;"
+         offset="0.34923077"
+         id="stop3665" />
+      <stop
+         style="stop-color:#f0f0f0;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop3667" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="TriangleOutL-9"
+       style="overflow:visible">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3964-4"
+         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
+         transform="scale(0.8,0.8)" />
+    </marker>
+    <clipPath
+       id="clipPath16-4"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-3"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-7"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-6"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-5-7"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-4-55"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-5"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-4"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-4-6"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-3-0"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-4-1"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-3-4"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <marker
+       id="marker44971"
+       orient="auto"
+       markerHeight="5.7450781"
+       markerWidth="4.6297355">
+      <g
+         id="g18059"
+         transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">
+        <path
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+           id="path18061"
+           d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+        <path
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path18063"
+           d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+           style="fill:#bebeaa;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+      </g>
+    </marker>
+    <clipPath
+       id="clipPath16-7-3"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-6-7"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath16-1"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path18-69"
+         d="M 0,512 512,512 512,0 0,0 0,512 z" />
+    </clipPath>
+    <marker
+       id="marker44971-1"
+       orient="auto"
+       markerHeight="5.7450781"
+       markerWidth="4.6297355">
+      <g
+         id="g18059-4"
+         transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">
+        <path
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+           id="path18061-5"
+           d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+        <path
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path18063-9"
+           d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+           style="fill:#bebeaa;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+      </g>
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.6499158"
+     inkscape:cx="450.53954"
+     inkscape:cy="745.06706"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid9369"
+       empspacing="4"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="10px"
+       spacingy="10px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:1">
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450-0-9"
+       width="700"
+       height="40"
+       x="10"
+       y="472.36218"
+       ry="3.7880721" />
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450-6"
+       width="700"
+       height="40"
+       x="10"
+       y="152.36218"
+       ry="3.7880721" />
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450-9"
+       width="700"
+       height="40"
+       x="10"
+       y="232.36218"
+       ry="3.7880721" />
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450-3"
+       width="700"
+       height="40"
+       x="10"
+       y="312.36218"
+       ry="3.7880721" />
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450-0"
+       width="700"
+       height="40"
+       x="10"
+       y="392.36218"
+       ry="3.7880721" />
+    <rect
+       style="color:#000000;fill:#efefe9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.54330707;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect18450"
+       width="700"
+       height="40"
+       x="10"
+       y="72.362183"
+       ry="3.7880721" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 120,372.36218 0,39.99999 40,0"
+       id="path2806-5-7-3-7"
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,292.36218 40,0"
+       id="path2806-0-2-6"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,252.36218 40,0"
+       id="path2806-0-2-8"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,212.36218 0,240 40,0"
+       id="path2806-5-7-34"
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 40,92.362183 40,0"
+       id="path2806-0-2"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot227292"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(14.607,151.77541)"><flowRegion
+         id="flowRegion227294"><rect
+           id="rect227296"
+           width="134.49388"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara227298">mytheme.scss</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot227308"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(-26.655,110.84272)"><flowRegion
+         id="flowRegion227310"><rect
+           id="rect227312"
+           width="120.20815"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara227314">mytheme</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot227316"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(13.149,272.14229)"><flowRegion
+         id="flowRegion227318"><rect
+           id="rect227320"
+           width="120.20815"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara227322">img</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot233610"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(54.607,311.65513)"><flowRegion
+         id="flowRegion233612"><rect
+           id="rect233614"
+           width="154.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara233616">myimage.png</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot233630"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(12.969,351.77541)"><flowRegion
+         id="flowRegion233632"><rect
+           id="rect233634"
+           width="120.20815"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara233636">layouts</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot233694"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(54.607,391.41827)"><flowRegion
+         id="flowRegion233696"><rect
+           id="rect233698"
+           width="154.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara233700">mylayout.html</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot233754"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(-65.519,-46.43028)"><flowRegion
+         id="flowRegion233756"><rect
+           id="rect233758"
+           width="314.63956"
+           height="30.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara233760">VAADIN/themes</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2664"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,111.60034)"><flowRegion
+         id="flowRegion2666"><rect
+           id="rect2668"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2670">- a custom theme</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2672"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,150.4651)"><flowRegion
+         id="flowRegion2674"><rect
+           id="rect2676"
+           width="327.4967"
+           height="24.226496"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2678">- actual Sass style sheet</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2680"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,270.0851)"><flowRegion
+         id="flowRegion2682"><rect
+           id="rect2684"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2686">- image resources</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2688"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,351.09526)"><flowRegion
+         id="flowRegion2690"><rect
+           id="rect2692"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2694">- custom layouts</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2696"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,390.0851)"><flowRegion
+         id="flowRegion2698"><rect
+           id="rect2700"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2702">- layout template</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2834"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(13.671,33.440863)"><flowRegion
+         id="flowRegion2836"><rect
+           id="rect2838"
+           width="161.51456"
+           height="28.427111"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara2840">valo.scss</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2842"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(-26.329,-6.559138)"><flowRegion
+         id="flowRegion2844"><rect
+           id="rect2846"
+           width="120.20815"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara2848">valo</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2850"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,-9.9149007)"><flowRegion
+         id="flowRegion2852"><rect
+           id="rect2854"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2856">- a built-in theme</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2858"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,30.465099)"><flowRegion
+         id="flowRegion2860"><rect
+           id="rect2862"
+           width="254.63956"
+           height="25.655067"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2864">- theme Sass style sheet</flowPara></flowRoot>    <g
+       id="g10908"
+       transform="translate(-35.714285,9.0968045)">
+      <path
+         transform="matrix(1.0999439,0,0,1,-24.007948,-85.924008)"
+         d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
+         sodipodi:ry="2.5253813"
+         sodipodi:rx="2.2728431"
+         sodipodi:cy="241.71477"
+         sodipodi:cx="163.39218"
+         id="path2886"
+         style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+         sodipodi:type="arc" />
+      <path
+         transform="matrix(1.0999439,0,0,1,-24.007948,-77.924008)"
+         d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
+         sodipodi:ry="2.5253813"
+         sodipodi:rx="2.2728431"
+         sodipodi:cy="241.71477"
+         sodipodi:cx="163.39218"
+         id="path2888"
+         style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+         sodipodi:type="arc" />
+      <path
+         transform="matrix(1.0999439,0,0,1,-24.007948,-69.924008)"
+         d="m 165.66502,241.71477 c 0,1.39473 -1.01758,2.52538 -2.27284,2.52538 -1.25526,0 -2.27284,-1.13065 -2.27284,-2.52538 0,-1.39473 1.01758,-2.52538 2.27284,-2.52538 1.25526,0 2.27284,1.13065 2.27284,2.52538 z"
+         sodipodi:ry="2.5253813"
+         sodipodi:rx="2.2728431"
+         sodipodi:cy="241.71477"
+         sodipodi:cx="163.39218"
+         id="path2890"
+         style="fill:#000000;fill-opacity:1;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+         sodipodi:type="arc" />
+    </g>
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4, 4;stroke-dashoffset:0;marker-end:url(#marker44971)"
+       d="m 280,242.36218 30,0 0,-110 -10,0"
+       id="path2892"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4061"
+       style="font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(182.663,70.673465)"><flowRegion
+         id="flowRegion4063"><rect
+           id="rect4065"
+           width="419.84824"
+           height="29.678204"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara4067">@import &quot;../valo/valo&quot;;</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot227292-6"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(13.059,191.41827)"><flowRegion
+         id="flowRegion227294-2"><rect
+           id="rect227296-3"
+           width="134.49388"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara227298-4">styles.scss</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2672-3"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,190.4651)"><flowRegion
+         id="flowRegion2674-8"><rect
+           id="rect2676-9"
+           width="327.4967"
+           height="24.226496"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2678-8">- theme main Sass style sheet</flowPara></flowRoot>    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4,4;stroke-dashoffset:0;marker-end:url(#marker44971)"
+       d="m 270,292.36218 40,0 0,-36.07143 -20,0.35715"
+       id="path2892-3"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4061-1"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(182.663,166.65193)"><flowRegion
+         id="flowRegion4063-4"><rect
+           id="rect4065-2"
+           width="382.49667"
+           height="28.512213"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara4067-9">@import &quot;mytheme.scss&quot;;</flowPara></flowRoot>    <g
+       id="g9515"
+       transform="translate(132.58904,217.84543)">
+      <g
+         id="g7747">
+        <g
+           transform="matrix(0.07998562,0,0,-0.07998562,6.9813187,215.10036)"
+           inkscape:label="Picture"
+           id="g10-5-8"
+           style="fill:#ffffff">
+          <g
+             id="g12-4-6"
+             style="fill:#ffffff">
+            <g
+               clip-path="url(#clipPath16-4-6)"
+               id="g14-8-3"
+               style="fill:#ffffff">
+              <g
+                 transform="translate(433.8223,141.3848)"
+                 id="g20-83-8"
+                 style="fill:#ffffff">
+                <path
+                   style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                   d="m -414.09375,-54.65625 c 0,113.520833 0,227.04167 0,340.5625 156.89583,0 313.79167,0 470.6875,0 0,-114.1875 0,-228.375 0,-342.5625 -156.89583,0 -313.79167,0 -470.6875,0 l 0,1 z"
+                   id="path22-5-2"
+                   inkscape:connector-curvature="0"
+                   sodipodi:nodetypes="scccccs" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <g
+         id="g10-5-6"
+         inkscape:label="Picture"
+         transform="matrix(0.07998562,0,0,-0.07998562,6.9813187,215.10036)">
+        <g
+           id="g12-4-9">
+          <g
+             id="g14-8-5"
+             clip-path="url(#clipPath16-4-1)">
+            <g
+               id="g20-83-2"
+               transform="translate(433.8223,141.3848)">
+              <path
+                 inkscape:connector-curvature="0"
+                 d="m 0,0 -356.188,0 -0.015,228.033 354.928,0 0,-0.017 1.275,0 L 0,0 z m -396.082,-38.653 434.688,0 0,306.569 -434.688,0 0,-306.569 z m 309.26,178.483 c 16.061,0 29.073,13 29.073,29.059 0,16.04 -13.012,29.062 -29.073,29.062 -16.019,0 -29.038,-13.022 -29.038,-29.062 0,-16.059 13.019,-29.059 29.038,-29.059 m -100.514,-68.524 -85.603,91.047 -58.21,-107.66 0,-29.658 289.12,0 c -36.822,31.753 -114.476,99.682 -114.476,99.682 l -30.831,-53.411 z"
+                 style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                 id="path22-5-1" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 40,52.362186 0,159.999994 40,0"
+       id="path2806-5-7"
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g3611"
+       transform="translate(17.480984,-49.267494)">
+      <g
+         style="fill:#ffffff"
+         id="g10-4-6"
+         inkscape:label="Folder"
+         transform="matrix(0.07998562,0,0,-0.07998562,1.9122928,122.28074)">
+        <g
+           style="fill:#ffffff"
+           id="g12-1-3">
+          <g
+             style="fill:#ffffff"
+             id="g14-3-3"
+             clip-path="url(#clipPath16-5-7)">
+            <g
+               style="fill:#ffffff"
+               id="g20-8-1"
+               transform="translate(457.2109,384.8115)">
+              <path
+                 inkscape:connector-curvature="0"
+                 id="path22-2-6"
+                 d="m -10.5,-331.25 c -131.67908,1.3418 -263.4169,-1.1568 -395.0625,1.46875 -18.88471,5.30331 -27.52917,27.22938 -24.73835,45.43731 -1.55601,77.91039 -6.95457,155.70331 -9.44915,233.56269 1.77368,10.078123 9.09422,18.689545 16.96875,24.3125 -7.92842,11.339555 -4.63436,26.46294945 -1.53125,38.90625 3.68504,11.473091 13.32222,21.527751 25.03125,23.90625 0.64926,16.281394 12.799,32.511879 29.125,35.84375 22.86963,4.535758 46.21236,-0.619376 69.28125,1.375 24.0007,0.11428 49.36546,3.030008 72.0903,-6.135877 9.90405,-6.591274 15.08127,-18.090353 17.75345,-29.301623 68.21593,-0.629281 136.557909,2.010461 204.6875,-1.625 25.807558,-4.763359 37.808461,-40.8363988 21.25,-60.8125 18.342476,-9.723258 25.076089,-33.322653 20.303985,-52.744757 -5.299272,-59.854233 -5.942784,-120.000983 -8.718706,-180.002273 -1.05619,-17.57576 -1.245293,-35.40606 -3.647779,-52.78422 C 17.916478,-323.16042 3.5572264,-331.96135 -10.5,-331.25 z"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+            </g>
+          </g>
+        </g>
+      </g>
+      <g
+         id="g10-4"
+         inkscape:label="Folder"
+         transform="matrix(0.07998562,0,0,-0.07998562,1.9122928,122.28074)">
+        <g
+           id="g12-1">
+          <g
+             id="g14-3"
+             clip-path="url(#clipPath16-5)">
+            <g
+               id="g20-8"
+               transform="translate(457.2109,384.8115)">
+              <path
+                 inkscape:connector-curvature="0"
+                 d="m 0,0 c 0,8.98 -7.277,16.256 -16.258,16.256 l -205.648,0 c -6.429,0.161 -11.384,11.842 -11.384,16.31 l 0.003,1.903 c 0,9.546 -7.737,17.28 -17.28,17.28 l -109.476,0 c -9.544,0 -17.281,-7.734 -17.281,-17.28 l 0.004,-1.903 c 0,-4.5 -5.021,-16.322 -11.516,-16.322 l 0.154,0 C -397.525,16.087 -404.647,8.88 -404.647,0 l 0,-11.223 L 0,-11.223 0,0 z m 0,-42.313 0,0.316 -404.647,0 0,-0.327 c -7.956,-1.549 -13.959,-8.547 -13.959,-16.955 0,0 5.683,-86.463 6.726,-117.611 1.045,-31.147 3.844,-114.727 3.844,-114.727 0,-9.544 1.973,-17.281 11.514,-17.281 l 388.458,0 c 9.543,0 11.513,7.737 11.513,17.281 0,0 2.804,83.58 3.845,114.727 1.044,31.148 6.727,117.611 6.727,117.611 0,8.432 -6.035,15.441 -14.021,16.966"
+                 style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                 id="path22-2" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g3611"
+       id="use10870"
+       transform="translate(40.523025,159.91333)"
+       width="744.09448"
+       height="1052.3622" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,92.362183 0,39.999987 40,0"
+       id="path2806-5-7-3"
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g5070"
+       transform="translate(102.99732,28.451556)">
+      <g
+         style="fill:#ffffff"
+         id="g10-3"
+         inkscape:label="Document"
+         transform="matrix(0.07998562,0,0,-0.07998562,-3.457336,124.5086)">
+        <g
+           style="fill:#ffffff"
+           id="g12-5">
+          <g
+             style="fill:#ffffff"
+             id="g14-37"
+             clip-path="url(#clipPath16-7)">
+            <g
+               style="fill:#ffffff"
+               id="g20-5"
+               transform="translate(130.7402,72.7832)">
+              <path
+                 sodipodi:nodetypes="sccccccs"
+                 inkscape:connector-curvature="0"
+                 id="path22-1"
+                 d="m -45.03125,-43.03125 c 0,151.5625 0,303.125 0,454.6875 75.90625,0 151.8125,0 227.71875,0 36.68936,-36.8322 73.34869,-73.80705 110.34375,-110.21875 0,-115.48958 0,-230.979167 0,-346.46875 -112.6875,0 -225.375,0 -338.0625,0 l 0,1 z"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+            </g>
+          </g>
+        </g>
+      </g>
+      <g
+         id="g10"
+         inkscape:label="Document"
+         transform="matrix(0.07998562,0,0,-0.07998562,-3.454656,124.51136)">
+        <g
+           id="g12">
+          <g
+             id="g14"
+             clip-path="url(#clipPath16)">
+            <g
+               id="g20"
+               transform="translate(130.7402,72.7832)">
+              <path
+                 inkscape:connector-curvature="0"
+                 d="m 0,0 0,366.626 141.613,0 c 37.201,0 19.275,-88.18 19.275,-88.18 0,0 86,20.901 87.104,-18.534 L 247.992,0 0,0 z m 265.701,300.338 -83.997,83.994 -7.331,7.333 -199.411,0 0,-416.701 298.071,0 0,318.039 -7.332,7.335 z"
+                 style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                 id="path22" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g3611"
+       id="use10868"
+       transform="translate(40.167297,39.622524)"
+       width="744.09448"
+       height="1052.3622" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g5070"
+       id="use10931"
+       transform="translate(0.20270218,119.84969)"
+       width="744.09448"
+       height="1052.3622" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g5070"
+       id="use10933"
+       transform="translate(-0.01158332,159.99253)"
+       width="744.09448"
+       height="1052.3622" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,372.36218 40,0"
+       id="path2806-0-2-6-8"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g3611"
+       id="use10980"
+       transform="translate(80.017949,319.91333)"
+       width="744.09448"
+       height="1052.3622" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 80,332.36218 40,0"
+       id="path2806-0-2-6-9"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot227292-6-5"
+       style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+       transform="translate(13.059,231.41827)"><flowRegion
+         id="flowRegion227294-2-8"><rect
+           id="rect227296-3-2"
+           width="134.49388"
+           height="28.284271"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch" /></flowRegion><flowPara
+         id="flowPara227298-4-3">addons.scss</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot2672-3-6"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+       transform="translate(204.625,230.4651)"><flowRegion
+         id="flowRegion2674-8-4"><rect
+           id="rect2676-9-4"
+           width="370.01456"
+           height="20.189968"
+           x="135.36044"
+           y="91.707115"
+           style="font-size:20px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara
+         id="flowPara2678-8-3">- autogenerated addon theme inclusions</flowPara></flowRoot>    <use
+       x="0"
+       y="0"
+       xlink:href="#g5070"
+       id="use10933-7"
+       transform="translate(-0.01158,199.99254)"
+       width="744.09448"
+       height="1052.3622" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4, 4;stroke-dashoffset:0;marker-end:url(#marker44971)"
+       d="m 270,292.36218 40,0 0,40 -20,0"
+       id="path2892-3-2"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#bebeaa;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 120,452.36218 0,39.99999 40,0"
+       id="path2806-5-7-3-7-5"
+       sodipodi:nodetypes="ccc"
+       inkscape:connector-curvature="0" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g3611"
+       id="use10982"
+       transform="translate(80.045224,399.60013)"
+       width="744.09448"
+       height="1052.3622" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#g5070"
+       id="use10935"
+       transform="translate(40.202703,359.49255)"
+       width="744.09448"
+       height="1052.3622" />
+  </g>
+</svg>
diff --git a/documentation/themes/themes-compiling.asciidoc b/documentation/themes/themes-compiling.asciidoc
new file mode 100644
index 0000000000..7c8501858a
--- /dev/null
+++ b/documentation/themes/themes-compiling.asciidoc
@@ -0,0 +1,223 @@
+---
+title: Compiling Sass Themes
+order: 4
+layout: page
+---
+
+[[themes.compiling]]
+= Compiling Sass Themes
+
+Sass themes must be compiled to CSS understood by browsers. Compilation can be
+done with the Vaadin Sass Compiler, which you can run in Eclipse, Maven, or it
+can be run on-the-fly when the application is loaded in the browser. You can
+also use any other Sass compiler.
+
+[[themes.compiling.on-the-fly]]
+== Compiling On the Fly
+
+The easiest way to use Sass themes during theme development is to let the Vaadin
+servlet compile them on the run. In this case, the SCSS source files are placed
+in the theme folder. Compilation is done each time the [filename]#styles.css# is
+requested from the server.
+
+The on-the-fly compilation takes a bit time, so it is only available when the
+Vaadin servlet is in the development mode, as described in
+<<dummy/../../../framework/application/application-environment#application.environment.parameters,"Other
+Servlet Configuration Parameters">>. Also, it requires the theme compiler and
+all its dependencies to be in the class path of the servlet. At least for
+production, you must compile the theme to CSS, as described next.
+
+
+[[themes.compiling.eclipse]]
+== Compiling in Eclipse
+
+If using Eclipse and the Vaadin Plugin for Eclipse, its project wizard creates a
+Sass theme. It includes [menuchoice]#Compile Theme# command in the toolbar to
+compile the project theme to CSS. Another command compiles also the widget set.
+
+[[figure.themes.compiling.eclipse]]
+.Compiling Sass Theme
+image::img/eclipse-theme-compiler.png[]
+
+The [filename]#WebContent/VAADIN/mytheme/styles.scss# and any Sass sources
+included by it are compiled to [filename]#styles.css#.
+
+
+[[themes.compiling.maven]]
+== Compiling with Maven
+
+To compile the themes with Maven, you need to include the built-in themes as a
+dependency:
+
+
+[source, xml]
+----
+  ...
+  <dependencies>
+    ...
+    <dependency>
+        <groupId>com.vaadin</groupId>
+        <artifactId>vaadin-themes</artifactId>
+        <version>${vaadin.version}</version>
+    </dependency>
+  </dependencies>
+  ...
+----
+
+This is automatically included at least in the
+[literal]#++vaadin-archetype-application++# archetype for Vaadin applications.
+The actual theme compilation is most conveniently done by the Vaadin Maven
+Plugin with [literal]#++update-theme++# and [literal]#++compile-theme++# goals.
+
+
+[source, xml]
+----
+  ...
+  <plugin>
+    <groupId>com.vaadin</groupId>
+    <artifactId>vaadin-maven-plugin</artifactId>
+    ...
+    <executions>
+      <execution>
+        ...
+        <goals>
+          <goal>clean</goal>
+          <goal>resources</goal>
+          <goal>update-theme</goal>
+          <goal>update-widgetset</goal>
+          <goal>compile-theme</goal>
+          <goal>compile</goal>
+        </goals>
+      </execution>
+    </executions>
+----
+
+Once these are in place, the theme is compiled as part of relevant lifecycle
+phases, such as [literal]#++package++#.
+
+[subs="normal"]
+----
+[command]#mvn# [parameter]#package#
+----
+You can also compile just the theme with the [package]#compile-theme# goal:
+
+[subs="normal"]
+----
+[command]#mvn# [parameter]#vaadin:compile-theme#
+----
+
+ifdef::web[]
+[[themes.compiling.command-line]]
+== Compiling in Command-line
+
+You can compile Sass style sheets to CSS either with the Vaadin Sass compiler or
+the standard one. The [filename]#styles.css# of a custom theme should be the
+compilation target. When compiled before deployment, the source files do not
+need to be in the theme folder.
+
+You can run the Vaadin Sass compiler in a theme folder as follows:
+
+[subs="normal"]
+----
+[command]#java# [parameter]#-cp# [replaceable]#'../../../WEB-INF/lib/*'# com.vaadin.sass.SassCompiler styles.scss styles.css
+----
+The [parameter]#-cp# parameter should point to the class path where the Vaadin
+Sass Compiler and theme JARs are located. In the above example, they are assumed
+to be located in the [filename]#WEB-INF/lib# folder of the web application. If
+you have loaded the Vaadin libraries using Ivy, as is the case with projects
+created with the Vaadin Plugin for Eclipse, the Vaadin libraries are stored in
+Ivy's local repository. Its folder hierarchy is somewhat scattered, so we
+recommend that you retrieve the libraries to a single folder. We recommend using
+an Ant script as is described next.
+
+endif::web[]
+
+[[themes.compiling.ant]]
+== Compiling with Ant
+
+With Apache Ant, you can easily resolve the dependencies with Ivy and compile
+the theme with the Theme Compiler included in Vaadin as follows. This build step
+can be conveniently included in a WAR build script.
+
+Start with the following configuration:
+
+
+[source, xml]
+----
+<project xmlns:ivy="antlib:org.apache.ivy.ant"
+         name="My Project" basedir="../"
+         default="package-war">
+
+  <target name="configure">
+    <!-- Where project source files are located -->
+    <property name="src-location" value="src" />
+
+    ... other project build definitions ...
+            
+    <!-- Name of the theme -->
+    <property name="theme" value="book-examples"/>
+        
+    <!-- Compilation result directory -->
+    <property name="result" value="build/result"/>
+  </target>
+
+  <!-- Initialize build -->
+  <target name="init" depends="configure">
+    <!-- Construct and check classpath -->
+    <path id="compile.classpath">
+        <!-- Source code to be compiled -->
+        <pathelement path="${src-location}" />
+            
+        <!-- Vaadin libraries and dependencies -->
+        <fileset dir="${result}/lib">
+            <include name="*.jar"/>
+        </fileset>
+    </path>
+
+    <mkdir dir="${result}"/>
+  </target>
+----
+
+You should first resolve all Vaadin libraries to a single directory, which you
+can use for deployment, but also for theme compilation.
+
+
+----
+  <target name="resolve" depends="init">
+    <ivy:retrieve
+        pattern="${result}/lib/[module]-[type]-[artifact]-[revision].[ext]"/>
+  </target>
+----
+
+Then, you can compile the theme as follows:
+
+
+----
+  <!-- Compile theme -->
+  <target name="compile-theme"
+          depends="init, resolve">
+    <delete dir="${result}/VAADIN/themes/${theme}"/>
+    <mkdir dir="${result}/VAADIN/themes/${theme}"/>
+    	
+    <java classname="com.vaadin.sass.SassCompiler"
+          fork="true">
+      <classpath>
+        <path refid="compile.classpath"/>
+      </classpath>
+      <arg value="WebContent/VAADIN/themes/${theme}/styles.scss"/>
+      <arg value="${result}/VAADIN/themes/${theme}/styles.css"/>
+    </java>
+
+    	<!-- Copy theme resources -->
+    <copy todir="${result}/VAADIN/themes/${theme}">
+      <fileset dir="WebContent/VAADIN/themes/${theme}">
+        <exclude name="**/*.scss"/>
+      </fileset>
+    </copy>
+  </target>
+</project>
+----
+
+
+
+
diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc
new file mode 100644
index 0000000000..dcd2c5034a
--- /dev/null
+++ b/documentation/themes/themes-creating.asciidoc
@@ -0,0 +1,283 @@
+---
+title: Creating and Using Themes
+order: 5
+layout: page
+---
+
+[[themes.creating]]
+= Creating and Using Themes
+
+Custom themes are placed in the [filename]#VAADIN/themes# folder of the web
+application, in an Eclipse project under the [filename]#WebContent# folder or
+[filename]#src/main/webapp# in Maven projects, as was illustrated in
+<<dummy/../../../framework/themes/themes-overview#figure.themes.theme-contents,"Contents
+of a Theme">>. This location is fixed. You need to have a theme folder for each
+theme you use in your application, although applications rarely need more than a
+single theme.
+
+[[themes.creating.sass]]
+== Sass Themes
+
+You can use Sass themes in Vaadin in two ways, either by compiling them to CSS
+by yourself or by letting the Vaadin servlet compile them for you on-the-fly
+when the theme CSS is requested by the browser, as described in
+<<dummy/../../../framework/themes/themes-compiling#themes.compiling,"Compiling
+Sass Themes">>.
+
+To define a Sass theme with the name mytheme, you must place a file with name
+[filename]#styles.scss# in the theme folder [filename]#VAADIN/themes/mytheme#.
+If no [filename]#styles.css# exists in the folder, the Sass file is compiled
+on-the-fly when the theme is requested by a browser.
+
+We recommend that you organize the theme in at least two SCSS files so that you
+import the actual theme from a Sass file that is named more uniquely than the
+[filename]#styles.scss#, to make it distinquishable in the editor. This
+organization is how the Vaadin Plugin for Eclipse creates a new theme.
+
+If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and
+Maven automatically add them to the [filename]#addons.scss# file.
+
+[[themes.creating.sass.scss]]
+=== Theme SCSS
+
+We recommend that the rules in a theme should be prefixed with a selector for
+the theme name. You can do the prefixing in Sass by enclosing the rules in a
+nested rule with a selector for the theme name.
+
+Themes are defined as Sass mixins, so after you import the mixin definitions,
+you can [literal]#++@include++# them in the theme rule as follows:
+
+
+[source, css]
+----
+@import "addons.scss";
+@import "mytheme.scss";
+
+.mytheme {
+  @include addons;
+  @include mytheme;
+}
+----
+
+However, this is mainly necessary if you use the UI in portlets, each of which
+can have its own theme, or in the special circumstance that the theme has rules
+that use empty parent selector [literal]#++&++# to refer to the theme name.
+
+Otherwise, you can safely leave the nested theme selector out as follows:
+
+
+[source, css]
+----
+@import "addons.scss";
+@import "mytheme.scss";
+
+@include addons;
+@include mytheme;
+----
+
+The actual theme should be defined as follows, as a mixin that includes the base
+theme.
+
+
+[source, css]
+----
+@import "../valo/valo.scss";
+
+@mixin mytheme {
+  @include valo;
+
+  /* An actual theme rule */
+  .v-button {
+    color: blue;
+  }
+}
+
+----
+
+
+[[themes.creating.sass.addons]]
+=== Add-on Themes
+
+Some Vaadin add-ons include Sass styles that need to be compiled into the theme.
+These are managed in the [filename]#addons.scss# file in a theme, included from
+the [filename]#styles.scss#. The [filename]#addons.scss# file is automatically
+generated by the Vaadin Plugin for Eclipse or Maven.
+
+[subs="normal"]
+----
+/* This file is automatically managed and will be
+   overwritten from time to time. */
+/* Do not manually edit this file. */
+
+**/++*++ Provided by vaadin-spreadsheet-1.0.0.beta1.jar ++*++/ @import "../../../VAADIN/addons/spreadsheet/spreadsheet.scss";**
+
+/* Import and include this mixin into your project
+   theme to include the addon themes */
+@mixin addons {
+  **@include spreadsheet;**
+}
+----
+
+
+[[themes.creating.css]]
+== Plain Old CSS Themes
+
+In addition to Sass themes, you can create plain old CSS themes. CSS theme are
+more restricted than Sass styles - you can't parameterize CSS themes in any way,
+unlike you can Valo, for example. Further, an application can only have one CSS
+theme while you can have multiple Sass themes.
+
+A CSS theme is defined in a [filename]#styles.css# file in the
+[filename]#VAADIN/themes/mytheme# folder. You need to import the
+[filename]#legacy-styles.css# of the built-in theme as follows:
+
+
+----
+@import "../reindeer/legacy-styles.css";
+
+.v-app {
+    background: yellow;
+}
+----
+
+
+[[themes.creating.standard-components]]
+== Styling Standard Components
+
+Each user interface component in Vaadin has a CSS style class that you can use
+to control the appearance of the component. Many components have additional
+sub-elements that also allow styling. You can add context-specific stylenames
+with [methodname]#addStyleName()#. Notice that [methodname]#getStyleName()#
+returns only the custom stylenames, not the built-in stylenames for the
+component.
+
+Please see the section on each component for a description of its styles. Most
+of the stylenames are determined in the client-side widget of each component.
+The easiest way to find out the styles of the elements is to use a HTML
+inspector such as
+FireBug.////
+TODO reference to a Firebug section when
+available
+////
+
+Some client-side components or component styles can be shared by different
+server-side components. For example, [literal]#++v-textfield++# style is used
+for all text input boxes in components, in addition to [classname]#TextField#.
+
+
+[[themes.creating.builtin]]
+== Built-in Themes
+
+Vaadin currently includes the following built-in themes:
+
+* [literal]#++valo++#, the primary theme since Vaadin 7.3
+* [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7
+* [literal]#++chameleon++#, an easily customizable theme
+* [literal]#++runo++#, the default theme in IT Mill Toolkit 5
+* [literal]#++liferay++#, for Liferay portlets
+
+In addition, there is the [literal]#++base++# theme, which should not be used
+directly, but is extended by the other built-in themes, except valo.
+
+The built-in themes are provided in the respective
+[filename]#VAADIN/themes/&lt;theme&gt;/styles.scss# stylesheets in the
+[filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in
+case you want to use the themes directly.
+
+Various constants related to the built-in themes are defined in the theme
+classes in [package]#com.vaadin.ui.themes# package. These are mostly special
+style names for specific components.
+
+
+----
+@Theme("runo")
+public class MyUI extends UI {
+    @Override
+    protected void init(VaadinRequest request) {
+        ...      
+        Panel panel = new Panel("Regular Panel in the Runo Theme");
+        panel.addComponent(new Button("Regular Runo Button"));
+        
+        // A button with the "small" style
+        Button smallButton = new Button("Small Runo Button");
+        smallButton.addStyleName(Runo.BUTTON_SMALL);
+
+        Panel lightPanel = new Panel("Light Panel");
+        lightPanel.addStyleName(Runo.PANEL_LIGHT);
+        lightPanel.addComponent(
+            new Label("With addStyleName(\"light\")"));
+        ...
+----
+
+The example with the Runo theme is shown in
+<<figure.themes.creating.builtin.runo>>.
+
+[[figure.themes.creating.builtin.runo]]
+.Runo Theme
+image::img/builtin-runo.png[]
+
+The built-in themes come with a custom icon font, FontAwesome, which is used for
+icons in the theme, and which you can use as font icons, as described in
+<<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font
+Icons">>.
+
+ifdef::web[]
+
+[NOTE]
+.Serving Built-In Themes Statically
+====
+The built-in themes included in the Vaadin library JAR are served dynamically
+from the JAR by the servlet. Serving themes and widget sets statically by the
+web server is more efficient. To do so, you need to extract the
+[filename]#VAADIN/# directories from the JAR to the web content directory (
+[filename]#WebContent# in Eclipse or [filename]#src/main/webapp# in Maven
+projects).
+
+[subs="normal"]
+----
+[prompt]#$# [command]#cd# WebContent
+----
+[subs="normal"]
+----
+[prompt]#$# [command]#unzip# path-to/vaadin-server-7.x.x.jar 'VAADIN/*'
+----
+[subs="normal"]
+----
+[prompt]#$# [command]#unzip# path-to/vaadin-themes-7.x.x.jar 'VAADIN/*'
+----
+[subs="normal"]
+----
+[prompt]#$# [command]#unzip# path-to/vaadin-client-compiled-7.x.x.jar 'VAADIN/*'
+----
+You can also serve static content from a front-end caching server, which reduces
+the load of the application server. In portals, you install the themes globally
+in the portal in similar way, as described in
+<<dummy/../../../framework/portal/portal-liferay#portal.liferay.install,"Installing
+Vaadin Resources">>.
+
+Just make sure to update the static content when you upgrade to a newer version
+of Vaadin.
+
+====
+
+endif::web[]
+
+
+Creation of a default theme for custom GWT widgets is described in
+<<dummy/../../../framework/gwt/gwt-styling#gwt.styling,"Styling a Widget">>.
+
+
+[[themes.creating.addon]]
+== Add-on Themes
+
+You can find more themes as add-ons from the
+link:http://vaadin.com/directory[Vaadin Directory]. In addition, many component
+add-ons contain a theme for the components they provide.
+
+The add-on themes need to be included in the project theme. Vaadin Plugin for
+Eclipse and Maven automatically include them in the [filename]#addons.scss# file
+in the project theme folder. It should be included by the project theme.
+
+
+
+
diff --git a/documentation/themes/themes-css.asciidoc b/documentation/themes/themes-css.asciidoc
new file mode 100644
index 0000000000..45229303dc
--- /dev/null
+++ b/documentation/themes/themes-css.asciidoc
@@ -0,0 +1,506 @@
+---
+title: Introduction to Cascading Style Sheets
+order: 2
+layout: page
+---
+
+[[themes.css]]
+= Introduction to Cascading Style Sheets
+
+((("CSS", "introduction", id="term.themes.css", range="startofrange")))
+
+
+Cascading Style Sheets or CSS is the basic technique to separate the appearance
+of a web page from the content represented in HTML. In this section, we give an
+introduction to CSS and look how they are relevant to software development with
+Vaadin.
+
+As we can only give a short intruction in this book, we encourage you to refer
+to the rich literature on CSS and the many resources available in the web. You
+can find the authoratitative specifications of CSS standards from the
+link:http://www.w3.org/Style/CSS/[W3C
+website]
+ifdef::web[]
+and other literature, references, and tutorials from the
+link:http://www.dmoz.org/Computers/Data_Formats/Style_Sheets/CSS/[Open Directory
+Project page on CSS], as well as from other
+sources
+endif::web[]
+.
+
+[[themes.css.basics]]
+== Applying CSS to HTML
+
+Let us consider the following HTML document that contains various markup
+elements for formatting text. Vaadin UIs work in essentially similar documents,
+even though they use somewhat different elements to draw the user interface.
+
+[subs="normal"]
+----
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;My Page&lt;/title&gt;
+        &lt;link rel="stylesheet" type="text/css"
+              href="mystylesheet.css"/&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        **&lt;p&gt;**This is a paragraph**&lt;/p&gt;**
+        **&lt;p&gt;**This is another paragraph**&lt;/p&gt;**
+        &lt;table&gt;
+            &lt;tr&gt;
+                **&lt;td&gt;**This is a table cell**&lt;/td&gt;**
+                **&lt;td&gt;**This is another table cell**&lt;/td&gt;**
+            &lt;/tr&gt;
+        &lt;/table&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+----
+The HTML elements that will be styled later by matching CSS rules are emphasized
+above.
+
+The [literal]#++<link>++# element in the HTML header defines the used CSS
+stylesheet. The definition is automatically generated by Vaadin in the HTML page
+that loads the UI of the application. A stylesheet can also be embedded in the
+HTML document itself, as is done when optimizing their loading in Vaadin
+TouchKit, for example.
+
+
+[[themes.css.basics]]
+== Basic CSS Rules
+
+A stylesheet contains a set of __rules__ that can match the HTML elements in the
+page. Each rule consists of one or more __selectors__, separated with commas,
+and a __declaration block__ enclosed in curly braces. A declaration block
+contains a list of __property__ statements. Each property has a label and a
+value, separated with a colon. A property statement ends with a semicolon.
+
+Let us look at an example that matches certain elements in the simple HTML
+document given in the previous section:
+
+
+[source, css]
+----
+p, td { 
+  color: blue;
+}
+
+td { 
+  background: yellow;
+  font-weight: bold;
+}
+----
+
+The [literal]#++p++# and [literal]#++td++# are element type selectors that match
+with [literal]#++<p>++# and [literal]#++<td>++# elements in HTML, respectively.
+The first rule matches with both elements, while the second matches only with
+[literal]#++<td>++# elements. Let us assume that you have saved the above style
+sheet with the name [filename]#mystylesheet.css# and consider the following HTML
+file located in the same folder.
+
+[[figure.themes.basic.1]]
+.Simple Styling by Element Type
+image::img/themes-css-match-1.png[]
+
+[[themes.css.basics.inheritance]]
+=== Style Inheritance in CSS
+
+CSS has __inheritance__ where contained elements inherit the properties of their
+parent elements. For example, let us change the above example and define it
+instead as follows:
+
+
+[source, css]
+----
+table {
+    color: blue;
+    background: yellow;
+}
+----
+
+All elements contained in the [literal]#++<table>++# element would have the same
+properties. For example, the text in the contained [literal]#++<td>++# elements
+would be in blue color.
+
+
+[[themes.css.basics.element-types]]
+=== HTML Element Types
+
+HTML has a number of element types, each of which accepts a specific set of
+properties. The [literal]#++<div>++# elements are generic elements that can be
+used to create almost any layout and formatting that can be created with a
+specific HTML element type. Vaadin uses [literal]#++<div>++# elements
+extensively to draw the UI, especially in layout components.
+
+((("Google Web Toolkit",
+"themeing")))
+Matching elements by their type as shown above is, however, rarely if ever used
+in style sheets for Vaadin applications. We used it above, because it is the
+normal way in regular HTML documents that use the various HTML elements for
+formatting text, but it is not applicable in Vaadin UIs that consist mostly of
+[literal]#++<div>++# elements. Instead, you need to match by element class, as
+described next.
+
+
+
+[[themes.css.matching-by-class]]
+== Matching by Element Class
+
+Matching HTML elements by the __class__ attribute is the most common form of
+matching in Vaadin stylesheets. It is also possible to match with the
+__identifier__ of a unique HTML element.
+
+The class of an HTML element is defined with the [parameter]#class# attribute as
+follows:
+
+[subs="normal"]
+----
+&lt;html&gt;
+  &lt;body&gt;
+    **&lt;p class="normal"&gt;**This is the first paragraph**&lt;/p&gt;**
+
+    **&lt;p class="another"&gt;**This is the second paragraph**&lt;/p&gt;**
+
+    &lt;table&gt;
+      &lt;tr&gt;
+        **&lt;td class="normal"&gt;**This is a table cell**&lt;/td&gt;**
+        **&lt;td class="another"&gt;**This is another table cell**&lt;/td&gt;**
+      &lt;/tr&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+----
+The class attributes of HTML elements can be matched in CSS rules with a
+selector notation where the class name is written after a period following the
+element name. This gives us full control of matching elements by their type and
+class.
+
+
+[source, css]
+----
+p.normal   {color: red;}
+p.another  {color: blue;}
+td.normal  {background: pink;}
+td.another {background: yellow;}
+----
+
+The page would look as shown below:
+
+.Matching HTML Element Type and Class
+image::img/themes-css-match-class-2.png[]
+
+We can also match solely by the class by using the universal selector
+[literal]#++*++# for the element name, for example [literal]#++*.normal++#. The
+universal selector can also be left out altogether so that we use just the class
+name following the period, for example [literal]#++.normal++#.
+
+
+[source, css]
+----
+.normal {
+    color: red;
+}
+
+.another {
+    blackground: yellow;
+}
+----
+
+In this case, the rule will match with all elements of the same class regardless
+of the element type. The result is shown in <<figure.themes.match.class>>. This
+example illustrates a technique to make style sheets compatible regardless of
+the exact HTML element used in drawing a component.
+
+[[figure.themes.match.class]]
+.Matching Only HTML Element Class
+image::img/themes-css-match-class-3.png[]
+
+To ensure future compatibility, we recommend that you use only matching based on
+the classes and __do not__ match for specific HTML element types in CSS rules,
+because Vaadin may change the exact HTML implementation how components are drawn
+in the future. For example, Vaadin earlier used [literal]#++<div>++# element to
+draw [classname]#Button# components, but later it was changed to use the
+special-purpose [literal]#++<button>++# element in HTML. Because of using the
+[literal]#++v-button++# style class in the CSS rules for the button, styling it
+has changed only very little.
+
+
+[[themes.css.matching-by-descendants]]
+== Matching by Descendant Relationship
+
+CSS allows matching HTML by their containment relationship. For example,
+consider the following HTML fragment:
+
+[subs="normal"]
+----
+&lt;body&gt;
+  &lt;p class="mytext"&gt;Here is some text inside a
+                    paragraph element&lt;/p&gt;
+  &lt;table class="**mytable**"&gt;
+    &lt;tr&gt;
+      &lt;td class="**mytext**"&gt;Here is text inside
+                      a table and inside a td element.&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/table&gt;
+&lt;/body&gt;
+----
+Matching by the class name [literal]#++.mytext++# alone would match both the
+[literal]#++<p>++# and [literal]#++<td>++# elements. If we want to match only
+the table cell, we could use the following selector:
+
+
+[source, css]
+----
+.mytable .mytext {color: blue;}
+----
+
+To match, a class listed in a rule does not have to be an immediate descendant
+of the previous class, but just a descendant. For example, the selector "
+[literal]#++.v-panel .v-button++#" would match all elements with class
+[literal]#++.v-button++# somewhere inside an element with class
+[literal]#++.v-panel++#.
+
+
+[[themes.css.cascading]]
+== Importance of Cascading
+
+CSS or Cascading Stylesheets are, as the name implies, about __cascading__
+stylesheets, which means applying the stylesheet rules according to their
+origin, importance, scope, specifity, and order.
+
+For exact rules for cascading in CSS, see the section
+link:http://www.w3.org/TR/css3-cascade/#cascading[Cascading] in the CSS
+specification.
+
+[[themes.css.cascading.importance]]
+=== Importance
+
+Declarations in CSS rules can be made override declarations with otherwise
+higher priority by annotating them as [literal]#++!important++#. For example, an
+inline style setting made in the [literal]#++style++# attribute of an HTML
+element has a higher specificity than any rule in a CSS stylesheet.
+
+
+[source, css]
+----
+<div class="v-button" style="height: 20px;">...
+----
+
+You can override the higher specificity with the [literal]#++!important++#
+annotation as follows:
+
+
+[source, css]
+----
+.v-button {height: 30px !important;}
+----
+
+
+[[themes.css.cascading.specificity]]
+=== Specificity
+
+A rule that specifies an element with selectors more closely overrides ones that
+specify it less specifically. With respect to the element class selectors most
+commonly used in Vaadin themes, the specificity is determined by the number of
+class selectors in the selector.
+
+
+[source, css]
+----
+.v-button {}
+.v-verticallayout .v-button {}
+.v-app .v-verticallayout .v-button {}
+----
+
+In the above example, the last rule would have the highest specificity and would
+match.
+
+As noted earlier, style declarations given in the style attribute of a HTML
+element have higher specificity than declarations in a CSS rule, except if the
+[literal]#++!important++# annotation is given.
+
+See the CSS3 link:http://www.w3.org/TR/selectors/#specificity[selectors module
+specification] for details regarding how the specificity is computed.
+
+
+[[themes.css.cascading.order]]
+=== Order
+
+CSS rules given later have higher priority than ones given earlier. For example,
+in the following, the latter rule overrides the former and the color will be
+black:
+
+
+[source, css]
+----
+.v-button {color: white}
+.v-button {color: black}
+----
+
+As specificity has a higher cascading priority than order, you could make the
+first rule have higher priority by adding specificity as follows:
+
+
+[source, css]
+----
+.v-app .v-button {color: white}
+.v-button {color: black}
+----
+
+The order is important to notice in certain cases, because Vaadin does not
+guarantee the order in which CSS stylesheets are loaded in the browser, which
+can in fact be random and result in very unexpected behavior. This is not
+relevant for Sass stylesheets, which are compiled to a single stylesheet. For
+plain CSS stylesheets, such as add-on or TouchKit stylesheets, the order can be
+relevant.
+
+
+
+[[themes.css.hierarchy]]
+== Style Class Hierarchy of a Vaadin UI
+
+Let us give a real case in a Vaadin UI by considering a simple Vaadin UI with a
+label and a button inside a vertical layout:
+
+
+[source, java]
+----
+// UI has v-ui style class
+@Theme("mytheme")
+public class HelloWorld extends UI {
+    @Override
+    protected void init(VaadinRequest request) {
+        // VerticalLayout has v-verticallayout style
+        VerticalLayout content = new VerticalLayout();
+        setContent(content);
+
+        // Label has v-label style
+        content.addComponent(new Label("Hello World!"));
+        
+        // Button has v-button style
+        content.addComponent(new Button("Push Me!",
+            new Button.ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                Notification.show("Pushed!");
+            }
+        }));
+    }
+}
+----
+
+The UI will look by default as shown in <<figure.themes.css.hierarchy.initial>>.
+By using a HTML inspector such as Firebug, you can view the HTML tree and the
+element classes and applied styles for each element.
+
+[[figure.themes.css.hierarchy.initial]]
+.An Unthemed Vaadin UI
+image::img/example-ui-default.png[]
+
+Now, let us look at the HTML element class structure of the UI, as we can see it
+in the HTML inspector:
+
+[subs="normal"]
+----
+&lt;body class="**v-generated-body v-ff v-ff20 v-ff200 v-gecko v-lin**"
+      scroll="auto"&gt;
+  &lt;div id="bookexamplesvaadin7helloworld-447164942"
+       class="**v-app mytheme**"&gt;
+    &lt;div class="**v-ui v-scrollable**"
+         tabindex="1" style="height: 100%; width: 100%;"&gt;
+      &lt;div class="**v-loading-indicator first**"
+           style="position: absolute; display: none;"&gt;&lt;/div&gt;
+      &lt;div class="**v-verticallayout v-layout v-vertical v-widget v-has-width**"
+           style="width: 100%;"&gt;
+        &lt;div class="**v-slot**"&gt;
+          &lt;div class="**v-label v-widget v-has-width**"
+               style="width: 100%;"&gt;Hello World!&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class="**v-slot**"&gt;
+          &lt;div class="**v-button v-widget**"
+               tabindex="0" role="button"&gt;
+            &lt;span class="**v-button-wrap**"&gt;
+              &lt;span class="**v-button-caption**"&gt;Push Me!&lt;/span&gt;
+            &lt;/span&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  ...
+&lt;body&gt;
+----
+Now, consider the following theme where we set the colors and margins of various
+elements. The theme is actually a Sass theme.
+
+
+[source, css]
+----
+@import "../valo/valo.scss";
+
+@mixin mytheme {
+  @include valo;
+
+  /* White background for the entire UI */
+  .v-ui {
+    background: white;
+  }
+  
+  /* All labels have white text on black background */
+  .v-label {
+    background: black;
+    color: white;
+    font-size: 24pt;
+    line-height: 24pt;
+    padding: 5px;
+  }
+
+  /* All buttons have blue caption and some margin */
+  .v-button {
+    margin: 10px;
+
+    /* A nested selector to increase specificity */
+    .v-button-caption {
+      color: blue;
+    }
+  }
+}
+----
+
+The look has changed as shown in <<figure.themes.css.hierarchy.themed>>.
+
+[[figure.themes.css.hierarchy.themed]]
+.Themed Vaadin UI
+image::img/example-ui-themed.png[]
+
+An element can have multiple classes separated with a space. With multiple
+classes, a CSS rule matches an element if any of the classes match. This feature
+is used in many Vaadin components to allow matching based on the state of the
+component. For example, when the mouse is over a [classname]#Link# component,
+[literal]#++over++# class is added to the component. Most of such styling is a
+feature of Google Web Toolkit.
+
+
+[[themes.css.compatibility]]
+== Notes on Compatibility
+
+((("CSS", "compatibility")))
+((("compatibility")))
+CSS is a standard continuously under development. It was first proposed in 1994.
+The specification of CSS is maintained by the CSS Working Group of World Wide
+Web Consortium (W3C). Versioned with backward-compatible "levels", CSS Level 1
+was published in 1996, Level 2 in 1998, and the ongoing development of CSS Level
+3 started in 1998. CSS3 is divided into a number of separate modules, each
+developed and progressing separately, and many of the modules are already Level
+4.
+
+While the support for CSS has been universal in all graphical web browsers since
+at least 1995, the support has been very incomplete at times and there still
+exists an unfortunate number of incompatibilities between browsers. While we
+have tried to take these incompatibilities into account in the built-in themes
+in Vaadin, you need to consider them while developing your own themes.
+Compatibility issues are detailed in various CSS handbooks.
+
+
+(((range="endofrange", startref="term.themes.css")))
+
+
diff --git a/documentation/themes/themes-eclipse.asciidoc b/documentation/themes/themes-eclipse.asciidoc
new file mode 100644
index 0000000000..bd35ce6fed
--- /dev/null
+++ b/documentation/themes/themes-eclipse.asciidoc
@@ -0,0 +1,75 @@
+---
+title: Creating a Theme in Eclipse
+order: 6
+layout: page
+---
+
+[[themes.eclipse]]
+= Creating a Theme in Eclipse
+
+The Eclipse plugin automatically creates a theme stub for new Vaadin projects.
+It also includes a wizard for creating new custom themes. Do the following steps
+to create a new theme.
+
+. Select "File > New > Other..." in the main menu or right-click the
+[guilabel]#Project Explorer# and select "New > Other...". A window will open.
+
+. In the [guilabel]#Select a wizard# step, select the "Vaadin > Vaadin Theme"
+wizard.
+
++
+image::img/eclipse-theme-new.png[]
+
++
+Click [guibutton]#Next# to proceed to the next step.
+
+. In the [guilabel]#Create a new Vaadin theme# step, you have the following
+settings:
+
+[guilabel]#Project#(mandatory):: The project in which the theme should be created.
+
+[guilabel]#Theme name#(mandatory):: The theme name is used as the name of the theme folder and in a CSS tag
+(prefixed with " [literal]#++v-theme-++#"), so it must be a proper identifier.
+Only latin alphanumerics, underscore, and minus sign are allowed.
+
+[guilabel]#Modify application classes to use theme#(optional):: The setting allows the wizard to write a code statement that enables the theme
+in the constructor of the selected application (UI) class(es). If you need to
+control the theme with dynamic logic, you can leave the setting unchecked or
+change the generated line later.
+
+
+
++
+image::img/eclipse-theme-settings.png[]
+
++
+Click [guibutton]#Finish# to create the theme.
+
+
+The wizard creates the theme folder under the
+[filename]#WebContent/VAADIN/themes# folder and the actual style sheet as
+[filename]#mytheme.scss# and [filename]#styles.scss# files, as illustrated in
+<<figure.eclipse.theme.created>>.
+
+[[figure.eclipse.theme.created]]
+.Newly Created Theme
+image::img/eclipse-theme-created-annotated-hi.png[]
+
+The created theme extends a built-in base theme with an [literal]#++@import++#
+statement. See the explanation of theme inheritance in
+<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and
+Using Themes">>. Notice that the [filename]#reindeer# theme is not located in
+the [filename]#widgetsets# folder, but in the Vaadin JAR. See
+<<dummy/../../../framework/themes/themes-creating#themes.creating.builtin,"Built-in
+Themes">> for information for serving the built-in themes.
+
+If you selected a UI class or classes in the [guilabel]#Modify application
+classes to use theme# in the theme wizard, the wizard will add the
+[literal]#++@Theme++# annotation to the UI class.
+
+If you later rename the theme in Eclipse, notice that changing the name of the
+folder will not automatically change the [literal]#++@Theme++# annotation. You
+need to change such references to theme names in the calls manually.
+
+
+
diff --git a/documentation/themes/themes-fonticon.asciidoc b/documentation/themes/themes-fonticon.asciidoc
new file mode 100644
index 0000000000..624220fa05
--- /dev/null
+++ b/documentation/themes/themes-fonticon.asciidoc
@@ -0,0 +1,266 @@
+---
+title: Font Icons
+order: 8
+layout: page
+---
+
+[[themes.fonticon]]
+= Font Icons
+
+Font icons are icons included in a font. Fonts have many advantages over bitmap
+images. Browsers are usually faster in rendering fonts than loading image files.
+Web fonts are vector graphics, so they are scalable. As font icons are text
+characters, you can define their color in CSS by the regular foreground color
+property.
+
+[[themes.fonticon.enabling]]
+== Loading Icon Fonts
+
+Vaadin currently comes with one custom icon font: FontAwesome. It is
+automatically enabled in the Valo theme. For other themes, you need to include
+it with the following line in your project theme, after importing the base
+theme:
+
+
+----
+@include fonticons;
+----
+
+If you use other icon fonts, as described in <<themes.fonticon.custom>>, and the
+font is not loaded by a base theme, you need to load it with a
+[literal]#++font++# mixin in Sass, as described in
+<<dummy/../../../framework/themes/themes-fonts#themes.fonts.loading,"Loading
+Local Fonts">>.
+
+
+[[themes.fonticon.using]]
+== Basic Use
+
+Font icons are resources of type [classname]#FontIcon#, which implements the
+[interfacename]#Resource# interface. You can use these special resources for
+component icons and such, but not as embedded images, for example.
+
+Each icon has a Unicode codepoint, by which you can use it. Vaadin includes an
+awesome icon font, [literal]#++FontAwesome++#, which comes with an enumeration
+of all the icons included in the font.
+
+Most typically, you set a component icon as follows:
+
+
+----
+TextField name = new TextField("Name");
+name.setIcon(FontAwesome.USER);
+layout.addComponent(name);
+
+// Button allows specifying icon resource in constructor
+Button ok = new Button("OK", FontAwesome.CHECK);
+layout.addComponent(ok);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.basic[on-line example, window="_blank"].
+
+The result is illustrated in <<figure.themes.fonticon.using>>, with the color
+styling described next.
+
+[[figure.themes.fonticon.using]]
+.Basic Use of Font Icons
+image::img/fonticons-basic.png[]
+
+[[themes.fonticon.using.css]]
+=== Styling the Icons
+
+As font icons are regular text, you can specify their color with the
+[literal]#++color++# attribute in CSS to specify the foreground text color. All
+HTML elements that display icons in Vaadin have the [literal]#++v-icon++# style
+name.
+
+
+----
+.v-icon {
+    color: blue;
+}
+----
+
+If you use the font icon resources in other ways, such as in an
+[classname]#Image# component, the style name will be different.
+
+
+
+[[themes.fonticon.html]]
+== Using Font icons in HTML
+
+You can use font icons in HTML code, such as in a [classname]#Label#, by
+generating the HTML to display the icon with the [methodname]#getHtml()# method.
+
+
+----
+Label label = new Label("I " +
+    FontAwesome.HEART.getHtml() + " Vaadin",
+    ContentMode.HTML);
+label.addStyleName("redicon");
+layout.addComponent(label);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
+
+The HTML code has the [literal]#++v-icon++# style, which you can modify in CSS:
+
+
+----
+.redicon .v-icon {
+    color: red;
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
+
+The result is illustrated in <<figure.themes.fonticon.html>>, with the color
+styling described next.
+
+[[figure.themes.fonticon.html]]
+.Using Font Icons in Label
+image::img/fonticons-html.png[]
+
+You could have set the font color in the label's HTML code as well, or for all
+icons in the UI.
+
+You can easily use font icons in HTML code in other ways as well. You just need
+to use the correct font family and then use the hex-formatted Unicode codepoint
+for the icon. See for example the implementation of the [methodname]#getHtml()#
+method in [classname]#FontAwesome#:
+
+
+----
+@Override
+public String getHtml() {
+    return "<span class=\"v-icon\" style=\"font-family: " +
+           getFontFamily() + ";\">&#x" +
+           Integer.toHexString(codepoint) + ";</span>";
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.html[on-line example, window="_blank"].
+
+
+[[themes.fonticon.anywhere]]
+== Using Font Icons in Other Text
+
+You can include a font icon in any text by its Unicode codepoint, which you can
+get with the [methodname]#getCodePoint()# method. In such case, however, you
+need to use the same font for other text in the same string as well. The
+FontAwesome provided in Vaadin includes a basic character set.
+
+
+----
+TextField amount = new TextField("Amount (in " +
+   new String(Character.toChars(
+           FontAwesome.BTC.getCodepoint())) +
+   ")");
+amount.addStyleName("awesomecaption");
+layout.addComponent(amount);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.intext[on-line example, window="_blank"].
+
+You need to set the font family in CSS.
+
+
+----
+.v-caption-awesomecaption .v-captiontext {
+    font-family: FontAwesome;
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.intext[on-line example, window="_blank"].
+
+
+[[themes.fonticon.custom]]
+== Custom Font Icons
+
+You can easily use glyphs in existing fonts as icons, or create your own.
+
+[[themes.fonticon.custom.creating]]
+=== Creating New Icon Fonts With IcoMoon
+
+You are free to use any of the many ways to create icons and embed them into
+fonts. Here, we give basic instructions for using the
+link:http://icomoon.io/app/[IcoMoon] service, where you can pick icons from a
+large library of well-designed icons.
+
+Font Awesome is included in IcoMoon's selection of icon libraries. Note that the
+codepoints of the icons are not fixed, so the [classname]#FontAwesome# enum is
+not compatible with such custom icon fonts.
+
+After you have selected the icons that you want in your font, you can download
+them in a ZIP package. The package contains the icons in multiple formats,
+including WOFF, TTF, EOT, and SVG. Not all browsers support any one of them, so
+all are needed to support all the common browsers. Extract the [filename]#fonts#
+folder from the package to under your theme.
+
+See <<dummy/../../../framework/themes/themes-fonts#themes.fonts.loading,"Loading
+Local Fonts">> for instructions for loading a custom font.
+
+
+ifdef::web[]
+[[themes.fonticon.custom.implementing]]
+=== Implementing FontIcon
+
+You can define a font icon for any font available in the browser by implementing
+the [interfacename]#FontIcon# interface. The normal pattern for implementing it
+is to implement an enumeration for all the symbols available in the font. See
+the implementation of [classname]#FontAwesome# for more details.
+
+You need a FontIcon API for the icons. In the following, we define a font icon
+using a normal sans-serif font built-in in the browser.
+
+
+----
+// Font icon definition with a single symbol
+public enum MyFontIcon implements FontIcon {
+    EURO(0x20AC);
+    
+    private int codepoint;
+    
+    MyFontIcon(int codepoint) {
+        this.codepoint = codepoint;
+    }
+    
+    @Override
+    public String getMIMEType() {
+        throw new UnsupportedOperationException(
+            FontIcon.class.getSimpleName()
+            + " should not be used where a MIME type is needed.");
+    }
+    
+    @Override
+    public String getFontFamily() {
+        return "sans-serif";
+    }
+    
+    @Override
+    public int getCodepoint() {
+        return codepoint;
+    }
+    
+    @Override
+    public String getHtml() {
+        return "<span class=\"v-icon\" style=\"font-family: " +
+                getFontFamily() + ";\">&#x" +
+                Integer.toHexString(codepoint) + ";</span>";
+    }
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.custom[on-line example, window="_blank"].
+
+Then you can use it as usual:
+
+
+----
+TextField name = new TextField("Amount");
+name.setIcon(MyFontIcon.EURO);
+layout.addComponent(name);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.fonticon.custom[on-line example, window="_blank"].
+
+You could make the implementation a class as well, instead of an enumeration, to
+allow other ways to specify the icons.
+
+endif::web[]
+
+
+
+
diff --git a/documentation/themes/themes-fonts.asciidoc b/documentation/themes/themes-fonts.asciidoc
new file mode 100644
index 0000000000..741fb00a72
--- /dev/null
+++ b/documentation/themes/themes-fonts.asciidoc
@@ -0,0 +1,85 @@
+---
+title: Custom Fonts
+order: 9
+layout: page
+---
+
+[[themes.fonts]]
+= Custom Fonts
+
+In addition to using the built-in fonts of the browser and the web fonts
+included in the Vaadin themes, you can use custom web fonts.
+
+[[themes.fonts.loading]]
+== Loading Local Fonts
+
+You can load locally served web fonts with the [literal]#++font++# mixin as
+follows:
+
+
+----
+@include font(MyFontFamily,
+              '../../mytheme/fonts/myfontfamily');
+----
+
+The statement must be given in the [filename]#styles.scss# file __outside__ the
+[literal]#++.mytheme {}++# block.
+
+The first parameter is the name of the font family, which is used to identify
+the font. If the font family name contains spaces, you need to use single or
+double quotes around the name.
+
+The second parameter is the base name of the font files without an extension,
+including a relative path. Notice that the path is relative to the base theme,
+where the mixin is defined, not the used theme. We recommend placing custom font
+files under a [filename]#fonts# folder in a theme.
+
+Not all browsers support any single font file format, so the base name is
+appended with [filename]#.ttf#, [filename]#.eot#, [filename]#.woff#, or
+[filename]#.svg# suffix for the font file suitable for a user's browser.
+
+
+[[themes.fonts.webfonts]]
+== Loading Web Fonts
+
+You can load externally served web fonts such as Google Fonts simply by
+specifying the loading stylesheet for the UI with the [classname]#@StyleSheet#
+annotation.
+
+For example, to load the "Cabin Sketch" font from Google Fonts:
+
+[subs="normal"]
+----
+@StyleSheet({"[replaceable]#http://fonts.googleapis.com/css?family=Cabin+Sketch#"})
+public class MyUI extends UI {
+    ...
+----
+ifdef::web[]
+Note that such web fonts served from a domain different from the Vaadin
+application currently link:https://dev.vaadin.com/ticket/16249[do not work
+together with] responsive themes, as described in
+<<dummy/../../../framework/themes/themes-responsive#themes.responsive,"Responsive
+Themes">>. The problem occurs only in Firefox. A SecurityError is shown in the
+debug window.
+endif::web[]
+
+
+[[themes.fonts.using]]
+== Using Custom Fonts
+
+After loaded, you can use a custom font, or actually font family, by its name in
+CSS and otherwise.
+
+
+----
+.mystyle {
+    font-family: MyFontFamily;
+}
+----
+
+Again, if the font family name contains spaces, you need to use single or double
+quotes around the name.
+
+
+
+
diff --git a/documentation/themes/themes-overview.asciidoc b/documentation/themes/themes-overview.asciidoc
new file mode 100644
index 0000000000..05005ab83b
--- /dev/null
+++ b/documentation/themes/themes-overview.asciidoc
@@ -0,0 +1,77 @@
+---
+title: Overview
+order: 1
+layout: page
+---
+
+[[themes.overview]]
+= Overview
+
+Vaadin separates the appearance of the user interface from its logic using
+__themes__. Themes can include Sass or CSS style sheets, custom HTML layouts,
+and any necessary graphics. Theme resources can also be accessed from
+application code as [classname]#ThemeResource# objects.
+
+Custom themes are placed under the [filename]#VAADIN/themes/# folder of the web
+application (under [filename]#WebContent# in Eclipse or
+[filename]#src/main/webapp# in Maven projects). This location is fixed -- the
+[filename]#VAADIN# folder contains static resources that are served by the
+Vaadin servlet. The servlet augments the files stored in the folder by resources
+found from corresponding [filename]#VAADIN# folders contained in JARs in the
+class path. For example, the built-in themes are stored in the
+[filename]#vaadin-themes.jar#.
+
+<<figure.themes.theme-contents>> illustrates the contents of a theme.
+
+[[figure.themes.theme-contents]]
+.Contents of a Theme
+image::img/theme-contents-hi.png[]
+
+The name of a theme folder defines the name of the theme. The name is used in
+the [literal]#++@Theme++# annotation that sets the theme. A theme must contain
+either a [filename]#styles.scss# for Sass themes, or [filename]#styles.css#
+stylesheet for plain CSS themes, but other contents have free naming. We
+recommend that you have the actual theme content in a SCSS file named after the
+theme, such as [filename]#mytheme.scss#, to make the names more unique.
+
+We also suggest a convention for naming the folders as [filename]#img# for
+images, [filename]#layouts# for custom layouts, and [filename]#css# for
+additional stylesheets.
+
+Custom themes need to extend a base theme, as described in
+<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and
+Using Themes">>. Copying and modifying an existing theme is also possible, but
+it is not recommended, as it may need more work to maintain if the modifications
+are small.
+
+You use a theme by specifying it with the [literal]#++@Theme++# annotation for
+the UI class of the application as follows:
+
+
+[source, java]
+----
+@Theme("mytheme")
+public class MyUI extends UI {
+    @Override
+    protected void init(VaadinRequest request) {
+        ...
+    }
+}
+----
+
+A theme can contain alternate styles for user interface components, which can be
+changed as needed.
+
+In addition to style sheets, a theme can contain HTML templates for custom
+layouts used with [classname]#CustomLayout#. See
+<<dummy/../../../framework/layout/layout-customlayout#layout.customlayout,"Custom
+Layouts">> for details.
+
+Resources provided in a theme can also be accessed using the
+[classname]#ThemeResource# class, as described in
+<<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme
+Resources">>. This allows displaying theme resources in component icons, in the
+[classname]#Image# component, and other such uses.
+
+
+
diff --git a/documentation/themes/themes-responsive.asciidoc b/documentation/themes/themes-responsive.asciidoc
new file mode 100644
index 0000000000..b4377f9b66
--- /dev/null
+++ b/documentation/themes/themes-responsive.asciidoc
@@ -0,0 +1,286 @@
+---
+title: Responsive Themes
+order: 10
+layout: page
+---
+
+[[themes.responsive]]
+= Responsive Themes
+
+((("[classname]#responsive# extension", id="term.themes.responsive", range="startofrange")))
+
+
+((("CSS selections")))
+((("extension")))
+Vaadin includes support for responsive design which enables size range
+conditions in CSS selectors, allowing conditional CSS rules that respond to size
+changes in the browser window on the client-side.
+
+ifdef::web[]
+See the link:https://vaadin.com/blog/-/blogs/3126636[Vaadin Blog article on
+Responsive design] for some additional
+information.
+endif::web[]
+
+You can use the [classname]#Responsive# extension to extend either a component,
+typically a layout, or the entire UI. You specify the component by the static
+[methodname]#makeResponsive()# method.
+
+
+----
+// Have some component with an appropriate style name
+Label c = new Label("Here be text");
+c.addStyleName("myresponsive");
+content.addComponent(c);
+        
+// Enable Responsive CSS selectors for the component
+Responsive.makeResponsive(c);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.basic[on-line example, window="_blank"].
+
+You can now use [literal]#++width-range++# and [literal]#++height-range++#
+conditions in CSS selectors as follows:
+
+
+----
+/* Basic settings for all sizes */
+.myresponsive {
+    padding: 5px;
+    line-height: 36pt;
+}
+    
+/* Small size */
+.myresponsive[width-range~="0-300px"] {
+    background: orange;
+    font-size: 16pt;
+}
+
+/* Medium size */
+.myresponsive[width-range~="301px-600px"] {
+    background: azure;
+    font-size: 24pt;
+}
+
+/* Anything bigger */
+.myresponsive[width-range~="601px-"] {
+    background: palegreen;
+    font-size: 36pt;
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.basic[on-line example, window="_blank"].
+
+You can have overlapping size ranges, in which case all the selectors matching
+the current size are enabled.
+
+ifdef::web[]
+Note that responsive themes currently
+link:https://dev.vaadin.com/ticket/16249[do not work together with] stylesheets
+or widget sets loaded from a different domain than the Vaadin application. Such
+resources must be loaded from the same domain as the application. The problem
+occurs only in Firefox. A SecurityError is shown in the debug window. The
+limitation concerns stylesheets such as for web fonts served from external
+sites, as described in
+<<dummy/../../../framework/themes/themes-fonts#themes.fonts.webfonts,"Loading
+Web Fonts">>.
+endif::web[]
+
+ifdef::web[]
+[[themes.responsive.wrap]]
+== Flexible Wrapping
+
+You can use the [classname]#CssLayout# to have automatic wrap-around when the
+components in the layout would go off right side of the layout. Components that
+wrap must, however, have either undefined or fixed width, and thereby can not
+utilize the full area of the screen. With the [classname]#Responsive# extension,
+you can have more flexible wrap-around that gives the component tiles maximum
+width.
+
+In the following, we have a text and image box, which are laid out horizontally
+with 50-50 sizing if the screen is wide enough, but wrap to a vertical layout if
+the screen is narrow.
+
+
+----
+CssLayout layout = new CssLayout();
+layout.setWidth("100%");
+layout.addStyleName("flexwrap");
+content.addComponent(layout);
+        
+// Enable Responsive CSS selectors for the layout
+Responsive.makeResponsive(layout);
+
+Label title = new Label("Space is big, really big");
+title.addStyleName("title");
+layout.addComponent(title);
+
+Label description = new Label("This is a " +
+    "long description of the image shown " +
+    "on the right or below, depending on the " +
+    "screen width. The text here could continue long.");
+description.addStyleName("itembox");
+description.setSizeUndefined();
+layout.addComponent(description);
+        
+Image image = new Image(null,
+        new ThemeResource("img/planets/Earth.jpg"));
+image.addStyleName("itembox");
+layout.addComponent(image);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.flexwrap[on-line example, window="_blank"].
+
+The SCSS could be as follows:
+
+
+----
+/* Various general settings */
+.flexwrap {
+    background: black;
+    color: white;
+
+    .title {
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 30px;
+        padding: 5px;
+    }
+    
+    .itembox {
+        white-space: normal;
+        vertical-align: top;
+    }
+    
+    .itembox.v-label {padding: 5px}
+}
+    
+.flexwrap[width-range~="0-499px"] {
+    .itembox {width: 100%}
+}
+    
+.flexwrap[width-range~="500px-"] {
+    .itembox {width: 50%}
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.flexwrap[on-line example, window="_blank"].
+
+The layout in the wide mode is shown in <<figure.theme.responsive.flexwrap>>.
+
+[[figure.theme.responsive.flexwrap]]
+.Flexible Wrapping
+image::img/addon-responsive-flexwrap.png[]
+
+You could also play with the [literal]#++display: block++# vs
+[literal]#++display: inline-block++# properties.
+
+Notice that, while the [classname]#Responsive# extension makes it possible to do
+various CSS trickery with component sizes, the normal rules for component and
+layout sizes apply, as described in
+<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
+Size">> and elsewhere, and you should always check the size behaviour of the
+components. In the above example, we set the label to have undefined width,
+which disables word wrap, so we had to re-enable it.
+
+endif::web[]
+
+ifdef::web[]
+[[themes.responsive.display]]
+== Toggling the Display Property
+
+((("display (CSS
+property)")))
+The [literal]#++display++# property allows especially powerful ways to offer
+radically different UIs for different screen sizes by enabling and disabling UI
+elements as needed. For example, you could disable some parts of the UI when the
+space gets too small, but bring forth navigation buttons that, when clicked, add
+component styles to switch to the hidden parts.
+
+In the following, we simply show alternative components based on screen width:
+
+
+----
+CssLayout layout = new CssLayout();
+layout.setWidth("100%");
+layout.addStyleName("toggledisplay");
+content.addComponent(layout);
+        
+// Enable Responsive CSS selectors for the layout
+Responsive.makeResponsive(layout);
+
+Label enoughspace =
+    new Label("This space is big, mindbogglingly big");
+enoughspace.addStyleName("enoughspace");
+layout.addComponent(enoughspace);
+        
+Label notenoughspace = new Label("Quite small space");
+notenoughspace.addStyleName("notenoughspace");
+layout.addComponent(notenoughspace);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.display[on-line example, window="_blank"].
+
+The SCSS could be as follows:
+
+
+----
+/* Common settings */
+.toggledisplay {
+    .enoughspace, .notenoughspace {
+        color: white;
+        padding: 5px;
+    }
+    
+    .notenoughspace { /* Really small */
+        background: red;
+        font-weight: normal;
+        font-size: 10px;
+        line-height: 15px;
+    }
+
+    .enoughspace { /* Really big */
+        background: darkgreen;
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 30px;
+    }
+}
+    
+/* Quite little space */
+.toggledisplay[width-range~="0-499px"] {
+    .enoughspace    {display: none}
+}
+    
+/* Plenty of space */
+.toggledisplay[width-range~="500px-"] {
+    .notenoughspace {display: none}
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#themes.responsive.display[on-line example, window="_blank"].
+
+endif::web[]
+
+ifdef::web[]
+[[themes.responsive.demos]]
+== Responsive Demos
+
+You can find a simple responsive demo at
+link:http://demo.vaadin.com/responsive/[demo.vaadin.com/responsive]. It
+demonstrates the flexible wrapping technique described in
+<<themes.responsive.wrap>>.
+
+The
+link:http://demo.vaadin.com/book-examples-vaadin7/book/#themes.responsive.basic[Book
+Examples] demo provides the examples given in this chapter, as well as some
+others.
+
+((("Parking
+demo")))
+((("TouchKit", "Parking
+demo")))
+The Parking demo for TouchKit, mentioned in
+<<dummy/../../../mobile/mobile-overview.asciidoc#mobile.overview,"Mobile
+Applications with TouchKit">>, uses a responsive theme to adapt to mobile
+devices with different screen sizes and when the screen orientation changes.
+
+endif::web[]
+
+(((range="endofrange", startref="term.themes.responsive")))
+
+
diff --git a/documentation/themes/themes-sass.asciidoc b/documentation/themes/themes-sass.asciidoc
new file mode 100644
index 0000000000..4b1f529de1
--- /dev/null
+++ b/documentation/themes/themes-sass.asciidoc
@@ -0,0 +1,156 @@
+---
+title: Syntactically Awesome Stylesheets (Sass)
+order: 3
+layout: page
+---
+
+[[themes.sass]]
+= Syntactically Awesome Stylesheets (Sass)
+
+Vaadin uses Sass for stylesheets. Sass is an extension of CSS3 that adds nested
+rules, variables, mixins, selector inheritance, and other features to CSS. Sass
+supports two formats for stylesheet: Vaadin themes are written in SCSS (
+[filename]#.scss#), which is a superset of CSS3, but Sass also allows a more
+concise indented format ( [filename]#.sass#).
+
+Sass can be used in two basic ways in Vaadin applications, either by compiling
+SCSS files to CSS or by doing the compilation on the fly. The latter way is
+possible if the development mode is enabled for the Vaadin servlet, as described
+in
+<<dummy/../../../framework/application/application-environment#application.environment.parameters,"Other
+Servlet Configuration Parameters">>.
+
+[[themes.sass.overview]]
+== Sass Overview
+
+[[themes.sass.overview.variables]]
+=== Variables
+
+Sass allows defining variables that can be used in the rules.
+
+
+[source, css]
+----
+$textcolor: blue;
+
+.v-button-caption {
+  color: $textcolor;
+}
+----
+
+The above rule would be compiled to CSS as:
+
+
+[source, css]
+----
+.v-button-caption {
+  color: blue;
+}
+----
+
+Also mixins can have variables as parameters, as explained later.
+
+
+[[themes.sass.overview.nesting]]
+=== Nesting
+
+Sass supports nested rules, which are compiled into inside-selectors. For
+example:
+
+
+[source, css]
+----
+.v-app {
+  background: yellow;
+  
+  .mybutton {
+    font-style: italic;
+    
+    .v-button-caption {
+      color: blue;
+    }
+  }
+}
+----
+
+is compiled as:
+
+
+[source, css]
+----
+.v-app {
+  background: yellow;
+}
+
+.v-app .mybutton {
+    font-style: italic;
+}
+
+.v-app .mybutton .v-button-caption {
+  color: blue;
+}
+----
+
+
+[[themes.sass.overview.mixins]]
+=== Mixins
+
+Mixins are rules that can be included in other rules. You define a mixin rule by
+prefixing it with the [literal]#++@mixin++# keyword and the name of the mixin.
+You can then use [literal]#++@include++# to apply it to another rule. You can
+also pass parameters to it, which are handled as local variables in the mixin.
+
+For example:
+
+
+[source, css]
+----
+@mixin mymixin {
+  background: yellow;
+}
+
+@mixin othermixin($param) {
+  margin: $param;
+}
+
+.v-button-caption {
+  @include mymixin;
+  @include othermixin(10px);
+}
+----
+
+The above SCSS would translated to the following CSS:
+
+
+[source, css]
+----
+.v-button-caption {
+  background: yellow;
+  margin: 10px;
+}
+----
+
+You can also have nested rules in a mixin, which makes them especially powerful.
+Mixing in rules is used when extending Vaadin themes, as described in
+<<dummy/../../../framework/themes/themes-creating#themes.creating.sass,"Sass
+Themes">>.
+
+Vaadin themes are defined as mixins to allow for certain uses, such as different
+themes for different portlets in a portal.
+
+
+
+[[themes.sass.basic]]
+== Sass Basics with Vaadin
+
+We are not going to give in-depth documentation of Sass and refer you to its
+excellent documentation at http://sass-lang.com/. In the following, we give just
+basic introduction to using it with Vaadin.
+
+You can create a new Sass-based theme with the Eclipse plugin, as described in
+<<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a
+Theme in Eclipse">>.
+
+
+
+
diff --git a/documentation/themes/themes-valo.asciidoc b/documentation/themes/themes-valo.asciidoc
new file mode 100644
index 0000000000..5ae5a1b37b
--- /dev/null
+++ b/documentation/themes/themes-valo.asciidoc
@@ -0,0 +1,440 @@
+---
+title: Valo Theme
+order: 7
+layout: page
+---
+
+[[themes.valo]]
+= Valo Theme
+
+Valo is the word for light in Finnish. The Valo theme incorporates the use of
+light in its logic, in how it handles shades and highlights. It creates lines,
+borders, highlights, and shadows adaptively according to a background color,
+always with contrasts pleasant to human visual perception. Auxiliary colors are
+computed using an algorithmic color theory to blend gently with the background.
+The static art is complemented with responsive animations.
+
+The true power of Valo lies in its configurability with parameters, functions,
+and Sass mixins. You can use the built-in definitions in your own themes or
+override the defaults. Detailed documentation of the available mixins,
+functions, and variables can be found in the Valo API documentation available at
+http://vaadin.com/valo.
+
+[[themes.valo.use]]
+== Basic Use
+
+Valo is used just like other themes. Its optional parameters must be given
+before the [literal]#++@import++# statement.
+
+Your project theme file, such as [filename]#mytheme.scss#, included from the
+[filename]#styles.scss# file, could be as follows:
+
+
+----
+// Modify the base color of the theme
+$v-background-color: hsl(200, 50%, 50%);
+
+// Import valo after setting the parameters
+@import "../valo/valo";
+
+.mythemename {
+  @include valo;
+
+  // Your theme's rules go here
+}
+----
+
+If you need to override mixins or function definitions in the valo theme, you
+must do that after the import statement, but before including the valo mixin.
+Also, with some configuration parameters, you can use variables defined in the
+theme. In this case, they need to be overridden after the import statement.
+
+
+[[themes.valo.variables]]
+== Common Settings
+
+In the following, we describe the optional parameters that control the visual
+appearance of the Valo theme. In addition to the ones given here, component
+styles have their own parameters, listed in the sections describing the
+components in the other chapters.
+
+[[themes.valo.variables.general]]
+=== General Settings
+
+$v-background-color(default:[literal]#++hsl(210, 0%, 98%)++#):: The background color is the main control parameter for the Valo theme and it is
+used for computing all other colors in the theme. If the color is dark (has low
+luminance), light foreground colors that give high contrast with the background
+are automatically used.
+
++
+You can specify the color in any way allowed in CSS: hexadecimal RGB color code,
+RGB/A value specified with [methodname]#rgb()# or [methodname]#rgba()#, HSL/A
+value specified with [methodname]#hsl()# or [methodname]#hsla()#. You can also
+use color names, but it should be avoided, as not all CSS color names are
+currently supported.
+
+$v-app-background-color(default:$v-background-color):: Background color of the UI's root element. You can specify the color in any way
+allowed in CSS.
+
+$v-app-loading-text(default:[literal]#++""++#):: A static text that is shown under the loading spinned while the client-side
+engine is being loaded and started. The text must be given in quotes. The text
+can not be localized currently.
+
+
++
+----
+$v-app-loading-text: "Loading Resources...";
+----
+$v-line-height(default:[literal]#++1.55++#):: Base line height for all widgets. It must be given a unitless number.
+
+
++
+----
+$v-line-height: 1.6;
+----
+
+
+
+[[themes.valo.variables.fonts]]
+=== Font Settings
+
+$v-font-size(default:[literal]#++16px++#):: Base font size. It should be specified in pixels.
+
+
++
+----
+$v-font-size: 18px;
+----
+$v-font-weight(default:[literal]#++300++#):: Font weight for normal fonts. The size should be given as a numeric value, not
+symbolic.
+
+
++
+----
+$v-font-weight: 400;
+----
+$v-font-color(default: computed):: Foreground text color, specified as any CSS color value. The default is computed
+from the background color so that it gives a high contrast with the background.
+
+$v-font-family(default:[literal]#++"Open Sans", sans-serif++#):: Font family and fallback fonts as a comma-separated list. Font names containing
+spaces must be quoted. The default font Open Sans is a web font included in the
+Valo theme. Other used Valo fonts must be specified in the list to enable them.
+See <<themes.valo.fonts>>.
+
+
++
+----
+$v-font-family: "Source Sans Pro", sans-serif;
+----
+$v-caption-font-size(default:[literal]#++round($v-font-size * 0.9)++#):: Font size for component captions. The value should be a pixel value.
+
+$v-caption-font-weight(default:[literal]#++max(400, $v-font-weight)++#):: Font weight for captions. It should be defined with a numeric value instead of
+symbolic.
+
+
+
+
+[[themes.valo.variables.layout]]
+=== Layout Settings
+
+
+++++
+<variablelist xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xl="http://www.w3.org/1999/xlink"><varlistentry><term><varname>$v-unit-size</varname> (default: <literal>round(2.3 * $v-font-size)</literal>)</term><listitem><para>
+                                This is the base size for various layout measures. It is
+                                directly used in some measures, such as button height and
+                                layout margins, while other measures are derived from
+                                it. The value must be specified in pixels, with a suitable
+                                range of 18-50.
+                            </para><programlisting>$v-unit-size: 40px;</programlisting></listitem></varlistentry><varlistentry><term><varname>$v-layout-margin-top</varname></term><term><varname>$v-layout-margin-right</varname></term><term><varname>$v-layout-margin-bottom</varname></term><term><varname>$v-layout-margin-left</varname> (default: <literal>$v-unit-size</literal>)</term><listitem><para>
+                                Layout margin sizes for all built-in layout components,
+                                when the margin is enabled with
+                                <methodname>setMargin()</methodname>, as described in
+                                <xref linkend="layout.settings.margins"/>.
+                            </para></listitem></varlistentry><varlistentry><term><varname>$v-layout-spacing-vertical</varname> and
+                            <varname>$v-layout-spacing-horizontal</varname> (default:
+                            <literal>round($v-unit-size/3)</literal>)</term><listitem><para>
+                                Amount of vertical or horizontal space when spacing is enabled
+                                for a layout with <methodname>setSpacing()</methodname>, as
+                                described in <xref linkend="layout.settings.spacing"/>.
+                            </para></listitem></varlistentry></variablelist>
+++++
+
+
+[[themes.valo.variables.component]]
+=== Component Features
+
+The following settings apply to various graphical features of some components.
+
+$v-border(default:[literal]#++1px solid (v-shade 0.7)++#):: Border specification for the components that have a border. The thickness
+measure must be specified in pixels. For the border color, you can specify any
+CSS color or one of the [literal]#++v-tint++#, [literal]#++v-shade++#, and
+[literal]#++v-tone++# keywords described later in this section.
+
+$v-border-radius(default:[literal]#++4px++#):: Corner radius for components that have a border. The measure must be specified
+in pixels.
+
+
++
+----
+$v-border-radius: 8px;
+----
+$v-gradient(default:[literal]#++v-linear 8%++#):: Color gradient style for components that have a gradient. The gradient style may
+use the following keywords: [literal]#++v-linear++# and
+[literal]#++v-linear-reverse++#. The opacity must be given as percentage between
+0% and 100%.
+
+
++
+----
+$v-gradient: v-linear 20%;
+----
+$v-bevel(default:[literal]#++inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade++#):: Inset shadow style to define how some components are "raised" from the
+background. The value follows the syntax of CSS box-shadow, and should be a list
+of insets. For the bevel color, you can specify any CSS color or one of the
+[literal]#++v-tint++#, [literal]#++v-shade++#, and [literal]#++v-tone++#
+keywords described later in this section.
+
++
+//TODO Check the meaning of v-tone
+$v-bevel-depth(default:[literal]#++30%++#):: Specifies the "depth" of the bevel shadow, as applied to one of the color
+keywords for the bevel style. The actual amount of tint, shade, or tone is
+computed from the depth.
+
+$v-shadow(default:[literal]#++0 2px 3px v-shade++#):: Default shadow style for all components. As with $v-bevel, the value follows the
+syntax of CSS box-shadow, but without the [literal]#++inset++#. For the shadow
+color, you can specify any CSS color or one of the [literal]#++v-tint++# or
+[literal]#++v-shade++# keywords described later in this section.
+
+$v-shadow-opacity(default:[literal]#++5%++#):: Specifies the opacity of the shadow, as applied to one of the color keywords for
+the shadow style. The actual amount of tint or shade is computed from the depth.
+
+$v-focus-style(default:[literal]#++0 0 0 2px rgba($v-focus-color, .5)++#):: Box-shadow specification for the field focus indicator. The space-separated
+values are the horizontal shadow position in pixels, vertical shadow position in
+pixels, blur distance in pixels, spread distance in pixels, and the color. The
+color can be any CSS color. You can only specify the color, in which case
+defaults for the position are used. [methodname]#rgba()# or [methodname]#hsla()#
+can be used to enable transparency.
+
++
+For example, the following creates a 2 pixels wide orange outline around the
+field:
+
+
++
+----
+$v-focus-style: 0 0 0 2px orange;
+----
+$v-focus-color(default:[literal]#++valo-focus-color()++#):: Color for the field focus indicator. The [methodname]#valo-focus-color()#
+function computes a high-contrast color from the context, which is usually the
+background color. The color can be any CSS color.
+
+$v-animations-enabled(default:[literal]#++true++#):: Specifies whether various CSS animations are used.
+
+$v-hover-styles-enabled(default:[literal]#++true++#):: Specifies whether various [literal]#++:hover++# styles are used for indicating
+that mouse pointer hovers over an element.
+
+$v-disabled-opacity(default:[literal]#++0.5++#):: Opacity of disabled components, as described in
+<<dummy/../../../framework/components/components-features#components.features.enabled,"Enabled">>.
+
+$v-selection-color(default:[literal]#++$v-focus-color++#):: Color for indicating selection in selection components.
+
+$v-default-field-width(default:[literal]#++$v-unit-size * 5++#):: Default width of certain field components, unless overridden with
+[methodname]#setWidth()#.
+
+$v-error-indicator-color(default:[literal]#++#ed473b++#):: Color of the component error indicator, as described in
+<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
+Indicator and Message">>.
+
+$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components, as described in
+<<dummy/../../../framework/components/components-fields#components.fields.field,"Field
+Interface">>.
+
+
+
+Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition
+to CSS colors, the following keywords:
+
+v-tint:: Lighter than the background color.
+
+v-shade:: Darker than the background color.
+
+v-tone:: Adaptive color specification: darker on light background and lighter on dark
+background. Not usable in $v-shadow.
+
+
+
+For example:
+
+
+----
+$v-border: 1px solid v-shade;
+----
+
+You can fine-tune the contrast by giving a weight parameter in parentheses:
+
+
+----
+$v-border: 1px solid (v-tint 2);
+----
+
+
+----
+$v-border: 1px solid (v-tone 0.5);
+----
+
+
+[[themes.valo.variables.optimization]]
+=== Theme Compilation and Optimization
+
+$v-relative-paths(default:[literal]#++true++#):: This flags specifies whether relative URL paths are relative to the currently
+parsed SCSS file or to the compilation root file, so that paths are correct for
+different resources. Vaadin theme compiler parses URL paths differently from the
+regular Sass compiler (Vaadin modifies relative URL paths). Use
+[literal]#++false++# for Ruby compiler and [literal]#++true++# for Vaadin Sass
+compiler.
+
+$v-included-components(default: component list):: Theme optimization parameter to specify the included component themes, as
+described in <<themes.valo.optimization>>.
+
+$v-included-additional-styles(default:[literal]#++$v-included-components++#):: Theme optimization parameter that lists the components for which the additional
+component stylenames should be included. See <<themes.valo.component>> for more
+details.
+
+
+
+
+
+[[themes.valo.mixins]]
+== Valo Mixins and Functions
+
+Valo uses Sass mixins and functions heavily to compute various theme features,
+such as colors and shades. Also, all component styles are mixins. You can use
+the built-in mixins or override them. For detailed documentation of the mixins
+and functions, please refer to the Valo API documentation available at
+http://vaadin.com/valo/api.
+
+
+[[themes.valo.fonts]]
+== Valo Fonts
+
+Valo includes the following custom fonts:
+
+* Open Sans
+* Source Sans Pro
+* Roboto
+* Lato
+* Lora
+
+The used fonts must be specified with the $v-font-family parameter for Valo, in
+a fallback order. A font family is used in decreasing order of preference, in
+case a font with higher preference is not available in the browser. You can
+specify any font families and generic families that browsers may support. In
+addition to the primary font family, you can use also others in your
+application. To enable using the fonts included in Valo, you need to list them
+in the variable.
+
+
+----
+$v-font-family: 'Open Sans', sans-serif, 'Source Sans Pro';
+----
+
+Above, we specify Open Sans as the preferred primary font, with any sans-serif
+font that the browser supports as a fallback. In addition, we include the Source
+Sans Pro as an auxiliary font that we can use in custom rules as follows:
+
+
+----
+.v-label pre {
+  font-family: 'Source Sans Pro', monospace;
+}
+----
+
+This would specify using the font in any [classname]#Label# component with the
+[literal]#++PREFORMATTED++# content mode.
+
+
+[[themes.valo.component]]
+== Component Styles
+
+Many components have component-specific styles to make them smaller, bigger, and
+so forth. You can specify the component styles with [methodname]#addStyleName()#
+using the constants defined in the [classname]#ValoTheme# enum.
+
+
+----
+table.addStyleName(ValoTheme.TABLE_COMPACT);
+----
+
+For a complete up-to-date list of component-specific styles, please refer to
+Vaadin API documentation on the [classname]#ValoTheme# enum. Some are also
+described in the component-specific styling sections.
+
+[[themes.valo.component.disabling]]
+=== Disabling Component Styles
+
+Component styles are optional, but all are enabled by default. They can be
+enabled on per-component basis with the $v-included-additional-styles parameter.
+It defaults to $v-included-components and can be customized in the same way, as
+described in <<themes.valo.optimization>>.
+
+
+[[themes.valo.component.parameters]]
+=== Configuration Parameters
+
+The following variables control some common component styles:
+
+$v-scaling-factor--tiny(default:[literal]#++0.75++#):: A scaling multiplier for [literal]#++TINY++# component styles.
+
+$v-scaling-factor--small(default:[literal]#++0.85++#):: A scaling multiplier for [literal]#++SMALL++# component styles.
+
+$v-scaling-factor--large(default:[literal]#++1.2++#):: A scaling multiplier for [literal]#++LARGE++# component styles.
+
+$v-scaling-factor--huge(default:[literal]#++1.6++#):: A scaling multiplier for [literal]#++HUGE++# component styles.
+
+
+
+
+
+[[themes.valo.optimization]]
+== Theme Optimization
+
+Valo theme allows optimizing the size of the compiled theme CSS by including the
+rules for only the components actually used in the application. The included
+component styles can be specified in the [literal]#++$v-included-components++#
+variable, which by default includes all components. The variable should include
+a comma-separated list of component names in lower-case letters. Likewise, you
+can specify which additional component styles, as described in
+<<themes.valo.component>>, should be included using the
+$v-included-additional-styles parameter and the same format. The list of
+additional styles defaults to $v-included-components.
+
+For example, if your UI contains just [classname]#VerticalLayout#,
+[classname]#TextField#, and [classname]#Button# components, you could define the
+variable as follows:
+
+
+----
+$v-included-components:
+    verticallayout,
+    textfield,
+    button;
+----
+
+You can use the [methodname]#remove()# function reversely to remove just some
+component themes from the standard selection.
+
+For example, with the following you can remove the theme definitions for the
+[classname]#Calendar# component:
+
+
+----
+$v-included-components: remove($v-included-components, calendar);
+----
+
+Note that in this case, you need to give the statement __after__ the
+[literal]#++@import++# statement for the Valo theme, because it overrides a
+variable by using its value that is defined in the theme.
+
+
+
+
author	Markus Koivisto <markus@vaadin.com>	2016-01-22 14:55:18 +0200
committer	Markus Koivisto <markus@vaadin.com>	2016-01-22 14:55:18 +0200
commit	99d6de546c74f0eed230ea8253dda6b85109d2e7 (patch)
tree	10fc21c557566fe3241e6e13499df18d80f8dcb2 /documentation/themes
parent	610736d9f373d4b37fd39ff8f90aabd13eab7926 (diff)
download	vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.tar.gz vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.zip