Merge branch 'CendioOssman-toolbar' into master

50 files changed, 3714 insertions, 1093 deletions

diff --git a/app/images/alt.png b/app/images/alt.png
deleted file mode 100644
index d42af7b..0000000
--- a/app/images/alt.png
+++ /dev/null
diff --git a/app/images/alt.svg b/app/images/alt.svg
new file mode 100644
index 0000000..e5bb461
--- /dev/null
+++ b/app/images/alt.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="alt.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 9.9560547,1042.3329 -2.9394531,0 -0.4638672,1.3281 -1.8896485,0 2.7001953,-7.29 2.241211,0 2.7001958,7.29 -1.889649,0 -0.4589843,-1.3281 z m -2.4707031,-1.3526 1.9970703,0 -0.9960938,-2.9003 -1.0009765,2.9003 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5340" />
+      <path
+         d="m 13.188477,1036.0634 1.748046,0 0,7.5976 -1.748046,0 0,-7.5976 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5342" />
+      <path
+         d="m 18.535156,1036.6395 0,1.5528 1.801758,0 0,1.25 -1.801758,0 0,2.3193 q 0,0.3809 0.151367,0.5176 0.151368,0.1318 0.600586,0.1318 l 0.898438,0 0,1.25 -1.499024,0 q -1.035156,0 -1.469726,-0.4297 -0.429688,-0.4345 -0.429688,-1.4697 l 0,-2.3193 -0.86914,0 0,-1.25 0.86914,0 0,-1.5528 1.748047,0 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5344" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/clipboard.png b/app/images/clipboard.png
deleted file mode 100644
index 24df33c..0000000
--- a/app/images/clipboard.png
+++ /dev/null
diff --git a/app/images/clipboard.svg b/app/images/clipboard.svg
new file mode 100644
index 0000000..79af275
--- /dev/null
+++ b/app/images/clipboard.svg
@@ -0,0 +1,106 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="clipboard.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="15.366606"
+     inkscape:cy="16.42981"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 9,6 6,6 C 5.4459889,6 5,6.4459889 5,7 l 0,13 c 0,0.554011 0.4459889,1 1,1 l 13,0 c 0.554011,0 1,-0.445989 1,-1 L 20,7 C 20,6.4459889 19.554011,6 19,6 l -3,0"
+       transform="translate(0,1027.3622)"
+       id="rect6083"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cssssssssc" />
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect6085"
+       width="7"
+       height="4"
+       x="9"
+       y="1031.3622"
+       ry="1.00002" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1038.8622 7.9999998,0"
+       id="path6087"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1041.8622 3.9999998,0"
+       id="path6089"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1044.8622 5.9999998,0"
+       id="path6091"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/connect.png b/app/images/connect.png
deleted file mode 100644
index 79e71ad..0000000
--- a/app/images/connect.png
+++ /dev/null
diff --git a/app/images/connect.svg b/app/images/connect.svg
new file mode 100644
index 0000000..56cde41
--- /dev/null
+++ b/app/images/connect.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="connect.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="37.14834"
+     inkscape:cy="1.9525926"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       id="g5103"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-729.15757,315.8823)">
+      <path
+         sodipodi:nodetypes="cssssc"
+         inkscape:connector-curvature="0"
+         id="rect5096"
+         d="m 11,1040.3622 -5,0 c -1.108,0 -2,-0.892 -2,-2 l 0,-4 c 0,-1.108 0.892,-2 2,-2 l 5,0"
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 14,1032.3622 5,0 c 1.108,0 2,0.892 2,2 l 0,4 c 0,1.108 -0.892,2 -2,2 l -5,0"
+         id="path5099"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cssssc" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5101"
+         d="m 9,1036.3622 7,0"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/ctrl.png b/app/images/ctrl.png
deleted file mode 100644
index a63b601..0000000
--- a/app/images/ctrl.png
+++ /dev/null
diff --git a/app/images/ctrl.svg b/app/images/ctrl.svg
new file mode 100644
index 0000000..856e939
--- /dev/null
+++ b/app/images/ctrl.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ctrl.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 9.1210938,1043.1898 q -0.5175782,0.2686 -1.0791016,0.4053 -0.5615235,0.1367 -1.171875,0.1367 -1.8212891,0 -2.8857422,-1.0156 -1.0644531,-1.0205 -1.0644531,-2.7637 0,-1.748 1.0644531,-2.7637 1.0644531,-1.0205 2.8857422,-1.0205 0.6103515,0 1.171875,0.1368 0.5615234,0.1367 1.0791016,0.4052 l 0,1.5088 q -0.522461,-0.3564 -1.0302735,-0.5224 -0.5078125,-0.1661 -1.0693359,-0.1661 -1.0058594,0 -1.5820313,0.6446 -0.5761719,0.6445 -0.5761719,1.7773 0,1.1279 0.5761719,1.7725 0.5761719,0.6445 1.5820313,0.6445 0.5615234,0 1.0693359,-0.166 0.5078125,-0.166 1.0302735,-0.5225 l 0,1.5088 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5370" />
+      <path
+         d="m 12.514648,1036.5687 0,1.5528 1.801758,0 0,1.25 -1.801758,0 0,2.3193 q 0,0.3809 0.151368,0.5176 0.151367,0.1318 0.600586,0.1318 l 0.898437,0 0,1.25 -1.499023,0 q -1.035157,0 -1.469727,-0.4297 -0.429687,-0.4345 -0.429687,-1.4697 l 0,-2.3193 -0.8691411,0 0,-1.25 0.8691411,0 0,-1.5528 1.748046,0 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5372" />
+      <path
+         d="m 19.453125,1039.6107 q -0.229492,-0.1074 -0.458984,-0.1562 -0.22461,-0.054 -0.454102,-0.054 -0.673828,0 -1.040039,0.4345 -0.361328,0.4297 -0.361328,1.2354 l 0,2.5195 -1.748047,0 0,-5.4687 1.748047,0 0,0.8984 q 0.336914,-0.5371 0.771484,-0.7813 0.439453,-0.249 1.049805,-0.249 0.08789,0 0.19043,0.01 0.102539,0 0.297851,0.029 l 0.0049,1.582 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5374" />
+      <path
+         d="m 20.332031,1035.9926 1.748047,0 0,7.5976 -1.748047,0 0,-7.5976 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5376" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/ctrlaltdel.png b/app/images/ctrlaltdel.png
deleted file mode 100644
index 31922e5..0000000
--- a/app/images/ctrlaltdel.png
+++ /dev/null
diff --git a/app/images/ctrlaltdel.svg b/app/images/ctrlaltdel.svg
new file mode 100644
index 0000000..d7744ea
--- /dev/null
+++ b/app/images/ctrlaltdel.svg
@@ -0,0 +1,100 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ctrlaltdel.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8"
+     inkscape:cx="11.135667"
+     inkscape:cy="16.407428"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5253"
+       width="5"
+       height="5.0000172"
+       x="16"
+       y="1031.3622"
+       ry="1.0000174" />
+    <rect
+       y="1043.3622"
+       x="4"
+       height="5.0000172"
+       width="5"
+       id="rect5255"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       ry="1.0000174" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5257"
+       width="5"
+       height="5.0000172"
+       x="13"
+       y="1043.3622"
+       ry="1.0000174" />
+  </g>
+</svg>
diff --git a/app/images/disconnect.png b/app/images/disconnect.png
deleted file mode 100644
index 8832f5e..0000000
--- a/app/images/disconnect.png
+++ /dev/null
diff --git a/app/images/disconnect.svg b/app/images/disconnect.svg
new file mode 100644
index 0000000..6be7d18
--- /dev/null
+++ b/app/images/disconnect.svg
@@ -0,0 +1,94 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="disconnect.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="25.05707"
+     inkscape:cy="11.594858"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       id="g5171"
+       transform="translate(-24.062499,-6.15775e-4)">
+      <path
+         id="path5110"
+         transform="translate(0,1027.3622)"
+         d="m 39.744141,3.4960938 c -0.769923,0 -1.539607,0.2915468 -2.121094,0.8730468 l -2.566406,2.5664063 1.414062,1.4140625 2.566406,-2.5664063 c 0.403974,-0.404 1.010089,-0.404 1.414063,0 l 2.828125,2.828125 c 0.40398,0.4039 0.403907,1.0101621 0,1.4140629 l -2.566406,2.566406 1.414062,1.414062 2.566406,-2.566406 c 1.163041,-1.1629 1.162968,-3.0791874 0,-4.2421874 L 41.865234,4.3691406 C 41.283747,3.7876406 40.514063,3.4960937 39.744141,3.4960938 Z M 39.017578,9.015625 a 1.0001,1.0001 0 0 0 -0.6875,0.3027344 l -0.445312,0.4453125 1.414062,1.4140621 0.445313,-0.445312 A 1.0001,1.0001 0 0 0 39.017578,9.015625 Z m -6.363281,0.7070312 a 1.0001,1.0001 0 0 0 -0.6875,0.3027348 L 28.431641,13.5625 c -1.163042,1.163 -1.16297,3.079187 0,4.242188 l 2.828125,2.828124 c 1.162974,1.163101 3.079213,1.163101 4.242187,0 l 3.535156,-3.535156 a 1.0001,1.0001 0 1 0 -1.414062,-1.414062 l -3.535156,3.535156 c -0.403974,0.404 -1.010089,0.404 -1.414063,0 l -2.828125,-2.828125 c -0.403981,-0.404 -0.403908,-1.010162 0,-1.414063 l 3.535156,-3.537109 A 1.0001,1.0001 0 0 0 32.654297,9.7226562 Z m 3.109375,2.1621098 -2.382813,2.384765 a 1.0001,1.0001 0 1 0 1.414063,1.414063 l 2.382812,-2.384766 -1.414062,-1.414062 z"
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         inkscape:connector-curvature="0" />
+      <rect
+         transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
+         y="752.29541"
+         x="-712.31262"
+         height="18.000017"
+         width="3"
+         id="rect5116"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/drag.png b/app/images/drag.png
deleted file mode 100644
index 433f896..0000000
--- a/app/images/drag.png
+++ /dev/null
diff --git a/app/images/drag.svg b/app/images/drag.svg
new file mode 100644
index 0000000..139caf9
--- /dev/null
+++ b/app/images/drag.svg
@@ -0,0 +1,76 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="drag.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="9.8789407"
+     inkscape:cy="9.5008608"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 7.039733,1049.3037 c -0.4309106,-0.1233 -0.7932634,-0.4631 -0.9705434,-0.9103 -0.04922,-0.1241 -0.057118,-0.2988 -0.071321,-1.5771 l -0.015972,-1.4375 -0.328125,-0.082 c -0.7668138,-0.1927 -1.1897046,-0.4275 -1.7031253,-0.9457 -0.4586773,-0.4629 -0.6804297,-0.8433 -0.867034,-1.4875 -0.067215,-0.232 -0.068001,-0.2642 -0.078682,-3.2188 -0.012078,-3.341 -0.020337,-3.2012 0.2099452,-3.5555 0.2246623,-0.3458 0.5798271,-0.5892 0.9667343,-0.6626 0.092506,-0.017 0.531898,-0.032 0.9764271,-0.032 l 0.8082347,0 1.157e-4,1.336 c 1.125e-4,1.2779 0.00281,1.3403 0.062214,1.4378 0.091785,0.1505 0.2357707,0.226 0.4314082,0.2261 0.285389,2e-4 0.454884,-0.1352 0.5058962,-0.4042 0.019355,-0.102 0.031616,-0.982 0.031616,-2.269 0,-1.9756 0.00357,-2.1138 0.059205,-2.2926 0.1645475,-0.5287 0.6307616,-0.9246 1.19078,-1.0113 0.8000572,-0.1238 1.5711277,0.4446 1.6860387,1.2429 0.01732,0.1203 0.03177,0.8248 0.03211,1.5657 6.19e-4,1.3449 7.22e-4,1.347 0.07093,1.4499 0.108355,0.1587 0.255268,0.2248 0.46917,0.2108 0.204069,-0.013 0.316116,-0.08 0.413642,-0.2453 0.06028,-0.1024 0.06307,-0.1778 0.07862,-2.1218 0.01462,-1.8283 0.02124,-2.0285 0.07121,-2.1549 0.260673,-0.659 0.934894,-1.0527 1.621129,-0.9465 0.640523,0.099 1.152269,0.6104 1.243187,1.2421 0.01827,0.1269 0.03175,0.9943 0.03211,2.0657 l 6.19e-4,1.8469 0.07031,0.103 c 0.108355,0.1587 0.255267,0.2248 0.46917,0.2108 0.204069,-0.013 0.316115,-0.08 0.413642,-0.2453 0.05951,-0.1011 0.06329,-0.1786 0.07907,-1.6218 0.01469,-1.3438 0.02277,-1.5314 0.07121,-1.6549 0.257975,-0.6576 0.934425,-1.0527 1.620676,-0.9465 0.640522,0.099 1.152269,0.6104 1.243186,1.2421 0.0186,0.1292 0.03179,1.0759 0.03222,2.3125 7.15e-4,2.0335 0.0025,2.0966 0.06283,2.1956 0.09178,0.1505 0.235771,0.226 0.431409,0.2261 0.285388,2e-4 0.454884,-0.1352 0.505897,-0.4042 0.01874,-0.099 0.03161,-0.8192 0.03161,-1.769 0,-1.4848 0.0043,-1.6163 0.0592,-1.7926 0.164548,-0.5287 0.630762,-0.9246 1.19078,-1.0113 0.800057,-0.1238 1.571128,0.4446 1.686039,1.2429 0.04318,0.2999 0.04372,9.1764 5.78e-4,9.4531 -0.04431,0.2841 -0.217814,0.6241 -0.420069,0.8232 -0.320102,0.315 -0.63307,0.4268 -1.194973,0.4268 l -0.35281,0 -2.51e-4,1.2734 c -1.25e-4,0.7046 -0.01439,1.3642 -0.03191,1.4766 -0.06665,0.4274 -0.372966,0.8704 -0.740031,1.0702 -0.349999,0.1905 0.01748,0.18 -6.242199,0.1776 -5.3622439,0 -5.7320152,-0.01 -5.9121592,-0.057 l 1.4e-5,0 z"
+       id="path4379"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/error.svg b/app/images/error.svg
new file mode 100644
index 0000000..6c47e8f
--- /dev/null
+++ b/app/images/error.svg
@@ -0,0 +1,81 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="error.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="13.274366"
+     inkscape:cy="14.078582"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 6.8222656 4.8027344 A 2.0002 2.0002 0 0 0 5.4296875 8.2363281 L 9.671875 12.480469 L 5.4296875 16.722656 A 2.0002 2.0002 0 1 0 8.2578125 19.550781 L 12.5 15.308594 L 16.742188 19.550781 A 2.0002 2.0002 0 1 0 19.570312 16.722656 L 15.328125 12.480469 L 19.570312 8.2363281 A 2.0002 2.0002 0 0 0 18.117188 4.8027344 A 2.0002 2.0002 0 0 0 16.742188 5.4082031 L 12.5 9.6503906 L 8.2578125 5.4082031 A 2.0002 2.0002 0 0 0 6.8222656 4.8027344 z "
+       transform="translate(0,1027.3622)"
+       id="path4155" />
+  </g>
+</svg>
diff --git a/app/images/esc.png b/app/images/esc.png
deleted file mode 100644
index ece5f7c..0000000
--- a/app/images/esc.png
+++ /dev/null
diff --git a/app/images/esc.svg b/app/images/esc.svg
new file mode 100644
index 0000000..830152b
--- /dev/null
+++ b/app/images/esc.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="esc.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="text5290"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 3.9331055,1036.1464 5.0732422,0 0,1.4209 -3.1933594,0 0,1.3574 3.0029297,0 0,1.4209 -3.0029297,0 0,1.6699 3.3007812,0 0,1.4209 -5.180664,0 0,-7.29 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5314" />
+      <path
+         d="m 14.963379,1038.1385 0,1.3282 q -0.561524,-0.2344 -1.083984,-0.3516 -0.522461,-0.1172 -0.986329,-0.1172 -0.498046,0 -0.742187,0.127 -0.239258,0.122 -0.239258,0.3808 0,0.21 0.180664,0.3223 0.185547,0.1123 0.65918,0.166 l 0.307617,0.044 q 1.342773,0.1709 1.806641,0.5615 0.463867,0.3906 0.463867,1.2256 0,0.874 -0.644531,1.3134 -0.644532,0.4395 -1.923829,0.4395 -0.541992,0 -1.123046,-0.088 -0.576172,-0.083 -1.186524,-0.2539 l 0,-1.3281 q 0.522461,0.2539 1.069336,0.3808 0.551758,0.127 1.118164,0.127 0.512695,0 0.771485,-0.1416 0.258789,-0.1416 0.258789,-0.4199 0,-0.2344 -0.180664,-0.3467 -0.175782,-0.1172 -0.708008,-0.1807 l -0.307617,-0.039 q -1.166993,-0.1465 -1.635743,-0.542 -0.46875,-0.3955 -0.46875,-1.2012 0,-0.8691 0.595703,-1.2891 0.595704,-0.4199 1.826172,-0.4199 0.483399,0 1.015625,0.073 0.532227,0.073 1.157227,0.2294 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5316" />
+      <path
+         d="m 21.066895,1038.1385 0,1.4258 q -0.356446,-0.2441 -0.717774,-0.3613 -0.356445,-0.1172 -0.742187,-0.1172 -0.732422,0 -1.142579,0.4297 -0.405273,0.4248 -0.405273,1.1914 0,0.7666 0.405273,1.1963 0.410157,0.4248 1.142579,0.4248 0.410156,0 0.776367,-0.1221 0.371094,-0.122 0.683594,-0.3613 l 0,1.4307 q -0.410157,0.1513 -0.834961,0.2246 -0.419922,0.078 -0.844727,0.078 -1.479492,0 -2.314453,-0.7568 -0.834961,-0.7618 -0.834961,-2.1143 0,-1.3525 0.834961,-2.1094 0.834961,-0.7617 2.314453,-0.7617 0.429688,0 0.844727,0.078 0.419921,0.073 0.834961,0.2246 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5318" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/fullscreen.png b/app/images/fullscreen.png
deleted file mode 100644
index f4fa0ce..0000000
--- a/app/images/fullscreen.png
+++ /dev/null
diff --git a/app/images/fullscreen.svg b/app/images/fullscreen.svg
new file mode 100644
index 0000000..29bd05d
--- /dev/null
+++ b/app/images/fullscreen.svg
@@ -0,0 +1,93 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="fullscreen.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="16.400723"
+     inkscape:cy="15.083758"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5006"
+       width="17"
+       height="17.000017"
+       x="4"
+       y="1031.3622"
+       ry="3.0000174" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 7.5,1044.8622 4,0 -1.5,-1.5 1.5,-1.5 -1,-1 -1.5,1.5 -1.5,-1.5 0,4 z"
+       id="path5017"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5025"
+       d="m 17.5,1034.8622 -4,0 1.5,1.5 -1.5,1.5 1,1 1.5,-1.5 1.5,1.5 0,-4 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/app/images/handle.svg b/app/images/handle.svg
new file mode 100644
index 0000000..4a7a126
--- /dev/null
+++ b/app/images/handle.svg
@@ -0,0 +1,82 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="5"
+   height="6"
+   viewBox="0 0 5 6"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="handle.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="1.3551778"
+     inkscape:cy="8.7800329"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1046.3622)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 4.0000803,1049.3622 -3,-2 0,4 z"
+       id="path4247"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/app/images/handle_bg.svg b/app/images/handle_bg.svg
new file mode 100644
index 0000000..b4c4d13
--- /dev/null
+++ b/app/images/handle_bg.svg
@@ -0,0 +1,172 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="20"
+   height="50"
+   viewBox="0 0 20 50"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="handle_bg.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="10.515997"
+     inkscape:cy="22.863737"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1002.3622)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4249"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1008.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1013.8622"
+       x="14.5"
+       height="1.0000174"
+       width="1"
+       id="rect4255"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       ry="1.7382812e-05"
+       y="1008.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4261"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4263"
+       width="1"
+       height="1.0000174"
+       x="9.5"
+       y="1013.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1039.8622"
+       x="14.5"
+       height="1.0000174"
+       width="1"
+       id="rect4265"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4267"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1044.8622"
+       ry="1.7382812e-05" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4269"
+       width="1"
+       height="1.0000174"
+       x="9.5"
+       y="1039.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1044.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4271"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4273"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1018.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1018.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4275"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4277"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1034.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1034.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4279"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/app/images/info.svg b/app/images/info.svg
new file mode 100644
index 0000000..21d268c
--- /dev/null
+++ b/app/images/info.svg
@@ -0,0 +1,87 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="info.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="13.516502"
+     inkscape:cy="12.319239"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4164"
+       cx="12"
+       cy="1032.3622"
+       r="2" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 12,1038.3622 0,9 2,0"
+       id="path4187"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/keyboard.png b/app/images/keyboard.png
deleted file mode 100644
index f797952..0000000
--- a/app/images/keyboard.png
+++ /dev/null
diff --git a/app/images/keyboard.svg b/app/images/keyboard.svg
new file mode 100644
index 0000000..137b350
--- /dev/null
+++ b/app/images/keyboard.svg
@@ -0,0 +1,88 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="keyboard.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/keyboard.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#717171"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="31.285341"
+     inkscape:cy="8.8028469"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 7,3 C 4.8012876,3 3,4.8013 3,7 3,11.166667 3,15.333333 3,19.5 3,20.8764 4.1236413,22 5.5,22 l 14,0 C 20.876358,22 22,20.8764 22,19.5 22,15.333333 22,11.166667 22,7 22,4.8013 20.198712,3 18,3 Z m 0,2 11,0 c 1.125307,0 2,0.8747 2,2 L 20,12 5,12 5,7 C 5,5.8747 5.8746931,5 7,5 Z M 6.5,14 C 6.777,14 7,14.223 7,14.5 7,14.777 6.777,15 6.5,15 6.223,15 6,14.777 6,14.5 6,14.223 6.223,14 6.5,14 Z m 2,0 C 8.777,14 9,14.223 9,14.5 9,14.777 8.777,15 8.5,15 8.223,15 8,14.777 8,14.5 8,14.223 8.223,14 8.5,14 Z m 2,0 C 10.777,14 11,14.223 11,14.5 11,14.777 10.777,15 10.5,15 10.223,15 10,14.777 10,14.5 10,14.223 10.223,14 10.5,14 Z m 2,0 C 12.777,14 13,14.223 13,14.5 13,14.777 12.777,15 12.5,15 12.223,15 12,14.777 12,14.5 12,14.223 12.223,14 12.5,14 Z m 2,0 C 14.777,14 15,14.223 15,14.5 15,14.777 14.777,15 14.5,15 14.223,15 14,14.777 14,14.5 14,14.223 14.223,14 14.5,14 Z m 2,0 C 16.777,14 17,14.223 17,14.5 17,14.777 16.777,15 16.5,15 16.223,15 16,14.777 16,14.5 16,14.223 16.223,14 16.5,14 Z m 2,0 C 18.777,14 19,14.223 19,14.5 19,14.777 18.777,15 18.5,15 18.223,15 18,14.777 18,14.5 18,14.223 18.223,14 18.5,14 Z m -13,2 C 5.777,16 6,16.223 6,16.5 6,16.777 5.777,17 5.5,17 5.223,17 5,16.777 5,16.5 5,16.223 5.223,16 5.5,16 Z m 2,0 C 7.777,16 8,16.223 8,16.5 8,16.777 7.777,17 7.5,17 7.223,17 7,16.777 7,16.5 7,16.223 7.223,16 7.5,16 Z m 2,0 C 9.777,16 10,16.223 10,16.5 10,16.777 9.777,17 9.5,17 9.223,17 9,16.777 9,16.5 9,16.223 9.223,16 9.5,16 Z m 2,0 C 11.777,16 12,16.223 12,16.5 12,16.777 11.777,17 11.5,17 11.223,17 11,16.777 11,16.5 11,16.223 11.223,16 11.5,16 Z m 2,0 C 13.777,16 14,16.223 14,16.5 14,16.777 13.777,17 13.5,17 13.223,17 13,16.777 13,16.5 13,16.223 13.223,16 13.5,16 Z m 2,0 C 15.777,16 16,16.223 16,16.5 16,16.777 15.777,17 15.5,17 15.223,17 15,16.777 15,16.5 15,16.223 15.223,16 15.5,16 Z m 2,0 C 17.777,16 18,16.223 18,16.5 18,16.777 17.777,17 17.5,17 17.223,17 17,16.777 17,16.5 17,16.223 17.223,16 17.5,16 Z m 2,0 C 19.777,16 20,16.223 20,16.5 20,16.777 19.777,17 19.5,17 19.223,17 19,16.777 19,16.5 19,16.223 19.223,16 19.5,16 Z M 6,18 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 -0.554,0 -1,-0.446 -1,-1 0,-0.554 0.446,-1 1,-1 z m 2.8261719,0 7.3476561,0 C 16.631643,18 17,18.368372 17,18.826172 l 0,0.347656 C 17,19.631628 16.631643,20 16.173828,20 L 8.8261719,20 C 8.3683573,20 8,19.631628 8,19.173828 L 8,18.826172 C 8,18.368372 8.3683573,18 8.8261719,18 Z m 10.1113281,0 0.125,0 C 19.581551,18 20,18.4184 20,18.9375 l 0,0.125 C 20,19.5816 19.581551,20 19.0625,20 l -0.125,0 C 18.418449,20 18,19.5816 18,19.0625 l 0,-0.125 C 18,18.4184 18.418449,18 18.9375,18 Z"
+       transform="translate(0,1027.3622)"
+       id="rect4160"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sccssccsssssccssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 12.499929,1033.8622 -2,2 1.500071,0 0,2 1,0 0,-2 1.499929,0 z"
+       id="path4150"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/app/images/mouse_left.png b/app/images/mouse_left.png
deleted file mode 100644
index 1de7a48..0000000
--- a/app/images/mouse_left.png
+++ /dev/null
diff --git a/app/images/mouse_left.svg b/app/images/mouse_left.svg
new file mode 100644
index 0000000..ce4cca4
--- /dev/null
+++ b/app/images/mouse_left.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_left.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_middle.png b/app/images/mouse_middle.png
deleted file mode 100644
index 81fbd9b..0000000
--- a/app/images/mouse_middle.png
+++ /dev/null
diff --git a/app/images/mouse_middle.svg b/app/images/mouse_middle.svg
new file mode 100644
index 0000000..6603425
--- /dev/null
+++ b/app/images/mouse_middle.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_middle.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_none.png b/app/images/mouse_none.png
deleted file mode 100644
index 93dbf57..0000000
--- a/app/images/mouse_none.png
+++ /dev/null
diff --git a/app/images/mouse_none.svg b/app/images/mouse_none.svg
new file mode 100644
index 0000000..3e0f838
--- /dev/null
+++ b/app/images/mouse_none.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_none.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="23.160825"
+     inkscape:cy="13.208262"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_right.png b/app/images/mouse_right.png
deleted file mode 100644
index 355b25d..0000000
--- a/app/images/mouse_right.png
+++ /dev/null
diff --git a/app/images/mouse_right.svg b/app/images/mouse_right.svg
new file mode 100644
index 0000000..f4bad76
--- /dev/null
+++ b/app/images/mouse_right.svg
@@ -0,0 +1,92 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_right.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/power.png b/app/images/power.png
deleted file mode 100644
index f68fd08..0000000
--- a/app/images/power.png
+++ /dev/null
diff --git a/app/images/power.svg b/app/images/power.svg
new file mode 100644
index 0000000..4925d3e
--- /dev/null
+++ b/app/images/power.svg
@@ -0,0 +1,87 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="power.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="9.3159849"
+     inkscape:cy="13.436208"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 9 6.8183594 C 6.3418164 8.1213032 4.5 10.849161 4.5 14 C 4.5 18.4065 8.0935666 22 12.5 22 C 16.906433 22 20.5 18.4065 20.5 14 C 20.5 10.849161 18.658184 8.1213032 16 6.8183594 L 16 9.125 C 17.514327 10.211757 18.5 11.984508 18.5 14 C 18.5 17.3256 15.825553 20 12.5 20 C 9.1744469 20 6.5 17.3256 6.5 14 C 6.5 11.984508 7.4856727 10.211757 9 9.125 L 9 6.8183594 z "
+       transform="translate(0,1027.3622)"
+       id="path6140" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 12.5,1031.8836 0,6.4786"
+       id="path6142"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/app/images/settings.png b/app/images/settings.png
deleted file mode 100644
index a43f5e1..0000000
--- a/app/images/settings.png
+++ /dev/null
diff --git a/app/images/settings.svg b/app/images/settings.svg
new file mode 100644
index 0000000..dbb2e80
--- /dev/null
+++ b/app/images/settings.svg
@@ -0,0 +1,76 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="settings.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="14.69683"
+     inkscape:cy="8.8039511"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 11 3 L 11 5.1601562 A 7.5 7.5 0 0 0 8.3671875 6.2460938 L 6.84375 4.7226562 L 4.7226562 6.84375 L 6.2480469 8.3691406 A 7.5 7.5 0 0 0 5.1523438 11 L 3 11 L 3 14 L 5.1601562 14 A 7.5 7.5 0 0 0 6.2460938 16.632812 L 4.7226562 18.15625 L 6.84375 20.277344 L 8.3691406 18.751953 A 7.5 7.5 0 0 0 11 19.847656 L 11 22 L 14 22 L 14 19.839844 A 7.5 7.5 0 0 0 16.632812 18.753906 L 18.15625 20.277344 L 20.277344 18.15625 L 18.751953 16.630859 A 7.5 7.5 0 0 0 19.847656 14 L 22 14 L 22 11 L 19.839844 11 A 7.5 7.5 0 0 0 18.753906 8.3671875 L 20.277344 6.84375 L 18.15625 4.7226562 L 16.630859 6.2480469 A 7.5 7.5 0 0 0 14 5.1523438 L 14 3 L 11 3 z M 12.5 10 A 2.5 2.5 0 0 1 15 12.5 A 2.5 2.5 0 0 1 12.5 15 A 2.5 2.5 0 0 1 10 12.5 A 2.5 2.5 0 0 1 12.5 10 z "
+       transform="translate(0,1027.3622)"
+       id="rect4967" />
+  </g>
+</svg>
diff --git a/app/images/tab.png b/app/images/tab.png
deleted file mode 100644
index 8413487..0000000
--- a/app/images/tab.png
+++ /dev/null
diff --git a/app/images/tab.svg b/app/images/tab.svg
new file mode 100644
index 0000000..1ccb322
--- /dev/null
+++ b/app/images/tab.svg
@@ -0,0 +1,86 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="tab.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="11.67335"
+     inkscape:cy="17.881696"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 3,1031.3622 0,8 2,0 0,-4 0,-4 -2,0 z m 2,4 4,4 0,-3 13,0 0,-2 -13,0 0,-3 -4,4 z"
+       id="rect5194"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path5211"
+       d="m 22,1048.3622 0,-8 -2,0 0,4 0,4 2,0 z m -2,-4 -4,-4 0,3 -13,0 0,2 13,0 0,3 4,-4 z"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/toggleextrakeys.png b/app/images/toggleextrakeys.png
deleted file mode 100644
index ad8e0a7..0000000
--- a/app/images/toggleextrakeys.png
+++ /dev/null
diff --git a/app/images/toggleextrakeys.svg b/app/images/toggleextrakeys.svg
new file mode 100644
index 0000000..b578c0d
--- /dev/null
+++ b/app/images/toggleextrakeys.svg
@@ -0,0 +1,90 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="extrakeys.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="15.234555"
+     inkscape:cy="9.9710826"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1031.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,8.9996 c 0,2.1987 1.8012876,4 4,4 l 9,0 c 2.198712,0 4,-1.8013 4,-4 l 0,-8.9996 c 0,-2.1987 -1.801288,-4 -4,-4 z m 0,2 9,0 c 1.125307,0 2,0.8747 2,2 l 0,7.0005 c 0,1.1253 -0.874693,2 -2,2 l -9,0 c -1.1253069,0 -2,-0.8747 -2,-2 l 0,-7.0005 c 0,-1.1253 0.8746931,-2 2,-2 z"
+       id="rect5006"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssssssssssssssssss" />
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text4167"
+       transform="matrix(0.96021948,0,0,0.96021948,0.18921715,41.80659)">
+      <path
+         d="m 14.292969,1040.6791 -2.939453,0 -0.463868,1.3281 -1.889648,0 2.700195,-7.29 2.241211,0 2.700196,7.29 -1.889649,0 -0.458984,-1.3281 z m -2.470703,-1.3526 1.99707,0 -0.996094,-2.9004 -1.000976,2.9004 z"
+         id="path4172"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/warning.svg b/app/images/warning.svg
new file mode 100644
index 0000000..7114f9b
--- /dev/null
+++ b/app/images/warning.svg
@@ -0,0 +1,81 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="warning.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="16.457343"
+     inkscape:cy="12.179552"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 12.513672 3.0019531 C 11.751609 2.9919531 11.052563 3.4242687 10.710938 4.1054688 L 3.2109375 19.105469 C 2.5461937 20.435369 3.5132277 21.9999 5 22 L 20 22 C 21.486772 21.9999 22.453806 20.435369 21.789062 19.105469 L 14.289062 4.1054688 C 13.951849 3.4330688 13.265888 3.0066531 12.513672 3.0019531 z M 12.478516 6.9804688 A 1.50015 1.50015 0 0 1 14 8.5 L 14 14.5 A 1.50015 1.50015 0 1 1 11 14.5 L 11 8.5 A 1.50015 1.50015 0 0 1 12.478516 6.9804688 z M 12.5 17 A 1.5 1.5 0 0 1 14 18.5 A 1.5 1.5 0 0 1 12.5 20 A 1.5 1.5 0 0 1 11 18.5 A 1.5 1.5 0 0 1 12.5 17 z "
+       transform="translate(0,1027.3622)"
+       id="path4208" />
+  </g>
+</svg>
diff --git a/app/styles/auto.css b/app/styles/auto.css
new file mode 100644
index 0000000..50f9a82
--- /dev/null
+++ b/app/styles/auto.css
@@ -0,0 +1,89 @@
+/*
+ * noVNC auto CSS
+ * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
+ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
+ */
+
+body {
+  margin:0;
+  padding:0;
+  font-family: Helvetica;
+  /*Background image with light grey curve.*/
+  background-color:#494949;
+  background-repeat:no-repeat;
+  background-position:right bottom;
+  height:100%;
+}
+
+html {
+  height:100%;
+}
+
+#noVNC_container {
+  display: table;
+  width:100%;
+  height:100%;
+  background-color:#313131;
+  border-bottom-right-radius: 800px 600px;
+  /*border-top-left-radius: 800px 600px;*/
+}
+
+#noVNC_status {
+  font-size: 12px;
+  padding-top: 4px;
+  height:32px;
+  text-align: center;
+  font-weight: bold;
+  color: #fff;
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  margin-left: 0px;
+}
+
+.noVNC_status_normal {
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+.noVNC_status_error {
+  background: #f04040; /* Old browsers */
+  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+.noVNC_status_warn {
+  background: #f0f040; /* Old browsers */
+  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+#noVNC_buttons {
+  white-space: nowrap;
+}
+
+/* Do not set width/height for VNC_canvas or incorrect
+ * scaling will occur. Canvas size depends on remote VNC
+ * settings and noVNC settings. */
+#noVNC_canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/app/styles/base.css b/app/styles/base.css
index 382234e..4431908 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -2,6 +2,7 @@
  * noVNC base CSS
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
@@ -21,362 +22,516 @@ html {
   height:100%;
 }
 
-#noVNC_controls ul {
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
+.noVNC_only_touch.noVNC_hidden {
+  display: none;
 }
-#noVNC_controls li {
-  padding-bottom:8px;
+
+/* ----------------------------------------
+ * Input Elements
+ * ----------------------------------------
+ */
+
+input[type=input], input[type=password], input:not([type]), textarea {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+}
+
+input[type=button], select {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
 }
 
-#noVNC_setting_host {
-  width:150px;
+input[type=button] {
+  padding-left: 20px;
+  padding-right: 20px;
 }
-#noVNC_setting_port {
-  width: 80px;
+
+option {
+  color: black;
+  background: white;
 }
-#noVNC_setting_password {
-  width: 150px;
+
+input[type=input]:focus, input[type=password]:focus,
+input:not([type]):focus, input[type=button]:focus,
+textarea:focus, select:focus {
+  box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
+  border-color: rgb(74, 144, 217);
+  outline: none;
 }
-#noVNC_setting_encrypt {
+
+input[type=button]::-moz-focus-inner {
+  border: none;
 }
-#noVNC_setting_path {
-  width: 100px;
+
+input[type=input]:disabled, input[type=password]:disabled,
+input:not([type]):disabled, input[type=button]:disabled,
+textarea:disabled, select:disabled {
+  color: rgb(128, 128, 128);
+  background: rgb(240, 240, 240);
 }
-#noVNC_connect_button {
-  width: 110px;
-  float:right;
+
+input[type=button]:active, select:active {
+  border-bottom-width: 1px;
+  margin-top: 3px;
 }
 
-#noVNC_buttons {
-  white-space: nowrap;
+:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), :root:not(.noVNC_touch) select:hover:not(:disabled) {
+  background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
 
-#noVNC_view_drag_button {
-  display: none;
+/* ----------------------------------------
+ * WebKit centering hacks
+ * ----------------------------------------
+ */
+
+.noVNC_center {
+  /*
+   * This is a workaround because webkit misrenders transforms and
+   * uses non-integer coordinates, resulting in blurry content.
+   * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
+   * the objects instead.
+   */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
-#noVNC_sendCtrlAltDel_button {
-  display: none;
+.noVNC_center > * {
+  pointer-events: auto;
+}
+.noVNC_vcenter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.noVNC_vcenter > * {
+  pointer-events: auto;
+}
+
+/* ----------------------------------------
+ * Control Bar
+ * ----------------------------------------
+ */
+
+#noVNC_control_bar_anchor {
+  /* The anchor is needed to get z-stacking to work */
+  position: fixed;
+  z-index: 2;
+
+  transition: 0.5s ease-in-out;
+
+  /* Edge misrenders animations wihthout this */
+  transform: translateX(0);
+}
+:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
+  opacity: 0.8;
 }
-#noVNC_fullscreen_button {
+
+#noVNC_control_bar {
+  position: relative;
+  /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
+  left: -80px;
+
+  transition: 0.5s ease-in-out;
+
+  background-color: rgb(110, 132, 163);
+  border-radius: 0 10px 10px 0;
+
+  /* The extra border is to get a proper shadow */
+  border-color: rgb(110, 132, 163);
+  border-style: solid;
+  border-width: 0 0 0 30px;
+}
+#noVNC_control_bar.noVNC_open {
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+  left: -30px;
+}
+
+#noVNC_control_bar_handle {
+  position: absolute;
+  right: -15px;
+  top: 0;
+  transform: translateY(35px);
+  width: 50px;
+  height: 50px;
+  z-index: -2;
+  cursor: pointer;
+  border-radius: 0 5px 5px 0;
+  background-color: rgb(83, 99, 122);
+  background-image: url("../images/handle_bg.svg");
+  background-repeat: no-repeat;
+  background-position: right;
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
+}
+#noVNC_control_bar_handle:after {
+  content: "";
+  transition: 0.5s ease-in-out;
+  background: url("../images/handle.svg");
+  position: absolute;
+  top: 22px; /* (50px-6px)/2 */
+  right: 5px;
+  width: 5px;
+  height: 6px;
+}
+#noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
+  transform: translateX(1px) rotate(180deg);
+}
+:root:not(.noVNC_connected) #noVNC_control_bar_handle {
   display: none;
 }
