Fire JS Bin - Sketchpad

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 <title>Sketchpad - Online Paint/Drawing application</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta name="description" content="Sketchpad is an online drawing application -- written in <canvas>." /> 
 <meta name="keywords" content="" /> 
 <link rel="icon" href="/attach/sketchpad/favicon.png" type="image/x-icon" /> 
 
  <script src="/attach/sketchpad/sketchpad.js"></script> 
</head> 
<body onmousedown="if(false && preventDefault) event.preventDefault(); preventDefault = true;"> 
 
<div id="top"> 
 <div class="center"> 
  <div class="west" style="font-variant: small-caps"> 
   <div style="left: 12px; top: 10px" onmousedown="canvas.mode_sw('paint');" id="paint" class="cur">paint</div> 
   <div style="left: 24px; top: 10px" onmousedown="canvas.mode_sw('light');" id="light">light</div> 
  </div> 
  <div class="east"> 
   <div style="background: none; border-left: none; border-right:1px solid #161616; height: 22px; padding: 0; cursor: default"></div> 
   <div id="isolid" onmousedown="win.tab(this,'solid','solid'); if(this.className != 'cur') gui_swatch.toType('CO');">color</div> 
   <div id="igradient" onmousedown="win.tab(this,'gradient','gradient'); if(this.className != 'cur') gui_swatch.toType('GD');">gradient</div> 
   <div id="ipattern" onmousedown="win.tab(this,'pattern','pattern'); if(this.className != 'cur') gui_swatch.toType('PT');">pattern</div> 
   <div id="iswatch" onmousedown="win.tab(this,'swatch',vars[vars.id])">swatch</div> 
   <div id="ihistory" onmousedown="win.tab(this,'history',vars[vars.id])">history</div> 
   <div id="ioptions" onmousedown="win.tab(this,'options',vars[vars.id])">options</div> 
   <div onmousedown="canvas.open();" class="cur open" style="display:none"><span></span></div> 
   <a href="" onmousedown="this.href=$('ctx_box').toDataURL()" target="_blank"><div class="cur save"><span></span></div></a> 
   <div style="background: none; border-left: none; border: none; border-left:1px solid #3e3e3e; height: 22px; padding: 0; cursor: default"></div> 
  </div> 
 </div> 
</div> 
 
