/* GENERATED by tools/gen-ui-assets.js -- do not edit by hand.
 *
 * Frames and tiles lifted from the WoW client's own UI art. Every number
 * below is measured from the texture it describes, so re-running the
 * generator keeps the CSS and the PNGs in step.
 *
 * LINKED FROM layout.html, AFTER style.css. That order is load-bearing:
 * the frame rules have to beat the plain fallback border that .sheet still
 * carries for a checkout with no public/art/.
 *
 * Only .wow-frame--gold is in use, on the one .sheet that wraps the whole
 * page. .wow-grain is generated and works, and is deliberately not applied.
 *
 * Usage: a framed card is one element.
 *   <div class="wow-frame wow-frame--gold wow-tile--dialog">...</div>
 * Add wow-frame--sm to draw any frame at half width for tighter spaces.
 */

/* Interface/DialogFrame/UI-DialogBox-Gold-Border  (patch.MPQ) */
.wow-frame--gold {
  border-width: 32px;
  border-image-source: url(frame-gold.png);
  border-image-slice: 32;
  border-image-width: 32px;
}
.wow-frame--gold.wow-frame--sm {
  border-width: 16px;
  border-image-width: 16px;
}

/* Interface/DialogFrame/UI-DialogBox-Background  (interface.MPQ) */
.wow-tile--gold {
  background-image: url(tile-gold.png);
  background-repeat: repeat;
}

/* Interface/DialogFrame/UI-DialogBox-Border  (interface.MPQ) */
.wow-frame--dialog {
  border-width: 32px;
  border-image-source: url(frame-dialog.png);
  border-image-slice: 32;
  border-image-width: 32px;
}
.wow-frame--dialog.wow-frame--sm {
  border-width: 16px;
  border-image-width: 16px;
}

/* Interface/DialogFrame/UI-DialogBox-Background  (interface.MPQ) */
.wow-tile--dialog {
  background-image: url(tile-dialog.png);
  background-repeat: repeat;
}

/* Interface/Tooltips/UI-Tooltip-Border  (interface.MPQ) */
.wow-frame--tooltip {
  border-width: 16px;
  border-image-source: url(frame-tooltip.png);
  border-image-slice: 16;
  border-image-width: 16px;
}
.wow-frame--tooltip.wow-frame--sm {
  border-width: 8px;
  border-image-width: 8px;
}

/* Interface/Tooltips/UI-Tooltip-Background  (interface.MPQ) */
.wow-tile--tooltip {
  background-image: url(tile-tooltip.png);
  background-repeat: repeat;
  background-color: #17172f;   /* the client tints this one at runtime */
  background-blend-mode: multiply;
}

/* Interface/CharacterFrame/UI-Party-Border  (patch.MPQ) */
.wow-frame--party {
  border-width: 32px;
  border-image-source: url(frame-party.png);
  border-image-slice: 32;
  border-image-width: 32px;
}
.wow-frame--party.wow-frame--sm {
  border-width: 16px;
  border-image-width: 16px;
}

/* Interface/CharacterFrame/UI-Party-Background  (patch.MPQ) */
.wow-tile--party {
  background-image: url(tile-party.png);
  background-repeat: repeat;
}

/* Interface/Buttons/UI-SliderBar-Border  (patch-I.mpq) */
.wow-frame--slider {
  border-width: 16px;
  border-image-source: url(frame-slider.png);
  border-image-slice: 16;
  border-image-width: 16px;
}
.wow-frame--slider.wow-frame--sm {
  border-width: 8px;
  border-image-width: 8px;
}

/* Interface/Buttons/UI-SliderBar-Background  (patch-I.mpq) */
.wow-tile--slider {
  background-image: url(tile-slider.png);
  background-repeat: repeat;
}

/* Interface/Glues/Credits/Parchment3  (interface.MPQ) as a colourless grain. */
/* It is an OVERLAY: put it on an element that already has a
   background-color, and it grains that colour. Mirrored to 512x512 so it tiles -- the source does not. */
.wow-grain {
  background-image: url(grain.png);
  background-repeat: repeat;
}