-#noVNC_xvp_buttons {
+#noVNC_control_bar_handle div {
+  position: absolute;
+  right: -35px;
+  top: 0;
+  width: 50px;
+  height: 50px;
+}
+:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
   display: none;
 }
-#noVNC_mobile_buttons {
+
+#noVNC_control_bar .noVNC_scroll {
+  max-height: 100vh; /* Chrome is buggy with 100% */
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 10px 0 5px;
+}
+
+/* General button style */
+.noVNC_button {
+  display: block;
+  padding: 4px 4px;
+  margin: 10px 0;
+  vertical-align: middle;
+  border:1px solid rgba(255, 255, 255, 0.2);
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+.noVNC_button.noVNC_selected {
+  border-color: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.5);
+}
+.noVNC_button:disabled {
+  opacity: 0.4;
+}
+.noVNC_button:focus {
+  outline: none;
+}
+.noVNC_button:active {
+  padding-top: 5px;
+  padding-bottom: 3px;
+}
+:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
+  border-color: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.2);
+}
+:root:not(.noVNC_touch) .noVNC_button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+.noVNC_button.noVNC_hidden {
   display: none;
 }
 
-#noVNC_extra_keys {
-  display: inline;
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px;
-  position: relative;
+/* Panels */
+.noVNC_panel {
+  transform: translateX(25px);
+
+  transition: 0.5s ease-in-out;
+
+  max-height: 100vh; /* Chrome is buggy with 100% */
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  visibility: hidden;
+  opacity: 0;
+
+  padding: 15px;
+
+  background: #fff;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  color: #000;
+  border: 2px solid #E0E0E0;
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+.noVNC_panel.noVNC_open {
+  visibility: visible;
+  opacity: 1;
+  transform: translateX(75px);
 }
 
-.noVNC_buttons_left {
-  float: left;
-  z-index: 1;
-  position: relative;
+.noVNC_panel hr {
+  border: none;
+  border-top: 1px solid rgb(192, 192, 192);
 }
 
-.noVNC_buttons_right {
-  float:right;
-  right: 0px;
-  z-index: 2;
-  position: absolute;
+.noVNC_panel label {
+  display: block;
 }
 
-#noVNC_status {
-  font-size: 12px;
-  padding-top: 4px;
-  height:32px;
-  text-align: center;
-  font-weight: bold;
-  color: #fff;
+.noVNC_panel .noVNC_heading {
+  background-color: rgb(110, 132, 163);
+  border-radius: 5px;
+  padding: 5px;
+  /* Compensate for padding in image */
+  padding-right: 8px;
+  color: white;
+  font-size: 20px;
+  margin-bottom: 10px;
+  white-space: nowrap;
+}
+.noVNC_panel .noVNC_heading img {
+  vertical-align: bottom;
 }
 
-#noVNC_settings_menu {
-  margin: 3px;
-  text-align: left;
+.noVNC_submit {
+  float: right;
 }
-#noVNC_settings_menu ul {
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
+
+:root:not(.noVNC_connected) #noVNC_view_drag_button {
+  display: none;
 }
 
-#noVNC_settings_apply {
-  float:right;
+/* noVNC Touch Device only buttons */
+:root:not(.noVNC_connected) #noVNC_mobile_buttons {
+  display: none;
+}
+:root:not(.noVNC_touch) #noVNC_mobile_buttons {
+  display: none;
 }
 
