--- a/client/digitallibrary/jquery/svg/jquery.digilibSVG.css	Sun Feb 13 16:22:32 2011 +0100
+++ b/client/digitallibrary/jquery/svg/jquery.digilibSVG.css	Sun Feb 13 17:36:31 2011 +0100
@@ -9,32 +9,57 @@
     }
  
 div#svg-toolbar {
-    border: 1px solid black;
-    color: black;
+    color: grey;
     background-color: grey;
     position: fixed;
-    left: 10px;
-    bottom: 10px;
+    left: 8px;
+    bottom: 8px;
+    border: 1px solid black;
+    }
+
+span.svg-label {
+    font-size: 12px;
+    padding: 0px 3px;
+    color: silver;
+    background-color: grey;
+    }
+
+span.svg-number {
+    font-size: 12px;
+    padding: 0px 3px;
+    display: inline-block;
+    width: 50px;
+    background-color: grey;
+    color: white;
     }
 
 select {
-    border: none;
+    font-size: 12px;
+    padding: 0px 3px;
+    margin: 0px;
+    display: inline-block;
     background-color: grey;
     color: lightgreen;
-    font-size: 12px;
+    border: none;
     }
 
-span {
+input.svg-input {
+    width: 50px;
     font-size: 12px;
+    padding: 0px 3px;
+    margin: 0px;
+    display: inline-block;
+    background-color: grey;
+    color: lightgreen;
+    border: none;
     }
 
-span#svg-pixel, span#svg-pixelfactor {
-    width: 50px;
-    background-color: silver;
-    color: white;
+select:hover, select:active, select:focus,
+input.svg-input:hover, input.svg-input:active, input.svg-input:focus {
+    background-color: white;
+    color: black;
     }
 
-
 div.digilib {
     margin: 0px;
 }

--- a/client/digitallibrary/jquery/svg/jquery.digilibSVG.js	Sun Feb 13 16:22:32 2011 +0100
+++ b/client/digitallibrary/jquery/svg/jquery.digilibSVG.js	Sun Feb 13 17:36:31 2011 +0100
@@ -117,25 +117,37 @@
             });
         settings.units = units;
         // unit selects
-        var $unit = $('<select id="svg-unit"/>');
-        var $conv = $('<select id="svg-convert"/>');
+        var $unit1 = $('<select id="svg-convert1"/>');
+        var $unit2 = $('<select id="svg-convert2"/>');
         for (var i = 0; i < units.length; i++) {
             var name = units[i].name;
             var $opt = $('<option value="' + i + '">' + name + '</option>');
-            $unit.append($opt);
-            $conv.append($opt.clone());
+            $unit1.append($opt);
+            $unit2.append($opt.clone());
             }
         // other elements
-        var $px = $('<span id="svg-pixel"/>');
-        var $pxlabel = $('<span id="svg-pixellabel"> px x </span>');
-        var $pxfactor = $('<span id="svg-pixelfactor"/>');
+        var $la1 = $('<span class="svg-label">pixel</span>');
+        var $la2 = $('<span class="svg-label">factor</span>');
+        var $la3 = $('<span class="svg-label">=</span>');
+        var $la4 = $('<span class="svg-label">=</span>');
+        var $px = $('<span id="svg-pixel" class="svg-number">0.0</span>');
+        var $factor = $('<span id="svg-factor" class="svg-number">0.0</span>');
+        var $result1 = $('<input id="svg-unit1" class="svg-input" value="0.0"/>');
+        var $result2 = $('<input id="svg-unit2" class="svg-input" value="0.0"/>');
+        var $angle = $('<span id="svg-angle" class="svg-number">0.0</span>');
         $('body').append($toolbar);
         $toolbar.append($shape);
+        $toolbar.append($la1);
         $toolbar.append($px);
-        $toolbar.append($pxlabel);
-        $toolbar.append($pxfactor);
-        $toolbar.append($unit);
-        $toolbar.append($conv);
+        $toolbar.append($la2);
+        $toolbar.append($factor);
+        $toolbar.append($la3);
+        $toolbar.append($result1);
+        $toolbar.append($unit1);
+        $toolbar.append($la4);
+        $toolbar.append($result2);
+        $toolbar.append($unit2);
+        $toolbar.append($angle);
         };
 
     var actions = {