/*

Spritemate stylesheet


 */

:root {
  --red: #e6007e;
  --blue: #00b9ee;
  --icon_outline: #111111;
  --inactive_text: #aaaaaa;
  --active_text: #ffffff;
}

body,
html,
p,
div {
  font-size: 96%;
  font-family: "Quicksand", sans-serif;
  margin: 0;
}

p {
  margin: 8px;
  line-height: 160%;
}

a {
  text-decoration: none;
  color: var(--blue);
}

a:hover {
  color: var(--red);
}

body,
html {
  background-color: #111111;
  color: #33bb33;

  background: radial-gradient(black 25%, transparent 16%) 0 0,
    radial-gradient(black 25%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, 0.1) 25%, transparent 20%) 0 1px,
    radial-gradient(rgba(255, 255, 255, 0.1) 25%, transparent 20%) 8px 9px;
  background-color: #282828;
  background-size: 16px 16px;

  /* prevent text selection on page when double clicking anywhere */
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  moz-user-select: none; /* mozilla browsers */
  khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
}

h1 {
  font-size: 160%;
  color: var(--blue);
  text-align: center;
  margin-bottom: 0px;
}

h2 {
  font-size: 110%;
  color: var(--blue);
  text-align: center;
  margin: 0px 0px 12px 0px;
}

ol {
  counter-reset: item;
}

ol li {
  display: block;
}

ol li:before {
  content: counters(item, ".") ".";
  counter-increment: item;
  padding-right: 16px;
  margin-left: -20px;
}

#help h1,
#help h2 {
  text-align: left;
}

legend {
  font-size: 100%;
  color: var(--blue);
  padding: 0px 20px 0px 20px;
}

fieldset {
  margin-bottom: 12px;
  border-color: rgba(50, 50, 50, 1);
  background-color: rgba(0, 0, 0, 0.5);
}

table {
  width: 100%;
}

td,
th {
  padding: 8px;
  margin: 4px 0px 4px 0px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #222222;
}

fieldset button {
  float: right;
}

fieldset p {
  margin: 0px;
  padding: 0px;
}

fieldset .right {
  float: right;
  width: 200px;
}

.ui-widget-content a {
  color: var(--blue);
}

canvas {
  margin: 0px;
  padding: 0px;
  image-rendering: optimizeSpeed; /* Older versions of FF          */
  image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated; /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor; /* IE                            */
}

.center {
  text-align: center;
}

.spacer {
  height: 40px;
}

img.center {
  display: block;
  margin: 0 auto;
}

.settings_colorfield {
  border: 1px dotted #555555;
  min-width: 0px;
  float: left;
}

#selected_colors {
  width: 400px;
  float: right;
  line-height: 26px;
}

.settings_selected_color {
  width: 5px;
  height: 10px;
  padding: 8px;
  float: left;
}

.settings_color {
  width: 5px;
  height: 10px;
  padding: 8px;
  float: left;
}

.ui-widget input.settings_colorvalue {
  border: 0px solid var(--blue);
  min-width: 0px;
  width: 52px;
  border-radius: 0px;
  padding: 4px 4px 4px 4px;
  font-size: 80%;
  margin: 2px 2px 2px 2px;
}

.ui-widget input.editor_sprite_name {
  border: 1px solid var(--icon_outline);
  min-width: 0px;
  line-height: 10px;
  border-radius: 16px;
  padding: 4px 4px 4px 4px;
  font-size: 80%;
  margin: 2px 2px 2px 16px;
  vertical-align: top;
  background-color: transparent;
  font-family: "Courier";
  color: var(--inactive_text);
}

.ui-widget input.editor_sprite_name:hover {
  border: 1px solid var(--blue);
  color: var(--active_text);
}

.ui-widget input.editor_sprite_name:focus {
  color: var(--active_text);
  background-color: #333333;
}

.ui-widget button {
  border: 2px solid var(--blue);
  background-color: black;
  color: white;
  font-size: 80%;
  font-family: "Quicksand", sans-serif;
  font-weight: normal;
  border-radius: 32px;
  margin: 4px;
  padding: 8px 16px 8px 16px;
  min-width: 160px;
}

.ui-widget button.center {
  display: block;
  margin: 0 auto;
}

.ui-widget button:hover {
  background-color: var(--blue);
  cursor: pointer;
}

