From: Joris van Zundert <joris.van.zundert@gmail.com>
Date: Tue, 4 Sep 2012 22:18:26 +0000 (+0200)
Subject: Prettier buttons
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=9a422ccdb34887a7d1b88cf42ec0cfaf46165ad1;p=scpubgit%2Fstemmaweb.git

Prettier buttons
---

diff --git a/root/css/style.css b/root/css/style.css
index d575cbb..c54f7ea 100644
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -60,23 +60,28 @@ div.pager_left_button {
   width: 28px;
   height: 28px;
   float: left;
-  background: transparent url('../images/button_left_28.png') no-repeat;    
+  background: transparent url('../images/button_left_28.png') no-repeat left bottom;    
 }
-div.pager_left_button:hover, div.pager_right_button:hover {
-  opacity: 0.8;
+div.pager_left_button:hover {
+    background: transparent url('../images/button_left_28.png') no-repeat center bottom;    
+}
+div.pager_right_button:hover {
+    background: transparent url('../images/button_right_28.png') no-repeat center bottom;    
 }
 div.pager_right_button {
   width: 28px;
   height: 28px;
   float: left;
   margin-left: 10px;
-  background: transparent url('../images/button_right_28.png') no-repeat;
+  background: transparent url('../images/button_right_28.png') no-repeat left bottom;
 }
 div.pager_right_button.greyed_out, div.pager_right_button.greyed_out:hover {
-    opacity: 0.25;
+    opacity: 0.5;
+    background: url("../images/button_right_28.png") no-repeat scroll right bottom transparent;
 }
 div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
-    opacity: 0.25;
+    opacity: 0.5;
+    background: url("../images/button_left_28.png") no-repeat scroll right bottom transparent;
 }
 #topbanner {
 	width: 100%;