-#noVNC_container {
-  display: table;
-  width:100%;
-  height:100%;
-  background-color:#313131;
-  border-bottom-right-radius: 800px 600px;
-  /*border-top-left-radius: 800px 600px;*/
+#noVNC_keyboardinput {
+  width: 1px;
+  height: 1px;
+  background-color: #fff;
+  color: #fff;
+  border: 0;
+  position: relative;
+  left: -40px;
+  z-index: -1;
+  ime-mode: disabled;
 }
 
-#noVNC_screen {
+/* Extra manual keys */
+:root:not(.noVNC_connected) #noVNC_extra_keys {
   display: none;
-  position: absolute;
-  margin: 0px;
-  padding: 0px;
-  bottom: 0px;
-  top: 36px; /* the height of the control bar */
-  left: 0px;
-  right: 0px;
-  width: auto;
-  height: auto;
 }
 
-/* Do not set width/height for VNC_canvas or incorrect
- * scaling will occur. Canvas size depends on remote VNC
- * settings and noVNC settings. */
-#noVNC_canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
+#noVNC_modifiers {
+  background-color: rgb(92, 92, 92);
+  border: none;
+  padding: 0 10px;
 }
 
-#VNC_clipboard_clear_button {
-  float:right;
+/* XVP Shutdown/Reboot */
+:root:not(.noVNC_connected) #noVNC_xvp_button {
+  display: none;
 }
-#VNC_clipboard_text {
-  font-size: 11px;
+#noVNC_xvp {
+}
+#noVNC_xvp_buttons {
+  display: none;
 }
 
-#noVNC_clipboard_clear_button {
-  float:right;
+#noVNC_xvp input[type=button] {
+  width: 100%;
+}
+
+/* Clipboard */
+:root:not(.noVNC_connected) #noVNC_clipboard_button {
+  display: none;
+}
+#noVNC_clipboard {
+  /* Full screen, minus padding and left and right margins */
+  max-width: calc(100vw - 2*15px - 75px - 25px);
+}
+#noVNC_clipboard_text {
+  width: 500px;
+  max-width: 100%;
 }
 
-/*Bubble contents divs*/
+/* Settings */
 #noVNC_settings {
-  display:none;
-  margin-top:73px;
-  right:20px;
-  position:fixed;
+}
+#noVNC_settings ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+#noVNC_setting_path {
+  width: 100px;
 }
 
