headBlock {display:grid;grid-template-columns: 1fr 1fr auto;row-gap: 3em;} headRow {display: block;width:100%;margin-bottom:0.5em;cursor:default;} headRow statName {display: inline-block;width:10em;} headRow statValue {display: inline-block;width:auto;} headRow *[data-tooltip] {cursor:help;} statRow[data-stat] {font-style:italic;} statRow[data-tooltip]:not([data-stat]) {cursor:help;} skillRow {display:grid;grid-template-columns:120px 1fr;gap:0.7rem;margin-bottom:4rem;margin-top:0.5rem;margin-left: -0.1rem;} skillRow h3 {margin-left: 0;margin-top:0;clear:both;} skillRow h4 {margin-left: 0;} skillRow img {width:120px;height:120px;border-radius:20px;border:1px solid greenyellow;box-sizing:content-box;} statDetails {line-height:1;margin-top: 3em;} statDetails a {text-decoration: none;} statDetailHeader {font-size: 100%;} statDetailTitle {display: block;font-size:120%;line-height: 150%;font-weight: bold;margin-bottom: 0.3em;} statDetailCloseButton {cursor: pointer;font-weight:bold;color:chocolate;} .entityPortrait {border-radius: 20px;border: 1px solid cornflowerblue;align-items:center;width:160px;height:160px;box-sizing:content-box } .comparisonColumn {display:flex;width:100%;height:100%;padding:0;margin:0;position:relative;} .comparisonColumn bar {display:block;width:100%;margin-left:1px;margin-top:auto;} .comparisonColumn pin {display:none;position:absolute;left:1px;right:0;top:6lh;height:1.2lh;background-color:brown;border-top:1px solid #202020 } .comparisonColumn pin[data-visible='true'] {display: block;background-color:indianred;} .comparisonColumn:hover pin {display:block;} .comparisonColumn:hover {background:#777;} .comparisonRow {display:grid;grid-auto-columns:36px 1px 1fr;width: 100%;height:36px;margin-bottom:1px;padding:0;position:relative;} .comparisonRow bar {display:flex;grid-column: 3;width: 100%;height:100%;margin-right:auto;background:#222;} .comparisonRow img {padding:0;margin:0;width: 100%;height:100%;} .comparisonRow name {display:block;color: black;margin:auto -1000px auto 8px;font-size:90%;} .comparisonRow pin {display:none;position:absolute;width:1.5rlh;left:-1.5rlh;top:0;bottom:-1px;background-color:brown;border-right:1px solid #202020 } .comparisonRow pin[data-visible='true'] {display: block;background-color:indianred;} .comparisonRow:hover pin {display:block;} .comparisonRow:hover {background:#333;} #headInformation statRow {} neighborList figure {text-align:center;color:yellowgreen;display:inline-block;margin:0;} neighborList figure img {display: block;margin-bottom:2px;} neighborList figure.centerHero {color: orange;} editableSelectWrapper {position:relative;display:block;box-sizing: border-box;border:1px solid #323232;width:100%;max-width:100%;} editableSelectWrapper:focus-within {border:1px solid orange;} editableSelectWrapper[data-valid="false"] {background: indianred;} .light editableSelectWrapper[data-valid="false"] {background: pink;} .light editableSelectWrapper input[type='text'] {background-color: transparent;} .light editableSelectWrapper select {background-color: transparent;} editableSelectWrapper select {border:none;width:100%;margin:0;padding:4px 0;background-color:transparent;} editableSelectWrapper input[type='text'] {position:absolute;top:0;left:0;right:2em;border:0;background:transparent;} editableSelectWrapper input[type='text'] :focus {outline:none;} editableSelectWrapper select:focus {outline:none;} skinList {display:grid;grid-template-columns:repeat(auto-fit, 160px);gap:40px;row-gap:45px;} skin {display:grid;grid-template-columns:1fr;row-gap: 2px;width:160px;grid-auto-rows: min-content;background: #222;padding: 10px;} skin row {display: block;text-overflow:ellipsis;white-space: nowrap;overflow: hidden;} skin h6 {font-weight:bold;} skin cost {margin-left: -3px;} skinDivider {height:10px;width:100%;} skinNote {display:block;} .skinPortrait {width:160px;height: 160px;} #glyphList .skinPortrait {width:auto;height:auto;} .light skin {background:navajowhite;} gearList {display: flex;gap: 20px;width: 100%;flex-wrap: wrap;margin-bottom:20px;} gearGroup {width:min-content;} gearGroup h6 {margin-left: 1px;} gearGroup gearSet {display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;grid-auto-flow:row;width: min-content;} gearGroup gearSet a img {width:63px;height:63px;} gearCosts cost {display:block;margin: 0;} label {font-size:80%;} leftLabel {display:block;box-sizing:border-box;margin:auto 0;width:100%;text-align:right;font-size:80%;} rightLabel {display:block;box-sizing:border-box;margin:auto 0;width:100%;text-align:left;font-size:80%;} .sparseSelect option[data-disabled="true"] {color: gray;} buffRow {display:block;font-size:80%;padding:7px 4px 1px 4px;cursor:pointer;color:gray;} petList {display: grid;grid-template-columns: repeat(2, auto);width: max-content;} .statForm {display: grid;margin-top: 3rlh;width: 100%;grid-template-columns: 1fr 230px 1fr 230px 1fr;grid-gap: 6px } @media (max-width: 600px) {.statForm {display: none;} headBlock {display: flex;flex-direction: column;} petList {display:flex;flex-wrap: wrap;max-width: 100%;} }