
#controls {
   position: absolute;
   background: silver;
   width: 400px;
   top: 0;
   height: 514px;
   left: 512px;
   border: 1px outset white;
   padding: 10px;
}

.tool {
   font: 11pt Arial,Helvetica,sans-serif;
   background: #a0a0a0;
}

.tool H5 {
   font-weight: bold;
   background: maroon;
   color: white;
   margin: 1px 1px 2px 1px;
   padding:2px;
}

.nav {
   margin-top: 10px;
   width: 397px;
   height: 39px;
   border: 1px inset white;
}

.colors {
   width: 170px;
   height: 142px;
   border: 1px inset white;
   float: left;
}

.colors input {
   margin-left: 5px;
}

.preColor {
   width: 16px;
   height: 18px;
}

.colorTable {
   margin-top: 2px;
   margin-left: 5px;
   clear: none;
}

.selectedColor {
   background-color: white;
   width: 50px;
}

.backgroundColor {
   background-color: black;
   width: 50px;
}

.grid {
   width: 220px;
   height: 70px;
   border: 1px inset white;
   float: right;
}

.drawmode {
   margin-top: 10px;
   width: 220px;
   height: 60px;
   border: 1px inset white;
   float: right;
}

.brushsize {
   margin-top: 10px;
   width: 170px;
   height: 102px;
   border: 1px inset white;
   float: left;
}

.brushTable {
   margin-top: 2px;
   margin-left: 5px;
   clear: none;
   border: none;
}

.brushTable .brushPix {
   width: 16px;
   height: 18px;
   border: 1px solid white;
   background: paleGoldenrod;
}

.brushTable .brushPix.enabled {
   background: navy;
}

.preview {
   margin-top: 10px;
   width: 220px;
   height: 102px;
   border: 1px inset white;
   float: left;
   margin-left: 5px;
}

.preview img {
   background: black;
   margin-left: 20px;
   margin-top: 5px;
   border: 1px solid white;
   width: 64px;
   height: 64px;
}

div.drawicon {
   width: 32px;
   height: 32px;
   float: left;
   background: url(buttons.png) no-repeat;
}

div.drawicon.paintbrush {
   background-position: 0 0;
}

div.drawicon.eraser {
   background-position: -32px 0;
}

div.drawicon.dropper {
   background-position: -64px 0;
}

.drawmode input {
   float: left;
}

.shift {
   margin-top: 10px;
   width: 170px;
   height: 62px;
   border: 1px inset white;
   float: left;
}

div.button {
   width: 32px;
   height: 32px;
   border: 1px outset silver;
   margin: 2px;
   float: left;
   background: url(buttons.png) no-repeat;
}

div.button.on {
	border: 1px inset silver;
	background-color: gray;
}

div.button.mouseover {
   background-color: silver;
}

div.button.shift-up {
   background-position: 0 -64px;
}

div.button.shift-down {
   background-position: -64px -64px;
}

div.button.shift-left {
   background-position: -96px -64px;
}

div.button.shift-right {
   background-position: -32px -64px;
}

.flip-mirror {
   margin-top: 10px;
   width: 220px;
   height: 62px;
   border: 1px inset white;
   float: left;
	margin-left: 5px;
}

div.button.flip-vertical {
   background-position: -128px -64px;
}

div.button.flip-horizontal {
   background-position: -128px -32px;
}

div.button.mirror-vertical {
   background-position: -32px -96px;
}

div.button.mirror-horizontal {
   background-position: 0 -96px;
}

div.button.add-frame {
   background-position: 0 -32px;
}

div.button.delete-frame {
   background-position: -32px -32px;
}

div.button.dupe-frame {
   background-position: -64px -32px;
}

div.button.clear-frame {
   background-position: -96px -32px;
}

div.button.next-frame {
   background-position: -128px 0;
}

div.button.prev-frame {
   background-position: -96px 0;
}

.frames {
   margin-top: 10px;
   width: 397px;
   height: 128px;
   border: 1px inset white;
}

.frames div.frames-container {
   overflow-y: auto;
   height: 107px;
   width: 395px;
}

.frames ul {
	list-style: none;
	margin-left: -30px;
}

.frames ul li {
   position: relative;
	float: left;
	width: 32px;
	height: 32px;
	margin-right: 8px;
   margin-bottom: 8px;
	border: 2px solid transparent;
   outline: 1px solid silver;
}

.frames ul li.currentFrame {
	border: 2px solid yellow;
}

.frames ul li img.frame {
}

.frames ul li div.tag {
   position: absolute;
   right: 0;
   bottom: 0;
   font-size: 8pt;
   background: #cecece;
   color: black;
   display: none;
}

.frames ul li.mouseover div.tag {
   display: block;
}

#bottom {
   background: silver;
   position: absolute;
   top: 536px;
   width: 912px;
   height: 114px;
   border: 1px outset white;
   padding: 10px;
}

.animations {
   border: 1px inset white;
   width: 911px;
}

.animations div.animations-container {
   overflow-x: auto;
   height: 88px;
   width: 921px;
}

.animations ul {
	list-style: none;
	margin-left: -15px;
}

.animations ul li {
   position: relative;
	float: left;
	margin-right: 8px;
	border: 2px solid transparent;
   text-align: center;
}

.animations ul li img {
   border: 2px solid transparent;
}

.animations ul li img.currentAnimation {
	border: 2px solid yellow;
}

.animations ul li div.tag {
   font-size: 8pt;
   background: #cecece;
   color: black;
   margin-top: 5px;
}

#menuBar {
   position: relative;
   width: 800px;
   height: 24px;
   background: silver;
   font: 9pt Verdana, Arial, Helvetica, sans-serif;
   color: black;
   cursor: pointer;
}

#menuBar .menuItem {
   float: left;
   margin-top: 5px;
   margin-left: 3px;
   margin-right: 15px;
}

#menuBar .menuItem.open,#menuBar .menuItem.mouseover {
   background: navy;
   color: white;
}

#menuBar .menu {
   position: absolute;
   display: none;
   background: silver;
   border: 1px solid gray;
   min-width: 100px;
   padding: 5px;
   z-index: 5000;
}

#menuBar .menuItem.open .menu {
   display: block;
}

#menuBar .menu .sep {
   margin-top: 3px;
   margin-bottom: 4px;
   border-top: 1px solid gray;
   width: 100%
}

#menuBar .menu .item {
   color: black;
}

#menuBar .menu .item.disabled {
   color: gray;
}

#menuBar .menu .item.mouseover {
   background: navy;
   color: white;
}

#menuBar .menu .item.mouseover.disabled {
   color: gray;
   background: navy;
}
