Common.css

/* Sitewide CSS stylesheet. Take care when making any changes as they'll be pushed to every user almost immediately. */

/* Import platform independant styles */
@import url('/MediaWiki:Universal.css?ctype=text/css&action=raw');
@import url('/MediaWiki:Routemap.css?ctype=text/css&action=raw');

/* Alpha label for the Hydra Dark skin */
label[for="mw-input-wpskin-hydradark"]::after {
    content: " (Alpha)";
}

/* {{pp-template}} */
.treeview ul {
    padding: 0 !important;
    margin: 0 !important;
}
.treeview li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-image: none;
}
.treeview li::after {
	display: block;
	content: '';
    clear: both;
}
.treeview li li {
	background: url("//static.wikia.nocookie.net/dota2_gamepedia/images/2/25/Treeview_grey_line.png") no-repeat 0 -2981px;
	/* @noflip */
	padding-left: 21px;
	text-indent: 0.3em;
}
.treeview li li:last-child {
	background-position: 0 -5971px
}
/* first line here deals with new situation after RemexHTML switch,
 * where emptyline cause the first child to become the 2nd child. Such a mess
 */
.treeview li.emptyline > ul > .mw-empty-elt:first-child + .emptyline,
.treeview li.emptyline > ul > li:first-child {
	background-position: 0 9px
}


/***************************
* Used by [[Template:Key]] *
****************************/
 .key {
	display:inline-block;
	white-space:nowrap;
}
 .key kbd {
	padding: 0.1em 0.6em 0.1em 0.6em; 
	margin-right:2px; 
	font-size:85%; 
	font-family:inherit; 
	font-style:normal;
	border-radius: .4em
}
 .keys {
	border: 1px solid #111;
	box-shadow: 0 0.2em rgb(0 0 0 / 50%);
	background-color: #505459;
	background-image: linear-gradient(to bottom, #505459, #282828);
	color: #eee
}

/******************************
* End Template:Key coloration *
*******************************/


/* Infobox styling */

.infobox {
	float: right;
	clear: right;
	margin: .5em 0 1em .5em;
	padding: 2px;
	width: 260px;
	border: 1px solid black;
	background: #fff;
}

.infobox .section {
	clear: both;
	padding: 3px;
	background: #c0dfff;
	color: black;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}

.infobox tr {
	vertical-align: top;
}

.cosm-inf-setname {
	background-color:#ccc
}

/* Update table styling ([[Template:VersionTableStart]], [[Template:PatchTableStart]] */

.updatetablehead {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-left: 1px solid #aaa;
	background-color: #ffaea3;
	text-align: center;
	font-weight: bold;
}

.updatetablebody {
	/* max-height: 300px; */
	/* overflow-y: scroll; */
	overflow-x: auto;
	border: 1px solid #aaa;
	border-top: none;
	background-color: #ebf5ff;
	/* font-family: mono; */
}

.updatetablehead #patch,
.updatetablehead #version,
.updatetablebody #patch,
.updatetablebody #version {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 120px;
	flex: 0 0 120px;
	text-align: center;
	font-weight: bold;
}

.updatetablehead #description,
.updatetablebody #description {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	border-left: 1px solid #aaa;
}

.updatetablebody #description {
	padding: 4px 0;
}

.updatetablebody #entry {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-top: 1px solid #aaa;
}

.updatetablebody ul {
	margin: 0 0 0 1.6em;
}

/* Template:GameVersionTableElement */
 .gvt-el-significant {
	background: #ffffcc !important
}

/* Template:Talent table el */
 .tte-right-tal-slot {
	height: 40px;
	padding: 0px;
	border-bottom: solid 2px black;
	background: #eff5ff !important
}

/* Item Grid Styling on [[Item Grid]]*/

ul.shopnav {
	margin: 0;
	list-style: none;
}

ul.shopnav li {
	margin: 4px;
	-webkit-box-shadow: 0 0 1px 2px green;
	box-shadow: 0 0 1px 2px green;
}


/* Item List Styling on [[Items]] */

div.itemlist {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	font-weight: 500;
}

div.itemlist > div {
	-ms-flex-preferred-size: 400px;
	flex-basis: 400px;
	padding: 3px 0;
}


/* Hero Infostrip */

div.infostripe {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: white;
	vertical-align: top;
	text-align: center;
	text-shadow: 0 0 5px black;
	font-size: 20px;
}

div.infostripe a,
div.infostripe a:link,
div.infostripe a:visited,
div.infostripe a:hover,
div.infostripe a:active {
	color: white;
	text-decoration: none;
}

