/* Wardrobe Styles */

:root {
  --btn-color: #714490;
  --btn-hover-color: #a240b7;
}

body {
  background: url("/layout/imgs/wardrobe/bg.png");
}

a, .side-nav li a { color: var(--btn-color); }
.content-wrapper a:not(.button) { text-decoration-color: rgba(56, 29, 74, 0.3); }
.content-wrapper a:not(.button):focus, .content-wrapper a:not(.button):hover { text-decoration-color: rgba(56, 29, 74, 0.5); }
a:focus, a:hover, .side-nav li a:focus, .side-nav li a:hover { color: var(--btn-hover-color); }
a:active, .side-nav li a:active { color:#58576f; }

.button, .button.disabled, .button[disabled] {
  background-color: var(--btn-color);
}

.button:hover, .button:focus {
  background-color: var(--btn-hover-color);
}

.jnheader:before {
  background-color: var(--btn-color);
}

.jnheader:after {
  background-position: -40px 50%;
}

.breadcrumbs>* a, .jnheader {
  color: var(--btn-color);
}

.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a {
  background: var(--btn-color);
}

/* Dept Nav Styling */

#layout-dept-wrapper, #layout-depts {
  background-color:#f8f8f8;
}

#layout-depts a:hover, #layout-depts a.current {
  background-color: var(--btn-hover-color);
  color:#fff;
}

/* Header Styling */

#layout-logo-row {
  background-image:url('/layout/imgs/wardrobe/header_bg.png');
}

#layout-logo-row-wrapper {
  background-color: rgba(118, 89, 130, 0.7);
}

#layout-logo-plate {
  background-image:url('/layout/imgs/wardrobe/plate_icon.png');
}

#layout-logo {
  background-image:url('/layout/imgs/wardrobe/logo.png');
}

#layout-logo.white {
  background-image:url('/layout/imgs/wardrobe/logo_white.png');
}

@media only screen and (max-width: 768px) { /* Mobile Header Title */
  .top-bar, .top-bar.expanded .title-area {
    background-image: url("/layout/imgs/wardrobe/logo_mobile.png");
  }
}

/* Navigation Coloring */

#layout-nav-menu-wrapper {
  background-color: #52405E;
}

.top-bar, .top-bar-section li a:not(.button), .contain-to-grid, .top-bar-section .dropdown {
  background-color:#2d1e37;
}

.top-bar-section ul li.active>a {
  background-color:#8a4490;
}

.top-bar-section li a:not(.button):hover {
  background-color: var(--btn-hover-color);
}

.top-bar-section ul li:hover>a, .top-bar.expanded .title-area {
  background-color:#4d315f;
}

.top-bar.expanded .toggle-topbar a span { /* Menu hamburger .expanded color */
  -webkit-box-shadow: 0 10px 0 1px #fff,0 16px 0 1px #fff,0 22px 0 1px #fff;
  box-shadow: 0 10px 0 1px #fff,0 16px 0 1px #fff,0 22px 0 1px #fff;
}

.top-bar.expanded .toggle-topbar a { /* Menu hamburger text .expanded color */
  color:#fff;
}

/* Sidebar */

.dept-search-bar, .goodie-tool-bar {
  background-color: #f4e7f7;
}

#wardrobe-sidebar-search > form {
  font-size: 0.8em;
}

ul.side-nav-homepage {
  list-style-type: none;
  margin-left: 0;
  font-size: 0.8em;
}

ul.side-nav-homepage > li {
  margin-bottom:0.5em;
}

ul.side-nav-homepage > li > a {
  display:block;
}

/* Goodie Tool Bar Tabs */

.goodie-tool-bar-tabs > a.goodie-tool-bar-tab-link {
  background-color: #fdf5ff;
  border-color: #edd6f2;
}

a.goodie-tool-bar-tab-link.active,
a.goodie-tool-bar-tab-link:hover {
  border-color:  var(--btn-hover-color);
}

/* Pagination coloring */

ul.pagination li.current a {
  background-color: var(--btn-color);
}

ul.pagination li.current a:hover, ul.pagination li.current a:focus {
  background-color: var(--btn-hover-color);
}

/* Footer Styling */

#layout-footer-links {
  background-color:#59556D;
}

@media only screen and (min-width: 70em) {
  #layout-footer-links {
    background-image:url('/layout/imgs/wardrobe/footer_bg.png');
  }
}

#layout-footer-links li:hover, #layout-footer-legal li:hover {
  background-color:#2d1e37;
}

#layout-footer-legal {
  background-color:#2d1e37;
}

