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

h2.jGraduate_Title {
  display: none;
}

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

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

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

.jGraduate_colPick {
	display: none;
}

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

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

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

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

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

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

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

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

div.jGraduate_StopSection.jGraduate_SpreadMethod {
  display: none;
}

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

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

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

label.jGraduate_Form_Heading {

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

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

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

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

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

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


.jGraduate_gradPick {
	width: 526px;
}

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

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

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

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

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

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

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

.jGraduate_gradPick .jGraduate_Form label {
  clear: left;
}

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

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

.jGraduate_colorblock {
	display: table-row;
}

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

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


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

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


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

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

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

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

.jPicker .Button .Ok, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok  {
  -webkit-appearance: none;
	margin: 0;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
  margin: 0;
  position: absolute;
	bottom: 5px;
	left: 5px;
}
/* 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;
}

 #svgroot {
	-moz-user-select: none;
	-webkit-user-select: none;
	position: absolute;
	top: 0;
	left: 0;
}

 #menu_bar {
  margin: 0 0 0 50px
}

 #menu_bar.active .menu.open .menu_list {
  display: block;
}

 .menu {
  position: relative;
  z-index: 5;
  color: #333;
  display: inline-block;
}

 .menu_title {
  cursor: pointer;
  display: inline-block;
  padding: 7px 10px;
  z-index: 10;
  color: #fff;
  position: relative;
  height: 16px;
  vertical-align: top;
}

.touch   .menu_title { 
	padding: 7px 17px;
	height: 26px;
	line-height: 26px;
}

 .menu .menu_title:hover {
  background: rgba(255,255,255,0.1);
}

 .menu_list .separator {
  margin: 5px 0;
  border-top: solid #ddd 1px;
}

 .menu_list {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  white-space: nowrap;
  background: white;
  padding: 7px 0;
  border-radius: 0 3px 3px 3px;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.touch  .menu_list {
	top: 38px;
}

 #menu_bar.active .menu.open .menu_title {
  background: white;
  color: #333;
}

 .menu_list .menu_item {
  position: relative;
  overflow: hidden;
	line-height: 22px;
	padding: 5px 69px 5px 25px;
	cursor: default;
	color: #333;
}

 .menu_list .menu_item.tool_button {
  background: transparent;
  border: none;
  margin: 0;
  padding: 5px 55px 5px 25px;
  height: auto;
  width: auto;
}

 .menu_list .menu_item.push_button_pressed:before {
  content: '✔';
  position: absolute;
  display: block;
  left: 7px;
  top: 3px;
  width: 20px;
  height: 20px;
}

 .menu_list .menu_item:hover,
 .menu_list .menu_item.push_button_pressed:hover {
	background: rgba(0,0,0,0.1);
	color: #000;
}

 .menu_list .menu_item.disabled:hover,
 .menu_list .menu_item.push_button_pressed.disabled:hover {
	background: transparent;
	color: #333;
}

 .menu_list .menu_item.push_button_pressed {
 background: transparent;
 border: none; 
 width: auto;
 height: auto;
 margin: 0;
}

 .menu_list .menu_item span {
  display: block;
  position: absolute;
  right: 10px;
  padding: 5px;
  background: rgba(0,0,0, 0.1);
  top: 6px;
  height: 10px;
  text-align: center;
  font-size: 10px;
  line-height: 120%;
}

 #svgcanvas {
	line-height: normal;
	display: inline-block;
	background-color: #A0A0A0;
	text-align: center;
	vertical-align: middle;
	width: 640px;
	height: 480px;
	position: relative;
	background: #3F3F3C;
}

#rulers > div {
	position: absolute;
	background: #2f2f2c;
	z-index: 1;
	overflow: hidden;
  -webkit-font-smoothing: none;
}

#rulers #ruler_corner {
	top: 30px;
	left: 50px;
	width: 15px;
	height: 15px;
  border: solid #444 1px;
	z-index: 2;
}

#ruler_x {
	height: 15px;
	top: 30px;
	left: 66px;
	right: 175px;
	border-top: solid #444 1px;
	border-right: solid #444 1px;
}

#ruler_x_cursor {
  height: 15px;
  border-right: dotted #999 1px;
  position: absolute;
  background: #2f2f2c;
}

#ruler_y_cursor {
  width: 15px;
  border-top: dotted #999 1px;
  position: absolute;
  background: #2f2f2c;
}

#rulers.moved #ruler_corner,
#rulers.moved #ruler_x {
	top: 101px;
}

#ruler_y {
	width: 15px;
	top: 46px;
	left: 50px;
	bottom: 40px;
	border-left: solid #444 1px;
	border-bottom: solid #444 1px;
}

#rulers.moved #ruler_y {
	top: 116px;
}


#ruler_x canvas:first-child {
	margin-left: -16px;
}

#ruler_x canvas {
	float: left;
}

#ruler_y canvas {
	margin-top: -16px;
}

#ruler_x > div, 
#ruler_y > div {
	overflow: hidden;
}

 div#palette_holder {
	display: block;
	overflow: hidden;
	height: 31px;
	margin-top: 10px;
	position: relative;
	z-index: 2;
	float: left;
}

.touch  div#palette_holder {
	height: 40px;
	margin-top: 0;
}

 div#palette_holder #palette .palette_item:first-child {
  background: #fff;
}

 div#palette_holder #palette .palette_item {
  cursor: pointer;
}


 #color_tools {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 6px 6px 0 6px;
}

.touch  #color_tools {
	width: auto;
	height: auto;
}

#tool_fill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.touch #tool_fill {
		position: static;
		width: 36px;
		height: 36px;
		margin-bottom: 10px;
}


#tool_fill.active, #tool_stroke.active {
  z-index: 2;
}

#tool_stroke {
	top: 14px;
	left: 14px;
}

.touch #tool_fill.active, .touch #tool_stroke.active {
	outline: 4px solid #09f;
}

#tool_fill, #tool_stroke, #tool_canvas {
  box-shadow: 0 0 0 1px #2f2f2c;
  position: absolute;
}

.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
	position: relative;
	top: 0;
	left: 0;
}

#color_canvas_tools {
	float: left;
	cursor: pointer;
}

#tool_fill .color_block {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: solid #ccc 1px;
}

.touch  #tool_eyedropper {
	margin-top: 6px;
}

.touch #tool_fill .color_block {
  width: 36px;
  height: 36px;
}

.touch #tool_fill .color_block svg {
  width: 36px !important;
  height: 36px !important;
}

.touch  #tool_switch {
	display: none;
} 

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

 #path_node_panel .tool_button img {
	position: absolute;
	left: 5px;
	top: 3px;
}

 #color_tools #tool_fill .color_block:hover,  #color_tools #tool_stroke .color_block:hover {
  border-color: #fff;
}

 #color_tools #tool_fill .color_block > div {
  position: absolute;
  top: 0;
  left: 0;
}

.touch  #color_tools #tool_fill .color_block > div {
	position: relative;
}

 #color_tools #tool_fill .color_block #fill_bg,  #color_tools #tool_stroke .color_block #stroke_bg {
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
  background: #fff;
}

.touch  #color_tools #tool_fill .color_block #fill_bg, .touch  #color_tools #tool_stroke .color_block #stroke_bg {
	width: 36px;
	height: 36px;
	right: auto;
	bottom: auto;
}

.touch #tool_stroke {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}

#stroke_color:after {
  content: '';
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  left: 8px;
  top: 8px;
  background: #ccc;
  box-shadow: 0 0 0 1px #000;
}

.touch #stroke_color:after {
	height: 14px;
   left: 10px;
   position: absolute;
   top: 10px;
   width: 14px;
	 
}

 #color_tools #tool_switch {
  cursor: pointer;
  opacity: 0.7;
  width: 11px;
  height: 11px;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;
  position: absolute;
  top: -2px;
  left: 28px;
}

 #color_tools #cross:hover {
  opacity: 1;
}

 #color_tools #tool_stroke:hover #stroke_color:after {
  background: #fff;
}

 #color_tools #tool_stroke .color_block {
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: solid #ccc 1px;
}

.touch  #color_tools #tool_stroke .color_block {
  width: 36px;
  height: 36px;
}

 #color_tools #tool_stroke .color_block > div {
  position: absolute;
  bottom: 0;
  right: 0;
}

.touch  #color_tools #tool_stroke .color_block > div {
  position: relative;
}



 #color_tools .icon_label {
	padding: 0;
	width: 24px;
	height: 100%;
	cursor: pointer;
	position: absolute;
}

 #linkLabel > svg {
	height: 20px;
	padding-top: 4px;
}

 div#palette {
	float: left;
	height: 16px;
}

 div#workarea {
	display: inline-table-cell;
	position:absolute;
	top: 30px;
	left: 50px;
	bottom: 40px;
	right: 175px;
	background-color: #444;
	overflow: auto;
	text-align: center;
}

.touch  div#workarea {
	top: 40px;
}

 div.palette_item {
	height: 16px;
	width: 16px;
	float: left;
}

.touch  div.palette_item {
	height: 30px;
	border-top: solid #2f2f2c 5px;
	border-bottom: solid #2f2f2c 5px;
	width: 19px;
	float: left;
}

 .menu .menu_list {
  display: none;
  position: absolute;
}

 .tool_button:hover, 
 .push_button:hover,
 .buttonup:hover,
 .buttondown,
 .tool_button_current,
 .push_button_pressed
{
  background-color: #fff;
}

 .tool_button.disabled,
 .tool_button.disabled:hover {
  opacity: 0.3;
  background-color: #aaa;
}

 #tools_left .tool_button { background: #2f2f2c; position: relative;}
 #tools_left .tool_button.loaded { background: #ccc;}
 #tools_left .tool_button.loaded:hover { background: #fff;}
 #tools_left .tool_button:after,  #tools_left .tool_button_current:after {
	position: absolute;
	content: '';
	border: solid #2f2f2c 2px;
	top: -1px;
	left: -1px;
	width: 26px;
	height: 26px;
	z-index: 0;
}

 #tools_left .tool_button_current {
	background-color: #0cf;
}

 #main_icon span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
}

 #tools_top {
	position: absolute;
	width: 160px;
	right: 0;
	top: 20px;
	border-bottom: none;
	overflow: visible;
	padding: 0 0 0 10px;
}

.touch  #tools_top {
	top: 30px;
}

 label {
  display: block;
  color: #999;
}

div#font-selector { 
    width:140px; 
    height:300px; 
    overflow:auto;  
    margin:0 auto; 
    position:absolute; 
    top:27px;
    right:0;
    border:1px solid black; 
    padding:10px; 
    display:none; 
    background-color:white;
    z-index: 10;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.7);
}

div#font-selector img {
  width: 100%;
}

div#font-selector .font-item {
  border-bottom: solid #ddd 1px;
  padding: 5px 10px;
  margin: 0 -10px;
}

div#font-selector .font-item:hover {
  background-color: #eee;
}

 #tools_top #marker_panel * {
  float: left;
}

 #tools_top #marker_panel h4 {
  float: none;
}

 #tools_top #marker_panel .dropdown .icon_label {
  width: 36px;
  height: 20px;
  margin-top: 2px;
  border: solid #3f3f3c 1px;
  text-align: center;
}

 #tools_top #marker_panel .dropdown button {
  margin-top: 2px;
}

 #tools_top #marker_panel #marker_panel_title {
  float: none;
  color: #fff;
  margin-bottom: 3px;
}

 #tools_top #marker_panel .dropdown .icon_label img {
  float: none;
}


 #color_picker input[type=text], #color_picker  input[type=number] {
  width: 30px;
  background: #fff;
}

 .dropdown_set input[type=text],  .dropdown_set input[type=number] {
  width: 50px;
}

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

 input[type=submit],  input[type=button], button {
  background: #4F80FF;
  color: #fff;
  border-radius: 3px;
  padding: 7px 17px;
  border: none;
  line-height: 140%;
	font-size: 14px;
	font-weight: bold;
	font-family: sans-serif;

}

 input[type=submit]:hover,  button:hover {
box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
            inset 0 -3px 10px rgba(0, 0, 0, 0.2);
}

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


 #tools_left {
	position: absolute;
	border-right: none;
	width: 50px;
	top: 30px;
	left: 0;
	background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
	z-index: 4;
}

#workarea.wireframe #svgcontent * {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	stroke-opacity: 1.0;
	stroke-dasharray: 0;
	opacity: 1;
	pointer-events: stroke;
	vector-effect: non-scaling-stroke;
	filter: none;
}

#workarea.wireframe #svgcontent text {
	fill: #000;
	stroke: none;
}

#workarea.wireframe #canvasBackground > rect {
	fill: #FFF !important;
}

#workarea #canvasBackground > rect {
  stroke: transparent !important;
}

.context_panel {
	display: none;
}

#canvas_panel {
	display: block;
}

 #multiselected_panel .selected_tool {
	vertical-align: 12px;
}

#cur_context_panel {
	position: absolute;
  top: 47px;
  left: 68px;
	line-height: 22px;
	overflow: auto;
	border-bottom: none;
	border-right: none;
	padding-left: 5px;
	font-size: 12px;
	background: black;
  color: #999;
  opacity: 0.5;
  padding: 0 10px;
  border-radius: 0 10px 10px 0;
}

 #cur_context_panel a {
	float: none;
	text-decoration: none;
	color: #fff;
}

 #cur_context_panel a:hover {
	text-decoration: underline;
}


 #tools_left .tool_button,
 #tools_left .tool_button_current {
	position: relative;
	z-index: 11;
}

 .flyout_arrow_horiz {
	position: absolute;
	bottom: -1px;
	right: 0;
	z-index: 10;
}

.dropdown {
	position: relative;
	float: left;
}

 .dropdown button {
  width: 21px;
  height: 22px;
  padding: 0 3px 0 3px;
  border: none;
  background-color: #555;
  border-radius: 0 2px 2px 0;
  margin-left: -1px;
  position: relative;
}

 .dropdown button:hover {
  background-color: #666;
}

 .dropdown button:after {
  content: '';
  position: absolute;
  border: solid transparent 4px;
  border-top-color: #999;
  top: 9px;
  left: 6px;
}



.dropdown button.down {
	border-left: 1px solid #808080;
	border-top: 1px solid #808080;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	background-color: #B0B0B0;
}

.dropdown ul {
	list-style: none;
	position: absolute;
	margin: 0;
	padding: 0;
	left: -80px;
	top: 26px;
	z-index: 4;
	display: none;
}

.dropup ul {
	top: auto;
	bottom: 26px;
	border-radius: 3px;
	box-shadow: 0 5px 10px #000;
}

.dropup ul:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -10px;
  right: 50%;
  top: auto;
  width: 0;
  height: 0;
  border: solid transparent 5px;
  border-top-color: #fff;
}

.dropdown li {
	display: block;
	width: 120px;
	padding: 5px 10px;
	color: #333;
	background: #fff;
	margin: 0;
	line-height: 16px;
}

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


.dropdown li:hover {
	background-color: #ddd;
	color: #000;
}

.dropdown li.special {
	padding: 10px;
  background: white;
  border: none;
  box-shadow: 0 3px 10px black;
  border-radius: 3px !important;
}

.dropdown li.special:after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  right: 50%;
  border: solid transparent 5px;
  border-bottom-color: #fff;
  
}

.dropdown li.special.down:after {
  bottom: -10px;
  right: 50%;
  top: auto;
  border: solid transparent 5px;
  border-top-color: #fff;
  
}

 .tool_button, 
 .push_button,
 .tool_button_current,
 .push_button_pressed 
{
	height: 27px;
	width: 27px;
	border: solid #2f2f2c 8px;
	border-left-width: 13px;
	margin: 0;
	background-color: #ddd;
	cursor: pointer;
}

 #main_menu li#tool_open,  #main_menu li#tool_import {
	position: relative;
	overflow: hidden;
}

#tool_image {
	overflow: hidden;
}

#tool_open input, 
#tool_import input,
#tool_image input {
	position: absolute;
	opacity: 0;
	font-size: 10em;
	top: -5px;
	right: -5px;
	margin: 0;
	cursor: pointer; /* Sadly doesn't appear to have an effect */
}

 .disabled {
	opacity: 0.5;
	cursor: default;
}

 .width_label {
	padding-right: 5px;
}

