Mobile.css

Revision as of 19:27, 25 October 2020

/* CSS placed here will affect users of the mobile site */
/* Header and footer */
.header-container.header-chrome,
#mw-mf-page-center {
    background: #212121;
}


/******************
/* General styles *
/******************/
/* devanagari */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 400;
  src: local('Eczar'), local('Eczar-Regular'), url(https://fonts.gstatic.com/s/eczar/v4/e8eveZDPQf-P6WhS93Br6Q.woff2) format('woff2');
  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 400;
  src: local('Eczar'), local('Eczar-Regular'), url(https://fonts.gstatic.com/s/eczar/v4/WRez4Kbl_ZWcd1vDZ4Y4Iw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 400;
  src: local('Eczar'), local('Eczar-Regular'), url(https://fonts.gstatic.com/s/eczar/v4/hyMVYt18PG_P8SE878ktjA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* devanagari */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 700;
  src: local('Eczar SemiBold'), local('Eczar-SemiBold'), url(https://fonts.gstatic.com/s/eczar/v4/HK-Cs_EKtHN1C_hElxCwGRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 700;
  src: local('Eczar SemiBold'), local('Eczar-SemiBold'), url(https://fonts.gstatic.com/s/eczar/v4/k6NupAe_KxHaBDAyv5ILmxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Eczar';
  font-style: normal;
  font-weight: 700;
  src: local('Eczar SemiBold'), local('Eczar-SemiBold'), url(https://fonts.gstatic.com/s/eczar/v4/h-_hRQTHwOzhzdaLhA66n_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/*
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(/media/hydra/fonts/Lato-Regular.ttf) format('truetype');
}
*/

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
  color: #2c2c2c !important;
  font-family: Lato, sans-serif;
}

.header-container.header-chrome {
  background: #e3c790;
}

#mw-mf-page-center, body.navigation-enabled #mw-mf-page-center, .animations #mw-mf-page-center {
  background: #ebd19e url("/media/hearthstone.gamepedia.com/f/fb/Skin-Content-Background.jpg") repeat left top !important;
}

body.navigation-enabled .transparent-shield {
  background: rgba(244, 232, 207, 0.8) !important;
}

.overlay-enabled, #content {
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  background: transparent !important;
  font-family: Eczar, serif !important;
}

h1 {
  color: #3f2503 !important;
}

h2, h3, h4, h5, h6 {
  color: #2c2c2c !important;
}

#content_wrapper .section {
  border-bottom: 1px solid #e2ddcf;
}

div.toc-mobile, .client-js div.toc-mobile {
  border: none;
  background: #f2e2c3;
  color: #2c2c2c;
  padding: 8px;
  margin-bottom: 5px;
}

#content .thumb {
  border: none;
  background: #f2e2c3;
  color: #2c2c2c;
  padding: 8px;
  margin-bottom: 5px;
}

div.content table.wikitable, div.content table.wikitable > * > tr > th {
  padding: 3px;
  margin: auto; 
  margin-bottom: 5px;
}

div.content table.wikitable {
  border-collapse: separate;
  border: none;
  background: transparent;
  color: #2c2c2c;
}

div.content table.wikitable th, div.content table.wikitable > * > tr > th, div.content table.wikitable > * > tr > th {
  border: 1px solid #cbb995;
  background: #f2e2c3;
  color: #3f2503 !important;
  font-weight: bold;
  font-family: Eczar, serif;
  margin: 0;
  padding: 0 3px 3px 3px;
}

div.content table.wikitable td, div.content table.wikitable > * > tr > td, div.content table.wikitable > * > tr > td {
  border: 1px solid #cbb995;
  background: #efd8af;
  color: #2c2c2c;
  vertical-align: middle;
  padding: 4px 8px;
}

div.view-border-box {
  border: none;
  background: #f2e2c3;
  color: #2c2c2c;
  padding: 8px;
  margin-bottom: 5px;
}