#footer-mascot {
  background:url('/layout/imgs/wardrobe/mascot_footer.png') no-repeat top left;
  bottom:-10px;
}

/* Alert Boxes */

.alert-box {
  background-color: #f5f5f5;
  background-image: url('/layout/imgs/wardrobe/mascot_250.png');
  background-size: 150px 150px;
  background-position: -25px -20px;
  background-repeat: no-repeat;
  border: none;
  border-left: 5px solid #dd61ad;
  color: #222;
  font-weight: normal;
  padding-left: 120px;
  line-height:1.6;
}

.alert-box.mervin {
  background-image: url('/layout/imgs/wardrobe/mervin_300.png');
  background-size: 80px 80px;
  background-position: -7px -13px;
  padding-left: 80px;
}

/* Pricing Links - TODO Move these to main.css */

a.price-history-link {
  color: #444;
  background-color: #EAEAEA;
  border-radius: 50px;
  font-weight: bold;
  padding: 0.1em 0.6em;
  text-decoration: none !important;
  border-right: 5px solid #EAEAEA; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
  border: 1px solid rgba(0,0,0,0.1);
}

a.price-history-link:hover, a.price-history-link:focus {
  background-color: #7E7E7E;
  color: #fff;
  border-color: #7E7E7E; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
}

a.price-history-link:active {
  background-color: #fff;
  color: #222;
  border-color: #fff; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
}

a.price-history-link.inflation-notice {
  background-color: #970b0e;
  color: #fff;
  border-color: #970b0e; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
}

a.price-history-link.inflation-notice:hover, a.price-history-link.inflation-notice:focus {
  background-color: #d6373a;
  border-color: #d6373a; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
}

a.price-history-link.inflation-notice:active {
  background-color: #fff;
  color: #970b0e;
  border-color: #fff; /* THIS IS AN OVERRIDE FOR WARDROBE SUBDOMAIN LINKS - Keeps the ItemDB fish negg icon nicely padded */
}

/* Wardrobe Wars */

iframe {
  border: none;
  width: 100%;
}

/* Modeling */

#sidebar-modeling-result-box > .alert-box.mervin {
  background-position-x: center;
  background-position-y: -17px;
  padding-top: 70px;
  padding-left: 0.7em;
}

/* Previews */

.item-profile-sub-nav {
  padding-left: 1.5%;
  border-bottom: solid 3px #E6E6E6;
  border-radius: 20px 0 0 20px;
  margin: 0.25em 0px 1.125em -3%;
}

.find-this-item {
  padding: 0.7em 1.2em;
  margin: 0px 0 2em 0;
  border-radius: 20px;
  border-left: medium solid rgb(240, 245, 246);
  border-right: medium solid rgb(240, 245, 246);
  background-color: rgb(251, 251, 251);
}

#preview-item-info-row {
  margin-bottom: 1.25em;
}

.find-icon {
  background-image:url('/assets/imgs/xlg_find-this-item.png');
  background-repeat:no-repeat;
  background-position:0 0;
  background-size: 50px 350px;
}
.find-shopwiz { background-position:0 0; }
.find-tp { background-position:0 -50px; }
.find-auctions { background-position:0 -100px; }
.find-shop { background-position:0 -150px; }
.find-sdb { background-position:0 -200px; }
.find-closet { background-position:0 -250px; }
.find-search { background-position:0 -300px; }

.preview-species-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-bottom: 1em;
}

