body{margin:0;padding:0;font-family:Segoe UI;background:#404040}
div,ul,li{margin:0;padding:0}
#canvas,#pixels{width:512px;height:512px}
#grid,#pixels{position:absolute;top:7px;left:7px}
.pixel:hover,#palette li:hover,#tools li:hover,#palette li:hover,#clear:hover,#view_png:hover,#color:hover{cursor:pointer}
#pixels,#toolbar{-webkit-box-shadow:0 0 5px black;-moz-box-shadow:0 0 5px black;box-shadow:0 0 5px black}
#canvas,#toolbar_top,#tools,#palette,#color{border-left:solid 1px #DDD;border-right:solid 1px #999}
#toolbar,#color{}
#canvas,#toolbar_top,#tools,#palette,#color{background:#696969}
#toolbar_top,#tools,#palette{padding:5px 5px 0}
#tools *,#palette *{-webkit-user-select:none}
#tools ul,#palette ul,#toolbar_top ul{width:120px;padding:5px 5px 0;background:#101010;list-style:none;}
#tools li,#clear,#view_png{background-repeat:no-repeat;background-position:center center}
#tools li span,#palette li,#clear span,#view_png span{overflow:hidden;text-indent:-9999px}
#clear span,#view_png span{width:32px;height:32px;display:inline-block}
#tools li span,#clear span,#view_png span{background-color:rgba(60,60,60,0.6);}
#toolbar_top li,#tools li{}
#toolbar_top,#color div{}
#container{width:700px;margin:50px auto;position:relative}
#canvas{padding:7px;position:absolute;top:0;left:0;border-top:solid 1px #DDD;border-bottom:solid 1px #999;}
#grid{background:white}
.pixel{display:inline-block;float:left}
#toolbar{position:absolute;top:0;right:0}
#toolbar_top{padding:5px 5px 0;border-top:solid 1px #DDD;}
#toolbar_top ul{height:44px}
#toolbar_top li{width:32px;height:32px;margin:4px;float:left}
#preview{background:white!important}
#tools{}
#tools ul{height:125px}
#tools li{width:50px;height:50px;margin:5px;display:inline-block}
#tools span{width:50px;height:50px;display:inline-block}
#tools .selected{background-color:#0000FF;}
#palette{background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background:-moz-linear-gradient(top,#666,#555)}
#palette ul{height:245px}
#palette li{margin:5px;width:40px;height:40px;border:solid 5px white;display:inline-block;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;-webkit-box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7);-moz-box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7);box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7)}
#color{padding:5px;border-bottom:solid 1px #999;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#444));background:-moz-linear-gradient(top,#555,#444)}
#color div{width:130px;padding:10px 0 12px;font-family:Segoe UI Light;font-size:14pt;text-transform:uppercase;text-align:center;color:white}