/* css3buttons.css — Aristo jQuery UI theme button look (keeps original class names)
   Original: Michael Henriksen's "CSS3 Buttons" (~2010, PNG sprites + IE hacks).
   Restyled with the palette from Aristo (taitems) jQuery UI theme:
     default          light grey gradient #fafafa→#e2e2e2, border #b6b6b6, text #4f4f4f
     hover            lighter grey gradient #ffffff→#ececec, border #9d9d9d
     focus/active     sky-blue #b9e0f5→#92bdd6, border #7096ab, teal text #1c4257
   3px corners, white text-shadow, inset top highlight. No vendor prefixes/IE hacks.
   Backup of the original kept as css3buttons.css.bak */

:root {
  /* Aristo default (grey, glossy) — lightened */
  --btn-bg-top: #fafafa;
  --btn-bg-bottom: #e2e2e2;
  --btn-border: #b6b6b6;
  --btn-color: #4f4f4f;

  /* Aristo active/focus/hover (soft sky-blue) */
  --btn-blue-top: #b9e0f5;
  --btn-blue-bottom: #92bdd6;
  --btn-blue-border: #7096ab;
  --btn-blue-color: #1c4257;

  /* Negative (red) — Aristo-styled, not part of the base theme */
  --btn-negative-top: #e36b67;
  --btn-negative-bottom: #c92e28;
  --btn-negative-border: #a5211e;

  /* Positive (green) — Aristo-styled, not part of the base theme */
  --btn-positive-top: #8ed47f;
  --btn-positive-bottom: #57a94e;
  --btn-positive-border: #3a8e3f;
}

a.button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--btn-color);
  background: linear-gradient(to bottom, var(--btn-bg-top), var(--btn-bg-bottom));
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  outline: none;
  position: relative;
  vertical-align: middle;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: all .25s ease-in-out;
}

button {
  margin-left: 0;
  margin-right: 0;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Hover → lighter grey gradient */
a.button:hover, .button:hover {
  color: var(--btn-color);
  border-color: #9d9d9d;
  text-decoration: none;
  background: linear-gradient(to bottom, #ffffff, #ececec);
}

/* Primary / keyboard focus → Aristo sky-blue */
a.button.primary, .button.primary,
a.button:focus-visible, .button:focus-visible {
  color: var(--btn-blue-color);
  border-color: var(--btn-blue-border);
  background: linear-gradient(to bottom, var(--btn-blue-top), var(--btn-blue-bottom));
  box-shadow: 0 0 8px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Pressed / active → Aristo sky-blue, flat (no shadow) */
a.button:active, .button:active,
a.button.active, .button.active {
  color: var(--btn-blue-color);
  border-color: var(--btn-blue-border);
  background: linear-gradient(to bottom, var(--btn-blue-top), var(--btn-blue-bottom));
  box-shadow: none;
}

/* Negative → red (Aristo-styled) */
a.button.negative:focus-visible, .button.negative:focus-visible,
a.button.negative:hover, .button.negative:hover {
  color: #fff;
  border-color: var(--btn-negative-border);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(to bottom, var(--btn-negative-top), var(--btn-negative-bottom));
  box-shadow: 0 0 8px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .25);
}
a.button.negative:active, .button.negative:active,
a.button.negative.active, .button.negative.active {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(to bottom, #c92e28, #a5211e);
  border-color: var(--btn-negative-border);
  box-shadow: none;
}

/* Positive → green (Aristo-styled) */
a.button.positive:focus-visible, .button.positive:focus-visible,
a.button.positive:hover, .button.positive:hover {
  color: #fff;
  border-color: var(--btn-positive-border);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(to bottom, var(--btn-positive-top), var(--btn-positive-bottom));
  box-shadow: 0 0 8px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .25);
}
a.button.positive:active, .button.positive:active,
a.button.positive.active, .button.positive.active {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(to bottom, #57a94e, #3a8e3f);
  border-color: var(--btn-positive-border);
  box-shadow: none;
}

/* Disabled (Aristo: opacity .35) */
a.button[disabled], .button[disabled],
button[disabled], button:disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none;
}

/* Shapes */
a.button.pill, .button.pill {
  border-radius: 19px;
  padding: 7px 15px;
}

/* Button groups */
a.button.left, .button.left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
a.button.middle, .button.middle {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  border-right: none;
  border-left: none;
}
a.button.right, .button.right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}

/* Sizes */
a.button.big, button.big {
  font-size: 13px;
  padding: 8px 17px;
}

/* Icons: original PNG sprite (shared with .ikms in kms.css). Dark icon frames
   only — the white :hover variants were dropped, since Aristo keeps button text
   dark in every state. Only the icons actually used in the app are mapped;
   sprite offsets are absolute, so add a line here if a new one is needed. */
a.button span.icon, .button span.icon { flex: none; width: 14px; height: 12px; margin: 0 7px 0 0; background-image: url('/images/ui/css3buttons_icons.png'); background-repeat: no-repeat; }
a.button span.icon.calendar, .button span.icon.calendar { background-position: 0 -30px }
a.button span.icon.clock, .button span.icon.clock { background-position: 0 -116px }
a.button span.icon.magnifier, .button span.icon.magnifier { background-position: 0 -472px }
a.button span.icon.mail, .button span.icon.mail { background-position: 0 -502px }
a.button span.icon.plus, .button span.icon.plus { background-position: 0 -616px }
a.button span.icon.user, .button span.icon.user { background-position: 0 -854px }