MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
body.page-Heroes_of_the_Storm_Wiki h1.firstHeading,
body.page-Stormpedia h1.firstHeading { display:none; }

.smw-editpage-help { display: none; }

/* ******************************************** */
/* Image Thumb Styles                           */
/* ******************************************** */
div.thumb {
    background: transparent;
}

/* ******************************************** */
/* Mainpage Tables                              */
/* ******************************************** */
table.mainpage {
    border-spacing: 2px;
    padding: .5em;
    width: 100%;
}

table.mainpage > tr > td,
table.mainpage > * > tr > td {
    border: solid 1px var(--custom-border-color);
    border: solid 1px rgba(var(--custom-border-color--rbg),.5);
    vertical-align: top;
}

table.mainpage div.header {
    background: rgba(var(--custom-border-color--rbg),.5);
    font-size: 120%;
    font-weight: bold;
    padding: .25em .5em;
}

/* ******************************************** */
/* Hatnote Styling                              */
/* ******************************************** */
div.hatnote {
    font-style: italic;
    padding-left: 2em;
}

/* ******************************************** */
/* Ability Box Styling                          */
/* ******************************************** */
table.ability {
    border-collapse:collapse;
    width:75%;
}

table.ability .title {
    font-size:135%;
    font-weight:bold;
}

table.ability .hotkey {
    background: var(--custom-border-color-2);
    color: var(--theme-page-background-color);
    padding:0.1em 0.3em;
}

table.ability table.mainbox {
    border:1px solid var(--custom-border-color-2);
    border-collapse:collapse;
}

table.ability .icon {
    width:64px;
    vertical-align:top;
}

table.ability .header {
    background:rgba(var(--custom-border-color--rbg),.5);
    width:33%;
}

/* ******************************************** */
/* Infobox Styling                              */
/* ******************************************** */
table.infobox {
    float: right;
    margin: 0 0 2em 1em;
    padding: 0px;
    width: 250px;
    clear: right;
}

table.infobox .title {
    font-size: 135%;
    font-weight: bold;
    padding-left: 0.6em;
}

table.infobox .mainbox {
    background: var(--custom-background-color);
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    border-collapse: separate;
    border-spacing: 2px;
    width: 250px;
}

table.infobox .header {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),0.15);
}

table.infobox .caption {
    font-size: 88%;
}

table.infobox .label {
    font-weight: bold;
    background: rgba(var(--theme-body-dynamic-color-1--rgb),0.07);
    padding-right: 0.5em;
    text-align: right;
}

table.infobox .data {
    padding-left: 0.5em;
}

table.infobox .content {
    text-align: center;
}

/* ******************************************** */
/* Infobox2 Styling (To be merged later)        */
/* ******************************************** */

table.infobox2 {
    background: var(--custom-background-color);
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    border-spacing: 2px;
    width: 20em;
    float: right;
    clear: right;
    margin: 0 0 2em 1em;
}

table.infobox2 > tr > td,
table.infobox2 > * > tr > td {
    background: none;
    padding: 0 .5em;
    text-align: right;
}

table.infobox2 > tr > th,
table.infobox2 > * > tr > th {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),0.15);
    padding: 0 .5em;
    text-align: left;
}

table.infobox2 > tr > th.name,
table.infobox2 > * > tr > th.name,
table.infobox2 > tr > th.title,
table.infobox2 > * > tr > th.title {
    font-size: 120%;
    text-align: center;
}

table.infobox2 > tr > th.section,
table.infobox2 > * > tr > th.section {
    text-align: center;
}

.infobox2.warrior-box {
    background-image: url(https://static.wikia.nocookie.net/allstars_gamepedia/images/1/19/Warrior-bg.svg/revision/latest?cb=20140310185758), linear-gradient(to bottom,rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%,rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%);
    border-color: #69090d;
    border-top: none;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 1px;
}

/* ******************************************** */
/* Navbox Styling                               */
/* ******************************************** */

table.navbox {
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    width: 90%;
    margin: 1em auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}

table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */
  margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
}