#text {
	position: absolute;
	left: -9999px;
}

 #tool_bold span,  #tool_italic span { 
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	background: #ccc;
	opacity: 0;
}

 #tool_italic {
	font-weight: normal;
	font-style: italic;
}

#url_notice {
	padding-top: 4px;
	display: none;
}

 #color_picker {
	position: absolute;
	display: none;
	background: #fff;
	height: 350px;
	border-radius: 3px;
	z-index: 5;
	box-shadow: 0 5px 10px #000;
	width: 530px;
}

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

 .tools_flyout_v {
	position: absolute;
	display: none;
	cursor: pointer;
	width: 30px;
}

 .tools_flyout .tool_button {
	float: left;
	background-color: #fff;
	height: 24px;
	width: 24px;
}

 #tools_bottom {
	position: absolute;
	left: 50px;
	right: 0;
	bottom: 0;
	height: 40px;
	overflow: visible;
}

 #tools_bottom_1 {
	width: 115px;
	float: left;
}

 #tools_bottom_2 {
	position: relative;
	float: left;
	margin-top: 5px;
}

#tools_bottom input[type=text] {
	width: 3.2em;
}

 #tools_top h4 {
  color: #fff;
  font-weight: normal;
  margin: 0;
  padding: 10px 0 5px 0;
}