@media only screen and (max-width: 768px) { /* Mobile Design Tweaks */
  .preview-species-list {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

.preview-species-img {
  width: 45px;
  height: 45px;
  cursor: pointer;
  border: 2px solid  var(--btn-color);
  margin: 0 auto 0.8em;
  border-radius: 5px;
  transition: transform 200ms, background-color 400ms;
}

.preview-species-img:hover, .preview-species-img.active {
  box-shadow: 0 0 10px rgb(250, 201, 75);
  background-color: rgb(250, 201, 75);
  transform: scale(1.2);
}

.preview-species-img.needs-modeling {
  filter: grayscale(1);
  cursor: not-allowed;
}

.preview-species-img.needs-modeling:hover {
  transform: scale(1);
}

/* Rarity Labels */

.rarity-label-uncommon,
.rarity-label-rare,
.rarity-label-veryrare,
.rarity-label-ultrarare,
.rarity-label-superrare {
  color:green;
}

.rarity-label-special {
  color:#aa4455;
}

.rarity-label-megarare {
  color:orange;
}

.rarity-label-rarity,
.rarity-label-artifact {
  color:red;
}

.rarity-label-retired {
  color:#666666;
}

.rarity-label-ncmall {
  color:#AB27BE;
}

@media only screen and (max-width: 768px) { /* Mobile Design Tweaks */
  .block-for-small {
    display: block;
  }
}

/* Rainbow Pool */

.pool-preview-image {
  background-color: #fff;
  border: 3px solid  var(--btn-color);
  border-radius: 5px;
}

/* Preview Box */

#wearable-preview {
  width: 345px;
  height: 345px;
  background-color: #fff;
  margin: 0 auto 1.25em auto;
  position: relative;
  border: 3px solid  var(--btn-color);
  border-radius: 5px;
}
#wearable-preview.empty {
  background-image: url('/assets/imgs/empty_preview_bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25% 25%;
}
#wearable-preview > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wearable-preview.zone-52 { z-index: 52; }
.wearable-preview.zone-51 { z-index: 27; }
.wearable-preview.zone-50 { z-index: 16; }
.wearable-preview.zone-49 { z-index: 5; }
.wearable-preview.zone-48 { z-index: 4; }
.wearable-preview.zone-47 { z-index: 51; }
.wearable-preview.zone-46 { z-index: 48; }
.wearable-preview.zone-45 { z-index: 50; }
.wearable-preview.zone-44 { z-index: 49; }
.wearable-preview.zone-43 { z-index: 47; }
.wearable-preview.zone-42 { z-index: 46; }
.wearable-preview.zone-41 { z-index: 45; }
.wearable-preview.zone-40 { z-index: 44; }
.wearable-preview.zone-39 { z-index: 43; }
.wearable-preview.zone-38 { z-index: 42; }
.wearable-preview.zone-37 { z-index: 40; }
.wearable-preview.zone-36 { z-index: 39; }
.wearable-preview.zone-35 { z-index: 41; }
.wearable-preview.zone-34 { z-index: 38; }
.wearable-preview.zone-33 { z-index: 37; }
.wearable-preview.zone-32 { z-index: 36; }
.wearable-preview.zone-31 { z-index: 35; }
.wearable-preview.zone-30 { z-index: 34; }
.wearable-preview.zone-29 { z-index: 33; }
.wearable-preview.zone-28 { z-index: 32; }
.wearable-preview.zone-27 { z-index: 31; }
.wearable-preview.zone-26 { z-index: 30; }
.wearable-preview.zone-25 { z-index: 29; }
.wearable-preview.zone-24 { z-index: 28; }
.wearable-preview.zone-23 { z-index: 26; }
.wearable-preview.zone-22 { z-index: 25; }
.wearable-preview.zone-21 { z-index: 24; }
.wearable-preview.zone-20 { z-index: 23; }
.wearable-preview.zone-19 { z-index: 22; }
.wearable-preview.zone-18 { z-index: 21; }
.wearable-preview.zone-17 { z-index: 20; }
.wearable-preview.zone-16 { z-index: 19; }
.wearable-preview.zone-15 { z-index: 18; }
.wearable-preview.zone-14 { z-index: 17; }
.wearable-preview.zone-13 { z-index: 15; }
.wearable-preview.zone-12 { z-index: 14; }
.wearable-preview.zone-11 { z-index: 13; }
.wearable-preview.zone-10 { z-index: 12; }
.wearable-preview.zone-9 { z-index: 11; }
.wearable-preview.zone-8 { z-index: 10; }
.wearable-preview.zone-7 { z-index: 9; }
.wearable-preview.zone-6 { z-index: 8; }
.wearable-preview.zone-5 { z-index: 7; }
.wearable-preview.zone-4 { z-index: 6; }
.wearable-preview.zone-3 { z-index: 3; }
.wearable-preview.zone-2 { z-index: 2; }
.wearable-preview.zone-1 { z-index: 1; }
.wearable-preview.zone-0 { z-index: 1000; }

#wearable-preview.has-error {
  display: grid;
  align-items: center;
  justify-items: center;
}

#wearable-preview > .preview-error {
  border: 2px solid #a80b0b;
  padding: 0.5em;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  width: 75%;
  z-index: 98; /* z-index 99 is the sticky navigation bar */
  background-color: #ffefef;
  border-radius: 15px;
  box-shadow: 0px 2px 4px rgba(164, 40, 40, 0.5);
  line-height: 1.4;
}

#wearable-preview > .preview-loading {
  background-color: rgba(82, 64, 94, 0.5);
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#wearable-preview > .preview-loading::before {
  content: '';
  width: 50px;
  height: 50px;
  display: block;
  background-image: url('/layout/imgs/wardrobe/mervin_150.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-animation-name: wardrobe-spin;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: wardrobe-spin;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes wardrobe-spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes wardrobe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}