.tools-group {
    float: left;
    height: 30px;
    border-left: 1px solid #ccc;
    padding: 0 3px;
}

.tool-icon {
  float: left;
  cursor : pointer;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 7px 7px;
}

/*
 * Framesheet level actions:
 */
.tool-icon.tool-save {
  background-image: url(../img/actions/save.png);
}

.tool-icon.tool-export {
  background-image: url(../img/actions/image-export.png);
}

.tool-icon.tool-upload {
  background-image: url(../img/actions/image-upload.png);
}


.tool-icon.tool-add-frame {
  background-image: url(../img/actions/add.png);
}

/*
 * Tool icons:
 */
.tool-icon.tool-pen {
  background-image: url(../img/tools/pen.png);
}

.tool-icon.tool-vertical-mirror-pen {
  background-image: url(../img/tools/vertical-mirror-pen.png);
}

.tool-icon.tool-paint-bucket {
  background-image: url(../img/tools/paint-bucket.png);
}

.tool-icon.tool-eraser {
  background-image: url(../img/tools/eraser.png);
}

.tool-icon.tool-stroke {
  background-image: url(../img/tools/stroke.png);
}

.tool-icon.tool-rectangle {
  background-image: url(../img/tools/rectangle.png);
}

.tool-icon.tool-circle {
  background-image: url(../img/tools/circle.png);
}

.tool-icon.tool-move {
  background-image: url(../img/tools/hand.png);
}

.tool-icon.tool-rectangle-select {
  background-image: url(../img/tools/select.png);
}

.tool-icon.tool-shape-select {
  background-image: url(../img/tools/wand.png);
}

.tool-icon.tool-colorpicker {
  background-image: url(../img/tools/dropper.png);
}

/*.tool-icon.tool-palette {
  background-image: url(../img/tools/color-palette.png);
}*/

/*
 * Tool cursors:
 */

.tool-paint-bucket .drawing-canvas-container:hover {
  cursor: url(../img/tools/paint-bucket.png) 12 12, pointer;
}

.tool-vertical-mirror-pen .drawing-canvas-container:hover {
  cursor: url(../img/tools/vertical-mirror-pen.png) 5 15, pointer;
}

.tool-pen .drawing-canvas-container:hover {
  cursor: url(../img/tools/pen.png) 0 15, pointer;
}

.tool-eraser .drawing-canvas-container:hover {
  cursor: url(../img/tools/eraser.png) 0 15, pointer;
}

.tool-stroke .drawing-canvas-container:hover {
  cursor: url(../img/tools/pen.png) 0 15, pointer;
}

.tool-rectangle .drawing-canvas-container:hover {
  cursor: url(../img/tools/rectangle.png) 0 15, pointer;
}

.tool-circle .drawing-canvas-container:hover {
  cursor: url(../img/tools/circle.png) 2 15, pointer;
}

.tool-move .drawing-canvas-container:hover {
  cursor: url(../img/tools/hand.png) 15 15, pointer;
}

.tool-rectangle-select .drawing-canvas-container:hover {
  cursor: url(../img/tools/select.png) 15 15, pointer;
}

.tool-shape-select .drawing-canvas-container:hover {
  cursor: url(../img/tools/wand.png) 15 15, pointer;
}

.tool-colorpicker .drawing-canvas-container:hover {
  cursor: url(../img/tools/dropper.png) 0 15, pointer;
}

.tool-grid,
.tool-grid label,
.tool-grid input {
  line-height: 2.5;
  cursor: pointer;
}

.tool-icon.selected {
  cursor: auto;
  background-color: #eee;
}

.tool-icon:hover {
  background-color: #eee;
}

.tool-color-picker {
  padding: 5px 0 0 5px;
  height: 25px;
  cursor : default;
}

.tool-color-picker input {
  width: 8px; height: 8px;
  border: 1px solid black;
  padding: 1px;
  background: white;
  cursor: pointer;
  position : relative;
}

.secondary-color-picker {
  top : 8px;
}

.tool-palette {
    width: auto;
}
.tool-palette .palette li {
    float: left;
}

.palette .palette-color {
  cursor: pointer;
  display : inline-block;
  height : 20px;
  width : 20px;
  margin : 5px;
}

.palette .palette-color.transparent-color {
  background-color: white;
  height : 16px;
  width : 16px;
  border: 2px solid #000;

  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0, #fff),
    color-stop(0.45, #fff),
    color-stop(0.5, #ff0000),
    color-stop(0.55, #fff),
    color-stop(1, #fff)
  );
  background-image: -moz-linear-gradient(
      left top,
      #fff 0%,
      #fff 45%,
      #f00 50%,
      #fff 55%,
      #fff 100%
  );
}