.navbox-group {
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}

.navbox, .navbox-subgroup {
  background: transparent;
}

.navbox-list {
  border-color: transparent;
}

.navbox-title,
table.navbox th {
  background: rgba(var(--theme-body-dynamic-color-1--rgb),.14);
}

.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
  background: rgba(var(--theme-body-dynamic-color-1--rgb),.07);
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
  background: rgba(var(--theme-body-dynamic-color-1--rgb),.035);
}

.navbox tr {
   background-color: transparent;
}

.navbox-even {
  background: rgba(var(--theme-body-dynamic-color-1--rgb),.035);
}

.navbox-odd {
  background: transparent;
}

/* ******************************************** */
/* Horizontal Lists                             */
/* ******************************************** */
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
    line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
}
.hlist dd,
.hlist dt,
.hlist li { 
    display: inline;
    margin: 0;
}
/* Display nested lists inline */
.hlist dl dl,
.hlist ol ol,
.hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dd:after,
.hlist dt:after,
.hlist li:after {
    content: " ·";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* for IE 8 */
.hlist dd.nopunct:after,
.hlist dt.nopunct:after,
.hlist li.nopunct:after {
    content: none;
}
/* Add parens around nested lists */
.hlist dl dl:before,
.hlist ol ol:before,
.hlist ul ul:before {
    content: "(";
}
.hlist dl dl:after,
.hlist ol ol:after,
.hlist ul ul:after {
    content: ")";
}
/* Put numbers in ordered lists */
.hlist.hnum ol li {
    counter-increment: level1;
}
.hlist.hnum ol li:before {
    content: counter(level1) " ";
}
.hlist.hnum ol ol li {
    counter-increment: level2;
}
.hlist.hnum ol ol li:before {
    content: counter(level2) " ";
}

/***********************
/* New main page (WIP) *
/***********************/

body.ns-0.page-Heroes_of_the_Storm_Wiki,
body.ns-0.page-Heroes_of_the_Storm_Wiki_sandbox {
    min-width: calc(934px + 41em);
}

.welcome > .heading {
    font-family: Exo;
    font-size: 120%;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: .25em;
    margin-bottom: .5em;
}

.main-page {
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    border: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    padding: 2em;
    margin-bottom: 2em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main-page.main-page-left {
    clear: left;
    float: left;
    width: calc(937px + 4em);
}

.main-page.main-page-right {
    clear: right;
    margin-left: calc(937px + 6em);
    margin-right: auto;
    width: 25em;
    overflow: hidden;
    
}

.main-page > .heading {
    font-family: Exo;
    font-size: 120%;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: .5em;
}

.main-page > .heading2 {
    font-family: Exo;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1em;
}

.main-page-left > .heading:not(.noborder) {
    background: url(https://static.wikia.nocookie.net/allstars_gamepedia/images/6/65/Main-page-heading.png/revision/latest?cb=20140301152120);
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: .25em;
}

.main-page-hero-headers {
    width: 933px;
}

.main-page-hero-headers > div {
    width: 25%;
    font-family: Exo;
    color: #b6edff;
    text-align: center;
    float: left;
    font-size: 150%;
}

.main-page-heroes {
    clear: both;
    background: url(https://static.wikia.nocookie.net/allstars_gamepedia/images/e/ec/Heroesbg.png/revision/latest?cb=20160725143007) no-repeat top left;
    width: 933px;
    height: 781px;
    overflow: hidden;
    position: relative;
}

.main-page-heroes > div {
    width: 233px;
    height: 514px;
    position: absolute;
    top: 2px;
}

.main-page-heroes > div.assassin {
    left: 1px;
}

.main-page-heroes > div.warrior {
    left: 235px;
}

.main-page-heroes > div.support {
    left: 468px;
}

.main-page-heroes > div.specialist {
    left: 700px;
}

.main-page-heroes > div.other {
    top: 517px;
    left: 1px;
    height: 64px;
    width: 931px;
    padding: .5em;
}

.main-page-heroes > div.other > div.header {
    font-family: Exo;
    text-transform: uppercase;
    font-size: 120%;
}

.hero-tile {
    float: left;
    text-align: center;
    padding: .5em 0;
    width: 77px;
}

.hero-tile .link a:not(.new) {
    color: white;
}

.mechanics-tile {
    display: inline-block;
    text-align: center;
    width: calc(77px + 2em);
    vertical-align: top;
}

.main-page-nexus {
    background: url(https://static.wikia.nocookie.net/allstars_gamepedia/images/c/c3/Main-page-nexus-divider.png/revision/latest?cb=20140303170926) no-repeat center left;
    display: table-cell;
    float: right;
    width: calc(440px + 1em);
    position: relative;
    vertical-align: bottom;
    height: 125px;
    margin-left: 1em;
    /* overflow: hidden; */
}

.main-page-nexus > .nexus-upsell {
    position: absolute;
    top: calc(-50px - 1px - 2em); /* -50px - border of .main-page - padding of .main-page  */
    left: 1em;
    z-index: 0;
}

.main-page-nexus > .nexus-logo {
    position: absolute;
    top: calc(-46px - 1px - 2em);
    right: 0;
    z-index: 0;
}

.main-page-nexus > .nexus-text {
    font-family: Exo;
    font-size: 120%;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: calc(-46px - 1px - 2em + 145px);
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 .5em rgba(var(--theme-body-dynamic-color-1--rgb),.75);
    width: 322px;
}

.main-page-nexus > .nexus-links {
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 322px;
    text-align: center;
}
.main-page-nexus > .nexus-links > .nexus-go {
    display: inline-block;
}

div#content .main-page-nexus > .nexus-links > .nexus-go a,
div#content .main-page-nexus > .nexus-links > .nexus-go a.external {
    background: var(--custom-content-color-2);
    color: white;
    border: none;
    border-left: solid 2px var(--custom-content-color-1);
    border-radius: 0;
    box-shadow: 0 0 10px 1px var(--custom-content-color-3) inset;
    display: inline-block;
    font-size: 120%;
    padding: .5em 1.5em;
    vertical-align: middle;
    margin: 0 .25em;
}

.main-page-nexus > .nexus-links > .nexus-social {
    display: inline-block;
}

.main-page-nexus > .nexus-links > .nexus-social img {
    margin: 0 .25em;
}

/*****************************
/* Tournament Bracket Styles *
/*****************************/

.tournament-bracket {
    font-size: 90%;
    margin: 1em 2em 1em 1em;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

.tournament-bracket .round-title {
    border: none;
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.2);
    text-align: center;
}

.tournament-bracket .match-bye,
.tournament-bracket .match-team,
.tournament-bracket .match-team-top,
.tournament-bracket .match-team-bottom {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    background-clip: padding-box;
    border: solid 1px transparent;
}

.tournament-bracket .match-bye {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.16);
}

.tournament-bracket .match-score,
.tournament-bracket .match-score-top,
.tournament-bracket .match-score-bottom {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.2);
    background-clip: padding-box;
    border:  solid 1px transparent;
    border-right: none;
    text-align: center;
}

.tournament-bracket .match-team-top,
.tournament-bracket .match-score-top {
    border-bottom: solid 1px transparent;
}

.tournament-bracket .match-team-bottom,
.tournament-bracket .match-score-bottom {
    border-top: solid 1px transparent;
}

.tournament-bracket .path-top,
.tournament-bracket .path-right,
.tournament-bracket .path-bottom,
.tournament-bracket .path-left {
    border: 1px none rgba(var(--theme-body-dynamic-color-1--rgb),.2);
}

.tournament-bracket .path-top {
    border-top-style: solid;
}

.tournament-bracket .path-right {
    border-right-style: solid;
}

.tournament-bracket .path-bottom {
    border-bottom-style: solid;
}

.tournament-bracket .path-left {
    border-left-style: solid;
}


/*****************
/* Color classes *
/*****************/

.color-bg-proceed,
table.wikitable > tr.color-bg-proceed,
table.wikitable > * > tr.color-bg-proceed,
table.wikitable > tr > td.color-bg-proceed,
table.wikitable > * > tr > td.color-bg-proceed {
    background-color: rgba(var(--custom-background-color-3--rgb), .2);
}

table.wikitable > tr.color-bg-proceed > td,
table.wikitable > * > tr.color-bg-proceed > td {
    background-color: transparent;
}

table.wikitable > tr.color-bg-proceed > th,
table.wikitable > * > tr.color-bg-proceed > th {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
}

.color-bg-staydown,
table.wikitable > tr.color-bg-staydown,
table.wikitable > * > tr.color-bg-staydown,
table.wikitable > tr > td.color-bg-staydown,
table.wikitable > * > tr > td.color-bg-staydown {
    background-color: rgba(253, 158, 158, .2);
}

table.wikitable > tr.color-bg-staydown > td,
table.wikitable > * > tr.color-bg-staydown > td {
    background-color: transparent;
}

table.wikitable > tr.color-bg-staydown > th,
table.wikitable > * > tr.color-bg-staydown > th {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
}

/*****************
 * Tabber Styles *
 *****************/

body .tabber {
    overflow-x: auto;
    display: table-cell;
}

body ul.tabbernav {
    border: none;
    display: block;
    padding: 0;
    margin: 0;
    font: inherit;
}

body ul.tabbernav li {
    display: inline-block;
    margin-left: .5em;
}

body ul.tabbernav li a {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.07);
    border: none;
    display: block;
    margin: 0;
    padding: .625em 1em;
    text-decoration: none;
    white-space: nowrap;
}

body ul.tabbernav li a:link {
    color: var(--theme-body-dynamic-color-1);
}

body ul.tabbernav li a:hover {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.07);
    color: var(--theme-body-dynamic-color-1);
}