.gradient_gameplay {
	background: -webkit-linear-gradient(75deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%);
	background: -o-linear-gradient(75deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%);
	background: linear-gradient(15deg, rgb(178, 67, 67) 0%, rgb(198, 92, 73) 17%, rgb(191, 127, 78) 62%, rgb(168, 65, 62) 100%);
}

.gradient_cosmetics {
	background: -webkit-linear-gradient(75deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%);
	background: -o-linear-gradient(75deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%);
	background: linear-gradient(15deg, rgb(74, 74, 74) 0%, rgb(105, 159, 159) 17%, rgb(171, 216, 214) 62%, rgb(74, 74, 74) 100%);
	;
}

.gradient_audio {
	background: -webkit-linear-gradient(75deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%);
	background: -o-linear-gradient(75deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%);
	background: linear-gradient(15deg, rgb(23, 84, 43) 0%, rgb(1, 164, 118) 17%, rgb(77, 185, 116) 62%, rgb(23, 84, 43) 100%);
}

.gradient_history {
	background: -webkit-linear-gradient(75deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%);
	background: -o-linear-gradient(75deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%);
	background: linear-gradient(15deg, rgb(180, 114, 15) 0%, rgb(188, 185, 2) 17%, rgb(212, 216, 92) 62%, rgb(180, 114, 15) 100%);
}

div.infostripe div {
	margin: 0 -2px;
	padding: 15px 25px 10px;
	border-right: 4px solid rgba(75, 75, 75, .5);
	border-left: 4px solid rgba(75, 75, 75, .5);
}


/* Hero entry - used in hero tables and cosmetic infoboxes */

div.heroentry {
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 1px;
	width: 110px;
	height: 62px;
}

div.heroentry div {
	position: absolute;
}

div.heroentrytext {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 1px 2px;
	width: 106px;
	height: 60px;
	color: white;
	text-align: center;
	text-shadow: -1px 0 .2em black, 0 1px .2em black, 1px 0 .2em black, 0 -1px .2em black;
	font-size: 11px;
	line-height: 15px;
	pointer-events: none;
}

/* Main Page styling */

.mp-content-table {
	/* Main border color		*/
	margin: .5em 0;
	width: 100%;
	/* Body background color	*/
	border: 1px solid #b44335;
	background: #fefeff;
}

.mp-content-header {
	padding: .5em 0;
	/* Header background color  */
	border: none;
	border-bottom: 1px solid #b44335;
	background: #b44335;
	color: #fff;
	font-size: 140%;
	/* Main border color		*/
}

.mp-content-body {
	padding: .5em;
}


/* Don't wordwrap top links on main page */

.mp-content-table ul > li a.external.text,
.mp-content-table ul > li > b > a {
	white-space: nowrap;
}

.mp-content-header-alt,
.mp-title-gradient {
	background: #b44335;
	color: #fff;
}

.mp-content-header-alt {
	margin: -.5em -.5em 0;
	padding: .5em;
	padding-left: .75em;
	border: none;
	border-bottom: 1px solid #b44335;
	color: #fff;
	/* Main border color		*/
	text-align: left;
	font-weight: bold;
	font-size: 140%;
}


/* Auto-size main page index icons */

.mp-index-icon {
	min-width: 64px;
	max-width: 128px;
	width: 100%;
	/* Image sizes.  Re-produce larger? */
	height: auto;
}


/* The main page banner */


.giant-banner {
	margin-bottom: 20px;
}

.giant-banner img {
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	width: 100%;
	height: 100%;
}

#mw-js-message,
.usermessage {
	margin-bottom: 39px !important;
}

#mp-layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

#mp-layout #mp-left {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	margin-right: 1em;
}

#mp-layout #mp-right {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 500px;
	flex: 0 0 500px;
}

#mp-layout .mp-block {
	margin-bottom: 1em;
	padding: 1em;
	border: solid 1px #600;
}

#mp-layout .mp-block#battle-pass {
	padding: 0;
	border: none;
	background: #000;
	text-align: center;
}

#mp-layout .mp-heading {
	height: 50px;
	border-bottom: solid 1px #ccc;
	color: #600;
	text-align: center;
	font-weight: bold;
	font-size: 170%;
}

#mp-layout #heroes .mp-content {
	text-align: center;
}

.useful-articles-layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.useful-articles-layout > div {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 33%;
	flex: 0 0 33%;
	max-width: 33%;
	word-wrap: break-word;
}

