body { width: 100%; height: 100%; margin: 0; FONT-FAMILY: arial, helvetica, san-serif; FONT-SIZE: 12px; background: #090909; overflow: hidden; }
br { CLEAR: both; }
img { border: 0; }

a.ads { color: #ffee00 }
a.ads:hover { color: #ee1155 }

.ads { position: absolute; top: 640px; width: 100%; font-size: 14px; color: #333; text-align: center; }

/* GUI */

.gui { opacity: 0; display: none; cursor: move; position: absolute; top: 0; left: 0; z-index: 2; }
.gui .TL { background: url('../media/gui/win_LT.png'); width: 15px; 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: #fff; 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;  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
.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: 15px; height: 26px; float: left; }
.gui .ML { background: url('../media/gui/win_LM.png'); float: left; width: 15px; 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: 15px; height: 257px; }
.gui .BL { background: url('../media/gui/win_LB.png') 0 -22px; float: left; width: 15px; 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: #888; 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: #888; 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: #555; padding: 0 1px 0 2px; }
.slideXX .v, .slideX .v { float:left; position: relative; left: 13px; top: 0; color: #888; }

.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: 186px; 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 #fff; }
.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: #fff; }
.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; }

/* CONTENT */

#top { background: url('../media/gui/top_bg.png'); color: #444; height: 22px; width: 100%; z-index: 1; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#top .center { margin: 0 auto; text-align: left; width: 710px; }
#top .west { float: left; left: 0; position: relative; top: -7px; }
#top .west div { cursor: pointer; color: #666; position: relative; top: 12px; display: inline; }
#top .west div:hover { color: #de83ad; }
#top .west div.cur { color: #999; }
#top .west img { height: 15px; margin: 10px 6px 0 9px; display: none; }
#top .east { float: right; font-size: 12px; font-variant: small-caps; }
#top .east div { background: url('../media/gui/top_select.png') repeat-x; border-left: 1px solid #4e4e4e; border-right:1px solid #2e2e2e; color: #e8e8e8; cursor: pointer; float:left; padding: 3px 10px 4px; }
#top .east div:hover { color: #7AD1FF; }
#top .east div.cur { background:none; color: #888; padding: 3px 10px 4px; border-left: 1px solid #3e3e3e; border-right:1px solid #161616; }
#top .east div.cur:hover { color: #DE83AD; }
#top .east div.open { border:0; padding:0 4px 0 3px;  border-left: 1px solid #3e3e3e; border-right:1px solid #161616  }
#top .east div.save { border:0; padding:0 2px 0 7px; border-left: 1px solid #3e3e3e; border-right:1px solid #161616}
#top .east div.open span,
#top .east div.save span { display:block; background: url('../media/gui/file.png') no-repeat; width: 25px; height: 22px; }
#top .east div.save span { background-position: top right; }

#canvas { width: 833px; z-index: 1; }
#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 }

#ctx_box { background: url('../media/gui/op_8x8.gif'); }
#cBound { height: 600px; overflow: hidden; position: absolute; top: 29px; left: 16px; width: 800px; }

#cHistory, #ctx_stamp, #ctx_eraser, #ctx_brush, #ctx_picker, #cSRCfill, #cSRCstroke, #ctx_mouse, #cPT { display: none; }

/* SOLID */

#solid .bounds { width: 216px; }
#solid .TM, #solid .BM { width: 180px }
#solid .ML, #solid .MR { height: 216px; }
#solid .TML { cursor: move; padding-top: 2px; font-size: 12px; }
#solid .TML:active { cursor: move; }
#solid .MM { position: relative; color: #111; width: 180px; height: 216px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#solid .z canvas { background: url('../media/gui/op_8x8.gif'); cursor: crosshair; position: relative; border: 1px solid #1f1f1f; left: 5px; float: left; display: inline; margin-top: 10px }
#solid .z div { display: inline; }
#solid .z div div { position: absolute; left: 20px }
#solid .z div .east { position: relative; float: right; top: 14px; left: -3px; font-size: 11px; color: #bbb; display: inline; cursor: text; }
#solid .z div .west { width: 10px; position: relative; float: left; top: 14px; font-size: 12px; color: #aaa; left: 6px; letter-spacing: 0.035em; display: inline; }
#solid .z div:hover .west, #solid .z div:hover .east { color: #FFF; }
#solid .z div:active .west, #solid .z div:active .east { color: #FFF; font-weight: bold }
#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;  }
#solid .z div:hover .cur, #solid .MM div:active .cur { opacity: 1; }

/* 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 { background: url('../media/gui/op_8x8.gif'); 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 */

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

#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 { background: url('../media/gui/op_8x8.gif'); 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: 5px; left: 4px; }
#gradient .slide_x:hover { cursor: pointer; }
#gradient .slide_x:active { cursor: crosshair; }
#gradient .slide_x canvas { position: relative; top: 8px; left: 2px; background: url('../media/gui/op_8x8.gif') 4px 3px; }
#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; }

/* SWATCH */

#swatch {  -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#swatch .bounds { width:216px; }
#swatch .TM, #swatch .MM, #swatch .BM { width: 180px }
#swatch .ML, #swatch .MM, #swatch .MR { height: 200px }
#swatch .MM img { position: relative; top: 5px; left: -5px; }
#swatch .menu { background: #111; color: #777; 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: #888; cursor: pointer; }
#swatch .menu:active { color: #999 }
#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; width: 180px; height: 114px; top: 20px; overflow: hidden; float: left; position: relative; left: -7px;  }
#swatch .squares canvas { border: 1px solid #eee; width: 16px; height: 16px; margin: 3px; float: left; background: url('../media/gui/op_8x8.gif'); cursor: pointer; }
#swatch .squares canvas:hover { border: 1px solid #222; }
#swatch .squares canvas.cur { border: 0; background: none; height: 18px; width: 18px; margin: 3px; cursor: default; }
#swatch .CO:hover .slideY div { opacity: 1; }
#swatch .GD:hover .slideY div { opacity: 1; }
#swatch .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: 236px }
#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 .ss { color: #444; width: 60px; height: 50px; position: relative; left: 8px; top: 5px; }
#tools .ss div { WIDTH: 36px; FONT-SIZE: 1px; LINE-HEIGHT: 0; }
#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: absolute; padding: 0; left: -17px; top: 11px; 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; background-image: url('../media/gui/op_8x8.gif'); }

#picker1x1 { width: 15px; height: 15px; position: absolute; left: 181px; top: 88px; border: 1px solid #111; background-image: url('../media/gui/op_8x8.gif'); }

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

/* HISTORY */

#history .bounds { width: 216px; }
#history .TM, #history .MM, #history .BM { width: 180px }
#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: 165px; position: relative; }
#history .z div span { float: right; position: relative; left: -10px }
#history .z div.discard { background: url('../media/gui/bg_white_42.png'); color: #111; font-style: italic; opacity: 0.62; }
#history .z div.keep { background: url('../media/gui/bg_white_42.png'); color: #090909; }
#history .z div.cur { border-bottom: 1px solid #808080; background: url('../media/gui/bg_white_55.png'); color: #090909; font-weight: bold; }
#history .MM { overflow: hidden; }
#history .MM #hiKontrol { display: none }

/* PROPERTIES */

#options .bounds { width: 216px; }
#options .TM, #options .MM, #options .BM { width: 180px }
#options .ML, #options .MM, #options .MR { height: 328px }
#options .MM { font-size: 1.1em; color: #666; font-variant: small-caps; }
#options .MM table { padding: 7px 0 0 }
#options .MM span { border-bottom: 1px solid #2f2f2f; color: #888; 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: 5px; left: 35px; z-index: 1 }
#options .loupe { position: absolute; top: 4px; left: 47px; z-index: 2 }
#options #stamp { height: 125px; position: relative; top: -4px; left: -3px; overflow: hidden; }
#options #stamp canvas { background: url('../media/gui/bg_white_42.png'); cursor: pointer; padding: 2px; opacity: 0.75; margin: 1px; border-bottom: 1px solid #111; border-right: 1px solid #111; }
#options #stamp canvas.cur { background: url('../media/gui/op_8x8.gif'); opacity: 1; }
#options #stamp canvas:hover { opacity: 1; }
#options #toKontrol { top: 46px; left: 184px; width: 14px; height: 160px }

#options #stamp canvas.load { background: #000 url('../media/gui/load.gif') center no-repeat; }

#options .slideY span.rT { top:-6px; }
#options .slideY span.rB { border:0; }

#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: 2px }
.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 { top: 639px; position: absolute; width: 680px; left: 22.4%; z-index: 0; }
#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; }