MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Front page fix */
body.page-Overwatch_Wiki h1.firstHeading { display:none; }


/* Radial Gradient */
.Radial {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNDIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 37%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.42) 75%,rgba(0,0,0,0) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 37%, rgba(0,0,0,0.65) 61%, rgba(0,0,0,0.42) 75%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(37%,rgba(0,0,0,0.65)), color-stop(61%,rgba(0,0,0,0.65)), color-stop(75%,rgba(0,0,0,0.42)), color-stop(100%,rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}


/***************************
/* Template example styles *
/***************************/
span.templateexmaple {
  font-family: fixed-width;
}

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

span.templateexample span.paramname {
}

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

/********************
/* Notice templates *
/********************/
.topNotice {
  border: 2px solid #ff9900;
  background: #ffffff;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
  overflow: auto;
}

.topNotice .heading {
  color: #222222;
  font-size: 132%;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
}

.topNotice.delete {
  border: 2px solid #ff0000;
}

.topNotice.move, .topnotice.merge, .topnotice.split {
  border: 2px solid #bb8800;
}

.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough {
  border: 2px solid #008000;
}

/******************
/* Image licenses *
/******************/
div.imageLicense {
  border: 2px solid #ff6600;
  background: #ffffff;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
}

div.imageLicense.nolicense {
  border: 2px solid #ff0000;
}

/******************
/* General styles *
/******************/
.contentbox {
  border: 1px solid #aaaaaa;
  background: #eeeeee;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
  overflow: auto;
}

span.bullet {
  background: transparent no-repeat center 60%;
  width: 9px;
  font-size: 11px;
  vertical-align: baseline;
}

.dablink {
  padding: 2px 36px 10px 36px;
  font-style: italic;
}

span.ghost {
  color: #777777; /* For any text that appear fainter for some reason */
}

.columns {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.columns .leftcol {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .centercol {
  float: left;
  margin: 0;
  padding: 0;
}

.columns .rightcol {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}


/* Infobox styles */
.infoboxtable {
    background: rgba(8, 27, 43, 0.9);
    border: none; 
    color: #ffffff;
    float: right; 
    font-size: 89%;
    margin-bottom: 0.5em; 
    margin-left: 1em; 
    padding: 0.2em; 
    width: 300px;
}

.infoboxtable td {
    vertical-align: top;
}

.infoboxtable td > div {
    border: none;
    border-radius: 2px;
    background: #ffc70e;
    color: #511616;
    font-weight: bold;
    padding: 0.5px 7px;
    text-align: right;
    transform: skew(-0.25rad);
}

.infoboxdetails {
    background: rgba(8, 27, 43, 0.9);
    padding: 0em;
}

.infoboxname {
    border: none;
    border-radius: 2px;
    background: #00c3ff;
    transform: skew(-0.25rad);
    color: #ffffff; 
    font-size: 110%; 
    font-weight: bold;
    height: 30px;
    padding: 0.5em; 
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}


/* Brackets */
.bracket {
 font-size: 11px;
 background: none;
}

.bracket-column {
 float: left;
 position: relative;
}

.bracket-header {
 border-radius: 2px;
 border: 1px solid #e4d7b4;
 padding: 2px 0 2px 0;
 position: relative;
 left: 0;
 right: 0;
 line-height:18px;
 margin-bottom: 20px;
 text-align: center;
 background: #e7dbbb;
}

.bracket-cell-r1 {
 height: 36px;
}
.bracket-cell-r2 {
 height: 72px;
}
.bracket-cell-r3 {
 height: 144px;
}
.bracket-cell-r4 {
 height: 288px;
}
.bracket-cell-r5 {
 height: 576px;
}
.bracket-cell-r6 {
 height: 1152px;
}
.bracket-cell-r7 {
 height: 2304px;
}
.bracket-cell-r1, .bracket-cell-r2, .bracket-cell-r3, .bracket-cell-r4, .bracket-cell-r5, .bracket-cell-r6, .bracket-cell-r7 {
 position: relative;
}
.bracket-team-top, .bracket-team-bottom, .bracket-player-top, .bracket-player-bottom {
    border-radius:0 0 2px 2px;
    border:solid #e4d7b4 1px;
    position:absolute;
    padding: 1px;
    min-height:20px;
    line-height:18px;
    background: #ece3ca;
    left:0;
    right:0;
}
.bracket-team-top, .bracket-player-top {
    bottom:0;
    border-radius:2px 2px 0 0;
}
.bracket-score {
    text-align:center;
    background: #e7dbbb;
    border-left:1px solid #CFC096;
    position:absolute;
    line-height:22px;
    right:0;
    top:0;
    bottom:0;
}
.bracket-class-icon {
    float: right;
    width: 22px;
}
.bracket-team-bottom .bracket-score, .bracket-player-bottom .bracket-score {
    border-bottom-right-radius: 2px;
}
.bracket-team-top .bracket-score, .bracket-player-bottom .bracket-score {
    border-top-right-radius: 2px;
}
.bracket-hover {
    -moz-box-shadow: 0 0 2px #000;
    -webkit-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
    border-color: #000;
}
.bracket-game-details {
    z-index:100;
    width:200px;
    padding: 2px 0px;
    position:absolute;
    display: none;
    text-align:center;
    border:1px solid #aaa;
    background: rgba(242, 242, 242, 0.9);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 4px 4px 6px #BBBBBB;
    font-weight: normal;
}
.bracket-date-line {
  border-bottom: 1px dotted #aaa; 
  padding:2px; 
  font-size:85%; 
  line-height:12.5px; 
  text-align:center;
}
.bracket-game-details .to-anchor {
    display: none;
}
.bracket-icons {
    border-top: 1px solid #aaa;
}
.bracket-game .icon { 
    height: 12px;
    width: 12px;
    background: url(https://commons.gamepedia.com/media/2/28/Information.svg) no-repeat transparent; 
    z-index: 50; 
    left: -6px;
    position: absolute;
}
.bracket-game { 
    position: relative; 
}


/*Ability_details template styles*/
.ability_details {
    background:rgba(8,27,43,0.9);
    border-radius:5px;
    padding-left:0.5em;
    padding-right:0.5em;
    padding-bottom:0.5em;
    padding-top:0px;
    margin-top:5px;
    margin-bottom:5px;
}
.ability_details .header1 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    padding: 0px;
    margin: 0px;
}
.ability_details .header2 {
    font-style: italic;
    font-weight: bold;
    font-size: 18px;
    padding: 0px;
    margin: 0px;
}

/*****************************
/* 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: 1px solid #00c3ff;
	background-color: #333333;
	text-align: center;
}

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

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

.tournament-bracket .match-score,
.tournament-bracket .match-score-top,
.tournament-bracket .match-score-bottom {
	background-color: #333333;
	border: 1px solid #00c3ff;
	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;
}

/******************
 * Collapsible JS *
 ******************/

.collapseButton {          /* 'show'/'hide' buttons created dynamically */
    float: right;          /* by the CollapsibleTables javascript in    */
    font-weight: normal;   /* [[MediaWiki:Common.js]] are styled here   */
    text-align: right;     /* so they can be customised.                */
    width: auto;
}