sketchily 0.0.2

data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.css

@@ -0,0 +1,41 @@
+/*
+	Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
+	Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
+	(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
+	(Hats-off to John Resig for creating the excellent JQuery library. It is fab.)
+
+	This control is achieved with no extra html markup whatsoever and uses unobtrusive javascript.
+
+	Written by George Adamson, Software Unity (george.jquery@softwareunity.com) September 2006.
+	Big improvements added by Mark Gibson, (mgibson@designlinks.net) September 2006.
+
+	Do contact me with comments and suggestions but please don't ask for support.
+	As much as I'd love to help with specific problems I have plenty to get on with already!
+
+	Go ahead and use it in your own projects. This code is provided 'as is'.
+	Sure I've tested in heaps of ways. Its good for me, but you use it at your own risk.
+	SoftwareUnity and I are certainly not responsible if your computer sets fire to the sofa,
+	hacks into the pentagon, hijacks a plane or gives you any kind of hassle whatsoever.
+
+	If you'd like your spin-button image in a different place then you'll need to alter both
+	the CSS below and the javascript isMouseOverUpDn() function to accommodate the new position.
+	You could even have left and right buttons either side of the textbox.
+*/
+
+INPUT.spin-button {
+	/* explicitly put padding for top/bottom/left in here so that Opera displays it better */
+	padding: 2px 20px 2px 2px;
+	background-repeat:no-repeat;		/* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
+	background-position:100% 0%;
+	background-image:url('spinbtn_updn.png');
+	background-color:white; /* Needed for Opera */
+}
+
+INPUT.spin-button.up {					/* Change button img when mouse is over the UP-arrow */
+	cursor:pointer;
+	background-position:100% -18px;		/* 18px matches height of 2 visible buttons */
+}
+INPUT.spin-button.down {				/* Change button img when mouse is over the DOWN-arrow */
+	cursor:pointer;
+	background-position:100% -36px;		/* 36px matches height of 2x2 visible buttons */
+}

data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.js