-#noVNC_controls {
-  display:none;
-  margin-top:73px;
-  right:12px;
-  position:fixed;
+/* Connection Controls */
+:root.noVNC_connected #noVNC_connect_controls_button {
+  display: none;
 }
-#noVNC_controls.top:after  {
-  right:15px;
+:root:not(.noVNC_connected) #noVNC_disconnect_button {
+  display: none;
+}
+#noVNC_connect_controls ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+#noVNC_setting_port {
+  width: 80px;
 }
 
-#noVNC_description {
-  display:none;
-  position:fixed;
+/* ----------------------------------------
+ * Status Dialog
+ * ----------------------------------------
+ */
 
-  margin-top:73px;
-  right:20px;
-  left:20px;
-  padding:15px;
-  color:#000;
-  background:#eee; /* default background for browsers without gradient support */
+#noVNC_status {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  transform: translateY(-100%);
 
-  border:2px solid #E0E0E0;
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-}
+  transition: 0.5s ease-in-out;
 
-#noVNC_popup_status {
-  display:none;
-  position: fixed;
-  z-index: 1;
+  visibility: hidden;
+  opacity: 0;
 
-  margin:15px;
-  margin-top:60px;
-  padding:15px;
-  width:auto;
+  padding: 5px;
 
-  text-align:center;
-  font-weight:bold;
-  word-wrap:break-word;
-  color:#fff;
-  background:rgba(0,0,0,0.65);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
 
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-}
+  line-height: 25px;
+  word-wrap: break-word;
+  color: #fff;
 
-#noVNC_xvp {
-  display:none;
-  margin-top:73px;
-  right:30px;
-  position:fixed;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 }
-#noVNC_xvp.top:after {
-  right:125px;
+#noVNC_status.noVNC_open {
+  transform: translateY(0);
+  visibility: visible;
+  opacity: 1;
 }
 
-#noVNC_clipboard {
-  display:none;
-  margin-top:73px;
-  right:30px;
-  position:fixed;
-}
-#noVNC_clipboard.top:after {
-  right:85px;
+#noVNC_status::before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
 }
 
-#noVNC_keyboardinput {
-  width:1px;
-  height:1px;
-  background-color:#fff;
-  color:#fff;
-  border:0;
-  position: relative;
-  left: -40px;
-  z-index: -1;
-  ime-mode: disabled;
+#noVNC_status.noVNC_status_normal {
+  background: rgba(128,128,128,0.9);
+}
+#noVNC_status.noVNC_status_normal::before {
+  content: url("../images/info.svg") " ";
+}
+#noVNC_status.noVNC_status_error {
+  background: rgba(200,55,55,0.9);
+}
+#noVNC_status.noVNC_status_error::before {
+  content: url("../images/error.svg") " ";
+}
+#noVNC_status.noVNC_status_warn {
+  background: rgba(180,180,30,0.9);
+}
+#noVNC_status.noVNC_status_warn::before {
+  content: url("../images/warning.svg") " ";
 }
 
-/*
- * Advanced Styling
+/* ----------------------------------------
+ * Password Dialog
+ * ----------------------------------------
  */
 
-.noVNC_status_normal {
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-.noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-.noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-
-/* Control bar */
-#noVNC_control_bar {
-  position:fixed;
-
-  display:block;
-  height:36px;
-  left:0;
-  top:0;
-  width:100%;
-  z-index:200;
+#noVNC_password_dlg {
+  transform: translateY(-50px);
+}
+#noVNC_password_dlg.noVNC_open {
+  transform: translateY(0);
+}
+#noVNC_password_dlg ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
 }
 
-.noVNC_status_button {
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #869dbc;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
-}
-
-.noVNC_status_button_selected {
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #4366a9;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  background: #779ced; /* Old browsers */
-  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
- /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
-}
-
-.noVNC_status_button:disabled {
-  opacity: 0.4;
+/* ----------------------------------------
+ * Main Area
+ * ----------------------------------------
+ */
+
+#noVNC_container {
+  display: table;
+  width: 100%;
+  height: 100%;
+  background-color: #313131;
+  border-bottom-right-radius: 800px 600px;
+  /*border-top-left-radius: 800px 600px;*/
 }
 
+/* HTML5 Canvas */
+#noVNC_screen {
+  position: absolute;
+  margin: 0px;
+  padding: 0px;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: auto;
+  height: auto;
+}
+:root:not(.noVNC_connected) #noVNC_screen {
+  display: none;
+}
 
-/*Settings Bubble*/
-.triangle-right {
-  position:relative;
-  padding:15px;
-  margin:1em 0 3em;
-  color:#fff;
-  background:#fff; /* default background for browsers without gradient support */
-  /* css3 */
-  /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
-  background:-moz-linear-gradient(#2e88c4, #075698);
-  background:-o-linear-gradient(#2e88c4, #075698);
-  background:linear-gradient(#2e88c4, #075698);*/
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-  color:#000;
-  border:2px solid #E0E0E0;
-}
-
-.triangle-right.top:after {
-  border-color: transparent #E0E0E0;
-  border-width: 20px 20px 0 0;
-  bottom: auto;
-  left: auto;
-  right: 50px;
-  top: -20px;
-}
-
-.triangle-right:after {
-  content:"";
-  position:absolute;
-  bottom:-20px; /* value = - border-top-width - border-bottom-width */
-  left:50px; /* controls horizontal position */
-  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
-  border-style:solid;
-  border-color:#E0E0E0 transparent;
-  /* reduce the damage in FF3.0 */
-  display:block;
-  width:0;
-}
-
-.triangle-right.top:after {
-  top:-40px; /* value = - border-top-width - border-bottom-width */
-  right:50px; /* controls horizontal position */
-  bottom:auto;
-  left:auto;
-  border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
-  border-color:transparent #E0E0E0;
+/* Do not set width/height for VNC_canvas or incorrect
+ * scaling will occur. Canvas size depends on remote VNC
+ * settings and noVNC settings. */
+#noVNC_canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /*Default noVNC logo.*/
@@ -389,13 +544,22 @@ html {
                    url('Orbitron700.ttf') format('truetype');
 }
 
-#noVNC_logo {
-  margin-top: 170px;
-  margin-left: 10px;
+.noVNC_logo {
   color:yellow;
   text-align:left;
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
+  font-size: 13px;
   line-height:90%;
+  text-shadow: 1px 1px 0 #000;
+}
+.noVNC_logo span{
+  color:green;
+}
+
+#noVNC_logo {
+  margin-top: 60px;
+  margin-left: 60px;
+  font-size: 180px;
   text-shadow:
        5px 5px 0 #000,
       -1px -1px 0 #000,
@@ -403,10 +567,8 @@ html {
       -1px 1px 0 #000,
        1px 1px 0 #000;
 }
-
-
-#noVNC_logo span{
-  color:green;
+:root.noVNC_connected #noVNC_logo {
+  display: none;
 }
 
 /* ----------------------------------------
@@ -414,113 +576,19 @@ html {
  * ----------------------------------------
  */
 
-
-.noVNC_status_button {
-  font-size: 12px;
-}
-
-#noVNC_clipboard_text {
-  width: 500px;
-}
-
-#noVNC_logo {
-  font-size: 180px;
-}
-
-.noVNC_buttons_left {
-  padding-left: 10px;
-}
-
-.noVNC_buttons_right {
-  padding-right: 10px;
-}
-
-#noVNC_status {
-  z-index: 0;
-  position: absolute;
-  width: 100%;
-  margin-left: 0px;
-}
-
-#noVNC_toggleExtraKeys_button { display: none; }
-#noVNC_toggleCtrl_button { display: inline; }
-#noVNC_toggleAlt_button {  display: inline; }
-#noVNC_sendTab_button { display: inline; }
-#noVNC_sendEsc_button { display: inline; }
-
-/* left-align the status text on lower resolutions */
-@media screen and (max-width: 800px){
-  #noVNC_status {
-    z-index: 1;
-    position: relative;
-    width: auto;
-    float: left;
-    margin-left: 4px;
-  }
-}
-
 @media screen and (max-width: 640px){
-  #noVNC_clipboard_text {
-    width: 410px;
-  }
   #noVNC_logo {
     font-size: 150px;
   }
-  .noVNC_status_button {
-    font-size: 10px;
-  }
-  .noVNC_buttons_left {
-    padding-left: 0px;
-  }
-  .noVNC_buttons_right {
-    padding-right: 0px;
-  }
-  /* collapse the extra keys on lower resolutions */
-  #noVNC_toggleExtraKeys_button {
-    display: inline;
-  }
-  #noVNC_toggleCtrl_button {
-    display: none;
-    position: absolute;
-    top: 30px;
-    left: 0px;
-  }
-  #noVNC_toggleAlt_button {
-    display: none;
-    position: absolute;
-    top: 65px;
-    left: 0px;
-  }
-  #noVNC_sendTab_button {
-    display: none;
-    position: absolute;
-    top: 100px;
-    left: 0px;
-  }
-  #noVNC_sendEsc_button {
-    display: none;
-    position: absolute;
-    top: 135px;
-    left: 0px;
-  }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {
-  #noVNC_clipboard_text {
-    width: 250px;
-  }
   #noVNC_logo {
     font-size: 110px;
   }
 }
 
 @media screen and (max-width: 320px) {
-  .noVNC_status_button {
-    font-size: 9px;
-  }
-  #noVNC_clipboard_text {
-    width: 220px;
-  }
   #noVNC_logo {
     font-size: 90px;
   }
diff --git a/app/styles/black.css b/app/styles/black.css
index 5c4558d..178fa10 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -6,66 +6,16 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-#noVNC_keyboardinput {
-  background-color:#000;
-}
-
-.noVNC_status_normal {
-  background: #4c4c4c; /* Old browsers */
-  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-.noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f04040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-.noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f0f040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-
-.triangle-right {
+.noVNC_panel {
   border:2px solid #fff;
   background:#000;
   color:#fff;
 }
 
-.noVNC_status_button {
-  font-size: 12px;
-  vertical-align: middle;
-  border:1px solid #4c4c4c;
-
-  background: #4c4c4c; /* Old browsers */
-  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
+  background: #4c4c4c;
 }
 
-.noVNC_status_button_selected {
-  background: #9dd53a; /* Old browsers */
-  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+.noVNC_button.noVNC_selected {
+  background: #9dd53a;
 }
diff --git a/app/styles/blue.css b/app/styles/blue.css
index 4ab53bd..a38ede1 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -6,59 +6,12 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-.noVNC_status_normal {
-  background-color:#04073d;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(10,15,79)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(10,15,79) 54%,
-    rgb(4,7,61) 50%
-  );
-}
-.noVNC_status_error {
-  background-color:#f04040;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(240,64,64)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(4,7,61) 54%,
-    rgb(249,64,64) 50%
-  );
-}
-.noVNC_status_warn {
-  background-color:#f0f040;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(240,240,64)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(4,7,61) 54%,
-    rgb(240,240,64) 50%
-  );
-}
-
-.triangle-right {
+.noVNC_panel {
   border:2px solid #fff;
   background:#04073d;
   color:#fff;
 }
 
-#noVNC_keyboardinput {
-  background-color:#04073d;
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
+  background: #080F80;
 }
-
diff --git a/app/ui.js b/app/ui.js
index 78d397d..cfcfe1c 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -2,6 +2,7 @@
  * noVNC: HTML5 VNC client
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -38,14 +39,16 @@ var UI;
         rfb_state: 'loaded',
 
         resizeTimeout: null,
-        popupStatusTimeout: null,
+        statusTimeout: null,
         hideKeyboardTimeout: null,
+        idleControlbarTimeout: null,
+        closeControlbarTimeout: null,
 
-        settingsOpen: false,
-        connSettingsOpen: false,
-        clipboardOpen: false,
+        controlbarGrabbed: false,
+        controlbarDrag: false,
+        controlbarMouseDownClientY: 0,
+        controlbarMouseDownOffsetY: 0,
         keyboardVisible: false,
-        extraKeysVisible: false,
 
         isTouchDevice: false,
         isSafari: false,
@@ -53,9 +56,6 @@ var UI;
         lastKeyboardinput: null,
         defaultKeyboardinputLen: 100,
 
-        ctrlOn: false,
-        altOn: false,
-
         // Setup rfb object, load settings from browser storage, then call
         // UI.init to setup the UI/menus
         load: function(callback) {
@@ -64,8 +64,60 @@ var UI;
 
         // Render default UI and initialize settings menu
         start: function(callback) {
+
+            // Setup global variables first
             UI.isTouchDevice = 'ontouchstart' in document.documentElement;
+            UI.isSafari = (navigator.userAgent.indexOf('Safari') !== -1 &&
+                           navigator.userAgent.indexOf('Chrome') === -1);
+
+            UI.initSettings();
+
+            // Adapt the interface for touch screen devices
+            if (UI.isTouchDevice) {
+                document.documentElement.classList.add("noVNC_touch");
+                // Remove the address bar
+                setTimeout(function() { window.scrollTo(0, 1); }, 100);
+                UI.forceSetting('clip', true);
+            } else {
+                UI.initSetting('clip', false);
+            }
+
+            // Setup and initialize event handlers
+            UI.setupWindowEvents();
+            UI.setupFullscreen();
+            UI.addControlbarHandlers();
+            UI.addTouchSpecificHandlers();
+            UI.addExtraKeysHandlers();
+            UI.addXvpHandlers();
+            UI.addConnectionControlHandlers();
+            UI.addClipboardHandlers();
+            UI.addSettingsHandlers();
+
+            // Show the connect panel on first load unless autoconnecting
+            if (!autoconnect) {
+                UI.openConnectPanel();
+            }
+
+            UI.updateViewClip();
 
+            UI.updateVisualState();
+
+            document.getElementById('noVNC_setting_host').focus();
+
+            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
+            if (autoconnect === 'true' || autoconnect == '1') {
+                autoconnect = true;
+                UI.connect();
+            } else {
+                autoconnect = false;
+            }
+
+            if (typeof callback === "function") {
+                callback(UI.rfb);
+            }
+        },
+
+        initSettings: function() {
             // Stylesheet selection dropdown
             var sheet = WebUtil.selectStylesheet();
             var sheets = WebUtil.getStylesheets();
@@ -114,44 +166,20 @@ var UI;
             UI.initSetting('path', 'websockify');
             UI.initSetting('repeaterID', '');
             UI.initSetting('token', '');
+        },
 
-            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
-            if (autoconnect === 'true' || autoconnect == '1') {
-                autoconnect = true;
-                UI.connect();
-            } else {
-                autoconnect = false;
-            }
-
-            UI.updateVisualState();
-
-            document.getElementById('noVNC_setting_host').focus();
-
-            // Show mouse selector buttons on touch screen devices
-            if (UI.isTouchDevice) {
-                // Show mobile buttons
-                document.getElementById('noVNC_mobile_buttons').style.display = "inline";
-                UI.setMouseButton();
-                // Remove the address bar
-                setTimeout(function() { window.scrollTo(0, 1); }, 100);
-                UI.forceSetting('clip', true);
-            } else {
-                UI.initSetting('clip', false);
-            }
-
-            UI.setViewClip();
-            UI.setBarPosition();
-
-            window.addEventListener('resize', function () {
+        setupWindowEvents: function() {
+            window.addEventListener( 'resize', function () {
                 UI.applyResizeMode();
-                UI.setViewClip();
+                UI.updateViewClip();
                 UI.updateViewDrag();
-                UI.setBarPosition();
             } );
 
-            UI.isSafari = (navigator.userAgent.indexOf('Safari') != -1 &&
-                           navigator.userAgent.indexOf('Chrome') == -1);
+            document.getElementById("noVNC_status")
+                .addEventListener('click', UI.hideStatus);
+        },
 
+        setupFullscreen: function() {
             // Only show the button if fullscreen is properly supported
             // * Safari doesn't support alphanumerical input while in fullscreen
             if (!UI.isSafari &&
@@ -159,44 +187,152 @@ var UI;
                  document.documentElement.mozRequestFullScreen ||
                  document.documentElement.webkitRequestFullscreen ||
                  document.body.msRequestFullscreen)) {
-                document.getElementById('noVNC_fullscreen_button').style.display = "inline";
-                window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
+                document.getElementById('noVNC_fullscreen_button')
+                    .classList.remove("noVNC_hidden");
+                UI.addFullscreenHandlers();
             }
+        },
+
+        addControlbarHandlers: function() {
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousemove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mouseup', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousedown', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('keypress', UI.activateControlbar);
+
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousedown', UI.keepControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('keypress', UI.keepControlbar);
+
+            document.getElementById("noVNC_view_drag_button")
+                .addEventListener('click', UI.toggleViewDrag);
+
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mousedown', UI.controlbarHandleMouseDown);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mouseup', UI.controlbarHandleMouseUp);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mousemove', UI.dragControlbarHandle);
+            // resize events aren't available for elements
+            window.addEventListener('resize', UI.updateControlbarHandle);
+        },
+
+        addTouchSpecificHandlers: function() {
+            document.getElementById("noVNC_mouse_button0")
+                .addEventListener('click', function () { UI.setMouseButton(1); });
+            document.getElementById("noVNC_mouse_button1")
+                .addEventListener('click', function () { UI.setMouseButton(2); });
+            document.getElementById("noVNC_mouse_button2")
+                .addEventListener('click', function () { UI.setMouseButton(4); });
+            document.getElementById("noVNC_mouse_button4")
+                .addEventListener('click', function () { UI.setMouseButton(0); });
+            document.getElementById("noVNC_keyboard_button")
+                .addEventListener('click', UI.toggleVirtualKeyboard);
+
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('input', UI.keyInput);
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('blur', UI.onblurVirtualKeyboard);
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('submit', function () { return false; });
+
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchstart', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchmove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchend', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('input', UI.activateControlbar);
+
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchstart', UI.keepControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('input', UI.keepControlbar);
+
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchstart', UI.controlbarHandleMouseDown);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchend', UI.controlbarHandleMouseUp);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchmove', UI.dragControlbarHandle);
 
             window.addEventListener('load', UI.keyboardinputReset);
+        },
 