<div id="tools" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"><div class="TMM">tools</div></div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove();"> 
   <div class="z"> 
  <div class="tools"> 
   <div onclick="gui_tools.imageCurrent('Marquee_'+vars.marquee)"><img src="/attach/sketchpad/sw_add.png" class="plus" alt="Marquee" /><img src="" class="Marquee_lasso Marquee_ellipses Marquee_polygon Marquee_star Marquee_burst Marquee_gear" alt="Marquee" /></div> 
   <div onclick="gui_tools.imageCurrent('Crop')"><img src="" class="Crop" alt="Crop" /></div><br /> 
   <div class="hr"></div> 
   <div onclick="gui_tools.imageCurrent('Text')"><img src="" class="Text" alt="Text" /></div> 
   <div onclick="gui_tools.imageCurrent('Shape_'+vars.shape)"><img src="/attach/sketchpad/sw_add.png" class="plus" alt="Shape" /><img src="" class="Shape_ellipses Shape_polygon Shape_star Shape_burst Shape_gear" alt="Shape" /></div> 
   <div onclick="gui_tools.imageCurrent('Spirograph')"><img src="" class="Spirograph" alt="Spirograph" /></div> 
   <div onclick="gui_tools.imageCurrent(vars.draw)"><img src="/attach/sketchpad/sw_add.png" class="plus" alt="Draw" /><img src="" class="Brush Calligraphy Pencil" alt="Draw" /></div> 
   <div onclick="gui_tools.imageCurrent('Fill')"><img src="" class="Fill" alt="Fill" /></div> 
   <div onclick="gui_tools.imageCurrent('Stamp')"><img src="" class="Stamp" alt="Stamp" /></div> 
   <div onclick="gui_tools.imageCurrent('Eraser')"><img src="" class="Eraser" alt="Eraser" /></div> 
   <div onclick="gui_tools.imageCurrent('Picker')"><img src="" class="Picker" alt="Picker" /></div> 
   <br /> 
   <div class="hr"></div> 
  </div> 
  <div class="ss"> 
   <div id="swap">F</div> 
   <div class="fill"> 
    <canvas onmousedown="gui_palette.click('fill')" id="fill" title="Fill"></canvas> 
   </div> 
   <div class="stroke"> 
    <canvas onmousedown="gui_palette.click('stroke')" id="stroke" title="Stroke"></canvas> 
    <div onmousedown="gui_palette.click('stroke')"><div></div></div> 
    <img src="/attach/sketchpad/sw_switch.png"  style="display: block" onmousedown="gui_palette.current(); return false" alt="Switch Stroke with Fill" /> 
   </div> 
  </div> 
   </div> 
  </div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="options" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span class="TML"></span> 
   <div class="TRx"><img onclick="win.close('options',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="history" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span class="TML">history</span> 
   <div class="TRx"><img onclick="win.close('history',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="swatch" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span class="TML">swatch</span> 
   <div class="TRx"><img onclick="win.close('swatch',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="pattern" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span class="TML">pattern</span> 
   <div class="TRx"><img onclick="win.close('pattern',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"><div class="z"></div></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="gradient" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span class="TML">gradient</span> 
   <div class="TRx"><img onclick="win.close('gradient',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="solid" class="gui"> 
 <div class="bounds"> 
  <div class="TL"></div> 
  <div class="TM"> 
   <span id="HEX" class="TML" title="HEX" onmousedown="preventDefault = false;" style="cursor: text; text-transform:uppercase">FFFFFF</span> 
   <div class="TRx"><img onclick="win.close('solid',1)" onmousedown="return(noMove())" src="/attach/sketchpad/win_close.png" title="Close" /></div> 
  </div> 
  <div class="TR"></div><br /> 
  <div class="ML"></div> 
  <div class="MM" onmousedown="noMove()"></div> 
  <div class="MR"></div><br /> 
  <div class="BL"></div> 
  <div class="BM"></div> 
  <div class="BR"></div> 
 </div> 
</div> 
 
<div id="canvas" onmousedown="core.fu('canvas',event,{fu:core.win,Y1:19})" class="gui" style="width: 732px; height: 615px;"> 
 <div class="TL"></div> 
 <div class="TM" ondblclick="win_size.tog(vars.winMax?'min':'max')"> 
  <div class="center"> 
   <span id="cTitle">DRAWING.PNG</span> 
  </div> 
  <div class="east" id="cZoom"></div> 
 </div> 
 <div class="TR"></div><br /> 
 <div class="ML"></div> 
 <div class="MM"> 
  <div class="z"> 
   <div id="cBound" onmousedown="return(noMove())"> 
  <canvas id="ctx_box" style="z-index: 1"></canvas> 
  <canvas id="ctx_temp" style="z-index: 2"></canvas> 
  <canvas id="ctx_active" style="z-index: 5"></canvas> 
  <canvas id="ctx_marquee" style="z-index: 6"></canvas> 
  <canvas id="ctx_mouse" style="z-index: 7"></canvas> 
   </div> 
   <canvas id="ctx_brush" width="200" height="200"></canvas> 
   <canvas id="ctx_stamp" width="200" height="200"></canvas> 
   <canvas id="ctx_eraser" width="200" height="200"></canvas> 
   <canvas id="ctx_picker" height="1" width="1"></canvas> 
   <div id="cHistory"></div> 
  </div> 
 </div> 
 <div class="MR"></div><br /> 
 <div class="BL"></div> 
 <div class="BM"></div> 
 <div class="BR" onmousedown="vars.winMax='min'; win_size.core(event)"></div> 
</div> 
 
<div style="display: none" id="canvas_open"> 
 <div style="padding: 15px 0;"> 
  My Computer…<br><input type="file" id="local" size="17"><br><br>The Internet…<br><input type="datafile_url" id="server" size="27"><br><br><input onclick="canvas.open_event()" type="submit" value="open"> 
  <div id="canvas_open_error" style="padding: 4px 0 0 0; color: #ef3333"></div> 
 </div> 
