sketchily 0.1.0 → 0.2.0

data/README.md

@@ -40,7 +40,7 @@ Currently available options are:
 
 - `width`
 - `height`
-- `show_menu` (true if you want svg-edit's menu to be displayed)
+- `hide_menu` (true if you want svg-edit's menu to be hidden)
 - `hide_image_tool` (true if you want to hide the image tool button)
 - `canvas_width` (number specifying initial canvas width)
 - `canvas_height` (number specifying initial canvas height)

data/app/views/sketchily/_embed.html.erb

@@ -3,7 +3,7 @@
    # value
    #
    # Additionally, they may override the following variables:
-   show_menu ||= false
+   hide_menu ||= false
    hide_image_tool ||= false
    canvas_width ||= 640
    canvas_height ||= 480
@@ -20,7 +20,7 @@
              :formats => :js,
              :locals => {:id => id,
                          :value => value,
-                         :show_menu => show_menu,
+                         :hide_menu => hide_menu,
                          :hide_image_tool => hide_image_tool} %>
 </script>
 

data/app/views/sketchily/_embed.html.erb~

@@ -3,19 +3,26 @@
    # value
    #
    # Additionally, they may override the following variables:
-   show_menu ||= false
+   hide_menu ||= false
+   hide_image_tool ||= false
+   canvas_width ||= 640
+   canvas_height ||= 480
+   canvas_expansion ||= 3
+   hide_rulers ||= false
    width ||= "750px"
    height ||= "650px" %>
 
 <%= javascript_include_tag "embedapi" %>
 <%= javascript_include_tag "svgutils" %>
+
 <script type="text/javascript">
   <%= render :partial => "sketchily/embed",
              :formats => :js,
              :locals => {:id => id,
                          :value => value,
-                         :show_menu => show_menu} %>
+                         :show_menu => show_menu,
+                         :hide_image_tool => hide_image_tool} %>
 </script>
 
-<iframe src="/assets/svg-editor.html?source="
+<iframe src="/assets/svg-editor.html?source=&dimensions=<%= "#{canvas_width},#{canvas_height}" %>&canvas_expansion=<%= canvas_expansion %>&showRulers=<%= !hide_rulers %>"
   width="<%= width %>" height="<%= height %>" id="svgedit_<%= id %>" onload="initEmbed_<%= id %>();"></iframe>

data/app/views/sketchily/_embed.js.erb

@@ -3,7 +3,7 @@
    # Clients of this partial must supply the following variables:
    # id
    # value
-   # show_menu
+   # hide_menu
    # hide_image_tool %>
 
 var svgCanvas_<%= id %> = null;
@@ -36,12 +36,11 @@ function initEmbed_<%= id %>() {
     doc = frame.contentWindow.document;
   }
 
-  <% if show_menu %>
+  <% if hide_menu %>
     var mainButton = doc.getElementById('main_button');
-    mainButton.style.display = 'block';
+    mainButton.style.display = 'none';
     var toolsTop = doc.getElementById('tools_top');
-    toolsTop.style.left = '120px';
-    toolsTop.style.right = '2px';
+    toolsTop.style.left = '5px';
   <% end %>
   
   <% if hide_image_tool %>

data/app/views/sketchily/_embed.js.erb~

@@ -3,7 +3,7 @@
    # Clients of this partial must supply the following variables:
    # id
    # value
-   # show_menu
+   # hide_menu
    # hide_image_tool %>
 
 var svgCanvas_<%= id %> = null;
@@ -11,7 +11,7 @@ var svgCanvas_<%= id %> = null;
 function attachSubmitHandler_<%= id %>() {
   $("input#<%= id %>").closest("form").one("submit", function(event) {
     svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
-    event.preventDefault();
+    return false;
   });
 }
 
@@ -36,12 +36,11 @@ function initEmbed_<%= id %>() {
     doc = frame.contentWindow.document;
   }
 
-  <% if show_menu %>
+  <% if hide_menu %>
     var mainButton = doc.getElementById('main_button');
-    mainButton.style.display = 'block';
+    mainButton.style.display = 'none';
     var toolsTop = doc.getElementById('tools_top');
-    toolsTop.style.left = '120px';
-    toolsTop.style.right = '2px';
+    toolsTop.style.left = '0px';
   <% end %>
   
   <% if hide_image_tool %>

data/app/views/sketchily/_sketchily.html.erb

@@ -10,14 +10,14 @@
            :formats => :html,
            :locals => {:id => sketchily_tag.send(:tag_id),
                        :value => sketchily_tag.value(sketchily_tag.object),
-                       :show_menu => options[:show_menu],
+                       :hide_menu => options[:hide_menu],
+                       :hide_rulers => options[:hide_rulers],
                        :hide_image_tool => options[:hide_image_tool],
                        :canvas_width => options[:canvas_width],
                        :canvas_height => options[:canvas_height],
                        :canvas_expansion => options[:canvas_expansion],
-                       :hide_rulers => options[:hide_rulers],
                        :width => options[:width],
                        :height => options[:height]} %>
 
-<%= sketchily_tag.to_input_field_tag("hidden", options.except(:show_menu, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :width, :height)) %>
+<%= sketchily_tag.to_input_field_tag("hidden", options.except(:hide_menu, :hide_rulers, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :width, :height)) %>
 

data/app/views/sketchily/_sketchily.html.erb~

@@ -4,16 +4,20 @@
    # method
    # options %>
 
-<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object))
-   sketchily_tag.value = sketchily_tag.value(sketchily_tag.object).try(:squish).try(:html_safe) %>
+<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object)) %>
 
 <%= render :partial => "sketchily/embed",
            :formats => :html,
            :locals => {:id => sketchily_tag.send(:tag_id),
                        :value => sketchily_tag.value(sketchily_tag.object),
-                       :show_menu => options[:show_menu],
+                       :hide_menu => options[:hide_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :hide_rulers => options[:hide_rulers],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
                        :width => options[:width],
                        :height => options[:height]} %>
 
-<%= sketchily_tag.to_input_field_tag("hidden", options.except(:show_menu, :width, :height)) %>
+<%= sketchily_tag.to_input_field_tag("hidden", options.except(:hide_menu, :hide_image_tool, :hide_rulers, :canvas_width, :canvas_height, :canvas_expansion, :width, :height)) %>
 

data/app/views/sketchily/_sketchily_tag.html.erb

@@ -8,14 +8,14 @@
            :formats => :html,
            :locals => {:id => id,
                        :value => value,
-                       :show_menu => options[:show_menu],
+                       :hide_menu => options[:hide_menu],
+                       :hide_rulers => options[:hide_rulers],
                        :hide_image_tool => options[:hide_image_tool],
                        :canvas_width => options[:canvas_width],
                        :canvas_height => options[:canvas_height],
                        :canvas_expansion => options[:canvas_expansion],
-                       :hide_rulers => options[:hide_rulers],
                        :width => options[:width],
                        :height => options[:height]} %>
 
-<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value }.update(options.except(:show_menu, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :width, :height).stringify_keys) %>
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value }.update(options.except(:hide_menu, :hide_rulers, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :width, :height).stringify_keys) %>
 