#tools_top .dropdown .icon_label {
	border: 1px solid transparent;
/*	margin-top: 3px;*/
	height: auto;
}

#tools_top.multiselected #align_tools {
	display: none;
}

#tools_top.multiselected #multiselected_panel {
	display: block !important;
}

#tools_top.multiselected #multiselected_panel .hidable {
	display: none;
}

 .draginput_cell {
	float: left;
	height: 26px;
	height: 26px;
	border: solid #3f3f3c 10px;
	outline: solid #2f2f2c 1px;
	background: #ddd;
	cursor: pointer;
	position: relative;
}

 .draginput_cell:hover {
	background: #fff;
}

 .draginput_cell:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border: solid #3f3f3c 1px;
	height: 26px;
	width: 26px;
	z-index: 0;
}


 .align_buttons  .draginput_cell:nth-child(1) {border-radius: 3px 0 0 0;}
 .align_buttons  .draginput_cell:nth-child(3) {border-radius: 0 3px 0 0;}
 .align_buttons  .draginput_cell:nth-child(4) {border-radius: 0 0 0 3px;}
 .align_buttons  .draginput_cell:nth-child(6) {border-radius: 0 0 3px 0;}


.align_buttons .push_button {
  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;
}


 #option_lists .tool_button,  #option_lists .push_button,  #option_lists .tool_button_current,  #option_lists .push_button_pressed {
  border: none;
  background: transparent;
}

 #option_lists .tool_button:hover {
  background: #ddd;
}

 #option_lists ul li.current {
	background-color: #F4E284;
}

