body {

background: #3f3f3c;

font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

margin: 0;

padding: 0;

}

::selection {background: #000; color: #fff; /* Safari */}

::-moz-selection {background: #000; color: #fff; /* Firefox */}

html, body {

overflow: hidden;

width: 100%;

height: 100%;

}

::-webkit-scrollbar {

width: 5px;

height: 5px;

background: #444;

}

::-webkit-scrollbar-track {

border-radius: 10px;

background: #444;

}

::-webkit-scrollbar-thumb {

border-radius: 10px;

background: #666;

}

::-webkit-scrollbar-corner {

background: #444;

}

#browser-not-supported {

font-size: 0.8em;

font-family: Verdana, Helvetica, Arial;

color: #000000;

}

#svgroot {

-moz-user-select: none;

-webkit-user-select: none;

position: absolute;

top: 0;

left: 0;

}

#svg_editor {

background: #2f2f2c;

}

#menu_bar {

padding: 0 0 0 50px;

background: #2f2f2c;

position: relative;

z-index: 2;

}

#menu_bar.active .menu.open .menu_list {

display: block;

}

.menu {

position: relative;

z-index: 5;

color: #333;

display: inline-block;

}

.menu_title {

cursor: pointer;

display: inline-block;

padding: 7px 10px;

z-index: 10;

color: #fff;

position: relative;

height: 16px;

vertical-align: top;

}

.touch .menu_title {

padding: 7px 17px;

height: 26px;

line-height: 26px;

}

.menu .menu_title:hover {

background: rgba(255,255,255,0.1);

}

.menu_list .separator {

margin: 5px 0;

border-top: solid #ddd 1px;

}

.menu_list {

display: none;

position: absolute;

top: 28px;

left: 0;

white-space: nowrap;

background: white;

padding: 7px 0;

border-radius: 0 3px 3px 3px;

box-shadow: 0 0 20px rgba(0,0,0,0.8);

}

.touch .menu_list {

top: 38px;

}

#menu_bar.active .menu.open .menu_title {

background: white;

color: #333;

}

.menu_list .menu_item {

position: relative;

overflow: hidden;

line-height: 22px;

padding: 5px 69px 5px 25px;

cursor: default;

color: #333;

}

.menu_list .menu_item.tool_button {

background: transparent;

border: none;

margin: 0;

padding: 5px 55px 5px 25px;

height: auto;

width: auto;

}

.menu_list .menu_item.push_button_pressed:before {

content: '✔';

position: absolute;

display: block;

left: 7px;

top: 3px;

width: 20px;

height: 20px;

}

.menu_list .menu_item:hover,

.menu_list .menu_item.push_button_pressed:hover {

background: rgba(0,0,0,0.1);

color: #000;

}

.menu_list .menu_item.disabled:hover,

.menu_list .menu_item.push_button_pressed.disabled:hover {

background: transparent;

color: #333;

}

.menu_list .menu_item.push_button_pressed {

background: transparent;

border: none;

width: auto;

height: auto;

margin: 0;

}

.menu_list .menu_item span {

display: block;

position: absolute;

right: 10px;

padding: 5px;

background: rgba(0,0,0, 0.1);

top: 6px;

height: 10px;

text-align: center;

font-size: 10px;

line-height: 120%;

}

#svgcanvas {

line-height: normal;

display: inline-block;

background-color: #A0A0A0;

text-align: center;

vertical-align: middle;

width: 640px;

height: 480px;

position: relative;

background: #3F3F3C;

}

#rulers > div {

position: absolute;

background: #2f2f2c;

z-index: 1;

overflow: hidden;

-webkit-font-smoothing: none;

}

#rulers #ruler_corner {

top: 30px;

left: 50px;

width: 15px;

height: 15px;

border: solid #444 1px;

z-index: 2;

}

#ruler_x {

height: 15px;

top: 30px;

left: 66px;

right: 175px;

border-top: solid #444 1px;

border-right: solid #444 1px;

}

#ruler_x_cursor {

height: 15px;

border-right: dotted #999 1px;

position: absolute;

background: #2f2f2c;

}

#ruler_y_cursor {

width: 15px;

border-top: dotted #999 1px;

position: absolute;

background: #2f2f2c;

}

#rulers.moved #ruler_corner,

#rulers.moved #ruler_x {