body ul.tabbernav li a:visited {
    color: var(--theme-sticky-nav-text-color--hover);
}

body ul.tabbernav li.tabberactive a,
body ul.tabbernav li.tabberactive a:hover {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.14);
    border: none;
    color: var(--theme-body-dynamic-color-1);
}

body .tabber .tabbertab {
    border: none;
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.07);
}

/****************************
/* Competitive pages layout *
/****************************/

.competitive-page-flex-layout {
    display: flex;
    flex-direction: row;
    margin: -.5em;
    width: calc(100% + 1em);
    flex-wrap: wrap;
}

.competitive-page-flex-layout > div {
    display: flex;
    flex-direction: column;
}

.competitive-page-flex-layout > div:nth-child(1) {
    width: calc( 100% - 32em );
}

.competitive-page-flex-layout > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.competitive-page-flex-layout > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.competitive-page-flex-layout .mp-box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: .5em;
    background: none;
    border: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.3);
    padding: 0;
    box-sizing: border-box;
}

.competitive-page-flex-layout .mp-box > .mp-heading {
    background: linear-gradient(to top, rgba(var(--theme-body-dynamic-color-1--rgb),.3) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 75%) transparent no-repeat border-box;
    border-bottom: solid 1px rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    padding: .5em 1em;
    margin: 0;
    line-height: 27px;
    font-size: 120%;
}

