body {  overflow: hidden; width: 100%; height: 100%; FONT-SIZE: 12px; ; margin: 0; padding:0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", helvetica, arial; }


ul,li {
	padding:0;
	margin:0;
}


a { color: #ffee00 }
a:hover { color: #ee1155 }
br { CLEAR: both; }
img { border: 0; }
/*
.ads { position: fixed; top: 640px; width: 100%; font-size: 14px; left: 0; color: #333; text-align: center; }
*/
/* GUI */

.gui { opacity: 0; display: none; cursor: move; position: absolute; top: 0; left: 0; z-index: 10; }
.gui .TL { background: url('../media/gui/win_LT.png'); width: 16px; height: 26px; float: left; }
.gui .TM { background: url('../media/gui/win_MT.png'); width: 75px; height: 20px; float: left; text-align: left; padding-top: 6px; color: #000; font-size: 13px; font-variant: small-caps;  }
.gui .TML { float: left; z-index: 10; position: absolute; padding: 1px 0 0 0px; }
.gui .TRx { float: right; position: relative; top: 2px; left: 1px; }
.gui .TRx img { float: left; margin: 0; padding: 0 0 0 6px; height: 12px; width: 12px; position: relative; top: 1px; opacity: 0.5; cursor: pointer }
.gui .TRx img:hover { opacity: 1; }
.gui .TRx div { width: 1px; background: #1a1a1a; height: 13px; float: left; margin: 1px 0 0 0; opacity: 0.5; display: none; }
.gui .TR { background: url('../media/gui/win_RT.png'); width: 16px; height: 26px; float: left; }
.gui .ML { background: url('../media/gui/win_LM.png'); float: left; width: 16px; height: 257px; }
.gui .MM { background: url('../media/gui/win_MM.png'); float: left; width: 75px; cursor: default; }
.gui .MR { background: url('../media/gui/win_RM.png'); float: left; width: 16px; height: 257px; }
.gui .BL { background: url('../media/gui/win_LB.png') 0 -22px; float: left; width: 16px; height: 20px; }
.gui .BM { background: url('../media/gui/win_MB.png') 0 -22px; float: left; width: 75px; height: 20px; }
.gui .BR { background: url('../media/gui/win_RB.png') -16px -22px; float: left; width: 16px; height: 20px; }

.check { float: left; width: 50%; margin-bottom: 12px; padding-bottom: 10px;  }
.check div { background: url('../media/gui/check_off.png') 0 2px no-repeat; color: #000; padding-left: 17px; margin-right: 5px; height: 15px; cursor: pointer; float: left; opacity: 0.75; }
.check div.cur { background-image: url('../media/gui/check_on.png'); opacity: 1; }

.radio { float: left; width: 50%; padding-bottom: 10px; margin-bottom: 10px; }
.radio div { background: url('../media/gui/radio_off.png') 0 2px no-repeat; color: #000; padding-left: 17px; margin: 2px 5px 0 0; height: 15px; cursor: pointer; float: left; opacity: 0.75; }
.radio div.cur { background-image: url('../media/gui/radio_on.png'); opacity: 1; cursor: default; }

.slideXX { position: absolute;-moz-user-select: none; -khtml-user-select: none; user-select: none;  }
.slideXX .slide_center { background: url('../media/gui/range_select.png') 0 4px repeat-x; }
.slideXX div div { float: left; position: absolute; top: 17px; width: 7px; }
.slideXX div div._min { background: url('../media/gui/range_az.png') 0 -20px; }
.slideXX div div._max { background: url('../media/gui/range_az.png') 0 2px; }
.slideXX:active .slide_center { background-position: 0 4px; }

.slideXX .u { float: left; position: relative; left: 13px; top: 0; color: #000; padding: 0 1px 0 2px; }
.slideXX .v, .slideX .v { float:left; position: relative; left: 13px; top: 0; color: #000; }

.slideX { -moz-user-select: none; -khtml-user-select: none; user-select: none;  }

.slide_div { BACKGROUND: url('../media/gui/range_bar.png') 3px 4px no-repeat; CURSOR: crosshair; HEIGHT: 16px; width: 120px; opacity: 0.8; margin-bottom: 8px; float: left;  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
.slide_div div { BACKGROUND: url('../media/gui/range_cur.png'); HEIGHT: 13px; LEFT: 0; POSITION: relative; TOP: 2px; width: 13px; opacity: 0.88; }
.slide_div:active div { background-position: 0 15px; }
.slide_div:hover, .slideX:active, .slideX div:hover, .slideX:active div { opacity: 1; }

.slideY { background: url('../media/gui/slideYbg.png') repeat-y; top: 25px; height: 105px; left: 216px; width: 14px; position: absolute; float: left; cursor: crosshair; }
.slideY span { background: url('../media/gui/slideYbg-round.png') no-repeat; width: 14px; height: 6px; display:block; position:absolute; }
.slideY span.rT { background-position: left -6px; top: -6px; }
.slideY div.slider { opacity: .7; filter:alpha(opacity=70); MozOpacity:.7; KhtmlOpacity:.7; background: url('../media/gui/slideY.png') repeat-y; width: 14px; position: absolute; top: 0; cursor: crosshair; }
.slideY div.slider div { background: url('../media/gui/slideY-round.png') no-repeat; width: 14px; height: 6px; position:absolute; }
.slideY div.slider div.rT { background-position: left -6px; top:-6px; }
.slideY:active div { background-position: 0 9px; opacity: 1; filter:alpha(opacity=100); MozOpacity:1; KhtmlOpacity:1; }

.menuWrap { width: 162px; height:19px; font: 11px/10px arial, helvetica, san-serif; text-align:left; color: #000; margin-top:1px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
.menuWrap .t .l { background: url("../media/gui/menuwrap-rnd.png") no-repeat -3px -3px; float:left; width: 3px; height: 3px; }
.menuWrap .t .c { background: #eee; height:3px; width: 156px; float:left; }
.menuWrap .t .r { background: url("../media/gui/menuwrap-rnd.png") no-repeat 0 -3px; float:right; width: 3px; height: 3px; }
.menuWrap .b { clear:both; }
.menuWrap .b .l { background: url("../media/gui/menuwrap-rnd.png") no-repeat -3px 0; float:left; width: 3px; height: 3px; }
.menuWrap .b .c { background: #eee url("../media/gui/menubg.png") repeat-x left -12px; height:3px; width: 156px; float:left; }
.menuWrap .b .r { background: url("../media/gui/menuwrap-rnd.png") no-repeat; float:right; width: 3px; height: 3px; }

.menuBox { clear:both; background: #9d9d9d url("../media/gui/menubg.png") repeat-x; position: relative; height: 13px; overflow:hidden; }
.menuBox ul {list-style:none; padding:0; margin:0; position:absolute; width: 100%; z-index:10; }
.menuBox ul li { padding: 3px 0 4px 7px; cursor: pointer; position:relative; top:-3px; }
.menuBox ul li.sel { background: url("../media/gui/menu-arrows.png") no-repeat right 4px; }
.menuBox ul.opened li { background: #eee; padding: 3px 0 4px 20px; cursor: pointer; border-bottom: 1px solid #d6d6d6; border-top: 1px solid #000; }
.menuBox ul.opened li.sel { background: #eee url("../media/gui/menuchk.png") no-repeat 5px 2px; }
.menuBox ul.opened li:HOVER { background: #284ef4; border-bottom-color: #0d36e6; border-top-color: #284ef4; color: #000; }
.menuBox ul.opened li.sel:HOVER { background: #284ef4 url("../media/gui/menuchk-dark.png") no-repeat 5px 3px; }
.menuBox ul li.top,
.menuBox ul li.top:HOVER { padding:0; border:0; border-bottom:1px solid #eee; }
.menuBox ul.opened li.top { cursor: default; padding:0; width: 100%; background: none; height: 3px; }
.menuBox ul.opened li.top .l { background: url("../media/gui/menurnd.png") no-repeat -3px -10px; float:left; width: 3px; height: 3px; }
.menuBox ul.opened li.top .c { background: #eee; height:3px; width: 156px; float:left; }
.menuBox ul.opened li.top .r { background: url("../media/gui/menurnd.png") no-repeat 0 -10px; float:right; width: 3px; height: 3px; }
.menuBox ul li.bottom { height:0; border:0; }
.menuBox ul.opened li.bottom { cursor: default; padding:0; width: 100%; background: none; height: 7px; }
.menuBox ul.opened li.bottom .l { background: url("../media/gui/menurnd.png") no-repeat -3px 0; float:left; width: 3px; height: 8px; }
.menuBox ul.opened li.bottom .c { background: url("../media/gui/menu-shadow.png") repeat-x; height:10px; width: 156px; float:left; }
.menuBox ul.opened li.bottom .r { background: url("../media/gui/menurnd.png") no-repeat; float:right; width: 3px; height: 8px; }


#canvas { position: absolute; z-index: 2; }
#canvas {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#canvas .TM, #canvas .MM, #canvas .BM { width: 801px; }
#canvas .ML, #canvas .MM, #canvas .MR { height: 600px; }
#canvas .MM canvas { position: absolute; }
#canvas .MM img { position: absolute; }
#canvas .BR { cursor: se-resize; }
#canvas .center { margin-top: 3px; text-align: center; color: #bbb; width: 100%; }
#canvas .center span { font-size: 10px; white-space: no-wrap; width: 0; }
#canvas .east { font-size: 10px; position: relative; top: -11px; color: #aaa; float: right }
#cHistory, #ctx_eraser, #ctx_glyph, #ctx_picker, #cSRCfill, #cSRCstroke, #ctx_mouse, #cPT { display: none; }

#mcover { position: absolute; z-index: 1; background-image: url('../media/gui/bodyBg.png');color: #fff; overflow: hidden; top: 32px; left: 0px; visibility: true;width: 100%;}
#window-world { position: absolute; z-index: -1; background-image: url('../media/gui/bodyBg.png');color: #fff; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; visibility: true;}


/* PATTERN */

#pattern { overflow:hidden;  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#pattern .bounds { width: 216px; }
#pattern .TM, #pattern .MM, #pattern .BM { width: 180px }
#pattern .ML, #pattern .MM, #pattern .MR { height: 179px }
#pattern .small { font-size: 10px; top: -3px; }
#pPos { position: absolute; top: 35px; left: 25px; font-weight: bold; font-size: 14px; width: 27px; z-index: 1; color: #fff; text-align: center; display: none; }
#pPos span { position: relative; left: 1px; }
#cPT1 { cursor: crosshair; border: 1px solid #000; position: relative; left: 4px; top: 5px; }
#cPT2 { cursor: crosshair; opacity: 1; border: 1px solid #000; position: absolute; left: 20px; top: 31px; }

/* GRADIENT */

#gradient {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#gradient .bounds { width: 216px; }
#gradient .TM, #gradient .MM, #gradient .BM { width: 180px }
#gradient .ML, #gradient .MM, #gradient .MR { height: 190px }
#gradient #gAngle { left: 31px; top: 111px; }
#gradient .z:hover #gDot { opacity: 1 }
#gradient .z:hover #cGD2 { opacity: 1 }
#gradient .small { font-size: 10px; top: -3px; }
#cGD1 { cursor: crosshair; border: 1px solid #000; position: relative; left: 4px; top: 5px; }
#cGD2 { cursor: crosshair; opacity: 1; border: 1px solid #000; position: absolute; left: 20px; top: 31px; }
#gradient .slide_x { cursor: pointer; height: 16px; width: 169px; position: relative; top: 169px; left: 4px; }
#gradient .slide_x:hover { cursor: pointer; }
#gradient .slide_x:active { cursor: crosshair; }
#gradient .slide_x canvas { position: relative; top: 2px; left: 2px; }
#gradient .slide_x div { background: url('../media/gui/gd_cur.gif'); height: 17px; width: 11px; position: absolute; cursor: crosshair; }
#gradient .slide_x div.cur { background: url('../media/gui/gd_cur.gif') 0 17px; }
#gradient .slide_x div:hover { background: url('../media/gui/gd_cur.gif') 0 17px; }
#gPos { position: absolute; top: 35px; left: 25px; font-weight: bold; font-size: 14px; width: 27px; z-index: 1; color: #fff; text-align: center; display: none; }
#gPos span { position: relative; left: 1px; }
.blue_slide { height: 100px; width: 30px; position: absolute; left: 90px; top: 67px; z-index: 3; cursor: crosshair; }
.blue_dot { background: url('../media/gui/blue_dot.png'); opacity: 1; width: 14px; height: 14px; position: absolute; z-index: 1; left: 9px; top: -5px; cursor: crosshair; }


/* SWATCH */

#swatch .bounds { width:216px; }
#swatch .TM, #swatch .MM, #swatch .BM { width: 180px }
#swatch .ML, #swatch .MM, #swatch .MR { height: 238px }
#swatch .MM img { position: relative; top: 5px; left: -5px; }
#swatch .menu { background: #111; color: #000; padding: 3px 12px 3px 8px; font-size: 10px; height: 11px; width: 176px; position: relative; left: -8px; border-bottom: 1px solid #090909; border-top: 1px solid #171717; }
#swatch .menu:hover { background: #141414; border-bottom: 1px solid #0e0e0e; color: #000; cursor: pointer; }
#swatch .menu:active { color: #000 }
#swatch .menu div { float: left }
#swatch .menu span.east { float: right; position: relative; top: -6px; left: 9px }
#swatch .menu img.remove { padding: 4px 0; }
#swatch .menu img { opacity: 0.5; top: 7px; position: relative; cursor: pointer; width: 10px; }
#swatch .menu img:hover { opacity: 1; }
#swatch .squares { margin: 5px 5px 20px; top: 20px; overflow: hidden; float: left; position: relative; left: -7px;  }
#swatch .CO:hover .slideY div { opacity: 1; }
#swatch .GD:hover .slideY div { opacity: 1; }
#swatch .PT:hover .slideY div { opacity: 1; }

/* SOLID */

#swatch.solid .bounds { width: 216px; }
#swatch.solid .TM, #swatch.solid .BM { width: 180px }
#swatch.solid .ML, #swatch.solid .MR { height: 336px; }
#swatch.solid .TML { cursor: move; padding-top: 2px; font-size: 12px; }
#swatch.solid .TML:active { cursor: move; }
#swatch.solid .MM { position: relative; color: #000; width: 180px; height: 336px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#swatch.solid .z canvas { cursor: crosshair; position: relative; border: 1px solid #1f1f1f; left: 5px; float: left; display: inline; margin-top: 10px }
#swatch.solid .z div { display: inline; }
#swatch.solid .z div div { position: absolute; left: 20px }
#swatch.solid .z div .east { position: relative; float: right; top: 14px; left: -3px; font-size: 11px; color: #000; display: inline; cursor: text; }
#swatch.solid .z div .west { width: 10px; position: relative; float: left; top: 14px; font-size: 12px; color: #000; left: 6px; letter-spacing: 0.035em; display: inline; }
#swatch.solid .z div:hover .west, #swatch.solid .z div:hover .east { color: #000; }
#swatch.solid .z div:active .west, #swatch.solid .z div:active .east { color: #000; font-weight: bold }
#swatch.solid .z div.cur { background: url('../media/gui/miniCurr.gif'); opacity: 0.75; width: 9px; height: 9px; display: inline; position: relative; top: 15px; cursor: crosshair; z-index: 1; float: left; border: 0; padding: 0; margin: 0 0 0 3px;  }
#swatch.solid .z div:hover .cur, #swatch.solid .MM div:active .cur { opacity: 1; }
#swatch.solid .loupe { position: absolute; top: 4px; left: 47px; z-index: 2 }

#options .menu { background: #111; color: #000; padding: 3px 12px 3px 8px; font-size: 10px; height: 11px; width: 176px; position: relative; left: -8px; border-bottom: 1px solid #090909; border-top: 1px solid #171717; }
#options .menu:hover { background: #141414; border-bottom: 1px solid #0e0e0e; color: #000; cursor: pointer; }
#options .menu:active { color: #000 }
#options .menu div { float: left }
#options .menu span.east { float: right; position: relative; top: -6px; left: 9px }
#options .menu img.remove { padding: 4px 0; }
#options .menu img { opacity: 0.5; top: 7px; position: relative; cursor: pointer; width: 10px; }
#options .menu img:hover { opacity: 1; }
#options .squares { margin: 5px 5px 20px; top: 20px; overflow: hidden; float: left; position: relative; left: -7px;  }
#options .CO:hover .slideY div { opacity: 1; }
#options .GD:hover .slideY div { opacity: 1; }
#options .PT:hover .slideY div { opacity: 1; }


/* TOOLS */

#tools {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#tools .bounds { width: 108px; }
#tools .TM, #tools .MM, #tools .BM { width: 72px }
#tools .ML, #tools .MM, #tools .MR { height: 265px }
#tools .MM .tools div { background: #2b2b2b; background-position: 5px 5px; background-repeat: no-repeat; border: 1px solid #2f2f2f; width: 26px; height: 26px; float: left; margin: 4px 4px; cursor: pointer; }
#tools .MM .tools div:hover { background: #2a2a2a; background-position: 5px 5px; background-repeat: no-repeat; }
#tools .MM div.hr { margin: 0; margin: 3px 0 2px; background: #252525; height: 1px; border: 0; width: 100%; }
#tools .MM div.disabled { opacity: 0.35; cursor: default; }
#tools .MM div { position: relative; }
#tools .MM img { padding: 5px; position: absolute; display: none }
#tools .globalStyles { color: #444; width: 60px; height: 50px; position: relative; left: 8px; top: 5px; }
#tools .globalStyles div { WIDTH: 36px; FONT-SIZE: 1px; LINE-HEIGHT: 0; }
#tools .globalStyles span { cursor: pointer; color: #666; display: inline; font-variant: small-caps; position: relative; }
#tools .globalStyles span:hover { color: #de83ad; }
#tools .globalStyles span.cur { color: #999; }
#tools .globalStyles img { height: 15px; margin: 10px 6px 0 9px; display: none; }
#tools .fill { border: 1px solid #000; position: relative; z-index: 1; }
#tools .stroke { border: 1px solid #000; position: relative; top: -14px; left: 18px; cursor: pointer; }
#tools .stroke img { position: relative; padding: 0; left: -26px; top: 3px; opacity: 0.75; cursor: pointer; }
#tools .stroke div { background: #000; border: 1px solid #FFF; height: 7px; width: 12px; padding: 1px; position: absolute; top: 7px; left: 10px; }
#tools .stroke div div { background: #FFF; height: 7px; width: 12px; padding: 0; border: 0; top: 1px; left: 1px; }
#tools #swap { position: relative; top: 6px; left: 42px; color: #d8d8d8; font-size: 11px; cursor: default; }
#tools .plus { left: 16px; top: 16px; position: absolute; width: 6px; opacity: 0.5; }


canvas#fill, canvas#stroke { HEIGHT: 23px; WIDTH: 34px; CURSOR: pointer; BORDER: 1px solid #d8d8d8; }

#picker1x1 { position: absolute; left: 181px; top: 88px; border: 1px solid #111; }

.picker div { font-size: 11px; line-height: 1.2em; margin-right: 3px; float: left; color: #555; position: relative; top: -2px }
.picker div#picker_hex { color: #888; position: relative; left: 2px; top: -2px; }

/* EFFECTS */
#effects {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#effects .bounds { width: 190px; }
#effects .TM, #effects .MM, #effects .BM { width: 154px }
#effects .ML, #effects .MM, #effects .MR { height: 330px }
#effects .MM .effects div { background: #2b2b2b; background-position: 5px 5px; background-repeat: no-repeat; border: 1px solid #2f2f2f; width: 26px; height: 26px; float: left; margin: 4px 4px; cursor: pointer; }
#effects .MM .effects div:hover { background: #2a2a2a; background-position: 5px 5px; background-repeat: no-repeat; }
#effects .MM div.hr { margin: 0; margin: 3px 0 2px; background: #252525; height: 1px; border: 0; width: 100%; }
#effects .MM div.disabled { opacity: 0.35; cursor: default; }
#effects .MM div { position: relative; }
#effects .MM img { padding: 5px; position: absolute; display: none }
#effects .ss { color: #444; width: 60px; height: 50px; position: relative; left: 8px; top: 5px; }
#effects .ss div { WIDTH: 36px; FONT-SIZE: 1px; LINE-HEIGHT: 0; }
#effects .fill { border: 1px solid #000; position: relative; z-index: 1; }
#effects .stroke { border: 1px solid #000; position: relative; top: -14px; left: 18px; cursor: pointer; }
#effects .stroke img { position: absolute; padding: 0; left: -17px; top: 11px; opacity: 0.75; cursor: pointer; }
#effects .stroke div { background: #000; border: 1px solid #FFF; height: 7px; width: 12px; padding: 1px; position: absolute; top: 7px; left: 10px; }
#effects .stroke div div { background: #FFF; height: 7px; width: 12px; padding: 0; border: 0; top: 1px; left: 1px; }
#effects #swap { position: relative; top: 6px; left: 42px; color: #d8d8d8; font-size: 11px; cursor: default; }
#effects .plus { left: 16px; top: 16px; position: absolute; width: 6px; opacity: 0.5; }





/* HISTORY */

#history .bounds { width: 246px; }
#history .TM, #history .MM, #history .BM { width: 210px }
#history .ML, #history .MM, #history .MR { height: 147px }
#history .z div div div { height: 16px; width: 16px; margin: 0 5px; position: relative; top: -1px; }
#history .z div div { padding: 0; border: 0; background: none; position: relative; top: 0px; }
#history .z div div:hover { background: none; }
#history .z div { border-top: 1px solid #333; border-bottom: 1px solid #797979; height: 13px; padding: 3px 0; display: block; cursor: pointer; }
#history .z div:hover { background: #888 }
#history .z { width: 195px; position: relative; }
#history .z div span { float: right; position: relative; left: -10px }
#history .z div.discard { background: rgba(255,255,255,0.42); color: #111; font-style: italic; opacity: 0.62; }
#history .z div.keep { background: rgba(255,255,255,0.42); color: #090909; }
#history .z div.cur { border-bottom: 1px solid #808080; background: rgba(255,255,255,0.55); color: #090909; font-weight: bold; }
#history .MM { overflow: hidden; }
#history .MM #hiKontrol { display: none }


/* OPEN */

#openTK, #openTKi, #openTKt { -moz-user-select: text; -khtml-user-select: text; user-select: text; }

#filewindow {  -moz-user-select: text; -khtml-user-select: text; user-select: text; }
#filewindow input { -moz-user-select: text; -khtml-user-select: text; user-select: text; }
#filewindow textarea { -moz-user-select: text; -khtml-user-select: text; user-select: text; }
#filewindow .bounds { width:216px; color: white; }
#filewindow .TM, #filewindow .MM, #filewindow .BM { width: 180px; }
#filewindow .ML, #filewindow .MM, #filewindow .MR { height: 240px }

/* BACKGROUND */

#background {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#background .bounds { width:216px; color: white; }
#background .TM, #background .MM, #background .BM { width: 180px; }
#background .ML, #background .MM, #background .MR { height: 240px }



/* PROPERTIES */

#options .bounds { width: 216px; }
#options .TM, #options .MM, #options .BM { width: 180px }
#options .ML, #options .MM, #options .MR { height: 408px }
#options .MM { font-size: 1.1em; color: #000; font-variant: small-caps; }
#options .MM table { padding: 7px 0 0 }
#options .MM span { border-bottom: 1px solid #2f2f2f; color: #000; position: relative; top: -4px; }
#options .MM .slideY span { position: absolute; border:0; }
#options .MM > div:first-child { padding: 8px 0; }
#options .TRx { color: #aaa; cursor: move; }
#options #picker { position: absolute; top: 4px; left: 36px; z-index: 1; }
#options .loupe { position: absolute; top: 4px; left: 47px; z-index: 2 }

#options #stamp { height: 125px; position: relative; top: -4px; left: -3px; }
#options #toKontrol { top: 46px; left: 184px; width: 14px; height: 160px }
#options #stamp Preferences.load { background: #000 url('../media/gui/load.gif') center no-repeat; }
#options .slideY span.rT { top:-6px; }
#options .slideY span.rB { border:0; }

#toolPreview { cursor: crosshair; position: absolute; left: 5px; }
#toolPreviewOverlay { cursor: crosshair; opacity: 1;  position: absolute; left: 5px; }
#toolPreviewPosition { position: absolute; top: 5px; left: 10px; font-weight: bold; font-size: 14px; width: 27px; z-index: 1; color: #000; text-align: center; display: none; }
#toolPreviewAngle { left: 15px; top: 78px; }

.blueSlider { height: 100px; width: 30px; position: absolute; left: 73px; top: 40px; z-index: 3; cursor: crosshair; }
.blueDot { background: url('../media/gui/blue_dot.png'); opacity: 1; width: 14px; height: 14px; position: absolute; z-index: 1; left: 9px; top: -5px; cursor: crosshair; }

#brush_author { position: relative; border: 0 }
#brush_author div { padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid #333; position: relative; top: -5px; }
#brush_author i { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#brush_author a { color: #999;  }
#brush_author a:hover { color: #de83ad }

.author { font-variant: small-caps; font-size: 12px; height: 21px; color: #999; margin-bottom:1px; padding-top: 4px }
.author a { color: #bbb; position: relative; z-index: 1000 }
.author a:hover { color: #de83ad }

/* XTRA */

.button { cursor: pointer; border: 1px solid #444; background: #333; padding: 1px 5px; }
.button:hover { background: #222; color: #de83ad }

#TEST { width: 480px; left: 22.4%; color: #fff; position: absolute; z-index: 100; top: 10px; }
#TEST div { display: inline; padding: 2px 6px 3px; margin-right: 2px; border: 1px solid #bbb; cursor: pointer; background: #eee; }
#TEST div:hover { background: #fff; border: 1px solid #aaa; color: #A6197B; }
#TEST span { display: inline; padding-right: 2px; color: #999; }
#TEST textarea { width: 680px; height: 80px; padding: 7px; position: relative; background: #000; border: 0; display: ; overflow: hidden; color: #555; }


[contenteditable]:hover {
  outline: 2px dotted lightgreen;
}
[contenteditable]:focus {
  outline: 2px dotted lightgreen;
}


/* menu bar */

#header {
	width:100%;
	height:32px;
	line-height:32px;
	background-image: url('../media/gui/mainMenuBg.png');
	color: #DBDBDB;
	font-size: 12px; font-variant: small-caps; 
	padding:0;
	z-index:200;
	text-align:center;
	-webkit-touch-callout:none; 
	-webkit-user-select:none;
}

#header a {
	color:#f3f3f3;
	height:32px;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#header .frequentTool {
	width:48%;
	height:30px;
	font-size: 12px; font-variant: small-caps; 
	padding:0;
	border-top:1px solid #444;
	float: left;
	padding-right: 4px;
}

#header .frequentTool ul,li {
    margin: 0;
    padding: 0;
}
#header .frequentTool ul {
    text-align: left;
}
#header .frequentTool li {
	border-right:1px solid #333;	
    display: inline;
}

#header .frequentTool a:hover, a:focus {
    z-index: 200;
      /* bring to top when the mouse is over or
         when it has the focus (for keyboard navigation) */
}

#header .frequentTool a img {
    border: none;
    -webkit-transition: all .2s;
       /* in Safari, every animatable property
          triggers an animation in .2s */
    -webkit-transform-origin: top;
       /* in Safari, the origin for
          transformation */
}
#header .frequentTool a:hover img, a:focus img {
    -webkit-transform: scale(1.2);
}


#header .fileHandling {
	width:50%;
	height:30px;
	font-size: 12px; font-variant: small-caps; 
	padding:0;
	border-top:1px solid #444;
	float: left;
}

#header .fileHandling ul,li {
    margin: 0;
    padding: 0;
}
#header .fileHandling ul {
	text-align: right;
}
#header .fileHandling li {
	border-left:1px solid #333;	
    display: inline;
}

#header .fileHandling a:hover, a:focus {
    z-index: 200;
      /* bring to top when the mouse is over or
         when it has the focus (for keyboard navigation) */
}

#header .fileHandling a img {
    border: none;
    -webkit-transition: all .2s;
       /* in Safari, every animatable property
          triggers an animation in .2s */
    -webkit-transform-origin: top;
       /* in Safari, the origin for
          transformation */
}
#header .fileHandling a:hover img, a:focus img {
    -webkit-transform: scale(1.2);
}


#footer{
	width:100%;
	height:48px;
	background-image: url('../media/gui/mainMenuBg2.png');
	color: #DBDBDB;
	font-size: 12px; font-variant: small-caps; 
	padding:0;
	border-top:1px solid #444;
	z-index: 200;
	position: relative;
	-webkit-transition-property: height, top;
	-webkit-transition: top 2s ease;
	-webkit-transition: height 2s ease;

	-webkit-touch-callout:none; 
	-webkit-user-select:none;
	
	/*
	-webkit-transition-property: opacity, left, height, top, bottom;
	-webkit-transition-duration: 1s, 1.5s;
	-webkit-animation-direction: alternate;
	transition-timing-function: ease-in-out;
	*/
}

#footer .menuButton{
	width:100%;
	height:48px;
	font-size: 12px; font-variant: small-caps; 
	padding:0;
	border-top:1px solid #444;
	position: relative;
	z-index: 200;
}


#footer .menuButton li {
	display:block;
	float:left;
}

#footer .menuButton li {
	width:20%;
	text-align:center;
}

/*
#iconsPanel ul, li {
    margin: 0;
    padding: 0;
}
#iconsPanel ul {
    text-align: center;
}
#iconsPanel li {
    display: inline;
}
*/

#footer .menuButton a.left_menu {
	border-right:1px solid #333;
}

#footer .menuButton a.middle_menu {
	border-right:1px solid #333;
	border-left:1px solid #6a6a6a;	
}

#footer .menuButton a.right_menu {
	border-left:1px solid #6a6a6a;
}

#footer .menuButton a {
	display:block;
	text-decoration:none;
	font-size:13px;
	color:#eee;
	line-height:24px;
	text-shadow:0 -1px 0 #000;
}

#footer .menuButton span {
	display:block;
	font-size:0px;
	font-weight:bold;
}

#footer .content-slider {
	width: 100%;
	overflow: hidden;
	height: 30px;
	border: solid 1px #666;
}

#footer .content-slider-inside {
	list-style: none;
	height: 40px;
	overflow: scroll;
	overflow-y: hidden;
}