/* Interface/Glues/CharacterCreate/UI-CharacterCreate-Classes  256x256, 64px cells, 4 across */
.wow-class-icon { background-image: url(classes.png); }
.wow-class-icon--warrior, .wow-class-icon--id-1 { background-position: 0 0; }
.wow-class-icon--mage, .wow-class-icon--id-8 { background-position: -64px 0; }
.wow-class-icon--rogue, .wow-class-icon--id-4 { background-position: -128px 0; }
.wow-class-icon--druid, .wow-class-icon--id-11 { background-position: -192px 0; }
.wow-class-icon--hunter, .wow-class-icon--id-3 { background-position: 0 -64px; }
.wow-class-icon--shaman, .wow-class-icon--id-7 { background-position: -64px -64px; }
.wow-class-icon--priest, .wow-class-icon--id-5 { background-position: -128px -64px; }
.wow-class-icon--warlock, .wow-class-icon--id-9 { background-position: -192px -64px; }
.wow-class-icon--paladin, .wow-class-icon--id-2 { background-position: 0 -128px; }

/* Interface/Glues/CharacterCreate/UI-CharacterCreate-Races  512x256, 64px cells, 5 across; rows 0-1 male, 2-3 female */
.wow-race-icon { background-image: url(races.png); }
.wow-race-icon--human, .wow-race-icon--id-1 { background-position: 0 0; }
.wow-race-icon--human.wow-race-icon--female, .wow-race-icon--id-1.wow-race-icon--female { background-position: 0 -128px; }
.wow-race-icon--dwarf, .wow-race-icon--id-3 { background-position: -64px 0; }
.wow-race-icon--dwarf.wow-race-icon--female, .wow-race-icon--id-3.wow-race-icon--female { background-position: -64px -128px; }
.wow-race-icon--gnome, .wow-race-icon--id-7 { background-position: -128px 0; }
.wow-race-icon--gnome.wow-race-icon--female, .wow-race-icon--id-7.wow-race-icon--female { background-position: -128px -128px; }
.wow-race-icon--nightelf, .wow-race-icon--id-4 { background-position: -192px 0; }
.wow-race-icon--nightelf.wow-race-icon--female, .wow-race-icon--id-4.wow-race-icon--female { background-position: -192px -128px; }
.wow-race-icon--goblin, .wow-race-icon--id-9 { background-position: -256px 0; }
.wow-race-icon--goblin.wow-race-icon--female, .wow-race-icon--id-9.wow-race-icon--female { background-position: -256px -128px; }
.wow-race-icon--tauren, .wow-race-icon--id-6 { background-position: 0 -64px; }
.wow-race-icon--tauren.wow-race-icon--female, .wow-race-icon--id-6.wow-race-icon--female { background-position: 0 -192px; }
.wow-race-icon--undead, .wow-race-icon--id-5 { background-position: -64px -64px; }
.wow-race-icon--undead.wow-race-icon--female, .wow-race-icon--id-5.wow-race-icon--female { background-position: -64px -192px; }
.wow-race-icon--troll, .wow-race-icon--id-8 { background-position: -128px -64px; }
.wow-race-icon--troll.wow-race-icon--female, .wow-race-icon--id-8.wow-race-icon--female { background-position: -128px -192px; }
.wow-race-icon--orc, .wow-race-icon--id-2 { background-position: -192px -64px; }
.wow-race-icon--orc.wow-race-icon--female, .wow-race-icon--id-2.wow-race-icon--female { background-position: -192px -192px; }
.wow-race-icon--highelf, .wow-race-icon--id-10 { background-position: -256px -64px; }
.wow-race-icon--highelf.wow-race-icon--female, .wow-race-icon--id-10.wow-race-icon--female { background-position: -256px -192px; }

/* ---------------------------------------------------------- base */

.wow-frame {
  border-style: solid;
  border-color: transparent;
  /* round, not repeat: these edges carry a repeating motif and
     round scales it to whole tiles instead of cutting one in half. */
  border-image-repeat: round;
  /* border-box, NOT padding-box. The client insets these backgrounds by
     about 11px (<BackgroundInsets> on the dialog backdrop), not by the
     full 32px edge -- so the interior runs UNDER the frame art and stops
     beneath the ornament. padding-box holds it back the whole 32px and
     leaves a bare gap between the gold line and the panel; CSS has no
     11px option, and border-box overshooting into a soft drop shadow is
     invisible where padding-box falling short is not. */
  background-clip: border-box;
}

.wow-class-icon,
.wow-race-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  vertical-align: middle;
}