diff --git a/css/fonts/icomoon.eot b/css/fonts/icomoon.eot
new file mode 100644
index 00000000..f5314adf
Binary files /dev/null and b/css/fonts/icomoon.eot differ
diff --git a/css/fonts/icomoon.svg b/css/fonts/icomoon.svg
new file mode 100644
index 00000000..bafc0fee
--- /dev/null
+++ b/css/fonts/icomoon.svg
@@ -0,0 +1,28 @@
+
+
+
\ No newline at end of file
diff --git a/css/fonts/icomoon.ttf b/css/fonts/icomoon.ttf
new file mode 100644
index 00000000..5ae72b63
Binary files /dev/null and b/css/fonts/icomoon.ttf differ
diff --git a/css/fonts/icomoon.woff b/css/fonts/icomoon.woff
new file mode 100644
index 00000000..a9d1e6c2
Binary files /dev/null and b/css/fonts/icomoon.woff differ
diff --git a/css/piskel-style-packaged-2015-02-19-01-09.css b/css/piskel-style-packaged-2015-02-19-01-09.css
new file mode 100644
index 00000000..dc800a80
--- /dev/null
+++ b/css/piskel-style-packaged-2015-02-19-01-09.css
@@ -0,0 +1,2947 @@
+html, body {
+ height : 100%; width: 100%;
+ margin : 0;
+ overflow: hidden;
+ cursor : default;
+ font-family: arial;
+ font-size: 11px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+ul, li {
+ margin : 0;
+ padding : 0;
+ list-style-type: none;
+}
+
+
+/* Force apparition of scrollbars on leopard */
+::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 2px;
+ background-color: #666;
+}
+
+::-webkit-scrollbar-track {
+ background-color: rgba(50, 50, 50, 0.4);
+}
+
+a, a:visited {
+ color:gold;
+}
+body {
+ background: #1D1D1D;
+}
+
+/* Browser fixes */
+::-ms-clear {
+ display: none;
+}
+
+.allow-user-select {
+ -webkit-touch-callout: initial;
+ -webkit-user-select: initial;
+ -khtml-user-select: initial;
+ -moz-user-select: initial;
+ -ms-user-select: initial;
+ user-select: initial;
+}
+
+.no-overflow {
+ overflow : hidden;
+}
+
+.image-link {
+ color : gold;
+}
+
+.pull-top,
+.pull-right,
+.pull-bottom,
+.pull-left {
+ position:absolute;
+}
+
+.pull-top {
+ top:0;
+}
+
+.pull-right {
+ right:0;
+}
+
+.pull-bottom {
+ bottom:0;
+}
+
+.pull-left {
+ left:0;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+/**
+ * Application layout
+ */
+
+.main-wrapper {
+ position: absolute;
+ top: 5px;
+ right: 0;
+ bottom: 5px;
+ left: 0;
+}
+
+.column-wrapper {
+ text-align: center;
+ font-size: 0;
+ position: absolute;
+ left: 100px; /* Reserve room for tools on the left edge of the screen. */
+ top: 0;
+ right: 50px; /* Reserve room for actions on the right edge of the screen. */
+ bottom: 0;
+}
+
+.column {
+ display: inline-block;
+}
+
+.left-column {
+ vertical-align: top;
+ height: 100%;
+ margin-right: 7px;
+}
+
+.main-column {
+ height: 100%;
+ position: relative;
+}
+
+.right-column {
+ vertical-align: top;
+ margin-left: 10px;
+ height: 100%;
+ position: relative;
+}
+
+.drawing-canvas-container {
+ font-size: 0;
+}
+
+.sticky-section {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ z-index: 1000;
+}
+
+.sticky-section .sticky-section-wrap {
+ display: table;
+ height: 100%;
+}
+
+.sticky-section .vertical-centerer {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.left-sticky-section.sticky-section {
+ left: 0;
+ max-width: 100px;
+}
+
+.left-sticky-section .tool-icon {
+ float: left;
+}
+
+.cursor-coordinates {
+ color:#888;
+ font-size:12px;
+ font-weight:bold;
+ font-family:Courier;
+}
+
+/**
+ * Canvases layout
+ */
+
+.canvas {
+ position: relative;
+ z-index: 1;
+}
+
+.canvas-container {
+ position: relative;
+ display: block;
+}
+
+.canvas-container .canvas-background {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.light-picker-background,
+.light-canvas-background .canvas-background {
+ background: url(../img/canvas_background/light_canvas_background.png) repeat;
+}
+
+.medium-picker-background,
+.medium-canvas-background .canvas-background {
+ background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+}
+
+.lowcont-medium-picker-background,
+.lowcont-medium-canvas-background .canvas-background {
+ background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+}
+
+.lowcont-dark-picker-background,
+.lowcont-dark-canvas-background .canvas-background {
+ background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+}
+
+.layers-canvas,
+.canvas.onion-skin-canvas {
+ opacity: 0.2;
+}
+
+.canvas.canvas-overlay,
+.canvas.layers-canvas,
+.canvas.onion-skin-canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.tools-wrapper,
+.options-wrapper,
+.palette-wrapper {
+ float : left;
+}
+
+/**
+ * Z-indexes should match the drawing area canvas superposition order :
+ * - 1 : draw layers below current layer
+ * - 2 : draw current layer
+ * - 3 : draw layers above current layer
+ * - 4 : draw the tools overlay
+ */
+.canvas.layers-below-canvas {z-index: 7;}
+.canvas.drawing-canvas {z-index: 8;}
+.canvas.canvas-overlay {z-index: 9;}
+.canvas.onion-skin-canvas {z-index: 10;}
+.canvas.layers-above-canvas {z-index: 11;}
+@font-face {
+ font-family: 'piskel';
+ src:url('fonts/icomoon.eot?-3olv93');
+ src:url('fonts/icomoon.eot?#iefix-3olv93') format('embedded-opentype'),
+ url('fonts/icomoon.woff?-3olv93') format('woff'),
+ url('fonts/icomoon.ttf?-3olv93') format('truetype'),
+ url('fonts/icomoon.svg?-3olv93#icomoon') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+[class^="piskel-icon-"], [class*=" piskel-icon-"] {
+ font-family: 'piskel';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.piskel-icon-eye:before {
+ content: "\e602";
+}
+
+.piskel-icon-onion:before {
+ content: "\e601";
+}
+
+.piskel-icon-download:before {
+ content: "\e600";
+}
+
+.piskel-icon-rotateleft:before {
+ content: "\e603";
+}
+
+.piskel-icon-rotateright:before {
+ content: "\e604";
+}
+
+.piskel-icon-fliph:before {
+ content: "\e605";
+}
+
+.piskel-icon-flipv:before {
+ content: "\e606";
+}
+
+.piskel-icon-trashplain:before {
+ content: "\e607";
+}
+
+.piskel-icon-trash:before {
+ content: "\e608";
+}
+
+.piskel-icon-merge:before {
+ content: "\e609";
+}
+
+.piskel-icon-pencil:before {
+ content: "\e610";
+}
+
+.piskel-icon-close:before {
+ content: "\e611";
+}
+
+.piskel-icon-minus:before {
+ content: "\e60a";
+}
+
+.piskel-icon-plus:before {
+ content: "\e60b";
+}
+
+.piskel-icon-arrow-up-fat:before {
+ content: "\e60c";
+}
+
+.piskel-icon-arrow-down-fat:before {
+ content: "\e60d";
+}
+
+.piskel-icon-arrow-up-thin:before {
+ content: "\e60e";
+}
+
+.piskel-icon-arrow-down-thin:before {
+ content: "\e60f";
+}
+
+.row {
+ display: block;
+}
+
+.textfield {
+ background : black;
+ border : 1px solid #888;
+ border-radius : 2px;
+ padding : 3px 10px;
+ color : white;
+
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+}
+
+.textfield[disabled=disabled] {
+ background : #3a3a3a;
+}
+
+.textfield-small {
+ width : 50px;
+}
+
+.button {
+ height: 24px;
+ box-sizing: border-box;
+
+ background-color: #3f3f3f;
+ border: 1px solid #333;
+ border-top-color: #666;
+ border-bottom-color: #222;
+
+ cursor: pointer;
+ text-decoration: none;
+
+ color: white;
+ text-shadow: 0px -1px 0 black;
+ font-weight: bold;
+ font-size: 1rem;
+ text-align: center;
+
+ transition: background-color 0.2s linear;
+}
+
+.button:hover {
+ text-decoration: none;
+ background-color: #484848;
+ color: gold;
+}
+
+.button-primary {
+ background-color: rgb(255,215,0); /* gold */
+
+ border-color: rgb(179, 164, 0);
+ border-top-color: white;
+ border-bottom-color: rgb(151, 133, 0);
+
+ color: black;
+ text-shadow: 0px 1px 0 #fff;
+}
+
+.button-primary:hover {
+ background-color: rgb(255,235,20);
+ color: #333;
+}
+
+.button[disabled],
+.button[disabled]:hover {
+ cursor:default;
+ background-color: #aaa;
+ color: #777;
+ text-shadow: 0px 1px 0 #bbb;
+ border-color: #666;
+ border-top-color: #999;
+ border-bottom-color: #555;
+}
+
+/** Righty sticky drawer expanded state. */
+
+.right-sticky-section.sticky-section {
+ right: 0;
+ width: 47px;
+
+ -webkit-transition: all 200ms ease-out;
+ -moz-transition: all 200ms ease-out;
+ -ms-transition: all 200ms ease-out;
+ -o-transition: all 200ms ease-out;
+ transition: all 200ms ease-out;
+}
+
+.right-sticky-section.expanded {
+ right: 280px;
+}
+
+.right-sticky-section .tool-icon {
+ float: right;
+ margin-right: 0;
+}
+
+/********************************************************** *j* j** j*j j j j** *****************/
+/* Settings icons I I I I I\I \ */
+/********************************************************** *** *** *** * * '** *****************/
+
+.tool-icon.gallery-icon {
+ background-image: url(../img/gallery.png);
+ background-position: 3px 3px;
+ background-size: 39px 39px;
+}
+
+.tool-icon.resize-icon {
+ background-image: url(../img/resize-icon.png);
+ background-position: 10px 10px;
+ background-size: 26px 26px;
+}
+
+.tool-icon.save-icon {
+ background-image: url(../img/save.png);
+ background-position: 6px 6px;
+ background-size: 36px 36px;
+}
+
+.tool-icon.gear-icon {
+ background-image: url(../img/gear.png);
+ background-position: 6px 7px;
+ background-size: 32px 32px;
+}
+
+.tool-icon.export-icon {
+ background-image: url(../img/export.png);
+ background-position: 7px 5px;
+ background-size: 36px 36px;
+ position: relative;
+}
+
+.tool-icon.local-storage-icon {
+ background-image: url(../img/local-storage-icon.png);
+ background-position: 10px 12px;
+ background-size: 30px;
+ position: relative;
+}
+
+.tool-icon.import-icon {
+ background-image: url(../img/import-icon.png);
+ background-position: 10px 5px;
+ background-size: 26px;
+ position: relative;
+}
+
+.tool-icon .label {
+ position: absolute;
+ left: 0;
+ bottom: 4px;
+ right: 0;
+ font-size: 11px;
+ text-transform: uppercase;
+ color: #fff;
+ text-align: center;
+}
+
+.drawer-content {
+ overflow: hidden;
+ background-color: #444;
+ height: 550px;
+ max-height: 100%;
+ width: 280px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ box-shadow: 0 0 5px 0 black;
+}
+
+.right-sticky-section.expanded .tool-icon {
+ padding-right: 1px;
+}
+
+.right-sticky-section .tool-icon.has-expanded-drawer {
+ position: relative;
+ background-color: #444;
+ margin-right: 0;
+ padding-right: 2px;
+ border-left : 3px solid gold;
+}
+
+/************************************************************************************************/
+/* Common settings classes */
+/************************************************************************************************/
+
+.settings-section {
+ margin: 10px 20px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #ccc;
+ text-shadow: 1px 1px #000;
+}
+
+.settings-section .button {
+ margin: 0;
+}
+
+.settings-title {
+ color : gold;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ border-bottom: 1px #aaa solid;
+ padding-bottom: 5px;
+ color: gold;
+}
+
+.settings-description {
+ margin : 0 0 10px 0;
+ display : inline-block;
+}
+
+.settings-form-section {
+ margin-bottom: 10px;
+}
+
+.settings-item {
+ margin : 10px 0;
+}
+
+[name*=checkbox] {
+ vertical-align: middle;
+}
+
+/************************************************************************************************/
+/* Application settings */
+/************************************************************************************************/
+
+.background-picker-wrapper {
+ overflow: hidden;
+ padding: 5px;
+}
+
+.background-picker {
+ cursor: pointer;
+ float: left;
+ height: 35px;
+ width: 35px;
+ background-color: transparent;
+ margin-right: 15px;
+ padding: 1px;
+ position: relative;
+}
+
+.background-picker:after {
+ content: " ";
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ bottom: -2px;
+ left: -2px;
+}
+
+.background-picker:hover:after {
+ border: #eee 1px solid;
+}
+
+.background-picker.selected:after {
+ border: gold 1px solid;
+}
+
+
+
+/************************************************************************************************/
+/* Save panel */
+/************************************************************************************************/
+
+.save-field {
+ width: 100%;
+}
+
+.save-status {
+ margin-top: 10px;
+ margin-bottom: -10px;
+ vertical-align: middle;
+ font-weight: normal;
+ text-shadow: none;
+ font-style: italic;
+}
+
+.save-file-name {
+ white-space: nowrap;
+ font-weight: bold;
+ color: white;
+ font-style: normal;
+}
+/*******************************/
+/* Gif/Png Export Setting panel*/
+/*******************************/
+.gif-download-button,
+.gif-render-button {
+ margin-top : 10px;
+ margin-right : 10px;
+}
+
+.gif-export-preview,
+.png-export-preview {
+ position:relative;
+ margin-top:10px;
+ max-height:32px;
+}
+
+.gif-export-preview {
+ max-width:32px;
+}
+
+.png-export-preview img {
+ max-height:32px;
+ float: left;
+}
+
+.gif-upload-status {
+ width: 180px;
+ margin-left: 5px;
+ margin-top: 10px;
+}
+
+.gif-upload,
+.png-export-preview {
+ overflow: hidden;
+}
+
+.gif-upload-status,
+.gif-export-preview {
+ float : left;
+}
+
+.preview-upload-ongoing:before{
+ content: "Upload ongoing ...";
+ position: absolute;
+ display: block;
+ height: 100%;
+ width: 100%;
+ text-align: center;
+ padding-top: 45%;
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ background: rgba(0,0,0,0.5);
+ color: white;
+}
+/************************************************************************************************/
+/* Import panel */
+/************************************************************************************************/
+
+.import-section,
+.resize-section {
+ margin: 10px 0;
+}
+
+.file-input-button {
+ margin-right: 8px;
+ border-radius: 2px;
+}
+
+.import-highlight {
+ font-weight: bold;
+ color: white;
+}
+.resize-section-title {
+ vertical-align: top;
+ display: inline-block;
+ padding-top: 5px;
+ width: 25%;
+}
+
+.resize-content-checkbox {
+ margin-left: 0;
+}
+
+.resize-origin-container {
+ overflow: hidden;
+ position: relative;
+ width: 70px;
+ margin-top: 5px;
+ display: inline-block;
+}
+
+.resize-origin-option {
+ float: left;
+ box-sizing: border-box;
+ position: relative;
+ margin: 0 1px 1px 0;
+ width: 20px;
+ height: 20px;
+ background : #888;
+ font-size: 8px;
+ text-align: center;
+ cursor: pointer;
+}
+
+.resize-origin-option.selected {
+ border : 3px solid gold;
+}
+
+.resize-origin-option:before {
+ content: '';
+ position: absolute;
+ display: block;
+ top: 50%;
+ left: 50%;
+ margin: -2px;
+}
+
+.resize-origin-option.selected:before {
+ content: '';
+ width: 4px;
+ height: 4px;
+ background: gold;
+}
+
+.resize-origin-option[data-neighbor]:before {
+ width: 0;
+ height: 0;
+ border-width: 4px;
+ border-style: solid;
+ border-color: transparent;
+}
+
+.resize-origin-option[data-neighbor="bottom"]:before {
+ border-top-color: gold;
+ margin-left: -4px;
+}
+
+.resize-origin-option[data-neighbor="left"]:before {
+ border-right-color: gold;
+ margin-top: -4px;
+ margin-left: -6px;
+}
+
+.resize-origin-option[data-neighbor="top"]:before {
+ border-bottom-color: gold;
+ margin-top: -6px;
+ margin-left: -4px;
+}
+
+.resize-origin-option[data-neighbor="right"]:before {
+ border-left-color: gold;
+ margin-top: -4px;
+}
+
+.resize-ratio-checkbox,
+.resize-smooth-checkbox {
+ vertical-align: -2px;
+ margin-left: 0;
+}
+.tool-icon {
+ position : relative;
+ cursor : pointer;
+ width: 46px;
+ height: 46px;
+ margin: 1px;
+ background-color: #3a3a3a;
+ background-repeat: no-repeat;
+ background-position: 12px 12px;
+ background-size: 24px 24px;
+}
+
+.tool-icon.selected {
+ cursor: default;
+ background-color: #444;
+}
+
+.tool-icon.selected:before {
+ content:"";
+ position : absolute;
+ height : 100%;
+ width : 100%;
+ border: 3px solid gold;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+
+.tool-icon:hover {
+ background-color: #444;
+}
+
+/*
+ * Tool icons:
+ */
+.tool-icon.tool-pen {
+ background-image: url(../img/tools/pen.png);
+}
+
+.tool-icon.tool-vertical-mirror-pen {
+ background-image: url(../img/tools/mirror.png);
+ background-position: 0px 10px;
+ background-size: 38px 27px;
+}
+
+.tool-icon.tool-paint-bucket {
+ background-image: url(../img/tools/paintbucket.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);
+ background-position: 12px 14px;
+ background-size: 24px 20px;
+}
+
+.tool-icon.tool-circle {
+ background-image: url(../img/tools/circle.png);
+}
+
+.tool-icon.tool-move {
+ background-image: url(../img/tools/hand.png);
+ background-size: 24px 24px;
+}
+
+.tool-icon.tool-rectangle-select {
+ background-image: url(../img/tools/rectangle_selection.png);
+ background-position: 12px 14px;
+ background-size: 24px 20px;
+}
+
+.tool-icon.tool-shape-select {
+ background-image: url(../img/tools/magicwand.png);
+}
+
+.tool-icon.tool-lighten {
+ background-image: url(../img/tools/lighten.png);
+ background-position: 8px 8px;
+ background-size: 30px 30px;
+}
+
+.tool-icon.tool-colorpicker {
+ background-image: url(../img/tools/eyedropper.png);
+ background-size: 23px 23px;
+}
+
+.tool-icon.tool-colorswap {
+ background-image: url(../img/tools/swap-colors.png);
+ background-position: 6px 6px;
+ background-size: 36px 36px;
+}
+
+.tool-icon.tool-flip {
+ background-image: url(../img/tools/flip.png);
+ background-position: 7px 11px;
+ background-size: 32px;
+}
+
+.tool-icon.tool-rotate {
+ background-image: url(../img/tools/rotate.png);
+ background-position: 10px 9px;
+ background-size: 26px;
+}
+
+.tool-icon.tool-clone {
+ background-image: url(../img/tools/clone.png);
+ background-position: 9px 15px;
+ background-size: 30px;
+}
+
+/*
+ * Tool cursors:
+ */
+
+.tool-paint-bucket .drawing-canvas-container:hover,
+.tool-colorswap .drawing-canvas-container:hover {
+ cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
+}
+
+.tool-vertical-mirror-pen .drawing-canvas-container:hover {
+ cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
+}
+
+.tool-pen .drawing-canvas-container:hover,
+.tool-lighten .drawing-canvas-container:hover {
+ cursor: url(../img/icons/pen.png) 0 15, pointer;
+}
+
+.tool-eraser .drawing-canvas-container:hover {
+ cursor: url(../img/icons/eraser.png) 0 15, pointer;
+}
+
+.tool-stroke .drawing-canvas-container:hover {
+ cursor: url(../img/icons/pen.png) 0 15, pointer;
+}
+
+.tool-rectangle .drawing-canvas-container:hover {
+ cursor: url(../img/icons/rectangle.png) 0 15, pointer;
+}
+
+.tool-circle .drawing-canvas-container:hover {
+ cursor: url(../img/icons/circle.png) 2 15, pointer;
+}
+
+.tool-move .drawing-canvas-container:hover {
+ cursor: url(../img/icons/hand.png) 15 15, pointer;
+}
+
+.tool-rectangle-select .drawing-canvas-container:hover {
+ cursor: crosshair;
+}
+
+.tool-shape-select .drawing-canvas-container:hover {
+ cursor: url(../img/icons/wand.png) 15 15, pointer;
+}
+
+.tool-colorpicker .drawing-canvas-container:hover {
+ cursor: url(../img/icons/dropper.png) 0 15, pointer;
+}
+
+.swap-colors-icon {
+ background-image: url(../img/tools/swap-arrow-square-small-grey.png);
+ position: relative;
+ top: 50px;
+ left: 6px;
+ height: 18px;
+ width: 18px;
+ background-size: 18px;
+ opacity : 0.3;
+ cursor : pointer;
+}
+
+.swap-colors-icon:hover {
+ opacity : 1;
+}
+
+.tool-color-picker {
+ position:relative;
+}
+
+.tool-color-picker:nth-child(1) {
+ z-index : 100;
+}
+
+.tool-color-picker:nth-child(2) {
+ z-index : 90;
+ margin-top: 25px;
+ margin-left:-20px;
+}
+
+.tool-color-picker input {
+ width: 16px;
+ height: 16px;
+ text-indent: -10000px;
+ border: 1px solid black;
+ background: white;
+ cursor: pointer;
+ position : relative;
+ top: 10px;
+ margin-left: 2px;
+}
+
+.tool-color-picker .secondary-color-picker {
+ top : 18px;
+ margin-left: 0;
+}
+
+.palette-wrapper {
+ margin-top: 10px;
+ margin-left: 10px;
+}
+
+.palette-color[data-color=TRANSPARENT] {
+ position: relative;
+ top: 10px;
+ left: 10px;
+ background-color: white;
+ height : 16px;
+ width : 16px;
+ border: 2px solid #000;
+ background-size: 16px 16px;
+ background-position: 0 0;
+ 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%
+ );
+}
+
+.tools-tooltip-container {
+ text-align: left;
+ padding-bottom: 5px;
+}
+
+.tools-tooltip-shortcut {
+ color:gold;
+}
+
+.tools-tooltip-descriptor {
+ color:#999;
+}
+
+.tools-tooltip-descriptor-button {
+ padding:2px;
+ border:1px Solid #999;
+ font-size:0.8em;
+ margin-right:5px;
+ width:35px;
+ text-align:center;
+ border-radius:3px;
+ display:inline-block;
+ line-height: 10px;
+}
+
+
+.action-icon {
+ cursor: pointer;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-position: 50%;
+}
+
+.edit-icon {
+ background-image: url('../img/tools/pen.png');
+ background-repeat: no-repeat;
+}
+
+.merge-icon {
+ background-image: url('../img/merge-icon.png');
+ background-repeat: no-repeat;
+}
+
+.plus-icon {
+ font-size:15px;
+ text-align:center;
+}
+
+.delete-icon {
+}
+.cheatsheet-link {
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
+
+ padding: 1px 0 0 45px;
+ color : gold;
+ font-weight: bold;
+ font-size : 1.25em;
+ line-height: 20px;
+
+ cursor : pointer;
+
+ background-image:url('../img/keyboard.png');
+ background-size:35px 20px;
+ background-repeat:no-repeat;
+ opacity: 0.5;
+ z-index: 11000;
+ transition : opacity 0.3s;
+}
+
+.cheatsheet-link:hover {
+ opacity: 1;
+}
+
+#cheatsheet-wrapper {
+ position: absolute;
+ z-index: 10000;
+
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ padding: 50px;
+
+ box-sizing: border-box;
+ -moz-box-sizing : border-box;
+
+ color: white;
+}
+
+.cheatsheet-container {
+ width: 100%;
+ height: 100%;
+
+ box-sizing: border-box;
+ -moz-box-sizing : border-box;
+
+ padding: 20px 3%;
+ border-radius: 3px;
+ background: rgba(0,0,0,0.9);
+ overflow: auto;
+}
+
+.cheatsheet-container h3 {
+ font-size:24px;
+ margin-top: 0;
+}
+
+.cheatsheet-section {
+ float: left;
+ width : 33%;
+}
+
+.cheatsheet-shortcut {
+ overflow: hidden;
+ margin: 10px 0;
+}
+
+.cheatsheet-icon.tool-icon {
+ float: left;
+ display: inline-block;
+
+ height: 30px;
+ width: 30px;
+ margin: 0 20px 0 0;
+
+ background-size: 20px 20px;
+ background-position: 5px 5px;
+}
+
+.cheatsheet-description {
+ font-family:Courier;
+ color: white;
+ font-size : 13px;
+ margin-left: 20px;
+ line-height : 30px;
+}
+
+.cheatsheet-key {
+ display : inline-block;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+
+ border : 1px solid gold;
+ border-radius: 2px;
+
+ box-sizing: border-box;
+ -moz-box-sizing : border-box;
+
+ text-align: center;
+ font-family:Courier;
+ font-weight: bold;
+ font-size : 18px;
+ color: gold;
+}
+.color-picker-slider * {
+ box-sizing: border-box;
+}
+
+.color-picker-slider input[type="range"] {
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+ width: 100%;
+ border: none;
+ padding: 1px 2px;
+ border-radius: 3px;
+ background-image: linear-gradient(to right, hsl(0, 30%, 70%) 0, hsl(359, 30%, 70%) 100%);
+ box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
+ outline: none; /* no focus outline */
+}
+
+/* thumb */
+
+.color-picker-slider input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ cursor:pointer;
+ width: 7px;
+ height: 18px;
+ border: none;
+ border-radius: 2px;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
+ background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
+ background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
+}
+.color-picker-slider input[type="range"]::-moz-range-thumb {
+ width: 7px;
+ height: 18px;
+ border: none;
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
+}
+
+.color-picker-slider input[type="range"]::-ms-thumb {
+ width: 7px;
+ height: 18px;
+ border-radius: 2px;
+ border: 0;
+ background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
+}
+
+/*CROSS BROWSER RESET*/
+
+
+.color-picker-slider input[type="range"]::-moz-range-track {
+ border: inherit;
+ background: transparent;
+}
+
+.color-picker-slider input[type="range"]::-ms-track {
+ border: inherit;
+ color: transparent; /* don't drawn vertical reference line */
+ background: transparent;
+}
+
+.color-picker-slider input[type="range"]::-ms-fill-lower,
+.color-picker-slider input[type="range"]::-ms-fill-upper {
+ background: transparent;
+}
+
+.color-picker-slider input[type="range"]::-ms-tooltip {
+ display: none;
+}
+
+.color-picker-slider,
+.color-picker-input {
+ padding: 0 10px;
+ height : 25px;
+ overflow: hidden;
+}
+
+.color-picker-slider span{
+ line-height : 25px;
+ width : 10px;
+ float:left;
+}
+
+.color-picker-slider input[type="range"]{
+ float:left;
+ height : 10px;
+ width : 100px;
+ margin: 7px 1px 7px 8px;
+}
+
+.color-picker-slider input[type="text"]{
+ float:left;
+ width : 47px;
+ margin-left: 5px;
+}
+
+.color-picker-input {
+ margin-bottom: 10px;
+}
+
+.color-picker-input .textfield{
+ width:100%;
+}
+
+.color-picker-slider input[type="range"][data-dimension="h"] {
+ background-image:linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+#dialog-container-wrapper {
+ position: absolute;
+ z-index: 20000;
+
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ padding: 50px 150px;
+ overflow: hidden;
+
+ box-sizing: border-box;
+ -moz-box-sizing : border-box;
+
+ background-color: rgba(0,0,0,0.8);
+ opacity: 0;
+ pointer-events: none;
+
+ color: white;
+}
+
+#dialog-container-wrapper.animated {
+ transition: opacity 0.5s;
+}
+
+#dialog-container-wrapper.show {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+#dialog-container {
+ width: 100%;
+ height: 100%;
+
+ margin-top: -1500px;
+
+ box-sizing: border-box;
+ -moz-box-sizing : border-box;
+
+ border-radius: 3px;
+ border : 3px solid gold;
+ background: #444;
+ overflow: auto;
+}
+
+.animated #dialog-container {
+ transition:margin-top 0.5s;
+}
+
+.show #dialog-container {
+ margin-top: 0;
+}
+
+#dialog-container.browse-local {
+ width: 700px;
+ height: 500px;
+ top : 50%;
+ left : 50%;
+ position : absolute;
+ margin-left: -350px;
+}
+
+.show #dialog-container.browse-local {
+ margin-top: -250px;
+}
+
+#dialog-container.import-image {
+ width: 500px;
+ height: 300px;
+ top : 50%;
+ left : 50%;
+ position : absolute;
+ margin-left: -250px;
+}
+
+.show #dialog-container.import-image {
+ margin-top: -150px;
+}
+
+.dialog-wrapper {
+ height: 100%;
+ position : relative;
+}
+
+.dialog-head {
+ width: 100%;
+ background: gold;
+ margin: 0;
+ padding: 10px;
+ color: black;
+ font-size: 1.8em;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+
+.dialog-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ line-height: 45px;
+ margin-right: 10px;
+ font-size: 1.3em;
+ cursor: pointer;
+}
+/************************************************************************************************/
+/* Import dialog */
+/************************************************************************************************/
+
+.import-section-preview {
+ display : inline-block;
+ height : 60px;
+ width: 60px;
+ border : 1px dashed #999;
+ border-radius: 3px;
+}
+
+.dialog-section-title {
+ display : inline-block;
+ width: 55px;
+}
+
+.import-size-field,
+.resize-size-field {
+ width: 50px;
+ margin-right: 8px;
+ text-align: right;
+}
+
+.import-size-field:nth-of-type(2),
+.resize-size-field:nth-of-type(2) {
+ margin-left: 5px;
+}
+
+.import-image-file-name {
+ display: inline-block;
+ overflow: hidden;
+
+ height: 2rem;
+ word-break : break-all;
+ vertical-align: middle;
+ font-style: italic;
+ font-weight: normal;
+ text-shadow: none;
+}
+
+[name=smooth-resize-checkbox] {
+ margin : 0 8px;
+}
+
+.dialog-import-body {
+ padding:10px 20px;
+ font-size:1.5em
+}
+
+.import-button {
+ font-size: 1em;
+ height: auto;
+ padding: 5px 10px;
+}
+
+/************************************************************************************************/
+/* Browse local piskels panel */
+/************************************************************************************************/
+
+.local-piskel-list {
+ width: 100%;
+}
+
+.local-piskel-item {
+ height: 3em;
+}
+
+.local-piskel-name {
+ width: 40%;
+}
+
+.local-piskel-save-date {
+ font-weight : normal;
+}
+
+.local-piskel-list a {
+ text-decoration: none;
+}
+
+.local-piskel-list a:hover {
+ text-decoration: underline;
+}
+
+.local-piskel-list-head {
+ font-weight: bold;
+ color: gold;
+}
+
+.local-piskel-load-button,
+.local-piskel-delete-button {
+ width : 75px;
+}
+#dialog-container.create-palette {
+ width: 500px;
+ height: 600px;
+ top : 50%;
+ left : 50%;
+ position : absolute;
+ margin-left: -250px;
+}
+
+.show #dialog-container.create-palette {
+ margin-top: -300px;
+}
+
+.create-palette-section {
+ position: absolute;
+ left: 10px;
+ top: 50px;
+}
+
+.create-palette-import-section {
+ display : inline-block;
+}
+
+.colors-container {
+ position: absolute;
+
+ left: 10px;
+ right: 10px;
+ top: 85px;
+
+ height: 460px;
+
+ border: 1px solid black;
+ background: #333;
+}
+
+.color-picker-container {
+ position:absolute;
+ left : 280px;
+ top:0;
+ bottom:0;
+ right:0;
+ background: #222;
+}
+
+.create-palette-actions {
+ position: absolute;
+ box-sizing: border-box;
+
+ width:100%;
+ height: 45px;
+
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ padding:10px;
+ text-align:right;
+}
+
+.color-preview {
+ width: 170px;
+ height: 70px;
+ margin: 11px;
+}
+
+.colors-list {
+ overflow: auto;
+ width: 280px;
+ box-sizing: border-box;
+ height: 100%;
+ padding-bottom: 10px;
+}
+
+.create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
+ position:relative;
+ float : left;
+
+ width : 44px;
+ height : 44px;
+ margin : 10px 0 0 10px;
+
+ box-sizing : border-box;
+
+ cursor : pointer;
+}
+
+@-moz-document url-prefix() {
+ .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
+ margin : 7px 0 0 7px;
+ }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .create-palette-color, .create-palette-new-color, .colors-list-drop-proxy{
+ margin : 7px 0 0 7px;
+ }
+}
+
+
+.create-palette-color {
+ border:1px solid #2c2c2c;
+ transition : border-color 0.2s;
+}
+.create-palette-color:hover {
+ border:1px solid gold;
+}
+
+.colors-list-drop-proxy {
+ border:2px dotted #eee;
+}
+
+.create-palette-new-color {
+ border:2px dotted gold;
+
+ border-radius: 2px;
+ line-height: 40px;
+ text-align: center;
+ font-size: 20px;
+ color: gold;
+}
+
+.create-palette-color.selected {
+ border:2px solid gold;
+}
+
+.create-palette-remove-color {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 2px 4px 0 0;
+ opacity : 0.2;
+
+ font-weight: bold;
+ color: rgb(255,255,255);
+ text-shadow : 0 0 1px rgb(0,0,0);
+
+ transition : opacity 0.3s, color 0.1s;
+}
+
+.light-color .create-palette-remove-color {
+ color: rgb(0,0,0);
+ text-shadow : 0 0 1px rgb(255,255,255);
+}
+
+.selected .create-palette-remove-color {
+ top: -1px;
+ right: -1px;
+}
+
+.create-palette-color:hover .create-palette-remove-color {
+ opacity: 0.6;
+}
+
+.create-palette-color .create-palette-remove-color:hover {
+ opacity: 1;
+ color: rgb(240,80,80);
+ text-shadow : 0 0 1px rgb(0,0,0);
+}
+
+/*SPECTRUM OVERRIDES*/
+
+.create-palette .sp-container{
+ background-color: transparent;
+ border: none;
+ box-shadow : none;
+ border-radius:0;
+ padding:5px;
+}
+.user-message {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 10px 47px;
+ max-width: 300px;
+
+ border-top-left-radius: 7px;
+ border: #F0C36D 1px solid;
+ border-right: 0;
+ border-bottom: 0;
+
+ color: #222;
+ background-color: #F9EDBE;
+
+ font-weight: bold;
+ font-size: 13px;
+
+ z-index: 30000;
+}
+
+.user-message .close {
+ position: absolute;
+ top: 6px;
+ right: 17px;
+
+ color: gray;
+
+ font-size: 18px;
+ font-weight: bold;
+
+ cursor: pointer;
+}
+
+.user-message .close:hover {
+ color: black;
+}
+
+.progress-bar-container {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ padding: 10px;
+ width: 360px;
+ border-top-right-radius: 2px;
+ border: gold 2px solid;
+ border-left: 0;
+ border-bottom: 0;
+ background-color: #444;
+ font-size: 14px;
+ z-index: 30000;
+ color: #eee;
+}
+
+.progress-bar-item {
+ float: left;
+ height:20px;
+}
+
+.progress-bar-status {
+ line-height: 20px;
+ width : 40px;
+ overflow : hidden;
+ margin: 0 0 0 10px;
+}
+
+.progress-bar {
+ border : 1px solid grey;
+ margin-top: 8px;
+ height : 4px;
+ width : 300px;
+ background : linear-gradient(to left, gold, gold) no-repeat -300px 0;
+ background-color : black;
+}
+.toolbox-container {
+ border: 4px solid #888;
+ font-size: medium;
+ color: white;
+ text-align: left;
+ border-radius: 4px;
+ margin-top: 5px;
+ margin-bottom: 10px;
+ overflow: hidden;
+}
+
+.toolbox-title {
+ padding: 8px;
+ margin: 0;
+ font-size: 15px;
+ background: #222;
+}
+
+/**
+ * Layers container
+ */
+.layers-list-container {
+}
+
+/*.layers-title {
+ background-image: url('../img/layers.svg');
+ background-size: 22px;
+ background-repeat: no-repeat;
+ background-position: 97%;
+}*/
+
+.layers-title {
+ position: relative;
+}
+
+.layers-toggle-preview {
+ position: absolute;
+ top: 0.3em;
+ right: 0.5em;
+
+ color: #999;
+ font-size: 1.3em;
+ cursor: pointer;
+
+ transition: 0.2s linear;
+}
+
+.layers-toggle-preview:hover {
+ color: white;
+}
+
+.layers-toggle-preview-enabled,
+.layers-toggle-preview-enabled:hover {
+ color : gold;
+}
+
+.layers-list {
+ font-size : 12px;
+}
+
+.layer-item {
+ height:24px;
+ line-height: 24px;
+ padding : 0 0 0 10px;
+ border-top: 1px solid #444;
+ cursor : pointer;
+}
+
+.layer-item:hover {
+ background : #222;
+}
+
+.current-layer-item,
+.current-layer-item:hover {
+ background : #333;
+ color: gold;
+}
+
+.layers-button-container {
+ overflow : hidden;
+}
+
+.layers-button {
+ margin: 0;
+ width: 16.66667%;
+ float : left;
+}
+
+/* @override */
+.layers-button-container .layers-button {
+ border-left-width: 0;
+}
+
+.layers-button:last-child {
+ border-right-width: 0;
+}
+.palettes-title {
+ background-size: 22px;
+ background-repeat: no-repeat;
+ background-position: 97%;
+}
+.palettes-list-colors {
+ overflow: auto;
+ max-height: 160px;
+}
+.palettes-list-color {
+ cursor: pointer;
+ float: left;
+ margin: 0 0 5px 5px;
+ width: 32px;
+ height: 32px;
+ position: relative;
+}
+.palettes-list-color:nth-child(-n+5) {
+ margin-top: 5px;
+}
+.palettes-list-color div {
+ width: 32px;
+ height: 32px;
+}
+.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div {
+ width: 29px
+}
+.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
+ content: "";
+ position: absolute;
+ bottom: 1px;
+ display: inline-block;
+ border: 7px solid gold;
+ border-top-color: transparent;
+ width: 0px;
+ height: 0px;
+}
+.palettes-list-primary-color:before {
+ left: 1px;
+ border-right-color: transparent;
+}
+.palettes-list-secondary-color:before {
+ right: 1px;
+ border-left-color: transparent;
+}
+.palettes-list-actions {
+ background-color: #3f3f3f;
+ border-bottom-color: #222;
+ height: 24px;
+ padding: 0;
+ overflow: hidden;
+}
+
+.palettes-list-button,
+.palettes-list-select {
+ margin: 0;
+ float: left;
+}
+
+.palettes-list-button {
+ width: 16.66667%;
+}
+.palettes-list-select {
+ width: 66.66667%;
+ height: 100%;
+ padding: 0 5px 0 5px;
+
+ border-style: solid;
+ border-width: 1px 0 1px 0;
+
+ color: #aaa;
+ font-size : 0.75em;
+
+ /*thanks firefox, you suck*/
+ text-align:left;
+ /*text-shadow:none;*/
+ font-weight: normal;
+
+ transition : background-color 0.3s, color 0.3s;
+ cursor:pointer;
+}
+
+.palettes-list-select:hover {
+ color: white;
+ background-color: #484848;
+}
+
+.palettes-list-select:focus {
+ background-color: #484848;
+ color: white;
+ outline: none;
+}
+
+.palettes-list-actions .edit-icon {
+ background-size: 15px;
+ background-position: 50%;
+}
+.palettes-list-no-colors {
+ height: 42px;
+ width: 100%;
+ color: grey;
+ font-size: 0.7em;
+ font-style: italic;
+ line-height: 42px;
+ text-align: center
+}
+
+/**
+ * Animated preview styles.
+ */
+
+.preview-container {
+ border : 0 Solid black;
+ border-radius:5px 0 0 5px;
+ box-shadow : 0 0 2px rgba(0,0,0,0.2);
+ font-size: 0;
+}
+
+.preview-container .canvas-container {
+ overflow : hidden;
+}
+
+.preview-container canvas {
+ border : 0 Solid transparent;
+}
+
+.canvas-container .animated-preview-canvas-background {
+ position : relative;
+ height: 100%;
+}
+
+#animated-preview-container {
+ background: #333;
+ border-radius : 0 0 2px 2px;
+ overflow : hidden;
+}
+
+.canvas-container-wrapper {
+ height :200px;
+ width : 200px;
+ overflow:hidden;
+}
+
+.tiled-frame-container {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ background-repeat : repeat;
+}
+
+.display-fps {
+ float: left;
+ color: #aaa;
+ font-size: 12px;
+ min-width: 55px;
+ vertical-align: bottom;
+ line-height: 26px;
+}
+
+.range-fps {
+ overflow: hidden;
+ width: 100px;
+ height : 26px;
+ margin : 0;
+ box-sizing: border-box;
+ padding:0;
+}
+
+.preview-toggle-onion-skin {
+ font-size: 2rem;
+ color: #aaa;
+ float: left;
+ line-height: 26px;
+ height: 100%;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-right: 1px solid #222;
+ transition: 0.2s linear;
+ cursor:pointer;
+}
+
+.preview-toggle-onion-skin:hover {
+ color : white;
+}
+
+.preview-toggle-onion-skin-enabled,
+.preview-toggle-onion-skin-enabled:hover {
+ color : gold;
+}
+.transformations-container .tool-icon {
+ float:left;
+}
+/***
+Spectrum Colorpicker v1.1.2
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+.sp-container {
+ position:absolute;
+ top:0;
+ left:0;
+ display:inline-block;
+ *display: inline;
+ *zoom: 1;
+ /* https://github.com/bgrins/spectrum/issues/40 */
+ z-index: 9999994;
+ overflow: hidden;
+}
+.sp-container.sp-flat {
+ position: relative;
+}
+
+/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+.sp-top {
+ position:relative;
+ width: 100%;
+ display:inline-block;
+}
+.sp-top-inner {
+ position:absolute;
+ top:0;
+ left:0;
+ bottom:0;
+ right:0;
+}
+.sp-color {
+ position: absolute;
+ top:0;
+ left:0;
+ bottom:0;
+ right:20%;
+}
+.sp-hue {
+ position: absolute;
+ top:0;
+ right:0;
+ bottom:0;
+ left:84%;
+ height: 100%;
+}
+.sp-fill {
+ padding-top: 80%;
+}
+.sp-sat, .sp-val {
+ position: absolute;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+}
+
+.sp-alpha-enabled .sp-top {
+ margin-bottom: 18px;
+}
+.sp-alpha-enabled .sp-alpha {
+ display: block;
+}
+.sp-alpha-handle {
+ position:absolute;
+ top:-4px;
+ bottom: -4px;
+ width: 6px;
+ left: 50%;
+ cursor: pointer;
+ border: 1px solid black;
+ background: white;
+ opacity: .8;
+}
+.sp-alpha {
+ display: none;
+ position: absolute;
+ bottom: -14px;
+ right: 0;
+ left: 0;
+ height: 8px;
+}
+.sp-alpha-inner {
+ border: solid 1px #333;
+}
+
+/* Don't allow text selection */
+.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
+ -webkit-user-select:none;
+ -moz-user-select: -moz-none;
+ -o-user-select:none;
+ user-select: none;
+}
+
+.sp-container.sp-input-disabled .sp-input-container {
+ display: none;
+}
+.sp-container.sp-buttons-disabled .sp-button-container {
+ display: none;
+}
+.sp-palette-only .sp-picker-container {
+ display: none;
+}
+.sp-palette-disabled .sp-palette-container {
+ display: none;
+}
+
+.sp-initial-disabled .sp-initial {
+ display: none;
+}
+
+
+/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
+.sp-sat {
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+ background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+ background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+ filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+}
+.sp-val {
+ background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+ background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+ background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+ filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+}
+
+.sp-hue {
+ background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+ background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+/* IE filters do not support multiple color stops.
+ Generate 6 divs, line them up, and do two color gradients for each.
+ Yes, really.
+ */
+.sp-1 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+}
+.sp-2 {
+ height:16%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+}
+.sp-3 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+}
+.sp-4 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+}
+.sp-5 {
+ height:16%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+}
+.sp-6 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+}
+
+.sp-hidden {
+ display: none !important;
+}
+
+/* Clearfix hack */
+.sp-cf:before, .sp-cf:after { content: ""; display: table; }
+.sp-cf:after { clear: both; }
+.sp-cf { *zoom: 1; }
+
+/* Mobile devices, make hue slider bigger so it is easier to slide */
+@media (max-device-width: 480px) {
+ .sp-color { right: 40%; }
+ .sp-hue { left: 63%; }
+ .sp-fill { padding-top: 60%; }
+}
+.sp-dragger {
+ border-radius: 5px;
+ height: 5px;
+ width: 5px;
+ border: 1px solid #fff;
+ background: #000;
+ cursor: pointer;
+ position:absolute;
+ top:0;
+ left: 0;
+}
+.sp-slider {
+ position: absolute;
+ top:0;
+ cursor:pointer;
+ height: 3px;
+ left: -1px;
+ right: -1px;
+ border: 1px solid #000;
+ background: white;
+ opacity: .8;
+}
+
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
+.sp-container {
+ border-radius: 0;
+ background-color: #ECECEC;
+ border: solid 1px #f0c49B;
+ padding: 0;
+}
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue
+{
+ font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.sp-top
+{
+ margin-bottom: 3px;
+}
+.sp-color, .sp-hue
+{
+ border: solid 1px #666;
+}
+
+/* Input */
+.sp-input-container {
+ float:right;
+ width: 100px;
+ margin-bottom: 4px;
+}
+.sp-initial-disabled .sp-input-container {
+ width: 100%;
+}
+.sp-input {
+ font-size: 12px !important;
+ border: 1px inset;
+ padding: 4px 5px;
+ margin: 0;
+ width: 100%;
+ background:transparent;
+ border-radius: 3px;
+ color: #222;
+}
+.sp-input:focus {
+ border: 1px solid orange;
+}
+.sp-input.sp-validation-error
+{
+ border: 1px solid red;
+ background: #fdd;
+}
+.sp-picker-container , .sp-palette-container
+{
+ float:left;
+ position: relative;
+ padding: 10px;
+ padding-bottom: 300px;
+ margin-bottom: -290px;
+}
+.sp-picker-container
+{
+ width: 172px;
+ border-left: solid 1px #fff;
+}
+
+/* Palettes */
+.sp-palette-container
+{
+ border-right: solid 1px #ccc;
+}
+
+.sp-palette .sp-thumb-el {
+ display: block;
+ position:relative;
+ float:left;
+ width: 24px;
+ height: 15px;
+ margin: 3px;
+ cursor: pointer;
+ border:solid 2px transparent;
+}
+.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+ border-color: orange;
+}
+.sp-thumb-el
+{
+ position:relative;
+}
+
+/* Initial */
+.sp-initial
+{
+ float: left;
+ border: solid 1px #333;
+}
+.sp-initial span {
+ width: 30px;
+ height: 25px;
+ border:none;
+ display:block;
+ float:left;
+ margin:0;
+}
+
+/* Buttons */
+.sp-button-container {
+ float: right;
+}
+
+/* Replacer (the little preview div that shows up instead of the ) */
+.sp-replacer {
+ margin:0;
+ overflow:hidden;
+ cursor:pointer;
+ padding: 4px;
+ display:inline-block;
+ *zoom: 1;
+ *display: inline;
+ border: solid 1px #91765d;
+ background: #eee;
+ color: #333;
+ vertical-align: middle;
+}
+.sp-replacer:hover, .sp-replacer.sp-active {
+ border-color: #F0C49B;
+ color: #111;
+}
+.sp-replacer.sp-disabled {
+ cursor:default;
+ border-color: silver;
+ color: silver;
+}
+.sp-dd {
+ padding: 2px 0;
+ height: 16px;
+ line-height: 16px;
+ float:left;
+ font-size:10px;
+}
+.sp-preview
+{
+ position:relative;
+ width:25px;
+ height: 20px;
+ border: solid 1px #222;
+ margin-right: 5px;
+ float:left;
+ z-index: 0;
+}
+
+.sp-palette
+{
+ *width: 220px;
+ max-width: 220px;
+}
+.sp-palette .sp-thumb-el
+{
+ width:16px;
+ height: 16px;
+ margin:2px 1px;
+ border: solid 1px #d0d0d0;
+}
+
+.sp-container
+{
+ padding-bottom:0;
+}
+
+
+/* Buttons: http://hellohappy.org/css3-buttons/ */
+.sp-container button {
+ background-color: #eeeeee;
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
+ border: 1px solid #ccc;
+ border-bottom: 1px solid #bbb;
+ border-radius: 3px;
+ color: #333;
+ font-size: 14px;
+ line-height: 1;
+ padding: 5px 4px;
+ text-align: center;
+ text-shadow: 0 1px 0 #eee;
+ vertical-align: middle;
+}
+.sp-container button:hover {
+ background-color: #dddddd;
+ background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
+ border: 1px solid #bbb;
+ border-bottom: 1px solid #999;
+ cursor: pointer;
+ text-shadow: 0 1px 0 #ddd;
+}
+.sp-container button:active {
+ border: 1px solid #aaa;
+ border-bottom: 1px solid #888;
+ -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+}
+.sp-cancel
+{
+ font-size: 11px;
+ color: #d93f3f !important;
+ margin:0;
+ padding:2px;
+ margin-right: 5px;
+ vertical-align: middle;
+ text-decoration:none;
+
+}
+.sp-cancel:hover
+{
+ color: #d93f3f !important;
+ text-decoration: underline;
+}
+
+
+.sp-palette span:hover, .sp-palette span.sp-thumb-active
+{
+ border-color: #000;
+}
+
+.sp-preview, .sp-alpha, .sp-thumb-el
+{
+ position:relative;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
+{
+ display:block;
+ position:absolute;
+ top:0;left:0;bottom:0;right:0;
+}
+
+.sp-palette .sp-thumb-inner
+{
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+}
+
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
+{
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+}
+
+/**
+ * Piskel specific CSS for spectrum widgets
+ */
+
+/* Widget's main container */
+.sp-container {
+ border-radius: 4px;
+ background-color: #2B2B2B;
+ border: solid 4px #888;
+ padding: 5px 5px 0 5px;
+ box-shadow : 0 0 5px 0 black;
+}
+
+.sp-container[data-y-position=bottom] {
+ border-top-left-radius: 0;
+}
+
+.sp-container[data-y-position=top] {
+ border-bottom-left-radius: 0;
+}
+
+/* Color square container */
+.sp-color, .sp-hue {
+ border : 1px solid #222;
+}
+
+/* Remove the padding on the input container */
+.sp-replacer {
+ padding: 4px;
+ height: 100%;
+ border-width: 0;
+ box-sizing: border-box;
+ -moz-box-sizing:border-box;
+ background-color: #444;
+}
+
+.sp-replacer:hover {
+ background-color: #888;
+}
+
+/* Hide the triangle */
+.sp-dd {
+ display: none;
+}
+
+/* */
+.sp-preview {
+ margin-right: 0;
+ height: 100%;
+ width: 39px;
+ border-width: 0;
+}
+
+.sp-palette-row-selection {
+ max-width: 62px;
+}
+
+.sp-palette .sp-thumb-el {
+ margin : 0 5px 5px 0;
+ width: 24px;
+ height: 24px;
+ border-color: #444;
+
+}
+
+.sp-picker-container, .sp-palette-container {
+ padding-top: 5px;
+ padding-right: 5px;
+ padding-left: 5px;
+ border-left-width: 0;
+ border-right-width: 0;
+}
+
+.sp-picker-container {
+ padding: 5px;
+ padding-bottom: 300px;
+ margin-bottom: -295px;
+}
+
+.sp-slider {
+ height: 5px;
+ left: -2px;
+ right: -2px;
+ border: 2px solid white;
+ background: rgba(255,255,255,0);
+ opacity: 1;
+ border-radius: 2px;
+ box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
+}
+
+.sp-dragger {
+ border-radius: 8px;
+ height: 12px;
+ width: 12px;
+ border: 2px solid white;
+ background: none;
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
+}
+
+.sp-palette .sp-thumb-el.sp-thumb-active {
+ border-color: gold;
+ box-shadow: 0 0 0px 1px gold;
+}
+
+.sp-input {
+ border: 1px solid #666;
+ margin: 0;
+ background: #111;
+ border-radius: 2px;
+ color: #D3D3D3;
+ font-family: Courier!important;
+}
+
+.sp-input.sp-validation-error {
+ background: #330000;
+}
+/*!
+ * Bootstrap v2.1.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.clearfix {
+ *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+ display: table;
+ content: "";
+ line-height: 0;
+}
+.clearfix:after {
+ clear: both;
+}
+.hide-text {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+.input-block-level {
+ display: block;
+ width: 100%;
+ min-height: 30px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.tooltip {
+ position: absolute;
+ z-index: 30000;
+ display: block;
+ visibility: visible;
+ padding: 5px;
+ font-size: 11px;
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+.tooltip.in {
+ opacity: 0.8;
+ filter: alpha(opacity=80);
+}
+.tooltip.top {
+ margin-top: -3px;
+}
+.tooltip.right {
+ margin-left: 3px;
+}
+.tooltip.bottom {
+ margin-top: 3px;
+}
+.tooltip.left {
+ margin-left: -3px;
+}
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: #ffffff;
+ text-align: center;
+ text-decoration: none;
+ background-color: #000000;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.tooltip.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #000000;
+}
+.tooltip.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-width: 5px 5px 5px 0;
+ border-right-color: #000000;
+}
+.tooltip.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #000000;
+}
+.tooltip.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #000000;
+}
+
+.tooltip {
+ line-height: 20px;
+}
+
+.tooltip.in {
+ opacity: 0.95;
+ filter: alpha(opacity=95);
+}
+
+.tooltip {
+ line-height: 20px;
+}
+.preview-list-wrapper {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+}
+
+.preview-list-scroller {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 100%;
+}
+
+.top-overflow,
+.bottom-overflow {
+ height: 20px;
+ position: absolute;
+ left: 0;
+ right: 12px;
+
+ -webkit-transition: all 500ms ease-out;
+ -moz-transition: all 500ms ease-out;
+ -ms-transition: all 500ms ease-out;
+ -o-transition: all 500ms ease-out;
+ transition: all 500ms ease-out;
+
+ background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)),
+ linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8));
+ background-size: 29px 45px;
+ background-repeat: repeat-x;
+ background-position-x: 3px;
+ z-index: 10;
+}
+
+.top-overflow {
+ top: -20px;
+}
+
+.bottom-overflow {
+ bottom: -20px;
+ background-position-x: 0;
+ background-position-y: -23px;
+}
+
+.top-overflow-visible .top-overflow {
+ top: 0;
+}
+
+.bottom-overflow-visible .bottom-overflow {
+ bottom: 0;
+}
+
+.preview-list {
+ list-style-type: none;
+ padding-right: 7px;
+}
+
+.add-frame-action {
+ border: #888 solid 4px;
+ font-size: 13px;
+ color: #888;
+ cursor: pointer;
+ padding: 6px 0;
+ border-radius: 4px;
+ margin-top: 8px;
+ background-image: url(../img/plus.png);
+ background-repeat: no-repeat;
+ background-position: 3px 7px;
+ background-size: 26px 26px;
+ text-indent: 18px;
+ background-color: #222;
+}
+
+.add-frame-action .label {
+ width: 80px;
+ margin: 0 auto;
+}
+
+.add-frame-action:hover {
+ border-color: gold;
+}
+
+.preview-tile {
+ position: relative;
+ border: #444 3px solid;
+ border-radius: 3px;
+ margin: 5px 0;
+ width: 96px;
+ height: 96px;
+}
+
+.preview-tile:first-child {
+ margin-top: 0;
+}
+
+.preview-tile:hover {
+ border: #999 3px solid;
+}
+
+.tile-view {
+ position : relative;
+}
+
+.preview-tile .tile-overlay {
+ z-index: 10;
+ position: absolute;
+ background-color: rgba(100, 100, 100, 0.6);
+ opacity: 0;
+ height: 30px;
+ width: 30px;
+ border: none;
+}
+
+.preview-tile:hover .tile-overlay {
+ opacity: 1.0;
+}
+
+.preview-tile .tile-overlay.tile-count {
+ display: block;
+ opacity: 1.0;
+ border-bottom-right-radius: 3px;
+ top: 0;
+ left: 0;
+ font-size: 14px;
+ line-height: 30px;
+ color: white;
+ font-weight: bold;
+ text-align: center;
+ cursor: default;
+}
+
+.preview-tile .tile-overlay.delete-frame-action {
+ background-image: url(../img/garbage.png);
+ background-repeat: no-repeat;
+ top: 0;
+ right: 0;
+ border-bottom-left-radius: 3px;
+ height: 30px;
+ width: 30px;
+ background-position: 5px 5px;
+ background-size: 20px;
+ cursor: pointer;
+}
+
+.preview-tile .tile-overlay.duplicate-frame-action {
+ bottom: 0;
+ right: 0;
+ border-bottom-left-radius: 3px;
+ background-image: url(../img/duplicate.png);
+ background-repeat: no-repeat;
+ background-position: 5px 5px;
+ background-size: 20px;
+ cursor: pointer;
+}
+
+.preview-tile .tile-overlay.dnd-action {
+ bottom: 0;
+ left: 0;
+ border-top-right-radius: 3px;
+ background-image: url(../img/dragndrop.png);
+ background-repeat: no-repeat;
+ background-position: 5px 5px;
+ background-size: 20px;
+ cursor: move;
+}
+
+.preview-tile.selected {
+ border-color: gold;
+}
+
+.preview-tile.selected:after {
+ content: " ";
+ position: absolute;
+ top: 38px;
+ right: -15px;
+ border: transparent 4px solid;
+ border-left-color: gold;
+ border-width: 6px;
+ border-style: solid;
+}
+
+
+/**
+ * Drag n drop styles.
+ */
+
+.preview-tile-drop-proxy {
+ border: 3px dashed gold;
+ height: 90px;
+ border-radius: 9px;
+ background-color: rgba(255, 215,0, 0.2);
+}
+
+.minimap-crop-frame {
+ position:absolute;
+ border:1px solid rgba(255,255,255,0.5);
+ z-index:100;
+ box-sizing : border-box;
+ -moz-box-sizing : border-box;
+ cursor : pointer;
+}
\ No newline at end of file
diff --git a/img/merge-icon.png b/img/merge-icon.png
new file mode 100644
index 00000000..3210c100
Binary files /dev/null and b/img/merge-icon.png differ
diff --git a/img/tools/clone.png b/img/tools/clone.png
new file mode 100644
index 00000000..ca02ff71
Binary files /dev/null and b/img/tools/clone.png differ
diff --git a/img/tools/flip.png b/img/tools/flip.png
new file mode 100644
index 00000000..c2fbc8c8
Binary files /dev/null and b/img/tools/flip.png differ
diff --git a/img/tools/rotate.png b/img/tools/rotate.png
new file mode 100644
index 00000000..cea4c5cb
Binary files /dev/null and b/img/tools/rotate.png differ
diff --git a/index.html b/index.html
index 468cb0a0..03672105 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
@@ -67,17 +68,19 @@
+
+
+
-