@font-face {
	font-family: 'Fanwood';
	src: url('font-files/fanwood-webfont.eot');
	src: local('☺'), url('font-files/fanwood-webfont.woff') format('woff'), url('font-files/fanwood-webfont.ttf') format('truetype'), url('font-files/fanwood-webfont.svgz#webfont37hojTTp') format('svg'), url('font-files/fanwood-webfont.svg#webfont37hojTTp') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Fanwood';
	src: url('font-files/fanwood_italic-webfont.eot');
	src: local('☺'), url('font-files/fanwood_italic-webfont.woff') format('woff'), url('font-files/fanwood_italic-webfont.ttf') format('truetype'), url('font-files/fanwood_italic-webfont.svgz#webfont37hojTTp') format('svg'), url('font-files/fanwood_italic-webfont.svg#webfont37hojTTp') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Junction';
	src: url('font-files/Junction-webfont.eot');
	src: local('☺'), url('font-files/Junction-webfont.woff') format('woff'), url('font-files/Junction-webfont.ttf') format('truetype'), url('font-files/Junction-webfont.svgz#webfont37hojTTp') format('svg'), url('font-files/Junction-webfont.svg#webfont37hojTTp') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'League Gothic';
	src: url('font-files/League_Gothic-webfont.eot');
	src: local('☺'), url('font-files/League_Gothic-webfont.woff') format('woff'), url('font-files/League_Gothic-webfont.ttf') format('truetype'), url('font-files/League_Gothic-webfont.svgz#webfont37hojTTp') format('svg'), url('font-files/League_Gothic-webfont.svg#webfont37hojTTp') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo Slab';
	src: url('font-files/Museo_Slab-webfont.eot');
	src: local('☺'), url('font-files/Museo_Slab-webfont.woff') format('woff'), url('font-files/Museo_Slab-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo Slab';
	src: url('font-files/Museo_Slab_Italic-webfont.eot');
	src: local('☺'), url('font-files/Museo_Slab_Italic-webfont.woff') format('woff'), url('font-files/Museo_Slab_Italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Anivers';
	src: url('font-files/Anivers-webfont.eot');
	src: local('☺'), url('font-files/Anivers-webfont.woff') format('woff'), url('font-files/Anivers-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Fertigo';
	src: url('font-files/fertigo-webfont.eot');
	src: local('☺'), url('font-files/fertigo-webfont.woff') format('woff'), url('font-files/fertigo-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
#svg_editor .jPicker .Icon {
    display: inline-block;
    height: 24px;
    position: relative;
    text-align: left;
    width: 25px;
}
#svg_editor .jPicker .Icon span.Color, #svg_editor .jPicker .Icon span.Alpha {
    background-position: 2px 2px;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%}
#svg_editor .jPicker .Icon span.Image {
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%}
#svg_editor .jPicker.Container {
    z-index: 10;
}

table#svg_editor .jPicker {
    width: 545px;
     z-index: 20;
}

#svg_editor .jPicker .Move {
    background-color: #ddd;
    border-color: #fff #666 #666 #fff;
    border-style: solid;
    border-width: 1px;
    cursor: move;
    height: 12px;
    padding: 0;
}
#svg_editor .jPicker .Title {
    display:  none;
}

#svg_editor .jPicker div.Map {
    
  border:  solid #000 1px;
     
  cursor: crosshair;
    
  height: 260px;
    
  margin: 0;
    
  overflow: hidden;
    
  padding: 0;
    
  position: relative;
    
  width: 260px;
    
}
#svg_editor .jPicker div[class="Map"] {
    height: 256px;
    width: 256px;
}
#svg_editor .jPicker div.Bar {
    border:  solid #000 1px;
     cursor: n-resize;
    height: 260px;
    margin: 0 15px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 24px;
}
#svg_editor .jPicker div[class="Bar"] {
    height: 256px;
    width: 20px;
}
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4, #svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
    background-color: transparent;
    background-image: none;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3 {
    height: 2596px;
    width: 256px;
}
#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
    height: 3896px;
    width: 20px;
}
#svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
    height: 256px;
    width: 20px;
}
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Bar .Map6 {
    background-repeat: no-repeat;
}
#svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map5 {
    background-repeat: repeat;
}
#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
    background-repeat: repeat-x;
}
#svg_editor .jPicker .Map .Arrow {
    display: block;
    position: absolute;
}
#svg_editor .jPicker .Bar .Arrow {
    display: block;
    left: 0;
    position: absolute;
}
#svg_editor .jPicker .Preview {
    font-size: 9px;
    text-align: center;
}
#svg_editor .jPicker .Preview div.bgt  {
    height: 62px;
    margin: 0 auto;
    padding: 0;
    width: 62px;
}