.competitive-page-flex-layout .mp-box > .mp-content {
    flex: 1 0 auto;
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%) transparent no-repeat border-box;
    padding: 1em;
}

.competitive-page-flex-layout #welcome {
    flex: 0 0 auto;
}

.competitive-page-flex-layout #welcome .heading {
    font-size: 120%;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: .5em;
}

.competitive-page-flex-layout #welcome .mp-content {
    padding: 2em;
}

.competitive-page-flex-layout #featured-leagues,
.competitive-page-flex-layout #match-schedule {
    flex: 0 0 auto;
}

.competitive-page-flex-layout #tournaments,
.competitive-page-flex-layout #competitive-scene,
.competitive-page-flex-layout #wiki-community {
    width: 30em;
}

.competitive-page-flex-layout .mp-box#featured-leagues > .mp-content {
    padding: 0;
}

.competitive-page-flex-layout .mp-box#news > .mp-content {
    flex: 1 0 300px;
    overflow-y: scroll;
}

.competitive-page-flex-layout #tournaments {
    flex: 0 0 auto;
}

/* Adjust the flex layout to better fit on smaller screens */
@media ( max-width : 1700px ) {
.competitive-page-flex-layout > div:nth-child(1),
.competitive-page-flex-layout > div:nth-child(2) {
    width: 100%;
}

.competitive-page-flex-layout > div:nth-child(2) {
    flex-direction: row;
}

.competitive-page-flex-layout > div:nth-child(2) > div:nth-child(2) {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.competitive-page-flex-layout #tournaments {
    break-before: always;
}

.competitive-page-flex-layout #competitive-scene,
.competitive-page-flex-layout #wiki-community {
    width: auto;
    flex: 1 0 30em;
}
}