div.view-border-box.post-content {
  border: none;
  background: #e2ddcf !important;
  margin: 0 30px 25px 30px;
}

div#mw-mf-last-modified {
  background: transparent !important;
  text-align: center;
  margin: 25px 0;
  padding: 0;
}

.skin-minerva footer {
  border: none !important;
  background: transparent;
  color: #aa8e70;
  text-align: center;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
}

footer ul.footer-info li#footer-info-mobile-switcher h2, footer ul.footer-info li#footer-info-mobile-switcher ul li:first-child {
  display: none;
}

footer ul.footer-info, footer ul.footer-places {
  display: block;
  margin: 25px 30px;
}

footer ul.footer-info li#footer-info-mobile-switcher ul, footer ul.footer-places {
  display: block;
  border-top: 1px solid #e2ddcf;
}

footer ul.footer-info li#footer-info-mobile-switcher ul li, footer ul.footer-places li {
  display: block;
  border: none;
  border-bottom: 1px solid #e2ddcf !important;
}

footer ul.footer-info li#footer-info-mobile-switcher ul li a#mw-mf-display-toggle, footer ul.footer-places li a {
  display: block;
  padding: 25px 0;
}

footer ul.hlist-separated li::after {
  display: none;
}

.mwm-notice {
  border: none;
  background: transparent;
  color: #2c2c2c;
}

pre, .mw-code {
  border: 1px solid #d3b88a;
  background: #f0dab1;
  box-shadow: none;
  color: #000000;
  text-shadow: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code {
  background: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
}

input, select, textarea {
  font-family: Lato, sans-serif;
  border: 1px solid #967855;
  background: #f3f0e9;
  box-shadow: none;
  color: #000000;
  padding: 2px 2px;
}

input#searchInput {
  background-color: #f3f0e9 !important;
}

#mf-notification {
  border: 1px solid #e2ddcf !important;
  background: #f2e2c3 !important;
  color: #2c2c2c !important;
}

.toast {
  border-radius: 4px;
  border: 1px solid #e2ddcf;
  background: #f2e2c3;
  color: #2c2c2c;
}

.drawer {
  background: #f2e2c3;
}

/*******************
/* Search elements *
/*******************/
.search-overlay, .overlay-header-container, .search-overlay .overlay-header, .search-overlay .results, .search-overlay .search-feedback {
  background: #e3c790 !important;
  color: #2c2c2c !important;
}

/********************
/* Main menu styles *
/********************/
.primary-navigation-enabled {
  border-left: 3px solid #1d0b07 !important;
  background: #1d0b07 !important;
  color: #9e9188;
}

#mw-mf-page-left {
  border-left: 3px solid #1d0b07;
  background: transparent;
}

#mw-mf-page-left .view-border-box {
  border-radius: 0;
  border: none;
  background: transparent;
}

#mw-mf-page-left ul {
  background: transparent;
}

#mw-mf-page-left ul:first-child {
  border-bottom: 3px solid #2b1e1a;
}

#mw-mf-page-left ul li {
  border-top: 1px solid #2b1e1a;
  border-bottom: 1px solid #2b1e1a;
  background: transparent;
  text-shadow: none;
}

#mw-mf-page-left ul li a, #mw-mf-page-left ul.hlist li a {
  border: none;
  color: #9e9188;
}

#mw-mf-page-left ul li:hover {
  border-top: 1px solid #2b1e1a;
  border-bottom: 1px solid #2b1e1a;
  border-left: 15px solid #e5c67b;
  background: #25120d;
}

#mw-mf-page-left ul.hlist li:hover {
  border: none;
}

#mw-mf-page-left ul li:hover a, #mw-mf-page-left ul.hlist li:hover a {
  color: #e5c67b;
}

/***************
/* Link styles *
/***************/
a, a:link {
  color: #a1360e;
}

a:visited {
  color: #cc6238;
}

a.new {
  color: #b40000 !important;
}