</div> 
<div class="ads"> 
  <a href="http://colorjack.com/blog/" target="_blank">Blog</a>  |  <a href="http://mugtug.com/" target="_blank">Signup</a> 
</div> 
<div id="TEST" style="color: #fff; position: absolute; top: 40px; z-index: 100000"></div>

</body> 
</html>

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('/attach/sketchpad/win_LT.png'); width: 16px; height: 26px; float: left; }
.gui .TM { background: url('/attach/sketchpad/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('/attach/sketchpad/win_RT.png'); width: 16px; height: 26px; float: left; }
.gui .ML { background: url('/attach/sketchpad/win_LM.png'); float: left; width: 16px; height: 257px; }
.gui .MM { background: url('/attach/sketchpad/win_MM.png'); float: left; width: 75px; cursor: default; }
.gui .MR { background: url('/attach/sketchpad/win_RM.png'); float: left; width: 16px; height: 257px; }
.gui .BL { background: url('/attach/sketchpad/win_LB.png') 0 -22px; float: left; width: 16px; height: 20px; }
.gui .BM { background: url('/attach/sketchpad/win_MB.png') 0 -22px; float: left; width: 75px; height: 20px; }
.gui .BR { background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/check_on.png'); opacity: 1; }

.radio { float: left; width: 50%; padding-bottom: 10px; margin-bottom: 10px; }
.radio div { background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/range_select.png') 0 4px repeat-x; }
.slideXX div div { float: left; position: absolute; top: 17px; width: 7px; }
.slideXX div div._min { background: url('/attach/sketchpad/range_az.png') 0 -20px; }
.slideXX div div._max { background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/slideYbg.png') repeat-y; top: 25px; height: 105px; left: 186px; width: 14px; position: absolute; float: left; cursor: crosshair; }
.slideY span { background: url('/attach/sketchpad/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('/attach/sketchpad/slideY.png') repeat-y; width: 14px; position: absolute; top: 0; cursor: crosshair; }
.slideY div.slider div { background: url('/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/menuwrap-rnd.png") no-repeat 0 -3px; float:right; width: 3px; height: 3px; }
.menuWrap .b { clear:both; }
.menuWrap .b .l { background: url("/attach/sketchpad/menuwrap-rnd.png") no-repeat -3px 0; float:left; width: 3px; height: 3px; }
.menuWrap .b .c { background: #eee url("/attach/sketchpad/menubg.png") repeat-x left -12px; height:3px; width: 156px; float:left; }
.menuWrap .b .r { background: url("/attach/sketchpad/menuwrap-rnd.png") no-repeat; float:right; width: 3px; height: 3px; }

.menuBox { clear:both; background: #9d9d9d url("/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/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("/attach/sketchpad/menurnd.png") no-repeat -3px 0; float:left; width: 3px; height: 8px; }
.menuBox ul.opened li.bottom .c { background: url("/attach/sketchpad/menu-shadow.png") repeat-x; height:10px; width: 156px; float:left; }
.menuBox ul.opened li.bottom .r { background: url("/attach/sketchpad/menurnd.png") no-repeat; float:right; width: 3px; height: 8px; }

/* CONTENT */

#top { background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/op_8x8.gif') 4px 3px; }
#gradient .slide_x div { background: url('/attach/sketchpad/gd_cur.gif'); height: 17px; width: 11px; position: absolute; cursor: crosshair; }
#gradient .slide_x div.cur { background: url('/attach/sketchpad/gd_cur.gif') 0 17px; }
#gradient .slide_x div:hover { background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/op_8x8.gif'); }

#picker1x1 { width: 15px; height: 15px; position: absolute; left: 181px; top: 88px; border: 1px solid #111; background-image: url('/attach/sketchpad/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('/attach/sketchpad/bg_white_42.png'); color: #111; font-style: italic; opacity: 0.62; }
#history .z div.keep { background: url('/attach/sketchpad/bg_white_42.png'); color: #090909; }
#history .z div.cur { border-bottom: 1px solid #808080; background: url('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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('/attach/sketchpad/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; }

Pop out