Template:Classes/styles.css

@font-face {
  font-family: 'AngerStyles';
  src: url('https://cathedralofblades.com/wiki/resources/AngerStyles.woff2') format('woff2'),
       url('https://cathedralofblades.com/wiki/resources/AngerStyles.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.job-hover, .job-hover2 {
  width: 105px;
  height: 120px;
  background: #1a1a1a;
  border-radius: 5px;
  z-index: 5;
  box-shadow: 15px 15px 27px 0px #000000;
  overflow: visible;
  clip-path: inset(0px -300px 0px 0px);
  font-size: 90%;
  position: relative;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out, background 0.3s ease-in-out;
}

.job-hover { border: 1px double #ed6912; }
.job-hover2 { border: 1px double #2f66a1; }

.job-hover:hover,
.job-hover2:hover {
  width: 320px;
  min-height: 250px;
  height: auto; 
  background: #1a1a1a; 
  z-index: 10;
}



.job-info-wrapper {
  height: 0;
  overflow: visible;
  z-index: 7;
  transition: height 0.5s ease-in-out;
}

.job-hover:hover .job-info-wrapper,
.job-hover2:hover .job-info-wrapper {
  height: 500px;
}

.job-info {
  padding: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}

.job-hover:hover .job-info,
.job-hover2:hover .job-info {
  opacity: 1;
  transform: translateY(0);
}

.job-info > div {
  margin: 3px 0;
  border: none;
  padding: 0;
  background: none;
}

.job-info b {
  color: #ddd;
  display: inline-block;
  width: 80px;
}

.job-headline, .job-headline2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'AngerStyles';
  font-size: 2.5em;
  margin-bottom: 6px;
}

.job-headline img, .job-headline2 img {
  width: 60px;
  height: 60px;
  margin-left: 10px;
}

.stars {
  white-space: nowrap;
}

.demo-container {
  position: relative;
  display: inline-block;
}

.demo-trigger, .demo-trigger2 {
  cursor: pointer;
  display: inline-block;
  margin-top: 5px;
  text-decoration: underline;
  position: relative;
  z-index: 2;
}
.demo-trigger { color: #ed6912; }
.demo-trigger2 { color: #2f66a1; }

.demo-preview {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 1px;
  z-index: 5;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: -10px;
  white-space: nowrap;
  overflow: visible;
}
.demo-container:hover .demo-preview {
  display: block;
}

.job-tree {
  position: relative;
  width: 1500px;
  height: 1000px;
}

.job-hover, .job-hover2 {
  position: absolute;
}

.job-tree-astral .job-hover,
.job-tree-umbral .job-hover2 {
  position: absolute;
}

/* Backgrounds for each tree wrapper */
.job-tree-wrapper-astral {
  background-image: url('https://cathedralofblades.com/wiki/images/e/e2/Astralbg.jpg');
  background-size: 1500px 1000px;
  background-repeat: no-repeat;
}
.job-tree-wrapper-umbral {
  background-image: url('https://cathedralofblades.com/wiki/images/a/a1/Umbralbg.jpg');
  background-size: 1500px 1000px;
  background-repeat: no-repeat;
}

/* Astral positions */
.job-tree-astral .job-hover:nth-child(1)  { top: 25px; left: 710px; }
.job-tree-astral .job-hover:nth-child(2)  { top: 200px; left: 110px; }
.job-tree-astral .job-hover:nth-child(3)  { top: 200px; left: 410px; }
.job-tree-astral .job-hover:nth-child(4)  { top: 200px; left: 710px; }
.job-tree-astral .job-hover:nth-child(6)  { top: 200px; left: 1010px; }
.job-tree-astral .job-hover:nth-child(7)  { top: 200px; left: 1310px; }
.job-tree-astral .job-hover:nth-child(8)  { top: 500px; left: 50px; }
.job-tree-astral .job-hover:nth-child(10) { top: 450px; left: 167px; }
.job-tree-astral .job-hover:nth-child(12){ top: 500px; left: 350px; }
.job-tree-astral .job-hover:nth-child(13){ top: 450px; left: 467px; }
.job-tree-astral .job-hover:nth-child(15){ top: 500px; left: 650px; }
.job-tree-astral .job-hover:nth-child(16){ top: 450px; left: 767px; }
.job-tree-astral .job-hover:nth-child(18){ top: 500px; left: 950px; }
.job-tree-astral .job-hover:nth-child(19){ top: 450px; left: 1067px; }
.job-tree-astral .job-hover:nth-child(22){ top: 500px; left: 1250px; }
.job-tree-astral .job-hover:nth-child(24){ top: 450px; left: 1367px; }

/* Umbral positions */
.job-tree-umbral .job-hover2:nth-child(1)  { top: 25px; left: 710px; }
.job-tree-umbral .job-hover2:nth-child(2)  { top: 200px; left: 110px; }
.job-tree-umbral .job-hover2:nth-child(3)  { top: 200px; left: 410px; }
.job-tree-umbral .job-hover2:nth-child(4)  { top: 200px; left: 710px; }
.job-tree-umbral .job-hover2:nth-child(6)  { top: 200px; left: 1010px; }
.job-tree-umbral .job-hover2:nth-child(7)  { top: 200px; left: 1310px; }
.job-tree-umbral .job-hover2:nth-child(11) { top: 500px; left: 50px; }
.job-tree-umbral .job-hover2:nth-child(9)  { top: 450px; left: 167px; }
.job-tree-umbral .job-hover2:nth-child(13) { top: 500px; left: 350px; }
.job-tree-umbral .job-hover2:nth-child(14) { top: 450px; left: 467px; }
.job-tree-umbral .job-hover2:nth-child(16) { top: 500px; left: 650px; }
.job-tree-umbral .job-hover2:nth-child(18) { top: 450px; left: 767px; }
.job-tree-umbral .job-hover2:nth-child(20) { top: 500px; left: 950px; }
.job-tree-umbral .job-hover2:nth-child(22) { top: 450px; left: 1067px; }
.job-tree-umbral .job-hover2:nth-child(24) { top: 500px; left: 1250px; }
.job-tree-umbral .job-hover2:nth-child(25) { top: 450px; left: 1367px; }
.job-tree-umbral .job-hover2:nth-child(27) { top: 450px; left: 1367px; }

/* Mobile view */
@media screen and (max-width: 1000px) {
  .job-tree-wrapper-astral {
    background-image: url('https://cathedralofblades.com/wiki/images/e/e2/Astralbg.jpg');
    background-size: 330px 220px;
    background-repeat: no-repeat;
  }

  .job-tree-wrapper-umbral {
    background-image: url('https://cathedralofblades.com/wiki/images/a/a1/Umbralbg.jpg');
    background-size: 330px 220px;
    background-repeat: no-repeat;
  }

  .job-tree-scaled {
    transform: scale(0.22);
    transform-origin: top left;
    display: inline-block;
    width: 370px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
  }
}

.job-hover img:first-of-type,
.job-hover2 img:first-of-type {
  display: block;
}

.job-hover:hover img:first-of-type,
.job-hover2:hover img:first-of-type {
  display: none;
}

.job-hover, .job-hover2 {
  color: #ffffff;
}

.job-hover *:not(a):not(span):not([style*="color"]):not(.job-headline):not(.job-headline2),
.job-hover2 *:not(a):not(span):not([style*="color"]):not(.job-headline):not(.job-headline2) {
  color: #ffffff;
}

/* Reassert specific headline colors */
.job-headline {
  color: #ed6912 !important;
}
.job-headline2 {
  color: #2f66a1 !important;
}