a.new:visited {
  color: #9a1a1a !important;
}

a.stub {
  color: #2c8903;
}

a.stub:visited {
  color: #407329;
}

a.extiw, a.external {
  color: #605404 !important;
}

a.extiw:visited, a.external:visited {
  color: #574821 !important;
}

a:active {
  color: #7b7b7b !important;
}

/***************************
/* Template example styles *
/***************************/
span.templateexample {
  font-family: monospace;
}

span.templateexample span.templatelink {
  font-weight: bold;
}

span.templateexample span.paramname {
}

span.templateexample span.paramvalue {
  color: #7c581a;
  font-style: italic;
}

/******************
/* Image licenses *
/******************/
.ambox {
  border: 1px solid #e2ddcf;
  background: #f2e2c3;
  color: #2c2c2c;
  font-size: 95%;
  margin: 0 auto 10px auto;
  padding: 3px 6px;
  width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox + .ambox {
     margin-top: -10px;
}

.ambox-text {
     padding: 0.25em 0.5em;
}

.ambox-image {
     padding: 2px 0px 2px 0.5em;
     text-align: center;
     width: 60px;
}

.ambox-tiny .ambox-image {
     padding: 2px 0.5em;
     text-align: left;
     width: auto;
}

/* Ambox colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

/* Ambox small text */
.amsmalltext {
     font-size: smaller;
     margin-left:0.8em;
     margin-top:0.5em;
}

/********************
/* Mobile main page *
/********************/
#mmpcontent .mmpbody {
}

#mmpheader img, #mmpcontent .mmpbody img {
  max-width: 100%;
  height: auto;
}

#mmpcontent .imageheading {
  background-position: center center, center center;
  background-size: auto, cover;
  color: #f4f2ec;
  font-family: Eczar, serif;
  font-weight: bold;
  font-size: 125%;
  height: 100px;
  line-height: 100px;
}

#mmpcontent .mmpcollapsible .imageheading {
  position: relative;
}

#mmpcontent .mmpcollapsible .imageheading a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #f4f2ec;
  line-height: 100px;
  padding-left: 32px;
}

#mmpcontent .mmpcollapsible .imageheading a:hover, #mmpcontent .mmpcollapsible .imageheading a:active {
  text-decoration: none;
}

#mmpcontent .mmpcollapsible.collapsed .imageheading {
  border-bottom: 5px solid #1d0b07;
}

#mmpcontent .mmpcollapsible.collapsed .imageheading a {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHAQMAAAD6aRWtAAAABlBMVEVvcnTzvkSH/0sSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg8MFh7c4lBhAAAAFElEQVQI12NwYEhgKGCoAOIEBgcAEjYCmWxNs0wAAAAASUVORK5CYII=") 20px center no-repeat;
}

#mmpcontent .mmpcollapsible.collapsed  .mmpbody {
  display: none;
}

#mmpcontent .mmpcollapsible.expanded .imageheading {
  border-bottom: none;
}

#mmpcontent .mmpcollapsible.expanded .imageheading a {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAEAQMAAAB4CLc+AAAABlBMVEVvcnTzvkSH/0sSAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhAg8MFiVt6blFAAAAEElEQVQI12P4x1DDYMEgAAAKHgHDGrfkbwAAAABJRU5ErkJggg==") 20px center no-repeat;
}

#mmpcontent .mmpcollapsible.expanded  .mmpbody {
  display: block;
}

#mmpcontent .button .wrapper {
  display: block;
  border-radius: 8px;
  border: 1px outset rgba(129, 72, 104, 0.2);
  background: #814868;
  font-weight: bold;
  text-align: center;
  padding: 4px;
  margin: 40px auto 0 auto;
  width: 200px;
}

