Difference between revisions of "MediaWiki:Common.css"

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

/* adjusting logo */
#p-logo{top:-175px;height:180px;}
div#mw-panel{top:175px;}
#p-logo a {height:185px;}


#main-wrapper {
  display: table;
  width: 100%;
  margin:5px 0 15px 0;
  background:none;
}
#main-column {
  display: table-cell;
  width:50%;
  padding: 5px;
  border:1px solid #ddcef2; 
  vertical-align:top; 
  background:#f5faff; 
}
#main-column h2 {
  margin:0;
  background:#cedff2;
  font-size:120%;
  font-weight:bold;
  border:1px solid #b0c9d2; 
  text-align:left;
  color:#000;
  padding:0.2em 0.4em;
}



.note {
  padding: 0.5em;
  margin: 0.5em 0;
  overflow: hidden;
  background-color: #F9F9F9;
  background-position: 4px 2px;
  background-repeat: no-repeat;
  border: 1px solid #DDD;
  border-radius: 3px;
}
.note-info {
  background-color: #F0F0E7;
  background-image: url(//www.starcraftai.com/images/c/cc/Note.png);
  border-color: #cc9933;
  /* @noflip */ padding-left: 30px;
}



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


/* Main page banner */
.lp-banner-container {
  padding: 1px;
  width: 100%;
  min-height: 100px;
  background: #deeefc url(http://wiki.teamliquid.net/starcraft/skins/dtrush/MPDT.png) no-repeat;
  border: 1px solid #537493;
  background-clip: content-box;
}
.lp-banner {
  padding-left: 150px;
  text-align: center;
}
.lp-banner > div {
  display: inline-block;
  text-align: center;
}
div.mpwelcome {
  font-weight: 900;
  line-height: 40px;
  letter-spacing: -.08em;
  font-family: "Helvetica Neue LT Com 95 Black","Helvetica Neue CE 95 Black","Helvetica Neue 95 Black","HelveticaNeue LT Com 95 Black","HelveticaNeue CE 95 Black","HelveticaNeue 95 Black","HelveticaNeue-Black","Helvetica Neue Black","Arial Black","Helvetica Neue",sans-serif;
  font-size: 40px;
  position: relative;
  color: #103352;
  text-shadow: #103352 0 0 1px;
}
div.mpsubtitle {
  margin-top: .5em;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: -.03em;
  text-align: left;
  font-family: "Helvetica Neue LT Com 65 Medium","Helvetica Neue CE 65 Medium","Helvetica Neue 65 Medium","HelveticaNeue LT Com 65 Medium","HelveticaNeue CE 65 Medium","HelveticaNeue 65 Medium",HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 23px;
  color: #0c2e4c;
  margin-left: .25em;
  text-shadow: #0c2e4c 0 0 1px;
}
div.mplinks {
  margin-top: 1em;
  font-size:85%;
}



/* Brackets */
.bracket {
 font-size: 11px;
 background: transparent;
 display: table;
 -webkit-transform-origin: left top 0px;
 transform-origin: left top 0px;
}

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

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

.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, .bracket-team-middle, .bracket-player-middle {
    border-radius:0 0 2px 2px;
    border:solid #aaa 1px;
    position:absolute;
    padding: 1px;
    min-height:20px;
    line-height:18px;
    background: #f2f2f2;
    left:0;
    right:0;
}
.bracket-team-top, .bracket-player-top {
    bottom:0;
    border-radius:2px 2px 0 0;
}
.bracket-team-middle, .bracket-player-middle {
    bottom:0;
    border-radius:2px;
}
.bracket-score {
    text-align:center;
    background:#ebebeb;
    border-left:1px solid #aaa;
    position:absolute;
    line-height:22px;
    right:0;
    top:0;
    bottom:0;
}
.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: 1px solid #000 !important;
}

/* Delayed hover */
.bracket-hover, 
.grouptableslot, 
.matchlistslot, 
.bracket-team-top, 
.bracket-team-bottom, 
.bracket-player-top, 
.bracket-player-bottom {
    transition: .5s;
}