top: 101px;

}

#ruler_y {

width: 15px;

top: 46px;

left: 50px;

bottom: 40px;

border-left: solid #444 1px;

border-bottom: solid #444 1px;

}

#rulers.moved #ruler_y {

top: 116px;

}

#ruler_x canvas:first-child {

margin-left: -16px;

}

#ruler_x canvas {

float: left;

}

#ruler_y canvas {

margin-top: -16px;

}

#ruler_x > div,

#ruler_y > div {

overflow: hidden;

}

#palette {

display: block;

position: absolute;

z-index: 2;

left: 10px;

bottom: 5px;

width: 410px;

right: 145px;

height: 30px;

}

.palette_item {

height: 20%;

width: 5.2%;

float: left;

cursor: url(../images/eyedropper.png) 0 16, crosshair;

}

.palette_item.transparent, .palette_item.white, .palette_item.black {

background: #fff;

position: absolute;

width: 10px;

height: 10px;

left: -10px;

top: 0;

}

.palette_item.transparent {

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==);

}

.palette_item.black {

background: #000;

top: 10px;

}

.palette_item.white {

background: #fff;

top: 20px;

}

#color_tools {

position: relative;

width: 48px;

height: 48px;

margin: 6px 6px 0 6px;

}

.touch #color_tools {

width: auto;

height: auto;

}

#tool_fill {

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

.touch #tool_fill {

position: static;

width: 36px;

height: 36px;

margin-bottom: 10px;

}

#tool_fill.active, #tool_stroke.active {

z-index: 2;

}

#tool_stroke {

top: 14px;

left: 14px;

}

.touch #tool_fill.active, .touch #tool_stroke.active {

outline: 4px solid #09f;

}

#tool_fill, #tool_stroke, #tool_canvas {

box-shadow: 0 0 0 1px #2f2f2c;

position: absolute;

}

.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {

position: relative;

top: 0;

left: 0;

}

#color_canvas_tools {

float: left;

cursor: pointer;

}

#tool_fill .color_block {

width: 24px;

height: 24px;

overflow: hidden;

border: solid #ccc 1px;

}

.touch #tool_eyedropper {

margin-top: 6px;

}

.touch #tool_fill .color_block {

width: 36px;

height: 36px;

}

.touch #tool_fill .color_block svg {

width: 36px !important;

height: 36px !important;

}

.touch #tool_switch {

display: none;

}

#use_panel .tool_button, #path_node_panel .tool_button {

color: #999;

border: solid #3F3F3C 1px;

border-radius: 3px;

padding: 3px 10px 3px 40px;

background:

transparent;

position: relative;

margin-top: 10px;

width: 90px;

height: 23px;

line-height: 24px;

}

#use_panel .tool_button {

padding-left: 10px;

margin-bottom: 10px;

width: 124px;

}

#path_node_panel .tool_button img, #path_node_panel .tool_button svg {

position: absolute;

left: 5px;

top: 3px;

}

#color_tools #tool_fill .color_block:hover, #color_tools #tool_stroke .color_block:hover {

border-color: #fff;

}

#color_tools #tool_fill .color_block > div {

position: absolute;

top: 0;

left: 0;

}

.touch #color_tools #tool_fill .color_block > div {

position: relative;

}

#color_tools #tool_fill .color_block #fill_bg, #color_tools #tool_stroke .color_block #stroke_bg {

position: absolute;

top: 1px;

left: 1px;

bottom: 1px;

right: 1px;

}

.touch #color_tools #tool_fill .color_block #fill_bg, .touch #color_tools #tool_stroke .color_block #stroke_bg {

width: 36px;

height: 36px;

right: auto;

bottom: auto;

}

.touch #tool_stroke {

position: relative;

top: 0;

left: 0;

z-index: 0;

}

#stroke_color:after {

content: '';

position: absolute;

display: block;

width: 8px;

height: 8px;

left: 8px;

top: 8px;

background: #ccc;

box-shadow: 0 0 0 1px #000;

}

.touch #stroke_color:after {

height: 14px;

left: 10px;

position: absolute;

top: 10px;

width: 14px;

}

#color_tools #tool_switch {

cursor: pointer;

opacity: 0.7;

width: 11px;

height: 11px;

background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;

position: absolute;

top: -2px;