diff --git a/root/images/arrows.svg b/root/images/arrows.svg
new file mode 100644
index 0000000..9b631f1
--- /dev/null
+++ b/root/images/arrows.svg
@@ -0,0 +1,105 @@
+<?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="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3782">
+      <stop
+         style="stop-color:#4279b9;stop-opacity:1;"
+         offset="0"
+         id="stop3784" />
+      <stop
+         id="stop3796"
+         offset="1"
+         style="stop-color:#4279b9;stop-opacity:0.77419353;" />
+      <stop
+         style="stop-color:#4279b9;stop-opacity:0;"
+         offset="1"
+         id="stop3786" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3794"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.86620581"
+     inkscape:cx="161.37486"
+     inkscape:cy="651.35246"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1060"
+     inkscape:window-height="701"
+     inkscape:window-x="138"
+     inkscape:window-y="8"
+     inkscape:window-maximized="0" />
+  <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">
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#linearGradient3794);fill-opacity:1;stroke:#3d66b4;stroke-width:5;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path3012"
+       sodipodi:cx="376.35397"
+       sodipodi:cy="371.23074"
+       sodipodi:rx="107.36478"
+       sodipodi:ry="107.36478"
+       d="m 483.71875,371.23074 a 107.36478,107.36478 0 1 1 -214.72955,0 107.36478,107.36478 0 1 1 214.72955,0 z"
+       transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,248.46246,899.65906)" />
+    <path
+       style="fill:#ffccaa;fill-opacity:0.81578944;stroke:#917c6f;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="m -106.27827,119.76007 -28.79355,99.08196 111.893036,89.82678 c 30.4746398,23.40097 11.04706,34.32639 0,47.34693 l -112.798466,84.98987 30.51531,90.52034 155.918036,-129.01588 c 79.533124,-68.85933 69.648744,-69.11694 0,-138.75 z"
+       id="rect2985"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccc" />
+    <path
+       sodipodi:nodetypes="ccccccccc"
+       inkscape:connector-curvature="0"
+       id="path3010"
+       d="m 348.0535,295.32721 -12.6144,43.50166 49.02012,39.4382 c 13.35088,10.27413 4.8397,15.07091 0,20.78754 l -49.41678,37.31456 13.36869,39.74271 68.30739,-56.64407 c 34.8433,-30.23249 30.51297,-30.3456 0,-60.9178 z"
+       style="fill:#ffffff;fill-opacity:0.94247788000000021;stroke:#3d66b4;stroke-width:5;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+  </g>
+</svg>
diff --git a/root/images/b_button_a.png b/root/images/b_button_a.png
index a04e123..c70d53e 100644
Binary files a/root/images/b_button_a.png and b/root/images/b_button_a.png differ
diff --git a/root/images/b_button_a_old.png b/root/images/b_button_a_old.png
new file mode 100644
index 0000000..a04e123
Binary files /dev/null and b/root/images/b_button_a_old.png differ
diff --git a/root/images/b_button_span.png b/root/images/b_button_span.png
index 2d80f72..14883a6 100644
Binary files a/root/images/b_button_span.png and b/root/images/b_button_span.png differ
diff --git a/root/images/b_button_span_old.png b/root/images/b_button_span_old.png
new file mode 100644
index 0000000..2d80f72
Binary files /dev/null and b/root/images/b_button_span_old.png differ
diff --git a/root/images/button_left_28.png b/root/images/button_left_28.png
index 3e08b8c..73ce0d0 100644
Binary files a/root/images/button_left_28.png and b/root/images/button_left_28.png differ
diff --git a/root/images/button_right_28.png b/root/images/button_right_28.png
index 1289bac..2c969b6 100644
Binary files a/root/images/button_right_28.png and b/root/images/button_right_28.png differ
diff --git a/root/images/resources/arrows.svg b/root/images/resources/arrows.svg
new file mode 100644
index 0000000..e3268ca
--- /dev/null
+++ b/root/images/resources/arrows.svg
@@ -0,0 +1,415 @@
+<?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="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="arrows.svg">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient4099">
+      <stop
+         id="stop4101"
+         offset="0"
+         style="stop-color:#c8d8eb;stop-opacity:1;" />
+      <stop
+         style="stop-color:#90a2b7;stop-opacity:0.89803922;"
+         offset="0.5"
+         id="stop4103" />
+      <stop
+         style="stop-color:#e9eef4;stop-opacity:0.79838711;"
+         offset="1"
+         id="stop4105" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4073">
+      <stop
+         id="stop4075"
+         offset="0"
+         style="stop-color:#3681da;stop-opacity:1;" />
+      <stop
+         style="stop-color:#cddef1;stop-opacity:0.89803922;"
+         offset="0.5"
+         id="stop4077" />
+      <stop
+         style="stop-color:#e9eef4;stop-opacity:0.87096775;"
+         offset="1"
+         id="stop4079" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3782">
+      <stop
+         style="stop-color:#0f3f78;stop-opacity:1;"
+         offset="0"
+         id="stop3784" />
+      <stop
+         id="stop3916"
+         offset="0.5"
+         style="stop-color:#83addf;stop-opacity:0.89803922;" />
+      <stop
+         id="stop3796"
+         offset="1"
+         style="stop-color:#e9eef4;stop-opacity:0.79838711;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3092"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3100"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4099"
+       id="linearGradient3108"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4073"
+       id="linearGradient3128"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3130"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4099"
+       id="linearGradient3132"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4073"
+       id="linearGradient4081"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient4133"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient4135"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4099"
+       id="linearGradient4137"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4099"
+       id="linearGradient4139"
+       gradientUnits="userSpaceOnUse"
+       x1="266.4892"
+       y1="371.23074"
+       x2="486.21875"
+       y2="371.23074" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3801"
+       x1="297.53821"
+       y1="70.667694"
+       x2="297.53821"
+       y2="24.233934"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3782"
+       id="linearGradient3820"
+       gradientUnits="userSpaceOnUse"
+       x1="297.53821"
+       y1="70.667694"
+       x2="297.53821"
+       y2="24.233934" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4073"
+       id="linearGradient3824"
+       gradientUnits="userSpaceOnUse"
+       x1="297.53821"
+       y1="70.667694"
+       x2="297.53821"
+       y2="24.233934"
+       gradientTransform="translate(0,36.781734)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4575355"
+     inkscape:cx="259.775"
+     inkscape:cy="905.32393"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1188"
+     inkscape:window-height="733"
+     inkscape:window-x="80"
+     inkscape:window-y="13"
+     inkscape:window-maximized="0" />
+  <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">
+    <g
+       id="g4111"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_right_28.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31"
+       transform="matrix(0.1948543,0,0,0.1948543,13.452384,123.81932)">
+      <path
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,344.6993,814.22902)"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         sodipodi:ry="107.36478"
+         sodipodi:rx="107.36478"
+         sodipodi:cy="371.23074"
+         sodipodi:cx="376.35397"
+         id="path3012"
+         style="fill:url(#linearGradient4081);fill-opacity:1;stroke:#4279b9;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc" />
+      <path
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#4279b9;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         d="m 444.29034,209.89717 -12.6144,43.50166 49.02012,39.4382 c 13.35088,10.27413 4.8397,15.07091 0,20.78754 l -49.41678,37.31456 13.36869,39.74271 68.30739,-56.64407 c 34.8433,-30.23249 30.51297,-30.3456 0,-60.9178 z"
+         id="path3010"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <g
+       id="g4115"
+       transform="matrix(0.1948543,0,0,0.1948543,12.867818,123.81932)"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_right_28.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31">
+      <path
+         sodipodi:type="arc"
+         style="fill:url(#linearGradient4133);fill-opacity:1;stroke:#4279b9;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         id="path3096"
+         sodipodi:cx="376.35397"
+         sodipodi:cy="371.23074"
+         sodipodi:rx="107.36478"
+         sodipodi:ry="107.36478"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,124.93524,814.22902)" />
+      <path
+         sodipodi:nodetypes="ccccccccc"
+         inkscape:connector-curvature="0"
+         id="path3098"
+         d="m 224.52628,209.89717 -12.6144,43.50166 49.02012,39.4382 c 13.35088,10.27413 4.8397,15.07091 0,20.78754 l -49.41678,37.31456 13.36869,39.74271 68.30739,-56.64407 c 34.8433,-30.23249 30.51297,-30.3456 0,-60.9178 z"
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#4279b9;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    </g>
+    <g
+       id="g4107"
+       transform="matrix(0.1948543,0,0,0.1948543,14.036944,123.81932)"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_right_28.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31">
+      <path
+         sodipodi:type="arc"
+         style="fill:url(#linearGradient4137);fill-opacity:1;stroke:#cfdae5;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         id="path3104"
+         sodipodi:cx="376.35397"
+         sodipodi:cy="371.23074"
+         sodipodi:rx="107.36478"
+         sodipodi:ry="107.36478"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,564.46336,814.22902)" />
+      <path
+         sodipodi:nodetypes="ccccccccc"
+         inkscape:connector-curvature="0"
+         id="path3106"
+         d="m 664.0544,209.89717 -12.6144,43.50166 49.02012,39.4382 c 13.35088,10.27413 4.8397,15.07091 0,20.78754 l -49.41678,37.31456 13.36869,39.74271 68.30739,-56.64407 c 34.8433,-30.23249 30.51297,-30.3456 0,-60.9178 z"
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#cfdae5;stroke-width:6.81539726;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    </g>
+    <g
+       id="g4123"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_left.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31"
+       transform="matrix(0.19485407,0,0,0.19485407,13.4498,131.38974)">
+      <path
+         sodipodi:type="arc"
+         style="fill:url(#linearGradient3128);fill-opacity:1;stroke:#4279b9;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         id="path3112"
+         sodipodi:cx="376.35397"
+         sodipodi:cy="371.23074"
+         sodipodi:rx="107.36478"
+         sodipodi:ry="107.36478"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,344.6993,1058.229)" />
+      <path
+         sodipodi:nodetypes="ccccccccc"
+         inkscape:connector-curvature="0"
+         id="path3114"
+         d="m 506.47974,453.89717 12.6144,43.50166 -49.02012,39.4382 c -13.35088,10.27413 -4.8397,15.07091 0,20.78754 l 49.41678,37.31456 -13.36869,39.74271 -68.30739,-56.64407 c -34.8433,-30.23249 -30.51297,-30.3456 0,-60.9178 z"
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#4279b9;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+    </g>
+    <g
+       id="g4127"
+       transform="matrix(0.19485407,0,0,0.19485407,14.034359,131.38974)"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_left.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31">
+      <path
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,564.46336,1058.229)"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         sodipodi:ry="107.36478"
+         sodipodi:rx="107.36478"
+         sodipodi:cy="371.23074"
+         sodipodi:cx="376.35397"
+         id="path3124"
+         style="fill:url(#linearGradient4139);fill-opacity:1;stroke:#cfdae5;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc" />
+      <path
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#cfdae5;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         d="m 726.2438,453.89717 12.6144,43.50166 -49.02012,39.4382 c -13.35088,10.27413 -4.8397,15.07091 0,20.78754 l 49.41678,37.31456 -13.36869,39.74271 -68.30739,-56.64407 c -34.8433,-30.23249 -30.51297,-30.3456 0,-60.9178 z"
+         id="path3120"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <g
+       id="g4119"
+       transform="matrix(0.19485407,0,0,0.19485407,12.865234,131.38974)"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/button_left.png"
+       inkscape:export-xdpi="11.31"
+       inkscape:export-ydpi="11.31">
+      <path
+         transform="matrix(-0.50578508,-0.86265952,0.86265952,-0.50578508,124.93524,1058.229)"
+         d="m 483.71875,371.23074 c 0,59.29593 -48.06885,107.36478 -107.36478,107.36478 -59.29593,0 -107.36477,-48.06885 -107.36477,-107.36478 0,-59.29593 48.06884,-107.36477 107.36477,-107.36477 59.29593,0 107.36478,48.06884 107.36478,107.36477 z"
+         sodipodi:ry="107.36478"
+         sodipodi:rx="107.36478"
+         sodipodi:cy="371.23074"
+         sodipodi:cx="376.35397"
+         id="path3118"
+         style="fill:url(#linearGradient4135);fill-opacity:1;stroke:#4279b9;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         sodipodi:type="arc" />
+      <path
+         style="fill:#ffffff;fill-opacity:0.9424779;stroke:#4279b9;stroke-width:6.81540537;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+         d="m 286.71568,453.89717 12.6144,43.50166 -49.02012,39.4382 c -13.35088,10.27413 -4.8397,15.07091 0,20.78754 l 49.41678,37.31456 -13.36869,39.74271 -68.30739,-56.64407 c -34.8433,-30.23249 -30.51297,-30.3456 0,-60.9178 z"
+         id="path3126"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <g
+       id="g3810"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/b_button_span.png"
+       inkscape:export-xdpi="58.725574"
+       inkscape:export-ydpi="58.725574">
+      <rect
+         rx="11.908121"
+         ry="11.90812"
+         y="35.411461"
+         x="42.273376"
+         height="35.453724"
+         width="459.02725"
+         id="rect3025"
+         style="fill:url(#linearGradient3801);fill-opacity:1;stroke:#4279b9;stroke-width:1.32800961000000006;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path3803"
+         d="m 60.050575,53.138328 -9.385942,8.383992 0,-16.767994 z"
+         inkscape:transform-center-y="0.49134439"
+         inkscape:transform-center-x="0.00061317797"
+         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+    </g>
+    <rect
+       rx="11.908121"
+       ry="11.90812"
+       y="72.193192"
+       x="42.273376"
+       height="35.453724"
+       width="459.02725"
+       id="rect3816"
+       style="fill:url(#linearGradient3824);fill-opacity:1.0;stroke:#4279b9;stroke-width:1.32800961000000006;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/b_button_span.png"
+       inkscape:export-xdpi="58.725574"
+       inkscape:export-ydpi="58.725574" />
+    <path
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path3818"
+       d="m 60.050575,89.920062 -9.385942,8.383992 0,-16.767994 z"
+       inkscape:transform-center-y="0.49134439"
+       inkscape:transform-center-x="0.00061317797"
+       style="fill:#4279b9;fill-opacity:1;stroke:none"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmatology/stemmaweb/root/images/resources/b_button_span.png"
+       inkscape:export-xdpi="58.725574"
+       inkscape:export-ydpi="58.725574" />
+  </g>
+</svg>