MediaWiki:Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* CSS placed here will be applied to all skins */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  font-display: swap
  src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v11/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/** Infobox **/
.infobox {
    background: transparent;
    font-size: .85em;
    width: 300px;
    margin: .5em 0 1em 1em;
    border-radius: 0.9em;
    border-collapse: collapse;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    float: right;
}

.infobox .infobox-header {
    background: #246c97;
    color: #ffffff;
    font-size: 1.5em;
    line-height: 1.4em;
    border-radius: 0.6em 0.6em 0em 0em;
    padding: .5em 0;
    text-align: center;

}

.infobox .infobox-subheader {
    background: #6ba5c8;
    color: #ffffff;
    font-size: 1.2em;
    line-height: 2em;
    text-align: center;
}

.infobox .infobox-subheader a {
    color: #ffffff;
}

.infobox .infobox-image {
    text-align: center;
}

.infobox .infobox-image.bordered-image {
    border: 1px solid #e4eaee;
    border-bottom: none;
    padding: .4em;
}

.infobox .infobox-image a.image + a.image {
    margin-left: .1em;
}

.infobox .infobox-image img {
    max-width: 300px;
    height: auto;
}

.infobox th:not(.infobox-header):not(.infobox-subheader) {
    text-align: left;
    vertical-align: top;
    padding: 0.3em 0.5em;
}


/* Tabber start */
.tabber .tabbertab {
	border: none;
	padding: 0;
}

ul.tabbernav {
    margin: 0px;
    padding: 3px 0;
    border: 0;
    /*border-bottom: 1px solid #CCC;*/
    font: bold 14px Ariel, sans-serif !important;
}

ul.tabbernav li a {
    border-radius: 4px !important;
    padding: 3px .5em;
    margin-left: 3px;
    border: 1px solid #CCC;
    background: transparent;
    text-decoration: none;
    line-height: 2;
}

ul.tabbernav li.tabberactive a {
    background-color: transparent;
    border: 1px solid #7ec0ee !important;
}

ul.tabbernav li.tabberactive a:hover {
    color: #000;
    background: transparent;
    border: 1px solid #7ec0ee !important;
}
/* Tabber end */

/* used for vertical alignment of tabber contents */
#mw-content-text > .wikitable:first-child tr:nth-child(2) > td:nth-child(2) > div > .tabber {
    min-height: 436px;
    max-height: 1000px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#mw-content-text > .wikitable:first-child tr:nth-child(2) > td:nth-child(2) > div > .tabber > .tabbernav {
    margin-bottom: auto;
}

#mw-content-text > .wikitable:first-child tr:nth-child(2) > td:nth-child(2) > div > .tabber > .tabbertab {
    margin-bottom: auto;
}


/* Tooltip */
.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
}

.tooltiptext {
  visibility: hidden;
  min-width: 250px;
  padding: 12px 14px;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: calc(20px + 100%);
  z-index: 99999;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  font-weight: normal;
  white-space: normal;
}

.tooltiptext:after,
.tooltiptext:before {
  content: '';
  position: absolute;
  left: 50%;
  border-style: solid;
}

.tooltiptext:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: -10px;
  margin-left: -10px;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}

.tooltiptext:before {
  top: 100%;
  bottom: auto;
  border-width: 18px;
  margin-left: -18px;
  border-color: rgba(0,0,0,0.15) transparent transparent transparent;
  pointer-events: none;
}

.tooltip .tooltip .tooltiptext {
  bottom: auto;
  top: calc(20px + 100%);
}

.tooltip .tooltip .tooltiptext:after {
  top: auto;
  bottom: 100%;
  border-width: 15px;
  margin-left: -15px;
  border-color: transparent transparent white transparent;
  width: 0;
  height: 0;
  box-shadow: none;
  background: none;
  transform: none;
}

.tooltip .tooltip .tooltiptext:before {
  top: auto;
  bottom: 100%;
  border-width: 16px;
  margin-left: -16px;
  border-color: transparent transparent #888 transparent;
}

.tooltiptext hr {
  margin: 10px 0 12px;
  position: relative;
  background: none;
}

.tooltiptext hr:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px !important;
  position: absolute;
  left: -14px;
  background: #a2a9b1;
  padding: 0 14px;
}

.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  visibility: visible;
}

.tooltiptext {
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
  transform: translate(-50%, 8px);
}

