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 {text-decoration: underline}
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 }

#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/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 }

.give-padding > div, .get-padding { padding: 2em }
#main { padding: 2em 4em 4em}

#topcorner div.region-pick { font-size: 125%; display: none }
#topcorner .region-realm { font-size: 125% }
#topcorner span.region { cursor: default }

#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-top: 1em; padding: 0.5em; width: 100%; width: calc(100% - 1.5em); border: 0.25em solid #444; box-shadow: 0.3em 0.3em #999 }

#topcorner #realm-updated { margin-top: 1em; font-size: 75% }

body.realm #topcorner .region-realm { display: none }
body.realm #topcorner form { display: none }
body.realm #topcorner #realm-updated { display: none }

.ad { width: 728px; height: 90px; margin: 1em auto }
.ad.box { width: 336px; height: 280px; display: inline-block; margin: 1em 0 }

.ad > .adsbygoogle { display:inline-block; width:728px; height:90px }
.ad.box > .adsbygoogle { display:inline-block; width:336px; height:280px }

.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 }

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 {display: none; text-align: center}
#realm-list .directions {font-size: 150%; margin: 0 auto 2rem }
#realm-list.width-test, #realm-list.show {display: block}
.realms-column {width: 15em; display: inline-block; vertical-align: top; text-align: left}
#realm-list.width-test .realms-column {display: inline-block}
.realms-column a {display: block; margin: 0.2em 0}

#front-page, #contact-page, #progress-page, #donate-page { display: none }

#front-page {position: relative; padding-right: 2em}
#front-page a {text-decoration: underline}
#front-page .news, #donate-page .news { max-width: 55em; margin: 2em 0 }
#front-page .top-list { float: left; margin: 2em 2em 2em 0; line-height: 1.4em }
#front-page .top-list h3 { margin: 0 0 1em }

#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 { width: 54em; margin: 0 auto 2em; border: 1px solid black; border-spacing: 0 }
#search-page table th, table.auctionlist th, table.category th {padding: 0.4em 0.2em 0}
#search-page table td, table.auctionlist td, table.category td {padding: 0.2em 0.4em; border-top: 1px solid #CCC}
#search-page tr:hover td, table.auctionlist tr:hover td, table.category tr:hover td {background-color: #EEE}

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

table.auctionlist { margin: 0 auto }
table.auctionlist td.price abbr { border-bottom: 0 }
table.auctionlist td.price abbr:hover { border-bottom: 1px dotted }
table.auctionlist td.seller, table.auctionlist th.seller { padding-left: 2em; text-align: left }

td.breed, th.breed,
td.quality, th.quality,
td.name, th.name { text-align: left }
td.icon, th.icon { width: 1.5em; height: 1.5em; padding-right: 0 ! important }
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 }

td.price > span, th.price > span { white-space: nowrap }

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 }
.battlepet-breeds a:hover, .item-bonussets a:hover, .transmog-slots a:hover { opacity: 1 }

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

#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-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 }

.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 }

.money-gold::after { content: "g "; color: #7F6900 }
.money-silver::after { content: "s "; color: #666666 }
.money-copper::after { content: "c"; color: #C8602C }

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 }