.ui-widget button:focus {
  outline: none;
}

.ui-widget .button-cancel {
  border-color: var(--red);
}

.ui-widget .button-cancel:hover {
  background-color: var(--red);
}

.ui-widget input {
  border: 2px solid var(--blue);
  background-color: black;
  color: white;
  font-size: 100%;
  font-family: "Quicksand", sans-serif;
  font-weight: normal;
  border-radius: 32px;
  margin: 4px;
  padding: 8px 16px 8px 16px;
  min-width: 260px;
  text-align: center;
}

.ui-widget input:focus {
  outline: 0;
  background-color: var(--blue);
}

.ui-widget .error:focus {
  border: 2px solid var(--red);
  background-color: var(--red);
}

.ui-widget .error {
  border: 2px solid var(--red);
}

#info {
  padding: 12px;
  text-align: center;
}

#help {
  padding: 12px;
}

#help-container {
  padding: 12px;
  height: 400px;
  overflow: auto;
  margin: 24px 0px 24px 0px;
}

#editor {
  cursor: crosshair;
}

#menu {
  width: 54px;
}

#statusbar {
  width: 100%;
  position: fixed;
  bottom: 0px;
  height: 20px;
  padding: 6px 12px 6px 12px;
  color: var(--blue);
  background: -webkit-linear-gradient(
    #181818,
    #111111
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#181818, #111111); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    #181818,
    #111111
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#181818, #111111); /* Standard syntax */
  z-index: -100;
  font-size: 110%;
}

#button-row {
  text-align: center;
}

#preview {
}

.editor_ui {
}

#palette {
  cursor: pointer;
}

#palette_spritecolors {
  margin-top: 12px;
}

.colors {
  font-size: 70%;
  font-family: "Quicksand", sans-serif;
  text-transform: uppercase;
  text-align: center;
}

.colors p {
  margin: 0px;
  margin-bottom: 2px;
  padding: 0px;
}

#palette_all_colors {
  clear: both;
}

.palette_color_item {
  width: 40px;
  height: 20px;
  margin: auto;
  cursor: pointer;
  float: left;
}

.palette_color_item_active_colors {
  width: 40px;
  height: 20px;
  margin: auto;
  cursor: pointer;
  margin-bottom: 8px;
}

.palette_highlight_text {
  color: var(--blue);
}

.palette_color_item_selected {
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--blue);
}

#color_transparent {
  background-color: yellow;
}

.icon {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;

  image-rendering: optimizeSpeed; /* Older versions of FF          */
  image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated; /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor; /* IE                            */
}

.iconset /* vertical menu bar */ {
  float: left;
  padding: 1px 2px 1px 2px;
  cursor: pointer;
  margin: 0px 0px 0px 0px;
}

.icontext {
  color: rgba(255, 255, 255, 1);
  font-size: 70%;
  text-transform: uppercase;
  text-align: center;
  margin: 0px;
  position: relative;
  top: -5px;
  height: 8px;
}

.icon-hover {
  background: transparent;
  transition: 0.25s ease background;
}

.icon-hover:hover {
  background: rgba(90, 90, 90, 0.5);
}

.icons-zoom-area /* zoom icons */ {
  margin-right: 10px;
  padding-right: 10px;
  float: left;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.icon-right {
  float: right;
}

#preview-canvas {
  text-align: center;
}

.window_menu {
  min-height: 30px;
  padding-bottom: 8px;
  image-rendering: optimizeSpeed; /* Older versions of FF          */
  image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated; /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor; /* IE                            */
}

/*

  Old Spritelist Start

 */

.sprite_in_list {
  margin: 0px;
  padding: 0px;
}

.sprite_in_list:hover {
  border: 1px dotted var(--red);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.sprite_in_list_border {
  border: 1px dotted #555555;
  box-sizing: border-box;
}

.sprite_in_list_selected {
  border: 1px dotted var(--blue);
  box-sizing: border-box;
}

.sprite_in_list:active {
  /* shadow when dragging a sprite in the sprite list */
  background-color: white;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.6);
}

#spritelist {
  margin: 0px;
  padding: 0px;
  overflow: auto;
  height: 84%;
  line-height: 0px;
  padding-bottom: 20px;
}

/*

  Old Spritelist End

 */