#mmpcontent .button a {
  display: block;
  border-radius: 7px;
  border: 2px outset rgba(123, 3, 167, 0.6);
  background: #7b03a7;
  background: linear-gradient(to right, #7b03a7, #bd0ec8 50%, #7b03a7 100%);
  background: linear-gradient(to right, #7b03a7, #bd0ec8 50%, #7b03a7 100%) border-box;
  color: #ffffff !important;
  font-weight: bold;
  text-align: center;
  padding: 8px;
}

#mmpcontent .twocols .leftcol {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  max-width: 50%;
}

#mmpcontent .twocols .rightcol {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  max-width: 50%;
}

#mmpcontent .listheading {
  font-weight: bold;
  background: #423321;
  color: #f4f2ec;
  line-height: 3.5;
  padding:  0 0 0 1.6em;
  margin: 0 0 1px 0;
}

#mmpcontent .twocols .leftcol .listheading {
  margin: 0 1px 1px 0;
}

#mmpcontent .twocols .rightcol .listheading {
  margin: 0 1px 1px 1px;
}

#mmpcontent ul {
  padding: 0;
  margin: 0;
}

#mmpcontent ul li {
  list-style: none;
  background: #1d0b07;
  line-height: 3.5;
  padding: 0 0 0 1.6em;
  margin: 0 0 1px 0;
}

#mmpcontent ul li a {
  display: block;
}

#mmpcontent .twocols .leftcol ul li {
  margin: 0 1px 1px 0;
}

#mmpcontent .twocols .rightcol ul li {
  margin: 0 1px 1px 1px;
}

#mmpheader {
  border-bottom: 5px solid #1d0b07;
  background: #1a0e05 url("/media/hearthstone.gamepedia.com/7/78/Mobile_Main_Page_header.jpg") no-repeat center center / cover;
  color: #c0a66d;
  text-align: center;
  padding: 8% 12%;
  line-height: 2;
}

#mmpheader a, #mmpheader a:link {
  color: #ffca49;
}

#mmpheader a:visited {
  color: #f6d17a;
}

#mmpheader a.extiw, #mmpheader a.external {
  color: #ffca49 !important;
}

#mmpheader .mmpbody a.extiw:visited, #mmpheader a.external:visited {
  color: #f6d17a !important;
}

#mmpfeature .mmpbody {
  background: #1a0e05;
  color: #ffffff;
  font-size: 105%;
  text-align: center;
  padding: 8% 8%;
  line-height: 2;
}

#mmpfeature .mmpbody a, #mmpfeature .mmpbody a:link {
  color: #d5ab6b;
}

#mmpfeature .mmpbody a:visited {
  color: #f6d17a;
}

#mmpfeature .mmpbody a.extiw, #mmpfeature .mmpbody a.external {
  color: #d5ab6b !important;
}

#mmpfeature .mmpbody a.extiw:visited, #mmpfeature .mmpbody a.external:visited {
  color: #f6d17a !important;
}

#mmpfeature .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/b/b7/Mobile_Main_Page_Feature_header_5.jpg");
  background-position: center 25%;
}

#mmpfeature .heading {
  color: #ffffff;
  font-family: Eczar, serif;
  font-size: 340%;
  font-weight: bold;
  line-height: 62px;
  margin-bottom: 10px;
}

#mmpfeature .subheading {
  color: #ffdb4e;
  font-size: 180%;
  line-height: 33px;
  margin-bottom: 20px;
}

#mmpexpansions .mmpbody {
  background: #150704;
}

#mmpexpansions .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/7/77/Mobile_Main_Page_Expansions_header.jpg");
  background-position: center center, top center;
}

#mmpexpansions .mmpbody a, #mmpexpansions .mmpbody a:link {
  color: #d5ab6b;
}

#mmpexpansions .mmpbody a:visited {
  color: #f6d17a;
}

#mmpclasshero .mmpbody {
  background: #150704;
  color: #ffffff;
  text-align: center;
  margin-bottom: -1px;
  overflow: hidden;
}