.featured-league-tabs .tabber {
    display: block;
}

.mp-box > .featured-league-tabs {
}

.featured-league-tabs ul.tabbernav {
    border-bottom-color: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    padding-left: 2em;
}

.featured-league-tabs ul.tabbernav li a {
    border: none;
    background: linear-gradient(to top, rgba(var(--theme-body-dynamic-color-1--rgb),.1) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),0) 100%) transparent no-repeat border-box;
    color: var(--theme-body-dynamic-color-1);
}

.featured-league-tabs ul.tabbernav li a:hover,
.featured-league-tabs ul.tabbernav li.tabberactive a:hover {
    background: linear-gradient(to top, rgba(var(--theme-body-dynamic-color-1--rgb),.2) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),0) 100%) transparent no-repeat border-box;
}

.featured-league-tabs ul.tabbernav li a:link,
.featured-league-tabs ul.tabbernav li a:visited {
    color: var(--custom-text-color);
}

.featured-league-tabs ul.tabbernav li.tabberactive a {
    border: none;
    background: linear-gradient(to top, rgba(var(--theme-body-dynamic-color-1--rgb),.2) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),0) 100%) transparent no-repeat border-box;
    color: var(--theme-body-dynamic-color-1);
}

.featured-league-tabs .tabberlive .tabbertab {
    border-color: transparent;
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.1) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),0) 2em) transparent no-repeat border-box;
    min-height: 2em;
    padding: 0;
}

.featured-league-tabs .tabberlive .tabbertab > p:first-child {
    display: none;
}

.featured-league-tab {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.league-tab-header {
    overflow:hidden;
}

.league-tab-logo {
    /* position: absolute; */
    top: 0;
    left: 0;
    height: 135px;
    width: 160px;
    overflow: hidden;
    text-align: center;
    float: left;
}
.league-tab-logo:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.league-tab-title {
    font-size: 150%;
    margin-left: calc(160px + .5em);
    line-height: 39px;
    padding-left: .5em;
    padding-right: .5em;
    margin-top: 24px;
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.025) 50%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 100%);
}

.league-tab-links {
    line-height: 39px;
    padding-right: 1em;
    position: absolute;
    right: 0;
    top: 24px;
}

.league-tab-links ul {
    margin: 0;
}

.league-tab-links ul li {
    display: inline-block;
    line-height: 39px;
    margin-right: .5em;
}

.league-tab-info {
    box-sizing: border-box;
    color: var(--custom-text-color);
    /* height: 72px; */
    margin-left: calc(160px + .5em);
    padding-left: 1em;
    padding-right: .5em;
}

.league-tab-content {
}

.league-tab-footer {
    height: 37px;
}

.league-tab-content .league-tab-rankings {
    position: absolute;
    top: 1em;
    left: 1em;
}

.league-tab-rankings-heading {
    font-size: 120%;
}

/*************************
 * Match Calendar Styles *
 *************************/

.match_calendar {
    width: 100%;
}