.tooltip .tooltip .tooltiptext {
  transform: translate(-50%, -8px);
}

.tooltip:hover > .tooltiptext,
.tooltip.hover > .tooltiptext {
  opacity: 1;
  transition-delay: 0s;
  transform: translate(-50%, 0);
}

.tooltiptext a { color: #0645ad; border-bottom: 0; }
.tooltiptext a:visited { color: #0b0080; }
.tooltiptext a:active { color: #faa700; }
.tooltiptext a:hover, a:focus { text-decoration: underline; }
.tooltiptext { color: #252525; }
.tooltiptext a.new { color: #ba0000; }

/* Remove .mw-body-content stacking context so the tooltip can
   overlap with elements outside content area and be shown properly */
.mw-body-content { z-index: auto; }

.gridrec td {
  background: white; padding: 4px;
}
.gridrectoptext td {
  vertical-align: text-top;
}

/** Main Page **/
.MainPageHeading {
     font-family: 'Orbitron', sans-serif;
     font-weight: 700;
     font-size:17pt;
     text-align:center;
}

.MainPageSpace {
     border:1px solid black;
     border-radius:1em;
     box-shadow:1px 1px 4px black;
     margin-bottom:15px;
     padding:10px;
}

/* For portals, added 2011-12-07 -bv
   On wide screens, show these as two columns
   On narrow and mobile screens, let them collapse into a single column */
.portal-column-left {
	float: left;
	width: 50%;
}
.portal-column-right {
	float: right;
	width: 49%;
}
.portal-column-left-wide {
	float: left;
	width: 60%;
}
.portal-column-right-narrow {
	float: right;
	width: 39%;
}
.portal-column-left-extra-wide {
	float: left;
	width: 70%;
}
.portal-column-right-extra-narrow {
	float: right;
	width: 29%;
}
@media only screen and (max-width: 800px) {
	/* Decouple the columns on narrow screens */
	.portal-column-left,
	.portal-column-right,
	.portal-column-left-wide,
	.portal-column-right-narrow,
	.portal-column-left-extra-wide,
	.portal-column-right-extra-narrow {
		float: inherit;
		width: inherit;
	}
}

/** Infobox Card**/
.infoboxcard {
    background: transparent;
    font-size: .85em;
    width: 300px;
    margin: .5em 0 1em 1em;
    border-radius: 0.9em;
    border-collapse: collapse;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    float: right;
}

.infoboxcard .infoboxcard-header {
    background: #246c97;
    color: #ffffff;
    font-size: 1.5em;
    line-height: 1.4em;
    border-radius: 0.6em 0.6em 0em 0em;
    padding: .5em 0;
    text-align: center;
}

.infoboxcard .infoboxcard-subheader {
    background: #6ba5c8;
    color: #ffffff;
    font-size: 1.2em;
    line-height: 2em;
    text-align: center;
}

.infoboxcard .infoboxcard-subheader a {
    color: #ffffff;
}

.infoboxcard .infoboxcard-image {
    text-align: center;
}

.infoboxcard .infoboxcard-image.bordered-image {
    border: 1px solid #e4eaee;
    border-bottom: none;
    padding: .4em;
}

.infoboxcard .infoboxcard-image a.image + a.image {
    margin-left: .1em;
}

.infoboxcard .infoboxcard-image img {
    max-width: 300px;
    height: auto;
}

.infoboxcard th:not(.infoboxcard-header):not(.infoboxcard-subheader) {
    text-align: left;
    vertical-align: top;
    padding: 0.3em 0.5em;
}

<!-- Custom page backgrounds
.mw-body {
    background-position: 0 0, 0px -4px, 0 0;
    background-repeat: no-repeat;
    height:100%
    background-size: 100%;
}

@media screen and (max-width: 800px) {
    .mw-body {
        background-size: auto 66%;
        background-position: 0 0, top right, 0 0;
    }
}

.page-Sandbox_MainPage .mw-body {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.4), white),
        url(https://bakugan.wiki/wiki/images/b/bf/Bakugan_Wiki_Background.jpg),
        -webkit-linear-gradient(left, #88aeb7 0%,#b8d0d3 5%,#cfe8eb 20%,#d2d4cf 80%,#c7cebd 95%,#afc1c5 100%);
} -->

#mf-banner { display: none; }

body.page-Main_Page li#ca-delete { display:none!important; }

/* Styling for Template:Infobox character and Template:Infobox Bakugan */

.infobox.att-pyrus { background:transparent; }
.infobox-header.att-pyrus { background:#ee5555; color:#ffffff; }
.infobox-subheader.att-pyrus { background:#ee9652; color:#ffffff; }

.infobox.att-aquos { background:transparent; }
.infobox-header.att-aquos { background:#3661e2; color:#ffffff; }
.infobox-subheader.att-aquos { background:#109cf4; color:#ffffff; }

.infobox.att-subterra { background:transparent; }
.infobox-header.att-subterra { background:#804000; color:#ffffff; }
.infobox-subheader.att-subterra { background:#ff8000; color:#ffffff; }

.infobox.att-aurelus { background:transparent; }
.infobox-header.att-aurelus { background:#ec9513; color:#ffffff; }
.infobox-subheader.att-aurelus { background:#ffcc00; color:#000000; }

.infobox.att-haos { background:transparent; }
.infobox-header.att-haos { background:#75f0f0; color:#000000; }
.infobox-subheader.att-haos { background:#ffff99; color:#000000; }

.infobox.att-darkus { background:transparent; }
.infobox-header.att-darkus { background:#000000; color:#ffffff; }
.infobox-subheader.att-darkus { background:#5900b3; color:#ffffff; }

.infobox.att-ventus { background:transparent; }
.infobox-header.att-ventus { background:#00cc00; color:#ffffff; }
.infobox-subheader.att-ventus { background:#00e6b8; color:#ffffff; }

.infobox.att-pyrusdarkus { background:transparent; }
.infobox-header.att-pyrusdarkus { background:#ee5555; color:#ffffff; }
.infobox-subheader.att-pyrusdarkus { background:#5900b3; color:#ffffff; }

.infobox.att-pyrusaurelus { background:transparent; }
.infobox-header.att-pyrusaurelus { background:#ee5555; color:#ffffff; }
.infobox-subheader.att-pyrusaurelus { background:#ffcc00; color:#000000; }

.infobox.att-darkusaquos { background:transparent; }
.infobox-header.att-darkusaquos { background:#000000; color:#ffffff; }
.infobox-subheader.att-darkusaquos { background:#109cf4; color:#ffffff; }

.infobox.att-aquosaurelus { background:transparent; }
.infobox-header.att-aquosaurelus { background:#3661e2; color:#ffffff; }
.infobox-subheader.att-aquosaurelus { background:#ffcc00; color:#000000; }

.infobox.att-aquosventus { background:transparent; }
.infobox-header.att-aquosventus { background:#3661e2; color:#ffffff; }
.infobox-subheader.att-aquosventus { background:#00e6b8; color:#ffffff; }

.infobox.att-haospyrus { background:transparent; }
.infobox-header.att-haospyrus { background:#75f0f0; color:#000000; }
.infobox-subheader.att-haospyrus { background:#ee9652; color:#ffffff; }

.infobox.att-haosaurelus { background:transparent; }
.infobox-header.att-haosaurelus { background:#75f0f0; color:#000000; }
.infobox-subheader.att-haosaurelus { background:#ffcc00; color:#000000; }

.infobox.att-darkusaurelus { background:transparent; }
.infobox-header.att-darkusaurelus { background:#000000; color:#ffffff; }
.infobox-subheader.att-darkusaurelus { background:#ffcc00; color:#000000; }

.infobox.att-ventushaos { background:transparent; }
.infobox-header.att-ventushaos { background:#00cc00; color:#ffffff; }
.infobox-subheader.att-ventushaos { background:#ffff99; color:#000000; }

.infobox.att-ventusaurelus { background:transparent; }
.infobox-header.att-ventusaurelus { background:#00cc00; color:#ffffff; }
.infobox-subheader.att-ventusaurelus { background:#ffcc00; color:#000000; }

.infobox.att-allfaction { background:transparent; }
.infobox-header.att-allfaction { background:#808080; color:#ffffff; }
.infobox-subheader.att-allfaction { background:#858e8f; color:#000000; }

.infobox.att-test { background:transparent; }
.infobox-header.att-test { background:#00e6b8; color:#ffffff; }
.infobox-subheader.att-test { background:#00e6b8; color:#ffffff; }