@@ -0,0 +1,266 @@
+/* SpinButton control
+ *
+ * Adds bells and whistles to any ordinary textbox to
+ * make it look and feel like a SpinButton Control.
+ *
+ * Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006.
+ * - Added min/max options
+ * - Added step size option
+ * - Added bigStep (page up/down) option
+ *
+ * Modifications made by Mark Gibson, (mgibson@designlinks.net) September 2006:
+ * - Converted to jQuery plugin
+ * - Allow limited or unlimited min/max values
+ * - Allow custom class names, and add class to input element
+ * - Removed global vars
+ * - Reset (to original or through config) when invalid value entered
+ * - Repeat whilst holding mouse button down (with initial pause, like keyboard repeat)
+ * - Support mouse wheel in Firefox
+ * - Fix double click in IE
+ * - Refactored some code and renamed some vars
+ *
+ * Modifications by Jeff Schiller, June 2009:
+ * - provide callback function for when the value changes based on the following
+ *   http://www.mail-archive.com/jquery-en@googlegroups.com/msg36070.html
+ * Modifications by Jeff Schiller, July 2009:
+ * - improve styling for widget in Opera
+ * - consistent key-repeat handling cross-browser
+ * Modifications by Alexis Deveria, October 2009:
+ * - provide "stepfunc" callback option to allow custom function to run when changing a value
+ * - Made adjustValue(0) only run on certain keyup events, not all.
+ *
+ * Tested in IE6, Opera9, Firefox 1.5
+ * v1.0  11 Aug 2006 - George Adamson	- First release
+ * v1.1     Aug 2006 - George Adamson	- Minor enhancements
+ * v1.2  27 Sep 2006 - Mark Gibson		- Major enhancements
+ * v1.3a 28 Sep 2006 - George Adamson	- Minor enhancements
+ * v1.4  18 Jun 2009 - Jeff Schiller    - Added callback function
+ * v1.5  06 Jul 2009 - Jeff Schiller    - Fixes for Opera.  
+ * v1.6  13 Oct 2009 - Alexis Deveria   - Added stepfunc function  
+ * v1.7  21 Oct 2009 - Alexis Deveria   - Minor fixes
+ *                                        Fast-repeat for keys and live updating as you type.
+ * v1.8  12 Jan 2010 - Benjamin Thomas  - Fixes for mouseout behavior.
+ *                                        Added smallStep
+ 
+ Sample usage:
+ 
+	// Create group of settings to initialise spinbutton(s). (Optional)
+	var myOptions = {
+					min: 0,						// Set lower limit.
+					max: 100,					// Set upper limit.
+					step: 1,					// Set increment size.
+					smallStep: 0.5,				// Set shift-click increment size.
+					spinClass: mySpinBtnClass,	// CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
+					upClass: mySpinUpClass,		// CSS class for style when mouse over up button.
+					downClass: mySpinDnClass	// CSS class for style when mouse over down button.
+					}
+ 
+	$(document).ready(function(){
+
+		// Initialise INPUT element(s) as SpinButtons: (passing options if desired)
+		$("#myInputElement").SpinButton(myOptions);
+
+	});
+ 
+ */
+$.fn.SpinButton = function(cfg){
+	return this.each(function(){
+
+		this.repeating = false;
+		
+		// Apply specified options or defaults:
+		// (Ought to refactor this some day to use $.extend() instead)
+		this.spinCfg = {
+			//min: cfg && cfg.min ? Number(cfg.min) : null,
+			//max: cfg && cfg.max ? Number(cfg.max) : null,
+			min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,	// Fixes bug with min:0
+			max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
+			step: cfg && cfg.step ? Number(cfg.step) : 1,
+			stepfunc: cfg && cfg.stepfunc ? cfg.stepfunc : false,
+			page: cfg && cfg.page ? Number(cfg.page) : 10,
+			upClass: cfg && cfg.upClass ? cfg.upClass : 'up',
+			downClass: cfg && cfg.downClass ? cfg.downClass : 'down',
+			reset: cfg && cfg.reset ? cfg.reset : this.value,
+			delay: cfg && cfg.delay ? Number(cfg.delay) : 500,
+			interval: cfg && cfg.interval ? Number(cfg.interval) : 100,
+			_btn_width: 20,
+			_direction: null,
+			_delay: null,
+			_repeat: null,
+			callback: cfg && cfg.callback ? cfg.callback : null
+		};
+
+		// if a smallStep isn't supplied, use half the regular step
+		this.spinCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.spinCfg.step/2;
+		
+		this.adjustValue = function(i){
+			var v;
+			if(isNaN(this.value)) {
+				v = this.spinCfg.reset;
+			} else if($.isFunction(this.spinCfg.stepfunc)) {
+				v = this.spinCfg.stepfunc(this, i);
+			} else {
+				// weirdest javascript bug ever: 5.1 + 0.1 = 5.199999999
+				v = Number((Number(this.value) + Number(i)).toFixed(5));
+			}
+			if (this.spinCfg.min !== null) v = Math.max(v, this.spinCfg.min);
+			if (this.spinCfg.max !== null) v = Math.min(v, this.spinCfg.max);
+			this.value = v;
+			if ($.isFunction(this.spinCfg.callback)) this.spinCfg.callback(this);
+		};
+		
+		$(this)
+		.addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button')
+		
+		.mousemove(function(e){
+			// Determine which button mouse is over, or not (spin direction):
+			var x = e.pageX || e.x;
+			var y = e.pageY || e.y;
+			var el = e.target || e.srcElement;
+			var scale = svgEditor.tool_scale || 1;
+			var height = $(el).height()/2;
+			
+			var direction = 
+				(x > coord(el,'offsetLeft') + el.offsetWidth*scale - this.spinCfg._btn_width)
+				? ((y < coord(el,'offsetTop') + height*scale) ? 1 : -1) : 0;
+			
+			if (direction !== this.spinCfg._direction) {
+				// Style up/down buttons:
+				switch(direction){
+					case 1: // Up arrow:
+						$(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
+						break;
+					case -1: // Down arrow:
+						$(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);
+						break;
+					default: // Mouse is elsewhere in the textbox
+						$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
+				}
+				
+				// Set spin direction:
+				this.spinCfg._direction = direction;
+			}
+		})
+		
+		.mouseout(function(){
+			// Reset up/down buttons to their normal appearance when mouse moves away:
+			$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
+			this.spinCfg._direction = null;
+			window.clearInterval(this.spinCfg._repeat);
+			window.clearTimeout(this.spinCfg._delay);
+		})
+		
+		.mousedown(function(e){
+			if ( e.button === 0 && this.spinCfg._direction != 0) {
+				// Respond to click on one of the buttons:
+				var self = this;
+				var stepSize = e.shiftKey ? self.spinCfg.smallStep : self.spinCfg.step
+
+				var adjust = function() {
+					self.adjustValue(self.spinCfg._direction * stepSize);
+				};
+			
+				adjust();
+				
+				// Initial delay before repeating adjustment
+				self.spinCfg._delay = window.setTimeout(function() {
+					adjust();
+					// Repeat adjust at regular intervals
+					self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval);
+				}, self.spinCfg.delay);
+			}
+		})
+		
+		.mouseup(function(e){
+			// Cancel repeating adjustment
+			window.clearInterval(this.spinCfg._repeat);
+			window.clearTimeout(this.spinCfg._delay);
+		})
+		
+		.dblclick(function(e) {
+			if ($.browser.msie)
+				this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
+		})
+		
+		.keydown(function(e){
+			// Respond to up/down arrow keys.
+			switch(e.keyCode){
+				case 38: this.adjustValue(this.spinCfg.step);  break; // Up
+				case 40: this.adjustValue(-this.spinCfg.step); break; // Down
+				case 33: this.adjustValue(this.spinCfg.page);  break; // PageUp
+				case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
+			}
+		})
+		
+		/*
+		http://unixpapa.com/js/key.html describes the current state-of-affairs for
+		key repeat events:
+		- Safari 3.1 changed their model so that keydown is reliably repeated going forward
+		- Firefox and Opera still only repeat the keypress event, not the keydown
+		*/
+		.keypress(function(e){
+			if (this.repeating) {
+				// Respond to up/down arrow keys.
+				switch(e.keyCode){
+					case 38: this.adjustValue(this.spinCfg.step);  break; // Up
+					case 40: this.adjustValue(-this.spinCfg.step); break; // Down
+					case 33: this.adjustValue(this.spinCfg.page);  break; // PageUp
+					case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
+				}
+			} 
+			// we always ignore the first keypress event (use the keydown instead)
+			else {
+				this.repeating = true;
+			}
+		})
+		
+		// clear the 'repeating' flag
+		.keyup(function(e) {
+			this.repeating = false;
+			switch(e.keyCode){
+				case 38: // Up
+				case 40: // Down
+				case 33: // PageUp
+				case 34: // PageDown
+				case 13: this.adjustValue(0); break; // Enter/Return
+			}
+		})
+		
+		.bind("mousewheel", function(e){
+			// Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
+			if (e.wheelDelta >= 120)
+				this.adjustValue(this.spinCfg.step);
+			else if (e.wheelDelta <= -120)
+				this.adjustValue(-this.spinCfg.step);
+			
+			e.preventDefault();
+		})
+		
+		.change(function(e){
+			this.adjustValue(0);
+		});
+		
+		if (this.addEventListener) {
+			// Respond to mouse wheel in Firefox
+			this.addEventListener('DOMMouseScroll', function(e) {
+				if (e.detail > 0)
+					this.adjustValue(-this.spinCfg.step);
+				else if (e.detail < 0)
+					this.adjustValue(this.spinCfg.step);
+				
+				e.preventDefault();
+			}, false);
+		}
+	});
+	
+	function coord(el,prop) {
+		var c = el[prop], b = document.body;
+		
+		while ((el = el.offsetParent) && (el != b)) {
+			if (!$.browser.msie || (el.currentStyle.position != 'relative'))
+				c += el[prop];
+		}
+		
+		return c;
+	}
+};