.useful-articles-layout > div > div:first-child {
	text-align: center;
	font-weight: bold;
}

/* End Main Page style */


/* wikitable/prettytable class for skinning normal tables */

table.wikitable,
table.prettytable {
	border: 1px #000 solid;
	background: #fefeff;
}

table.wikitable th,
table.wikitable td,
table.prettytable th,
table.prettytable td {
	white-space: inherit;
}

table.wikitable th,
table.prettytable th {
	text-align: center;
	white-space: inherit;
}

table.wikitable caption,
table.prettytable caption {
	margin-right: inherit;
	margin-left: inherit;
	font-weight: bold;
}

table.wikitable .subheader {
	background: #c9dcff;
	color: black;
	text-align: left;
}

table.cargoTable.wikitable th,
table.wikitable .header {
	background-color: #ffaea3;
	color: black;
}

table.wikitable .border {
	border: 1px #000 solid;
}

table.wikitable .borderless {
	border: 0;
}

table.wikitable .borderless td {
	border: 0;
}

table.wikitable .borderless th {
	border: 0;
}

table.prettytable code,
table.wikitable code {
	background-color: transparent;
}


/* Bring the wikitable cell padding back to what it was before an update */

table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
	padding: 1px 1px;
}


/* Sidebar */

body {
	position: relative;
	min-width: 1000px;
}

div#bodyContent2 {
	margin-right: 320px;
	min-height: 920px;
	width: auto;
	font-size: .8em;
	line-height: 1.5em;
}

/* For positioning icons at top-right, used in some templates */

.skin-vector div.topicon {
	position: absolute;
	top: -50px;
	z-index: 100;
	display: block !important;
}

.skin-monobook div.topicon {
	position: absolute;
	top: 10px;
	z-index: 100;
	display: block !important;
}


/* Fixing vector/main-ltr.css putting a white background on the Quotation template */

table.quotation {
	background: transparent !important;
}


/* Fancy styling for Abilities */

.ico_active,
.ico_passive,
.ico_autocast {
	position: relative;
	display: inline-block;
	margin: 3px;
	width: 128px;
	height: 128px;
	vertical-align: top;
}

.ico_active:before {
	position: absolute;
	width: 128px;
	height: 128px;
	background: url('https://static.wikia.nocookie.net/dota2_gamepedia/images/1/11/Overlay_active.png/revision/latest') no-repeat;
	content: '';
	pointer-events: none;
}

.ico_autocast:before {
	position: absolute;
	width: 128px;
	height: 128px;
	background: url('https://static.wikia.nocookie.net/dota2_gamepedia/images/d/df/Overlay_autocast.png/revision/latest') no-repeat;
	content: '';
	pointer-events: none;
}

.ico_passive:before {
	position: absolute;
	width: 128px;
	height: 128px;
	background: url('https://static.wikia.nocookie.net/dota2_gamepedia/images/6/6f/Overlay_passive.png/revision/latest') no-repeat;
	content: '';
	pointer-events: none;
}

/* Alternating shading of table rows */

.oddrowsgray tr:nth-child(odd) {
	background-color: #ededed;
}

.evenrowsgray tr:nth-child(even) {
	background-color: #ededed;
}


/* Client-side image scaling */

.images40pxwidth img {
	width: 40px;
	height: auto;
}


/* Tournament Bracket Styles */

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

.tournament-bracket .round-title {
	border: 1px solid #aaa;
	background-color: #f2f2f2;
	text-align: center;
}

.tournament-bracket .match-bye,
.tournament-bracket .match-team,
.tournament-bracket .match-team-top,
.tournament-bracket .match-team-bottom {
	border: 1px solid #aaa;
}

.tournament-bracket .match-bye {
	background-color: #ddd;
}

.tournament-bracket .match-score,
.tournament-bracket .match-score-top,
.tournament-bracket .match-score-bottom {
	border: 1px solid #aaa;
	background-color: #f2f2f2;
	text-align: center;
}

.tournament-bracket .path-top,
.tournament-bracket .path-right,
.tournament-bracket .path-bottom,
.tournament-bracket .path-left {
	border: 1px none black;
}

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

#mw-panel.collapsible-nav .portal h3#p-Partners-label {
	color: #e38800;
}


/* Cosmetic label styles [[Template:Cosmetic]] */

.cosmetic-label {
	display: inline-block;
	margin: 7px 5px 0;
	vertical-align: top;
	text-align: center;
	line-height: normal;
}