#mmpclasshero .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/3/30/Mobile_Main_Page_Classes_and_Heroes_header.jpg");
}

#mmpclasshero .mmpbody a, #mmpclasshero .mmpbody a:link {
  color: #d5ab6b;
}

#mmpclasshero .mmpbody a:visited {
  color: #f6d17a;
}

#mmpclasshero .classherolinkgroup {
  display: flex;
  flex-flow: row nowrap;
  text-align: center;
  overflow: hidden;
}

#mmpclasshero .classlinks, #mmpclasshero .herolinks {
  display: flex;
  flex-flow: column nowrap;
  width: 50%;
}

#mmpclasshero .classlink {
  line-height: 3.5;
  margin: 0 1px 1px 0;
  width: 100%;
  height: 100%;
}

#mmpclasshero .herolink {
  line-height: 3.5;
  margin: 0 0 1px 1px;
  width: 100%;
  flex-basis: 100%;
}

#mmpclasshero .classlink .inner, #mmpclasshero .herolink .inner {
  display: table;
  width: 100%;
  height: 100%;
}

#mmpclasshero .classlink .icon {
  display: inline-block;
  background-position: left center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  width: 25px;
  height: 20px;
  vertical-align: middle;
}

#mmpclasshero .classlink a {
  display: table-cell;
  background-color: #423321;
  color: #ffffff !important;
  font-family: Eczar, serif;
  font-size: 110%;
  font-weight: bold;
  text-align: left;
  padding-left: 1.6em;
  vertical-align: middle;
}

#mmpclasshero .herolink a {
  display: table-cell;
  background-color: #1d0b07;
  text-align: left;
  padding-left: 1.6em;
  vertical-align: middle;
}

#mmpclasshero .herolink .image {
  display: none;
}

#mmpclasshero #demonhunterlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/0/05/Demon_Hunter_icon.png");
}

#mmpclasshero #druidlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/8/8d/Icon_Druid_64.png");
}

#mmpclasshero #hunterlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/f/f4/Icon_Hunter_64.png");
}

#mmpclasshero #magelink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/f/f2/Icon_Mage_64.png");
}

#mmpclasshero #paladinlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/7/7b/Icon_Paladin_64.png");
}

#mmpclasshero #priestlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/2/23/Icon_Priest_64.png");
}

#mmpclasshero #roguelink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/7/76/Icon_Rogue_64.png");
}

#mmpclasshero #shamanlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/a/a8/Icon_Shaman_64.png");
}

#mmpclasshero #warlocklink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/2/2e/Icon_Warlock_64.png");
}

#mmpclasshero #warriorlink .icon {
  background-image: url("/media/hearthstone.gamepedia.com/1/19/Icon_Warrior_64.png");
}

#mmpguide .mmpbody {
  background: #1d0b07;
  color: #ffffff;
  font-size: 105%;
  text-align: center;
  padding: 15% 15%;
  line-height: 2;
}

#mmpguide .mmpbody a, #mmpguide .mmpbody a:link {
  color: #d5ab6b;
}

#mmpguide .mmpbody a:visited {
  color: #f6d17a;
}

#mmpguide .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/d/df/Mobile_Main_Page_Guide_header.jpg");
}

#mmpguide .subheading {
  color: #ffdb4e;
  font-size: 250%;
  line-height: 45px;
  margin-bottom: 40px;
}

#mmpstreamer .mmpbody {
  background: #1d0b07;
  text-align: center;
  padding: 10px 0;
}

#mmpstreamer .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/d/d1/Mobile_Main_Page_Streamer_header.jpg");
}

#mmpmechanics .mmpbody {
  background: #150704;
}

#mmpmechanics .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/3/3a/Mobile_Main_Page_Mechanics_header.jpg");
}

#mmpmechanics .mmpbody a, #mmpguide .mmpbody a:link {
  color: #d5ab6b;
}

#mmpmechanics .mmpbody a:visited {
  color: #f6d17a;
}

