html {height: 100%}
body {background-color: white; color: #333; margin: 0; overflow-y: scroll; font-family: sans-serif; font-size: 14px; min-width: 62em; height: 100%}

a {text-decoration: none; color: black}
a:active,a:focus { outline: none; }
a:hover, a.highlight {text-decoration: underline ! important}
a img {border: 0}

abbr { cursor: default }
h2 { font-size: 150%; margin-top: 0; margin-bottom: 0.75em }
h2 sub { display: block; font-weight: normal; font-size: 66%; margin-left: 2em }

#page {position: relative; min-height: 100%}
* html #page { height: 100%; }
#bottom-bar { position: relative; font-size: 85%; margin-top: -3em; height: 3em; overflow: hidden; text-align: center }
#bottom-bar .disclaimer { font-size: 75%; position: absolute; width: 100%; bottom: 0; }
#bottom-bar a { cursor: pointer }

#super-bar { position: absolute; top: 5px; right: 5px; left: 5px; font-size: 85%; text-align: right; line-height: 0; z-index: 20; }
#super-bar select, #super-bar input { font-size: 10px; border: 1px solid #444; background-color: white; color: #333; margin-left: 12px; }
#super-bar select, .level-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 12px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMAVfWRPkzmsohaQjcRnFFd4QAAAEVJREFUKM9jGFKAJ1AQAhZABdjvQsFNqAAHTEAbpscWwr/kABNghgioIIy1hSmAK4EpQCiBKkAogSlAKIEqQChJZRjyAADt+SspCe3NqAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-position: right; background-size: 15px; }
.level-select select { font-size: 90%; border: 1px solid #444; background-color: white; color: #333; padding: 2px 14px 2px 2px }

#topbar { position: relative; width: 100%; }
#topcorner { position: absolute; top: 0; right: 0; width: 22em; height: 100% }
#title { margin-right: 22em; min-height: 11.5em }
#title > div > a img { background-image: url("../images/compressed/underminetitle.2000.png"); background-size: contain; background-repeat: no-repeat; max-width: 100%; max-height: 4em }

#page-title { font-size: 2em; padding-left: 1em }
#page-title a.item img { vertical-align: middle; height: 1.2em; width: 1.2em; border-radius: 5px; border: 1px solid #333 }
#page-title a.battlepet img { vertical-align: middle; height: 1.2em; width: 1.2em; border-radius: 5px; border: 1px solid #333 }
#page-title a:hover { text-decoration: none }

#main { padding: 2em 4em 4em}
#topbar > div > div { padding: 2em }

#topcorner div.region-pick { font-size: 125%; display: none }
#topcorner .region-realm { font-size: 125%; position: relative }
#topcorner span.region { cursor: default }
#realm-favstar { cursor: pointer; font-size: 1.2em }
#realm-favstar span { display: none }
#realm-favstar.on .star-lit { display: inline }
#realm-favstar.off .star-dark { display: inline }

#topcorner div.region-pick a { font-size: 80%; font-style: italic; display: block; margin: 0.5em 0; text-align: right }

#topcorner form {margin: 0}
#topcorner input {text-size: 150%; margin: 1em 0; padding: 0.5em; width: 100%; width: calc(100% - 1.5em); border: 0.25em solid #444; box-shadow: 0.3em 0.3em #999 }

#favorite-realms {
    position: absolute; z-index: 5;
    border: 1px solid #444; padding: 0.25em;
    box-shadow: 0.2em 0.2em rgba(153,153,153,0.5); background-color: white;
    top: 100%; left: -1px; width: 100%; width: calc(100% - 0.5em);
    visibility: hidden
}
#favorite-realms a { display: block; margin: 0.2em 0.5em; font-size: 75% }
#topcorner .region-realm:hover #favorite-realms.with-realms { transition: visibility 0s 0.25s; visibility: visible }

#topcorner #realm-updated { font-size: 75% }

#topcorner .no-realm-hide { display: none }
#topcorner.with-realm .no-realm-hide { display: block }

.q0, .q0 a { color: #9d9d9d } /* Poor */
.q1, .q1 a { color: #ffffff } /* Common */
.q2, .q2 a { color: #1eff00 } /* Uncommon */
.q3, .q3 a { color: #0070dd } /* Rare */
.q4, .q4 a { color: #a335ee } /* Epic */
.q5, .q5 a { color: #ff8000 } /* Legendary */
.q6, .q6 a { color: #e5cc80 } /* Artifact */
.q7, .q7 a { color: #e5cc80 } /* Heirloom */

.wowhead-tooltip-powered { visibility: hidden }
.wowhead-tooltip > table { background-color: black; border-radius: 5px }
.wowhead-tooltip.wowhead-tooltip-width-restriction {width:auto !important; max-width:320px}

span.price.full, span.age, span.nowrap { white-space: nowrap }
abbr.full-date { border-bottom: 0 }
abbr:hover.full-date { border-bottom: 1px dotted }

#realm-list, #region-page {display: none; text-align: center}
#realm-list .directions, #region-page .directions {font-size: 150%; margin: 0 auto 2rem }
#realm-list.show {display: block}
.realms-column {-moz-column-width: 15em; -webkit-column-width: 15em; column-width: 15em; text-align: left}
.realms-column a {display: block; margin: 0.3em 0}

.realms-column[data-region="KR"], .realms-column[data-region="TW"]
    {-moz-column-width: unset; -webkit-column-width: unset; column-width: unset}
.realms-column[data-region="KR"] a, .realms-column[data-region="TW"] a
    {width: 10em; margin: 0.3em auto}

#main > .page { display: none }

#front-page {position: relative; padding-right: 2em}
#front-page a {text-decoration: underline}
.news { max-width: 55em; margin: 2em 0; line-height: 1.5em }
.news.no-margin { margin: 0 }
.center { margin: 2em auto; text-align: center }
.news hr, .center hr { margin: 30px 0 }
#front-page .banned { color: #990000; border-left: 2px solid red; padding: 1em; display: none }
#front-page .banned b { color: red }
#front-page .top-list { float: left; margin: 2em 2em 2em 0; line-height: 1.4em }
#front-page .top-list h3 { margin: 0 0 1em }
#front-page .top-list a{text-decoration: none}
#front-page .top-list:empty { display: none }

#progress-page { padding: 3em; text-align: center; }
#progress-page div { background-image: url("../images/progress.gif"); background-repeat: no-repeat; background-position: center; height: 20px; }

#search-page table, table.auctionlist, table.category, .custom-textarea { min-width: 60em; max-width: 70em; margin: 0 auto 2em; border-spacing: 0 }
.custom-textarea {width:60em}
table.auctionlist {min-width:40em}
#search-page table th, table.auctionlist th, table.category th {padding: 0.4em 0.2em 0; border-bottom: 1px solid #CCC; font-weight: normal}
#search-page table td, table.auctionlist td, table.category td {padding: 0.2em 0.4em; vertical-align: top}
#search-page tr:hover td, table.auctionlist tr:hover td, table.category tr:hover td, td.hover {background-color: #EEE}

#search-page th.title, table.category th.title { font-size: 125%; position: relative }

table.auctionlist { margin: 0 auto }
table.auctionlist td.price abbr { border-bottom: 0 }
table.auctionlist td.price abbr:hover { border-bottom: 1px dotted }

span.import-toggle { position: absolute; top: 5px; right: 5px; border: 1px solid #999; border-radius: 5px; padding: 2px; font-size: 50%; cursor: pointer }
table.category th.import-string { padding-left: 0; padding-right: 0 }
table.category th.import-string input { width: 100%; border: 0 }

tr.blank { height: 0.5em }
td.price abbr { text-decoration: none }

td.breed, th.breed,
td.quality, th.quality,
td.name, th.name { text-align: left; cursor: default }
td.icon, th.icon { width: 1.5em; height: 1.5em; padding-right: 0 ! important; text-align: right }
td.icon.double, th.icon.double { width: 3.2em }
td.icon.double img:first-child, th.icon.double img:first-child { padding-right: 0.2em }
td.icon img, th.icon img { border-radius: 3px; }
img.icon {width: 1.5em; height: 1.5em}
td.price, th.price,
td.quantity, th.quantity,
td.level, th.level,
td.date, th.date { text-align: right; cursor: default }
th.sortable { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
table.category-battlepets td.icon, table.category-battlepets td.name { vertical-align: top }

td.price > span, th.price > span { white-space: nowrap }
td span.level { margin: 0 0.5em; font-size: 75% }

table.highcharts-tuj-tooltip {font-size: 100%; min-width: 8em}
table.highcharts-tuj-tooltip td {padding: 0}
table.highcharts-tuj-tooltip td + td {padding-left: 0.4em}

#item-page .chart-section { margin: 2em 0 }
#item-page .chart { width: 100%; height: 22em; margin-top: 1em }
#item-page .chart.daily { width: 100%; height: 30em }
#item-page .chart.scatter { width: 100%; height: 30em }

#item-page .item-stats .ad { margin-top: 0 }
#item-page .item-stats { position: relative; text-align: right; font-size: 110%; display: inline-block; width: 100% }
#item-page .item-stats table { max-width: 25em; float: left; margin: 0 0 1em; font-size: 100% }
#item-page .item-stats table.with-stack { width: 25em }
#item-page .item-stats tr.spacer td { height: 0.5em }
#item-page .item-stats tr.stack-header td { padding-bottom: 0.5em; font-size: 80% }
#item-page .item-stats tr.current-price td { font-weight: bold }
#item-page .item-stats td { text-align: right }
#item-page .item-stats th { text-align: left; padding-right: 3em }
#item-page .item-stats table.with-stack th { width: 50% }
#item-page .item-stats table.with-stack td { width: 25% }

#battlepet-page .chart-section { margin: 2em 0 }
#battlepet-page .chart { width: 100%; height: 22em; margin-top: 1em }

#battlepet-page .battlepet-stats { position: relative; text-align: right; font-size: 110%; display: inline-block; width: 100% }
#battlepet-page .battlepet-stats table { width: 20em; float: left; margin: 1em 0; font-size: 100% }
#battlepet-page .battlepet-stats tr.spacer td { height: 0.5em }
#battlepet-page .battlepet-stats tr.stack-header td { padding-bottom: 0.5em; font-size: 80% }
#battlepet-page .battlepet-stats tr.current-price td { font-weight: bold }
#battlepet-page .battlepet-stats td { text-align: right }
#battlepet-page .battlepet-stats th { width: 66%; text-align: left }

.battlepet-breeds, .item-bonussets, .transmog-slots { margin-bottom: 1em; font-size: 120% }
.battlepet-breeds a, .item-bonussets a, .transmog-slots a { display: inline-block; padding: 1em; margin-right: 1em; margin-bottom: 1em; background-color: #DDD; opacity: 0.5; text-decoration: none; box-shadow: 0.2em 0.2em #CCC; white-space: nowrap; cursor: pointer }
.battlepet-breeds a.selected, .item-bonussets a.selected, .transmog-slots a.selected { opacity: 1; font-weight: bold }
.battlepet-breeds a:hover, .item-bonussets a:hover, .transmog-slots a:hover { opacity: 1 }

#contact-page .namefield { display: none }
#contact-page a { text-decoration: underline }
#contact-page th { text-align: right }
#contact-page input[type='text'] { width: 30em; font-family: sans-serif; font-size: 12pt }
#contact-page textarea { width: 30em; height: 12em; font-family: sans-serif; font-size: 12pt }

#contact-error-message { white-space: pre-line; max-width: 50em; margin: 2em }

#captcha-page { font-size: 125%; }
div.captcha { margin: 2em auto; width: 60em; text-align: center }
img.captcha-button { width: 16em; margin: 0.5em; border-radius: 1em; border: 0.5em solid white }
img.captcha-button.selected { border-color: #006600 }
#captcha-page input { font-size: 125% }

#donate-page form { margin: 2em }
#donate-page a { text-decoration: underline }
#donate-thanks { display: none; margin: 2em; font-size: 125%; border-bottom: 1px solid black; padding: 0 2em 2em }

#category-sidebar { position: relative; float: right; width: 14em; line-height: 1.4em; right: -2em }
#category-sidebar a { display: block; text-decoration: none }
#category-sidebar a[href] { text-decoration: underline }
#category-sidebar a small { font-style: italic }

.dark-only { display: none }
.float-right { float: right; margin-left: 2em }
#addon-page .float-right { max-width: 30% }

.category-battlepets tr.breed { display: none }
.category-battlepets tr.breed td { border-top: 0; }
.category-battlepets td.breeds, .category-battlepets th.breeds { font-size: 80%; text-align: right }

.custom-textarea textarea { width: 100%; margin: 1em 0; height: 15em; box-sizing: border-box }
.custom-textarea select { margin: 0 1em }

.money-gold::after { content: "g " }
.money-silver::after { content: "s " }
.money-copper::after { content: "c" }

.pct-low      { color: #2175CC }
.pct-mid      { color: #12CC12 }
.pct-normal   { color: #CCCC00 }
.pct-high     { color: #CC7513 }
.pct-veryhigh { color: #CC0000 }

table.category-fish tr.subheading th {text-align: center}
table.category-fish .price {border-left: 1px solid #CCC}

#transmog-results .transmog-box { display: inline-block; text-align: center; margin: 2em 1em; }
#transmog-results .transmog-box:hover { background-color: #EEE }
.transmog-img { width: 200px; height: 200px; background-size: cover; display: inline-block; }
#transmog-results span { display: block; }

.item-stats .transmog-img { float: left }

#region-page a {text-decoration: underline; display: block; margin: 2em 0; font-size: 125%}
#region-page .welcome {text-align: left; padding-bottom: 1em}

input.battle-net {
    font-size: 125%;
    padding: 1em;
    padding-left: 3em;
    background-image: url("../images/compressed/battlenet-logo.png");
    background-repeat: no-repeat;
    background-position: 0.25em center;
    background-size: 2.5em;
}

.rss-icon { padding-left: 1.25em; background-position: 0 center; background-repeat: no-repeat; background-size: 1em; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDggOCIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LmJ7c3Ryb2tlOm5vbmU7ZmlsbDpvcmFuZ2V9LnN7c3Ryb2tlOm5vbmU7ZmlsbDp3aGl0ZX08L3N0eWxlPjxyZWN0IGNsYXNzPSJiIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiByeD0iMS41Ii8+PGNpcmNsZSBjbGFzcz0icyIgY3g9IjIiIGN5PSI2IiByPSIxIi8+PHBhdGggY2xhc3M9InMiIGQ9Im0gMSw0IGEgMywzIDAgMCAxIDMsMyBoIDEgYSA0LDQgMCAwIDAgLTQsLTQgeiIvPjxwYXRoIGNsYXNzPSJzIiBkPSJtIDEsMiBhIDUsNSAwIDAgMSA1LDUgaCAxIGEgNiw2IDAgMCAwIC02LC02IHoiLz48L3N2Zz4="); }

#subscription-message { color: red; margin-left: 1em; font-style: italic }

#subscription-description { line-height: 1.5em }
#subscription-settings > div, #subscription-description { max-width: 900px; margin: 2em auto }
#subscription-settings .instruction { margin: 1em; line-height: 1.4em }
#subscription-settings .promo-code { margin: 2em 1em }
#subscription-settings .warning { color: red }

#subscription-messages { position: relative; height: 320px; line-height: 18px; border: 1px solid #999 }
#subscription-messages > div { overflow-y: auto; }
#subscription-messages-list { position: absolute; top: 0; left: 0; width: 40%; height: 100% }
.messages-list-item, #subscription-messages-window .message-subject
    { border-bottom: 1px solid #999; padding: 0.5em 0.25em 1em; position: relative }
.messages-list-item { cursor: pointer; }
.messages-list-item.selected { background-color: #ccc }
#subscription-messages .message-date { position: absolute; bottom: 1px; right: 0.25em; font-size: 80% }
#subscription-messages-window { position: absolute; top: 0; left: 40%; width: 60%; height: 100%; }
#subscription-messages-window .message-text { padding: 5px; }

#subscription-email-verification { margin: 10px auto; display: none }
#subscription-email.verify #subscription-email-verification { display: block }

#subscription-paidstatus form { display: inline-block; margin-left: 4em; }
#subscription-paidstatus div.bitcoin { display: inline-block; margin-left: 4em; height: 50px; vertical-align: bottom }
#subscription-paidstatus div.bitcoin input { cursor: pointer; background: #4638e8; border: 1px solid #4638e8; font-size: 100%; color: white; border-radius: 5em; padding: 0.5em 1.5em; position: relative; top: 50%; transform: perspective(1px) translateY(-50%) }

.notifications-insert { margin: 1em 0 }
.notifications-insert ul { margin: 1em 0 }
.notifications-insert ul li { list-style-type: none }
.notifications-insert ul li input { margin-right: 1em }
table.category .notifications-insert ul li, #subscription-rares ul li { margin: 0.75em 0 }

.notifications-add { margin: 1em 0 }
.notifications-add input, .notifications-add select { margin-left: 0.5em }
input.input-quantity { width: 5em; text-align: right }
input.input-price { width: 6em; text-align: right; -moz-appearance:textfield }
input.input-price::-webkit-outer-spin-button, input.input-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.notifications-add input.input-price { padding-right: 1em }
.notifications-add .input-price-unit { position: relative; left: -1em; margin-right: -0.75em }

#policy-page .policy-section { margin: 2em 0; max-width: 55em }
.policy-scroller { padding: 0.5em; height: 25em; overflow-y: auto; resize: both; border: 1px solid #808080 }
#accept-form label { display: block; margin: 0.5em }
#accept-form label.highlight::after { content: " <-- Required"; color: red }
#accept-form input.button { margin: 0 0.5em }

body.logged-out .logged-in-only { display: none }
body.logged-in .logged-out-only { display: none }