left: 28px;

}

#color_tools #cross:hover {

opacity: 1;

}

#color_tools #tool_stroke:hover #stroke_color:after {

background: #fff;

}

#color_tools #tool_stroke .color_block {

width: 24px;

height: 24px;

overflow: hidden;

border: solid #ccc 1px;

}

.touch #color_tools #tool_stroke .color_block {

width: 36px;

height: 36px;

}

#color_tools #tool_stroke .color_block > div {

position: absolute;

bottom: 0;

right: 0;

}

.touch #color_tools #tool_stroke .color_block > div {

position: relative;

}

#color_tools .icon_label {

padding: 0;

width: 24px;

height: 100%;

cursor: pointer;

position: absolute;

}

#linkLabel > svg {

height: 20px;

padding-top: 4px;

}

div#workarea {

display: inline-table-cell;

position:absolute;

top: 30px;

left: 50px;

bottom: 40px;

right: 175px;

background-color: #444;

overflow: auto;

text-align: center;

-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);

-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);

-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);

-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);

transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);

}

.touch div#workarea {

top: 40px;

}

.menu .menu_list {

display: none;

position: absolute;

}

.tool_button,

.tool_button_current,

.tool_button_pressed {

cursor: pointer;

}

.tool_button:hover,

.push_button:hover,

.buttonup:hover,

.buttondown,

.tool_button_current,

.push_button_pressed

{

background-color: #fff;

}

.tool_button.disabled,

.tool_button.disabled:hover {

opacity: 0.3;

background-color: #aaa;

}

#tools_left .tool_button { background: #2f2f2c; position: relative;}

#tools_left .tool_button.loaded { background: #ccc;}

#tools_left .tool_button.loaded:hover { background: #fff;}

#tools_left .tool_button:after, #tools_left .tool_button_current:after {

position: absolute;

content: '';

border: solid #2f2f2c 2px;

top: -1px;

left: -1px;

width: 26px;

height: 26px;

z-index: 0;

}

#tools_left .tool_button_current {

background-color: #0cf;

}

#main_icon span {

position: absolute;

width: 100%;

height: 100%;

display: block;

z-index: 2;

}

#tools_top {

position: absolute;

width: 160px;

height: 100%;

background: #2f2f2c;

right: 0;

top: 20px;

border-bottom: none;

overflow: visible;

padding: 0 0 0 15px;

}

.touch #tools_top {

top: 30px;

}

label {

display: block;

color: #999;

}

div#font-selector {

width:140px;

height:300px;

overflow:auto;

margin:0 auto;

position:absolute;

top:27px;

right:0;

border:1px solid black;

padding:10px;

display:none;

background-color:white;

z-index: 10;

border-radius: 3px;

box-shadow: 0 5px 10px rgba(0,0,0,0.7);

}

div#font-selector img {

width: 100%;

}

div#font-selector .font-item {

border-bottom: solid #ddd 1px;

padding: 5px 10px;

margin: 0 -10px;

}

div#font-selector .font-item:hover {

background-color: #eee;

}

#tools_top #marker_panel * {

float: left;

}

#tools_top #marker_panel h4 {

float: none;

}

#tools_top #marker_panel .dropdown .icon_label {

width: 36px;

height: 20px;

margin-top: 2px;

border: solid #3f3f3c 1px;

text-align: center;

}

#tools_top #marker_panel .dropdown button {

margin-top: 2px;

}

#tools_top #marker_panel #marker_panel_title {

float: none;

color: #fff;

margin-bottom: 3px;

}

#tools_top #marker_panel .dropdown .icon_label img {

float: none;

}

#color_picker input[type=text], #color_picker input[type=number] {

width: 30px;

background: #fff;

}

.dropdown_set input[type=text], .dropdown_set input[type=number] {

width: 50px;

}

input[type=text].wide, input[type=number].wide {width: 110px;}

input[type=text].tuco, input[type=number].tuco {width: 150px;}

input[type=submit], input[type=button], button {

background: #4F80FF;

color: #fff;

border-radius: 3px;

padding: 7px 17px;

border: none;

line-height: 140%;

font-size: 14px;

font-weight: bold;

font-family: sans-serif;

}

input[type=submit]:hover, button:hover {

box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),

inset 0 -3px 10px rgba(0, 0, 0, 0.2);

}