#svg_editor .jPicker .Preview div span {
    border: 1px solid #000;
    display: block;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    width: 60px;
}
#svg_editor .jPicker .Preview .Active {
    border-bottom-width: 0;
}
#svg_editor .jPicker .Preview .Current {
    border-top-width: 0;
    cursor: pointer;
}
#svg_editor .jPicker .Button {
    text-align: center;
    width: 115px;
}
#svg_editor .jPicker .Button input {
    width: 100px;
}
#svg_editor .jPicker .Button .Ok {
    margin: 0 0 5px 0;
}
#svg_editor .jPicker td.Radio {
    margin: 0;
    padding: 0;
    width: 31px;
}
#svg_editor .jPicker td.Radio input {
    margin: 0 5px 0 0;
    padding: 0;
}
#svg_editor .jPicker td.Text {
    font-size: 12px!important;
    height: 22px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 70px;
}
#svg_editor .jPicker tr.Hex td.Text {
    width: 100px;
    color: #666;
}

#svg_editor .jPicker tr.Hex td.Text span {
    width: 100px;
    color: #333;
}
#svg_editor .jPicker td.Text input {
    background-color: #fff;
    border: 1px inset #aaa;
    height: 15px;
    margin: 0 0 0 5px;
    text-align: left;
    width: 30px;
    color: #333;
}

#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex {
    width: 50px;
    display: inline-block;
    float: none;
}

#svg_editor .jPicker tr.Hex td.Text input.AHex {
    width: 20px;
    display: none;
}
#svg_editor .jPicker .Grid {
    text-align: center;
    float: right;
    width: 108px;
}
#svg_editor .jPicker .Grid span.QuickColor {
    cursor: pointer;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    margin: 0;
    padding: 0;
    width: 18px;
}
#svg_editor .jPicker td  {
  vertical-align:  top;
}
#svg_editor .jPicker td.colorsquare  {
  width:  275px;
}

#svg_editor .jPicker .prev_div  {
  margin-top:  -15px;
}

#svg_editor .jPicker .actions {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

#svg_editor .jPicker .actions .Ok{
  position: absolute;
  top: 0;
  right: 0px;
}

#svg_editor .jPicker .actions .Cancel{
  position: absolute;
  top: 0;
  left: 0px;
}

#svg_editor .jPicker .color_preview {
  width: 62px;
  margin: 0 auto;
}
/* 
 * jGraduate Default CSS
 * 
 * Copyright (c) 2010 Jeff Schiller
 * http://blog.codedread.com/
 *
 * Copyright (c) 2010 Alexis Deveria
 * http://a.deveria.com/
 *
 * Licensed under the Apache License Version 2
 */

#svg_editor h2.jGraduate_Title {
  display: none;
}

#svg_editor .jGraduate_Picker {
	position: absolute;
	padding: 20px;
}

#svg_editor .jGraduate_tabs li {
	display: inline-block;
	padding: 5px 10px;
	margin-right: 5px;
	cursor: pointer;
}

#svg_editor li.jGraduate_tab_current {
  background: #fff;
  border-radius: 3px 3px 0 0;
}

#svg_editor .jGraduate_colPick {
	display: none;
}

#svg_editor .jGraduate_gradPick {	
	display: none;
	overflow: visible;
/*	position: relative;*/
}

#svg_editor .jGraduate_tabs {
	position: relative;
	background-color: #ddd;
	padding: 10px 10px 0 10px;
	margin: -20px -20px 20px -20px;
	border-radius: 3px 3px 0 0;
}

#svg_editor div.jGraduate_Swatch {
	float: left;
	margin: 0 15px 0 0;
}
#svg_editor div.jGraduate_GradContainer {
	border: solid #000 1px;
	background-image: url(../images/map-opacity.png); 
	background-position: 0px 0px;
	height: 256px;
	width: 256px;
	position: relative;
}

#svg_editor div.jGraduate_GradContainer div.grad_coord {
  background: rgba(0,0,0,0.8);
  border: 2px solid white;
  border-radius: 15px;
  -moz-border-radius: 5px;
  width: 14px;
  height: 14px;
  position: absolute;
  margin: -7px -7px;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 8px;
  line-height: 14px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
}

#svg_editor .jGraduate_AlphaArrows {
	position: absolute;
	margin-top: -10px;
	margin-left: 250.5px;
}