#option_lists .optcols4 {
	width: 130px;
	margin-left: -44px;
}

#option_lists ul[class^=optcols] li {
	float: left;
}

 ul li.current {
	background-color: #F4E284;
}

 #option_lists ul li {
	margin: 0;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

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

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



 button.cancel,  input.Cancel,  input.cancel,  input.jGraduate_Cancel, button.cancel {
	-webkit-appearance: none;
	background-color: #999;
	box-shadow: 0 0 1px rgba(0,0,0,0.5);
	margin: 0;
}


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

 .tools_flyout .tool_button,
 .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', 'Lucida Grande', 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);
}

.touch .contextMenu {
	border: solid 5px rgba(0,0,0,.7);
	padding: 0;
	margin: 0 0 0 20px;
	font: 18px/24px sans-serif;
	border-radius: 5px;
	-webkit-box-shadow: 2px 5px 20px 3px #000;
	box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
}

.touch .contextMenu:after {
	content: '';
	width: 0;
	height: 0;
	border: solid transparent 10px;
	border-right-color: rgba(0,0,0,.7);
	position: absolute;
	top: 50%;
	left: -25px;
	margin-top: -10px;
	z-index: 1000;
}

.contextMenu LI {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.contextMenu .shortcut {
	width: 115px;           
	text-align:right;
	float:right;
}

.touch .contextMenu .shortcut {
	display: none;
}


.touch .shortcut {
	display: none;
}


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

.touch .contextMenu A {
	padding: 0 15px;
	border-bottom: #;
	font-weight: bold;
	border-top: solid 1px #E3E3E3;
	height: 40px;
	line-height: 40px;
	min-width: 200px;
}

.contextMenu LI.hover A {
	background-color: #2e5dea;
	color: white;
	cursor: default;
}

.contextMenu LI.disabled A {
	color: #999;

}

.touch .contextMenu LI.disabled A {
	display: none;
}

.contextMenu LI.hover.disabled A {
	background-color: transparent;
}

.contextMenu LI.separator {
	border-top: solid 1px #E3E3E3;
	padding-top: 5px;
	margin-top: 5px;
}

.touch .contextMenu LI.separator {
	border-top: none;
	margin: 0;
	padding: 0;
}

#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) 0 16, crosshair;
}