.match_calendar > * > tr > td:nth-child(1) {
    text-align: left;
    padding-left: 1em;
    background: linear-gradient(to right, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 10em, rgba(var(--theme-body-dynamic-color-1--rgb),0) 90%);
}

.match_calendar > * > tr > td:nth-child(2) {
    text-align: right;
    padding-right: 1.5em;
    background: linear-gradient(to left, rgba(var(--theme-body-dynamic-color-1--rgb),.0) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 1em, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 10em, rgba(var(--theme-body-dynamic-color-1--rgb),0) 90%);
}

.match_calendar > * > tr > td:nth-child(3) {
    text-align: center;
}

.match_calendar > * > tr > td:nth-child(4) {
    text-align: left;
    padding-left: 1.5em;
    background: linear-gradient(to right, rgba(var(--theme-body-dynamic-color-1--rgb),.0) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 1em, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 10em, rgba(var(--theme-body-dynamic-color-1--rgb),0) 90%);
}

.match_calendar > * > tr > td:nth-child(5) {
    text-align: right;
    padding-right: 1em;
    background: linear-gradient(to left, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 10em, rgba(var(--theme-body-dynamic-color-1--rgb),0) 90%);
}

.match_calendar > * > tr > td:nth-child(1),
.match_calendar > * > tr > td:nth-child(2),
.match_calendar > * > tr > td:nth-child(4),
.match_calendar > * > tr > td:nth-child(5) {
    width: 24%;
}

.match_calendar > * > tr > td:nth-child(3) {
    widht: 1%;
}

/******************
 * Tab Nav styles *
 ******************/

ul.tab-nav {
    border-bottom: solid 2px rgba(var(--theme-body-dynamic-color-1--rgb),.14);
    margin: 0 0 1em;
    overflow-y: hidden;
}

ul.tab-nav > li {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.07);
    background-clip: padding-box;
    border: solid 2px rgba(var(--theme-body-dynamic-color-1--rgb),.14);
    border-bottom: none;
    margin: 0 .2em;
    padding: .2em .5em;
    display: block;
    float: left;
    white-space: nowrap;
}

ul.tab-nav > li.selected {
    background-color: rgba(var(--theme-body-dynamic-color-1--rgb),.14);
}

/****************
 * Skill Styles *
 ****************/
.skill {
    background: var(--custom-background-color);
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.1);
    background: linear-gradient(to bottom, rgba(var(--theme-body-dynamic-color-1--rgb),.15) 0%, rgba(var(--theme-body-dynamic-color-1--rgb),.02) 100%);
    border: solid 1px var(--custom-background-color-1);
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 1em;
    width: 100%;
    overflow-y: hidden;
}

.skill .skill-image {
    float: left;
    margin-right: 1em;
    position: relative;
}

.skill .skill-image a {
    display: block;
}

.skill .skill-image .skill-key {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(var(--theme-page-background-color--rgb),.8);
    border: solid 2px var(--theme-page-background-color);
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
}

.skill .skill-heading {
    border-bottom: solid 1px var(--custom-background-color-1);
    overflow-x: auto;
}

.skill .skill-name {
    font-weight: bold;
}

.skill .skill-details {
}

.skill .skill-details .skill-cooldown,
.skill .skill-details .skill-cost,
.skill .skill-details .skill-type {
    padding-right: 1em;
}

.skill .skill-details .skill-cost {
    color: var(--custom-skill-text-color);
}

.undoc-x {
    color: var(--custom-undoc-x-text-color);
}

/*****************
 * Talent styles *
 *****************/

.talent-table {
    width: 100%;
}

.talent-table .talent-tier {
    margin-bottom: .75em;
    position: relative;
    overflow: hidden;
}

.talent-table .talent-tier-label {
    background: rgba(var(--theme-body-dynamic-color-1--rgb),.14);
    font-weight: bold;
    height: 100%;
    position: absolute;
    text-align: center;
    width: 2.5em;
}

.talent-table .talent-tier-talents {
    float: left;
    overflow: hidden;
    margin: -1px 0 -1px 2.5em;
    padding-left: 1px;
}