-            // While connected we want to display a confirmation dialogue
-            // if the user tries to leave the page
-            window.addEventListener('beforeunload', function (e) {
-                if (UI.rfb && UI.rfb_state === 'normal') {
-                    var msg = "You are currently connected.";
-                    e.returnValue = msg;
-                    return msg;
-                } else {
-                    return void 0; // To prevent the dialogue when disconnected
-                }
-            });
+        addExtraKeysHandlers: function() {
+            document.getElementById("noVNC_toggle_extra_keys_button")
+                .addEventListener('click', UI.toggleExtraKeys);
+            document.getElementById("noVNC_toggle_ctrl_button")
+                .addEventListener('click', UI.toggleCtrl);
+            document.getElementById("noVNC_toggle_alt_button")
+                .addEventListener('click', UI.toggleAlt);
+            document.getElementById("noVNC_send_tab_button")
+                .addEventListener('click', UI.sendTab);
+            document.getElementById("noVNC_send_esc_button")
+                .addEventListener('click', UI.sendEsc);
+            document.getElementById("noVNC_send_ctrl_alt_del_button")
+                .addEventListener('click', UI.sendCtrlAltDel);
+        },
 
-            // Show description by default when hosted at for kanaka.github.com
-            if (location.host === "kanaka.github.io") {
-                // Open the description dialog
-                document.getElementById('noVNC_description').style.display = "block";
-            } else {
-                // Show the connect panel on first load unless autoconnecting
-                if (autoconnect === UI.connSettingsOpen) {
-                    UI.toggleConnectPanel();
-                }
-            }
+        addXvpHandlers: function() {
+            document.getElementById("noVNC_xvp_shutdown_button")
+                .addEventListener('click', function() { UI.rfb.xvpShutdown(); });
+            document.getElementById("noVNC_xvp_reboot_button")
+                .addEventListener('click', function() { UI.rfb.xvpReboot(); });
+            document.getElementById("noVNC_xvp_reset_button")
+                .addEventListener('click', function() { UI.rfb.xvpReset(); });
+            document.getElementById("noVNC_xvp_button")
+                .addEventListener('click', UI.toggleXvpPanel);
+        },
 
-            // Add mouse event click/focus/blur event handlers to the UI
-            UI.addMouseHandlers();
+        addConnectionControlHandlers: function() {
+            document.getElementById("noVNC_connect_controls_button")
+                .addEventListener('click', UI.toggleConnectPanel);
+            document.getElementById("noVNC_disconnect_button")
+                .addEventListener('click', UI.disconnect);
+            document.getElementById("noVNC_connect_button")
+                .addEventListener('click', UI.connect);
 
-            if (typeof callback === "function") {
-                callback(UI.rfb);
-            }
+            document.getElementById("noVNC_password_button")
+                .addEventListener('click', UI.setPassword);
+        },
+
+        addClipboardHandlers: function() {
+            document.getElementById("noVNC_clipboard_button")
+                .addEventListener('click', UI.toggleClipboardPanel);
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('focus', UI.displayBlur);
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('blur', UI.displayFocus);
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('change', UI.clipboardSend);
+            document.getElementById("noVNC_clipboard_clear_button")
+                .addEventListener('click', UI.clipboardClear);
+        },
+
+        addSettingsHandlers: function() {
+            document.getElementById("noVNC_settings_button")
+                .addEventListener('click', UI.toggleSettingsPanel);
+            document.getElementById("noVNC_settings_apply")
+                .addEventListener('click', UI.settingsApply);
+
+            document.getElementById("noVNC_setting_resize")
+                .addEventListener('change', UI.enableDisableViewClip);
+        },
+
+        addFullscreenHandlers: function() {
+            document.getElementById("noVNC_fullscreen_button")
+                .addEventListener('click', UI.toggleFullscreen);
+
+            window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
         },
 
         initRFB: function() {
@@ -215,53 +351,6 @@ var UI;
             }
         },
 
-        addMouseHandlers: function() {
-            // Setup interface handlers that can't be inline
-            document.getElementById("noVNC_view_drag_button").onclick = UI.toggleViewDrag;
-            document.getElementById("noVNC_mouse_button0").onclick = function () { UI.setMouseButton(1); };
-            document.getElementById("noVNC_mouse_button1").onclick = function () { UI.setMouseButton(2); };
-            document.getElementById("noVNC_mouse_button2").onclick = function () { UI.setMouseButton(4); };
-            document.getElementById("noVNC_mouse_button4").onclick = function () { UI.setMouseButton(0); };
-            document.getElementById("noVNC_keyboard_button").onclick = UI.showKeyboard;
-
-            document.getElementById("noVNC_keyboardinput").oninput = UI.keyInput;
-            document.getElementById("noVNC_keyboardinput").onblur = UI.hideKeyboard;
-            document.getElementById("noVNC_keyboardinput").onsubmit = function () { return false; };
-
-            document.getElementById("noVNC_toggleExtraKeys_button").onclick = UI.toggleExtraKeys;
-            document.getElementById("noVNC_toggleCtrl_button").onclick = UI.toggleCtrl;
-            document.getElementById("noVNC_toggleAlt_button").onclick = UI.toggleAlt;
-            document.getElementById("noVNC_sendTab_button").onclick = UI.sendTab;
-            document.getElementById("noVNC_sendEsc_button").onclick = UI.sendEsc;
-
-            document.getElementById("noVNC_sendCtrlAltDel_button").onclick = UI.sendCtrlAltDel;
-            document.getElementById("noVNC_xvpShutdown_button").onclick = function() { UI.rfb.xvpShutdown(); },
-            document.getElementById("noVNC_xvpReboot_button").onclick = function() { UI.rfb.xvpReboot(); },
-            document.getElementById("noVNC_xvpReset_button").onclick = function() { UI.rfb.xvpReset(); },
-            document.getElementById("noVNC_status").onclick = UI.popupStatus;
-            document.getElementById("noVNC_popup_status").onclick = UI.closePopup;
-            document.getElementById("noVNC_toggleXvp_button").onclick = UI.toggleXvpPanel;
-            document.getElementById("noVNC_clipboard_button").onclick = UI.toggleClipboardPanel;
-            document.getElementById("noVNC_fullscreen_button").onclick = UI.toggleFullscreen;
-            document.getElementById("noVNC_settings_button").onclick = UI.toggleSettingsPanel;
-            document.getElementById("noVNC_connectPanel_button").onclick = UI.toggleConnectPanel;
-            document.getElementById("noVNC_disconnect_button").onclick = UI.disconnect;
-            document.getElementById("noVNC_description_button").onclick = UI.toggleConnectPanel;
-
-            document.getElementById("noVNC_clipboard_text").onfocus = UI.displayBlur;
-            document.getElementById("noVNC_clipboard_text").onblur = UI.displayFocus;
-            document.getElementById("noVNC_clipboard_text").onchange = UI.clipboardSend;
-            document.getElementById("noVNC_clipboard_clear_button").onclick = UI.clipboardClear;
-
-            document.getElementById("noVNC_settings_menu").onmouseover = UI.displayBlur;
-            document.getElementById("noVNC_settings_menu").onmouseover = UI.displayFocus;
-            document.getElementById("noVNC_settings_apply").onclick = UI.settingsApply;
-
-            document.getElementById("noVNC_connect_button").onclick = UI.connect;
-
-            document.getElementById("noVNC_setting_resize").onchange = UI.enableDisableViewClip;
-        },
-
 /* ------^-------
  *     /INIT
  * ==============
@@ -270,39 +359,33 @@ var UI;
 
         updateState: function(rfb, state, oldstate, msg) {
             UI.rfb_state = state;
-            var klass;
-            switch (state) {
-                case 'failed':
-                case 'fatal':
-                    klass = "noVNC_status_error";
-                    break;
-                case 'normal':
-                    klass = "noVNC_status_normal";
-                    break;
-                case 'disconnected':
-                    document.getElementById('noVNC_logo').style.display = "block";
-                    document.getElementById('noVNC_screen').style.display = "none";
-                    /* falls through */
-                case 'loaded':
-                    klass = "noVNC_status_normal";
-                    break;
-                case 'password':
-                    UI.toggleConnectPanel();
-
-                    document.getElementById('noVNC_connect_button').value = "Send Password";
-                    document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
-                    document.getElementById('noVNC_setting_password').focus();
-
-                    klass = "noVNC_status_warn";
-                    break;
-                default:
-                    klass = "noVNC_status_warn";
-                    break;
-            }
 
             if (typeof(msg) !== 'undefined') {
-                document.getElementById('noVNC_control_bar').setAttribute("class", klass);
-                document.getElementById('noVNC_status').innerHTML = msg;
+                switch (state) {
+                    case 'failed':
+                    case 'fatal':
+                        // zero means no timeout
+                        UI.showStatus(msg, 'error', 0);
+                        break;
+                    case 'normal':
+                        /* falls through */
+                    case 'disconnected':
+                    case 'loaded':
+                        UI.showStatus(msg, 'normal');
+                        break;
+                    case 'password':
+                        document.getElementById('noVNC_password_dlg')
+                            .classList.add('noVNC_open');
+                        setTimeout(function () {
+                                document.getElementById(('noVNC_password_input').focus());
+                            }, 100);
+
+                        UI.showStatus(msg, 'warn');
+                        break;
+                    default:
+                        UI.showStatus(msg, 'warn');
+                        break;
+                }
             }
 
             UI.updateVisualState();
@@ -330,68 +413,213 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
-                UI.setViewClip();
+                document.documentElement.classList.add("noVNC_connected");
+                UI.updateViewClip();
                 UI.setMouseButton(1);
-                document.getElementById('noVNC_clipboard_button').style.display = "inline";
-                document.getElementById('noVNC_keyboard_button').style.display = "inline";
-                document.getElementById('noVNC_extra_keys').style.display = "";
-                document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline";
+
+                // Hide the controlbar after 2 seconds
+                UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
             } else {
-                UI.setMouseButton();
-                document.getElementById('noVNC_clipboard_button').style.display = "none";
-                document.getElementById('noVNC_keyboard_button').style.display = "none";
-                document.getElementById('noVNC_extra_keys').style.display = "none";
-                document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "none";
+                document.documentElement.classList.remove("noVNC_connected");
                 UI.updateXvpButton(0);
             }
 
             // State change disables viewport dragging.
             // It is enabled (toggled) by direct click on the button
-            UI.updateViewDrag(false);
+            UI.setViewDrag(false);
+
+            // State change also closes the password dialog
+            document.getElementById('noVNC_password_dlg')
+                .classList.remove('noVNC_open');
 
             switch (UI.rfb_state) {
                 case 'fatal':
                 case 'failed':
                 case 'disconnected':
-                    document.getElementById('noVNC_connectPanel_button').style.display = "";
-                    document.getElementById('noVNC_disconnect_button').style.display = "none";
-                    UI.connSettingsOpen = false;
-                    UI.toggleConnectPanel();
+                    UI.openConnectPanel();
                     break;
                 case 'loaded':
-                    document.getElementById('noVNC_connectPanel_button').style.display = "";
-                    document.getElementById('noVNC_disconnect_button').style.display = "none";
                     break;
                 default:
-                    document.getElementById('noVNC_connectPanel_button').style.display = "none";
-                    document.getElementById('noVNC_disconnect_button').style.display = "";
                     break;
             }
 
             //Util.Debug("<< updateVisualState");
         },
 