#workarea.fhpath {
  cursor: url(images/pencil_cursor.png) 0 20, crosshair;
}

#workarea.rotate * {
  cursor: url(images/rotate.png) 12 12, auto;
}

#workarea.select text, #workarea.multiselect text {
	cursor: default;
}

#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.copy {
	cursor: copy;
}

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


 #group_title {display: none;}

#base_unit_container {
	display: none;
	position: absolute;
	z-index: 20;
}

 .draginput {
  background: #3f3f3c;
  border-radius: 3px;
  -webkit-font-smoothing: antialiased;
  width: 70px;
  height: 70px;
  display: block;
  position: relative;
  float: left;
  margin: 0 5px 5px 0;
}

 .draginput .caret {
  border: solid transparent 5px;
  border-top-color: #999;
  position: absolute;
  width: 0;
	height: 0;
	right: 5px;
	margin-top: -2px;
	top: 50%;
}

 .draginput label {
	margin: 28px 10px 0 5px;
	font-size: 14px;
	color: white;
	font-weight: bold;
	font-family: sans-serif;
}

 .draginput label#resolution_label,  .draginput label#seg_type_label {
	font: bold 12px/110% sans-serif;
	position: absolute;
	left: auto;
	right: 10px;
	z-index: 0;
	text-align: right;
}

  .draginput label#seg_type_label {
	margin-top: 40px;
}

  .draginput label#seg_type_label .caret {
	top: 66%;
}

 .draginput label#resolution_label .pull {
	position: relative;
	left: -15px;
}

 .draginput label#resolution_label span {
	right: -13px;
	left: auto;
	font-size: 16px;
	top: 2px;
	font-weight: bold;
	color: white;
}