.talent-table .talent {
    background: linear-gradient(rgba(var(--theme-body-dynamic-color-1--rgb), 0.14902) 0%, rgba(var(--theme-body-dynamic-color-1--rgb), 0.0196078) 100%);
    border: 1px solid rgb(68, 68, 68);
    box-sizing: border-box;
    float: left;
    margin: 1px;
    padding: .5em;
    width: 25em;
}

.talent-table .talent-icon {
    float: left;
}

.talent-table .talent-name {
    border-bottom: 1px solid rgb(68, 68, 68);
    margin-left: calc( 64px + 1em );
}

.talent-table .talent-description {
    margin-left: calc( 64px + 1em );
}
/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}

/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
    margin: 0em auto 1em;
    background-color: rgba(var(--theme-page-background-color--rgb), 0.1);
    border: 2px solid var(--custom-border-color-2);
    border-radius: 1em;
    padding: 1em;
}

.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--custom-border-color-2);
    margin-bottom: 1ex;
}

.doc-footer {
    margin: 0;
    background-color: rgba(var(--theme-page-background-color--rgb), 0.1);
    border: 2px solid var(--custom-border-color-2);
    border-radius: 1em;
    padding: 1em;
}

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
    text-align: left;
}

.desktopcenter {
    text-align: center;
}

.desktopright {
    text-align: right;
}

/* Front page structure */
.fpbox {
    margin: 5px;
    padding: 5px;
    overflow: auto;
    width: calc(100% - 2px);
}

.fpbox.plain {
    background: transparent;
    border: none;
    box-shadow: none;
}

.fpbox .heading,
.fpbox .mainheading,
.fpbox .welcome {
    margin: 0 0 10px;
    padding: 0 0 5px;
    overflow: auto;
}

.fpbox .mainheading,
.fpbox .welcome {
    font-size: 150%;
    font-weight: bold;
}

.fpbox .heading {
    text-align: center;
    font-size: 132%;
}

.linkslabel {
    margin: 15px 5px 5px;
    padding: 0 0 5px;
}

/* Template:FP links styles */
.fplinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    text-align: center;
}

.fplink-outer {
    padding: 5px;
    flex-basis: calc(25% - 10px);
    width: calc(25% - 15px);
    min-width: 115px;
    display: inline-block;
    vertical-align: middle;
}

.fplink-wide {
    flex-basis: calc(33% - 10px);
    width: calc(33% - 15px);
}

.fplink-fullwidth {
    flex-basis: 100%;
    width: calc(100% - 15px);
    font-weight: bold;
}

.fplink {
    padding: 0.5em;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: table;
}

.fplink-plain {
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.fplink-inner {
    display: table-row;
}

.fplink a {
    display: table-cell;
    vertical-align: middle;
}

.fplink img {
    max-width: 150px;
    width: 100%;
    height: auto;
}
/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
    width: 100%!important;
    max-width: 480px;
    margin: 0 auto;
}

.fpbox .embedvideowrap iframe {
    width: 100%!important;
}

/* Multi-column box support */
.fp-container main .columns .leftcol,
.fp-container .columns .rightcol {
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 990px) {
    .fp-container .columns .leftcol {
        float: left;
        width: 50%;
    }

    .fp-container .columns .rightcol {
        float: right;
        width: 50%;
    }
}

.fp-section {
    display: flex;
    flex-wrap: wrap;
}


/* this CSS governs the responsive 2 column main page layout */
#fp-2column.fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c";
    grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c c";
        grid-template-columns: 50% 50%;
    }
}
@media screen and (min-width:1350px) {
    #fp-2column.fp-container {
        grid-template-areas: "a b" "c b";
        grid-template-columns: auto 520px;
    }
}

#fp-top {
    grid-area: a;
}

#fp-flex {
    grid-area: b;
}

#fp-bottom {
    grid-area: c;
}

/* end responsive 2 column main page layout */

/* ******************** */
/* End main page layout */
/* ******************** */