-        popupStatus: function(text) {
-            var psp = document.getElementById('noVNC_popup_status');
+        showStatus: function(text, status_type, time) {
+            var statusElem = document.getElementById('noVNC_status');
+
+            clearTimeout(UI.statusTimeout);
 
-            clearTimeout(UI.popupStatusTimeout);
+            if (typeof status_type === 'undefined') {
+                status_type = 'normal';
+            }
+
+            statusElem.classList.remove("noVNC_status_normal",
+                                        "noVNC_status_warn",
+                                        "noVNC_status_error");
 
-            if (typeof text === 'string') {
-                psp.innerHTML = text;
+            switch (status_type) {
+                case 'warning':
+                case 'warn':
+                    statusElem.classList.add("noVNC_status_warn");
+                    break;
+                case 'error':
+                    statusElem.classList.add("noVNC_status_error");
+                    break;
+                case 'normal':
+                case 'info':
+                default:
+                    statusElem.classList.add("noVNC_status_normal");
+                    break;
+            }
+
+            statusElem.innerHTML = text;
+            statusElem.classList.add("noVNC_open");
+
+            // If no time was specified, show the status for 1.5 seconds
+            if (typeof time === 'undefined') {
+                time = 1500;
+            }
+
+            // A specified time of zero means no timeout
+            if (time != 0) {
+                UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
+            }
+        },
+
+        hideStatus: function() {
+            clearTimeout(UI.statusTimeout);
+            document.getElementById('noVNC_status').classList.remove("noVNC_open");
+        },
+
+        activateControlbar: function(event) {
+            clearTimeout(UI.idleControlbarTimeout);
+            // We manipulate the anchor instead of the actual control
+            // bar in order to avoid creating new a stacking group
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.remove("noVNC_idle");
+            UI.idleControlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
+        },
+
+        idleControlbar: function() {
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.add("noVNC_idle");
+        },
+
+        keepControlbar: function() {
+            clearTimeout(UI.closeControlbarTimeout);
+        },
+
+        openControlbar: function() {
+            document.getElementById('noVNC_control_bar')
+                .classList.add("noVNC_open");
+        },
+
+        closeControlbar: function() {
+            UI.closeAllPanels();
+            document.getElementById('noVNC_control_bar')
+                .classList.remove("noVNC_open");
+        },
+
+        toggleControlbar: function() {
+            if (document.getElementById('noVNC_control_bar')
+                .classList.contains("noVNC_open")) {
+                UI.closeControlbar();
             } else {
-                psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
+                UI.openControlbar();
+            }
+        },
+
+        dragControlbarHandle: function (e) {
+            if (!UI.controlbarGrabbed) return;
+
+            var ptr = Util.getPointerEvent(e);
+
+            if (!UI.controlbarDrag) {
+                // The goal is to trigger on a certain physical width, the
+                // devicePixelRatio brings us a bit closer but is not optimal.
+                var dragThreshold = 10 * (window.devicePixelRatio || 1);
+                var dragDistance = Math.abs(ptr.clientY - UI.controlbarMouseDownClientY);
+
+                if (dragDistance < dragThreshold) return;
+
+                UI.controlbarDrag = true;
             }
-            psp.style.display = "block";
-            psp.style.left = window.innerWidth/2 -
-                parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
 
-            // Show the popup for a maximum of 1.5 seconds
-            UI.popupStatusTimeout = setTimeout(UI.closePopup, 1500);
+            var eventY = ptr.clientY - UI.controlbarMouseDownOffsetY;
+
+            UI.moveControlbarHandle(eventY);
+
+            e.preventDefault();
+            e.stopPropagation();
         },
 
-        closePopup: function() {
-            clearTimeout(UI.popupStatusTimeout);
-            document.getElementById('noVNC_popup_status').style.display = "none";
+        // Move the handle but don't allow any position outside the bounds
+        moveControlbarHandle: function (posY) {
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var handleHeight = Util.getPosition(handle).height;
+            var controlbar = document.getElementById("noVNC_control_bar");
+            var controlbarBounds = Util.getPosition(controlbar);
+            var controlbarTop = controlbarBounds.y;
+            var controlbarBottom = controlbarBounds.y + controlbarBounds.height;
+            var margin = 10;
+
+            var viewportY = posY;
+
+            // Refuse coordinates outside the control bar
+            if (viewportY < controlbarTop + margin) {
+                viewportY = controlbarTop + margin;
+            } else if (viewportY > controlbarBottom - handleHeight - margin) {
+                viewportY = controlbarBottom - handleHeight - margin;
+            }
+
+            // Corner case: control bar too small for stable position
+            if (controlbarBounds.height < (handleHeight + margin * 2)) {
+                viewportY = controlbarTop + (controlbarBounds.height - handleHeight) / 2;
+            }
+
+            var relativeY = viewportY - controlbarTop;
+            handle.style.transform = "translateY(" + relativeY + "px)";
+        },
+
+        updateControlbarHandle: function () {
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var pos = Util.getPosition(handle);
+            UI.moveControlbarHandle(pos.y);
+        },
+
+        controlbarHandleMouseUp: function(e) {
+            if ((e.type == "mouseup") && (e.button != 0))
+                return;
+
+            // mouseup and mousedown on the same place toggles the controlbar
+            if (UI.controlbarGrabbed && !UI.controlbarDrag) {
+                UI.toggleControlbar();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            UI.controlbarGrabbed = false;
+        },
+
+        controlbarHandleMouseDown: function(e) {
+            if ((e.type == "mousedown") && (e.button != 0))
+                return;
+
+            var ptr = Util.getPointerEvent(e);
+
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var bounds = handle.getBoundingClientRect();
+
+            WebUtil.setCapture(handle);
+            UI.controlbarGrabbed = true;
+            UI.controlbarDrag = false;
+
+            UI.controlbarMouseDownClientY = ptr.clientY;
+            UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
+            e.preventDefault();
+            e.stopPropagation();
         },
 
 /* ------^-------
@@ -505,67 +733,75 @@ var UI;
             // Settings with immediate (non-connected related) effect
             WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
             WebUtil.init_logging(UI.getSetting('logging'));
-            UI.setViewClip();
+            UI.updateViewClip();
             UI.updateViewDrag();
             //Util.Debug("<< settingsApply");
         },
 
-        // Open menu
-        openSettingsMenu: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
+/* ------^-------
+ *   /SETTINGS
+ * ==============
+ *    PANELS
+ * ------v------*/
+
+        closeAllPanels: function() {
+            UI.closeSettingsPanel();
+            UI.closeXvpPanel();
+            UI.closeClipboardPanel();
+            UI.closeConnectPanel();
+            UI.closeExtraKeys();
+        },
+
+/* ------^-------
+ *   /PANELS
+ * ==============
+ * SETTINGS (panel)
+ * ------v------*/
+
+        openSettingsPanel: function() {
+            UI.closeAllPanels();
+            UI.openControlbar();
+
+            UI.updateSetting('encrypt');
+            UI.updateSetting('true_color');
+            if (Util.browserSupportsCursorURIs()) {
+                UI.updateSetting('cursor');
+            } else {
+                UI.updateSetting('cursor', !UI.isTouchDevice);
+                document.getElementById('noVNC_setting_cursor').disabled = true;
             }
-            document.getElementById('noVNC_settings').style.display = "block";
-            document.getElementById('noVNC_settings_button').className = "noVNC_status_button_selected";
-            UI.settingsOpen = true;
+            UI.updateSetting('clip');
+            UI.updateSetting('resize');
+            UI.updateSetting('shared');
+            UI.updateSetting('view_only');
+            UI.updateSetting('path');
+            UI.updateSetting('repeaterID');
+            UI.updateSetting('stylesheet');
+            UI.updateSetting('logging');
+
+            document.getElementById('noVNC_settings')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_settings_button')
+                .classList.add("noVNC_selected");
         },
 
-        // Close menu (without applying settings)
-        closeSettingsMenu: function() {
-            document.getElementById('noVNC_settings').style.display = "none";
-            document.getElementById('noVNC_settings_button').className = "noVNC_status_button";
-            UI.settingsOpen = false;
+        closeSettingsPanel: function() {
+            document.getElementById('noVNC_settings')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_settings_button')
+                .classList.remove("noVNC_selected");
         },
 
         // Toggle the settings menu:
         //   On open, settings are refreshed from saved cookies.
         //   On close, settings are applied
         toggleSettingsPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
-            if (UI.settingsOpen) {
+            if (document.getElementById('noVNC_settings')
+                .classList.contains("noVNC_open")) {
                 UI.settingsApply();
-                UI.closeSettingsMenu();
+                UI.closeSettingsPanel();
             } else {
-                UI.updateSetting('encrypt');
-                UI.updateSetting('true_color');
-                if (Util.browserSupportsCursorURIs()) {
-                    UI.updateSetting('cursor');
-                } else {
-                    UI.updateSetting('cursor', !UI.isTouchDevice);
-                    document.getElementById('noVNC_setting_cursor').disabled = true;
-                }
-                UI.updateSetting('clip');
-                UI.updateSetting('resize');
-                UI.updateSetting('shared');
-                UI.updateSetting('view_only');
-                UI.updateSetting('path');
-                UI.updateSetting('repeaterID');
-                UI.updateSetting('stylesheet');
-                UI.updateSetting('logging');
-
-                UI.openSettingsMenu();
+                UI.openSettingsPanel();
             }
         },
 
@@ -575,45 +811,42 @@ var UI;
  *      XVP
  * ------v------*/
 
-        // Show the XVP panel
+        openXvpPanel: function() {
+            UI.closeAllPanels();
+            UI.openControlbar();
+
+            document.getElementById('noVNC_xvp')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_xvp_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeXvpPanel: function() {
+            document.getElementById('noVNC_xvp')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_xvp_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleXvpPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
-            // Close settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Toggle XVP panel
-            if (UI.xvpOpen === true) {
-                document.getElementById('noVNC_xvp').style.display = "none";
-                document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button";
-                UI.xvpOpen = false;
+            if (document.getElementById('noVNC_xvp')
+                .classList.contains("noVNC_open")) {
+                UI.closeXvpPanel();
             } else {
-                document.getElementById('noVNC_xvp').style.display = "block";
-                document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button_selected";
-                UI.xvpOpen = true;
+                UI.openXvpPanel();
             }
         },
 
         // Disable/enable XVP button
         updateXvpButton: function(ver) {
             if (ver >= 1) {
-                document.getElementById('noVNC_toggleXvp_button').style.display = 'inline';
+                document.getElementById('noVNC_xvp_button')
+                    .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_toggleXvp_button').style.display = 'none';
+                document.getElementById('noVNC_xvp_button')
+                    .classList.add("noVNC_hidden");
                 // Close XVP panel if open
-                if (UI.xvpOpen === true) {
-                    UI.toggleXvpPanel();
-                }
+                UI.closeXvpPanel();
             }
         },
 
@@ -623,32 +856,29 @@ var UI;
  *   CLIPBOARD
  * ------v------*/
 
-        // Show the clipboard panel
+        openClipboardPanel: function() {
+            UI.closeAllPanels();
+            UI.openControlbar();
+
+            document.getElementById('noVNC_clipboard')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_clipboard_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeClipboardPanel: function() {
+            document.getElementById('noVNC_clipboard')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_clipboard_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleClipboardPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
-            // Close settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
-            }
-            // Toggle Clipboard Panel
-            if (UI.clipboardOpen === true) {
-                document.getElementById('noVNC_clipboard').style.display = "none";
-                document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button";
-                UI.clipboardOpen = false;
+            if (document.getElementById('noVNC_clipboard')
+                .classList.contains("noVNC_open")) {
+                UI.closeClipboardPanel();
             } else {
-                document.getElementById('noVNC_clipboard').style.display = "block";
-                document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button_selected";
-                UI.clipboardOpen = true;
+                UI.openClipboardPanel();
             }
         },
 
@@ -676,45 +906,41 @@ var UI;
  *  CONNECTION
  * ------v------*/
 
-        // Show the connection settings panel/menu
-        toggleConnectPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
-            // Close connection settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button";
-            }
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
-            }
+        openConnectPanel: function() {
+            UI.closeAllPanels();
+            UI.openControlbar();
+
+            document.getElementById('noVNC_connect_controls')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_connect_controls_button')
+                .classList.add("noVNC_selected");
 
-            // Toggle Connection Panel
-            if (UI.connSettingsOpen === true) {
-                document.getElementById('noVNC_controls').style.display = "none";
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button";
-                UI.connSettingsOpen = false;
-                UI.saveSetting('host');
-                UI.saveSetting('port');
-                UI.saveSetting('token');
-                //UI.saveSetting('password');
+            document.getElementById('noVNC_setting_host').focus();
+        },
+
+        closeConnectPanel: function() {
+            document.getElementById('noVNC_connect_controls')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_connect_controls_button')
+                .classList.remove("noVNC_selected");
+
+            UI.saveSetting('host');
+            UI.saveSetting('port');
+            UI.saveSetting('token');
+            //UI.saveSetting('password');
+        },
+
+        toggleConnectPanel: function() {
+            if (document.getElementById('noVNC_connect_controls')
+                .classList.contains("noVNC_open")) {
+                UI.closeConnectPanel();
             } else {
-                document.getElementById('noVNC_controls').style.display = "block";
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button_selected";
-                UI.connSettingsOpen = true;
-                document.getElementById('noVNC_setting_host').focus();
+                UI.openConnectPanel();
             }
         },
 
         connect: function() {
-            UI.closeSettingsMenu();
-            UI.toggleConnectPanel();
+            UI.closeAllPanels();
 
             var host = document.getElementById('noVNC_setting_host').value;
             var port = document.getElementById('noVNC_setting_port').value;
@@ -741,33 +967,22 @@ var UI;
             UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
 
             UI.rfb.connect(host, port, password, path);
-
-            //Close dialog.
-            setTimeout(UI.setBarPosition, 100);
-            document.getElementById('noVNC_logo').style.display = "none";
-            document.getElementById('noVNC_screen').style.display = "inline";
         },
 
         disconnect: function() {
-            UI.closeSettingsMenu();
+            UI.closeAllPanels();
             UI.rfb.disconnect();
 
             // Restore the callback used for initial resize
             UI.rfb.set_onFBUComplete(UI.initialResize);
 
-            document.getElementById('noVNC_logo').style.display = "block";
-            document.getElementById('noVNC_screen').style.display = "none";
-
             // Don't display the connection settings until we're actually disconnected
         },
 
         setPassword: function() {
-            UI.rfb.sendPassword(document.getElementById('noVNC_setting_password').value);
-            //Reset connect button.
-            document.getElementById('noVNC_connect_button').value = "Connect";
-            document.getElementById('noVNC_connect_button').onclick = UI.connect;
-            //Hide connection panel.
-            UI.toggleConnectPanel();
+            UI.rfb.sendPassword(document.getElementById('noVNC_password_input').value);
+            document.getElementById('noVNC_password_dlg')
+                .classList.remove('noVNC_open');
             return false;
         },
 
@@ -811,9 +1026,11 @@ var UI;
                 document.mozFullScreenElement || // currently working methods
                 document.webkitFullscreenElement ||
                 document.msFullscreenElement ) {
-                document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_fullscreen_button')
+                    .classList.add("noVNC_selected");
             } else {
-                document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_fullscreen_button')
+                    .classList.remove("noVNC_selected");
             }
         },
 
@@ -905,53 +1122,51 @@ var UI;
 
         // Set and configure viewport clipping
         setViewClip: function(clip) {
+            UI.updateSetting('clip', clip);
+            UI.updateViewClip();
+        },
+
+        // Update parameters that depend on the clip setting
+        updateViewClip: function() {
             var display;
-            if (UI.rfb) {
-                display = UI.rfb.get_display();
-            } else {
-                UI.forceSetting('clip', clip);
+            if (!UI.rfb) {
                 return;
             }
 
+            var display = UI.rfb.get_display();
             var cur_clip = display.get_viewport();
+            var new_clip = UI.getSetting('clip');
 
-            if (typeof(clip) !== 'boolean') {
-                // Use current setting
-                clip = UI.getSetting('clip');
+            if (cur_clip !== new_clip) {
+                display.set_viewport(new_clip);
             }
 
-            if (clip && !cur_clip) {
-                // Turn clipping on
-                UI.updateSetting('clip', true);
-            } else if (!clip && cur_clip) {
-                // Turn clipping off
-                UI.updateSetting('clip', false);
-                display.set_viewport(false);
-                // Disable max dimensions
-                display.set_maxWidth(0);
-                display.set_maxHeight(0);
-                display.viewportChangeSize();
-            }
-            if (UI.getSetting('clip')) {
-                // If clipping, update clipping settings
-                display.set_viewport(true);
+            var size = UI.screenSize();
 
-                var size = UI.screenSize();
-                if (size) {
-                    display.set_maxWidth(size.w);
-                    display.set_maxHeight(size.h);
+            if (new_clip && size) {
+                // When clipping is enabled, the screen is limited to
+                // the size of the browser window.
+                display.set_maxWidth(size.w);
+                display.set_maxHeight(size.h);
 
-                    // Hide potential scrollbars that can skew the position
-                    document.getElementById('noVNC_screen').style.overflow = "hidden";
+                var screen = document.getElementById('noVNC_screen');
+                var canvas = document.getElementById('noVNC_canvas');
 
-                    // The x position marks the left margin of the canvas,
-                    // remove the margin from both sides to keep it centered
-                    var new_w = size.w - (2 * Util.getPosition(document.getElementById('noVNC_canvas')).x);
+                // Hide potential scrollbars that can skew the position
+                screen.style.overflow = "hidden";
 
-                    document.getElementById('noVNC_screen').style.overflow = "visible";
+                // The x position marks the left margin of the canvas,
+                // remove the margin from both sides to keep it centered.
+                var new_w = size.w - (2 * Util.getPosition(canvas).x);
 
-                    display.viewportChangeSize(new_w, size.h);
-                }
+                screen.style.overflow = "visible";
+
+                display.viewportChangeSize(new_w, size.h);
+            } else {
+                // Disable max dimensions
+                display.set_maxWidth(0);
+                display.set_maxHeight(0);
+                display.viewportChangeSize();
             }
         },
 
@@ -973,7 +1188,7 @@ var UI;
                 // The browser is IE and we are in fullscreen mode.
                 // - We need to force clipping while in fullscreen since
                 //   scrollbars doesn't work.
-                UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
+                UI.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
                 UI.rememberedClipSetting = UI.getSetting('clip');
                 UI.setViewClip(true);
                 document.getElementById('noVNC_setting_clip').disabled = true;
@@ -995,62 +1210,68 @@ var UI;
  *    VIEWDRAG
  * ------v------*/
 
-        // Update the viewport drag state
-        updateViewDrag: function(drag) {
+        toggleViewDrag: function() {
             if (!UI.rfb) return;
 
-            var viewDragButton = document.getElementById('noVNC_view_drag_button');
+            var drag = UI.rfb.get_viewportDrag();
+            UI.setViewDrag(!drag);
+         },
+
+        // Set the view drag mode which moves the viewport on mouse drags
+        setViewDrag: function(drag) {
+            if (!UI.rfb) return;
+
+            UI.rfb.set_viewportDrag(drag);
+
+            UI.updateViewDrag();
+        },
+
+        updateViewDrag: function() {
+            var clipping = false;
+
+            if (UI.rfb_state !== 'normal') return;
 
             // Check if viewport drag is possible. It is only possible
             // if the remote display is clipping the client display.
-            if (UI.rfb_state === 'normal' &&
-                UI.rfb.get_display().get_viewport() &&
+            if (UI.rfb.get_display().get_viewport() &&
                 UI.rfb.get_display().clippingDisplay()) {
+                clipping = true;
+            }
 
-                viewDragButton.style.display = "inline";
-                viewDragButton.disabled = false;
+            var viewDragButton = document.getElementById('noVNC_view_drag_button');
 
-            } else {
+            if (!clipping &&
+                UI.rfb.get_viewportDrag()) {
                 // The size of the remote display is the same or smaller
                 // than the client display. Make sure viewport drag isn't
                 // active when it can't be used.
-                if (UI.rfb.get_viewportDrag) {
-                    viewDragButton.className = "noVNC_status_button";
-                    UI.rfb.set_viewportDrag(false);
-                }
-
-                // The button is disabled instead of hidden on touch devices
-                if (UI.rfb_state === 'normal' && UI.isTouchDevice) {
-                    viewDragButton.style.display = "inline";
-                    viewDragButton.disabled = true;
-                } else {
-                    viewDragButton.style.display = "none";
-                }
-                return;
+                UI.rfb.set_viewportDrag(false);
             }
 
-            if (typeof(drag) !== "undefined" &&
-                typeof(drag) !== "object") {
-                if (drag) {
-                    viewDragButton.className = "noVNC_status_button_selected";
-                    UI.rfb.set_viewportDrag(true);
-                } else {
-                    viewDragButton.className = "noVNC_status_button";
-                    UI.rfb.set_viewportDrag(false);
-                }
+            if (UI.rfb.get_viewportDrag()) {
+                viewDragButton.classList.add("noVNC_selected");
+            } else {
+                viewDragButton.classList.remove("noVNC_selected");
             }
-        },
 
-        toggleViewDrag: function() {
-            if (!UI.rfb) return;
+            // Different behaviour for touch vs non-touch
+            // The button is disabled instead of hidden on touch devices
+            if (UI.isTouchDevice) {
+                viewDragButton.classList.remove("noVNC_hidden");
 
-            var viewDragButton = document.getElementById('noVNC_view_drag_button');
-            if (UI.rfb.get_viewportDrag()) {
-                viewDragButton.className = "noVNC_status_button";
-                UI.rfb.set_viewportDrag(false);
+                if (clipping) {
+                    viewDragButton.disabled = false;
+                } else {
+                    viewDragButton.disabled = true;
+                }
             } else {
-                viewDragButton.className = "noVNC_status_button_selected";
-                UI.rfb.set_viewportDrag(true);
+                viewDragButton.disabled = false;
+
+                if (clipping) {
+                    viewDragButton.classList.remove("noVNC_hidden");
+                } else {
+                    viewDragButton.classList.add("noVNC_hidden");
+                }
             }
         },
 
@@ -1060,42 +1281,64 @@ var UI;
  *    KEYBOARD
  * ------v------*/
 
-        // On touch devices, show the OS keyboard
-        showKeyboard: function() {
-            var kbi = document.getElementById('noVNC_keyboardinput');
-            var skb = document.getElementById('noVNC_keyboard_button');
-            var l = kbi.value.length;
-            if(UI.keyboardVisible === false) {
-                kbi.focus();
-                try { kbi.setSelectionRange(l, l); } // Move the caret to the end
-                catch (err) {} // setSelectionRange is undefined in Google Chrome
-                UI.keyboardVisible = true;
-                skb.className = "noVNC_status_button_selected";
-            } else if(UI.keyboardVisible === true) {
-                kbi.blur();
-                skb.className = "noVNC_status_button";
-                UI.keyboardVisible = false;
+        showVirtualKeyboard: function() {
+            if (!UI.isTouchDevice)
+                return;
+
+            var input = document.getElementById('noVNC_keyboardinput');
+
+            if (document.activeElement == input)
+                return;
+
+            UI.keyboardVisible = true;
+            document.getElementById('noVNC_keyboard_button')
+                .classList.add("noVNC_selected");
+            input.focus();
+
+            try {
+                var l = input.value.length;
+                // Move the caret to the end
+                input.setSelectionRange(l, l);
+            } catch (err) {} // setSelectionRange is undefined in Google Chrome
+        },
+
+        hideVirtualKeyboard: function() {
+            if (!UI.isTouchDevice)
+                return;
+
+            var input = document.getElementById('noVNC_keyboardinput');
+
+            if (document.activeElement != input)
+                return;
+
+            input.blur();
+        },
+
+        toggleVirtualKeyboard: function () {
+            if (UI.keyboardVisible) {
+                UI.hideVirtualKeyboard();
+            } else {
+                UI.showVirtualKeyboard();
             }
         },
 
-        hideKeyboard: function() {
-            document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button";
+        onblurVirtualKeyboard: function() {
             //Weird bug in iOS if you change keyboardVisible
             //here it does not actually occur so next time
             //you click keyboard icon it doesnt work.
             UI.hideKeyboardTimeout = setTimeout(function() {
                 UI.keyboardVisible = false;
+                document.getElementById('noVNC_keyboard_button')
+			.classList.remove("noVNC_selected");
             },100);
         },
 
         keepKeyboard: function() {
             clearTimeout(UI.hideKeyboardTimeout);
             if(UI.keyboardVisible === true) {
-                document.getElementById('noVNC_keyboardinput').focus();
-                document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button_selected";
+                UI.showVirtualKeyboard();
             } else if(UI.keyboardVisible === false) {
-                document.getElementById('noVNC_keyboardinput').blur();
-                document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button";
+                UI.hideVirtualKeyboard();
             }
         },
 
@@ -1176,22 +1419,36 @@ var UI;
             }
         },
 
+/* ------^-------
+ *   /KEYBOARD
+ * ==============
+ *   EXTRA KEYS
+ * ------v------*/
+
+        openExtraKeys: function() {
+            UI.closeAllPanels();
+            UI.openControlbar();
+
+            document.getElementById('noVNC_modifiers')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_toggle_extra_keys_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeExtraKeys: function() {
+            document.getElementById('noVNC_modifiers')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_toggle_extra_keys_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleExtraKeys: function() {
             UI.keepKeyboard();
-            if(UI.extraKeysVisible === false) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "inline";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "inline";
-                document.getElementById('noVNC_sendTab_button').style.display = "inline";
-                document.getElementById('noVNC_sendEsc_button').style.display = "inline";
-                document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected";
-                UI.extraKeysVisible = true;
-            } else if(UI.extraKeysVisible === true) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "";
-                document.getElementById('noVNC_sendTab_button').style.display = "";
-                document.getElementById('noVNC_sendEsc_button').style.display = "";
-                document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button";
-                UI.extraKeysVisible = false;
+            if(document.getElementById('noVNC_modifiers')
+                .classList.contains("noVNC_open")) {
+                UI.closeExtraKeys();
+            } else  {
+                UI.openExtraKeys();
             }
         },
 
@@ -1207,45 +1464,40 @@ var UI;
 
         toggleCtrl: function() {
             UI.keepKeyboard();
-            if(UI.ctrlOn === false) {
-                UI.rfb.sendKey(KeyTable.XK_Control_L, true);
-                document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button_selected";
-                UI.ctrlOn = true;
-            } else if(UI.ctrlOn === true) {
+            var btn = document.getElementById('noVNC_toggle_ctrl_button');
+            if (btn.classList.contains("noVNC_selected")) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, false);
-                document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button";
-                UI.ctrlOn = false;
+                btn.classList.remove("noVNC_selected");
+            } else {
+                UI.rfb.sendKey(KeyTable.XK_Control_L, true);
+                btn.classList.add("noVNC_selected");
             }
         },
 
         toggleAlt: function() {
             UI.keepKeyboard();
-            if(UI.altOn === false) {
-                UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
-                document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button_selected";
-                UI.altOn = true;
-            } else if(UI.altOn === true) {
+            var btn = document.getElementById('noVNC_toggle_alt_button');
+            if (btn.classList.contains("noVNC_selected")) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, false);
-                document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button";
-                UI.altOn = false;
+                btn.classList.remove("noVNC_selected");
+            } else {
+                UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
+                btn.classList.add("noVNC_selected");
             }
         },
 
         sendCtrlAltDel: function() {
+            UI.keepKeyboard();
             UI.rfb.sendCtrlAltDel();
         },
 
 /* ------^-------
- *   /KEYBOARD
+ *   /EXTRA KEYS
  * ==============
  *     MISC
  * ------v------*/
 
         setMouseButton: function(num) {
-            if (typeof num === 'undefined') {
-                // Disable mouse buttons
-                num = -1;
-            }
             if (UI.rfb) {
                 UI.rfb.get_mouse().set_touchButton(num);
             }
@@ -1254,9 +1506,9 @@ var UI;
             for (var b = 0; b < blist.length; b++) {
                 var button = document.getElementById('noVNC_mouse_button' + blist[b]);
                 if (blist[b] === num) {
-                    button.style.display = "";
+                    button.classList.remove("noVNC_hidden");
                 } else {
-                    button.style.display = "none";
+                    button.classList.add("noVNC_hidden");
                 }
             }
         },
@@ -1288,14 +1540,6 @@ var UI;
             selectbox.options.add(optn);
         },
 
-        setBarPosition: function() {
-            document.getElementById('noVNC_control_bar').style.top = (window.pageYOffset) + 'px';
-            document.getElementById('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
-
-            var vncwidth = document.getElementById('noVNC_container').style.offsetWidth;
-            document.getElementById('noVNC_control_bar').style.width = vncwidth + 'px';
-        }
-
 /* ------^-------
  *    /MISC
  * ==============
diff --git a/app/webutil.js b/app/webutil.js
index 7f234db..38bb396 100644
--- a/app/webutil.js
+++ b/app/webutil.js
@@ -278,6 +278,99 @@ WebUtil.injectParamIfMissing = function (path, param, value) {
     }
 };
 
+// Emulate Element.setCapture() when not supported
+
+WebUtil._captureRecursion = false;
+WebUtil._captureProxy = function (e) {
+    // Recursion protection as we'll see our own event
+    if (WebUtil._captureRecursion) return;
+
+    // Clone the event as we cannot dispatch an already dispatched event
+    var newEv = new e.constructor(e.type, e);
+
+    WebUtil._captureRecursion = true;
+    WebUtil._captureElem.dispatchEvent(newEv);
+    WebUtil._captureRecursion = false;
+
+    // Implicitly release the capture on button release
+    if ((e.type === "mouseup") || (e.type === "touchend")) {
+        WebUtil.releaseCapture();
+    }
+};
+
+WebUtil.setCapture = function (elem) {
+    if (elem.setCapture) {
+
+        elem.setCapture();
+
+        // IE releases capture on 'click' events which might not trigger
+        elem.addEventListener('mouseup', WebUtil.releaseCapture);
+        elem.addEventListener('touchend', WebUtil.releaseCapture);
+
+    } else {
+        // Safari on iOS 9 has a broken constructor for TouchEvent.
+        // We are fine in this case however, since Safari seems to
+        // have some sort of implicit setCapture magic anyway.
+        if (window.TouchEvent !== undefined) {
+            try {
+                new TouchEvent("touchstart");
+            } catch (TypeError) {
+                return;
+            }
+        }
+
+        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
+
+        if (captureElem === null) {
+            captureElem = document.createElement("div");
+            captureElem.id = "noVNC_mouse_capture_elem";
+            captureElem.style.position = "fixed";
+            captureElem.style.top = "0px";
+            captureElem.style.left = "0px";
+            captureElem.style.width = "100%";
+            captureElem.style.height = "100%";
+            captureElem.style.zIndex = 10000;
+            captureElem.style.display = "none";
+            document.body.appendChild(captureElem);
+
+            captureElem.addEventListener('mousemove', WebUtil._captureProxy);
+            captureElem.addEventListener('mouseup', WebUtil._captureProxy);
+
+            captureElem.addEventListener('touchmove', WebUtil._captureProxy);
+            captureElem.addEventListener('touchend', WebUtil._captureProxy);
+        }
+
+        WebUtil._captureElem = elem;
+        captureElem.style.display = null;
+
+        // We listen to events on window in order to keep tracking if it
+        // happens to leave the viewport
+        window.addEventListener('mousemove', WebUtil._captureProxy);
+        window.addEventListener('mouseup', WebUtil._captureProxy);
+
+        window.addEventListener('touchmove', WebUtil._captureProxy);
+        window.addEventListener('touchend', WebUtil._captureProxy);
+    }
+};
+
+WebUtil.releaseCapture = function () {
+    if (document.releaseCapture) {
+
+        document.releaseCapture();
+
+    } else {
+        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
+        WebUtil._captureElem = null;
+        captureElem.style.display = "none";
+
+        window.removeEventListener('mousemove', WebUtil._captureProxy);
+        window.removeEventListener('mouseup', WebUtil._captureProxy);
+
+        window.removeEventListener('touchmove', WebUtil._captureProxy);
+        window.removeEventListener('touchend', WebUtil._captureProxy);
+    }
+};
+
 // Dynamically load scripts without using document.write()
 // Reference: http://unixpapa.com/js/dyna.html
 //
diff --git a/core/util.js b/core/util.js
index d6a0193..3cc1e87 100644
--- a/core/util.js
+++ b/core/util.js
@@ -204,14 +204,18 @@ Util.getPosition = function(obj) {
             'width': objPosition.width, 'height': objPosition.height};
 };
 
+Util.getPointerEvent = function (e) {
+    var evt;
+    evt = (e ? e : window.event);
+    evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt);
+    return evt;
+};
 
 // Get mouse event position in DOM element
 Util.getEventPosition = function (e, obj, scale) {
     "use strict";
     var evt, docX, docY, pos;
-    //if (!e) evt = window.event;
-    evt = (e ? e : window.event);
-    evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt);
+    evt = Util.getPointerEvent(e);
     if (evt.pageX || evt.pageY) {
         docX = evt.pageX;
         docY = evt.pageY;
diff --git a/vnc.html b/vnc.html
index 8f4129d..d6348e5 100644
--- a/vnc.html
+++ b/vnc.html
@@ -6,6 +6,7 @@
     noVNC example: simple example using default UI
     Copyright (C) 2012 Joel Martin
     Copyright (C) 2016 Samuel Mannehed for Cendio AB
+    Copyright (C) 2016 Pierre Ossman for Cendio AB
     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
@@ -48,169 +49,245 @@
 </head>
 
 <body>
-    <div id="noVNC_control_bar" class="noVNC_status_normal">
-        <!--noVNC Mobile Device only Buttons-->
-        <div class="noVNC_buttons_left">
-            <input type="image" alt="viewport drag" src="app/images/drag.png"
-                id="noVNC_view_drag_button" class="noVNC_status_button"
+    <!-- noVNC Control Bar -->
+    <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
+
+        <div id="noVNC_control_bar">
+            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
+
+            <div class="noVNC_scroll">
+
+            <h1 class="noVNC_logo"><span>no</span><br />VNC</h1>
+
+            <!-- Drag/Pan the viewport -->
+            <input type="image" alt="viewport drag" src="app/images/drag.svg"
+                id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
                 title="Move/Drag Viewport" />
+
+            <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
-                <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
-                    id="noVNC_mouse_button0" class="noVNC_status_button" />
-                <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
-                    id="noVNC_mouse_button1" class="noVNC_status_button" />
-                <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.png"
-                    id="noVNC_mouse_button2" class="noVNC_status_button" />
-                <input type="image" alt="Right mousebutton" src="app/images/mouse_right.png"
-                    id="noVNC_mouse_button4" class="noVNC_status_button" />
-                <input type="image" alt="Keyboard" src="app/images/keyboard.png"
-                    id="noVNC_keyboard_button" class="noVNC_status_button"
+                <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
+                    id="noVNC_mouse_button0" class="noVNC_button"
+                    title="Active Mouse Button"/>
+                <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
+                    id="noVNC_mouse_button1" class="noVNC_button"
+                    title="Active Mouse Button"/>
+                <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.svg"
+                    id="noVNC_mouse_button2" class="noVNC_button"
+                    title="Active Mouse Button"/>
+                <input type="image" alt="Right mousebutton" src="app/images/mouse_right.svg"
+                    id="noVNC_mouse_button4" class="noVNC_button"
+                    title="Active Mouse Button"/>
+                <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
+                    id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
-                <!-- Note that Google Chrome on Android doesn't respect any of these,
-                     html attributes which attempt to disable text suggestions on the
-                     on-screen keyboard. Let's hope Chrome implements the ime-mode
-                     style for example -->
-                <textarea id="noVNC_keyboardinput" autocapitalize="off"
-                    autocorrect="off" autocomplete="off" spellcheck="false"
-                    mozactionhint="Enter"></textarea>
-                <div id="noVNC_extra_keys">
-                    <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
-                        id="noVNC_toggleExtraKeys_button" class="noVNC_status_button" />
-                    <input type="image" alt="Ctrl" src="app/images/ctrl.png"
-                        id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
-                    <input type="image" alt="Alt" src="app/images/alt.png"
-                        id="noVNC_toggleAlt_button" class="noVNC_status_button" />
-                    <input type="image" alt="Tab" src="app/images/tab.png"
-                        id="noVNC_sendTab_button" class="noVNC_status_button" />
-                    <input type="image" alt="Esc" src="app/images/esc.png"
-                        id="noVNC_sendEsc_button" class="noVNC_status_button" />
-                </div>
             </div>
-        </div>
 
-        <div id="noVNC_status"></div>
+            <!-- Extra manual keys -->
+            <div id="noVNC_extra_keys">
+                <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
+                    id="noVNC_toggle_extra_keys_button" class="noVNC_button"
+                    title="Show Extra Keys"/>
+                <div class="noVNC_vcenter">
+                <div id="noVNC_modifiers" class="noVNC_panel">
+                    <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
+                        id="noVNC_toggle_ctrl_button" class="noVNC_button"
+                        title="Toggle Ctrl"/>
+                    <input type="image" alt="Alt" src="app/images/alt.svg"
+                        id="noVNC_toggle_alt_button" class="noVNC_button"
+                        title="Toggle Alt"/>
+                    <input type="image" alt="Tab" src="app/images/tab.svg"
+                        id="noVNC_send_tab_button" class="noVNC_button"
+                        title="Send Tab"/>
+                    <input type="image" alt="Esc" src="app/images/esc.svg"
+                        id="noVNC_send_esc_button" class="noVNC_button"
+                        title="Send Escape"/>
+                    <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
+                        id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
+                        title="Send Ctrl-Alt-Del" />
+                </div>
+                </div>
+            </div>
 
-        <!--noVNC Buttons-->
-        <div class="noVNC_buttons_right">
-            <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
-                id="noVNC_sendCtrlAltDel_button" class="noVNC_status_button"
-                title="Send Ctrl-Alt-Del" />
-            <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
-                id="noVNC_toggleXvp_button" class="noVNC_status_button"
+            <!-- XVP Shutdown/Reboot -->
+            <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
+                id="noVNC_xvp_button" class="noVNC_button"
                 title="Shutdown/Reboot..." />
-            <input type="image" alt="Clipboard" src="app/images/clipboard.png"
-                id="noVNC_clipboard_button" class="noVNC_status_button"
-                title="Clipboard" />
-            <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
-                id="noVNC_fullscreen_button" class="noVNC_status_button"
-                title="Fullscreen" />
-            <input type="image" alt="Settings" src="app/images/settings.png"
-                id="noVNC_settings_button" class="noVNC_status_button"
-                title="Settings" />
-            <input type="image" alt="Connect" src="app/images/connect.png"
-                id="noVNC_connectPanel_button" class="noVNC_status_button"
-                title="Connect" />
-            <input type="image" alt="Disconnect" src="app/images/disconnect.png"
-                id="noVNC_disconnect_button" class="noVNC_status_button"
-                title="Disconnect" />
-        </div>
-
-        <!-- Description Panel -->
-        <!-- Shown by default when hosted at for kanaka.github.com -->
-        <div id="noVNC_description" class="">
-            noVNC is a browser based VNC client implemented using HTML5 Canvas
-            and WebSockets. You will either need a VNC server with WebSockets
-            support (such as <a href="http://libvncserver.sourceforge.net/">libvncserver</a>)
-            or you will need to use
-            <a href="https://github.com/kanaka/websockify">websockify</a>
-            to bridge between your browser and VNC server. See the noVNC
-            <a href="https://github.com/kanaka/noVNC">README</a>
-            and <a href="http://kanaka.github.com/noVNC">website</a>
-            for more information.
-            <br />
-            <input id="noVNC_description_button" type="button" value="Close" />
-        </div>
-
-        <!-- Popup Status -->
-        <div id="noVNC_popup_status" class="">
-        </div>
+            <div class="noVNC_vcenter">
+            <div id="noVNC_xvp" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/power.svg"> Power
+                </div>
+                <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
+                <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
+                <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
+            </div>
+            </div>
 
-        <!-- Clipboard Panel -->
-        <div id="noVNC_clipboard" class="triangle-right top">
-            <textarea id="noVNC_clipboard_text" rows=5></textarea>
-            <br />
-            <input id="noVNC_clipboard_clear_button" type="button"
-                value="Clear" />
-        </div>
+            <!-- Clipboard -->
+            <input type="image" alt="Clipboard" src="app/images/clipboard.svg"
+                id="noVNC_clipboard_button" class="noVNC_button"
+                title="Clipboard" />
+            <div class="noVNC_vcenter">
+            <div id="noVNC_clipboard" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/clipboard.svg"> Clipboard
+                </div>
+                <textarea id="noVNC_clipboard_text" rows=5></textarea>
+                <br />
+                <input id="noVNC_clipboard_clear_button" type="button"
+                    value="Clear" class="noVNC_submit" />
+            </div>
+            </div>
 
-        <!-- XVP Shutdown/Reboot Panel -->
-        <div id="noVNC_xvp" class="triangle-right top">
-            <span id="noVNC_xvp_menu">
-                <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
-                <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
-                <input type="button" id="noVNC_xvpReset_button" value="Reset" />
-            </span>
-        </div>
+            <!-- Toggle fullscreen -->
+            <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
+                id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
+                title="Fullscreen" />
 
-        <!-- Settings Panel -->
-        <div id="noVNC_settings" class="triangle-right top">
-            <span id="noVNC_settings_menu">
+            <!-- Settings -->
+            <input type="image" alt="Settings" src="app/images/settings.svg"
+                id="noVNC_settings_button" class="noVNC_button"
+                title="Settings" />
+            <div class="noVNC_vcenter">
+            <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
-                    <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
-                    <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
-                    <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
-                    <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
-                    <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
-                    <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
-                    <hr>
-                    <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
-                    <li><label>
+                    <li class="noVNC_heading">
+                        <img src="app/images/settings.svg"> Settings
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_view_only" type="checkbox" /> View Only</label>
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <label for="noVNC_setting_path">Path:</label>
+                        <input id="noVNC_setting_path" type="input" value="websockify" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_resize">Scaling Mode:</label>
                         <select id="noVNC_setting_resize" name="vncResize">
                             <option value="off">None</option>
                             <option value="scale">Local Scaling</option>
                             <option value="downscale">Local Downscaling</option>
                             <option value="remote">Remote Resizing</option>
-                        </select> Scaling Mode</label>
+                        </select>
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_repeaterID">Repeater ID:</label>
+                        <input id="noVNC_setting_repeaterID" type="input" value="" />
                     </li>
-                    <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
-                    <hr>
+                    <li><hr></li>
                     <!-- Stylesheet selection dropdown -->
-                    <li><label><strong>Style: </strong>
-                        <select id="noVNC_setting_stylesheet" name="vncStyle">
-                            <option value="default">default</option>
-                        </select></label>
+                    <li>
+                        <label>Style:
+                            <select id="noVNC_setting_stylesheet" name="vncStyle">
+                                <option value="default">default</option>
+                            </select>
+                        </label>
                     </li>
-
                     <!-- Logging selection dropdown -->
-                    <li><label><strong>Logging: </strong>
-                        <select id="noVNC_setting_logging" name="vncLogging">
-                        </select></label>
+                    <li>
+                        <label>Logging:
+                            <select id="noVNC_setting_logging" name="vncLogging">
+                            </select>
+                        </label>
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" />
                     </li>
-                    <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
                 </ul>
-            </span>
-        </div>
+            </div>
+            </div>
 
-        <!-- Connection Panel -->
-        <div id="noVNC_controls" class="triangle-right top">
-            <ul>
-                <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
-                <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
-                <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
-                <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
-            </ul>
+            <!-- Connection Controls -->
+            <input type="image" alt="Connect" src="app/images/connect.svg"
+                id="noVNC_connect_controls_button" class="noVNC_button"
+                title="Connect" />
+            <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
+                id="noVNC_disconnect_button" class="noVNC_button"
+                title="Disconnect" />
+            <div class="noVNC_vcenter">
+            <div id="noVNC_connect_controls" class="noVNC_panel">
+                <ul>
+                    <li class="noVNC_heading">
+                        <img src="app/images/connect.svg"> Connection
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_host">Host:</label>
+                        <input id="noVNC_setting_host" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_port">Port:</label>
+                        <input id="noVNC_setting_port" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_password">Password:</label>
+                        <input id="noVNC_setting_password" type="password" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_token">Token:</label>
+                        <input id="noVNC_setting_token" />
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" />
+                    </li>
+                </ul>
+            </div>
+            </div>
+
+            </div>
         </div>
 
     </div> <!-- End of noVNC_control_bar -->
 
+    <!-- Status Dialog -->
+    <div id="noVNC_status"></div>
+
+    <!-- Password Dialog -->
+    <div class="noVNC_center">
+    <div id="noVNC_password_dlg" class="noVNC_panel">
+        <ul>
+            <li>
+                <label>Password:</label>
+                <input id="noVNC_password_input" type="password" />
+            </li>
+            <li>
+                <input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" />
+            </li>
+        </ul>
+    </div>
+    </div>
 
     <div id="noVNC_container">
-        <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
+        <h1 id="noVNC_logo" class="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
         <div id="noVNC_screen">
+            <!-- Note that Google Chrome on Android doesn't respect any of these,
+                 html attributes which attempt to disable text suggestions on the
+                 on-screen keyboard. Let's hope Chrome implements the ime-mode
+                 style for example -->
+            <textarea id="noVNC_keyboardinput" autocapitalize="off"
+                autocorrect="off" autocomplete="off" spellcheck="false"
+                mozactionhint="Enter"></textarea>
+
             <canvas id="noVNC_canvas" width="0" height="0">
                         Canvas not supported.
             </canvas>
diff --git a/vnc_auto.html b/vnc_auto.html
index a3c5dc9..a4cbb23 100644
--- a/vnc_auto.html
+++ b/vnc_auto.html
@@ -36,7 +36,7 @@
 
 
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="app/styles/base.css" title="plain">
+    <link rel="stylesheet" href="app/styles/auto.css">
 
      <!--
     <script type='text/javascript'