.bracket-game-details {
    z-index:100;
    min-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;
}
.bracket-team-game-details,
.bracket-game-details.bracket-team-game-details {
    width:400px;
}
.bracket-game-details .to-anchor {
    display: none;
}
.bracket-icons {
    border-top: 1px solid #aaa;
}
.bracket-game .icon { 
    cursor: pointer;
    height: 12px;
    width: 12px;
    background: url(http://www.starcraftai.com/images/b/b2/Info_Icon.png) no-repeat transparent; 
    z-index: 50; 
    right: 16px;
    position: absolute;
}
.bracket-game { 
    position: relative; 
}
.bracket-popup-title {
  display:table-row; 
  font-weight:bold; 
  line-height:16px; 
  padding:2px 5px;
}
.bracket-popup-title-left {
  display:table-cell;
  text-align:right;
  width:200px;
  padding:2px;
  border-bottom:1px solid #aaa;
}
.bracket-popup-title-right {
  display:table-cell;
  text-align:left;
  width:200px;
  padding:2px;
  border-bottom:1px solid #aaa;
}

.bracket-game { 
    position: relative; 
}



/* New Infoboxes by FO-nTTaX */
.fo-nttax-infobox-wrapper {
	clear:right;
	float:right;
	margin:0 0 10px 10px;
	font-size:90%;
}
.fo-nttax-infobox {
	background-color:#ffffff;
	width:294px; /* 300-2*2-2*1 */
	border:1px solid #aaaaaa;
	padding:2px;
}
.fo-nttax-infobox > div {
	display:table;
	width:100%;
}
.fo-nttax-infobox > div:nth-child(2n+1) {
	background-color:#eeeeee;
}
.fo-nttax-infobox > div:after {
	clear:both;
}
.fo-nttax-infobox > div > div {
	width:calc(100% - 4px);
	float:left;
	height:inherit;
	padding:2px;
}
.fo-nttax-infobox > div > div.infobox-cell-2 {
	width:calc(50% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-3 {
	width:calc(33.3333% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-4 {
	width:calc(25% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-5 {
	width:calc(20% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-6 {
	width:calc(16.6666% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-7 {
	width:calc(14.2857% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-8 {
	width:calc(12.5% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-9 {
	width:calc(11.1111% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-10 {
	width:calc(10% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-11 {
	width:calc(9.0909% - 4px);
}
.fo-nttax-infobox > div > div.infobox-cell-12 {
	width:calc(8.3333% - 4px);
}
.fo-nttax-infobox-wrapper .infobox-header {
	background-color:#b0c4de;
	font-weight:700;
	text-align:center;
	font-size:20px;
}
.fo-nttax-infobox-wrapper .infobox-header-2 {
	font-size:17px;
}
.fo-nttax-infobox-wrapper .infobox-header-3 {
	font-size:15px;
}
.fo-nttax-infobox > div > div.infobox-description {
	font-weight:bold;
}
.fo-nttax-infobox > div > div.infobox-image {
	padding:0;
}
.fo-nttax-infobox > div > div.infobox-center{
	text-align:center;
}
.fo-nttax-infobox > div > div.infobox-center-bgcolor-white{
	text-align:center;
	background-color:#ffffff;
}
.fo-nttax-infobox-wrapper .infobox-header .infobox-buttons {
	float:right;
	font-size:12px;
	font-weight:500;
}
.fo-nttax-infobox-wrapper .infobox-header .infobox-buttons a {
	background:none repeat scroll 0% 0% transparent !important;
	padding:0px !important;
}
.fo-nttax-infobox-wrapper .infobox-icons a {
	background:none repeat scroll 0% 0% transparent !important;
	padding:0px !important;
}
.fo-nttax-infobox-wrapper .infobox-text-left {
	text-align:left;
}
.fo-nttax-infobox-wrapper .infobox-text-right {
	text-align:right;
}
@media (max-width:480px) {
	.fo-nttax-infobox-wrapper {
		width:100%;
		margin-left:0;
	}
	.fo-nttax-infobox {
		width:calc(100% - 6px);
	}
	.fo-nttax-infobox-wrapper .infobox-image > div > div {
		text-align:center;
	}
}