html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}
body {background-color:#222;font-family: courier;font-size:18px;font-weight:bold;color:#AAA;}
a {color:#AAA;}
b {color:#AAA;}
button {border:0px;color:#222;font-size:20px;font-family:courier;font-weight:bold;background-color:#AAA;margin:1px;}
button:disabled {background-color:#444;}
textarea {padding:4px;resize:none;}
h1 {font-size:24px;}
p {margin-bottom:20px;}
ul a {text-decoration:none; color:#222;}

.header {height:34px;margin-top:3px;}
.header div {padding:3px 5px 1px 230px; font-size:28px;font-family:arial;}
#footer {position:fixed; right:3px; bottom:0px;letter-spacing:2px;font-size:16px;}
#footer i {color:#555;}
#footer a {color:white;text-decoration:none;}
.right {float:right;}
.left {float:left;}
.clear {clear:both;}
select {width:400px;}
#ide {position:absolute;left:0px;top:40px;z-index:100;}
#input {width:792px;height:600px;background-color:#444;color:#DDD;font-family:courier;font-size:16px;border:1px solid #DDD;resize: none;z-index:100;position:absolute;}

#surface {position:absolute;top:0px;left:0px;width:800px;height:608px;overflow:hidden;border:1px solid #DDD;z-index:20;}
#output {padding:0px;position:absolute;top:0px;left:0px;width:792px;height:600px;font-family:courier;resize: none;overflow: auto;background-color:#000044;color:white;border-width:0px;z-index:30;}
#sprite_0       {position:absolute;top:0px;left:0px;z-index:40;}
#sprite_0_1     {position:absolute;top:0px;left:0px;z-index:40;}
.sprite         {position:absolute;z-index:100;} 
#keyHandler     {position:absolute;top:-100px;z-index:10;}

#functions {position:absolute;top:42px;left:800px;width:80px;height:541px;border:solid 1px #DDD;}
ul {}
li {width:63px;height:56px;color:#222;background-color:#DDD;margin:5px 0px 0px 5px;padding:1px;cursor:pointer;border:2px solid #DDD;float:left;}
.disable {background-color:#444;border-color:#444;}
.flash {border-color:#080;}
.highlight {background-color:#E44;border-color:#E44;}

.dialog {box-shadow: 5px 5px 5px black; display:none;padding:10px;position:fixed;left:50%;top:50%;width:550px;height:300px;margin-left:-275px;margin-top:-250px;background-color:#335;z-index:2000;border:solid 1px #DDF;}
.dialog p {margin-top:15px;}
.dialog div {width:120px;float:left;margin-top:20px;}
.dialog .dialogButtons {position:absolute;right:10px;bottom:10px;width:200px;}
.dialog .label {clear:both;}
#saveoptions {margin-left:53px;width:377px;line-height:30px;font-family:courier;font-weight:bold;font-size:20px;}
#saveprogname {width:373px;font-family:courier;font-weight:bold;font-size:20px;}
#saveprogexisting {margin-left:140px;width:377px;height:100px;font-family:courier;font-weight:bold;font-size:20px;} 

#progname {height:160px;width:400px;font-family:courier;font-weight:bold;font-size:20px;}
#folder {width:400px;font-family:courier;font-weight:bold;font-size:20px;}


#debugTool {position:absolute; top:42px; width:auto;height:740px;z-index:1000;}
#debugBox {width:100%;height:100%;position:relative;border:1px solid #AAA;background-color:#222;padding:0px;}
#debug {height:100%;width:100%;background-color:#222;color:#DDD;font-size:14px;border:0px;position:absolute;top:0px;left:0px;padding:0px;display:none;}
#watch {height:100%;width:100%;background-color:#222;color:#DDD;font-size:14px;border:0px;position:absolute;top:0px;left:0px;padding:0px;display:none;}
#error {height:100%;width:100%;background-color:#222;color:#DDD;font-size:14px;border:0px;position:absolute;top:0px;left:0px;padding:0px;}
#info {height:100%;width:100%;background-color:#222;color:#DDD;font-size:14px;border:0px;position:absolute;top:0px;left:0px;padding:0px;display:none;}
#info textarea {width:95%;height:230px;background-color:#444;color:#DDD;font-family:courier;font-size:16px;margin:5px;}
#shareLink {width:200px;height:20px;background-color:#444;color:#DDD;font-family:courier;font-size:16px;border:1px solid #AAA;resize: none;margin:3px;}
#info div {float:left;font-weight:bold;font-size:20px;width:96%;margin:10px 0px 0px 10px;}
#ideBtns {position:relative;float:right;margin:-30px 1px;}
#goWatch {float:left;display:none;}
#clrDebug {float:left;display:none;}
#tabs {position:relative;float:left;margin:-2px 5px;}
.tabSelect {background-color:#222;color:#AAA;border:1px solid #AAA;border-top-color:#222;height:27px;}
.tabUnselect {background-color:#222;color:#444;border:1px solid #AAA;height:25px;}
#scrButtons {position:fixed; top:0px; right:0px;}

#other {clear:both;}
#controls {position:absolute;left:5px;top:20px;}
#controls .sidePad {float:left;}
#controls .pad {border:3px solid #444;width:50px;height:50px;}
#upPad {margin:16px 1px;}
#leftPad {margin:75px 2px;}
#rightPad {margin:75px 2px;}
#downPad {margin:60px 1px;}
#firePad {position:absolute;left:600px;top:20px;border:3px solid #444;width:50px;height:50px;}

/*  SIGNIN PAGE  */
.form {border:1px solid #DDD;float:left;padding:20px; margin:40px;width:800px;height:400px;background-color:#444;}
.row {margin:40px 5px 20px 10px;width:390px;}
.row input, .row select {float:right;vertical-align:bottom;width:230px;border:1px solid black; height:30px; font-size: 25px; font-family:courier;}

/* RUN PAGE */
#slider { height:80%;width:100%;position:absolute;top:-640px;left:0px;z-index:1;background-color:#111;padding:13px 0px;overflow:hidden;}
#run {margin:0px auto;width:800px;height:608px;position:relative;}
#run #functions {position:absolute;top:0px;left:800px;}
#run ul {border:solid 1px #DDD;width:80px;height:340px;margin:0px 10px;}
#proginfo {left:0px;margin-top:-600px;margin-left:10px;width:15%;height:100%;}
#proginfo p {margin-bottom:10px;}
#home {width:1000px;margin: 100px auto;background-color:white;}
#runfooter {width:100%;position:fixed;bottom:0px;font-size:16px;background-color:black;padding-top:5px;z-index:10;}

/* IDE PAGE */
#toolBox {position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:1000;background-color:rgba(0,0,0,.8);display:none;}
#toolBoxFrame{position:relative;width:864px;height:737px;background-color:#222;margin:50px auto;border:1px solid #AAA;}
#toolBoxHeader{width:100%; height:28px;font-size:28px;margin:3px 0px 0px 3px;}
#closeToolBox {margin-right:5px;}
#toolBoxTabs {margin:0px 5px;}

/* SOMAGE UPLOAD */
#SomageUpload{display:none;width:778px;height:619px;border:1px solid grey;padding:40px;margin:2px;}
#uploadBox{font-size:12px;}
.filebox {width:359px;float:left;margin-right:30px;}
.filebox textarea{width:98%;height:420px;border:1px solid grey;padding:4px;margin:0px 0px 0px 0px;color:white;background-color:#202020;}
.filebox select {width:100%;height:402px;border:1px solid grey;padding:4px;margin:0px 0px 0px 0px;color:white;background-color:#202020;}


/* SPILE EDITOR  */
#loadspilename {height:200px;}
#savespilename {width:300px;}
#deletespilename {height:200px;}
#savespiledomain {text-align:right;width:157px;}
#savespileexisting {margin-left:226px;width:304px;}
#editBox {width:386px;border:1px solid grey;padding:10px;margin:2px;}
#editBlock {position:relative;border:1px solid grey;background-color:#E8E8E8;}
.editBlockSize {width:390px;height:390px;}
#editBlock canvas {position:absolute;top:0px;left:0px;}
#editCanvas {}
#editGrid {}
#palette {width:390px;height:29px;border:1px solid grey;background-color:#AAA;margin-top:12px;}
.paletteBlock {width:25px;height:25px;margin:1px;display:inline-block;border:1px solid black;}
#controlBox {width:426px;height:160px;display:block;border:1px solid grey;padding:10px;margin:2px;}
#spileFunctions {height:80px;width:370px;font-size:17px;}
#previewBox {width:426px;border:1px solid grey;padding:10px;margin:2px;}
#tilePreview {display:none;}
#spritePreview {display:block;}
#spritePreviewCanvas {height:256px;}
#frameRate {height:7px;width:80px;}
#dragCanvas {display:none;position:absolute;height:80px;width:80px;left:0px;top:0px;border:4px solid blue;z-index:2000;}
#spilesBox {width:848px;height:136px;border:1px solid grey;padding:5px;margin:2px;}
#spiles {margin-left:12px;}
.spileBlock {display:inline-block;margin-right:13px;position:relative;}
.spileBlock canvas {width:80px;height:80px;margin:0px;border:3px solid silver;background-color:#E8E8E8;}
.animateSwitch {width:84px;height:10px;border:1px solid grey;margin:0px 0px 3px 0px;visibility:visible;}
.on {background-color:royalblue !important;}
.labelBox {width:73px;height:12px;font-size:12px;margin:0px 0px 3px 0px;}
.labelTextBox {width:12px;height:12px;border:none;padding:0px 2px 0px 4px;font-size:11px;background-color:grey;}
.spileSelected {border-color:seagreen !important;}
.arrow {width:20px;height:100px;}
.spileCount {position: absolute;right: 7px;bottom: 7px;color: black;opacity: 0.8;text-shadow: -1px -1px #CCC;}

#colorWindow {position:absolute;left:30px;top:30px;width:300px;height:230px;padding:10px;border:1px solid grey;background-color:#444;display:none;}
#colorList {margin:2px;width:265px;height:150px;border:1px solid grey;display:block;}
.colorListBlock {width:20px;height:20px;display:inline-block;border:1px solid black;margin:2px;}
.pattern {background: repeating-linear-gradient(
  45deg,
  #E8E8E8,
  #E8E8E8 5px,
  #D8D8D8 5px,
  #D8D8D8 10px
);}
.controlButtons {position:absolute; top:0px; right:0px;}