.touch  .draginput.active:after {
	content: attr(data-value);
	display: block;
	position: absolute;
	background: #fff;
	font-size: 16px;
	top: 0;
	width: 30px;
	left: -50px;
	padding: 0 5px;
	color: #333;
	z-index: 10;
	font-family: sans-serif;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
	height: 20px;
	line-height: 20px;
	letter-spacing: -1px;
}

.touch  .draginput.active:before {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	top: 5px;
	left: -5px;
	border: solid transparent 5px;
	border-left-color: #fff;
}

 .draginput input {
  border: none;
  background: transparent;
  font: 24px/normal sans-serif;
  text-align: center;
  color: #4F80FF;
  padding: 30px 0 16px;
  width: 100%;
  height: 24px;
	position: relative;
	z-index: 2;
}

.draginput.twocol {
	width: 145px;
}

#tool_font_family .caret {
	right: 40px;
	top: 55%;
}

#tool_font_family select {
	width: 110px;
}


 #tool_bold,   #tool_italic { 
	font: bold 20px/35px serif;
	text-align: center;
	position: absolute;
	padding: 0 0 0 0;
	color: #ccc;
	background: transparent;
	border: none;
	width: 35px;
	height: 35px;
	margin: 0;
	top: 0;
	right: 0;
}

#tool_italic {
	border-top: solid #2f2f2c 2px;
	top: 35px;
}


 #tool_bold:hover,   #tool_italic:hover {
  color: #fff;
}

 #tool_bold.active,   #tool_italic.active {
  color: #50A0FF;
}

