body { background: #2F2F2C; 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; } #svg_editor hr { border: none; border-bottom: 1px solid #808080; } #svg_editor select { margin-top: 4px; } #svg_editor #svgroot { -moz-user-select: none; -webkit-user-select: none; position: absolute; top: 0; left: 0; } #svg_editor #menu_bar { margin: 0 0 0 50px } #svg_editor #menu_bar.active .menu.open .menu_list { display: block; } #svg_editor .menu { position: relative; z-index: 5; color: #333; display: inline-block; } #svg_editor .menu_title { cursor: pointer; display: inline-block; padding: 7px 10px; z-index: 10; color: #fff; position: relative; height: 16px; vertical-align: top; } #svg_editor .menu .menu_title:hover { background: rgba(255,255,255,0.1); } #svg_editor .menu_list .separator { margin: 5px 0; border-top: solid #ddd 1px; } #svg_editor .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); } #svg_editor #menu_bar.active .menu.open .menu_title { background: white; color: #333; } #svg_editor .menu_list .menu_item { position: relative; overflow: hidden; line-height: 22px; padding: 5px 69px 5px 25px; cursor: default; color: #333; } #svg_editor .menu_list .menu_item.tool_button { background: transparent; border: none; margin: 0; padding: 5px 55px 5px 25px; height: auto; width: auto; } #svg_editor .menu_list .menu_item.push_button_pressed:before { content: '✔'; position: absolute; display: block; left: 7px; top: 3px; width: 20px; height: 20px; } #svg_editor .menu_list .menu_item:hover, #svg_editor .menu_list .menu_item.push_button_pressed:hover { background: rgba(0,0,0,0.1); color: #000; } #svg_editor .menu_list .menu_item.disabled:hover, #svg_editor .menu_list .menu_item.push_button_pressed.disabled:hover { background: transparent; color: #333; } #svg_editor .menu_list .menu_item.push_button_pressed { background: transparent; border: none; width: auto; height: auto; margin: 0; } #svg_editor .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%; } #svg_editor #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: 200px; 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; } #svg_editor div#palette_holder { display: block; overflow: hidden; height: 31px; margin-top: 10px; position: relative; z-index: 2; float: left; } #svg_editor div#palette_holder #palette .palette_item:first-child { background: #fff; } #svg_editor div#palette_holder #palette .palette_item { cursor: pointer; } #tool_stroke select { margin-top: 0; } #svg_editor #color_tools, #color_canvas_tools { position: relative; width: 48px; height: 48px; margin: 6px 6px 0 6px; } #svg_editor #color_tools #tool_fill, #tool_canvas { position: absolute; top: 0; left: 0; z-index: 1; } #tool_fill.active, #tool_stroke.active { z-index: 2; } #tool_fill, #tool_stroke, #tool_canvas { box-shadow: 0 0 0 1px #2f2f2c; } #color_canvas_tools { float: left; cursor: pointer; } #tool_fill .color_block, #tool_canvas .color_block { width: 24px; height: 24px; overflow: hidden; border: solid #ccc 1px; } #svg_editor #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; } #svg_editor #path_node_panel .tool_button img { position: absolute; left: 5px; top: 3px; } #svg_editor #path_node_panel #tool_node_link { border: none; padding: 3px 0; width: auto; margin: 0 0 10px 0; background: transparent; color: #ccc; height: auto; line-height: 130%; } #svg_editor #path_node_panel #segment_type { margin-top: 10px; } #svg_editor #color_tools #tool_fill .color_block:hover, #svg_editor #color_tools #tool_stroke .color_block:hover { border-color: #fff; } #svg_editor #color_tools #tool_fill .color_block > div { position: absolute; top: 0; left: 0; } #svg_editor #color_tools #tool_fill .color_block #fill_bg, #svg_editor #color_tools #tool_stroke .color_block #stroke_bg { position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; background: #fff; } #tool_stroke { position: absolute; top: 12px; left: 12px; 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; } #svg_editor #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; } #svg_editor #color_tools #cross:hover { opacity: 1; } #svg_editor #color_tools #tool_stroke:hover #stroke_color:after { background: #fff; } #svg_editor #color_tools #tool_stroke .color_block { width: 24px; height: 24px; overflow: hidden; border: solid #ccc 1px; } #svg_editor #color_tools #tool_stroke .color_block > div { position: absolute; bottom: 0; right: 0; } #svg_editor #color_tools .icon_label { padding: 0; width: 24px; height: 100%; cursor: pointer; } #svg_editor #zoomLabel { cursor: pointer; margin-right: 5px; } #svg_editor #linkLabel > svg { height: 20px; padding-top: 4px; } #svg_editor div#palette { float: left; width: 672px; height: 16px; } #svg_editor div#workarea { display: inline-table-cell; position:absolute; top: 30px; left: 50px; bottom: 40px; right: 200px; background-color: #444; overflow: auto; text-align: center; } #svg_editor #sidepanels { display: none; position:absolute; top: 75px; bottom: 60px; right: 0px; width: 2px; padding: 10px; border-left: none; z-index: 10; } #svg_editor #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; } #svg_editor #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; } #svg_editor #sidepanel_handle:hover { font-weight: bold; } #svg_editor #sidepanel_handle * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; } #svg_editor #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; } #svg_editor .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; } #svg_editor .layer_button:last-child { margin-right: 0; } #svg_editor .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; } #svg_editor #layerlist { margin: 1px; padding: 0px; width: 127px; border-collapse: collapse; border: 1px solid #808080; background-color: #FFFFFF; } #svg_editor #layerlist tr.layer { background-color: #FFFFFF; margin: 0px; padding: 0px; } #svg_editor #layerlist tr.layersel { border: 1px solid #808080; background-color: #CCCCCC; } #svg_editor #layerlist td.layervis { width: 22px; cursor:pointer; } #svg_editor #layerlist td.layerinvis { background-image: none; cursor:pointer; } #svg_editor #layerlist td.layervis * { display: block; } #svg_editor #layerlist td.layerinvis * { display: none; } #svg_editor #layerlist td.layername { cursor: pointer; } #svg_editor #layerlist tr.layersel td.layername { font-weight: bold; } #svg_editor #selLayerLabel { white-space: nowrap; } #svg_editor #selLayerNames { display: block; } #svg_editor div.palette_item { height: 16px; width: 16px; float: left; } #svg_editor .menu .menu_list { display: none; position: absolute; } #svg_editor .tool_button:hover, #svg_editor .push_button:hover, #svg_editor .buttonup:hover, #svg_editor .buttondown, #svg_editor .tool_button_current, #svg_editor .push_button_pressed { background-color: #fff; } #svg_editor .tool_button.disabled, #svg_editor .tool_button.disabled:hover { opacity: 0.3; background-color: #aaa; } #svg_editor #tools_left .tool_button { background: #2f2f2c;} #svg_editor #tools_left .tool_button.loaded { background: #ccc;} #svg_editor #tools_left .tool_button.loaded:hover { background: #fff;} #tools_top .padded { padding: 10px 0; } #svg_editor #tools_left .tool_button_current { background-color: #0cf; } #svg_editor #main_icon span { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; } #svg_editor #tools_top { position: absolute; width: 170px; right: 2px; top: 10px; border-bottom: none; overflow: visible; padding: 0 10px; } #svg_editor 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; } #svg_editor #tools_top label:before, #svg_editor #tools_top label:after { content:""; display:table; } #svg_editor #tools_top label:after { clear:both; } #svg_editor #tools_top label span, #svg_editor #tools_top label select { display: block; width: 80px; float: left; line-height: 185% } #svg_editor #tools_top label span.tuco { width: 100%; float: none; } #svg_editor #tools_top #marker_panel * { float: left; } #svg_editor #tools_top #marker_panel h4 { float: none; } #svg_editor #tools_top #marker_panel .dropdown .icon_label { width: 36px; height: 20px; margin-top: 2px; border: solid #3f3f3c 1px; text-align: center; } #svg_editor #font_family_dropdown-list { border-radius: 3px; box-shadow: 0 5px 10px #000; } #svg_editor #font_family_dropdown-list li { cursor: pointer; } #svg_editor #tools_top #marker_panel .dropdown button { margin-top: 2px; } #svg_editor #tools_top #marker_panel #marker_panel_title { float: none; color: #fff; margin-bottom: 3px; } #svg_editor #tools_top #marker_panel .dropdown .icon_label img { float: none; } #svg_editor input[type=text], #svg_editor input[type=number] { border: solid #3f3f3c 1px; background-color: transparent; color: #09f; display: block; float: left; font-size: 13px; padding: 2px 5px; width: 70px; -webkit-appearance: none; border-radius: 2px; margin: 0; -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } #svg_editor #color_picker input[type=text], #color_picker #svg_editor input[type=number] { width: 30px; background: #fff; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #svg_editor .dropdown_set input[type=text], #svg_editor .dropdown_set input[type=number] { width: 50px; } #svg_editor input[type=text].wide, #svg_editor input[type=number].wide {width: 110px;} #svg_editor input[type=text].tuco, #svg_editor input[type=number].tuco {width: 150px;} #svg_editor input[type=submit], #svg_editor input[type=button], button { background: #2C7BB3; color: #fff; border-radius: 2px; padding: 5px 10px; border: none; line-height: 140%; border-bottom: solid transparent 1px; } #svg_editor input[type=submit]:hover, #svg_editor button:hover { box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1), inset 0 -3px 10px rgba(0, 0, 0, 0.2); } #svg_editor input[type=submit]:hover, #svg_editor button:hover {background: #2F84C1;} #svg_editor input[type=submit]:active, #svg_editor button:active {padding: 6px 10px 4px 10px; box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;} #svg_editor input[type=text]:focus, #svg_editor input[type=number]:focus { border: solid rgba(0, 120, 255, 0.3) 1px; outline: none; } #svg_editor input[readonly=readonly], #svg_editor input[readonly=readonly]:focus { background: transparent; color: #fff; border: none; outline: none; } #svg_editor #tools_left { position: absolute; border-right: none; width: 50px; top: 30px; 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; } #tools_top div[id$="_panel"]:not(#canvas_panel) { display: none; } #svg_editor #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; } #svg_editor #cur_context_panel a { float: none; text-decoration: none; color: #fff; } #svg_editor #cur_context_panel a:hover { text-decoration: underline; } #svg_editor #tools_left .tool_button, #svg_editor #tools_left .tool_button_current { position: relative; z-index: 11; } #svg_editor .flyout_arrow_horiz { position: absolute; bottom: -1px; right: 0; z-index: 10; } span.zoom_tool { line-height: 16px; background: #ccc; display: block; width: 18px; height: 18px; margin-top: 2px; float: left; } span.zoom_tool img { vertical-align: top; } #zoom_panel { margin-top: 9px; right: 200px; position: absolute; } .dropdown { position: relative; float: left; } #svg_editor .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; } #svg_editor .dropdown button:hover { background-color: #666; } #svg_editor .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; } #font_family_dropdown-list li { font-size: 1.4em; } #font_family { margin-left: 5px; margin-right: 0; } #svg_editor .tool_button, #svg_editor .push_button, #svg_editor .tool_button_current, #svg_editor .push_button_pressed { height: 27px; width: 27px; border: solid #2f2f2c 8px; border-left-width: 13px; margin: 0; background-color: #ddd; cursor: pointer; } #svg_editor #main_menu li#tool_open, #svg_editor #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 */ } #svg_editor .disabled { opacity: 0.5; cursor: default; } #svg_editor .width_label { padding-right: 5px; } #svg_editor #tool_bold, #svg_editor #tool_italic { font: bold 2.1em/1.1em serif; text-align: center; padding: 0 2px 5px 2px; position: relative; float:left; margin: 5px 10px 0 0; color: #ccc; background: #2f2f2c; border: solid #3f3f3c 1px; } #svg_editor #tool_bold:hover, #svg_editor #tool_italic:hover { color: #fff; } #svg_editor #tool_font_size { clear:both; padding-top: 8px; } #text { position: absolute; left: -9999px; } #svg_editor #tool_bold span, #svg_editor #tool_italic span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ccc; opacity: 0; } #svg_editor #tool_italic { font-weight: normal; font-style: italic; } #url_notice { padding-top: 4px; display: none; } #svg_editor #color_picker { position: absolute; display: none; background: #fff; height: 350px; border-radius: 3px; z-index: 5; box-shadow: 0 5px 10px #000; width: 530px; } #svg_editor .tools_flyout { position: absolute; display: none; cursor: pointer; width: 385px; z-index: 10; left: 47px !important; height: 324px; background: #fff; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } #svg_editor .tools_flyout_v { position: absolute; display: none; cursor: pointer; width: 30px; } #svg_editor .tools_flyout .tool_button { float: left; background-color: #fff; height: 24px; width: 24px; } #svg_editor #tools_bottom { position: absolute; left: 50px; right: 0; bottom: 0; height: 40px; overflow: visible; } #svg_editor #tools_bottom_1 { width: 115px; float: left; } #svg_editor #tools_bottom_2 { position: relative; float: left; margin-top: 5px; } #tools_bottom input[type=text] { width: 3.2em; } #svg_editor .stroke_tool .dropdown button { margin-top: 0; } #svg_editor .stroke_tool div div { -moz-user-select: none; -webkit-user-select: none; width: 20px; height: 20px; margin: 0; padding: 1px; background: rgba(255,255,255,0.3); } #svg_editor #tools_bottom .stroke_tool .dropdown button { background-color:#555; margin-top: 0; } #svg_editor #tools_top h4 { color: #fff; font-weight: normal; margin: 0; padding: 20px 0 5px 0; } .stroke_tool > div { width: 42px; } .stroke_tool > div > * { float: left; } #tools_top .dropdown .icon_label { border: 1px solid transparent; /* margin-top: 3px;*/ height: auto; } .align_buttons .push_button, .align_buttons .push_button_pressed { display: block; float: left; } #option_lists ul { display: none; position: absolute; height: auto; z-index: 3; margin: 0; list-style: none; padding-left: 0; } #option_lists .optcols2 { width: 70px; margin-left: -15px; } #option_lists .optcols3 { width: 192px; margin-left: -105px; margin-top: -25px; background: #fff; padding: 5px; box-shadow: 0 5px 10px #000; border-radius: 3px; } #option_lists .optcols3:after { content: ''; display: block; position: absolute; top: -10px; right: 70px; border: solid transparent 5px; border-bottom-color: #fff; } #svg_editor #option_lists .tool_button, #svg_editor #option_lists .push_button, #svg_editor #option_lists .tool_button_current, #svg_editor #option_lists .push_button_pressed { border: none; background: transparent; } #svg_editor #option_lists .tool_button:hover { background: #ddd; } #svg_editor #option_lists ul li.current { background-color: #F4E284; } #option_lists .optcols4 { width: 130px; margin-left: -44px; } #option_lists ul[class^=optcols] li { float: left; } #svg_editor ul li.current { background-color: #F4E284; } #svg_editor #option_lists ul li { margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } #svg_editor #tool_stroke label input { margin-top: 0;} #svg_editor #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: #fff; border-radius: 3px; opacity: 1.0; text-align: center; z-index: 6; padding: 20px 0; } #save_output_btns { display: none; text-align: left; } #save_output_btns p { margin: .5em 1.5em; display: inline-block; } #bg_blocks { overflow: auto; } #bg_blocks div { box-shadow: 0 2px 3px rgba(0,0,0,0.3); margin-right: 10px; } #svg_docprops #svg_docprops_container, #svg_prefs #svg_prefs_container { position: absolute; top: 50%; width: 300px; height: 200px; margin-top: -140px; margin-left: -250px; border-radius: 3px; padding: 20px; left: 50%; background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.3); opacity: 1.0; 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 #svg_prefs_container { width: 500px; height: 320px; margin: -180px 0 0 -350px; } #svg_docprops legend, #svg_prefs legend { font-weight: bold; font-size: 18px; padding: 0 0 20px 0; display: block; font-family: sans-serif; } #svg_docprops_docprops > legend, #svg_prefs_container > fieldset > legend { font-weight: bold; font-size: 1.1em; } #svg_docprops_container fieldset, #svg_prefs fieldset { margin: 0; padding: 0; border: none; } #svg_docprops_container label, #svg_prefs_container label { display: block; margin: .5em; } #svg_prefs_container label { margin: 10px 0; } #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: 10px 0 0 20px; position: relative; } #svg_source_editor #tool_source_back #tool_source_save { position: absolute; right: 20px; top: 7px; } #svg_prefs_container div.color_block { float: left; margin: 2px; padding: 20px; } #svg_prefs_container div.cur_background { box-shadow: 0 0 8px rgba(0, 50, 255, 1); } #background_img { position: absolute; top: 0; left: 0; text-align: left; } #svg_docprops input, #svg_prefs input, #svg_docprops select, #svg_prefs select { font-size: 15px; border-radius: 3px; border: solid #aaa 1px; background-color: #eee; padding: 5px 10px; } #svg_docprops select, #svg_prefs select { height: 30px; width: 210px; } #svg_docprops label, #svg_prefs label { display: inline-block; width: 100px; vertical-align: top; } #svg_prefs .subtitle { margin-bottom: 10px; } #svg_prefs label { width: 200px; } #svg_docprops label span, #svg_prefs label span { display: inline-block; padding-bottom: 5px; } #svg_docprops button, #svg_prefs button { position: absolute; font-size: 15px; } #svg_editor button.cancel, #svg_editor input.Cancel, #svg_editor input.cancel, #svg_editor input.jGraduate_Cancel, button.cancel { background-color: #999; box-shadow: 0 0 1px rgba(0,0,0,0.5); margin: 0; } #svg_docprops button:first-child, #svg_prefs button:first-child { bottom: 15px; left: 15px; right: auto; } #svg_docprops button:last-child, #svg_prefs button:last-child { bottom: 15px; right: 15px; left: auto; } #svg_docprops button img, #svg_prefs button img { display: none; } #svg_editor button#docprops_button { background: #444; } #svg_editor button#docprops_button:hover { background: #555; } #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; } #shape_buttons { overflow: auto; top: 0; bottom: 0; left: 110px; right: 0; position: absolute; vertical-align: top; } #shape_cats { min-width: 110px; display: block; position: absolute; left: 0; top: 0; height: 300px; background: #eee; border-radius: 3px 0 0 3px; z-index: 2; } #shape_cats > div { line-height: 1em; padding: 0 .5em; border-bottom: 1px solid #ddd; background: #E8E8E8; color: #444; height: 26px; line-height: 26px; } #shape_cats > div:first-child { border-radius: 3px 0 0 0; } #shape_cats > div:last-child { border-radius: 0 0 0 3px; } #shape_cats div:hover { background: #efefef; color: #000; } #shape_cats div.current { font-weight: bold; background: #3f3f3c; color: #fff; position: relative; } #shape_cats div.current:after { content: ''; position: absolute; right: -26px; top: 0; border: solid transparent 13px; border-left-color: #3f3f3c; } .toolbar_button button .svg_icon { display: none; } #dialog_box { display: none; } #dialog_box_overlay { background: black; opacity: .5; height:100%; left:0; position:absolute; top:0; width:100%; z-index: 6; } #dialog_content { height: 95px; margin: 10px 10px 5px 10px; 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; } .invisible { visibility: none; } /* 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 { background: #3F3F3C; border-radius: 10px; } .ui-slider-handle { box-shadow: 0 3px 3px rgba(0,0,0,0.3); border-radius: 30px; background: #fff; background-image: -ms-linear-gradient(top, #ccc 0%, #fff 100%); background-image: -moz-linear-gradient(top, #ccc 0%, #fff 100%); background-image: -o-linear-gradient(top, #ccc 0%, #fff 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(1, #fff)); background-image: -webkit-linear-gradient(top, #ccc 0%, #fff 100%); background-image: linear-gradient(top, #ccc 0%, #fff 100%); } .ui-slider-handle:focus { outline: none; } /* Necessary to keep the flyouts sized properly */ #shape_buttons {background: #fff; border-radius: 0 3px 3px 0; padding: 10px} #svg_editor .tools_flyout .tool_button, #svg_editor .tools_flyout .tool_flyout { background: #fff; width: 40px; height: 40px; margin: 5px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-width: 0; } /* 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; } #menu { display: none; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #000; z-index: 10; color: #fff; } #workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib { cursor: crosshair; } #workarea.text { cursor: text; } #workarea.eyedropper { cursor: url(images/eyedropper.png), crosshair; } #workarea.fhpath { cursor: url(images/pencil.png) 0 20, crosshair; } #workarea.rotate * { cursor: url(images/rotate.png) 12 12, auto; } #workarea.n-resize * {cursor: n-resize !important;} #workarea.e-resize * {cursor: e-resize !important;} #workarea.w-resize * {cursor: w-resize !important;} #workarea.s-resize * {cursor: s-resize !important;} #workarea.ne-resize * {cursor: ne-resize !important;} #workarea.se-resize * {cursor: se-resize !important;} #workarea.nw-resize * {cursor: nw-resize !important;} #workarea.sw-resize * {cursor: sw-resize !important;} #workarea.zoom { cursor: crosshair; cursor:-moz-zoom-in; cursor:-webkit-zoom-in; } #workarea.zoom.out { cursor: crosshair; cursor:-moz-zoom-out; cursor:-webkit-zoom-out; } /* 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); } */ #selectorRubberBand { shape-rendering: crispEdges; } /* For modern browsers */ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { *zoom:1; } #svg_editor #group_title {display: none;}