From 5f4a33e78c18274f03832224cd6ef46b275e91d2 Mon Sep 17 00:00:00 2001
From: Can Erten <can@codingday.com>
Date: Fri, 7 Mar 2014 19:53:24 +0000
Subject: [PATCH 1/2] various changes before vector code release

some changes from other forks as well
---
 editor/.DS_Store                     | Bin 21508 -> 15364 bytes
 editor/css/method-draw.compiled.css  | 417 ---------------------------
 editor/css/method-draw.css           |  84 +++---
 editor/embedapi.html                 |  39 ++-
 editor/extensions/ext-shapes.js      |  13 +-
 editor/images/.DS_Store              | Bin 21508 -> 0 bytes
 editor/index.html                    | 103 ++++---
 editor/lib/jgraduate/css/jPicker.css |  95 +++---
 editor/lib/jquery-draginput.js       |   3 +
 editor/src/embedapi.js               |  32 --
 editor/src/method-draw.js            | 118 +++++---
 editor/src/svgcanvas.js              |  25 +-
 12 files changed, 284 insertions(+), 645 deletions(-)
 delete mode 100644 editor/css/method-draw.compiled.css
 delete mode 100644 editor/images/.DS_Store

diff --git a/editor/.DS_Store b/editor/.DS_Store
index c887e8d71a086fee01a47b23bd8cc840344a1578..82b0049a50d2ff1ba975f215649157f8ac460cfb 100644
GIT binary patch
delta 801
zcmZo!!PrtU!JkoiW58~HMxo6-0z&LM42KyQ7^gBYFmU|;4<s2Fm>F^yG8vLQbMlju
za`KaaA_71RRK=vaSw;LDBUlGh?td@<X#nadW+-Av#-d~E<R22UQg@OHax#lc3=D2C
zGBLBTvaxe;f&d>s=i~x$wfgAbjQsMD#H6sy)be-%5$F88lElos)FO~@aArzsQesg|
zcxGNoez{YAX<kZk3{)^YGo>U0tQjf*HZ@*AqPp7H*i=Ws#L%=>N1@u>+yKZnGpMZ<
zsORL6R5!NwPRg(8=<Mq5>0Pmkfk6)B1x7{?2?T-=3Qn$`d{k10Uj*pGGKO@9RE88_
z*py5*k<d_JiUTUrKnez7G({~EYBo$y&=henlmJc1Whh|KV@L*SD8>?Me<6l$y!e7;
zGPi<<HZbfNw2>@g#-)=%cXEWnK!mrssWC8&jZLT#-l~eByo{i*T?)kPz(hHDy^`eQ
z1&VxZphU>9cXETG!saWAo0uo>Q<Y)`rC!#}cU2V_xxgve7ZgsD+11Za-k>hJnN8z6
Q%j8umcZg6bVepR|0R6+~0RR91

delta 373
zcmZpvXj#EH!JkoXW58~HM&8Xl0z&L;OmPehj1`-`#LqEGFlT|-|G|I(1eh6$8HyN^
zC-bT8o9rm1x$%k=+hlG94^}szoW|rj1=-1xYMUolD+aMKfP`jDW>->}d`LowiDAZO
zcBM<q;XDlK42cXmK$r+LD1{-PK@VtT8AG~fPJVJyPJR+lmjKYx8z9|C7PB&BG9&|4
z=P?wcs$@6=RQ+P}4^;(5E~Y0ST|mq<SxNo;<aKItlcgktH?wPeW0@SF+BqPWvl{&8
O-Yj771wu@GAO-+DwrBnT

diff --git a/editor/css/method-draw.compiled.css b/editor/css/method-draw.compiled.css
deleted file mode 100644
index 67de0b22..00000000
--- a/editor/css/method-draw.compiled.css
+++ /dev/null
@@ -1,417 +0,0 @@
-#svg_editor .jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}
-#svg_editor .jPicker .Icon span.Color,#svg_editor .jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}
-#svg_editor .jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}
-#svg_editor .jPicker.Container{z-index:10}
-table#svg_editor .jPicker{width:545px;z-index:20}
-#svg_editor .jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}
-#svg_editor .jPicker .Title{display:none}
-#svg_editor .jPicker div.Map{border:solid #000 1px;cursor:crosshair;height:260px;margin:0;overflow:hidden;padding:0;position:relative;width:260px}
-#svg_editor .jPicker div[class="Map"]{height:256px;width:256px}
-#svg_editor .jPicker div.Bar{border:solid #000 1px;cursor:n-resize;height:260px;margin:0 15px;overflow:hidden;padding:0;position:relative;width:24px}
-#svg_editor .jPicker div[class="Bar"]{height:256px;width:20px}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Map .Map3,#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4,#svg_editor .jPicker .Bar .Map5,#svg_editor .jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Map .Map3{height:2596px;width:256px}
-#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4{height:3896px;width:20px}
-#svg_editor .jPicker .Bar .Map5,#svg_editor .jPicker .Bar .Map6{height:256px;width:20px}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Bar .Map6{background-repeat:no-repeat}
-#svg_editor .jPicker .Map .Map3,#svg_editor .jPicker .Bar .Map5{background-repeat:repeat}
-#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4{background-repeat:repeat-x}
-#svg_editor .jPicker .Map .Arrow{display:block;position:absolute}
-#svg_editor .jPicker .Bar .Arrow{display:block;left:0;position:absolute}
-#svg_editor .jPicker .Preview{font-size:9px;text-align:center}
-#svg_editor .jPicker .Preview div.bgt{height:62px;margin:0 auto;padding:0;width:62px}
-#svg_editor .jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}
-#svg_editor .jPicker .Preview .Active{border-bottom-width:0}
-#svg_editor .jPicker .Preview .Current{border-top-width:0;cursor:pointer}
-#svg_editor .jPicker .Button{text-align:center;width:115px}
-#svg_editor .jPicker .Button input{width:100px}
-#svg_editor .jPicker td.Radio{margin:0;padding:0;width:31px}
-#svg_editor .jPicker td.Radio input{margin:0 5px 0 0;padding:0}
-#svg_editor .jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}
-#svg_editor .jPicker tr.Hex td.Text{width:100px;color:#666}
-#svg_editor .jPicker tr.Hex td.Text span{width:100px;color:#333}
-#svg_editor .jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:15px;margin:0 0 0 5px;text-align:left;width:30px;color:#333}
-#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex{width:50px;display:inline-block;float:none}
-#svg_editor .jPicker tr.Hex td.Text input.AHex{width:20px;display:none}
-#svg_editor .jPicker .Grid{text-align:center;float:right;width:108px}
-#svg_editor .jPicker .Grid span.QuickColor{cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:18px}
-#svg_editor .jPicker td{vertical-align:top}
-#svg_editor .jPicker td.colorsquare{width:275px}
-#svg_editor .jPicker .prev_div{margin-top:-15px}
-#svg_editor .jPicker .actions{position:absolute;bottom:20px;left:20px;right:20px}
-#svg_editor .jPicker .actions .Ok{position:absolute;top:0;right:0}
-#svg_editor .jPicker .actions .Cancel{position:absolute;top:0;left:0}
-#svg_editor .jPicker .color_preview{width:62px;margin:0 auto}
-h2.jGraduate_Title{display:none}
-.jGraduate_Picker{position:absolute;padding:20px}
-.jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
-li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
-.jGraduate_colPick{display:none}
-.jGraduate_gradPick{display:none;overflow:visible}
-.jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
-div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
-div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
-div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
-.jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
-div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
-div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
-div.jGraduate_StopSection{width:120px;float:left}
-div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
-input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
-input.jGraduate_Ok{margin:0 0 5px 0}
-.colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
-.colorBox+label{float:left;margin-top:7px}
-label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
-div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
-div.jGraduate_Form label{padding:0 2px;color:#333}
-div.jGraduate_StopSection input[type=text],div.jGraduate_Slider input[type=text]{width:33px;color:#333}
-div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
-div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
-.jGraduate_gradPick{width:526px}
-.jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
-.jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
-.jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
-.jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
-.jGraduate_gradPick .jGraduate_Form label,.jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
-.jGraduate_gradPick .jGraduate_Form label{clear:left}
-.jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
-.jGraduate_Colorblocks{display:table;border-spacing:0 5px}
-.jGraduate_colorblock{display:table-row}
-.jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
-.jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
-.jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
-.jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
-.jGraduate_Slider label.prelabel{width:40px;text-align:left}
-.jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
-div.jGraduate_Slider input{margin-top:5px}
-div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
-.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
-.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
-body{background:#3f3f3c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
-::selection{background:#000;color:#fff}
-::-moz-selection{background:#000;color:#fff}
-html,body{overflow:hidden;width:100%;height:100%}
-::-webkit-scrollbar{width:5px;height:5px;background:#444}
-::-webkit-scrollbar-track{border-radius:10px;background:#444}
-::-webkit-scrollbar-thumb{border-radius:10px;background:#666}
-::-webkit-scrollbar-corner{background:#444}
-#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
-#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
-#svg_editor{background:#2f2f2c}
-#menu_bar{padding:0 0 0 50px;background:#2f2f2c;position:relative;z-index:2}
-#menu_bar.active .menu.open .menu_list{display:block}
-.menu{position:relative;z-index:5;color:#333;display:inline-block}
-.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
-.touch .menu_title{padding:7px 17px;height:26px;line-height:26px}
-.menu .menu_title:hover{background:rgba(255,255,255,0.1)}
-.menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
-.menu_list{display:none;position:absolute;top:28px;left:0;white-space:nowrap;background:white;padding:7px 0;border-radius:0 3px 3px 3px;box-shadow:0 0 20px rgba(0,0,0,0.8)}
-.touch .menu_list{top:38px}
-#menu_bar.active .menu.open .menu_title{background:white;color:#333}
-.menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
-.menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
-.menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
-.menu_list .menu_item:hover,.menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
-.menu_list .menu_item.disabled:hover,.menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
-.menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
-.menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
-#svgcanvas{line-height:normal;display:inline-block;background-color:#a0a0a0;text-align:center;vertical-align:middle;width:640px;height:480px;position:relative;background:#3f3f3c}
-#rulers>div{position:absolute;background:#2f2f2c;z-index:1;overflow:hidden;-webkit-font-smoothing:none}
-#rulers #ruler_corner{top:30px;left:50px;width:15px;height:15px;border:solid #444 1px;z-index:2}
-#ruler_x{height:15px;top:30px;left:66px;right:175px;border-top:solid #444 1px;border-right:solid #444 1px}
-#ruler_x_cursor{height:15px;border-right:dotted #999 1px;position:absolute;background:#2f2f2c}
-#ruler_y_cursor{width:15px;border-top:dotted #999 1px;position:absolute;background:#2f2f2c}
-#rulers.moved #ruler_corner,#rulers.moved #ruler_x{top:101px}
-#ruler_y{width:15px;top:46px;left:50px;bottom:40px;border-left:solid #444 1px;border-bottom:solid #444 1px}
-#rulers.moved #ruler_y{top:116px}
-#ruler_x canvas:first-child{margin-left:-16px}
-#ruler_x canvas{float:left}
-#ruler_y canvas{margin-top:-16px}
-#ruler_x>div,#ruler_y>div{overflow:hidden}
-#palette{display:block;position:absolute;z-index:2;left:10px;bottom:5px;width:410px;right:145px;height:30px}
-.palette_item{height:20%;width:5.2%;float:left;cursor:url(../images/eyedropper.png) 0 16,crosshair}
-.palette_item.transparent,.palette_item.white,.palette_item.black{background:#fff;position:absolute;width:10px;height:10px;left:-10px;top:0}
-.palette_item.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==)}
-.palette_item.black{background:#000;top:10px}
-.palette_item.white{background:#fff;top:20px}
-#color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
-.touch #color_tools{width:auto;height:auto}
-#tool_fill{position:absolute;top:0;left:0;z-index:1}
-.touch #tool_fill{position:static;width:36px;height:36px;margin-bottom:10px}
-#tool_fill.active,#tool_stroke.active{z-index:2}
-#tool_stroke{top:14px;left:14px}
-.touch #tool_fill.active,.touch #tool_stroke.active{outline:4px solid #09f}
-#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c;position:absolute}
-.touch #tool_fill,.touch #tool_stroke,.touch #tool_canvas{position:relative;top:0;left:0}
-#color_canvas_tools{float:left;cursor:pointer}
-#tool_fill .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
-.touch #tool_eyedropper{margin-top:6px}
-.touch #tool_fill .color_block{width:36px;height:36px}
-.touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
-.touch #tool_switch{display:none}
-#use_panel .tool_button,#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
-#use_panel .tool_button{padding-left:10px;margin-bottom:10px;width:124px}
-#path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px}
-#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
-#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
-.touch #color_tools #tool_fill .color_block>div{position:relative}
-#color_tools #tool_fill .color_block #fill_bg,#color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px}
-.touch #color_tools #tool_fill .color_block #fill_bg,.touch #color_tools #tool_stroke .color_block #stroke_bg{width:36px;height:36px;right:auto;bottom:auto}
-.touch #tool_stroke{position:relative;top:0;left:0;z-index:0}
-#stroke_color:after{content:'';position:absolute;display:block;width:8px;height:8px;left:8px;top:8px;background:#ccc;box-shadow:0 0 0 1px #000}
-.touch #stroke_color:after{height:14px;left:10px;position:absolute;top:10px;width:14px}
-#color_tools #tool_switch{cursor:pointer;opacity:.7;width:11px;height:11px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;position:absolute;top:-2px;left:28px}
-#color_tools #cross:hover{opacity:1}
-#color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
-#color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
-.touch #color_tools #tool_stroke .color_block{width:36px;height:36px}
-#color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
-.touch #color_tools #tool_stroke .color_block>div{position:relative}
-#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
-#linkLabel>svg{height:20px;padding-top:4px}
-div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-moz-transition:-moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-o-transition:-o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-ms-transition:-ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);transition:transform 500ms cubic-bezier(0.13,0.66,0.24,0.92)}
-.touch div#workarea{top:40px}
-.menu .menu_list{display:none;position:absolute}
-.tool_button,.tool_button_current,.tool_button_pressed{cursor:pointer}
-.tool_button:hover,.push_button:hover,.buttonup:hover,.buttondown,.tool_button_current,.push_button_pressed{background-color:#fff}
-.tool_button.disabled,.tool_button.disabled:hover{opacity:.3;background-color:#aaa}
-#tools_left .tool_button{background:#2f2f2c;position:relative}
-#tools_left .tool_button.loaded{background:#ccc}
-#tools_left .tool_button.loaded:hover{background:#fff}
-#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0}
-#tools_left .tool_button_current{background-color:#0cf}
-#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
-#tools_top{position:absolute;width:160px;height:100%;background:#2f2f2c;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 15px}
-.touch #tools_top{top:30px}
-label{display:block;color:#999}
-div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
-div#font-selector img{width:100%}
-div#font-selector .font-item{border-bottom:solid #ddd 1px;padding:5px 10px;margin:0 -10px}
-div#font-selector .font-item:hover{background-color:#eee}
-#tools_top #marker_panel *{float:left}
-#tools_top #marker_panel h4{float:none}
-#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
-#tools_top #marker_panel .dropdown button{margin-top:2px}
-#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
-#tools_top #marker_panel .dropdown .icon_label img{float:none}
-#color_picker input[type=text],#color_picker input[type=number]{width:30px;background:#fff}
-.dropdown_set input[type=text],.dropdown_set input[type=number]{width:50px}
-input[type=text].wide,input[type=number].wide{width:110px}
-input[type=text].tuco,input[type=number].tuco{width:150px}
-input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;border-radius:3px;padding:7px 17px;border:0;line-height:140%;font-size:14px;font-weight:bold;font-family:sans-serif}
-input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
-input[type=submit]:hover,button:hover{background:#2f84c1}
-input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
-#tools_left{position:absolute;border-right:0;width:50px;top:30px;bottom:0;left:0;background:#2f2f2c;z-index:4}
-#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
-#workarea.wireframe #svgcontent text{fill:#000;stroke:none}
-#workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
-#workarea #canvasBackground>rect{stroke:transparent!important}
-.context_panel{display:none}
-#canvas_panel{display:block}
-#multiselected_panel .selected_tool{vertical-align:12px}
-#cur_context_panel{position:absolute;top:47px;left:68px;line-height:22px;overflow:auto;border-bottom:0;border-right:0;padding-left:5px;font-size:12px;background:black;color:#999;opacity:.5;padding:0 10px;border-radius:0 10px 10px 0}
-#cur_context_panel a{float:none;text-decoration:none;color:#fff}
-#cur_context_panel a:hover{text-decoration:underline}
-#tools_left .tool_button,#tools_left .tool_button_current{position:relative;z-index:11}
-.flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
-.dropdown{position:relative;float:left}
-.dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
-.dropdown button:hover{background-color:#666}
-.dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
-.dropdown button.down{border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #fff;border-bottom:1px solid #fff;background-color:#b0b0b0}
-.dropdown ul{list-style:none;position:absolute;margin:0;padding:0;left:-80px;top:26px;z-index:4;display:none}
-.dropup ul{top:auto;bottom:26px;border-radius:3px;box-shadow:0 5px 10px #000}
-.dropup ul:after{content:'';display:block;position:absolute;bottom:-10px;right:50%;top:auto;width:0;height:0;border:solid transparent 5px;border-top-color:#fff}
-.dropdown li{display:block;width:120px;padding:5px 10px;color:#333;background:#fff;margin:0;line-height:16px}
-.dropdown li:first-child{border-radius:3px 3px 0 0}
-.dropdown li:last-child{border-radius:0 0 3px 3px}
-.dropdown li:hover{background-color:#ddd;color:#000}
-.dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important}
-.dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff}
-.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
-.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
-#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
-#tool_image{overflow:hidden}
-#tool_open input,#tool_import input,#tool_import_bitmap input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
-.disabled{opacity:.5;cursor:default}
-.width_label{padding-right:5px}
-#text{position:absolute;left:-9999px}
-#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
-#url_notice{padding-top:4px;display:none}
-#color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
-.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
-.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
-.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
-#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible;background:#2f2f2c}
-#tools_bottom_1{width:115px;float:left}
-#tools_bottom_2{position:relative;float:left;margin-top:5px}
-#tools_bottom input[type=text]{width:3.2em}
-#tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
-#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
-#tools_top.multiselected #align_tools{display:none}
-#tools_top.multiselected #multiselected_panel{display:block!important}
-#tools_top.multiselected #multiselected_panel .hidable{display:none}
-.draginput_cell{float:left;height:26px;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background:#ddd;cursor:pointer;position:relative}
-.draginput_cell:hover{background:#fff}
-.draginput_cell:after{content:'';position:absolute;top:0;left:0;border:solid #3f3f3c 1px;height:26px;width:26px;z-index:0}
-.align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
-.align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
-.align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
-.align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
-.align_buttons .push_button{display:block;float:left}
-#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
-#option_lists .optcols2{width:70px;margin-left:-15px}
-#option_lists .optcols3{width:192px;margin-left:-105px;margin-top:-25px;background:#fff;padding:5px;box-shadow:0 5px 10px #000;border-radius:3px}
-#option_lists .optcols3:after{content:'';display:block;position:absolute;top:-10px;right:70px;border:solid transparent 5px;border-bottom-color:#fff}
-#option_lists .tool_button,#option_lists .push_button,#option_lists .tool_button_current,#option_lists .push_button_pressed{border:0;background:transparent}
-#option_lists .tool_button:hover{background:#ddd}
-#option_lists ul li.current{background-color:#f4e284}
-#option_lists .optcols4{width:130px;margin-left:-44px}
-#option_lists ul[class^=optcols] li{float:left}
-ul li.current{background-color:#f4e284}
-#option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
-#copyright{text-align:right;padding-right:.3em}
-#svg_source_editor{display:none}
-#svg_source_editor #svg_source_overlay{position:absolute;top:0;right:0;left:0;bottom:0;background-color:black;opacity:.6;z-index:5}
-#svg_source_editor #svg_source_container{position:absolute;top:30px;left:100px;right:100px;bottom:30px;background-color:#fff;border-radius:3px;opacity:1.0;text-align:center;z-index:6;padding:15px 0}
-#svg_source_editor form{position:absolute;display:block;top:15px;bottom:55px;left:15px;right:12px;padding:5px;font-size:12px}
-#svg_source_textarea{width:100%;height:100%;line-height:140%;font-family:'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;font-size:12px}
-#svg_source_editor #tool_source_back{position:absolute;bottom:45px;left:15px;right:15px}
-#svg_source_editor #tool_source_back #tool_source_save{display:block;position:absolute;right:0}
-#svg_source_editor #tool_source_back #tool_source_cancel{display:block;position:absolute;left:0}
-button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
-#shape_buttons{overflow:auto;top:0;bottom:0;left:110px;right:0;position:absolute;vertical-align:top}
-#shape_cats{min-width:110px;display:block;position:absolute;left:0;top:0;height:300px;background:#eee;border-radius:3px 0 0 3px;z-index:2}
-#shape_cats>div{line-height:1em;padding:0 .5em;border-bottom:1px solid #ddd;background:#e8e8e8;color:#444;height:26px;line-height:26px}
-#shape_cats>div:first-child{border-radius:3px 0 0 0}
-#shape_cats>div:last-child{border-radius:0 0 0 3px}
-#shape_cats div:hover{background:#efefef;color:#000}
-#shape_cats div.current{font-weight:bold;background:#3f3f3c;color:#fff;position:relative}
-#shape_cats div.current:after{content:'';position:absolute;right:-26px;top:0;border:solid transparent 13px;border-left-color:#3f3f3c}
-.toolbar_button button .svg_icon{display:none}
-#dialog_box{display:none}
-#dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6}
-#dialog_content{height:95px;margin:10px 10px 5px 10px;overflow:auto;text-align:left;font-size:13px}
-#dialog_buttons input:last-child{background:#999!important;position:absolute;left:10px;bottom:10px}
-#dialog_buttons input:first-child{position:absolute;right:10px;bottom:10px}
-#dialog_content.prompt{height:75px}
-#dialog_content p{margin:10px;line-height:1.3em}
-#dialog_container{position:absolute;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#fff}
-#dialog_container,#dialog_content{border-radius:3px}
-#dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px}
-#dialog_buttons input[type=button]{margin:0 1em}
-.invisible{visibility:none}
-.ui-slider{position:relative;text-align:left}
-.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}
-.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0}
-.ui-slider-horizontal{height:.8em}
-.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}
-.ui-slider-horizontal .ui-slider-range{top:0;height:100%}
-.ui-slider-horizontal .ui-slider-range-min{left:0}
-.ui-slider-horizontal .ui-slider-range-max{right:0}
-.ui-slider-vertical{width:.8em;height:100px}
-.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}
-.ui-slider-vertical .ui-slider-range{left:0;width:100%}
-.ui-slider-vertical .ui-slider-range-min{bottom:0}
-.ui-slider-vertical .ui-slider-range-max{top:0}
-.ui-slider{background:#3f3f3c;border-radius:10px}
-.ui-slider-handle{box-shadow:0 3px 3px rgba(0,0,0,0.3);border-radius:30px;background:#fff;background-image:-ms-linear-gradient(top,#ccc 0,#fff 100%);background-image:-moz-linear-gradient(top,#ccc 0,#fff 100%);background-image:-o-linear-gradient(top,#ccc 0,#fff 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(1,#fff));background-image:-webkit-linear-gradient(top,#ccc 0,#fff 100%);background-image:linear-gradient(top,#ccc 0,#fff 100%)}
-.ui-slider-handle:focus{outline:0}
-#shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
-.tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
-.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px 'Lucida Sans','Lucida Grande',Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
-.touch .contextMenu{border:solid 5px rgba(0,0,0,.7);padding:0;margin:0 0 0 20px;font:18px/24px sans-serif;border-radius:5px;-webkit-box-shadow:2px 5px 20px 3px #000;box-shadow:2px 5px 20px rgba(0,0,0,0.5)}
-.touch .contextMenu:after{content:'';width:0;height:0;border:solid transparent 10px;border-right-color:rgba(0,0,0,.7);position:absolute;top:50%;left:-25px;margin-top:-10px;z-index:1000}
-.contextMenu LI{list-style:none;padding:0;margin:0}
-.contextMenu .shortcut{width:115px;text-align:right;float:right}
-.touch .contextMenu .shortcut{display:none}
-.touch .shortcut{display:none}
-.contextMenu A{-moz-user-select:none;-webkit-user-select:none;color:#222;text-decoration:none;display:block;line-height:20px;height:20px;background-position:6px center;background-repeat:no-repeat;outline:0;padding:0 15px 1px 20px}
-.touch .contextMenu A{padding:0 15px;border-bottom:#;font-weight:bold;border-top:solid 1px #e3e3e3;height:40px;line-height:40px;min-width:200px}
-.contextMenu LI.hover A{background-color:#2e5dea;color:white;cursor:default}
-.contextMenu LI.disabled A{color:#999}
-.touch .contextMenu LI.disabled A{display:none}
-.contextMenu LI.hover.disabled A{background-color:transparent}
-.contextMenu LI.separator{border-top:solid 1px #e3e3e3;padding-top:5px;margin-top:5px}
-.touch .contextMenu LI.separator{border-top:0;margin:0;padding:0}
-#menu{display:none;position:absolute;top:0;left:0;right:0;height:30px;background:#000;z-index:10;color:#fff}
-#workarea.rect,#workarea.line,#workarea.ellipse,#workarea.path,#workarea.shapelib{cursor:crosshair}
-#workarea.text{cursor:text}
-#workarea.eyedropper{cursor:url(../images/eyedropper.png) 0 16,crosshair}
-#workarea.fhpath{cursor:url(../images/pencil_cursor.png) 0 20,crosshair}
-#workarea.rotate *{cursor:url(../images/rotate.png) 12 12,auto}
-#workarea.select text,#workarea.multiselect text{cursor:default}
-#workarea.n-resize *{cursor:n-resize!important}
-#workarea.e-resize *{cursor:e-resize!important}
-#workarea.w-resize *{cursor:w-resize!important}
-#workarea.s-resize *{cursor:s-resize!important}
-#workarea.ne-resize *{cursor:ne-resize!important}
-#workarea.se-resize *{cursor:se-resize!important}
-#workarea.nw-resize *{cursor:nw-resize!important}
-#workarea.sw-resize *{cursor:sw-resize!important}
-#workarea.copy{cursor:copy}
-#workarea.zoom{cursor:crosshair;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}
-#workarea.zoom.out{cursor:crosshair;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}
-#selectorRubberBand{shape-rendering:crispEdges}
-.clearfix:before,.clearfix:after{content:"";display:table}
-.clearfix:after{clear:both}
-.clearfix{*zoom:1}
-#group_title{display:none}
-#base_unit_container{display:none;position:absolute;z-index:20}
-.draginput{background:#3f3f3c;border-radius:3px;-webkit-font-smoothing:antialiased;width:70px;height:70px;display:block;position:relative;float:left;margin:0 5px 5px 0}
-.draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
-.draginput label{margin:28px 10px 0 5px;font-size:14px;color:white;font-weight:bold;font-family:sans-serif}
-.draginput label#resolution_label,.draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
-.draginput label#seg_type_label{margin-top:40px}
-.draginput label#seg_type_label .caret{top:66%}
-.draginput label#resolution_label .pull{position:relative;left:-15px}
-.draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
-.touch .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
-.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
-.draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2}
-.draginput.twocol{width:145px}
-#tool_font_family .caret{right:40px;top:55%}
-#tool_font_family select{width:110px}
-#tool_bold,#tool_italic{font:bold 20px/35px serif;text-align:center;position:absolute;padding:0;color:#ccc;background:transparent;border:0;width:35px;height:35px;margin:0;top:0;right:0}
-#tool_italic{border-top:solid #2f2f2c 2px;top:35px;font-weight:bold;font-style:italic;font-size:24px}
-#tool_bold:hover,#tool_italic:hover{color:#fff}
-#tool_bold.active,#tool_italic.active{color:#50a0ff}
-#preview_font{font-size:20px;color:#fff;height:70px;line-height:75px;padding:0 0 0 10px;white-space:nowrap;width:100px;overflow:hidden;border-right:solid #2f2f2c 2px;position:relative}
-#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:15px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)}
-.draginput input,.draginput input:hover,.draginput input:active{cursor:url(../images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab}
-.draginput input[type="checkbox"],.draginput input[type="checkbox"]:hover,.draginput input[type="checkbox"]:active{cursor:pointer}
-.draginput.checkbox{cursor:pointer}
-.draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
-.draginput.error{background:#900}
-.draginput.error input{color:#fff}
-.draginput.stroke_tool{text-align:center}
-.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0}
-.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
-.draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.draginput input:focus{background:#50a0ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #50a0ff}
-.draginput input:focus+span{z-index:10;color:#fff}
-.draginput .push_bottom{bottom:0;position:absolute}
-#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
-#zoom_panel{padding:9px 0;right:175px;position:absolute}
-#zoom_label img,#zoom_label svg{width:16px;height:16px}
-#logo svg{pointer-events:none}
-#zoomLabel{width:16px;height:16px;cursor:pointer;background:#ccc}
-#zoomLabel:after{content:'';position:absolute;border-left:solid #2f2f2c 1px;left:0;height:16px}
-#zoom_label input{color:#ccc;font-size:13px;height:auto;width:auto;padding:0;cursor:default;position:static}
-#zoom_label span{top:0;left:0}
-body.dragging *{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-body.drag *{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-input[readonly=readonly]:focus{box-shadow:none}
-#color_canvas_tools,#fill_bg,#stroke_bg{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat}
-#color_canvas_tools{width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden}
-#color_canvas_tools{display:block}
-#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
-#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #50a0ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
-#stroke_style_label{font-size:30px;margin-top:33px;letter-spacing:-1px}
-.stroke_tool .caret{top:60%}
-#tool_align_relative{position:absolute;top:-5px;left:0;right:20px;display:block}
-#tool_align_relative select{width:100%;display:block}
\ No newline at end of file
diff --git a/editor/css/method-draw.css b/editor/css/method-draw.css
index a7a1157e..d12c28be 100644
--- a/editor/css/method-draw.css
+++ b/editor/css/method-draw.css
@@ -1,7 +1,8 @@
 /* Comment to prevent wrong concat */
 
 body {
-	background: #3f3f3c;
+	/*background: #3f3f3c;*/
+background-color: #2f2f2c;
 	font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
 	-webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -11,6 +12,8 @@ body {
   user-select: none;
 	margin: 0;
 	padding: 0;
+	top :0;
+	left:0;
 }
 
 ::selection {background: #000; color: #fff; /* Safari */}
@@ -189,13 +192,13 @@ html, body {
  #svgcanvas {
 	line-height: normal;
 	display: inline-block;
-	background-color: #A0A0A0;
+	background-color: #2f2f2c;
 	text-align: center;
 	vertical-align: middle;
 	width: 640px;
 	height: 480px;
 	position: relative;
-	background: #3F3F3C;
+	background: #2f2f2c;
 }
 
 #rulers > div {
@@ -207,7 +210,7 @@ html, body {
 }
 
 #rulers #ruler_corner {
-	top: 30px;
+	/*top: 30px;*/
 	left: 50px;
 	width: 15px;
 	height: 15px;
@@ -217,7 +220,7 @@ html, body {
 
 #ruler_x {
 	height: 15px;
-	top: 30px;
+	/*top: 30px;*/
 	left: 66px;
 	right: 175px;
 	border-top: solid #444 1px;
@@ -246,7 +249,7 @@ html, body {
 #ruler_y {
 	width: 15px;
 	top: 46px;
-	left: 50px;
+	/*left: 50px;*/
 	bottom: 40px;
 	border-left: solid #444 1px;
 	border-bottom: solid #444 1px;
@@ -278,11 +281,11 @@ html, body {
 	display: block;
 	position: absolute;
 	z-index: 2;
-	left: 10px;
+	left: 60px;
 	bottom: 5px;
-	width: 410px;
-	right: 145px;
-	height: 30px;
+	width:60%;
+	right: 105px;
+	height: 40px;
 }
 
  .palette_item {
@@ -301,6 +304,7 @@ html, body {
   top: 0;
 }
 
+
 .palette_item.transparent {
 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==);
 }
@@ -315,11 +319,33 @@ html, body {
   top: 20px;
 }
 
+
+#zoom_label {
+	height: 20px;
+	background: transparent;
+	cursor: default !important;
+	width: auto;
+	padding: 0 10px;
+	margin: 0;
+}
+
+#zoom_panel {
+	padding: 9px 0;
+	right: 10px;
+  position: absolute;
+  top:10px;
+}
+
+#zoom_label img, #zoom_label svg {
+	width: 16px;
+	height: 16px;
+}
+
  #color_tools {
   position: relative;
   width: 48px;
   height: 48px;
-  margin: 6px 6px 0 6px;
+  margin: 2px 0px 0px 0px;
 }
 
 .touch  #color_tools {
@@ -542,7 +568,8 @@ html, body {
 	left: 50px;
 	bottom: 40px;
 	right: 175px;
-	background-color: #444;
+	/*background-color: #444;*/
+	background-color: #2f2f2c;
 	overflow: auto;
 	text-align: center;
 	-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
@@ -617,7 +644,7 @@ html, body {
 	right: 0;
 	top: 20px;
 	border-bottom: none;
-	overflow: visible;
+overflow:auto;
 	padding: 0 0 0 15px;
 }
 
@@ -1038,24 +1065,28 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
  #tools_bottom {
 	position: absolute;
 	left: 50px;
-	right: 0;
-	bottom: 0;
-	height: 40px;
-	overflow: visible;
+	right: 0px;
+	bottom: 0px;
+	height: 50px;
+	width : 75%;
+	overflow: auto;
 	background: #2f2f2c;
 }
 
  #tools_bottom_1 {
 	width: 115px;
 	float: left;
+
 }
 
  #tools_bottom_2 {
 	position: relative;
 	float: left;
 	margin-top: 5px;
+
 }
 
+
 #tools_bottom input[type=text] {
 	width: 3.2em;
 }
@@ -1949,25 +1980,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	position: absolute;
 }
 
-#zoom_label {
-	height: 20px;
-	background: transparent;
-	cursor: default !important;
-	width: auto;
-	padding: 0 10px;
-	margin: 0;
-}
-
-#zoom_panel {
-	padding: 9px 0;
-	right: 175px;
-  position: absolute;
-}
-
-#zoom_label img, #zoom_label svg {
-	width: 16px;
-	height: 16px;
-}
 
 #logo svg {
 	pointer-events: none;
diff --git a/editor/embedapi.html b/editor/embedapi.html
index d47665a0..f55a4773 100644
--- a/editor/embedapi.html
+++ b/editor/embedapi.html
@@ -2,29 +2,35 @@
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title></title>
+ <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
 </head>
 <body>
-
-    <script type="text/javascript" src="embedapi.js"></script>
+     <script src="js/mt.js"></script>
+      <script type="text/javascript" src="lib/jquery.js"></script>
+    <script type="text/javascript" src="src/embedapi.js"></script>
     <script type="text/javascript">
         var svgCanvas = null;
+       	var doc = null;
 
         function init_embed() {
-            var frame = document.getElementById('svgedit');
+
+        	
+
+          var frame = document.getElementById('svgedit');
 			svgCanvas = new embedded_svg_edit(frame);
 			
 			// Hide main button, as we will be controlling new/load/save etc from the host document
-			var doc;
+		
 			doc = frame.contentDocument;
 			if (!doc)
 			{
 				doc = frame.contentWindow.document;
 			}
 			
-			var mainButton = doc.getElementById('main_button');
-			mainButton.style.display = 'none';            
+			
         }
-        
+      
+     
         function handleSvgData(data, error) {
 			if (error)
 			{
@@ -35,22 +41,13 @@
 				alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
 			}			
         }
-        
-        function loadSvg() {
-            var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
-            svgCanvas.setSvgString(svgexample);
-        }
-		
-		function saveSvg() {			
-			svgCanvas.getSvgString()(handleSvgData);
-		}
-    </script>
+
+      
 
 
-    <button onclick="loadSvg();">Load example</button>
-    <button onclick="saveSvg();">Save data</button>
-    <br/>
 
-    <iframe src="index.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>    
+    </script>
+
+    <iframe src="index.html" width="900px" height="600px" id="svgedit" onload="init_embed()" frameBorder="0px"></iframe>    
 </body>
 </html>
diff --git a/editor/extensions/ext-shapes.js b/editor/extensions/ext-shapes.js
index 25611bc9..7a1c2977 100644
--- a/editor/extensions/ext-shapes.js
+++ b/editor/extensions/ext-shapes.js
@@ -31,7 +31,8 @@ methodDraw.addExtension("shapes", function() {
 		music: 'Music',
 		weather: 'Weather &amp; Time',
 		ui: 'User Interface',
-		social: 'Social Web'
+		social: 'Social Web',
+
 	};
 	
 	var library = {
@@ -174,7 +175,8 @@ methodDraw.addExtension("shapes", function() {
 				
    			var copy = btn.children().clone().attr({width: 24, height: 24});
    			shower.children(':not(.flyout_arrow_horiz)').remove();
-   			shower
+
+   			shower				
    				.append(copy)
    				.attr('data-curopt', '#' + btn[0].id) // This sets the current mode
    				.mouseup();
@@ -218,9 +220,12 @@ methodDraw.addExtension("shapes", function() {
 			$('#tool_shapelib').remove();
 			
 			var h = $('#tools_shapelib').height();
+			var w1 = $('#tools_shapelib').width();
+			var w2 = $(document).width();
+			//alert(w2-w1)
 			$('#tools_shapelib').css({
-				'margin-top': -(h/2),
-				'margin-left': 3
+				'margin-top': -(h-90),
+				'margin-left':(w2-w1) - 300
 			});
 
 	
diff --git a/editor/images/.DS_Store b/editor/images/.DS_Store
deleted file mode 100644
index cd5e42f6ec6361bc1bdaf42c7c791fb380e3718e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 21508
zcmeHN&2Ah;5U$yEl=1G`Yhxrh?gc3qM*%LmAQ@vLaR8)n;e_$OO*Wpz-i_m&e1k_o
z$_wPgJ8<K`kpmBaL>>WgG2d4+wyQJU<2@i0B{i#=-kq(ltNW|!>aLy<k!*Fc^S;PE
z5y^3~T<GEQgUEoTIru-%+R?_H4CgjZd|wdR#pgga<w$mF()AlH+#-Gk=aTHnae!Y&
zy@$BBEkoSDD<jmp|JktE-WnELKtNslJ5=!ELJ!>8hs3gMNg-o=3V8(7i9CK8CBH%T
z4o*Lu0cXG&a0Z-#H<1C(y*To2S^Cu(a0Z-#D+U-J1~^%+RONYDYUsd)OL+dzCA=Q^
zj)l428&u^=Ri2lnLV-~z$`YDYDMnVpaeqK@lq*$vUX~?XvJx&?r8%oIluWe)H&AiO
zR?5<^&VVyeXW%2;isjxX^1V!u$ulR9=HButM*r7Wxwl9c`FDZ*dk5E3Wa4oYa_;~&
zTcIY%@1uz9K@D+;%zhKNM9Z>28WE8lfz~%KAv)N37(>Sp<#xPXtv_$TMD%dKBItdt
z8jeyuQI3B#94}V#4`l=GD!}p>7AkP}B;HEyb+l{^)L1CzX|}C=U%4K^t_3W#se3YG
zIg4w{o<Z9))81Z%9szx*t-TA~hq4#$<0$TTcw+nFLS1yehGT!@EvC+&Z@}&~V1F^#
zTs}u1M=3V7oqrj5vQuD(X&3eg_njiURqB_PTe5SB=6+RT1gLjfTvxt;^d~rJ%j1T=
z{bSlX5B>{`PPUbMYV@AO2vXm+8v6#z8n`1jPNCJyEjm|pQX9RzecyOZj<$_ZdqWHf
z<Y(10Ptq-73<(gqBF5OOjQbQKNK!sBu4$n_zEicIJD9_`4zkpUiRe+Lo*SkX13k3s
z1paW6_6l0Irj;@7A^4^zB}Qj^&UjKET8A17xZ6uFq)!kXYcnEH+qSt2G%;ryg%UPa
zi#4Mnx;VlDT}#l#8SF9au!~t~>L}J81pPfmZ?XG~IyfUT;+|@ZNU`;yK`%f)hW?;|
zZH$PkSlE#VvMwLX8e-ErFk^Wl<1l`z|5>(j?e#WfqyDX4P?zV-9hFyKwemf!pRtF$
zau$l>=&v*H8h`Bo!QJ^yoQc@O87si#V0u$yY*a^vu^q^FAYVqPbpJ748!-{zB4+`n
zAL!Z87{_rCZzVi4K;Kq$BI1+pK$^PvT!m3_1Aa&rlPe}={YS(4Vt}5gCpXtX8`v7i
zDK+wGOsa>pgT=fJ%n1H*gqd-S>xQ;?N55_1{(b{fwjS!fVJ%Ak4|Kl;44(Ty=PqIs
z*K!-UmMbQ%lv4J!dY7iDL!O2sQ7va{$<@;_V&lD4Tm5ZpW#uES)X`z(yQsN9@3=Ng
z&u6raMdh#spV1}8JL6~|zhELL<7xS<jy@UncC|;S@3d(Q>)5jLbBM2e_E&1!#5yVA
zb;`Fz=JFK1DxdvD)?noO)<MAcwS0o_KpuhF4`<-DVc<RVWC3H7nQrX)d14I79W#cS
z@QE?ifaeUu6-BwCjOgc#KQ%t0pV2MA&j<ZyZnKw)*NkjaVIz7O<pONT+ap+D2cO2b
z9j3-d^fUI!PsVQjpx<1}?IWV6W-6=+rbI_{tIe$Lxj=VA_N&&q85z;3wz9|`R?$Pu
zlw3)z;%v&CzeI0a)ow%|D;P>oojtU+fWF+z$SYlm9U9$Jm<00NNnlPDpIhlgwpSgj
zYnWef+%)8xHOvj~*3etB+<40@G|)Gbym4(3K{V_$&?^E&UairX6-F#dUx>($Qu|T#
zfIyyo;L7&|pCr2h;x-VI)R^GvBarUEYB%hTD6dZpukQd;s1~kr82OgrqiiKt`^Wgr
z94paY<=obmqc-N7sns<ZxAMI!dFHaraihE_^K~5Cc)i~n$%fSe7S~mNINNZSEwQR&
zqzqbFM@76ttzmWDM*U|g9cqUc#tzrgk-C*<D?MM;O}5EGX{$JQ<lJIAm|qTnXj-w;
z(=Db84EIc!g(cVd%C<$#R;V&pjM;}wUn3Iv0GVw+H(YuCFXH)s@GfQsFAs8X&;Kz|
z<Eb`RvY!8Y{!ef4!x?yW7`Rn7<sRSvTgNs)4`t;2|5vBM-V$fP8Tii`$Y$2QT3bc6
z)w^{y1$@_Tfb(0Nmj`5392fr0A2TfRgRkP<=l9D4|E=&l%JZ_sHyr=_OMssLd;Y%#
z$Ky+)+~2y+d_~^8{GUV64`;v`a0Z+KXTTY72AlzBz!`7`oB?OR8E^)i0cXG&a0Z+K
SXTTY72AlzBz!`WA82A^phw1YG

diff --git a/editor/index.html b/editor/index.html
index 73834d94..49ea6953 100644
--- a/editor/index.html
+++ b/editor/index.html
@@ -6,14 +6,16 @@
 <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
 <link rel="icon" type="image/png" href="images/logo.png"/>
 
-<!--{if svg_edit_release}>
+<!--
   <link rel="stylesheet" href="css/method-draw.compiled.css" type="text/css"/>
-<!{else}-->
+-->
+    
   <link rel="stylesheet" href="lib/jgraduate/css/jPicker.css" type="text/css"/>
   <link rel="stylesheet" href="lib/jgraduate/css/jgraduate.css" type="text/css"/>
+
   <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
   <link rel="stylesheet" href="css/fonts.css" type="text/css"/>
-<!--{endif}-->
+
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>
 
@@ -21,9 +23,9 @@
   <script type="text/javascript" src="lib/jquery.js"></script>
 
 
-<!--{if svg_edit_release}>
-  <script type="text/javascript" src="method-draw.compiled.js"></script>
-<!{else}-->
+
+
+
   <script type="text/javascript" src="lib/touch.js"></script>
   <script type="text/javascript" src="lib/js-hotkeys/jquery.hotkeys.min.js"></script>
   <script type="text/javascript" src="lib/jquerybbq/jquery.bbq.min.js"></script>
@@ -53,8 +55,6 @@
   <script type="text/javascript" src="extensions/ext-grid.js"></script>
   <script type="text/javascript" src="lib/requestanimationframe.js"></script>
   <script type="text/javascript" src="lib/taphold.js"></script>
-<!--{endif}-->
-
 
 <title>Method Draw</title>
 </head>
@@ -107,14 +107,16 @@
   <div class="menu">
     <div class="menu_title">Edit</div>
   	<div class="menu_list" id="edit_menu">
-  		<div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
-  		<div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
+  		<div class="menu_item" id="tool_undo2">Undo <span class="shortcut">⌘Z</span></div>
+  		<div class="menu_item" id="tool_redo2">Redo <span class="shortcut">⌘Y</span></div>
   		<div class="separator"></div>
   		<div class="menu_item action_selected disabled" id="tool_cut">Cut <span class="shortcut">⌘X</span></div>
   		<div class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
 			<div class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
-  		<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>
-			<div class="menu_item action_selected disabled" id="tool_delete">Delete <span>⌫</span></div>
+  		<div class="menu_item action_selected disabled" id="tool_clone2">Duplicate <span class="shortcut">⌘D</span></div>
+			<div class="menu_item action_selected disabled" id="tool_delete2">Delete <span>⌫</span></div>
+
+
     </div>
   </div>
   
@@ -151,6 +153,14 @@
 
 <div id="tools_top" class="tools_panel">
 
+  <label id="tool_delete2" data-title="Edit">	    
+  <div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
+  		<div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
+  			
+
+		</label>
+
+
 	<div id="canvas_panel" class="context_panel">
 	  
 	  <h4 class="clearfix">Canvas</h4>
@@ -181,11 +191,12 @@ <h4 class="clearfix">Canvas</h4>
 	    <span>Sizes</span>
   		<select id="resolution">
   			<option id="selectedPredefined" selected="selected">Custom</option>
-  			<option>640x480</option>
-  			<option>800x600</option>
-  			<option>1024x768</option>
-  			<option>1280x960</option>
-  			<option>1600x1200</option>
+  			<option>320x480xiPhone</option> <!---iphone -->
+  			<option>640x1136xiPhone 5</option><!---iphone 5 -->
+  			<option>1024x768xiPad</option><!---ipad -->
+
+
+
   			<option id="fitToContent" value="content">Fit to Content</option>
   		</select>
   		<div class="caret"></div>
@@ -196,6 +207,9 @@ <h4 class="clearfix">Canvas</h4>
 	
 	<div id="rect_panel" class="context_panel">
 	  <h4 class="clearfix">Rectangle</h4>
+
+	 
+
 	  <label>
 			<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
 			<span>X</span> 
@@ -212,6 +226,14 @@ <h4 class="clearfix">Rectangle</h4>
 			<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
 			<span class="icon_label">Height</span>
 		</label>
+
+
+
+		<!--		  <div class="tool_button" id="tool_delete" title="Delete Element  (del/backspace)">
+  
+  </div>-->
+ 
+
 	</div>
 	
 	<div id="path_panel" class="context_panel clearfix">
@@ -416,7 +438,7 @@ <h4>Edit Path</h4>
   		  <span id="group_opacityLabel" class="icon_label">Opacity</span>
   		</label>
 		
-		<div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
+		<div class="toolset" id="tool_blur" data-title="Change gaussian blur value"  style="display:none">
 			<label>
 				<input id="blur" size="2" value="0" step=".1"  min="0" max="10" />
 			  <span class="icon_label">Blur</span>
@@ -480,7 +502,7 @@ <h4>Stroke</h4>
   		  <span class="icon_label">Stroke Width</span>
   		</label>
   	</div>
-  	<div class="stroke_tool draginput"> 
+  	<div class="stroke_tool draginput" > <!-- style="display:none" --> 
   	  <span>Stroke Dash</span>
   		<select id="stroke_style" data-title="Change stroke dash style">
   			<option selected="selected" value="none">—</option>
@@ -518,27 +540,28 @@ <h4>Stroke</h4>
 	<div class="tool_button" id="tool_text" title="Text Tool [T]"></div>
 	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Z]"></div>
 	
-  <div id="color_tools">
-        <div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
-  			<div class="color_tool active" id="tool_fill">
-  				<label class="icon_label" title="Change fill color"></label>
-				  <div class="color_block">
-					  <div id="fill_bg"></div>
-					  <div id="fill_color" class="color_block"></div>
-				  </div>
-  			</div>
-
-  			<div class="color_tool" id="tool_stroke">
-  					<label class="icon_label" title="Change stroke color"></label>
-  				<div class="color_block">
-  					<div id="stroke_bg"></div>
-  					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
-  				</div>
-  			</div>
-	</div>
+ 
 </div> <!-- tools_left -->
 
 <div id="tools_bottom" class="tools_panel">
+    <div id="color_tools">
+          <div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
+    			<div class="color_tool active" id="tool_fill">
+    				<label class="icon_label" title="Change fill color"></label>
+  				  <div class="color_block">
+  					  <div id="fill_bg"></div>
+  					  <div id="fill_color" class="color_block"></div>
+  				  </div>
+    			</div>
+
+    			<div class="color_tool" id="tool_stroke">
+    					<label class="icon_label" title="Change stroke color"></label>
+    				<div class="color_block">
+    					<div id="stroke_bg"></div>
+    					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
+    				</div>
+    			</div>
+  	</div>
 
     <!-- Zoom buttons -->
 	<div id="zoom_panel" class="toolset" title="Change zoom level">
@@ -618,13 +641,19 @@ <h4>Stroke</h4>
 	<li><a href="#copy">Copy<span class="shortcut">⌘C</span></a></li>
 	<li><a href="#paste">Paste<span class="shortcut">⌘V</span></a></li>
 	<li class="separator"><a href="#delete">Delete<span class="shortcut">⌫</span></a></li>
+
 	<li class="separator"><a href="#group">Group<span class="shortcut">⌘G</span></a></li>
 	<li><a href="#ungroup">Ungroup<span class="shortcut">⌘⇧G</span></a></li>
   <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">⌘⇧↑</span></a></li>
 	<li><a href="#move_up">Bring Forward<span class="shortcut">⌘↑</span></a></li>
 	<li><a href="#move_down">Send Backward<span class="shortcut">⌘↓</span></a></li>
   <li><a href="#move_back">Send to Back<span class="shortcut">⌘⇧↓</span></a></li>
+
+  <li class="separator">
+  			<li><a href="#tool_topath">Convert to Path</a></li>
+			<li><a href="#tool_reorient">Reorient path</a></li>
 </ul>
 
 </body>
 </html>
+
diff --git a/editor/lib/jgraduate/css/jPicker.css b/editor/lib/jgraduate/css/jPicker.css
index 5bb30fd5..01b89ab9 100644
--- a/editor/lib/jgraduate/css/jPicker.css
+++ b/editor/lib/jgraduate/css/jPicker.css
@@ -1,11 +1,12 @@
-#svg_editor .jPicker .Icon {
+
+ .jPicker .Icon {
     display: inline-block;
     height: 24px;
     position: relative;
     text-align: left;
     width: 25px;
 }
-#svg_editor .jPicker .Icon span.Color, #svg_editor .jPicker .Icon span.Alpha {
+ .jPicker .Icon span.Color,  .jPicker .Icon span.Alpha {
     background-position: 2px 2px;
     display: block;
     height: 100%;
@@ -13,7 +14,7 @@
     position: absolute;
     top: 0;
     width: 100%}
-#svg_editor .jPicker .Icon span.Image {
+ .jPicker .Icon span.Image {
     background-repeat: no-repeat;
     cursor: pointer;
     display: block;
@@ -22,16 +23,16 @@
     position: absolute;
     top: 0;
     width: 100%}
-#svg_editor .jPicker.Container {
+ .jPicker.Container {
     z-index: 10;
 }
 
-table#svg_editor .jPicker {
+table .jPicker {
     width: 545px;
      z-index: 20;
 }
 
-#svg_editor .jPicker .Move {
+ .jPicker .Move {
     background-color: #ddd;
     border-color: #fff #666 #666 #fff;
     border-style: solid;
@@ -40,11 +41,12 @@ table#svg_editor .jPicker {
     height: 12px;
     padding: 0;
 }
-#svg_editor .jPicker .Title {
+ .jPicker .Title {
     display:  none;
 }
 
-#svg_editor .jPicker div.Map {
+ .jPicker div.Map {
+
     
   border:  solid #000 1px;
      
@@ -63,11 +65,12 @@ table#svg_editor .jPicker {
   width: 260px;
     
 }
-#svg_editor .jPicker div[class="Map"] {
+ .jPicker div[class="Map"] {
     height: 256px;
     width: 256px;
 }
-#svg_editor .jPicker div.Bar {
+ .jPicker div.Bar {
+	 
     border:  solid #000 1px;
      cursor: n-resize;
     height: 260px;
@@ -77,11 +80,15 @@ table#svg_editor .jPicker {
     position: relative;
     width: 24px;
 }
-#svg_editor .jPicker div[class="Bar"] {
+ .jPicker div[class="Bar"] {
     height: 256px;
     width: 20px;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4, #svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker{
+    background-color: white;
+	bottom:10px;
+ }
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Map .Map3,  .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4,  .jPicker .Bar .Map5,  .jPicker .Bar .Map6 {
     background-color: transparent;
     background-image: none;
     display: block;
@@ -89,41 +96,41 @@ table#svg_editor .jPicker {
     position: absolute;
     top: 0;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3 {
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Map .Map3 {
     height: 2596px;
     width: 256px;
 }
-#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
+ .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4 {
     height: 3896px;
     width: 20px;
 }
-#svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker .Bar .Map5,  .jPicker .Bar .Map6 {
     height: 256px;
     width: 20px;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Bar .Map6 {
     background-repeat: no-repeat;
 }
-#svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map5 {
+ .jPicker .Map .Map3,  .jPicker .Bar .Map5 {
     background-repeat: repeat;
 }
-#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
+ .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4 {
     background-repeat: repeat-x;
 }
-#svg_editor .jPicker .Map .Arrow {
+ .jPicker .Map .Arrow {
     display: block;
     position: absolute;
 }
-#svg_editor .jPicker .Bar .Arrow {
+ .jPicker .Bar .Arrow {
     display: block;
     left: 0;
     position: absolute;
 }
-#svg_editor .jPicker .Preview {
+ .jPicker .Preview {
     font-size: 9px;
     text-align: center;
 }
-#svg_editor .jPicker .Preview div.bgt  {
+ .jPicker .Preview div.bgt  {
     height: 62px;
     margin: 0 auto;
     padding: 0;
@@ -131,7 +138,7 @@ table#svg_editor .jPicker {
 }
 
 
-#svg_editor .jPicker .Preview div span {
+ .jPicker .Preview div span {
     border: 1px solid #000;
     display: block;
     height: 30px;
@@ -139,31 +146,31 @@ table#svg_editor .jPicker {
     padding: 0;
     width: 60px;
 }
-#svg_editor .jPicker .Preview .Active {
+ .jPicker .Preview .Active {
     border-bottom-width: 0;
 }
-#svg_editor .jPicker .Preview .Current {
+ .jPicker .Preview .Current {
     border-top-width: 0;
     cursor: pointer;
 }
-#svg_editor .jPicker .Button {
+ .jPicker .Button {
     text-align: center;
     width: 115px;
 }
-#svg_editor .jPicker .Button input {
+ .jPicker .Button input {
     width: 100px;
 }
 
-#svg_editor .jPicker td.Radio {
+ .jPicker td.Radio {
     margin: 0;
     padding: 0;
     width: 31px;
 }
-#svg_editor .jPicker td.Radio input {
+ .jPicker td.Radio input {
     margin: 0 5px 0 0;
     padding: 0;
 }
-#svg_editor .jPicker td.Text {
+ .jPicker td.Text {
     font-size: 12px!important;
     height: 22px;
     margin: 0;
@@ -171,16 +178,16 @@ table#svg_editor .jPicker {
     text-align: left;
     width: 70px;
 }
-#svg_editor .jPicker tr.Hex td.Text {
+ .jPicker tr.Hex td.Text {
     width: 100px;
     color: #666;
 }
 
-#svg_editor .jPicker tr.Hex td.Text span {
+ .jPicker tr.Hex td.Text span {
     width: 100px;
     color: #333;
 }
-#svg_editor .jPicker td.Text input {
+ .jPicker td.Text input {
     background-color: #fff;
     border: 1px inset #aaa;
     height: 15px;
@@ -190,22 +197,22 @@ table#svg_editor .jPicker {
     color: #333;
 }
 
-#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex {
+ #color_picker .jPicker tr.Hex td.Text input.Hex {
     width: 50px;
     display: inline-block;
     float: none;
 }
 
-#svg_editor .jPicker tr.Hex td.Text input.AHex {
+ .jPicker tr.Hex td.Text input.AHex {
     width: 20px;
     display: none;
 }
-#svg_editor .jPicker .Grid {
+ .jPicker .Grid {
     text-align: center;
     float: right;
     width: 108px;
 }
-#svg_editor .jPicker .Grid span.QuickColor {
+ .jPicker .Grid span.QuickColor {
     cursor: pointer;
     display: inline-block;
     height: 15px;
@@ -214,37 +221,37 @@ table#svg_editor .jPicker {
     padding: 0;
     width: 18px;
 }
-#svg_editor .jPicker td  {
+ .jPicker td  {
   vertical-align:  top;
 }
-#svg_editor .jPicker td.colorsquare  {
+ .jPicker td.colorsquare  {
   width:  275px;
 }
 
-#svg_editor .jPicker .prev_div  {
+ .jPicker .prev_div  {
   margin-top:  -15px;
 }
 
-#svg_editor .jPicker .actions {
+ .jPicker .actions {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px;
 }
 
-#svg_editor .jPicker .actions .Ok{
+ .jPicker .actions .Ok{
   position: absolute;
   top: 0;
   right: 0px;
 }
 
-#svg_editor .jPicker .actions .Cancel{
+ .jPicker .actions .Cancel{
   position: absolute;
   top: 0;
   left: 0px;
 }
 
-#svg_editor .jPicker .color_preview {
+ .jPicker .color_preview {
   width: 62px;
   margin: 0 auto;
 }
diff --git a/editor/lib/jquery-draginput.js b/editor/lib/jquery-draginput.js
index 36e87cf2..772fd35f 100644
--- a/editor/lib/jquery-draginput.js
+++ b/editor/lib/jquery-draginput.js
@@ -171,6 +171,9 @@ $.fn.dragInput = function(cfg){
 
 // public function
 $.fn.dragInput.updateCursor = function(el){
+	 if (typeof el == 'undefined') {
+ 	    return;
+   }
   var value = parseFloat(el.value);
   var scale = parseFloat(el.getAttribute("data-scale"));
   var domain = parseFloat(el.getAttribute("data-domain"));
diff --git a/editor/src/embedapi.js b/editor/src/embedapi.js
index 8debfd6d..134cb9ec 100644
--- a/editor/src/embedapi.js
+++ b/editor/src/embedapi.js
@@ -1,36 +1,4 @@
 /*
-function embedded_svg_edit(frame){
-  //initialize communication
-  this.frame = frame;
-  this.stack = []; //callback stack
-  
-  var editapi = this;
-  
-  window.addEventListener("message", function(e){
-    if(e.data.substr(0,5) == "ERROR"){
-      editapi.stack.splice(0,1)[0](e.data,"error")
-    }else{
-      editapi.stack.splice(0,1)[0](e.data)
-    }
-  }, false)
-}
-
-embedded_svg_edit.prototype.call = function(code, callback){
-  this.stack.push(callback);
-  this.frame.contentWindow.postMessage(code,"*");
-}
-
-embedded_svg_edit.prototype.getSvgString = function(callback){
-  this.call("svgCanvas.getSvgString()",callback)
-}
-
-embedded_svg_edit.prototype.setSvgString = function(svg){
-  this.call("svgCanvas.setSvgString('"+svg.replace(/'/g, "\\'")+"')");
-}
-*/
-
-
-/*
 Embedded SVG-edit API
 
 General usage:
diff --git a/editor/src/method-draw.js b/editor/src/method-draw.js
index b046585c..b47f26f4 100644
--- a/editor/src/method-draw.js
+++ b/editor/src/method-draw.js
@@ -35,7 +35,7 @@
 			initOpacity: 1,
 			imgPath: 'images/',
 			extPath: 'extensions/',
-			jGraduatePath: 'jgraduate/images/',
+			jGraduatePath: 'lib/jgraduate/images/',
 			extensions: [],
 			initTool: 'select',
 			wireframe: false,
@@ -677,26 +677,26 @@
 				if (typeof animatedZoom != 'undefined') window.cancelAnimationFrame(animatedZoom)
 				// zoom duration 500ms
 				var start = Date.now();
-				var duration = 500;
+				var duration = 100;
 				var diff = (zoomlevel) - (res.zoom)
 				var zoom = $('#zoom')[0]
 				var current_zoom = res.zoom
-				var animateZoom = function(timestamp) {
-				  var progress = Date.now() - start
-				  var tick = progress / duration
-          tick = (Math.pow((tick-1), 3) +1);
-          svgCanvas.setZoom(current_zoom + (diff*tick));
+			//	var animateZoom = function(timestamp) {
+				//  var progress = Date.now() - start
+				  //var tick = progress / duration
+          //tick = (Math.pow((tick-1), 3) +1);
+          svgCanvas.setZoom(zoomlevel );//+ (diff*tick));
 				  updateCanvas();
-				  if (tick < 1 && tick > -.90) {
-            window.animatedZoom = requestAnimationFrame(animateZoom)
-				  }
-				  else {
+				//  if (tick < 1 && tick > -.90) {
+            //window.animatedZoom = requestAnimationFrame(animateZoom)
+			//	  }
+			//	  else {
 				    $("#zoom").val(parseInt(zoomlevel*100))
 				    $("option", "#zoom_select").removeAttr("selected")
 				    $("option[value="+ parseInt(zoomlevel*100) +"]", "#zoom_select").attr("selected", "selected")
-				  }
-				}
-				animateZoom()
+			//	  }
+			//	}
+			//	animateZoom()
 				
  			  
 				
@@ -829,6 +829,18 @@
 					var pos = $(show_sel).position();
 					$(hold_sel).css({'left': pos.left+34, 'top': pos.top+77});
 					
+					
+					//move to top menu
+					
+
+					
+					var label =  '<h4 class="clearfix">Shapes</h4>';
+					
+					
+					$('#tools_top').prepend(shower);
+					$('#tools_top').prepend(label);
+					
+
 					// Clicking the "show" icon should set the current mode
 					shower.mousedown(function(evt) {
 					  $('#workarea').one("mousedown", function(){$('#tools_shapelib').hide()})
@@ -837,8 +849,8 @@
 						var holder = $(hold_sel);
 						var l = pos.left+34;
 						var w = holder.width()*-1;
-						var time = holder.data('shown_popop')?200:0;
-						timer = setTimeout(function() {
+						//var time = holder.data('shown_popop')?200:0;
+						//timer = setTimeout(function() {
 							// Show corresponding menu
 							if(!shower.data('isLibrary')) {
 								holder.css('left', w).show().animate({
@@ -848,10 +860,10 @@
 								holder.css('left', l).show();
 							}
 							holder.data('shown_popop',true);
-						},time);
+					//	},time);
 						evt.preventDefault();
 					}).mouseup(function(evt) {
-						clearTimeout(timer);
+					//	clearTimeout(timer);
 						var opt = $(this).attr('data-curopt');
 						// Is library and popped up, so do nothing
 						if(shower.data('isLibrary') && $(show_sel.replace('_show','')).is(':visible')) {
@@ -1554,9 +1566,13 @@
 							
 							//update the draginput cursors
 						  var name_item = document.getElementById(el_name + '_' + item);
-							name_item.value = Math.round(attrVal) || 0;
-							if (name_item.getAttribute("data-cursor") === "true") {
-      				  $.fn.dragInput.updateCursor(name_item );
+						 if (name_item) {
+ 			                name_item.value = Math.round(attrVal) || 0;
+            			     if (name_item.getAttribute("data-cursor") === "true") {
+                   				$.fn.dragInput.updateCursor(name_item );
+               }
+
+
       				}
 						});
 						
@@ -1649,14 +1665,27 @@
 			palette.forEach(function(item, i){
 				str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
 			});
+
+		  
 			$('#palette').append(str);
 			
+//			$("#color_tools").prependTo($('#tools_bottom_3'));
+			
+			
 			var changeFontSize = function(ctl) {
 				svgCanvas.setFontSize(ctl.value);
 			}
 			
 			var changeStrokeWidth = function(ctl) {
 				var val = ctl.value;
+
+
+				// Very stupid filter for non-numbers, fixes issues with "px" line widths
+		         // TODO: if "px" widths and sizes aren't supported, they should just be
+		         // filtered out/converted on import/open
+		         if (isNaN(val)) {
+		           val = ctl.value = 1;
+		         }
 				if(val == 0 && selectedElement && ['line', 'polyline'].indexOf(selectedElement.nodeName) >= 0) {
 					val = ctl.value = 1;
 				}
@@ -1777,6 +1806,7 @@
 						paint = new $.jGraduate.Paint();
 					}
 					else {
+//						alert ( color.substr(1))
 						paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
 					}
 					
@@ -2581,7 +2611,17 @@
 				}
 				setSelectMode();		
 			};
-			
+			var savePreferences = function() {
+				
+				//$('#rulers').toggle(curConfig.showRulers);
+				//if(curConfig.showRulers) updateRulers();
+				curConfig.baseUnit = $('#base_unit').val();
+
+				svgCanvas.setConfig(curConfig);
+
+				updateCanvas();
+
+			}
 			function setBackground(color, url) {
 // 				if(color == curPrefs.bkgd_color && url == curPrefs.bkgd_url) return;
 				$.pref('bkgd_color', color);
@@ -3158,7 +3198,7 @@
 				return false;
 			} 
 			height.parent().removeClass('error');
-			if(!svgCanvas.setResolution(w, h)) {
+			if(!svgCanvas.setResolution(w, h)) { 
 				$.alert(uiStrings.notification.noContentToFitTo);
 				var dims = svgCanvas.getResolution()
 				width.val(dims.w)
@@ -3193,30 +3233,14 @@
 					var dims = this.value.split('x');
 					dims[0] = parseInt(dims[0]); 
 					dims[1] = parseInt(dims[1]);
-					var diff_w = dims[0] - w.value;
-					var diff_h = dims[1] - h.value;
-					//animate
-					var start = Date.now();
-					var duration = 1000;
-					var animateCanvasSize = function(timestamp) {
-					  var progress = timestamp - start
-					  var tick = progress / duration
-            tick = (Math.pow((tick-1), 3) +1);
-					  w.value = (dims[0] - diff_w + (tick*diff_w)).toFixed(0);
-					  h.value = (dims[1] - diff_h + (tick*diff_h)).toFixed(0);
+					//iphone
+
+				
+					  w.value = dims[0];
+					  h.value = dims[1];
 					  changeCanvasSize();
-					  if (tick >= 1) {
-					    var res = svgCanvas.getResolution()
-					    $('#canvas_width').val(res.w.toFixed())
-					    $('#canvas_height').val(res.h.toFixed())
-					    $('#resolution_label').html("<div class='pull'>" + res.w + "<span>×</span></br>" + res.h + "</div>");
-					  }
-					  else {
-					    requestAnimationFrame(animateCanvasSize)
-					  }
-					}
-					animateCanvasSize(Date.now())
 
+				
 				}
 			});
 			
@@ -3229,6 +3253,7 @@
 			
 			// Associate all button actions as well as non-button keyboard shortcuts
 			var Actions = function() {
+			//Menu Actions menu_actions
 				// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
 				var tool_buttons = [
 					{sel:'#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
@@ -3530,6 +3555,9 @@
 							break;
 						case 'cut':
 							cutSelected();
+							break;
+						case 'clone' :
+
 							break;
 						case 'copy':
 							copySelected();
diff --git a/editor/src/svgcanvas.js b/editor/src/svgcanvas.js
index 5d9d1a7a..79a1df9e 100644
--- a/editor/src/svgcanvas.js
+++ b/editor/src/svgcanvas.js
@@ -172,7 +172,7 @@ var clearSvgContentElement = canvas.clearSvgContentElement = function() {
 	}).appendTo(svgroot);
 
 	// TODO: make this string optional and set by the client
-	var comment = svgdoc.createComment(" Created with Method Draw - http://github.com/duopixel/Method-Draw/ ");
+	var comment = svgdoc.createComment("Created with Vector Code http://www.vectorcodeapp.com");
 	svgcontent.appendChild(comment);
 };
 clearSvgContentElement();
@@ -2212,8 +2212,13 @@ var addToSelection = this.addToSelection = function(elemsToAdd, showGrips) {
 		}
 	}
 	call("selected", selectedElements);
-	if (showGrips || selectedElements.length == 1) selectorManager.requestSelector(selectedElements[0]).showGrips(true)
-  else selectorManager.requestSelector(selectedElements[0]).showGrips(false);
+	if (selectedElements[0] != null) {
+    	if (showGrips || selectedElements.length == 1) {
+      		selectorManager.requestSelector(selectedElements[0]).showGrips(true)
+ 	    } else {
+   			selectorManager.requestSelector(selectedElements[0]).showGrips(false);
+     }
+   }
 
 	// make sure the elements are in the correct order
 	// See: http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition
@@ -2227,7 +2232,7 @@ var addToSelection = this.addToSelection = function(elemsToAdd, showGrips) {
 	});
 	
 	// Make sure first elements are not null
-	while(selectedElements[0] == null) selectedElements.shift(0);
+	while(selectedElements[0] == null && selectedElements.length) selectedElements.shift(0);
 };
 
 // Function: selectOnly()
@@ -2420,7 +2425,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 			mouse_target = selectedElements[0];
 		}
 		
-		start_transform = mouse_target.getAttribute("transform");
+		start_transform = $(mouse_target).attr("transform");
 		var tlist = getTransformList(mouse_target);
 		switch (current_mode) {
 			case "select":
@@ -5972,6 +5977,7 @@ var convertToGroup = this.convertToGroup = function(elem) {
 // Returns:
 // This function returns false if the set was unsuccessful, true otherwise.
 this.setSvgString = function(xmlString) {
+	canvas.clearSelection();
 	try {
 		// convert string into XML document
 		var newDoc = svgedit.utilities.text2xml(xmlString);
@@ -6729,12 +6735,12 @@ var getResolution = this.getResolution = function() {
 // 		var vb = svgcontent.getAttribute("viewBox").split(' ');
 // 		return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
 	
-	var width = svgcontent.getAttribute("width")/current_zoom;
-	var height = svgcontent.getAttribute("height")/current_zoom;
+	var width = parseInt(svgcontent.getAttribute("width"));
+ 	var height = parseInt(svgcontent.getAttribute("height"));
 	
 	return {
-		'w': width,
-		'h': height,
+		'w': width/current_zoom,
+ 	    'h': height/current_zoom,
 		'zoom': current_zoom
 	};
 };
@@ -8510,6 +8516,7 @@ var pushGroupProperties = this.pushGroupProperties = function(g, undoable) {
 // significant recalculations to apply group's transforms, etc to its children
 this.ungroupSelectedElement = function() {
 	var g = selectedElements[0];
+	if (typeof g == 'undefined') return;
 	if($(g).data('gsvg') || $(g).data('symbol')) {
 		// Is svg, so actually convert to group
 

From 362d575914304557f610080429774a9b0fd1b2c9 Mon Sep 17 00:00:00 2001
From: Can <can@codingday.com>
Date: Tue, 11 Mar 2014 08:51:30 +0000
Subject: [PATCH 2/2] snap to grid

---
 method-draw/.DS_Store                         | Bin 15364 -> 12292 bytes
 method-draw/css/method-draw.compiled.css      | 417 ------------------
 method-draw/css/method-draw.css               |  84 ++--
 method-draw/extensions/ext-shapes.js          |  13 +-
 method-draw/images/.DS_Store                  | Bin 21508 -> 0 bytes
 method-draw/lib/jgraduate/css/jPicker.css     |  95 ++--
 method-draw/lib/jgraduate/jquery.jgraduate.js |   4 +-
 method-draw/lib/jquery-draginput.js           |   3 +
 method-draw/src/embedapi.js                   |  32 --
 method-draw/src/method-draw.js                | 124 ++++--
 method-draw/src/svgcanvas.js                  |  40 +-
 11 files changed, 215 insertions(+), 597 deletions(-)
 delete mode 100644 method-draw/css/method-draw.compiled.css
 delete mode 100644 method-draw/images/.DS_Store

diff --git a/method-draw/.DS_Store b/method-draw/.DS_Store
index 56d4e58328c7397efe677419d2e335c0248d27a2..b1be7a1e2df925b2a13b03c6b121c7aa9c1c6881 100644
GIT binary patch
literal 12292
zcmeI1&2G~`5XWbewj@PB5RnKRkZ&MSs#Iy|4WdvgAufm@dZ4J-aoQL;b`?8Kr4o@N
z-)9~Hfy9xg-~l-B99-eQA5^Ax1eGWhF<b4<W<4{z`}3@wNr^}_`tBT2g@_8MQkIUQ
z$td!=tf`VSBV|Ydd!mTi)T2ujP?*x@0Vco%m;e)C0!-jA5WqWImcp3#zP`#W6JP@W
zB?0+-uu!F}8#&TaJvz{+6aaDp!>XW<JV4o4M%IlSX{k)%Q)dstm<p3(2yKq*mQ;tV
z8#&Tao0HJyB+SghWGF(-4m(S!lc;OSEfZh@X#z5LKT8g>_K*fY<nJ-^_=x(niN6rn
zW90TO%~A)wF8Me7u;uun1A81f@d5JUS5?#`d1}Er%Fv3^TFxNaG`>DNo4yyt)#@ja
z%TG*B9VrxLIewyezu5@~&Df6nQN!-tlb>$camO+JJ7MVW_HE~`*B-2u%Gbgmw!NU;
zQ^ua#hRW)S7r5b|5%vQ&T5amV70-=3%BdMp)2@{&J3EUDwHa%^Hb0!Pb`}?_=wGf5
zho#5G!kP26t2dqS(UYgop1*kc=B?T}3G;}ellt>+`wqQhpx6a($<hW{Z!FQ<(7uph
zH4U3>br%AV^>9xh(|kofVKWK6);LXCPH0X+vx^mNV3rK8^eUk{4c!3im+Ki94|4Ud
z6E-<|nB`ZT+pFV7E#JYtl+^O%V=5<Olj{ky3Krf5m<~4TB4}L%tBqiuRa@^W$UZb=
z@MZ)hEhBsj34f>e;V-o*`nbnid8{{yJHY<dC31>0cKJTBsyuXh)XLEMlGZxh2dY+E
zz#*Dj_$>#@aM^110zV8k5H<4nl|gGu1+xpn@xEeVJHhkRFZjuhfuxs$I<_(rGb2zw
zJabnPv&z`#!UPVOKwkT=$o&8M_}~8zcopoP2{3`bNkB|2HJ2J#!S^q&dlw^fZ431Q
zsw`4(q@^-JqtbCmm5xL1{=*P`3#!tlZsbTyjG+Aa9|C^%T`>9P=J&t4N!&02Ccp%k
c025#WOn?b60Vco%m;e)C0!)Aj{Bs1p0jV>)YybcN

literal 15364
zcmeI1K~EDw6vy8bq(wlRs0qi7iHQd!G)Cdzp=r?Q%?Jr5qSDezi=_+fE)}u5@#4qv
zi+DDE01ti({l7N@+1+l{i^Mc<$jqCaoi}ghH*I(R3lW)G)T|JdiKv9kmTqt{ocKQH
zp;Sn;7&k_uNvldg2`B+2pahh_e@Fn&Y)+*aYqeAYN<aym5#Zkk51DP%+1Oh7=|CY8
z0Cp11l28{d0qb!CY}MJ=TC^Y;>k4aKjguJ0x})85{i@E!)>?NmPJ9>_**Jw_Bs#|T
zq&u0awOT3xC6FdCVK2-4{J)PpLjR|o^hyaRfw3ZBCRf*1Ygm$dwhk?h+qYaR*JET@
z>5d|G2*3qDisz9f;l9Te*s8O!wP-=ogMeVrLJ6EJfm_s~CUqzzpAKn}wke?CQP<yY
zbo~Zqf^+o5F20^`eoB(LT}GcH+M%p(8>8$|H|<Ri;Qb@vJvYL8Hyf9}WIV5o@Z6(1
z^{|FlSW7@*I=*?58D-XuvMpXmC<Cl}D7yKU@w@8$PI)maAM4#m<gQT6rB`^78Rv8r
zzZ++0Hihq*QA%z$9hpTh%TD$zN&Pfxh+Sq{0ci1#W4|zeP|IV$dsldx*t;1QH9~)0
zbuKyHx0F{&K3x%J+Rlr@JCx}k$$p0U<MYm>`k(6;MuRB<C7=Yxhk(=np40#3+3{JL
zu0#nafxjg1NBz$N-$UL)=ETZ9wpK(u3hu(~@;V+D{0`uzYg=N=3HPhc#@32E+Ql7K
z++pq8{D1b(0Gw<&K278Jzat0ZCPg?Nhtz8HgMBA~J~#HeogiFV`f3UjlNY9nC8XKS
zjZUxW_iKLCYX;BO+J1kn(`+^BhtH)R*25^M)eq&)<9gV}9jUMTei!vk*L$PW4BIcu
z^Cu@Oca|5t%JN{rJE>G|R~EdLyOqIU8mauLbnW`$y@%`dcZ2sIVwo}-%ZzBwUZ0g8
zQR4+2U@0vu>KHmLqE3z~DkV<#X^&BQXtYOz8g!73A<8G|agkLPX48i92<bIucbwHN
zqH~fyQ&1T`ltZ00R(gEVILW?6s2Se8T$Ld@G^t|e(Ax)@0Q2a>r-i?6o<0#Bn)EC}
z^NozdY9^(YSu<IE%9`mdqKu-Oj4>_qVqLk773Fvc-K0km9;`)s*olyOX;#8D+4~ZD
ovxe8C1eAahPy$Lo2`B+2pahhF5>Nt4KnW-TC7=Y9!1xmQ1;EpvnE(I)

diff --git a/method-draw/css/method-draw.compiled.css b/method-draw/css/method-draw.compiled.css
deleted file mode 100644
index 67de0b22..00000000
--- a/method-draw/css/method-draw.compiled.css
+++ /dev/null
@@ -1,417 +0,0 @@
-#svg_editor .jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}
-#svg_editor .jPicker .Icon span.Color,#svg_editor .jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}
-#svg_editor .jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}
-#svg_editor .jPicker.Container{z-index:10}
-table#svg_editor .jPicker{width:545px;z-index:20}
-#svg_editor .jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}
-#svg_editor .jPicker .Title{display:none}
-#svg_editor .jPicker div.Map{border:solid #000 1px;cursor:crosshair;height:260px;margin:0;overflow:hidden;padding:0;position:relative;width:260px}
-#svg_editor .jPicker div[class="Map"]{height:256px;width:256px}
-#svg_editor .jPicker div.Bar{border:solid #000 1px;cursor:n-resize;height:260px;margin:0 15px;overflow:hidden;padding:0;position:relative;width:24px}
-#svg_editor .jPicker div[class="Bar"]{height:256px;width:20px}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Map .Map3,#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4,#svg_editor .jPicker .Bar .Map5,#svg_editor .jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Map .Map3{height:2596px;width:256px}
-#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4{height:3896px;width:20px}
-#svg_editor .jPicker .Bar .Map5,#svg_editor .jPicker .Bar .Map6{height:256px;width:20px}
-#svg_editor .jPicker .Map .Map1,#svg_editor .jPicker .Map .Map2,#svg_editor .jPicker .Bar .Map6{background-repeat:no-repeat}
-#svg_editor .jPicker .Map .Map3,#svg_editor .jPicker .Bar .Map5{background-repeat:repeat}
-#svg_editor .jPicker .Bar .Map1,#svg_editor .jPicker .Bar .Map2,#svg_editor .jPicker .Bar .Map3,#svg_editor .jPicker .Bar .Map4{background-repeat:repeat-x}
-#svg_editor .jPicker .Map .Arrow{display:block;position:absolute}
-#svg_editor .jPicker .Bar .Arrow{display:block;left:0;position:absolute}
-#svg_editor .jPicker .Preview{font-size:9px;text-align:center}
-#svg_editor .jPicker .Preview div.bgt{height:62px;margin:0 auto;padding:0;width:62px}
-#svg_editor .jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}
-#svg_editor .jPicker .Preview .Active{border-bottom-width:0}
-#svg_editor .jPicker .Preview .Current{border-top-width:0;cursor:pointer}
-#svg_editor .jPicker .Button{text-align:center;width:115px}
-#svg_editor .jPicker .Button input{width:100px}
-#svg_editor .jPicker td.Radio{margin:0;padding:0;width:31px}
-#svg_editor .jPicker td.Radio input{margin:0 5px 0 0;padding:0}
-#svg_editor .jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}
-#svg_editor .jPicker tr.Hex td.Text{width:100px;color:#666}
-#svg_editor .jPicker tr.Hex td.Text span{width:100px;color:#333}
-#svg_editor .jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:15px;margin:0 0 0 5px;text-align:left;width:30px;color:#333}
-#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex{width:50px;display:inline-block;float:none}
-#svg_editor .jPicker tr.Hex td.Text input.AHex{width:20px;display:none}
-#svg_editor .jPicker .Grid{text-align:center;float:right;width:108px}
-#svg_editor .jPicker .Grid span.QuickColor{cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:18px}
-#svg_editor .jPicker td{vertical-align:top}
-#svg_editor .jPicker td.colorsquare{width:275px}
-#svg_editor .jPicker .prev_div{margin-top:-15px}
-#svg_editor .jPicker .actions{position:absolute;bottom:20px;left:20px;right:20px}
-#svg_editor .jPicker .actions .Ok{position:absolute;top:0;right:0}
-#svg_editor .jPicker .actions .Cancel{position:absolute;top:0;left:0}
-#svg_editor .jPicker .color_preview{width:62px;margin:0 auto}
-h2.jGraduate_Title{display:none}
-.jGraduate_Picker{position:absolute;padding:20px}
-.jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
-li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
-.jGraduate_colPick{display:none}
-.jGraduate_gradPick{display:none;overflow:visible}
-.jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
-div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
-div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
-div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
-.jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
-div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
-div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
-div.jGraduate_StopSection{width:120px;float:left}
-div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
-input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
-input.jGraduate_Ok{margin:0 0 5px 0}
-.colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
-.colorBox+label{float:left;margin-top:7px}
-label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
-div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
-div.jGraduate_Form label{padding:0 2px;color:#333}
-div.jGraduate_StopSection input[type=text],div.jGraduate_Slider input[type=text]{width:33px;color:#333}
-div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
-div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
-.jGraduate_gradPick{width:526px}
-.jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
-.jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
-.jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
-.jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
-.jGraduate_gradPick .jGraduate_Form label,.jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
-.jGraduate_gradPick .jGraduate_Form label{clear:left}
-.jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
-.jGraduate_Colorblocks{display:table;border-spacing:0 5px}
-.jGraduate_colorblock{display:table-row}
-.jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
-.jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
-.jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
-.jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
-.jGraduate_Slider label.prelabel{width:40px;text-align:left}
-.jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
-div.jGraduate_Slider input{margin-top:5px}
-div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
-.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
-.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
-body{background:#3f3f3c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
-::selection{background:#000;color:#fff}
-::-moz-selection{background:#000;color:#fff}
-html,body{overflow:hidden;width:100%;height:100%}
-::-webkit-scrollbar{width:5px;height:5px;background:#444}
-::-webkit-scrollbar-track{border-radius:10px;background:#444}
-::-webkit-scrollbar-thumb{border-radius:10px;background:#666}
-::-webkit-scrollbar-corner{background:#444}
-#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
-#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
-#svg_editor{background:#2f2f2c}
-#menu_bar{padding:0 0 0 50px;background:#2f2f2c;position:relative;z-index:2}
-#menu_bar.active .menu.open .menu_list{display:block}
-.menu{position:relative;z-index:5;color:#333;display:inline-block}
-.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
-.touch .menu_title{padding:7px 17px;height:26px;line-height:26px}
-.menu .menu_title:hover{background:rgba(255,255,255,0.1)}
-.menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
-.menu_list{display:none;position:absolute;top:28px;left:0;white-space:nowrap;background:white;padding:7px 0;border-radius:0 3px 3px 3px;box-shadow:0 0 20px rgba(0,0,0,0.8)}
-.touch .menu_list{top:38px}
-#menu_bar.active .menu.open .menu_title{background:white;color:#333}
-.menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
-.menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
-.menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
-.menu_list .menu_item:hover,.menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
-.menu_list .menu_item.disabled:hover,.menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
-.menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
-.menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
-#svgcanvas{line-height:normal;display:inline-block;background-color:#a0a0a0;text-align:center;vertical-align:middle;width:640px;height:480px;position:relative;background:#3f3f3c}
-#rulers>div{position:absolute;background:#2f2f2c;z-index:1;overflow:hidden;-webkit-font-smoothing:none}
-#rulers #ruler_corner{top:30px;left:50px;width:15px;height:15px;border:solid #444 1px;z-index:2}
-#ruler_x{height:15px;top:30px;left:66px;right:175px;border-top:solid #444 1px;border-right:solid #444 1px}
-#ruler_x_cursor{height:15px;border-right:dotted #999 1px;position:absolute;background:#2f2f2c}
-#ruler_y_cursor{width:15px;border-top:dotted #999 1px;position:absolute;background:#2f2f2c}
-#rulers.moved #ruler_corner,#rulers.moved #ruler_x{top:101px}
-#ruler_y{width:15px;top:46px;left:50px;bottom:40px;border-left:solid #444 1px;border-bottom:solid #444 1px}
-#rulers.moved #ruler_y{top:116px}
-#ruler_x canvas:first-child{margin-left:-16px}
-#ruler_x canvas{float:left}
-#ruler_y canvas{margin-top:-16px}
-#ruler_x>div,#ruler_y>div{overflow:hidden}
-#palette{display:block;position:absolute;z-index:2;left:10px;bottom:5px;width:410px;right:145px;height:30px}
-.palette_item{height:20%;width:5.2%;float:left;cursor:url(../images/eyedropper.png) 0 16,crosshair}
-.palette_item.transparent,.palette_item.white,.palette_item.black{background:#fff;position:absolute;width:10px;height:10px;left:-10px;top:0}
-.palette_item.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==)}
-.palette_item.black{background:#000;top:10px}
-.palette_item.white{background:#fff;top:20px}
-#color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
-.touch #color_tools{width:auto;height:auto}
-#tool_fill{position:absolute;top:0;left:0;z-index:1}
-.touch #tool_fill{position:static;width:36px;height:36px;margin-bottom:10px}
-#tool_fill.active,#tool_stroke.active{z-index:2}
-#tool_stroke{top:14px;left:14px}
-.touch #tool_fill.active,.touch #tool_stroke.active{outline:4px solid #09f}
-#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c;position:absolute}
-.touch #tool_fill,.touch #tool_stroke,.touch #tool_canvas{position:relative;top:0;left:0}
-#color_canvas_tools{float:left;cursor:pointer}
-#tool_fill .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
-.touch #tool_eyedropper{margin-top:6px}
-.touch #tool_fill .color_block{width:36px;height:36px}
-.touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
-.touch #tool_switch{display:none}
-#use_panel .tool_button,#path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
-#use_panel .tool_button{padding-left:10px;margin-bottom:10px;width:124px}
-#path_node_panel .tool_button img,#path_node_panel .tool_button svg{position:absolute;left:5px;top:3px}
-#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
-#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
-.touch #color_tools #tool_fill .color_block>div{position:relative}
-#color_tools #tool_fill .color_block #fill_bg,#color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px}
-.touch #color_tools #tool_fill .color_block #fill_bg,.touch #color_tools #tool_stroke .color_block #stroke_bg{width:36px;height:36px;right:auto;bottom:auto}
-.touch #tool_stroke{position:relative;top:0;left:0;z-index:0}
-#stroke_color:after{content:'';position:absolute;display:block;width:8px;height:8px;left:8px;top:8px;background:#ccc;box-shadow:0 0 0 1px #000}
-.touch #stroke_color:after{height:14px;left:10px;position:absolute;top:10px;width:14px}
-#color_tools #tool_switch{cursor:pointer;opacity:.7;width:11px;height:11px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;position:absolute;top:-2px;left:28px}
-#color_tools #cross:hover{opacity:1}
-#color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
-#color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
-.touch #color_tools #tool_stroke .color_block{width:36px;height:36px}
-#color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
-.touch #color_tools #tool_stroke .color_block>div{position:relative}
-#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
-#linkLabel>svg{height:20px;padding-top:4px}
-div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-moz-transition:-moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-o-transition:-o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);-ms-transition:-ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);transition:transform 500ms cubic-bezier(0.13,0.66,0.24,0.92)}
-.touch div#workarea{top:40px}
-.menu .menu_list{display:none;position:absolute}
-.tool_button,.tool_button_current,.tool_button_pressed{cursor:pointer}
-.tool_button:hover,.push_button:hover,.buttonup:hover,.buttondown,.tool_button_current,.push_button_pressed{background-color:#fff}
-.tool_button.disabled,.tool_button.disabled:hover{opacity:.3;background-color:#aaa}
-#tools_left .tool_button{background:#2f2f2c;position:relative}
-#tools_left .tool_button.loaded{background:#ccc}
-#tools_left .tool_button.loaded:hover{background:#fff}
-#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 2px;top:-1px;left:-1px;width:26px;height:26px;z-index:0}
-#tools_left .tool_button_current{background-color:#0cf}
-#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
-#tools_top{position:absolute;width:160px;height:100%;background:#2f2f2c;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 15px}
-.touch #tools_top{top:30px}
-label{display:block;color:#999}
-div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
-div#font-selector img{width:100%}
-div#font-selector .font-item{border-bottom:solid #ddd 1px;padding:5px 10px;margin:0 -10px}
-div#font-selector .font-item:hover{background-color:#eee}
-#tools_top #marker_panel *{float:left}
-#tools_top #marker_panel h4{float:none}
-#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
-#tools_top #marker_panel .dropdown button{margin-top:2px}
-#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
-#tools_top #marker_panel .dropdown .icon_label img{float:none}
-#color_picker input[type=text],#color_picker input[type=number]{width:30px;background:#fff}
-.dropdown_set input[type=text],.dropdown_set input[type=number]{width:50px}
-input[type=text].wide,input[type=number].wide{width:110px}
-input[type=text].tuco,input[type=number].tuco{width:150px}
-input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;border-radius:3px;padding:7px 17px;border:0;line-height:140%;font-size:14px;font-weight:bold;font-family:sans-serif}
-input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
-input[type=submit]:hover,button:hover{background:#2f84c1}
-input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
-#tools_left{position:absolute;border-right:0;width:50px;top:30px;bottom:0;left:0;background:#2f2f2c;z-index:4}
-#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
-#workarea.wireframe #svgcontent text{fill:#000;stroke:none}
-#workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
-#workarea #canvasBackground>rect{stroke:transparent!important}
-.context_panel{display:none}
-#canvas_panel{display:block}
-#multiselected_panel .selected_tool{vertical-align:12px}
-#cur_context_panel{position:absolute;top:47px;left:68px;line-height:22px;overflow:auto;border-bottom:0;border-right:0;padding-left:5px;font-size:12px;background:black;color:#999;opacity:.5;padding:0 10px;border-radius:0 10px 10px 0}
-#cur_context_panel a{float:none;text-decoration:none;color:#fff}
-#cur_context_panel a:hover{text-decoration:underline}
-#tools_left .tool_button,#tools_left .tool_button_current{position:relative;z-index:11}
-.flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
-.dropdown{position:relative;float:left}
-.dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
-.dropdown button:hover{background-color:#666}
-.dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
-.dropdown button.down{border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #fff;border-bottom:1px solid #fff;background-color:#b0b0b0}
-.dropdown ul{list-style:none;position:absolute;margin:0;padding:0;left:-80px;top:26px;z-index:4;display:none}
-.dropup ul{top:auto;bottom:26px;border-radius:3px;box-shadow:0 5px 10px #000}
-.dropup ul:after{content:'';display:block;position:absolute;bottom:-10px;right:50%;top:auto;width:0;height:0;border:solid transparent 5px;border-top-color:#fff}
-.dropdown li{display:block;width:120px;padding:5px 10px;color:#333;background:#fff;margin:0;line-height:16px}
-.dropdown li:first-child{border-radius:3px 3px 0 0}
-.dropdown li:last-child{border-radius:0 0 3px 3px}
-.dropdown li:hover{background-color:#ddd;color:#000}
-.dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important}
-.dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff}
-.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
-.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
-#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
-#tool_image{overflow:hidden}
-#tool_open input,#tool_import input,#tool_import_bitmap input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
-.disabled{opacity:.5;cursor:default}
-.width_label{padding-right:5px}
-#text{position:absolute;left:-9999px}
-#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
-#url_notice{padding-top:4px;display:none}
-#color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
-.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
-.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
-.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
-#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible;background:#2f2f2c}
-#tools_bottom_1{width:115px;float:left}
-#tools_bottom_2{position:relative;float:left;margin-top:5px}
-#tools_bottom input[type=text]{width:3.2em}
-#tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
-#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
-#tools_top.multiselected #align_tools{display:none}
-#tools_top.multiselected #multiselected_panel{display:block!important}
-#tools_top.multiselected #multiselected_panel .hidable{display:none}
-.draginput_cell{float:left;height:26px;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background:#ddd;cursor:pointer;position:relative}
-.draginput_cell:hover{background:#fff}
-.draginput_cell:after{content:'';position:absolute;top:0;left:0;border:solid #3f3f3c 1px;height:26px;width:26px;z-index:0}
-.align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
-.align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
-.align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
-.align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
-.align_buttons .push_button{display:block;float:left}
-#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
-#option_lists .optcols2{width:70px;margin-left:-15px}
-#option_lists .optcols3{width:192px;margin-left:-105px;margin-top:-25px;background:#fff;padding:5px;box-shadow:0 5px 10px #000;border-radius:3px}
-#option_lists .optcols3:after{content:'';display:block;position:absolute;top:-10px;right:70px;border:solid transparent 5px;border-bottom-color:#fff}
-#option_lists .tool_button,#option_lists .push_button,#option_lists .tool_button_current,#option_lists .push_button_pressed{border:0;background:transparent}
-#option_lists .tool_button:hover{background:#ddd}
-#option_lists ul li.current{background-color:#f4e284}
-#option_lists .optcols4{width:130px;margin-left:-44px}
-#option_lists ul[class^=optcols] li{float:left}
-ul li.current{background-color:#f4e284}
-#option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
-#copyright{text-align:right;padding-right:.3em}
-#svg_source_editor{display:none}
-#svg_source_editor #svg_source_overlay{position:absolute;top:0;right:0;left:0;bottom:0;background-color:black;opacity:.6;z-index:5}
-#svg_source_editor #svg_source_container{position:absolute;top:30px;left:100px;right:100px;bottom:30px;background-color:#fff;border-radius:3px;opacity:1.0;text-align:center;z-index:6;padding:15px 0}
-#svg_source_editor form{position:absolute;display:block;top:15px;bottom:55px;left:15px;right:12px;padding:5px;font-size:12px}
-#svg_source_textarea{width:100%;height:100%;line-height:140%;font-family:'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;font-size:12px}
-#svg_source_editor #tool_source_back{position:absolute;bottom:45px;left:15px;right:15px}
-#svg_source_editor #tool_source_back #tool_source_save{display:block;position:absolute;right:0}
-#svg_source_editor #tool_source_back #tool_source_cancel{display:block;position:absolute;left:0}
-button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
-#shape_buttons{overflow:auto;top:0;bottom:0;left:110px;right:0;position:absolute;vertical-align:top}
-#shape_cats{min-width:110px;display:block;position:absolute;left:0;top:0;height:300px;background:#eee;border-radius:3px 0 0 3px;z-index:2}
-#shape_cats>div{line-height:1em;padding:0 .5em;border-bottom:1px solid #ddd;background:#e8e8e8;color:#444;height:26px;line-height:26px}
-#shape_cats>div:first-child{border-radius:3px 0 0 0}
-#shape_cats>div:last-child{border-radius:0 0 0 3px}
-#shape_cats div:hover{background:#efefef;color:#000}
-#shape_cats div.current{font-weight:bold;background:#3f3f3c;color:#fff;position:relative}
-#shape_cats div.current:after{content:'';position:absolute;right:-26px;top:0;border:solid transparent 13px;border-left-color:#3f3f3c}
-.toolbar_button button .svg_icon{display:none}
-#dialog_box{display:none}
-#dialog_box_overlay{background:black;opacity:.5;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6}
-#dialog_content{height:95px;margin:10px 10px 5px 10px;overflow:auto;text-align:left;font-size:13px}
-#dialog_buttons input:last-child{background:#999!important;position:absolute;left:10px;bottom:10px}
-#dialog_buttons input:first-child{position:absolute;right:10px;bottom:10px}
-#dialog_content.prompt{height:75px}
-#dialog_content p{margin:10px;line-height:1.3em}
-#dialog_container{position:absolute;left:50%;top:50%;width:300px;margin-left:-150px;height:150px;margin-top:-80px;position:fixed;z-index:50001;background:#fff}
-#dialog_container,#dialog_content{border-radius:3px}
-#dialog_buttons input[type=text]{width:90%;display:block;margin:0 0 5px 11px}
-#dialog_buttons input[type=button]{margin:0 1em}
-.invisible{visibility:none}
-.ui-slider{position:relative;text-align:left}
-.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}
-.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0}
-.ui-slider-horizontal{height:.8em}
-.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}
-.ui-slider-horizontal .ui-slider-range{top:0;height:100%}
-.ui-slider-horizontal .ui-slider-range-min{left:0}
-.ui-slider-horizontal .ui-slider-range-max{right:0}
-.ui-slider-vertical{width:.8em;height:100px}
-.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}
-.ui-slider-vertical .ui-slider-range{left:0;width:100%}
-.ui-slider-vertical .ui-slider-range-min{bottom:0}
-.ui-slider-vertical .ui-slider-range-max{top:0}
-.ui-slider{background:#3f3f3c;border-radius:10px}
-.ui-slider-handle{box-shadow:0 3px 3px rgba(0,0,0,0.3);border-radius:30px;background:#fff;background-image:-ms-linear-gradient(top,#ccc 0,#fff 100%);background-image:-moz-linear-gradient(top,#ccc 0,#fff 100%);background-image:-o-linear-gradient(top,#ccc 0,#fff 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(1,#fff));background-image:-webkit-linear-gradient(top,#ccc 0,#fff 100%);background-image:linear-gradient(top,#ccc 0,#fff 100%)}
-.ui-slider-handle:focus{outline:0}
-#shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
-.tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
-.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px 'Lucida Sans','Lucida Grande',Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
-.touch .contextMenu{border:solid 5px rgba(0,0,0,.7);padding:0;margin:0 0 0 20px;font:18px/24px sans-serif;border-radius:5px;-webkit-box-shadow:2px 5px 20px 3px #000;box-shadow:2px 5px 20px rgba(0,0,0,0.5)}
-.touch .contextMenu:after{content:'';width:0;height:0;border:solid transparent 10px;border-right-color:rgba(0,0,0,.7);position:absolute;top:50%;left:-25px;margin-top:-10px;z-index:1000}
-.contextMenu LI{list-style:none;padding:0;margin:0}
-.contextMenu .shortcut{width:115px;text-align:right;float:right}
-.touch .contextMenu .shortcut{display:none}
-.touch .shortcut{display:none}
-.contextMenu A{-moz-user-select:none;-webkit-user-select:none;color:#222;text-decoration:none;display:block;line-height:20px;height:20px;background-position:6px center;background-repeat:no-repeat;outline:0;padding:0 15px 1px 20px}
-.touch .contextMenu A{padding:0 15px;border-bottom:#;font-weight:bold;border-top:solid 1px #e3e3e3;height:40px;line-height:40px;min-width:200px}
-.contextMenu LI.hover A{background-color:#2e5dea;color:white;cursor:default}
-.contextMenu LI.disabled A{color:#999}
-.touch .contextMenu LI.disabled A{display:none}
-.contextMenu LI.hover.disabled A{background-color:transparent}
-.contextMenu LI.separator{border-top:solid 1px #e3e3e3;padding-top:5px;margin-top:5px}
-.touch .contextMenu LI.separator{border-top:0;margin:0;padding:0}
-#menu{display:none;position:absolute;top:0;left:0;right:0;height:30px;background:#000;z-index:10;color:#fff}
-#workarea.rect,#workarea.line,#workarea.ellipse,#workarea.path,#workarea.shapelib{cursor:crosshair}
-#workarea.text{cursor:text}
-#workarea.eyedropper{cursor:url(../images/eyedropper.png) 0 16,crosshair}
-#workarea.fhpath{cursor:url(../images/pencil_cursor.png) 0 20,crosshair}
-#workarea.rotate *{cursor:url(../images/rotate.png) 12 12,auto}
-#workarea.select text,#workarea.multiselect text{cursor:default}
-#workarea.n-resize *{cursor:n-resize!important}
-#workarea.e-resize *{cursor:e-resize!important}
-#workarea.w-resize *{cursor:w-resize!important}
-#workarea.s-resize *{cursor:s-resize!important}
-#workarea.ne-resize *{cursor:ne-resize!important}
-#workarea.se-resize *{cursor:se-resize!important}
-#workarea.nw-resize *{cursor:nw-resize!important}
-#workarea.sw-resize *{cursor:sw-resize!important}
-#workarea.copy{cursor:copy}
-#workarea.zoom{cursor:crosshair;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}
-#workarea.zoom.out{cursor:crosshair;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}
-#selectorRubberBand{shape-rendering:crispEdges}
-.clearfix:before,.clearfix:after{content:"";display:table}
-.clearfix:after{clear:both}
-.clearfix{*zoom:1}
-#group_title{display:none}
-#base_unit_container{display:none;position:absolute;z-index:20}
-.draginput{background:#3f3f3c;border-radius:3px;-webkit-font-smoothing:antialiased;width:70px;height:70px;display:block;position:relative;float:left;margin:0 5px 5px 0}
-.draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
-.draginput label{margin:28px 10px 0 5px;font-size:14px;color:white;font-weight:bold;font-family:sans-serif}
-.draginput label#resolution_label,.draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
-.draginput label#seg_type_label{margin-top:40px}
-.draginput label#seg_type_label .caret{top:66%}
-.draginput label#resolution_label .pull{position:relative;left:-15px}
-.draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
-.touch .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
-.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
-.draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2}
-.draginput.twocol{width:145px}
-#tool_font_family .caret{right:40px;top:55%}
-#tool_font_family select{width:110px}
-#tool_bold,#tool_italic{font:bold 20px/35px serif;text-align:center;position:absolute;padding:0;color:#ccc;background:transparent;border:0;width:35px;height:35px;margin:0;top:0;right:0}
-#tool_italic{border-top:solid #2f2f2c 2px;top:35px;font-weight:bold;font-style:italic;font-size:24px}
-#tool_bold:hover,#tool_italic:hover{color:#fff}
-#tool_bold.active,#tool_italic.active{color:#50a0ff}
-#preview_font{font-size:20px;color:#fff;height:70px;line-height:75px;padding:0 0 0 10px;white-space:nowrap;width:100px;overflow:hidden;border-right:solid #2f2f2c 2px;position:relative}
-#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:15px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)}
-.draginput input,.draginput input:hover,.draginput input:active{cursor:url(../images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab}
-.draginput input[type="checkbox"],.draginput input[type="checkbox"]:hover,.draginput input[type="checkbox"]:active{cursor:pointer}
-.draginput.checkbox{cursor:pointer}
-.draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
-.draginput.error{background:#900}
-.draginput.error input{color:#fff}
-.draginput.stroke_tool{text-align:center}
-.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0}
-.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
-.draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.draginput input:focus{background:#50a0ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #50a0ff}
-.draginput input:focus+span{z-index:10;color:#fff}
-.draginput .push_bottom{bottom:0;position:absolute}
-#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
-#zoom_panel{padding:9px 0;right:175px;position:absolute}
-#zoom_label img,#zoom_label svg{width:16px;height:16px}
-#logo svg{pointer-events:none}
-#zoomLabel{width:16px;height:16px;cursor:pointer;background:#ccc}
-#zoomLabel:after{content:'';position:absolute;border-left:solid #2f2f2c 1px;left:0;height:16px}
-#zoom_label input{color:#ccc;font-size:13px;height:auto;width:auto;padding:0;cursor:default;position:static}
-#zoom_label span{top:0;left:0}
-body.dragging *{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-body.drag *{cursor:url(../images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
-input[readonly=readonly]:focus{box-shadow:none}
-#color_canvas_tools,#fill_bg,#stroke_bg{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat}
-#color_canvas_tools{width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden}
-#color_canvas_tools{display:block}
-#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
-#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #50a0ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
-#stroke_style_label{font-size:30px;margin-top:33px;letter-spacing:-1px}
-.stroke_tool .caret{top:60%}
-#tool_align_relative{position:absolute;top:-5px;left:0;right:20px;display:block}
-#tool_align_relative select{width:100%;display:block}
\ No newline at end of file
diff --git a/method-draw/css/method-draw.css b/method-draw/css/method-draw.css
index a7a1157e..d12c28be 100644
--- a/method-draw/css/method-draw.css
+++ b/method-draw/css/method-draw.css
@@ -1,7 +1,8 @@
 /* Comment to prevent wrong concat */
 
 body {
-	background: #3f3f3c;
+	/*background: #3f3f3c;*/
+background-color: #2f2f2c;
 	font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
 	-webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -11,6 +12,8 @@ body {
   user-select: none;
 	margin: 0;
 	padding: 0;
+	top :0;
+	left:0;
 }
 
 ::selection {background: #000; color: #fff; /* Safari */}
@@ -189,13 +192,13 @@ html, body {
  #svgcanvas {
 	line-height: normal;
 	display: inline-block;
-	background-color: #A0A0A0;
+	background-color: #2f2f2c;
 	text-align: center;
 	vertical-align: middle;
 	width: 640px;
 	height: 480px;
 	position: relative;
-	background: #3F3F3C;
+	background: #2f2f2c;
 }
 
 #rulers > div {
@@ -207,7 +210,7 @@ html, body {
 }
 
 #rulers #ruler_corner {
-	top: 30px;
+	/*top: 30px;*/
 	left: 50px;
 	width: 15px;
 	height: 15px;
@@ -217,7 +220,7 @@ html, body {
 
 #ruler_x {
 	height: 15px;
-	top: 30px;
+	/*top: 30px;*/
 	left: 66px;
 	right: 175px;
 	border-top: solid #444 1px;
@@ -246,7 +249,7 @@ html, body {
 #ruler_y {
 	width: 15px;
 	top: 46px;
-	left: 50px;
+	/*left: 50px;*/
 	bottom: 40px;
 	border-left: solid #444 1px;
 	border-bottom: solid #444 1px;
@@ -278,11 +281,11 @@ html, body {
 	display: block;
 	position: absolute;
 	z-index: 2;
-	left: 10px;
+	left: 60px;
 	bottom: 5px;
-	width: 410px;
-	right: 145px;
-	height: 30px;
+	width:60%;
+	right: 105px;
+	height: 40px;
 }
 
  .palette_item {
@@ -301,6 +304,7 @@ html, body {
   top: 0;
 }
 
+
 .palette_item.transparent {
 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==);
 }
@@ -315,11 +319,33 @@ html, body {
   top: 20px;
 }
 
+
+#zoom_label {
+	height: 20px;
+	background: transparent;
+	cursor: default !important;
+	width: auto;
+	padding: 0 10px;
+	margin: 0;
+}
+
+#zoom_panel {
+	padding: 9px 0;
+	right: 10px;
+  position: absolute;
+  top:10px;
+}
+
+#zoom_label img, #zoom_label svg {
+	width: 16px;
+	height: 16px;
+}
+
  #color_tools {
   position: relative;
   width: 48px;
   height: 48px;
-  margin: 6px 6px 0 6px;
+  margin: 2px 0px 0px 0px;
 }
 
 .touch  #color_tools {
@@ -542,7 +568,8 @@ html, body {
 	left: 50px;
 	bottom: 40px;
 	right: 175px;
-	background-color: #444;
+	/*background-color: #444;*/
+	background-color: #2f2f2c;
 	overflow: auto;
 	text-align: center;
 	-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
@@ -617,7 +644,7 @@ html, body {
 	right: 0;
 	top: 20px;
 	border-bottom: none;
-	overflow: visible;
+overflow:auto;
 	padding: 0 0 0 15px;
 }
 
@@ -1038,24 +1065,28 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
  #tools_bottom {
 	position: absolute;
 	left: 50px;
-	right: 0;
-	bottom: 0;
-	height: 40px;
-	overflow: visible;
+	right: 0px;
+	bottom: 0px;
+	height: 50px;
+	width : 75%;
+	overflow: auto;
 	background: #2f2f2c;
 }
 
  #tools_bottom_1 {
 	width: 115px;
 	float: left;
+
 }
 
  #tools_bottom_2 {
 	position: relative;
 	float: left;
 	margin-top: 5px;
+
 }
 
+
 #tools_bottom input[type=text] {
 	width: 3.2em;
 }
@@ -1949,25 +1980,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
 	position: absolute;
 }
 
-#zoom_label {
-	height: 20px;
-	background: transparent;
-	cursor: default !important;
-	width: auto;
-	padding: 0 10px;
-	margin: 0;
-}
-
-#zoom_panel {
-	padding: 9px 0;
-	right: 175px;
-  position: absolute;
-}
-
-#zoom_label img, #zoom_label svg {
-	width: 16px;
-	height: 16px;
-}
 
 #logo svg {
 	pointer-events: none;
diff --git a/method-draw/extensions/ext-shapes.js b/method-draw/extensions/ext-shapes.js
index 25611bc9..7a1c2977 100644
--- a/method-draw/extensions/ext-shapes.js
+++ b/method-draw/extensions/ext-shapes.js
@@ -31,7 +31,8 @@ methodDraw.addExtension("shapes", function() {
 		music: 'Music',
 		weather: 'Weather &amp; Time',
 		ui: 'User Interface',
-		social: 'Social Web'
+		social: 'Social Web',
+
 	};
 	
 	var library = {
@@ -174,7 +175,8 @@ methodDraw.addExtension("shapes", function() {
 				
    			var copy = btn.children().clone().attr({width: 24, height: 24});
    			shower.children(':not(.flyout_arrow_horiz)').remove();
-   			shower
+
+   			shower				
    				.append(copy)
    				.attr('data-curopt', '#' + btn[0].id) // This sets the current mode
    				.mouseup();
@@ -218,9 +220,12 @@ methodDraw.addExtension("shapes", function() {
 			$('#tool_shapelib').remove();
 			
 			var h = $('#tools_shapelib').height();
+			var w1 = $('#tools_shapelib').width();
+			var w2 = $(document).width();
+			//alert(w2-w1)
 			$('#tools_shapelib').css({
-				'margin-top': -(h/2),
-				'margin-left': 3
+				'margin-top': -(h-90),
+				'margin-left':(w2-w1) - 300
 			});
 
 	
diff --git a/method-draw/images/.DS_Store b/method-draw/images/.DS_Store
deleted file mode 100644
index cd5e42f6ec6361bc1bdaf42c7c791fb380e3718e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 21508
zcmeHN&2Ah;5U$yEl=1G`Yhxrh?gc3qM*%LmAQ@vLaR8)n;e_$OO*Wpz-i_m&e1k_o
z$_wPgJ8<K`kpmBaL>>WgG2d4+wyQJU<2@i0B{i#=-kq(ltNW|!>aLy<k!*Fc^S;PE
z5y^3~T<GEQgUEoTIru-%+R?_H4CgjZd|wdR#pgga<w$mF()AlH+#-Gk=aTHnae!Y&
zy@$BBEkoSDD<jmp|JktE-WnELKtNslJ5=!ELJ!>8hs3gMNg-o=3V8(7i9CK8CBH%T
z4o*Lu0cXG&a0Z-#H<1C(y*To2S^Cu(a0Z-#D+U-J1~^%+RONYDYUsd)OL+dzCA=Q^
zj)l428&u^=Ri2lnLV-~z$`YDYDMnVpaeqK@lq*$vUX~?XvJx&?r8%oIluWe)H&AiO
zR?5<^&VVyeXW%2;isjxX^1V!u$ulR9=HButM*r7Wxwl9c`FDZ*dk5E3Wa4oYa_;~&
zTcIY%@1uz9K@D+;%zhKNM9Z>28WE8lfz~%KAv)N37(>Sp<#xPXtv_$TMD%dKBItdt
z8jeyuQI3B#94}V#4`l=GD!}p>7AkP}B;HEyb+l{^)L1CzX|}C=U%4K^t_3W#se3YG
zIg4w{o<Z9))81Z%9szx*t-TA~hq4#$<0$TTcw+nFLS1yehGT!@EvC+&Z@}&~V1F^#
zTs}u1M=3V7oqrj5vQuD(X&3eg_njiURqB_PTe5SB=6+RT1gLjfTvxt;^d~rJ%j1T=
z{bSlX5B>{`PPUbMYV@AO2vXm+8v6#z8n`1jPNCJyEjm|pQX9RzecyOZj<$_ZdqWHf
z<Y(10Ptq-73<(gqBF5OOjQbQKNK!sBu4$n_zEicIJD9_`4zkpUiRe+Lo*SkX13k3s
z1paW6_6l0Irj;@7A^4^zB}Qj^&UjKET8A17xZ6uFq)!kXYcnEH+qSt2G%;ryg%UPa
zi#4Mnx;VlDT}#l#8SF9au!~t~>L}J81pPfmZ?XG~IyfUT;+|@ZNU`;yK`%f)hW?;|
zZH$PkSlE#VvMwLX8e-ErFk^Wl<1l`z|5>(j?e#WfqyDX4P?zV-9hFyKwemf!pRtF$
zau$l>=&v*H8h`Bo!QJ^yoQc@O87si#V0u$yY*a^vu^q^FAYVqPbpJ748!-{zB4+`n
zAL!Z87{_rCZzVi4K;Kq$BI1+pK$^PvT!m3_1Aa&rlPe}={YS(4Vt}5gCpXtX8`v7i
zDK+wGOsa>pgT=fJ%n1H*gqd-S>xQ;?N55_1{(b{fwjS!fVJ%Ak4|Kl;44(Ty=PqIs
z*K!-UmMbQ%lv4J!dY7iDL!O2sQ7va{$<@;_V&lD4Tm5ZpW#uES)X`z(yQsN9@3=Ng
z&u6raMdh#spV1}8JL6~|zhELL<7xS<jy@UncC|;S@3d(Q>)5jLbBM2e_E&1!#5yVA
zb;`Fz=JFK1DxdvD)?noO)<MAcwS0o_KpuhF4`<-DVc<RVWC3H7nQrX)d14I79W#cS
z@QE?ifaeUu6-BwCjOgc#KQ%t0pV2MA&j<ZyZnKw)*NkjaVIz7O<pONT+ap+D2cO2b
z9j3-d^fUI!PsVQjpx<1}?IWV6W-6=+rbI_{tIe$Lxj=VA_N&&q85z;3wz9|`R?$Pu
zlw3)z;%v&CzeI0a)ow%|D;P>oojtU+fWF+z$SYlm9U9$Jm<00NNnlPDpIhlgwpSgj
zYnWef+%)8xHOvj~*3etB+<40@G|)Gbym4(3K{V_$&?^E&UairX6-F#dUx>($Qu|T#
zfIyyo;L7&|pCr2h;x-VI)R^GvBarUEYB%hTD6dZpukQd;s1~kr82OgrqiiKt`^Wgr
z94paY<=obmqc-N7sns<ZxAMI!dFHaraihE_^K~5Cc)i~n$%fSe7S~mNINNZSEwQR&
zqzqbFM@76ttzmWDM*U|g9cqUc#tzrgk-C*<D?MM;O}5EGX{$JQ<lJIAm|qTnXj-w;
z(=Db84EIc!g(cVd%C<$#R;V&pjM;}wUn3Iv0GVw+H(YuCFXH)s@GfQsFAs8X&;Kz|
z<Eb`RvY!8Y{!ef4!x?yW7`Rn7<sRSvTgNs)4`t;2|5vBM-V$fP8Tii`$Y$2QT3bc6
z)w^{y1$@_Tfb(0Nmj`5392fr0A2TfRgRkP<=l9D4|E=&l%JZ_sHyr=_OMssLd;Y%#
z$Ky+)+~2y+d_~^8{GUV64`;v`a0Z+KXTTY72AlzBz!`7`oB?OR8E^)i0cXG&a0Z+K
SXTTY72AlzBz!`WA82A^phw1YG

diff --git a/method-draw/lib/jgraduate/css/jPicker.css b/method-draw/lib/jgraduate/css/jPicker.css
index 5bb30fd5..01b89ab9 100644
--- a/method-draw/lib/jgraduate/css/jPicker.css
+++ b/method-draw/lib/jgraduate/css/jPicker.css
@@ -1,11 +1,12 @@
-#svg_editor .jPicker .Icon {
+
+ .jPicker .Icon {
     display: inline-block;
     height: 24px;
     position: relative;
     text-align: left;
     width: 25px;
 }
-#svg_editor .jPicker .Icon span.Color, #svg_editor .jPicker .Icon span.Alpha {
+ .jPicker .Icon span.Color,  .jPicker .Icon span.Alpha {
     background-position: 2px 2px;
     display: block;
     height: 100%;
@@ -13,7 +14,7 @@
     position: absolute;
     top: 0;
     width: 100%}
-#svg_editor .jPicker .Icon span.Image {
+ .jPicker .Icon span.Image {
     background-repeat: no-repeat;
     cursor: pointer;
     display: block;
@@ -22,16 +23,16 @@
     position: absolute;
     top: 0;
     width: 100%}
-#svg_editor .jPicker.Container {
+ .jPicker.Container {
     z-index: 10;
 }
 
-table#svg_editor .jPicker {
+table .jPicker {
     width: 545px;
      z-index: 20;
 }
 
-#svg_editor .jPicker .Move {
+ .jPicker .Move {
     background-color: #ddd;
     border-color: #fff #666 #666 #fff;
     border-style: solid;
@@ -40,11 +41,12 @@ table#svg_editor .jPicker {
     height: 12px;
     padding: 0;
 }
-#svg_editor .jPicker .Title {
+ .jPicker .Title {
     display:  none;
 }
 
-#svg_editor .jPicker div.Map {
+ .jPicker div.Map {
+
     
   border:  solid #000 1px;
      
@@ -63,11 +65,12 @@ table#svg_editor .jPicker {
   width: 260px;
     
 }
-#svg_editor .jPicker div[class="Map"] {
+ .jPicker div[class="Map"] {
     height: 256px;
     width: 256px;
 }
-#svg_editor .jPicker div.Bar {
+ .jPicker div.Bar {
+	 
     border:  solid #000 1px;
      cursor: n-resize;
     height: 260px;
@@ -77,11 +80,15 @@ table#svg_editor .jPicker {
     position: relative;
     width: 24px;
 }
-#svg_editor .jPicker div[class="Bar"] {
+ .jPicker div[class="Bar"] {
     height: 256px;
     width: 20px;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4, #svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker{
+    background-color: white;
+	bottom:10px;
+ }
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Map .Map3,  .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4,  .jPicker .Bar .Map5,  .jPicker .Bar .Map6 {
     background-color: transparent;
     background-image: none;
     display: block;
@@ -89,41 +96,41 @@ table#svg_editor .jPicker {
     position: absolute;
     top: 0;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3 {
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Map .Map3 {
     height: 2596px;
     width: 256px;
 }
-#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
+ .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4 {
     height: 3896px;
     width: 20px;
 }
-#svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker .Bar .Map5,  .jPicker .Bar .Map6 {
     height: 256px;
     width: 20px;
 }
-#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Bar .Map6 {
+ .jPicker .Map .Map1,  .jPicker .Map .Map2,  .jPicker .Bar .Map6 {
     background-repeat: no-repeat;
 }
-#svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map5 {
+ .jPicker .Map .Map3,  .jPicker .Bar .Map5 {
     background-repeat: repeat;
 }
-#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
+ .jPicker .Bar .Map1,  .jPicker .Bar .Map2,  .jPicker .Bar .Map3,  .jPicker .Bar .Map4 {
     background-repeat: repeat-x;
 }
-#svg_editor .jPicker .Map .Arrow {
+ .jPicker .Map .Arrow {
     display: block;
     position: absolute;
 }
-#svg_editor .jPicker .Bar .Arrow {
+ .jPicker .Bar .Arrow {
     display: block;
     left: 0;
     position: absolute;
 }
-#svg_editor .jPicker .Preview {
+ .jPicker .Preview {
     font-size: 9px;
     text-align: center;
 }
-#svg_editor .jPicker .Preview div.bgt  {
+ .jPicker .Preview div.bgt  {
     height: 62px;
     margin: 0 auto;
     padding: 0;
@@ -131,7 +138,7 @@ table#svg_editor .jPicker {
 }
 
 
-#svg_editor .jPicker .Preview div span {
+ .jPicker .Preview div span {
     border: 1px solid #000;
     display: block;
     height: 30px;
@@ -139,31 +146,31 @@ table#svg_editor .jPicker {
     padding: 0;
     width: 60px;
 }
-#svg_editor .jPicker .Preview .Active {
+ .jPicker .Preview .Active {
     border-bottom-width: 0;
 }
-#svg_editor .jPicker .Preview .Current {
+ .jPicker .Preview .Current {
     border-top-width: 0;
     cursor: pointer;
 }
-#svg_editor .jPicker .Button {
+ .jPicker .Button {
     text-align: center;
     width: 115px;
 }
-#svg_editor .jPicker .Button input {
+ .jPicker .Button input {
     width: 100px;
 }
 
-#svg_editor .jPicker td.Radio {
+ .jPicker td.Radio {
     margin: 0;
     padding: 0;
     width: 31px;
 }
-#svg_editor .jPicker td.Radio input {
+ .jPicker td.Radio input {
     margin: 0 5px 0 0;
     padding: 0;
 }
-#svg_editor .jPicker td.Text {
+ .jPicker td.Text {
     font-size: 12px!important;
     height: 22px;
     margin: 0;
@@ -171,16 +178,16 @@ table#svg_editor .jPicker {
     text-align: left;
     width: 70px;
 }
-#svg_editor .jPicker tr.Hex td.Text {
+ .jPicker tr.Hex td.Text {
     width: 100px;
     color: #666;
 }
 
-#svg_editor .jPicker tr.Hex td.Text span {
+ .jPicker tr.Hex td.Text span {
     width: 100px;
     color: #333;
 }
-#svg_editor .jPicker td.Text input {
+ .jPicker td.Text input {
     background-color: #fff;
     border: 1px inset #aaa;
     height: 15px;
@@ -190,22 +197,22 @@ table#svg_editor .jPicker {
     color: #333;
 }
 
-#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex {
+ #color_picker .jPicker tr.Hex td.Text input.Hex {
     width: 50px;
     display: inline-block;
     float: none;
 }
 
-#svg_editor .jPicker tr.Hex td.Text input.AHex {
+ .jPicker tr.Hex td.Text input.AHex {
     width: 20px;
     display: none;
 }
-#svg_editor .jPicker .Grid {
+ .jPicker .Grid {
     text-align: center;
     float: right;
     width: 108px;
 }
-#svg_editor .jPicker .Grid span.QuickColor {
+ .jPicker .Grid span.QuickColor {
     cursor: pointer;
     display: inline-block;
     height: 15px;
@@ -214,37 +221,37 @@ table#svg_editor .jPicker {
     padding: 0;
     width: 18px;
 }
-#svg_editor .jPicker td  {
+ .jPicker td  {
   vertical-align:  top;
 }
-#svg_editor .jPicker td.colorsquare  {
+ .jPicker td.colorsquare  {
   width:  275px;
 }
 
-#svg_editor .jPicker .prev_div  {
+ .jPicker .prev_div  {
   margin-top:  -15px;
 }
 
-#svg_editor .jPicker .actions {
+ .jPicker .actions {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px;
 }
 
-#svg_editor .jPicker .actions .Ok{
+ .jPicker .actions .Ok{
   position: absolute;
   top: 0;
   right: 0px;
 }
 
-#svg_editor .jPicker .actions .Cancel{
+ .jPicker .actions .Cancel{
   position: absolute;
   top: 0;
   left: 0px;
 }
 
-#svg_editor .jPicker .color_preview {
+ .jPicker .color_preview {
   width: 62px;
   margin: 0 auto;
 }
diff --git a/method-draw/lib/jgraduate/jquery.jgraduate.js b/method-draw/lib/jgraduate/jquery.jgraduate.js
index 916ec1cc..eaabae59 100644
--- a/method-draw/lib/jgraduate/jquery.jgraduate.js
+++ b/method-draw/lib/jgraduate/jquery.jgraduate.js
@@ -203,8 +203,8 @@ jQuery.fn.jGraduate =
             $this.addClass('jGraduate_Picker');
             $this.html('<ul class="jGraduate_tabs">' +
             				'<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
-            				'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
-            				'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
+            			//	'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
+            			//	'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
             			'</ul>' +
             			'<div class="jGraduate_colPick"></div>' +
             			'<div class="jGraduate_gradPick"></div>' +
diff --git a/method-draw/lib/jquery-draginput.js b/method-draw/lib/jquery-draginput.js
index 36e87cf2..772fd35f 100644
--- a/method-draw/lib/jquery-draginput.js
+++ b/method-draw/lib/jquery-draginput.js
@@ -171,6 +171,9 @@ $.fn.dragInput = function(cfg){
 
 // public function
 $.fn.dragInput.updateCursor = function(el){
+	 if (typeof el == 'undefined') {
+ 	    return;
+   }
   var value = parseFloat(el.value);
   var scale = parseFloat(el.getAttribute("data-scale"));
   var domain = parseFloat(el.getAttribute("data-domain"));
diff --git a/method-draw/src/embedapi.js b/method-draw/src/embedapi.js
index 8debfd6d..134cb9ec 100644
--- a/method-draw/src/embedapi.js
+++ b/method-draw/src/embedapi.js
@@ -1,36 +1,4 @@
 /*
-function embedded_svg_edit(frame){
-  //initialize communication
-  this.frame = frame;
-  this.stack = []; //callback stack
-  
-  var editapi = this;
-  
-  window.addEventListener("message", function(e){
-    if(e.data.substr(0,5) == "ERROR"){
-      editapi.stack.splice(0,1)[0](e.data,"error")
-    }else{
-      editapi.stack.splice(0,1)[0](e.data)
-    }
-  }, false)
-}
-
-embedded_svg_edit.prototype.call = function(code, callback){
-  this.stack.push(callback);
-  this.frame.contentWindow.postMessage(code,"*");
-}
-
-embedded_svg_edit.prototype.getSvgString = function(callback){
-  this.call("svgCanvas.getSvgString()",callback)
-}
-
-embedded_svg_edit.prototype.setSvgString = function(svg){
-  this.call("svgCanvas.setSvgString('"+svg.replace(/'/g, "\\'")+"')");
-}
-*/
-
-
-/*
 Embedded SVG-edit API
 
 General usage:
diff --git a/method-draw/src/method-draw.js b/method-draw/src/method-draw.js
index b046585c..85b36061 100644
--- a/method-draw/src/method-draw.js
+++ b/method-draw/src/method-draw.js
@@ -35,7 +35,7 @@
 			initOpacity: 1,
 			imgPath: 'images/',
 			extPath: 'extensions/',
-			jGraduatePath: 'jgraduate/images/',
+			jGraduatePath: 'lib/jgraduate/images/',
 			extensions: [],
 			initTool: 'select',
 			wireframe: false,
@@ -677,26 +677,26 @@
 				if (typeof animatedZoom != 'undefined') window.cancelAnimationFrame(animatedZoom)
 				// zoom duration 500ms
 				var start = Date.now();
-				var duration = 500;
+				var duration = 100;
 				var diff = (zoomlevel) - (res.zoom)
 				var zoom = $('#zoom')[0]
 				var current_zoom = res.zoom
-				var animateZoom = function(timestamp) {
-				  var progress = Date.now() - start
-				  var tick = progress / duration
-          tick = (Math.pow((tick-1), 3) +1);
-          svgCanvas.setZoom(current_zoom + (diff*tick));
+			//	var animateZoom = function(timestamp) {
+				//  var progress = Date.now() - start
+				  //var tick = progress / duration
+          //tick = (Math.pow((tick-1), 3) +1);
+          svgCanvas.setZoom(zoomlevel );//+ (diff*tick));
 				  updateCanvas();
-				  if (tick < 1 && tick > -.90) {
-            window.animatedZoom = requestAnimationFrame(animateZoom)
-				  }
-				  else {
+				//  if (tick < 1 && tick > -.90) {
+            //window.animatedZoom = requestAnimationFrame(animateZoom)
+			//	  }
+			//	  else {
 				    $("#zoom").val(parseInt(zoomlevel*100))
 				    $("option", "#zoom_select").removeAttr("selected")
 				    $("option[value="+ parseInt(zoomlevel*100) +"]", "#zoom_select").attr("selected", "selected")
-				  }
-				}
-				animateZoom()
+			//	  }
+			//	}
+			//	animateZoom()
 				
  			  
 				
@@ -829,6 +829,18 @@
 					var pos = $(show_sel).position();
 					$(hold_sel).css({'left': pos.left+34, 'top': pos.top+77});
 					
+					
+					//move to top menu
+					
+
+					
+					var label =  '<h4 class="clearfix">Shapes</h4>';
+					
+					
+					$('#tools_top').prepend(shower);
+					$('#tools_top').prepend(label);
+					
+
 					// Clicking the "show" icon should set the current mode
 					shower.mousedown(function(evt) {
 					  $('#workarea').one("mousedown", function(){$('#tools_shapelib').hide()})
@@ -837,8 +849,8 @@
 						var holder = $(hold_sel);
 						var l = pos.left+34;
 						var w = holder.width()*-1;
-						var time = holder.data('shown_popop')?200:0;
-						timer = setTimeout(function() {
+						//var time = holder.data('shown_popop')?200:0;
+						//timer = setTimeout(function() {
 							// Show corresponding menu
 							if(!shower.data('isLibrary')) {
 								holder.css('left', w).show().animate({
@@ -848,10 +860,10 @@
 								holder.css('left', l).show();
 							}
 							holder.data('shown_popop',true);
-						},time);
+					//	},time);
 						evt.preventDefault();
 					}).mouseup(function(evt) {
-						clearTimeout(timer);
+					//	clearTimeout(timer);
 						var opt = $(this).attr('data-curopt');
 						// Is library and popped up, so do nothing
 						if(shower.data('isLibrary') && $(show_sel.replace('_show','')).is(':visible')) {
@@ -1554,9 +1566,13 @@
 							
 							//update the draginput cursors
 						  var name_item = document.getElementById(el_name + '_' + item);
-							name_item.value = Math.round(attrVal) || 0;
-							if (name_item.getAttribute("data-cursor") === "true") {
-      				  $.fn.dragInput.updateCursor(name_item );
+						 if (name_item) {
+ 			                name_item.value = Math.round(attrVal) || 0;
+            			     if (name_item.getAttribute("data-cursor") === "true") {
+                   				$.fn.dragInput.updateCursor(name_item );
+               }
+
+
       				}
 						});
 						
@@ -1649,14 +1665,27 @@
 			palette.forEach(function(item, i){
 				str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
 			});
+
+		  
 			$('#palette').append(str);
 			
+//			$("#color_tools").prependTo($('#tools_bottom_3'));
+			
+			
 			var changeFontSize = function(ctl) {
 				svgCanvas.setFontSize(ctl.value);
 			}
 			
 			var changeStrokeWidth = function(ctl) {
 				var val = ctl.value;
+
+
+				// Very stupid filter for non-numbers, fixes issues with "px" line widths
+		         // TODO: if "px" widths and sizes aren't supported, they should just be
+		         // filtered out/converted on import/open
+		         if (isNaN(val)) {
+		           val = ctl.value = 1;
+		         }
 				if(val == 0 && selectedElement && ['line', 'polyline'].indexOf(selectedElement.nodeName) >= 0) {
 					val = ctl.value = 1;
 				}
@@ -1777,6 +1806,7 @@
 						paint = new $.jGraduate.Paint();
 					}
 					else {
+//						alert ( color.substr(1))
 						paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
 					}
 					
@@ -2283,7 +2313,9 @@
 		
 			var moveSelected = function(dx,dy) {
 				if (selectedElement != null || multiselected) {
+
 					if(curConfig.gridSnapping) {
+
 						// Use grid snap value regardless of zoom level
 						var multi = svgCanvas.getZoom() * curConfig.snappingStep;
 						dx *= multi;
@@ -2528,6 +2560,8 @@
 				}
 				$('#rulers').toggle(!!curConfig.showRulers)
 			}
+
+			Editor.showRulers = clickRulers;
 			
 			var updateWireFrame = function() {
 				// Test support
@@ -2581,7 +2615,17 @@
 				}
 				setSelectMode();		
 			};
-			
+			var savePreferences = function() {
+				
+				//$('#rulers').toggle(curConfig.showRulers);
+				//if(curConfig.showRulers) updateRulers();
+				curConfig.baseUnit = $('#base_unit').val();
+
+				svgCanvas.setConfig(curConfig);
+
+				updateCanvas();
+
+			}
 			function setBackground(color, url) {
 // 				if(color == curPrefs.bkgd_color && url == curPrefs.bkgd_url) return;
 				$.pref('bkgd_color', color);
@@ -3158,7 +3202,7 @@
 				return false;
 			} 
 			height.parent().removeClass('error');
-			if(!svgCanvas.setResolution(w, h)) {
+			if(!svgCanvas.setResolution(w, h)) { 
 				$.alert(uiStrings.notification.noContentToFitTo);
 				var dims = svgCanvas.getResolution()
 				width.val(dims.w)
@@ -3193,30 +3237,14 @@
 					var dims = this.value.split('x');
 					dims[0] = parseInt(dims[0]); 
 					dims[1] = parseInt(dims[1]);
-					var diff_w = dims[0] - w.value;
-					var diff_h = dims[1] - h.value;
-					//animate
-					var start = Date.now();
-					var duration = 1000;
-					var animateCanvasSize = function(timestamp) {
-					  var progress = timestamp - start
-					  var tick = progress / duration
-            tick = (Math.pow((tick-1), 3) +1);
-					  w.value = (dims[0] - diff_w + (tick*diff_w)).toFixed(0);
-					  h.value = (dims[1] - diff_h + (tick*diff_h)).toFixed(0);
+					//iphone
+
+				
+					  w.value = dims[0];
+					  h.value = dims[1];
 					  changeCanvasSize();
-					  if (tick >= 1) {
-					    var res = svgCanvas.getResolution()
-					    $('#canvas_width').val(res.w.toFixed())
-					    $('#canvas_height').val(res.h.toFixed())
-					    $('#resolution_label').html("<div class='pull'>" + res.w + "<span>×</span></br>" + res.h + "</div>");
-					  }
-					  else {
-					    requestAnimationFrame(animateCanvasSize)
-					  }
-					}
-					animateCanvasSize(Date.now())
 
+				
 				}
 			});
 			
@@ -3229,6 +3257,7 @@
 			
 			// Associate all button actions as well as non-button keyboard shortcuts
 			var Actions = function() {
+			//Menu Actions menu_actions
 				// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
 				var tool_buttons = [
 					{sel:'#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
@@ -3247,7 +3276,7 @@
 					{sel:'#tool_export', fn: clickExport, evt: 'mouseup'},
 					{sel:'#tool_open', fn: clickOpen, evt: 'mouseup'},
 					{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
-					{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: [modKey + 'U', true]},
+					{sel:'#tool_source', fn: showSourceEditor, evt: 'click'},
 					{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click'},
 					{sel:'#tool_snap', fn: clickSnapGrid, evt: 'click'},
 					{sel:'#tool_rulers', fn: clickRulers, evt: 'click'},
@@ -3530,6 +3559,9 @@
 							break;
 						case 'cut':
 							cutSelected();
+							break;
+						case 'clone' :
+
 							break;
 						case 'copy':
 							copySelected();
diff --git a/method-draw/src/svgcanvas.js b/method-draw/src/svgcanvas.js
index 5d9d1a7a..0c74e758 100644
--- a/method-draw/src/svgcanvas.js
+++ b/method-draw/src/svgcanvas.js
@@ -113,16 +113,17 @@ var svgns = "http://www.w3.org/2000/svg",
 	htmlns = "http://www.w3.org/1999/xhtml",
 	mathns = "http://www.w3.org/1998/Math/MathML";
 
-// Default configuration options
-var curConfig = {
-	show_outside_canvas: true,
-	selectNew: true,
-	dimensions: [640, 480]
-};
+	var curConfig = config;
+	// Default configuration options
+	var curConfig2 = {
+		show_outside_canvas: true,
+		selectNew: true,
+		dimensions: [640, 480]
+	};
 
 // Update config with new one if given
 if(config) {
-	$.extend(curConfig, config);
+	$.extend(curConfig, curConfig2);
 }
 
 // Array with width/height of canvas
@@ -172,7 +173,7 @@ var clearSvgContentElement = canvas.clearSvgContentElement = function() {
 	}).appendTo(svgroot);
 
 	// TODO: make this string optional and set by the client
-	var comment = svgdoc.createComment(" Created with Method Draw - http://github.com/duopixel/Method-Draw/ ");
+	var comment = svgdoc.createComment("Created with Vector Code http://www.vectorcodeapp.com");
 	svgcontent.appendChild(comment);
 };
 clearSvgContentElement();
@@ -2212,8 +2213,13 @@ var addToSelection = this.addToSelection = function(elemsToAdd, showGrips) {
 		}
 	}
 	call("selected", selectedElements);
-	if (showGrips || selectedElements.length == 1) selectorManager.requestSelector(selectedElements[0]).showGrips(true)
-  else selectorManager.requestSelector(selectedElements[0]).showGrips(false);
+	if (selectedElements[0] != null) {
+    	if (showGrips || selectedElements.length == 1) {
+      		selectorManager.requestSelector(selectedElements[0]).showGrips(true)
+ 	    } else {
+   			selectorManager.requestSelector(selectedElements[0]).showGrips(false);
+     }
+   }
 
 	// make sure the elements are in the correct order
 	// See: http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition
@@ -2227,7 +2233,7 @@ var addToSelection = this.addToSelection = function(elemsToAdd, showGrips) {
 	});
 	
 	// Make sure first elements are not null
-	while(selectedElements[0] == null) selectedElements.shift(0);
+	while(selectedElements[0] == null && selectedElements.length) selectedElements.shift(0);
 };
 
 // Function: selectOnly()
@@ -2420,7 +2426,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 			mouse_target = selectedElements[0];
 		}
 		
-		start_transform = mouse_target.getAttribute("transform");
+		start_transform = $(mouse_target).attr("transform");
 		var tlist = getTransformList(mouse_target);
 		switch (current_mode) {
 			case "select":
@@ -5972,6 +5978,7 @@ var convertToGroup = this.convertToGroup = function(elem) {
 // Returns:
 // This function returns false if the set was unsuccessful, true otherwise.
 this.setSvgString = function(xmlString) {
+	canvas.clearSelection();
 	try {
 		// convert string into XML document
 		var newDoc = svgedit.utilities.text2xml(xmlString);
@@ -6729,12 +6736,12 @@ var getResolution = this.getResolution = function() {
 // 		var vb = svgcontent.getAttribute("viewBox").split(' ');
 // 		return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
 	
-	var width = svgcontent.getAttribute("width")/current_zoom;
-	var height = svgcontent.getAttribute("height")/current_zoom;
+	var width = parseInt(svgcontent.getAttribute("width"));
+ 	var height = parseInt(svgcontent.getAttribute("height"));
 	
 	return {
-		'w': width,
-		'h': height,
+		'w': width/current_zoom,
+ 	    'h': height/current_zoom,
 		'zoom': current_zoom
 	};
 };
@@ -8510,6 +8517,7 @@ var pushGroupProperties = this.pushGroupProperties = function(g, undoable) {
 // significant recalculations to apply group's transforms, etc to its children
 this.ungroupSelectedElement = function() {
 	var g = selectedElements[0];
+	if (typeof g == 'undefined') return;
 	if($(g).data('gsvg') || $(g).data('symbol')) {
 		// Is svg, so actually convert to group