#mmpgameplay .mmpbody {
  background: #150704;
}

#mmpgameplay .imageheading {
  background-image: linear-gradient(to right, rgba(42, 25, 7, 0.8), rgba(42, 25, 7, 0.6) 50%, rgba(42, 25, 7, 0.8) 100%),
                    url("/media/hearthstone.gamepedia.com/2/23/Mobile_Main_Page_Gameplay_header.jpg");
}

#mmpgameplay .mmpbody a, #mmpgameplay .mmpbody a:link {
  color: #d5ab6b;
}

#mmpgameplay .mmpbody a:visited {
  color: #f6d17a;
}

#mmpnews .mmpbody {
  background: transparent;
  color: #aa8e70;
  padding: 30px 30px 0 30px;
}

#mmpnews .mmpbody a.extiw, #mmpnews .mmpbody a.external {
  color: #a1360e !important;
}

#mmpnews .mmpbody a.extiw:visited, #mmpnews .mmpbody a.external:visited {
  color: #cc6238 !important;
}

#mmpnews .heading {
  border-bottom: 1px solid #e2ddcf;
  color: #000000;
  font-family: Eczar, serif;
  font-weight: bold;
  font-size: 200%;
  text-align: center;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

#mmpnews .newsitem {
  background: transparent;
  border-bottom: 1px solid #e2ddcf;
  padding-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

/******************
/* Infobox styles *
/******************/
.infobox {
  border: none;
  background: #f2e2c3;
  color: #2c2c2c;
  vertical-align: top;
  margin: 0 auto 8px auto !important;
  padding: 3px;
}

.infobox td, .infobox th {
  vertical-align: top;
}

.infobox caption {
  font-size: larger;
  margin-left: inherit;
}

.infobox.bordered {
  border-collapse: collapse;
}

.infobox.bordered td, .infobox.bordered th {
  border: 1px solid #cbb995;
}

.infobox.bordered .borderless td, .infobox.bordered .borderless th {
   border: 0;
}

/*********************
/* Navigation tables *
/*********************/
table.nav {
  border: none;
  background: transparent;
  box-shadow: none;
  cell-spacing: 0;
  margin: 0 auto 10px auto;
  padding: 0;
  clear: both;
}

table.nav th, table.nav tr th, table.nav > tr > th, table.nav > * > tr > th {
  border: 1px solid #cbb995;
  background: #f2e2c3;
  color: #3f2503;
  font-weight: bold;
  font-family: Eczar, serif;
  text-align: center;
  vertical-align: top;
  margin: 0;
  padding: 5px 5px 6px 5px;
}

table.nav td, table.nav tr td, table.nav > tr > td, table.nav > * > tr > td {
  border: 1px solid #cbb995;
  background: #efd8af;
  color: #2c2c2c;
  text-align: left;
  vertical-align: top;
  margin: 0;
  padding: 3px 11px 8px 11px;
}

table.nav td.list, table.nav tr td.list, table.nav > tr > td.list, table.nav > * > tr > td.list {
  padding: 0;
}

table.nav td .item {
  display: inline-block;
  border-left: 1px solid #cbb995;
  margin: 3px 0 6px 0;
  padding: 0 11px 2px 11px;
}

table.nav td .item:first-child {
  border: none;
}

/******************
/* Infobox styles *
/******************/
.stdinfobox, .cardbox {
  border-radius: 7px;
  border: 1px solid #805416;
  background: #fdf0d9;
  color: #2c2c2c;
  margin: 0 10px 10px 10px;
  padding: 8px;
  vertical-align: top;
  width: auto;
  overflow: hidden;
}

.stdinfobox.clear {
  clear: right;
  margin-top: 10px;
}

.stdinfobox .title, .cardbox .title {
  font-weight: bold;
  font-family: Eczar, serif;
  border-radius: 4px;
  border: none;
  background: #fdf0d9;
  color: #3f2503;
  font-size: 132%;
  font-weight: bold;
  text-align: center;
  margin: 0 0 8px 0;
  padding: 0 0 5px 0;
  overflow: auto;
}