data/vendor/assets/svg-edit-2.6/spinbtn/JQuerySpinBtn.min.js

@@ -0,0 +1,7 @@
+$.fn.SpinButton=function(b){function f(a,c){for(var e=a[c],d=document.body;(a=a.offsetParent)&&a!=d;)if(!$.browser.msie||a.currentStyle.position!="relative")e+=a[c];return e}return this.each(function(){this.repeating=false;this.spinCfg={min:b&&!isNaN(parseFloat(b.min))?Number(b.min):null,max:b&&!isNaN(parseFloat(b.max))?Number(b.max):null,step:b&&b.step?Number(b.step):1,stepfunc:b&&b.stepfunc?b.stepfunc:false,page:b&&b.page?Number(b.page):10,upClass:b&&b.upClass?b.upClass:"up",downClass:b&&b.downClass?
+b.downClass:"down",reset:b&&b.reset?b.reset:this.value,delay:b&&b.delay?Number(b.delay):500,interval:b&&b.interval?Number(b.interval):100,_btn_width:20,_direction:null,_delay:null,_repeat:null,callback:b&&b.callback?b.callback:null};this.spinCfg.smallStep=b&&b.smallStep?b.smallStep:this.spinCfg.step/2;this.adjustValue=function(a){a=isNaN(this.value)?this.spinCfg.reset:$.isFunction(this.spinCfg.stepfunc)?this.spinCfg.stepfunc(this,a):Number((Number(this.value)+Number(a)).toFixed(5));if(this.spinCfg.min!==
+null)a=Math.max(a,this.spinCfg.min);if(this.spinCfg.max!==null)a=Math.min(a,this.spinCfg.max);this.value=a;$.isFunction(this.spinCfg.callback)&&this.spinCfg.callback(this)};$(this).addClass(b&&b.spinClass?b.spinClass:"spin-button").mousemove(function(a){var c=a.pageX||a.x,e=a.pageY||a.y;a=a.target||a.srcElement;var d=svgEditor.tool_scale||1,g=$(a).height()/2;c=c>f(a,"offsetLeft")+a.offsetWidth*d-this.spinCfg._btn_width?e<f(a,"offsetTop")+g*d?1:-1:0;if(c!==this.spinCfg._direction){switch(c){case 1:$(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
+break;case -1:$(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);break;default:$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass)}this.spinCfg._direction=c}}).mouseout(function(){$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);this.spinCfg._direction=null;window.clearInterval(this.spinCfg._repeat);window.clearTimeout(this.spinCfg._delay)}).mousedown(function(a){if(a.button===0&&this.spinCfg._direction!=0){var c=this,
+e=a.shiftKey?c.spinCfg.smallStep:c.spinCfg.step,d=function(){c.adjustValue(c.spinCfg._direction*e)};d();c.spinCfg._delay=window.setTimeout(function(){d();c.spinCfg._repeat=window.setInterval(d,c.spinCfg.interval)},c.spinCfg.delay)}}).mouseup(function(){window.clearInterval(this.spinCfg._repeat);window.clearTimeout(this.spinCfg._delay)}).dblclick(function(){$.browser.msie&&this.adjustValue(this.spinCfg._direction*this.spinCfg.step)}).keydown(function(a){switch(a.keyCode){case 38:this.adjustValue(this.spinCfg.step);
+break;case 40:this.adjustValue(-this.spinCfg.step);break;case 33:this.adjustValue(this.spinCfg.page);break;case 34:this.adjustValue(-this.spinCfg.page)}}).keypress(function(a){if(this.repeating)switch(a.keyCode){case 38:this.adjustValue(this.spinCfg.step);break;case 40:this.adjustValue(-this.spinCfg.step);break;case 33:this.adjustValue(this.spinCfg.page);break;case 34:this.adjustValue(-this.spinCfg.page)}else this.repeating=true}).keyup(function(a){this.repeating=false;switch(a.keyCode){case 38:case 40:case 33:case 34:case 13:this.adjustValue(0)}}).bind("mousewheel",
+function(a){if(a.wheelDelta>=120)this.adjustValue(this.spinCfg.step);else a.wheelDelta<=-120&&this.adjustValue(-this.spinCfg.step);a.preventDefault()}).change(function(){this.adjustValue(0)});this.addEventListener&&this.addEventListener("DOMMouseScroll",function(a){if(a.detail>0)this.adjustValue(-this.spinCfg.step);else a.detail<0&&this.adjustValue(this.spinCfg.step);a.preventDefault()},false)})};

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

@@ -0,0 +1,1495 @@
+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_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); }
+*/