#preview_font {
	font-size: 20px;
	color: #fff;
	height: 70px;
	line-height: 75px;
	padding: 0 0 0 10px;
	white-space: nowrap;
	width: 100px;
	overflow: hidden;
	border-right: solid #2f2f2c 2px;
	position: relative;
}

#preview_font:after {
	content: '';
	position: absolute;
	right: 0;
	top: 3px;
	bottom: 3px;
	width: 15px;
	border-right: solid #3f3f3c 10px;
	background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
}


.draginput input, .draginput input:hover, .draginput input:active {  
	  cursor: url(images/drag.png), move;
	  cursor: -webkit-grab;
		cursor: -moz-grab;
}

.draginput.active input, .draginput.active input:hover, .draginput.active input:active {  
	  cursor: url(images/dragging.png), move;
	  cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
}



 .draginput span {
  font: 11px/130% sans-serif;
  color: #ccc;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  text-align: left;
}

 .draginput.error {
	background: #900;
}

 .draginput.error input {
	color: #fff;
}

 .draginput.stroke_tool {
	text-align: center;
}

 .draginput select {
	-webkit-appearance: none;
	opacity: 0;
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	margin: 0;
	z-index: 1;
	top: 0;
	left: 0;	
}


.draginput_cursor{
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: solid rgba(50,100,200,0.25) 3px;
	margin-top: -2px;
	z-index: 0;
}

 .draginput input[readonly=readonly] {
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


 .draginput input:focus {
	background: #50A0FF;
	color: #fff;
	outline: none;
	box-shadow: 0 0 5px 2px #50A0FF;
}

 .draginput input:focus+span {
	z-index: 10;
	color:#fff;
}

.draginput .push_bottom {
	bottom: 0;
	position: absolute;
}

#zoom_label {
	height: 20px;
	background: transparent;
	cursor: default !important;
	width: auto;
	padding: 0 10px;
	margin: 0;
}

#zoom_panel {
	padding: 9px 0;
	right: 175px;
  position: absolute;
}

#zoom_label img {
	width: 16px;
	height: 16px;
}

#zoomLabel {
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: #ccc;
}

#zoomLabel:after {
	content: '';
	position: absolute;
	border-left: solid #2f2f2c 1px;
	left: 0;
	height: 16px;
}

#zoom_label input {
	color: #ccc;
	font-size: 13px;
	height: auto;
	width: auto;
	padding: 0;
	cursor: default;
	position: static;
}

#zoom_label span {
	top: 0;
	left: 0;
}

body.dragging * {
	cursor: url(images/dragging.png), move;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

body.drag * {
	cursor: url(images/dragging.png), move;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

input[readonly=readonly]:focus {
	box-shadow: none;
}

#color_canvas_tools {
	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
	width: 60px;
	height: 40px;
	margin: 23px 5px 5px 5px;
	position: relative;
	overflow: hidden;
}

#color_canvas_tools  {
	display: block;
}


#tool_angle_indicator {
	width: 				 50px;
	height: 			 50px;
	border-radius: 50px;
	background: rgba(255,255,255,0.05);
	position: absolute;
	bottom: 2px;
	left: 10px;
}

#tool_angle_indicator_cursor {
	width: 				 4px;
	height: 			 25px;
	border-top: solid #50A0FF 3px;
	position: absolute;
	margin: 0 0 0 23px;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

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

	background: transparent url('spinner.svg') right top no-repeat;
	background-size: 17px 54px;
}

INPUT.spin-button.up {					/* Change button img when mouse is over the UP-arrow */
	cursor:pointer;
	background-position:100% -20px;		/* 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% -40px;		/* 36px matches height of 2x2 visible buttons */
}