.stdinfobox .image, .cardbox .image {
  display: inline-block;
  text-align: center;
  padding: 10px;
  vertical-align: middle;
}

.stdinfobox .image img, .cardbox .image img {
  margin: 0;
  padding: 0;
}

.stdinfobox .body, .cardbox .body {
  display: inline-block;
  margin: 0;
  padding: 10px;
  vertical-align: middle;
}

.stdinfobox table, .cardbox table {
  margin: 0 auto;
}

.stdinfobox table tr th, .cardbox table tr th {
  border: none;
  background: transparent;
  font-weight: bold;
  color: #3f2503;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  padding: 0 3px 1px 0;
}

.stdinfobox table tr td, .cardbox table tr td {
  border: none;
  background: transparent;
  color: #2c2c2c;
  text-align: left;
  vertical-align: center;
  padding: 0 0 1px 3px;
}

.stdinfobox table tr td.wide, .cardbox table tr td.wide {
  border: none;
  background: transparent;
  color: #2c2c2c;
  text-align: center;
  vertical-align: center;
  padding: 0 3px 1px 3px;
}

/**************************************
/* Card infobox image selector styles *
/**************************************/
.card-infobox-image-selector-js .card-infobox-image-selector-links {
  background: #efd8af;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title {
  text-align: center;
  flex: 1 0 25%;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title .card-infobox-image-title-text {
  display: none;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title .card-infobox-image-title-link {
  display: inline;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title.card-infobox-image-selected {
  background: #f6ead1;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title.card-infobox-image-selected .card-infobox-image-title-text {
  display: inline;
}

.card-infobox-image-selector-js .card-infobox-image-selector-links .card-infobox-image-title.card-infobox-image-selected .card-infobox-image-title-link {
  display: none;
}

.card-infobox-image-selector-js .card-infobox-image {
  display: none;
}

.card-infobox-image-selector-js .card-infobox-image.card-infobox-image-selected {
  display: block;
}

.card-infobox-image-selector-js .card-infobox-image-note {
  display: none;
}

/**************************
/* Rarity specific styles *
/**************************/
.none      { color: #805416; text-shadow: 0 0 2px #ead7ac; }     .none-box      { border: 1px solid #805416; }
.free      { color: #805416; text-shadow: 0 0 2px #ead7ac; }     .free-box      { border: 1px solid #805416; }
.basic     { color: #000000; text-shadow: 0 0 2px #ead7ac; }     .basic-box     { border: 1px solid #000000; }
.common    { color: #f6f6f6; text-shadow: 0 0 2px #ead7ac; }     .common-box    { border: 1px solid #f6f6f6; }
.rare      { color: #2570e5; text-shadow: 0 0 2px #ead7ac; }     .rare-box      { border: 1px solid #2570e5; }
.epic      { color: #8f2aac; text-shadow: 0 0 2px #ead7ac; }     .epic-box      { border: 1px solid #800080; }
.legendary { color: #d08d0b; text-shadow: 0 0 2px #ead7ac,
                                          0 0 2px #ffa500; }     .legendary-box { border: 1px solid #ffa500; }

.stdinfobox.none-style, .cardbox.none-style           { border: 1px solid #805416; }
.stdinfobox.free-style, .cardbox.free-style           { border: 1px solid #805416; }
.stdinfobox.basic-style, .cardbox.basic-style         { border: 1px solid #000000; }
.stdinfobox.common-style, .cardbox.common-style       { border: 1px solid #f6f6f6; }
.stdinfobox.rare-style, .cardbox.rare-style           { border: 1px solid #2570e5; }
.stdinfobox.epic-style, .cardbox.epic-style           { border: 1px solid #800080; }
.stdinfobox.legendary-style, .cardbox.legendary-style { border: 1px solid #ffa500; }

/*************************
/* Class specific styles *
/*************************/
.any          { color: #805416;                                 }
.death-knight { } .death-knight-box { background: rgba(196, 30, 59, 0.6) !important;  }
.demon-hunter { } .demon-hunter-box { background: rgba(163, 48, 201, 0.6) !important; }
.druid        { } .druid-box        { background: rgba(101, 60, 36, 0.6) !important;  }
.hunter       {  } .hunter-box       { background: rgba(37, 97, 33, 0.6) !important;  }
.mage         { } .mage-box         { background: rgba(101, 122, 173, 0.6) !important;  }
.paladin      {  } .paladin-box      { background: rgba(198, 140, 29, 0.6) !important;  }
.priest       {  } .priest-box       { background: rgba(255, 255, 255, 0.4) !important;  }
.rogue        {  } .rogue-box        { background: rgba(59, 59, 65, 0.6) !important;  }
.shaman       {  } .shaman-box       { background: rgba(22, 40, 116, 0.6) !important;  }
.warlock      {  } .warlock-box      { background: rgba(84, 53, 95, 0.6) !important;  }
.warrior      {  } .warrior-box      { background: rgba(128, 27, 17, 0.6) !important; }

.stdinfobox.any-style .title, .cardbox.any-style .title                   { background: rgba(63, 37, 3, 0.2);     }
.stdinfobox.classless-style .title, .cardbox.classless-style .title       { background: rgba(63, 37, 3, 0.2);     }
.stdinfobox.death-knight-style .title, .cardbox.death-knight-style .title { background: rgba(196, 30, 59, 0.6);    }
.stdinfobox.demon-hunter-style .title, .cardbox.demon-hunter-style .title { background: rgba(163, 48, 201, 0.6); }
.stdinfobox.druid-style .title, .cardbox.druid-style .title               { background: rgba(101, 60, 36, 0.6);   }
.stdinfobox.hunter-style .title, .cardbox.hunter-style .title             { background: rgba(37, 97, 33, 0.6);  }
.stdinfobox.mage-style .title, .cardbox.mage-style .title                 { background: rgba(101, 122, 173, 0.6);  }
.stdinfobox.paladin-style .title, .cardbox.paladin-style .title           { background: rgba(198, 140, 29, 0.6); }
.stdinfobox.priest-style .title, .cardbox.priest-style .title             { background: rgba(255, 255, 255, 0.4);  }
.stdinfobox.rogue-style .title, .cardbox.rogue-style .title               { background: rgba(59, 59, 65, 0.6);  }
.stdinfobox.shaman-style .title, .cardbox.shaman-style .title             { background: rgba(22, 40, 116, 0.6);    }
.stdinfobox.warlock-style .title, .cardbox.warlock-style .title           { background: rgba(84, 53, 95, 0.6);  }
.stdinfobox.warrior-style .title, .cardbox.warrior-style .title           { background: rgba(128, 27, 17, 0.6);  }

/******************
/* General styles *
/******************/
.hearthstone {
  border-top: 1px solid #f6d664;
  border-left: 1px solid #f6d664;
  border-right: 1px solid #f6d664;
  border-bottom: 1px solid #f3bb4c;
  background: #74200e;
  color: #f3e7cd;
  margin: 0 0 10px 0;
  padding: 3px;
}

.hearthstone a, .hearthstone a.extiw, .hearthstone a.external {
  color: #f9c171 !important;
}

.hearthstone a:visited, .hearthstone a.extiw:visited, .hearthstone a.external:visited {
  color: #dcbc8e !important;
}

.hearthstone a.new {
  color: #fb9999 !important;
}

.hearthstone a.new:visited {
  color: #e7adad !important;
}

.hearthstone a:active {
  color: #ffffff !important;
}

.ghost {
  color: #7c581a;
}

.wideonly {
  display: none;
}

.nomobile {
  display: none;
}