#footer .content-slider-inside li {
		background: #ccc;
		height: 30px;
		color: #666;
		font-size: 30px;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		text-align: center;
		line-height: 30px;
}

#footer .content-slider-inside a:hover, a:focus {
/*		position: relative;
	   z-index: -200;*/
      /* bring to top when the mouse is over or
         when it has the focus (for keyboard navigation) */
}

#footer .content-slider-inside a.right_menu {
	border-right:1px solid #333;	
	padding-right: 5px;
}

#footer .content-slider-inside a.right_arrow {
	padding-left: 5px;
}

#footer .content-slider-inside a.left_arrow {
	padding-left: 5px;
}


#footer .content-slider-inside a img {
    border: none;
    -webkit-transition: all .2s;
       /* in Safari, every animatable property
          triggers an animation in .2s */
    -webkit-transform-origin: top;
       /* in Safari, the origin for
          transformation */
}
#footer .content-slider-inside a:hover img, a:focus img {
    -webkit-transform: scale(1.2);
}





#wrapper {
	height:200px;		/* Of course you need to specify the object height */

	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */

	width:100%;
	background-image: url('../media/gui/bodyBg.png');
	overflow:hidden;
/*	background:#aaa url(wrapper-bg.png);*/
}

#scroller {
/*	-webkit-touch-callout:none;*/
/*	-webkit-tap-highlight-color:rgba(0,0,0,0);*/

	float:left;
/*	width:100%; */
	padding:0;
	
/*	-webkit-box-shadow:0 0 8px #555;	/* Don't use shadows in production, they slow down drastically CSS animations */
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
/*	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d4d4d4), to(#fafafa));*/
	font-size:14px;
}