sketchily 0.0.2 → 0.1.0

data/app/helpers/sketchily.rb~

@@ -1,10 +0,0 @@
-module Sketchily
-  def sketchily_show(uri, options = {})
-    "<img src='data:image/svg+xml;base64,#{uri}' #{"width='#{options[:width]}'" if options[:width]} #{"height='#{options[:height]}'" if options[:height]}/>".html_safe
-  end
-
-  def svg_show(uri, options = {})
-    sketchily_show(uri, options)
-  end
-end
-

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

@@ -1,51 +0,0 @@
-<% # Clients of this partial may override the following variables:
-   show_menu ||= false
-   name ||= svgedit
-   value ||= nil
-   options ||= {}
-%>
-
-<script type="text/javascript" src="/assets/embedapi.js"></script>
-<script type="text/javascript">
-  var svgCanvas = null;
-  
-  function init_embed() {
-    var frame = document.getElementById('svgedit');
-    svgCanvas = new embedded_svg_edit(frame);
-    svgCanvas.setSvgString("<%= value %>");
-
-    <% unless show_menu %>
-      // 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';            
-    <% end %>
-    
-    $("form").attr("onSubmit", "return saveSvg()");
-  }
-  
-  function handleSvgData(data, error) {
-    if (error) {
-      alert('Error: ' + error);
-      return false;
-    }
-    else {
-      $("#<%= sanitize_to_id(name) %>").attr("value", data);
-      return true;
-    }
-  }
-  
-  function saveSvg() {			
-    return svgCanvas.getSvgString()(handleSvgData);
-  }
-</script>
-
-<iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
-
-<%= tag :input, { "type" => "hidden", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys) %>
-

data/app/views/sketchily/svg_edit_tag_.html~

@@ -1,35 +0,0 @@
-<% # Clients of this partial may override the following variable:
-   svgstring ||= nil
-%>
-<script type="text/javascript" src="/assets/embedapi.js"></script>
-<script type="text/javascript">
-  var svgCanvas = null;
-
-  function init_embed() {
-    var frame = document.getElementById('svgedit');
-    svgCanvas = new embedded_svg_edit(frame);
-    svgCanvas.setSvgString(svgstring);
-
-    if () {
-      // 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) {
-        alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
-      }
-    }
-
-function saveSvg() {			
-  svgCanvas.getSvgString()(handleSvgData);
-}
-</script>
-
-<iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>

data/lib/sketchily/sketchily_show.rb~

@@ -1,13 +0,0 @@
-module SketchilyShow
-  module ActionViewBaseInstanceMethods
-    def sketchily_show(uri, options = {})
-      "<img src='data:image/svg+xml;base64,#{uri}' #{"width='#{options[:width]}'" if options[:width]} #{"height='#{options[:height]}'" if options[:height]}>".html_safe
-    end
-
-    def svg_show(uri, options = {})
-      sketchily_show(uri, options)
-    end
-  end
-end
-
-ActionView::Base.send :include, SketchilyShow::ActionViewBaseInstanceMethods

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

@@ -1,1500 +0,0 @@
-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;
-	display: none;
-}
-
- #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_left > 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); }
-*/