#svg_editor div.jGraduate_Opacity {
	border: 2px inset #eee;
	margin-top: 14px;
	background-color: black;
	background-image: url(../images/Maps.png);
	background-position: 0px -2816px;
	height: 20px;
	cursor: ew-resize;
}

#svg_editor div.jGraduate_StopSlider {
	margin: -10px 0 0 -10px;
	width: 276px;
	overflow: visible;
	background: white;
	height: 45px;
	cursor: pointer;
}

#svg_editor div.jGraduate_StopSection {
	width: 120px;
	float: left;
}

#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod {
  display: none;
}

#svg_editor input.jGraduate_Ok, input.jGraduate_Cancel {
	display: block;
	width: 100px;
}
#svg_editor input.jGraduate_Ok {
	margin: 0 0 5px 0;
}

#svg_editor .colorBox {
	float: left;
	height: 16px;
	width: 16px;
	border: 1px solid #808080;
	cursor: pointer;
	margin: 4px 4px 4px 30px;
}

#svg_editor .colorBox + label {
	float: left;
	margin-top: 7px;
}

#svg_editor label.jGraduate_Form_Heading {

  color: #333;
	padding: 2px;
	font-weight: bold;
	font-size: 13px;
}

#svg_editor div.jGraduate_Form_Section {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 15px 5px 5px 5px;
	margin: 5px 2px;
	width: 100px;
	text-align: center;
	overflow: auto;
	background: #eee;
}

#svg_editor div.jGraduate_Form label {
	padding: 0 2px;
	color: #333;
}

#svg_editor div.jGraduate_StopSection input[type=text],
#svg_editor div.jGraduate_Slider input[type=text] {
	width: 33px;
	color: #333;
}

#svg_editor div.jGraduate_LightBox {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #000;
	opacity: 0.5;
	display: none;
}

#svg_editor div.jGraduate_stopPicker {
  position: absolute;
  display: none;
  background: 
  white;
  padding: 20px;
  border-radius: 3px;
  width: 530px;
  height: 300px;
  box-shadow: 0 5px 25px 
  black;
}


#svg_editor .jGraduate_gradPick {
	width: 526px;
}

#svg_editor .jGraduate_gradPick div.jGraduate_Slider {
	line-height: 160%
}

#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child {
	position: absolute;
	right: 10px;
	top: 0;
	color: #999;
	font-weight: bold;
}

#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
  margin: 0 3px 0 0;
  color: #333;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form {
	float: left;
	width: 270px;
	position: absolute;
	left: 284px;
	width: 266px;
	height: 200px;
	top: 195px;
	margin: -3px 3px 0px 10px;
	line-height: 200%;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form label,
#svg_editor .jGraduate_gradPick .jGraduate_Form input {
  width: auto;
  float: left;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, #svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
width: auto;
float: left;
font-size: 11px;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
  float: none;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form label {
  clear: left;
}

#svg_editor .jGraduate_gradPick .jGraduate_Points {
	position: static;
	float: left;
  margin: 0;
  width: auto;
	}

#svg_editor .jGraduate_Colorblocks {
	display: table;
	border-spacing: 0 5px;
}

#svg_editor .jGraduate_colorblock {
	display: table-row;
}

#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock > * {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	float: none;
}

#svg_editor .jGraduate_gradPick .jGraduate_Form_Section {
	padding-top: 9px;
}


#svg_editor .jGraduate_Slider {
	text-align: center;
	float: left;
	width: 100%;
  position: relative;
  margin: 5px 0;
}

#svg_editor .jGraduate_Slider .jGraduate_Form_Section {
	border: none;
	width: 250px;
	padding: 0 2px;
	overflow: visible;
}


#svg_editor .jGraduate_Slider label.prelabel {
	width: 40px;
	text-align: left;
}

#svg_editor .jGraduate_SliderBar {
	width: 140px;
	float: left;
	margin: 0 5px;
	border:1px solid #BBB;
	height:20px;
	position: relative;
}

#svg_editor div.jGraduate_Slider input {
	margin-top: 5px;
}

#svg_editor div.jGraduate_Slider img {
	top: 0;
	left: 0;
	position: absolute;
	cursor:ew-resize;
}

#svg_editor .jPicker .Button .Ok, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok  {
  margin: 0;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

#svg_editor .jPicker .Button .Cancel, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
  margin: 0;
  position: absolute;
  bottom: 15px;
  left: 15px;
}
/* Comment to prevent wrong concat */

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;
}

.context_panel {
	display: none;
}

#canvas_panel {
	display: block;
}

#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_cursor.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;}

/*
	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 */
}