data/app/views/sketchily/_sketchily_tag.html.erb~

@@ -9,8 +9,13 @@
            :locals => {:id => id,
                        :value => value,
                        :show_menu => options[:show_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
+                       :hide_rulers => options[:hide_rulers],
                        :width => options[:width],
                        :height => options[:height]} %>
 
-<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value.try(:squish).try(:html_safe) }.update(options.except(:show_menu, :width, :height).stringify_keys) %>
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value }.update(options.except(:show_menu, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :width, :height).stringify_keys) %>
 

data/lib/sketchily/version.rb

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/sketchily/version.rb~

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.0.2"
+  VERSION = "0.1.0"
 end

data/vendor/assets/svg-edit-2.6/svg-editor.css

@@ -345,7 +345,6 @@ div.palette_item:first-child {
 	top: 4px;
 	left: 5px;
 	z-index: 5;
-	display: none;
 }
 
  #main_icon {
@@ -479,8 +478,8 @@ div.palette_item:first-child {
 
 #tools_top {
 	position: absolute;
-	/*left: 108px;*/
-	/*right: 2px;*/
+	left: 120px;
+	right: 2px;
 	top: 2px;
 	height: 40px;
 	border-bottom: none;

data/vendor/assets/svg-edit-2.6/svg-editor.css~

@@ -0,0 +1,1494 @@
+body {
+	background: #D0D0D0;
+}
+
+html, body, div{
+        -webkit-user-select: text;
+        -khtml-user-select: text;
+        -moz-user-select: text;
+        -o-user-select: text;
+        user-select: text;
+	/* this will work for QtWebKit in future */
+	-webkit-user-drag: text;
+}
+
+#browser-not-supported {
+        font-size: 0.8em;
+        font-family: Verdana, Helvetica, Arial;
+        color: #000000;
+}
+
+
+#svg_editor * {
+	transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+}
+
+ #svg_editor {
+	font-size: 8pt;
+	font-family: Verdana, Helvetica, Arial;
+	color: #000000;
+}
+
+ a {
+	color: #19c;
+}
+
+ hr {
+	border: none;
+	border-bottom: 1px solid #808080;
+}
+
+ select {
+	margin-top: 4px;
+}
+
+ #svgroot {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+ #svgcanvas {
+	line-height: normal;
+	display: inline-block;
+	background-color: #A0A0A0;
+	text-align: center;
+	vertical-align: middle;
+	width: 640px;
+	height: 480px;
+	-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
+	position: relative;
+	/* 
+	  A subtle gradient effect in the canvas.
+	  Just experimenting - not sure if this is worth it.
+	*/
+	background: -moz-radial-gradient(45deg,#bbb,#222);
+	background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
+}
+
+
+/* Rulers
+——————————————————————————————————————*/
+
+#rulers > div {
+	position: absolute;
+	background: #DDD;
+	z-index: 1;
+	overflow: hidden;
+}
+
+#ruler_corner {
+	top: 41px;
+	left: 41px;
+	width: 15px;
+	height: 15px;
+}
+
+#ruler_x {
+	height: 15px;
+	top: 41px;
+	left: 56px;
+	right: 30px;
+	border-bottom: 1px solid;
+	border-left: 1px solid #777;
+}
+
+#ruler_y {
+	width: 15px;
+	top: 55px;
+	left: 41px;
+	bottom: 56px;
+	border-right: 1px solid;
+	border-top: 1px solid #777;
+}
+
+#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_holder {
+	overflow: hidden;
+	margin-top: 5px;
+	padding: 5px;
+	position: absolute;
+	right: 15px;
+	height: 16px;
+	background: #f0f0f0;
+	border-radius: 3px;
+	z-index: 2;
+}
+
+ #stroke_bg, 
+ #fill_bg {
+	height: 16px;
+	width: 16px;
+	margin: 1px;
+}
+ 
+ #zoomLabel {
+	cursor: pointer;
+	margin-right: 5px;
+	padding-top: 4px
+}
+
+ #linkLabel > svg {
+	height: 20px;
+	padding-top: 4px;
+}
+
+#palette {
+	float: left;
+	width: 632px;
+	height: 16px;
+}
+
+#workarea {
+	display: inline-table-cell;
+	position:absolute;
+	top: 40px;
+	left: 40px;
+	bottom: 40px;
+	right: 14px;
+	background-color: #A0A0A0;
+	border: 1px solid #808080;
+	overflow: auto;
+	text-align: center;
+}
+
+#sidepanels {
+	display: inline-block;
+	position:absolute;
+	top: 40px;
+	bottom: 40px;
+	right: 0px;
+	width: 2px;
+	padding: 10px;
+	border-color: #808080;
+	border-style: solid;
+	border-width: 1px;
+	border-left: none;
+}
+
+#layerpanel {
+	display: inline-block;
+	position:absolute;
+	top: 1px;
+	bottom: 0px;
+	right: 0px;
+	width: 0px;
+	overflow: auto;
+	margin: 0px;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+
+}
+
+/*
+	border-style: solid;
+	border-color: #666;
+	border-width: 0px 0px 0px 1px;	
+*/
+ #sidepanel_handle {
+	display: inline-block;
+	position: absolute;
+	background-color: #D0D0D0;
+	font-weight: bold;
+	left: 0px;
+	top: 40%;
+	width: 1em;
+	padding: 5px 1px 5px 5px;
+	margin-left: 3px;
+	cursor: pointer;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+
+ #sidepanel_handle:hover {
+	font-weight: bold;
+}
+
+ #sidepanel_handle * {
+	cursor: pointer;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+ #layerbuttons {
+	margin: 0px;
+	padding: 0px;
+	padding-left: 2px;
+	padding-right: 2px;
+	width: 125px;
+	height: 20px;
+	border-right: 1px solid #FFFFFF;
+	border-bottom: 1px solid #FFFFFF;
+	border-left: 1px solid #808080;
+	border-top: 1px solid #808080;
+	overflow: hidden;
+}
+
+ .layer_button {
+	width: 14px;
+	height: 14px;
+	padding: 1px;
+	border-left: 1px solid #FFFFFF;
+	border-top: 1px solid #FFFFFF;
+	border-right: 1px solid #808080;
+	border-bottom: 1px solid #808080;
+	cursor: pointer;
+	float: left;
+	margin-right: 3px;
+}
+
+ .layer_button:last-child {
+	margin-right: 0;
+}
+
+ .layer_buttonpressed {
+	width: 14px;
+	height: 14px;
+	padding: 1px;
+	border-right: 1px solid #FFFFFF;
+	border-bottom: 1px solid #FFFFFF;
+	border-left: 1px solid #808080;
+	border-top: 1px solid #808080;
+	cursor: pointer;
+}
+
+ #layerlist {
+	margin: 1px;
+	padding: 0px;
+	width: 127px;
+	border-collapse: collapse;	
+	border: 1px solid #808080;
+	background-color: #FFFFFF;
+}
+
+ #layerlist tr.layer {
+	background-color: #FFFFFF;
+	margin: 0px;
+	padding: 0px;
+}
+ #layerlist tr.layersel {
+	border: 1px solid #808080;
+	background-color: #CCCCCC;
+}
+
+ #layerlist td.layervis {
+	width: 22px;
+	cursor:pointer;
+}
+ #layerlist td.layerinvis {
+	background-image: none;
+	cursor:pointer;
+}
+
+ #layerlist td.layervis * {
+	display: block;
+}
+
+ #layerlist td.layerinvis * {
+	display: none;
+}
+
+ #layerlist td.layername {
+	cursor: pointer;
+}
+
+ #layerlist tr.layersel td.layername {
+	font-weight: bold;
+}
+
+ #selLayerLabel {
+	white-space: nowrap;
+}
+
+ #selLayerNames {
+	display: block;
+}
+
+ div.palette_item {
+	height: 15px;
+	width: 15px;
+	float: left;
+}
+
+div.palette_item:first-child {
+	background: white;
+}
+
+/* Main button
+—————————————————————————————*/
+
+ #main_button {
+	position: absolute;
+	top: 4px;
+	left: 5px;
+	z-index: 5;
+}
+
+ #main_icon {
+	position: relative;
+	top: -2px;
+	left: -2px;
+	width: 95px;
+	line-height: 26px;
+}
+
+#main_icon:hover {
+	background: #eee !important;
+}
+
+#main_icon.buttondown {
+	background: #eee !important;
+	-moz-box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+	border-radius: 3px 3px 0 0;
+}
+
+#logo {
+	margin-top: -2px;
+}
+
+#logo img {
+	border: 0;
+	width: 28px;
+	height: 28px;
+}
+
+#main_icon > div {
+	float: left;
+}
+
+#main_button > div {
+	float: left;
+}
+
+ #main_button .dropdown {
+	position: absolute;
+	right: 7px;
+	top: 4px;
+}
+
+#main_button .tool_sep {
+	margin-top: 5px;
+}
+
+ #main_icon span {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	display: block;
+	z-index: 2;
+	font-weight: bold;
+	padding-left: 34px;
+	line-height: 32px;
+	font-family: sans-serif;
+}
+
+ #main_menu {
+	z-index: 12;
+	background: #eee;
+	position: relative;
+	width: 230px;
+	padding: 5px;
+	-moz-box-shadow: #555 1px 1px 4px;
+	-webkit-box-shadow: #555 1px 1px 4px;
+	box-shadow: #555 1px 1px 4px;
+	font-size: 1.1em;
+	display: none;
+	overflow: hidden;
+	clear: both;
+	top: -9px;
+}
+
+ #main_menu ul,
+ #main_menu li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+ #main_menu li {
+/*	height: 35px;*/
+	line-height: 22px;
+	padding-top: 7px;
+	padding-left: 7px;
+	margin: -5px;
+	overflow: auto;
+	cursor: default;
+}
+
+ #main_menu li:hover {
+	background: #FFC;
+}
+
+ #main_menu li > div {
+	float: left;
+	padding-right: 5px;
+}
+
+ #main_menu p {
+	margin-top: 5px;
+}
+
+/*—————————————————————————————*/
+
+ .tool_button:hover, 
+ .push_button:hover,
+ .buttonup:hover,
+ .buttondown,
+ .tool_button_current,
+ .push_button_pressed
+{
+	background-color: #ffc !important;
+}
+
+ .tool_button_current,
+ .push_button_pressed,
+ .buttondown { 
+	background-color: #f4e284 !important;
+	-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+	-moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+}
+
+#tools_top {
+	position: absolute;
+	left: 108px;
+	right: 2px;
+	top: 2px;
+	height: 40px;
+	border-bottom: none;
+	overflow: auto;
+}
+
+#tools_top .tool_sep {
+	margin-top: 5px;
+}
+
+#tools_left {
+	position: absolute;
+	border-right: none;
+	width: 32px;
+	top: 40px;
+	left: 1px;
+	margin-top: -2px;
+	padding-left: 2px;
+	background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
+	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;
+}
+
+#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
+	display: none;
+}
+
+#editor_panel, #history_panel {
+	height: 34px;
+	float: left;
+}
+
+ #multiselected_panel .selected_tool {
+	vertical-align: 12px;
+}
+
+/*TODO: Adjust position of rulers are not visible*/
+#cur_context_panel {
+	position: absolute;
+	top: 57px;
+	left: 56px;
+	line-height: 22px;
+	overflow: auto;
+	padding-left: 5px;
+	font-size: 12px;
+	background: rgba(0, 0, 0, 0.8);
+	color: #ccc;
+	padding: 0 10px;
+	border-radius: 0 0 3px 0;
+}
+
+ #cur_context_panel a {
+	float: none;
+	text-decoration: none;
+}
+
+ #cur_context_panel a:hover {
+	text-decoration: underline;
+}
+
+ #tools_top > div, #tools_top {
+	line-height: 26px;
+}
+
+ div.toolset,
+ div.toolset > * {
+	float: left;
+}
+
+ div.toolset {
+	height: 34px;
+}
+
+ div.toolset label span {
+/*	outline: 1px solid red;*/
+	padding-top: 3px;
+	display: inline-block;
+}
+
+#tools_top > div > * {
+	float: left;
+	margin-right: 2px;
+}
+
+#tools_top label {
+	margin-top: 0;
+	margin-left: 5px;
+}
+
+#tools_top input {
+	margin-top: 5px;
+	height: 15px;
+}
+
+input[type=text] {
+		padding: 2px;
+}
+
+ #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;
+}
+
+
+span.zoom_tool {
+	line-height: 26px;
+	padding: 3px;
+}
+
+#zoom_panel {
+	margin-top: 5px;
+}
+
+.dropdown {
+	position: relative;
+}
+
+ .dropdown button {
+	width: 15px;
+	height: 21px;
+	margin: 6px 0 0 1px;
+	padding: 0;
+	border-left: 1px solid #FFFFFF;
+	border-top: 1px solid #FFFFFF;
+	border-right: 1px solid #808080;
+	border-bottom: 1px solid #808080;
+	background-color: #E8E8E8;
+}
+
+.dropdown button.down {
+	border-left: 1px solid #808080;
+	border-top: 1px solid #808080;
+	border-right: 1px solid #FFFFFF;
+	border-bottom: 1px solid #FFFFFF;
+	background-color: #B0B0B0;
+}
+
+.dropdown ul {
+	list-style: none;
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	left: -85px;
+	top: 26px;
+	z-index: 4;
+	display: none;
+}
+
+.dropup ul {
+	top: auto;
+	bottom: 24px;
+}
+
+.dropdown li {
+	display: block;
+	width: 120px;
+	padding: 4px;
+	background: #E8E8E8;
+	border: 1px solid #B0B0B0;
+	margin: 0 0 -1px 0;
+	line-height: 16px;
+}
+
+.dropdown li:hover {
+	background-color: #FFC;
+}
+
+.dropdown li.special {
+	padding: 10px 4px; 
+}
+
+.dropdown li.special:hover {
+	background: #FFC;
+}
+
+#font_family_dropdown-list li {
+	font-size: 1.4em;
+}
+
+#font_family {
+	margin-left: 5px;
+	margin-right: 0;
+}
+
+
+ .tool_button, 
+ .push_button,
+ .tool_button_current,
+ .push_button_pressed 
+{
+	height: 24px;
+	width: 24px;
+	margin: 2px 2px 4px 2px;
+	padding: 3px;
+	-webkit-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+	moz-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+	box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+	background-color: #E8E8E8;
+	cursor: pointer;
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+}
+
+ #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_image input {
+	position: absolute;
+	opacity: 0;
+	font-size: 10em;
+	top: -5px;
+	right: -5px;
+	margin: 0;
+	cursor: pointer; /* Sadly doesn't appear to have an effect */
+}
+
+ .disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+ .tool_sep {
+	width: 1px;
+	background: #888;
+	border-left: 1px outset #EEE;
+	margin: 2px 3px;
+	padding: 0;
+	height: 24px;
+
+}
+
+ .icon_label {
+	float: left;
+	padding-top: 3px;
+	padding-right: 3px;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	height: 0;
+}
+
+ .width_label {
+	padding-right: 5px;
+}
+
+#tool_bold, #tool_italic { 
+	font: bold 2.1em/1.1em serif;
+	text-align: center;
+	padding-left: 2px;
+	position: relative;
+}
+
+#text {
+	position: absolute;
+	left: -9999px;
+}
+
+#tool_bold span, #tool_italic span { 
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0; left: 0;
+	background: #000;
+	opacity: 0;
+}
+
+#tool_italic {
+	font-weight: normal;
+	font-style: italic;
+}
+
+#url_notice {
+	padding-top: 4px;
+	display: none;
+}
+
+ #color_picker {
+	position: absolute;
+	display: none;
+	background: #E8E8E8;
+	height: 350px;
+	z-index: 5;
+}
+
+ .tools_flyout {
+	position: absolute;
+	display: none;
+	cursor: pointer;
+	width: 400px;
+	z-index: 1;
+}
+
+ .tools_flyout_v {
+	position: absolute;
+	display: none;
+	cursor: pointer;
+	width: 30px;
+}
+
+ .tools_flyout .tool_button {
+	float: left;
+	background-color: #E8E8E8;
+	border-left: 1px solid #FFFFFF;
+	border-top: 1px solid #FFFFFF;
+	border-right: 1px solid #808080;
+	border-bottom: 1px solid #808080;
+	height: 28px;
+	width: 28px;
+}
+
+ #tools_bottom {
+	position: absolute;
+	left: 40px;
+	right: 0;
+	bottom: 0;
+	height: 40px;
+	overflow: visible;
+}
+
+ #tools_bottom_1 {
+	width: 115px;
+	float: left;
+}
+
+#tools_bottom input[type=text] {
+	width: 2.2em;
+}
+
+/* Color tools: fill, stroke, opacity
+–––––––––––––––––––––––––––––––––––––*/
+
+#tools_bottom_2 {
+	float: left;
+	width: 300px;
+	position: relative;
+	margin-top: 5px;
+	-webkit-transition: width 150ms ease;
+}
+
+.expanded #tools_bottom_2 {
+	width: 450px;
+}
+
+#tools_bottom #tools_bottom_2 .dropdown button {
+	margin-top: 2px;
+}
+
+.dropdown li.tool_button {
+	width: 24px;
+}
+
+#tools_bottom_2 .icon_label {
+	display: block;
+	margin: 3px 5px;
+	padding: 0;
+}
+
+#tool_opacity { right: 0;}
+#tool_fill { left: 0; }
+#tool_stroke { left: 60px;}
+
+ #fill_color,  #stroke_color {
+	height: 16px;
+	width: 16px;
+	border: 1px solid #808080;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+#stroke_expand {
+	width: 0;
+	overflow: hidden;
+}
+
+#toggle_stroke_tools {
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 25px;
+	text-align: center;
+	border-radius: 0 3px 3px 0;
+	margin: 0;
+}
+
+#toggle_stroke_tools:before {
+	content: '>>';
+	letter-spacing: -3px;
+	font-weight: bold;
+	color: #666;
+}
+
+.expanded #tool_stroke.color_tool {
+	width: 280px;
+}
+
+.expanded #toggle_stroke_tools:before {
+	content: '<<';
+}
+
+#toggle_stroke_tools:hover {
+	background: white;
+}
+
+.color_tool {
+	position: absolute;
+	overflow: hidden;
+	background: #f0f0f0;
+	height: 26px;
+	line-height: 26px;
+	border-radius: 3px;
+	min-width: 52px;
+}
+
+#tool_stroke.color_tool {
+	width: 130px;
+	z-index: 2;
+	-webkit-transition: width 150ms ease;
+	-moz-transition: width 150ms ease;
+	-o-transition: width 150ms ease;
+	-ms-transition: width 150ms ease;
+	transition: width 150ms ease;
+}
+
+
+.color_block {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.color_block svg {
+	display: block;
+}
+
+.color_tool > * {
+	float: left;
+	margin-right: 5px;
+}
+
+.color_tool .dropdown > * {
+	float: left;
+}
+
+.color_tool .stroke_label {
+	margin-left: 25px;
+	float: left;
+}
+
+.color_tool > .color_block {
+	top: 3px;
+	left: 29px;
+}
+
+.color_tool input {
+	margin: 0;
+}
+
+#tool_opacity {
+	overflow: visible;
+}
+
+@media screen and (max-width:1250px) {
+	.expanded #palette_holder {
+		left: 560px;
+		overflow-x: scroll;
+		padding: 0 5px;
+		margin-top: 2px;
+		height: 30px;
+	}
+	#tools_top {
+		height: 71px;
+	}
+	#workarea, #sidepanels {
+		top: 70px;
+	}
+	#rulers #ruler_corner,
+	#rulers #ruler_x, #tools_left {
+		top: 71px;
+	}
+
+	#rulers #ruler_y {
+		top: 86px;
+	}
+
+	#cur_context_panel {
+		top: 87px;
+	}
+
+	#selected_panel {
+		clear: right;
+	}
+
+}
+
+@media screen and (max-width:1100px) {
+	#tools_bottom:not(.expanded) #palette_holder {
+		left: 410px;
+		overflow-x: scroll;
+		padding: 0 5px;
+		margin-top: 2px;
+		height: 30px;
+	}
+}
+
+
+/*–––––––––––––––––––––––––––––––––––––*/
+
+#option_lists ul {
+	display: none;
+	position: absolute;
+	height: auto;
+	z-index: 3;
+	margin: -10px;
+	list-style: none;
+	padding-left: 0;
+}
+
+#option_lists .optcols2 {
+	width: 70px;
+	margin-left: -15px;
+}
+
+#option_lists .optcols3 {
+	width: 90px;
+	margin-left: -31px;
+}
+
+#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;
+}
+
+#tools_bottom .dropdown button {
+	margin-top: 2px;
+}
+
+#opacity_dropdown li {
+	width: 140px;
+}
+
+ #copyright {
+	text-align: right;
+	padding-right: .3em;
+}
+
+#svg_source_editor {
+	display: none;
+}
+
+#svg_source_editor #svg_source_overlay {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	left: 0px;
+	bottom: 0px;
+	background-color: black;
+	opacity: 0.6;
+	z-index: 5;
+}
+
+#svg_source_editor #svg_source_container {
+	position: absolute;
+	top: 30px;
+	left: 30px;
+	right: 30px;
+	bottom: 30px;
+	background-color: #B0B0B0;
+	opacity: 1.0;
+	text-align: center;
+	border: 1px outset #777;
+	z-index: 6;
+}
+
+#save_output_btns {
+	display: none;
+	text-align: left;
+}
+
+#save_output_btns p {
+	margin: .5em 1.5em;
+	display: inline-block;
+}
+
+#bg_blocks {
+	overflow: auto;
+	margin-left: 30px;
+}
+
+#bg_blocks .color_block {
+	position: static;
+}
+
+#svg_docprops #svg_docprops_container,
+#svg_prefs #svg_prefs_container {
+	position: absolute;
+	top: 50px;
+	padding: 10px;
+	background-color: #B0B0B0;
+	border: 1px outset #777;
+	opacity: 1.0;
+/*	width: 450px;*/
+	font-family: Verdana, Helvetica, sans-serif;
+	font-size: .8em;
+	z-index: 20001;
+}
+
+#svg_docprops .error {
+	border: 1px solid red;
+	padding: 3px;
+}
+
+#svg_docprops #resolution {
+	max-width: 14em;
+}
+
+#tool_docprops_back, 
+#tool_prefs_back {
+	margin-left: 1em;
+	overflow: auto;
+}
+
+#svg_docprops_container #svg_docprops_docprops, 
+#svg_prefs #svg_docprops_prefs {
+	float: left;
+	width: 221px;
+	margin: 5px .7em; 
+	overflow: hidden;
+}
+
+#svg_prefs_container fieldset + fieldset {
+	float: right;
+}
+
+#svg_docprops legend, 
+#svg_prefs legend {
+	max-width: 195px;
+}
+
+#svg_docprops_docprops > legend, 
+#svg_prefs_container > fieldset > legend {
+	font-weight: bold;
+	font-size: 1.1em;
+}
+
+
+#svg_docprops_container fieldset,
+#svg_prefs fieldset {
+	padding: 5px;
+	margin: 5px;
+	border: 1px solid #DDD;
+}
+
+#svg_docprops_container label,
+#svg_prefs_container label {
+	display: block;
+	margin: .5em;
+}
+
+#svginfo_bg_note {
+	font-size: .9em;
+	font-style: italic;
+	color: #444;
+}
+
+#canvas_title, #canvas_bg_url {
+	display: block;
+	width: 96%;
+}
+
+#svg_source_editor #svg_source_textarea {
+	position: relative;
+	width: 95%;
+	top: 5px;
+	height: 250px;
+	padding: 5px;
+	font-size: 12px;
+}
+
+#svg_source_editor #tool_source_back {
+	text-align: left;
+	padding-left: 20px;
+}
+
+#svg_prefs_container div.color_block {
+	float: left;
+	margin: 2px;
+	padding: 20px;
+}
+
+#change_background div.cur_background {
+	border: 2px solid blue;
+	padding: 18px;
+}
+
+#background_img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	text-align: left;
+}
+
+#svg_docprops button,
+#svg_prefs button {
+	margin-top: 0;
+	margin-bottom: 5px;
+}
+
+#svg_docprops,
+#svg_prefs {
+	display: none;
+}
+
+#image_save_opts label {
+	font-size: .9em;
+}
+
+#image_save_opts input {
+	margin-left: 0;
+}
+
+#svg_docprops #svg_docprops_overlay,
+#svg_prefs #svg_prefs_overlay {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	left: 0px;
+	bottom: 0px;
+	background-color: black;
+	opacity: 0.6;
+	z-index: 20000;
+}
+
+#tool_prefs_option {
+	float: right;
+}
+
+.toolbar_button button {
+    border:1px solid #dedede;
+    line-height:130%;
+    float: left;
+	background: #E8E8E8 none;
+    padding:5px 10px 5px 7px; /* Firefox */
+    line-height:17px; /* Safari */
+	margin: 5px 20px 0 0;	
+	
+	border: 1px #808080 solid;
+	border-top-color: #FFF;
+	border-left-color: #FFF;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+}
+
+.toolbar_button button:hover {
+	border: 1px #e0a874 solid;
+	border-top-color: #fcd9ba;
+	border-left-color: #fcd9ba;
+	background-color: #FFC;
+}
+.toolbar_button button:active {
+	background-color: #F4E284;
+	border-left: 1px solid #663300;
+	border-top: 1px solid #663300;
+}
+
+.toolbar_button button .svg_icon {
+    margin:0 3px -3px 0 !important;
+    padding:0;
+    border:none;
+    width:16px;
+    height:16px;
+}
+
+#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;
+	background: #DDD;
+	overflow: auto;
+	text-align: left;
+	border: 1px solid #B0B0B0;
+}
+
+#dialog_content.prompt {
+	height: 75px;
+}
+
+#dialog_content p {
+	margin: 10px;
+	line-height: 1.3em;
+}
+
+#dialog_container {
+	position: absolute;
+	font-family: Verdana;
+	text-align: center;
+	left: 50%;
+	top: 50%;
+	width: 300px;
+	margin-left: -150px;
+	height: 150px;
+	margin-top: -80px;
+	position:fixed;
+	z-index:50001;
+	background: #CCC;
+	border: 1px outset #777;
+	font-family:Verdana,Helvetica,sans-serif;
+	font-size:0.8em;
+}
+
+#dialog_container, #dialog_content {
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+}
+
+#dialog_buttons input[type=text] {
+	width: 90%;
+	display: block;
+	margin: 0 0 5px 11px;
+}
+
+#dialog_buttons input[type=button] {
+	margin: 0 1em;
+}
+
+
+/* Slider
+----------------------------------*/
+.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 {
+	border: 1px solid #B0B0B0;
+}
+
+.ui-slider-handle {
+	background: #B0B0B0;
+	border: 1px solid #000;
+}
+
+/* Necessary to keep the flyouts sized properly */
+ .tools_flyout .tool_button,
+ .tools_flyout .tool_flyout {
+	padding: 2px;
+	width: 24px;
+	height: 24px;
+	margin: 0;
+	border-radius: 0px;
+	-moz-border-radius: 0px;
+	-webkit-border-radius: 0px;	
+}
+
+/* Generic context menu styles */
+.contextMenu {
+	position: absolute;
+	z-index: 99999;
+	border: solid 1px rgba(0,0,0,.33);
+	background: rgba(255,255,255,.95);
+	padding: 5px 0;
+	margin: 0px;
+	display: none;
+	font: 12px/15px Lucida Sans, 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);
+}
+
+.contextMenu LI {
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+}
+
+.contextMenu .shortcut {
+	width: 115px;           
+	text-align:right;
+	float:right;
+}
+
+.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: none;
+	padding: 0px 15px 1px 20px;
+}
+
+.contextMenu LI.hover A {
+	background-color: #2e5dea;
+	color: white;
+	cursor: default;
+}
+
+.contextMenu LI.disabled A {
+	color: #999;
+}
+
+.contextMenu LI.hover.disabled A {
+	background-color: transparent;
+}
+
+.contextMenu LI.separator {
+	border-top: solid 1px #E3E3E3;
+	padding-top: 5px;
+	margin-top: 5px;
+}
+
+/*
+	Adding Icons
+	
+	You can add icons to the context menu by adding
+	classes to the respective LI element(s)
+*/
+/*
+
+.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); }
+.contextMenu LI.cut A { background-image: url(images/cut.png); }
+.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); }
+.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); }
+.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); }
+.contextMenu LI.quit A { background-image: url(images/door.png); }
+*/