.sprite_layer {
  background-color: #080808;
  width: 100%;
  border: 1px solid transparent;
  border-bottom: 1px dotted #555555;
}

.sprite_layer:hover {
  border: 1px dotted var(--red);
}

.sprite_layer:active {
  border: 1px dotted white;
}

.sprite_layer canvas {
  margin: 2px;
}

.sprite_layer_canvas {
  float: left;
  margin-right: 12px;
}

.sprite_layer_info {
  float: left;
  width: 40%;
  color: #888888;
  font-size: 80%;
}

.sprite_layer_selected {
  border: 1px dotted var(--blue);
}

#info fieldset {
  border: 1px dotted #333333;
  font-size: 100%;
  padding: 12px 12px 12px 12px;
  margin: 24px 0px 24px 0px;
  overflow: auto;
  height: 300px;
  text-align: left;
  color: #bbbbbb;
}

#info fieldset legend {
  text-align: center;
}

#info fieldset p {
  padding-bottom: 20px;
}

#info fieldset h1 {
  font-size: 110%;
  margin: 4px;
  text-align: left;
  text-transform: uppercase;
  margin-top: 20px;
  font-weight: bold;
}

#info fieldset h2 {
  font-size: 100%;
  text-align: left;
  margin: 4px;
  margin-top: 20px;
  font-weight: bold;
  color: white;
}

.ui-dialog-titlebar {
  font-family: "Quicksand", sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 70%;
  text-align: center;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  color: #aaaaaa;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-widget.ui-widget-content {
  border: 0px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.6);
}

.ui-widget-header {
  border: 0px;
  background: none;
}

.ui-dialog {
  padding: 0px;
}

.ui-dialog .ui-dialog-titlebar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  padding: 2px;
}

.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
  width: 12px;
  height: 12px;
}

.ui-dialog-content.ui-widget-content {
  /* inner part of a window */
  padding: 0.5em 0.5em;
}

.list.ui-dialog-content {
  /* list window should not scroll */
  overflow: hidden;
}

.colors.ui-dialog-content {
  /* color palette should not have any padding */
  padding: 0px;
}

.menu.ui-dialog-content {
  /* menu should not have any padding */
  padding: 0px;
}

.ui-dialog .ui-dialog-title {
  width: 100%;
}

.ui-widget-overlay {
  background: black;
  opacity: 0.6;
}

.ui-widget input.ui-inputfield {
  font-size: 80%;
  margin: 2px;
  padding: 0px;
  border: 1px solid black;
  min-width: 60px;
  width: 80px;
  min-height: 19px;
  float: left;
  text-align: left;
  padding: 0px 12px 0px 12px;
  color: var(--blue);
}

.ui-widget input.ui-inputfield:focus {
  border: 1px solid var(--blue);
  color: white;
  background-color: black;
}

.ui-widget input.ui-inputfield:hover {
  border: 1px solid var(--blue);
  background-color: black;
}

.icon-inputfield {
  float: left;
  image-rendering: optimizeSpeed; /* Older versions of FF          */
  image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated; /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor; /* IE                            */
}

#dialog-confirm {
  visibility: hidden;
  text-align: center;
}

.confirm-button {
  border: 2px solid var(--blue);
  background: black;
}

.confirm-button:hover {
  border: 2px solid var(--blue);
  background: black;
  color: white;
  font-size: 100%;
  margin: 4px;
}

.confirm-button:focus {
  border: 2px solid var(--blue);
  background: black;
  color: white;
  font-size: 100%;
  margin: 4px;
}

/* --- CSS ONLY MENU --- */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--blue);
  color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--blue);
}

.dropdown:hover .dropdown-content {
  display: block;
}

#menubar {
  background-color: #333;
}

/* Hotkey documentation in a menu item */
#menubar .hotkey {
  position: absolute;
  right: 9px;
  color: rgba(200, 200, 200, 0.5);
}

/* Label documentation in a menu item */
#menubar .label {
  padding: 4px 4px 4px 14px;
  color: rgba(200, 200, 200, 0.5);
}

/* Line between menu items */
#menubar hr {
  border: none;
  height: 1px;
  background: rgba(200, 200, 200, 0.15);
}

#menubar-filename {
  float: right;
}

#menubar-filename-name {
  color: var(--blue);
}

/* --- END CSS ONLY MENU --- */
