diff --git a/web/images/pin-down.svg b/web/images/pin-down.svg
new file mode 100644
index 000000000..357667600
--- /dev/null
+++ b/web/images/pin-down.svg
@@ -0,0 +1,297 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   id="svg3075"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="pin-down.svg"
+   viewPort="0 0 48 48">
+  <defs
+     id="defs3077">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3804">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3806" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop3808" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3965">
+      <stop
+         id="stop3967"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1"
+         id="stop3969" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3885">
+      <stop
+         style="stop-color:#a8b5e9;stop-opacity:1;"
+         offset="0"
+         id="stop3889" />
+      <stop
+         id="stop3891"
+         offset="1"
+         style="stop-color:#1d4488;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3865">
+      <stop
+         style="stop-color:#0e0ec3;stop-opacity:0"
+         offset="0"
+         id="stop3867" />
+      <stop
+         id="stop3883"
+         offset="0.5"
+         style="stop-color:#95b1e4;stop-opacity:1;" />
+      <stop
+         style="stop-color:#0d29c0;stop-opacity:1;"
+         offset="1"
+         id="stop3869" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3853">
+      <stop
+         style="stop-color:#717171;stop-opacity:1;"
+         offset="0"
+         id="stop3855" />
+      <stop
+         id="stop3861"
+         offset="0.5"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#818181;stop-opacity:1;"
+         offset="1"
+         id="stop3857" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3792"
+       cx="13.508819"
+       cy="30.521608"
+       fx="13.508819"
+       fy="30.521608"
+       r="13.254341"
+       gradientTransform="matrix(1,0,0,1.045977,0,-1.4434017)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="linearGradient3802"
+       x1="15.306904"
+       y1="13.407407"
+       x2="29.35461"
+       y2="30.15519"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2304178,0,0,1.1235308,-2.1158755,998.83747)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3804"
+       id="radialGradient3812"
+       cx="20.111172"
+       cy="28.238274"
+       fx="20.111172"
+       fy="28.238274"
+       r="7.6291947"
+       gradientTransform="matrix(1.2304178,0,0,1.1452771,-2.1158755,998.22337)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3822"
+       cx="23.985939"
+       cy="24.847366"
+       fx="23.985939"
+       fy="24.847366"
+       r="10.593476"
+       gradientTransform="matrix(0.63682384,0.44303926,-1.1714282,1.6838088,35.523491,-26.055439)"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter3856"
+       x="-0.30370581"
+       width="1.6074116"
+       y="-0.32771564"
+       height="1.6554313">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="4.7808869"
+         id="feGaussianBlur3858" />
+    </filter>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3865"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.045977,0,-1.4434017)"
+       cx="13.508819"
+       cy="30.521608"
+       fx="13.508819"
+       fy="30.521608"
+       r="13.254341" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="linearGradient3867"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2304178,0,0,1.1235308,-2.1158755,998.83747)"
+       x1="15.306904"
+       y1="13.407407"
+       x2="29.35461"
+       y2="30.15519" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3804"
+       id="radialGradient3869"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2304178,0,0,1.1452771,-2.1158755,998.22337)"
+       cx="20.111172"
+       cy="28.238274"
+       fx="20.111172"
+       fy="28.238274"
+       r="7.6291947" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3871"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.63682384,0.44303926,-1.1714282,1.6838088,35.523491,-26.055439)"
+       cx="23.985939"
+       cy="24.847366"
+       fx="23.985939"
+       fy="24.847366"
+       r="10.593476" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="linearGradient3875"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.98683814,0,0,0.9524914,3.4991888,1004.1467)"
+       x1="15.306904"
+       y1="13.407407"
+       x2="29.35461"
+       y2="30.15519" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3804"
+       id="radialGradient3877"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.195641,0.23932984,-0.18533175,0.95255553,4.5333676,999.33159)"
+       cx="20.111172"
+       cy="28.238274"
+       fx="20.111172"
+       fy="28.238274"
+       r="7.6291947" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3880"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.5847553,0.52693722,-0.99805104,2.7064773,14.11088,-45.304477)"
+       cx="18.133854"
+       cy="19.778509"
+       fx="18.133854"
+       fy="19.778509"
+       r="10.593476" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3882"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,1.045977,0,-1.4434017)"
+       cx="13.508819"
+       cy="30.521608"
+       fx="13.508819"
+       fy="30.521608"
+       r="13.254341" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4.9558805"
+     inkscape:cx="3.0237013"
+     inkscape:cy="17.287267"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1291"
+     inkscape:window-height="776"
+     inkscape:window-x="16"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata3080">
+    <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,-1004.3622)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none;filter:url(#filter3856)"
+       d="m 14.326415,1019.2702 c -8.3327876,4.0675 -9.8235436,10.8833 -8.8783416,15.1336 4.6840646,7.9754 8.3608166,13.8165 24.0118786,12.9139 9.657617,-3.7312 12.9762,-9.3269 13.519293,-15.7389 -0.547269,-4.3839 -1.957958,-9.3396 -5.649854,-14.9317 -3.965534,-2.471 -6.300859,-4.4246 -10.290805,-4.2374 -8.25193,0.5026 -8.752485,4.4502 -12.712171,6.8605 z"
+       id="path3826"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc"
+       transform="matrix(0.69099294,0,0,0.75978808,7.3427938,249.11025)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#radialGradient3882);fill-opacity:1;stroke:none"
+       id="path3011"
+       sodipodi:cx="21.176477"
+       sodipodi:cy="31.393986"
+       sodipodi:rx="13.254341"
+       sodipodi:ry="13.863736"
+       d="m 34.430819,31.393986 a 13.254341,13.863736 0 1 1 -26.5086827,0 13.254341,13.863736 0 1 1 26.5086827,0 z"
+       transform="matrix(0.98683814,0,0,0.83062636,2.696034,1005.3655)" />
+    <path
+       style="fill:url(#linearGradient3875);fill-opacity:1;stroke:url(#radialGradient3877);stroke-width:0.9695127;stroke-opacity:1"
+       d="m 17.246758,1026.7905 c -1.7156,4.5052 -2.482464,10.6205 8.726963,10.7476 4.849099,-1.8941 3.522783,-5.3561 6.021544,-11.8282 l -10.973104,-1.5977 z"
+       id="path3794"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#radialGradient3880);fill-opacity:1;stroke:none"
+       id="path3814"
+       sodipodi:cx="24.718111"
+       sodipodi:cy="23.38278"
+       sodipodi:rx="10.593476"
+       sodipodi:ry="9.6854639"
+       d="m 35.311587,23.38278 a 10.593476,9.6854639 0 1 1 -21.186952,0 10.593476,9.6854639 0 1 1 21.186952,0 z"
+       transform="matrix(0.85425691,0,0,0.84187503,3.9779774,1006.7561)" />
+  </g>
+</svg>
diff --git a/web/images/pin-up.svg b/web/images/pin-up.svg
new file mode 100644
index 000000000..e55cec7a0
--- /dev/null
+++ b/web/images/pin-up.svg
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   id="svg3075"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="pin-up.svg"
+   viewPort="0 0 48 48">
+  <defs
+     id="defs3077">
+    <linearGradient
+       id="linearGradient3965">
+      <stop
+         id="stop3967"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1"
+         id="stop3969" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3885">
+      <stop
+         style="stop-color:#a8b5e9;stop-opacity:1;"
+         offset="0"
+         id="stop3889" />
+      <stop
+         id="stop3891"
+         offset="1"
+         style="stop-color:#1d4488;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3865">
+      <stop
+         style="stop-color:#0e0ec3;stop-opacity:1;"
+         offset="0"
+         id="stop3867" />
+      <stop
+         id="stop3883"
+         offset="0.5"
+         style="stop-color:#95b1e4;stop-opacity:1;" />
+      <stop
+         style="stop-color:#0d29c0;stop-opacity:1;"
+         offset="1"
+         id="stop3869" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3853">
+      <stop
+         style="stop-color:#717171;stop-opacity:1;"
+         offset="0"
+         id="stop3855" />
+      <stop
+         id="stop3861"
+         offset="0.5"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         style="stop-color:#818181;stop-opacity:1;"
+         offset="1"
+         id="stop3857" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3853"
+       id="linearGradient3859"
+       x1="7.7696066"
+       y1="34.979828"
+       x2="11.854106"
+       y2="39.107044"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(4.8388015,1001.6582)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3871"
+       cx="14.801222"
+       cy="1030.6609"
+       fx="14.801222"
+       fy="1030.6609"
+       r="10.177785"
+       gradientTransform="matrix(1,0,0,1.0108042,4.8388015,-13.880529)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3865"
+       id="linearGradient3881"
+       x1="15.012629"
+       y1="11.922465"
+       x2="31.098303"
+       y2="28.858271"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,0.97315436,4.8388015,1002.4769)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3885"
+       id="radialGradient3909"
+       cx="16.437693"
+       cy="22.596292"
+       fx="16.437693"
+       fy="22.596292"
+       r="1.7789712"
+       gradientTransform="matrix(1,0,0,8.3599999,0,-166.30871)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3865"
+       id="linearGradient3927"
+       x1="26.47109"
+       y1="1010.7343"
+       x2="35.294788"
+       y2="1019.8425"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(4.5541661,-2.1347654)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3965"
+       id="radialGradient3995"
+       cx="23.189369"
+       cy="25.704245"
+       fx="23.189369"
+       fy="25.704245"
+       r="37.336674"
+       gradientTransform="matrix(1,0,0,1.0332422,0,-0.85446479)"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter4009"
+       x="-0.19299152"
+       width="1.385983"
+       y="-0.18351803"
+       height="1.3670361">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="3.8667902"
+         id="feGaussianBlur4011" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.2819435"
+     inkscape:cx="18.697469"
+     inkscape:cy="17.287267"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="970"
+     inkscape:window-height="778"
+     inkscape:window-x="284"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata3080">
+    <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,-1004.3622)">
+    <path
+       style="fill:url(#radialGradient3995);stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1.0;filter:url(#filter4009)"
+       d="M -0.85390618,50.988672 14.231769,27.790888 C 12.21393,25.133052 9.5514307,24.605255 9.9622384,18.824874 13.947134,14.236899 17.362759,16.258973 21.347654,16.54779 l 8.966014,-8.6813789 c 1.467204,-2.4778468 -1.023584,-4.6422045 0.569271,-7.25820222 4.802307,-0.84764718 6.662499,1.15219542 11.527733,6.26197842 4.061691,4.1873637 5.648882,7.0611607 4.411848,9.5352857 -1.075122,2.776443 -4.518349,-0.692782 -5.835025,0.56927 l -9.108332,10.104556 c -0.418785,3.74872 2.078647,7.861968 -1.280859,11.243098 -4.132171,0.818036 -6.734336,-1.933944 -9.819921,-3.557942 z"
+       id="path3955"
+       inkscape:connector-curvature="0"
+       transform="translate(0,1004.3622)"
+       sodipodi:nodetypes="ccccccccccccc" />
+    <g
+       id="g3929">
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3083"
+         d="m 3.2884874,1051.0662 c 3.1862139,-6.2911 11.3693156,-15.19 15.4471616,-20.0327 l 2.86533,3.0086 c -3.476851,3.6575 -10.192375,10.8664 -18.3124916,17.0241 z"
+         style="fill:url(#linearGradient3859);fill-opacity:1;stroke:#a5a5a5;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path3863"
+         d="m 11.10078,1023.3294 c 5.038264,10.1095 11.83652,14.8875 18.358981,18.2167 1.196291,-2.5422 1.454996,-5.6203 0,-9.6776 l -8.539061,-8.6814 c -3.704654,-1.8936 -6.871076,-1.3652 -9.81992,0.1423 z"
+         style="fill:url(#radialGradient3871);fill-opacity:1;stroke:none" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path3873"
+         d="m 33.729292,1011.5171 -13.235545,11.4952 c 2.869602,4.2703 6.221839,7.4544 9.108332,9.1408 l 11.385416,-13.0187 z"
+         style="fill:url(#linearGradient3881);fill-opacity:1;stroke:none" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path3893"
+         d="m 33.228885,1011.6148 c 1.843189,2.7806 3.431654,5.6597 7.19852,7.6953 l 5.398891,1.7423 c -7.6738,-4.7914 -10.989683,-9.5828 -13.947133,-14.3741 z"
+         style="fill:url(#linearGradient3927);fill-opacity:1;stroke:none" />
+      <path
+         transform="matrix(0.68275275,-0.5590416,0.45791123,0.47036287,17.42507,1012.2127)"
+         d="m 18.216664,22.596292 a 1.7789712,14.872199 0 1 1 -3.557943,0 1.7789712,14.872199 0 1 1 3.557943,0 z"
+         sodipodi:ry="14.872199"
+         sodipodi:rx="1.7789712"
+         sodipodi:cy="22.596292"
+         sodipodi:cx="16.437693"
+         id="path3901"
+         style="fill:url(#radialGradient3909);fill-opacity:1;stroke:none"
+         sodipodi:type="arc" />
+    </g>
+  </g>
+</svg>
diff --git a/web/images/pin_down.png b/web/images/pin_down.png
deleted file mode 100644
index 81c1ad11f..000000000
Binary files a/web/images/pin_down.png and /dev/null differ
diff --git a/web/images/pin_up.png b/web/images/pin_up.png
deleted file mode 100644
index 8e268c7f8..000000000
Binary files a/web/images/pin_up.png and /dev/null differ
diff --git a/web/viewer.css b/web/viewer.css
index 5a621006b..ddf3b0985 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -105,7 +105,8 @@ span#info {
   width: 15px;
   height: 15px;
   background: center no-repeat;
-  background-image: url('images/pin_up.png');
+  background-image: url('images/pin-up.svg');
+  background-size: 15px 15px;
 }
 
 #pinIcon:hover {
@@ -113,7 +114,8 @@ span#info {
 }
 
 #sidebar.pinned #pinIcon {
-  background-image: url('images/pin_down.png');
+  background-image: url('images/pin-down.svg');
+  background-size: 15px 15px;
 }
 
 #sidebarBox {