input[type=submit]:hover, button:hover {background: #2F84C1;}

input[type=submit]:active, button:active { box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;}

#tools_left {

position: absolute;

border-right: none;

width: 50px;

top: 30px;

bottom: 0;

left: 0;

background: #2F2F2C; /* 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;

}

#workarea #canvasBackground > rect {

stroke: transparent !important;

}

.context_panel {

display: none;

}

#canvas_panel {

display: block;

}

#multiselected_panel .selected_tool {

vertical-align: 12px;

}

#cur_context_panel {

position: absolute;

top: 47px;

left: 68px;

line-height: 22px;

overflow: auto;

border-bottom: none;

border-right: none;

padding-left: 5px;

font-size: 12px;

background: black;

color: #999;

opacity: 0.5;

padding: 0 10px;

border-radius: 0 10px 10px 0;

}

#cur_context_panel a {

float: none;

text-decoration: none;

color: #fff;

}

#cur_context_panel a:hover {

text-decoration: underline;

}

#tools_left .tool_button,

#tools_left .tool_button_current {

position: relative;

z-index: 11;

}

.flyout_arrow_horiz {

position: absolute;

bottom: -1px;

right: 0;

z-index: 10;

}

.dropdown {

position: relative;

float: left;

}

.dropdown button {

width: 21px;

height: 22px;

padding: 0 3px 0 3px;

border: none;

background-color: #555;

border-radius: 0 2px 2px 0;

margin-left: -1px;

position: relative;

}

.dropdown button:hover {

background-color: #666;

}

.dropdown button:after {

content: '';

position: absolute;

border: solid transparent 4px;

border-top-color: #999;

top: 9px;

left: 6px;

}

.dropdown button.down {

border-left: 1px solid #808080;

border-top: 1px solid #808080;

border-right: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

background-color: #B0B0B0;

}

.dropdown ul {

list-style: none;

position: absolute;

margin: 0;

padding: 0;

left: -80px;

top: 26px;

z-index: 4;

display: none;

}

.dropup ul {

top: auto;

bottom: 26px;

border-radius: 3px;

box-shadow: 0 5px 10px #000;

}

.dropup ul:after {

content: '';

display: block;

position: absolute;

bottom: -10px;

right: 50%;

top: auto;

width: 0;

height: 0;

border: solid transparent 5px;

border-top-color: #fff;

}

.dropdown li {

display: block;

width: 120px;

padding: 5px 10px;

color: #333;

background: #fff;

margin: 0;

line-height: 16px;

}

.dropdown li:first-child {border-radius: 3px 3px 0 0;}

.dropdown li:last-child {border-radius: 0 0 3px 3px;}

.dropdown li:hover {

background-color: #ddd;

color: #000;

}

.dropdown li.special {

padding: 10px;

background: white;

border: none;

box-shadow: 0 3px 10px black;

border-radius: 3px !important;

}

.dropdown li.special:after {

content: '';

display: block;

position: absolute;

top: -10px;

right: 50%;

border: solid transparent 5px;

border-bottom-color: #fff;

}

.dropdown li.special.down:after {

bottom: -10px;

right: 50%;

top: auto;

border: solid transparent 5px;

border-top-color: #fff;

}

.tool_button,

.push_button,

.tool_button_current,

.push_button_pressed

{

height: 27px;

width: 27px;

border: solid #2f2f2c 8px;

border-left-width: 13px;

margin: 0;

background-color: #ddd;

cursor: pointer;

}

#main_menu li#tool_open, #main_menu li#tool_import {

position: relative;

overflow: hidden;

}

#tool_image {

overflow: hidden;

}

#tool_open input,

#tool_import input,

#tool_import_bitmap input {

position: absolute;

opacity: 0;

font-size: 10em;

top: -5px;

right: -5px;

margin: 0;

cursor: pointer; /* Sadly doesn't appear to have an effect */

}

.disabled {

opacity: 0.5;

cursor: default;

}

.width_label {

padding-right: 5px;

}

#text {

position: absolute;

left: -9999px;

}

#tool_bold span, #tool_italic span {

position: absolute;

width: 100%;

height: 100%;

top: 0; left: 0;

background: #ccc;

opacity: 0;

}

#url_notice {

padding-top: 4px;

display: none;

}

#color_picker {