body { background: #D8D8D8; } #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; } #svg_editor a { color: #0000FF; } #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 #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)); } #svg_editor div#palette_holder { overflow-x: scroll; overflow-y: hidden; height: 31px; border: 1px solid #808080; border-top: none; margin-top: 2px; margin-left: 4px; position: relative; z-index: 2; } #svg_editor #stroke_bg, #svg_editor #fill_bg { height: 16px; width: 16px; margin: 1px; } #svg_editor #fill_color, #svg_editor #stroke_color { height: 16px; width: 16px; border: 1px solid #808080; cursor: pointer; margin-top: -18px; margin-left: 1px; } #tool_stroke select { margin-top: 0; } #svg_editor #color_tools .icon_label { padding: 3px 19%; width: 28px; height: 100%; cursor: pointer; } #svg_editor #group_opacityLabel, #svg_editor #zoomLabel { cursor: pointer; margin-right: 5px; padding-top: 4px } #color_tools .icon_label > * { position: relative; top: 1px; } #svg_editor div#palette { float: left; width: 672px; height: 16px; } #svg_editor div#workarea { display: inline-table-cell; position:absolute; top: 75px; left: 40px; bottom: 62px; right: 14px; background-color: #A0A0A0; border: 1px solid #808080; overflow: auto; text-align: center; } #svg_editor #sidepanels { display: inline-block; position:absolute; top: 75px; bottom: 60px; right: 0px; width: 2px; padding: 10px; border-color: #808080; border-style: solid; border-width: 1px; border-left: none; } #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; } /* border-style: solid; border-color: #666; border-width: 0px 0px 0px 1px; */ #svg_editor #sidepanel_handle { display: inline-block; position: absolute; background-color: #D8D8D8; 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: 123px; height: 20px; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #808080; border-top: 1px solid #808080; overflow: auto; } #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 #main_button { position: absolute; top: 4px; left: 4px; z-index: 5; } #svg_editor #main_icon { background: #E8E8E8; position: relative; top: -2px; left: -2px; padding: 1px 0 2px 1px; width: 44px; height: 30px; border-left: 1px solid #FFF; border-top: 1px solid #FFF; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #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 { border-left: 1px #fcd9ba solid !important; border-top: 1px #fcd9ba solid !important; border-right: 1px #e0a874 solid !important; border-bottom: 1px #e0a874 solid !important; background-color: #FFC !important; } #svg_editor .tool_button_current, #svg_editor .push_button_pressed, #svg_editor .buttondown { background-color: #f4e284 !important; border-top: 1px solid #630 !important; border-left: 1px solid #630 !important; } #svg_editor #main_icon span { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; } #svg_editor #main_menu { z-index: 12; background: #E8E8E8; position: relative; width: 200px; padding: 5px; -moz-box-shadow: #555 1px 1px 4px; -webkit-box-shadow: #555 1px 1px 4px; font-size: 1.1em; display: none; overflow: hidden; border: 1px outset gray; clear: both; } #svg_editor #main_menu ul, #svg_editor #main_menu li { list-style: none; margin: 0; padding: 0; } #svg_editor #main_menu li { /* height: 35px;*/ line-height: 22px; padding-top: 7px; padding-left: 7px; margin: -5px; overflow: auto; cursor: default; } #svg_editor #main_menu li:hover { background: #FFC; } #svg_editor #main_menu li > div { float: left; padding-right: 5px; } #svg_editor #main_menu p { margin-top: 5px; } #svg_editor #logo img { border: 0; width: 32px; height: 32px; } #main_icon > div { float: left; } #svg_editor #main_button .dropdown { padding-top: 28%; margin-left: -1px; } #svg_editor #tools_top { position: absolute; left: 50px; right: 2px; top: 2px; height: 72px; border-bottom: none; /* Ideally this should be auto (makes scrollbar if needed), but currently hides the .dropdown lists. /* overflow: auto;*/ } #svg_editor #tools_left { position: absolute; border-right: none; width: 32px; top: 75px; left: 0; padding-left: 2px; background: #D8D8D8; /* 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; } #svg_editor #multiselected_panel .selected_tool { vertical-align: 12px; } #svg_editor #tools_top > div, #tools_top { line-height: 26px; } #svg_editor div.toolset, #svg_editor div.toolset > * { float: left; } #svg_editor div.toolset { height: 34px; } #svg_editor 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; } #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: 26px; padding: 3px; } #zoom_panel { margin-top: 5px; } .dropdown { position: relative; } #svg_editor .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: -80px; top: 26px; z-index: 4; display: none; } .dropup ul { top: auto; bottom: 26px; } .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 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: 24px; width: 24px; margin: 2px; padding: 2px; border-left: 1px solid #FFF; border-top: 1px solid #FFF; border-right: 1px solid #808080; border-bottom: 1px solid #808080; background-color: #E8E8E8; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #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 .tool_sep { width: 1px; background: #888; border-left: 1px outset #EEE; margin: 2px 3px; padding: 0; height: 24px; } #svg_editor .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; } #svg_editor .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; } #svg_editor #color_picker { position: absolute; display: none; background: #E8E8E8; height: 350px; z-index: 4; } #svg_editor .tools_flyout { position: absolute; display: none; cursor: pointer; width: 400px; } #svg_editor .tools_flyout_v { position: absolute; display: none; cursor: pointer; width: 30px; } #svg_editor .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; } #svg_editor #tools_bottom { position: absolute; left: 40px; right: 0; bottom: 0; height: 64px; overflow: visible; } #svg_editor #tools_bottom_1 { width: 115px; float: left; } #svg_editor #tools_bottom_2 { width: 165px; position: relative; float: left; } #tools_bottom input[type=text] { width: 2.2em; } #svg_editor #color_tools { display: table; margin-top: 1px; border-spacing: 0 3px; clip: rect(0,0,10px,0); } .color_tool { display: table-row; overflow: hidden; height: 26px; padding: 0 4px; } .color_tool > * { display: table-cell; background: #f0f0f0; padding: 0 5px 0 0; vertical-align: middle; /* height: 25px;*/ } #toggle_stroke_tools { letter-spacing: -.2em; padding-right: 8px; } #toggle_stroke_tools:hover { cursor: pointer; background: #FFC; } .stroke_tool { display: none; white-space: nowrap; } #svg_editor .stroke_tool button { margin-top: 3px; background: #F0F0F0; } #svg_editor .stroke_tool div div { -moz-user-select: none; -webkit-user-select: none; width: 20px; height: 20px; margin: 1px 0; padding: 1px; border: 1px solid #DDD; } #svg_editor .stroke_tool:hover div > * { background-color: #FFC; } #svg_editor .stroke_tool.down div div, #svg_editor .stroke_tool.down button, #tools_top .dropdown.down > * { border: 1px inset gray; background: #F4E284; } .stroke_tool > div { width: 42px; } .stroke_tool > div > * { float: left; } #tools_top .dropdown .icon_label { border: 1px solid transparent; margin-top: 3px; height: auto; } #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: 90px; margin-left: -31px; } #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; } .color_tool > *:first-child { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; padding-right: 0; } .color_tool > *:last-child { -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; } #svg_editor #tool_opacity { position: absolute; top: 4px; right: 2px; background: #f0f0f0; height: 26px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 3px; } #tools_bottom .dropdown button { margin-top: 2px; } #opacity_dropdown li { width: 140px; } #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: #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; } #svg_docprops #svg_docprops_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 { margin-left: 1em; overflow: auto; } #svg_docprops_container #svg_docprops_docprops, #svg_docprops_container #svg_docprops_prefs { float: left; width: 221px; margin: 5px .7em; overflow: hidden; } #svg_docprops_container #svg_docprops_prefs { float: right; } #svg_docprops legend { max-width: 195px; } #svg_docprops_docprops > legend, #svg_docprops_prefs > legend { font-weight: bold; font-size: 1.1em; } #svg_docprops_container fieldset { padding: 5px; margin: 5px; border: 1px solid #DDD; } #svg_docprops_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_docprops_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 { margin-top: 0; margin-bottom: 5px; } #svg_docprops { display: none; } #image_save_opts label { font-size: .9em; } #image_save_opts input { margin-left: 0; } #svg_docprops #svg_docprops_overlay { position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; background-color: black; opacity: 0.6; z-index: 20000; } .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 */ #svg_editor .tools_flyout .tool_button, #svg_editor .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: 14px/17px 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 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); } */