.cosmetic-label > div {
	margin-bottom: 5px;
}


/* Skill list styles [[Template:SkillListRich]] */

div.skilllist {
	width: 100%;
}

div.skilllist-title {
	border: 1px solid #aaa;
	background-color: #ffaea3;
	color: #000;
	text-align: center;
	font-weight: bold;
	font-size: 100%;
}

div.skilllist ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

li.skilllist-lite {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 3px;
	border: 1px solid #aaa;
	color: white;
	list-style: none;
	vertical-align: top;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	font-size: 110%;
}

li.skilllist-rich {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 3px;
	border: 1px solid #aaa;
	background-color: #efefef;
	list-style: none;
	vertical-align: top;
	text-align: left;
}

div.skilllist-rich-head {
	padding: 3px 5px;
	border-bottom: 1px solid black;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 110%;
}

div.skilllist-rich-image {
	display: inline-block;
	width: 64px;
	vertical-align: top;
}

div.skilllist-rich-desc {
	display: inline-block;
	padding: 3px 5px;
	max-width: calc(100% - 74px);
	vertical-align: top;
}

li.skilllist-lite a,
li.skilllist-lite a:link,
li.skilllist-lite a:visited,
li.skilllist-lite a:hover,
li.skilllist-lite a:active,
div.skilllist-rich-head a,
div.skilllist-rich-head a:link,
div.skilllist-rich-head a:visited,
div.skilllist-rich-head a:hover,
div.skilllist-rich-head a:active {
	color: white;
	text-decoration: none;
}


/***************************
* Desktop Specific Styles *
***************************/

/* Skill list styles [[Template:SkillListRich]] */

div.skilllist-col1 ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 100%;
	flex: 1 0 100%;
	width: 100%;
}

div.skilllist-col2 ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 50%;
	flex: 1 0 50%;
	width: 50%;
}

div.skilllist-col3 ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 calc(100%/3);
	flex: 1 0 calc(100%/3);
	width: calc(100%/3);
}

div.skilllist-col4 ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 25%;
	flex: 1 0 25%;
	width: 25%;
}

div.skilllist-col5 ul li {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 20%;
	flex: 1 0 20%;
	width: 20%;
}

/******************************************
* Custom Context Menu for Audio Download *
*******************************************/

#context-menu { position:absolute; display:none; }

#context-menu ul, #context-menu li {
    list-style:none;
    margin:0; padding:0;
    background:#ffaea3;
}

#context-menu { border:solid 1px #CCC;}
#context-menu li { border-bottom:solid 1px #CCC; }
#context-menu li:last-child { border:none; }
#context-menu li a {
    display:block;
    padding:2px 5px; 
    text-decoration:none;
    color:black;
    font-family: sans-serif;
    font-size: 0.875em;
}
#context-menu li a:hover {
    background:#B44335;
    color:#FFF;
}

div#mw-panel div.portal li a[href="https://discord.gg/AHt5MXZ"] {
    background: url(https://discordapp.com/api/guilds/576585892937072640/embed.png) no-repeat;
    color: transparent !important;
    display: inline-block;
    height: 20px;
    width: 119px;
    margin-left: -10px;
}

.oo-ui-tool-name-editModeVisual { display:none!important; }

.ability-description {
	display: block;
	float:right;	
	width: 312px;
}

.ability-description.adItemOrRune { width: 450px; }
.aml50 { margin-left: 50px; }

.talsymbolbg {
    display:inline-block;
    vertical-align:top;
    background-color:#151515;
    box-shadow:1px 1px 1.5px #000;
    border-width:1px;
    border-radius:50%;
    padding:0px 0;
    margin:0 0px;
    overflow:hidden;
}

/**********************
* Custom Tooltip Menu *
***********************/
[data-tooltip-passive]::before {
    /* needed - do not touch */
    content: attr(data-tooltip-passive);
    position: absolute;
    opacity: 0;

    /* customizable */
    transition: all 0.2s ease;
    padding: 5px;
    color: white;
    font-weight:bold; 
    text-shadow:0.7px 0.7px 1.2px #000;
    box-shadow: 1px 1px 2px #000;
}

[data-tooltip-passive]:hover::before {
    /* needed - do not touch */
    opacity: 1;

    /* customizable */
    background: rgba(53, 29, 91);
    border:1px solid rgba(205, 204, 235, 0.3);
    font-size: 85%;    
    margin-top: -28px;
    margin-left: 128px;
}

[data-tooltip-passive]:not([data-tooltip-persistent])::before {
    pointer-events: none;
}