MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/ /* ==========================  Imports ==========================*/ @import 'https://fonts.googleapis.com/css?family=Anonymous+Pro|Arvo|Droid+Sans|Gentium+Basic|Josefin+Sans|Lato|Merriweather|Old+Standard+TT|Oswald|PT+Sans|Prociono|Quicksand|Classic+Comic|Raleway|Roboto+Slab|Rubik|Rubik+Mono+One|Space+Mono|Doppio+One|Titillium+Web|Varela+Round|Vollkorn|Bangers';

background-image: url(https://static.jojowiki.com/images/4/41/HeaderBG.png); background-repeat: no-repeat; background-position: 175px 0; background-size: 30%; }
 * 1) mw-head {

/* MENU     */

margin: 0; padding: 0; }
 * 1) menu ul {

display: none; }
 * 1) menu .main-menu {

display: block; }
 * tm:checked + .main-menu {

display: none; }
 * 1) menu input[type="checkbox"],
 * 2) menu ul span.drop-icon {

border-style: solid; border-color: rgba(0, 0, 0, .05); }
 * 1) menu li,
 * 2) toggle-menu,
 * 3) menu .sub-menu {

border-width: 0 0 1px; }
 * 1) menu li,
 * 2) toggle-menu {

border: 2px solid #5e637f; background-color: #444; margin: 0 1em; box-shadow: 2px 2px 3px #434343; }
 * 1) menu .sub-menu {

border-width: 0; }
 * 1) menu .sub-menu li:last-child {

position: relative; display: block; color: white; text-shadow: 1px 1px 0 rgba(0, 0, 0, .125); }
 * 1) menu li,
 * 2) toggle-menu,
 * 3) menu a {

background-color: #8e94ba; display: inline-block; border: 2px solid #7f83a2; box-shadow: 1px 1px 2px #4c4f67; }
 * 1) menu,
 * 2) toggle-menu {

padding: 0.5em 1.5em; }
 * 1) toggle-menu,
 * 2) menu a {

background-color: #9da1c0; transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out; font-family: Lato; }
 * 1) menu a {

background-color: #474e7a; color: #09c; }
 * 1) menu a:hover {

display: none; }
 * 1) menu .sub-menu {

display: block; }
 * 1) menu input[type="checkbox"]:checked + .sub-menu {

color: #db8ae2; }
 * 1) menu .sub-menu a:hover {

position: absolute; right: 1.5em; top: 1.25em; }
 * 1) toggle-menu .drop-icon,
 * 2) menu li label.drop-icon {

border-radius: 50%; width: 1em; height: 1em; text-align: center; background-color: rgba(0, 0, 0, .125); text-shadow: 0 0 0 transparent; color: rgba(255, 255, 255, .75); }
 * 1) menu label.drop-icon, #toggle-menu span.drop-icon {

line-height: 1; }
 * 1) menu .drop-icon {

@media only screen and (max-width: 64em) and (min-width: 52.01em) { #menu li { width: auto; }

#menu .sub-menu li { width: auto; } }

@media only screen and (min-width: 52em) { #menu .main-menu { display: block; }

#toggle-menu, #menu label.drop-icon { display: none; }

#menu ul span.drop-icon { display: inline-block; }

#menu li { float: left; border-width: 0 1px 0 0; }

#menu .sub-menu li { float: none; }

#menu .sub-menu { margin: 0; position: absolute; top: 100%; left: 0; width: 10em; white-space: nowrap; background-color: #595994; z-index: 3000; }

#menu .sub-menu, #menu input[type="checkbox"]:checked + .sub-menu { display: none; }

#menu .sub-menu li { border-width: 0 0 1px; }

#menu .sub-menu .sub-menu { top: 0; left: 100%; } #menu .smallmenu { font-size: 12px; } #menu .sub-menu .smallmenu { white-space: nowrap; width: auto; }

#menu li:hover > input[type="checkbox"] + .sub-menu { display: block; } }

/* increase Vector sidebar width to accommodate ads */ margin-top: 2em; border-top: 2px solid #d5d6d8; }
 * 1) mw-panel { width: 12em; }
 * 2) p-Ads .body {margin: 0em !important; }
 * 3) footer, #mw-head-base, #content { margin-left: 12em; }
 * 4) left-navigation { margin-left: 12em; }
 * 5) mw-data-after-content {

height: 8em; }
 * 1) mw-page-base {

/* ==========================  Main Width ==========================*/	position: relative; margin-left: auto !important; margin-right: auto !important; max-width: 1280px; background-color: white; background: url(https://static.jojowiki.com/images/2/2b/Jojobg.png); }   /* set max width and fix the background */ html, body { background: url(https://static.jojowiki.com/images/8/8a/Wiki-background.jpg) center; background-color: rgb(0, 0, 0); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }   /* set blue right border */ .mw-body { border-right: 1px solid #A7D7F9; border-color: #ffcc68; background: url(https://static.jojowiki.com/images/2/2b/Jojobg.png); }   /** fix the position of: personal user menu search bar the pop-up indicator of language selector **/   #p-personal { right: 3pt; } #p-search { margin-right: 3pt; } .imeselector { position: fixed; }
 * 1) jojowiki-body {

padding-left: 0; background: #8782a0; background-image: url(https://static.jojowiki.com/images/7/7c/SymbolBG.png); background-blend-mode: screen; border-bottom-left-radius: 20px; }   background: white; }
 * 1) mw-panel {
 * 1) footer {

div.ajax-poll { width:auto !important; }

/* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; }

pre, .mw-code { overflow: scroll; }

/* ==========================  Table of Contents ==========================*/	.toc { border: 1px solid #ffcc68; float: center; clear: center; background: transparent; width: 360px; min-width: 360px; border-radius: 10px; font-family: 'Raleway',sans-serif; text-align: left; padding: 5px; }	.toctitle { text-transform: uppercase; font-family: 'Rubik',sans-serif; }	.toctogglelabel { color:#d10e7b }

.tocnumber, .toctext { font-size: 15px; }

/* ==========================  Headings ==========================*/ .mw-body .firstHeading { font-family: 'Rubik',Tahoma,Trebuchet MS,sans-serif; font-weight: 400; font-size: 36px; color: #3a3a3a; } .mw-headline { font-family: 'Rubik',sans-serif; text-transform: uppercase; padding-top: 10px; font-weight: 500; letter-spacing: 2px; font-size: 1em; color: #3a3a3a; }

.mw-body-content { font-size: 15px; font-family: "Trebuchet MS"; }

.mw-body-content h2 { font-size: 28px; }

.mw-body-content h3 { font-size: 22px; }

.mw-body-content h4 { font-size: 20px; }

/*******************   Colors color: #ff0000; font-style: italic; }
 * 1) mw-content-text a.new {
 * 1) mw-content-text a.new {

color: #d10e7b; }
 * 1) mw-content-text a {

a, a:visited { color: #d10e7b; text-decoration: none; } /*******************   Carousel .carousel .slide{ height: 130px; border: 2px solid; border-color: transparent; overflow: hidden; width: 226px; }

/* Parts */ .games .slide{ border-color: #D6AD6F; background-color: #000; } .games .slide img { transition: 0.4s opacity; -webkit-transform: translateZ(0); /*fix transition bug in Chrome*/ } .games .game{ width: 100%; position: absolute; text-align: center; top: 35%; opacity: 0; } .games .game a, .games .game a:hover{ display: block; color: #fff; font-size: 150%; } .games .slide .game { transition: 0.4s opacity; } .games .slide:hover .game { opacity: 1; } .games .slide:hover img { opacity: 0.4; }

/******************* * Infobox Template Style *******************/ .infobox { border: 1px solid #aaaaaa; background-color: #FFFFFF; color: black; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; float: right; clear: right; } .infobox td, .infobox th { vertical-align: top; } .infobox caption { font-size: larger; margin-left: inherit; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid #aaaaaa; } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

/*===========================*/ /*       INFOBOX TABS       */ /*===========================*/ /*  Styles for both InfoboxTabs and InfoboxTabs2   */ /*  The main container and subcontainer   */ .infoboxtabs, .infoboxtabs2, .infoboxtabs .tabberlive, .infoboxtabs2 .tabberlive { margin: 0; padding: 0; } /*  The link of the active tab   */ .infoboxtabs ul.tabbernav li.tabberactive a, .infoboxtabs ul.tabbernav li.tabberactive a:hover, .infoboxtabs2 ul.tabbernav li.tabberactive a, .infoboxtabs2 ul.tabbernav li.tabberactive a:hover { } /*  Styles for InfoboxTabs   */ /*  The block that contains the tabs   */ .infoboxtabs ul.tabbernav { border-bottom: 1px outset #c0c0c0; border-bottom: 1px outset #c0c0c0; }

ul.pi-image-collection-tabs { margin: 0 !important; }

/*  General styles for the links   */ .infoboxtabs ul.tabbernav li a, .infoboxtabs ul.tabbernav li a:hover { color: #000 !important; } /*  The link of the active tab   */ .infoboxtabs ul.tabbernav li.tabberactive a, .infoboxtabs ul.tabbernav li.tabberactive a:hover { border-style: inset outset solid inset; border-width: 1px; } /*  The block that contains the image   */ .infoboxtabs .tabberlive .tabbertab { border-bottom: 1px outset #c0c0c0; border-left: 1px inset #c0c0c0; border-right: 1px outset #c0c0c0; }

/*  Styles for InfoboxTabs2   */ /*  The block that contains the tabs   */ .infoboxtabs2 ul.tabbernav { border: 0; line-height: 12px; overflow: hidden; padding: 0; }

/*  General styles for the links   */ .infoboxtabs2 ul.tabbernav li a, .infoboxtabs2 ul.tabbernav li a:hover { border-right: 0 !important; font-family: "Raleway" sans-serif; font-size: 90%; color:#000; margin: 0; }

.infoboxtabs2 ul.tabbernav li a:hover, .infoboxtabs2 ul.tabbernav li.tabberactive a{	background-color: #787878 !important; }

/*  The first tab   */ .infoboxtabs2 ul.tabbernav li:first-child a, .infoboxtabs2 ul.tabbernav li:first-child a:hover { border-left: 0 !important; } /*  The block that contains the image   */ .infoboxtabs2 .tabberlive .tabbertab { border: 0; padding: 0; background-color: transparent !important; }

/*  Styles for InfoboxTabs3   */ /*  The block that contains the tabs   */ .infoboxtabs3 ul.tabbernav { border: 0; line-height: 12px; overflow: hidden; padding: 0; }

/*  General styles for the links   */ .infoboxtabs3 ul.tabbernav li a, .infoboxtabs3 ul.tabbernav li a:hover { background-color: transparent !important; border-right: 0 !important; font-family: "Raleway" sans-serif; font-size: 90%; color:#000; margin: 0; } /*  The first tab   */ .infoboxtabs3 ul.tabbernav li:first-child a, .infoboxtabs3 ul.tabbernav li:first-child a:hover { border-left: 0 !important; } /*  The block that contains the image   */ .infoboxtabs3 .tabberlive .tabbertab { border: 0; padding: 0; background-color: transparent !important; }

.infoboxtabs3 .tabberlive { width: 130px; margin-top: 0 !important; }

/* Forum formatting (by -Algorithm & -Splaka) */ .forumheader { border: 1px solid #aaa; margin-top: 1em; padding: 12px; } .forumlist td.forum_edited a { color: black; text-decoration: none; } .forumlist td.forum_title a { padding-left: 20px; } .forumlist td.forum_title a.forum_new { font-weight: bold; background: url(/images/4/4e/Forum_new.gif) center left no-repeat; padding-left: 20px; } .forumlist td.forum_title a.forum_new:visited { font-weight: normal; background: none; padding-left: 20px; } .forumlist th.forum_title { padding-left: 20px; }

/* Recent changes byte indicators */ .mw-plusminus-pos { color: #006500; } .mw-plusminus-neg { color: #8B0000; }

/* Image frame fix */ div.tright, div.tleft { border: 1px solid silver; }

div.thumbinner { background: inherit; border: none; color: inherit; }  color:inherit; }
 * 1) article div.thumb {

/* === Babel === */

div.babelbox { float: right; margin-left: 1em; margin-bottom: 0.5em; width: 246px; border: 1px solid #99B3FF; padding: 2px 0 2px 0; } .lang-blockN, .lang-block0, .lang-block1, .lang-block2, .lang-block3 { margin: 2px 4px 2px 4px; /* t, l, b, r */ width:238px; border-collapse: collapse; } td.lang-codeN, td.lang-code0, td.lang-code1, td.lang-code2, td.lang-code3 { text-align:center; font-size:14pt; width:45px; height:45px; } td.lang-descriptionN, td.lang-description0, td.lang-description1, td.lang-description2, td.lang-description3 { font-size:8pt; padding:4pt; line-height:1.25em; }

.lang-block0 { border:1px solid #FFB3B3; } td.lang-code0 { background-color: #FFB3B3; color: black; } td.lang-description0 { background-color: #FFE0E8; color: black; }

.lang-block1, .lang-block2, .lang-block3  { border:1px solid #99B3FF; } td.lang-code1, td.lang-code2, td.lang-code3 { background-color: #99B3FF; color: black; } td.lang-description1, td.lang-description2, td.lang-description3 { background-color: #E0E8FF; color: black; }

.lang-blockN { border:1px solid #6EF7A7; } td.lang-codeN { background-color: #6EF7A7; color: black; } td.lang-descriptionN { background-color: #C5FCDC; color: black; }

/** Forums box **/ .mainpage-box-forums { -moz-box-sizing: border-box; margin: 0 auto; padding-top: 17px; width: 100%; } .mainpage-box-forums .activityfeed { margin: 0; width: 100%; } .mainpage-box-forums li { border-bottom: 1px solid #8B8C8C; margin-left: 20px; } .mainpage-box-forums p { margin: 0; } .mainpage-box-forums table { padding-left: 7px; width: 100%; } .mainpage-box-forums table td p:last-child { margin-top: 2px; } .mainpage-box-forums .sprite { display: none; } .mainpage-box-forums cite { display: none ! important; } .mainpage-box-forums .title { margin-left: 1px; } .mainpage-box-forums .title:before { content: "Topic: "; } .mainpage-box-forums .real-name { display: inline-block; font-weight: bold; } .mainpage-box-forums .seemore { float: right; font-size: 12px; font-weight: bold; margin-right: 3px; margin-top: -7px; text-shadow: 1px 1px #000000; }

li.message-removed.hide { display: none; } div.ajax-poll { width:auto !important; }

/******************* * Template Documentation *******************/ .template-documentation { border: 1px solid #b68333; margin: .5em; margin-top: 2em; background: #A66908; }

.template-docu-header, .template-docu-footer { background: #C68723; color: #DDD; padding: 1em; margin: 0em; }

.template-docu-footer { padding: .5em; font-size: 85%; text-align: right; }

.template-docu-content { padding: 1em; padding-bottom: 0em; margin: 0em; }

.template-docu-content code { background: #AA6D0C; padding: 1px; border: 1px solid #B67918; border-radius: 3px; }

/* hlist */ .hlist ul { margin: 0; list-style: none; } .hlist li, .hlist ul ul { display: inline; } .hlist li a { white-space: nowrap; } .hlist ul ul:before { content: "(" } .hlist ul ul:after {   content: ")" } .hlist li:after { content: " • "; } .hlist ul ul li:after { content: "/"; } .hlist li:last-child:after, .hlist ul ul li:last-child:after { content: none; }

.portable-infobox { overflow: hidden; font-size: 90%; background-image:url('https://static.jojowiki.com/images/2/2b/Jojobg.png'); border: 2px solid #ffcc68; border-radius: 10px; font-size: smaller; line-height: 1.5; width: 270px; }

.portable-infobox .pi-data .pi-data-value:not(:first-child) { flex-basis: 1% !important; } .portable-infobox.pi-theme-thin .pi-secondary-font { background-color: #ffcc68; }

.portable-infobox.pi-theme-thin .pi-data .pi-data-label { flex-basis: 30% !important; background-color: #2b3f84; }

/* Stand Info */ .portable-infobox.pi-theme-stand { width: 270px; }

/* Character Info */ .portable-infobox.pi-theme-thin { width: 270px; }

.portable-infobox.pi-theme-thin .pi-title, .portable-infobox.pi-theme-thin .pi-header { background-image: url('https://static.jojowiki.com/images/4/46/DiamondBG2.png') !important; }

.pi-horizontal-group-item.pi-data-label { color: #000; }

.episodes, .portable-infobox.pi-theme-episodes .pi-horizontal-group-item.pi-data-label, .portable-infobox.pi-theme-episodes .pi-horizontal-group-item.pi-data-value { font-size: 12px !important; }

/* Custom Colors */ /* Phantom Blood */ .PhantomBlood, .portable-infobox.pi-theme-PhantomBlood { width: 270px; background-color: #3055A1; border: 2px solid #3055A1; } .portable-infobox.pi-theme-PhantomBlood .pi-title, .portable-infobox.pi-theme-PhantomBlood .pi-header { background-color: #3055A1; color: white; } .portable-infobox.pi-theme-PhantomBlood .pi-data .pi-data-label { background-color: #777690; } .portable-infobox.pi-theme-PhantomBlood .pi-horizontal-group-item.pi-data-label { background-color: #777690; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-PhantomBlood .pi-image-collection-tabs li.current { background: #c7d0e2; } /* Battle Tendency */ .BattleTendency, .portable-infobox.pi-theme-BattleTendency { width: 270px; background-color: #952F58; border: 2px solid #952F58; } .portable-infobox.pi-theme-BattleTendency .pi-title, .portable-infobox.pi-theme-BattleTendency .pi-header { background-color: #952F58; color: white; } .portable-infobox.pi-theme-BattleTendency .pi-data .pi-data-label { background-color: #DF9330; } .portable-infobox.pi-theme-BattleTendency .pi-horizontal-group-item.pi-data-label { background-color: #DF9330; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-BattleTendency .pi-image-collection-tabs li.current { background: #e7cdaa; } /* Stardust Crusaders */ .StardustCrusaders, .portable-infobox.pi-theme-StardustCrusaders { width: 270px; background-color: #1F7EEA; border: 2px solid #1F7EEA; } .portable-infobox.pi-theme-StardustCrusaders .pi-title, .portable-infobox.pi-theme-StardustCrusaders .pi-header { background-color: #1F7EEA; color: white; } .portable-infobox.pi-theme-StardustCrusaders .pi-data .pi-data-label { background-color: #B5D302; } .portable-infobox.pi-theme-StardustCrusaders .pi-horizontal-group-item.pi-data-label { background-color: #B5D302; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-StardustCrusaders .pi-image-collection-tabs li.current { background: #aae7b8; } /* Diamond is Unbreakable */ .DiamondIsUnbreakable, .portable-infobox.pi-theme-DiamondIsUnbreakable { width: 270px; background-color: #38729F; border: 2px solid #38729F; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-title, .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-header { background-color: #38729F; color: white; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-data .pi-data-label { background-color: #F7B616; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-horizontal-group-item.pi-data-label { background-color: #F7B616; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-image-collection-tabs li.current { background: #ffcd53; } /* Vento Aureo */ .VentoAureo, .portable-infobox.pi-theme-VentoAureo { width: 270px; background-color: #E15FB6; border: 2px solid #E15FB6; } .portable-infobox.pi-theme-VentoAureo .pi-title, .portable-infobox.pi-theme-VentoAureo .pi-header { background-color: #E15FB6; color: white; } .portable-infobox.pi-theme-VentoAureo .pi-data .pi-data-label { background-color: #F4DA6D; color: black; } .portable-infobox.pi-theme-VentoAureo .pi-horizontal-group-item.pi-data-label { background-color: #F4DA6D; border: 2px solid white; border-top: none; color: black; } .portable-infobox.pi-theme-VentoAureo .pi-image-collection-tabs li.current { background: #fff5c9; } /* Stone Ocean */ .StoneOcean, .portable-infobox.pi-theme-StoneOcean { width: 270px; background-color: #842D85; border: 2px solid #842D85; } .portable-infobox.pi-theme-StoneOcean .pi-title, .portable-infobox.pi-theme-StoneOcean .pi-header { background-color: #842D85; color: white; } .portable-infobox.pi-theme-StoneOcean .pi-data .pi-data-label { background-color: #98C988; } .portable-infobox.pi-theme-StoneOcean .pi-horizontal-group-item.pi-data-label { background-color: #98C988; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-StoneOcean .pi-image-collection-tabs li.current { background: #b4e8b0; } /* Steel Ball Run */ .SteelBallRun, .portable-infobox.pi-theme-SteelBallRun { width: 270px; background-color: #D4813D; border: 2px solid #D4813D; } .portable-infobox.pi-theme-SteelBallRun .pi-title, .portable-infobox.pi-theme-SteelBallRun .pi-header { background-color: #D4813D; color: white; } .portable-infobox.pi-theme-SteelBallRun .pi-data .pi-data-label { background-color: #C0C0C0; } .portable-infobox.pi-theme-SteelBallRun .pi-horizontal-group-item.pi-data-label { background-color: #C0C0C0; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-SteelBallRun .pi-image-collection-tabs li.current { background: #c5ded9; } /* JoJolion */ .JoJolion, .portable-infobox.pi-theme-JoJolion { width: 270px; background-color: #53A599; border: 2px solid #53A599; } .portable-infobox.pi-theme-JoJolion .pi-title, .portable-infobox.pi-theme-JoJolion .pi-header { background-color: #53A599; color: white; } .portable-infobox.pi-theme-JoJolion .pi-data .pi-data-label { background-color: #F8A1E8; } .portable-infobox.pi-theme-JoJolion .pi-horizontal-group-item.pi-data-label { background-color: #F8A1E8; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-JoJolion .pi-image-collection-tabs li.current { background: #e7cdaa; } /* One-Shot */ .OneShot, .portable-infobox.pi-theme-OneShot { width: 270px; background-color: #0068B8; border: 2px solid #0068B8; } .portable-infobox.pi-theme-OneShot .pi-title, .portable-infobox.pi-theme-OneShot .pi-header { background-color: #0068B8; color: white; } .portable-infobox.pi-theme-OneShot .pi-data .pi-data-label { background-color: #E72A9E; } .portable-infobox.pi-theme-OneShot .pi-horizontal-group-item.pi-data-label { background-color: #E72A9E; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-OneShot .pi-image-collection-tabs li.current { background: #e7cdaa; }

/* Episode Info */ .portable-infobox.pi-theme-wide { width: 270px; }

.portable-infobox .pi-item { /* a row */ }

.portable-infobox .pi-item-spacing { /* The padding around titles, captions, data, headers, and navigation */ padding: 1px; padding-left: 2px; padding-top: initial; }

.portable-infobox .pi-border-color { /* The separator between data and groups. */   border-color: #F0F0F0; }

.portable-infobox .pi-font { /* The font of data values. */   font-family: 'Rubik'; }

.portable-infobox .pi-secondary-font { /* The font of labels, headers, and navigation. */   color: #000; font-family: 'Rubik'; letter-spacing: inherit; font-weight: normal; text-transform: none; padding: 4px; }

.portable-infobox .pi-background { /* The background underneath the entire infobox. */   background-color: #F0F0F0; }

.portable-infobox .pi-secondary-background { /* The background behind headers and navigation. */   background: #ffcc68; margin-left: 2px; margin-right: 2px; }

.portable-infobox .pi-title { color: #000; background-image:url('https://static.jojowiki.com/images/4/46/DiamondBG2.png'); background: #ffcc68; font-size: 20px; font-family: 'Lato'; text-align: center; letter-spacing: inherit; font-weight: bold; text-transform: none; border: 0px solid #F0F0F0; padding: 1px; }

.portable-infobox .pi-image { padding: 0; background-image:url('https://static.jojowiki.com/images/4/46/DiamondBG2.png'); margin: 1px; }

.portable-infobox .pi-image-thumbnail { width: 100%; height: auto; }

.portable-infobox .pi-data .pi-data-label { /* border-top: 1px solid #999; border-bottom: 1px solid #f0f0f0; */ background-color: #2b3f84; font-family: 'Rubik'; color: white; letter-spacing: inherit; flex-basis: 40%; min-width: 55px; font-size: 12px; padding-top: 1px; }

.portable-infobox.pi-theme-wide .pi-data .pi-data-label { text-align: center; min-width: 50px; }

.portable-infobox .pi-data .pi-data-value { background-image:gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FFFFFF), color-stop(75%, #f0f0f0)); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FFFFFF), color-stop(75%, #F0F0F0)); background-image:-moz-linear-gradient(top, #FFFFFF 25%, #F0F0F0 75%); background-image:-o-linear-gradient(top, #FFFFFF 25%, #F0F0F0 75%); background-image:-ms-linear-gradient(top, #FFFFFF 25%, #F0F0F0 75%); }

.portable-infobox .pi-data .pi-data-value:not(:first-child) { padding-left: 4px; padding: 4px; }

.portable-infobox .pi-horizontal-group-item.pi-data-label, .portable-infobox .pi-horizontal-group-item.pi-data-value { text-align: center; vertical-align: top; font-size: 85%; color: #3A3A3A; }

.portable-infobox .pi-horizontal-group-item.pi-data-label { background-color: #fad856; }

.portable-infobox .pi-horizontal-group-item.pi-data-value { background-image: gradient(linear,0% 0%,0% 100%,color-stop(25%,#FFFFFF),color-stop(75%,#f0f0f0)); background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(25%,#FFFFFF),color-stop(75%,#F0F0F0)); background-image: -moz-linear-gradient(top,#FFFFFF 25%,#F0F0F0 75%); background-image: -o-linear-gradient(top,#FFFFFF 25%,#F0F0F0 75%); background-image: -ms-linear-gradient(top,#FFFFFF 25%,#F0F0F0 75%); }

/*Tabbers*/ /* This is for all tabs */ .portable-infobox .pi-image-collection-tabs li { color: #63487f; } /* This is for the current selected tab */ .portable-infobox .pi-image-collection-tabs li.current { background: #ffe2ec; /*your color here*/ color: #63487f; }

/* Episode is black text */ .portable-infobox .pi-header { border-bottom: 2px solid #F0F0F0; text-align: center; background: #ffcc68; font-size: 16px; font-weight: bold; }

.portable-infobox.pi-theme-wide .pi-header { color: black; font-size: smaller; }

.portable-infobox.pi-theme-wide .pi-horizontal-group { width: inherit; }

/* Tab View Themes */

ul.tabs { margin-left: 0px; }

/* Selected Tab */ ul.tabs li[data-tab="flytabs_phantomblood0"].selected a, ul.tabs li[data-tab="flytabs_phantomblood1"].selected a, ul.tabs li[data-tab="flytabs_phantomblood2"].selected a, ul.tabs li[data-tab="flytabs_phantomblood3"].selected a, ul.tabs li[data-tab="flytabs_phantomblood4"].selected a, ul.tabs li[data-tab="flytabs_phantomblood5"].selected a, ul.tabs li[data-tab="flytabs_phantomblood6"].selected a, ul.tabs li[data-tab="flytabs_phantomblood7"].selected a { background: #3055A1; background: -webkit-linear-gradient(#3055A1,#777690); background-image: -moz-linear-gradient(#3055A1,#777690); background-image: -o-linear-gradient(#3055A1,#777690); background-image: linear-gradient(#3055A1,#777690); color: white; } /* Normal Tab; NOT selected */ ul.tabs li a { border: 1.5px solid gray; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; font-size: 95%; background-color: #f0f0f0; color: #654488; }

.tabs li a { padding: 6px 10px 3px !important; }

/************************************/ /********** TABBER DESIGNS *********/ /**********************************/

/* Phantom Blood */ div.phantom-blood-tabs .tabberlive, div.phantom-blood-tabs .tabbertab, div.phantom-blood-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.phantom-blood-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.phantom-blood-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.phantom-blood-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.phantom-blood-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.phantom-blood-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.phantom-blood-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.phantom-blood-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#3055A1, #777690) !important; color:white !important; } div.phantom-blood-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.phantom-blood-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#1F396E,#59586e) !important; color:white !important; border: none !important; }

div.phantom-blood-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#1F396E,#59586e) !important; color:white !important; border-bottom: none !important; }

div.phantom-blood-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/1/10/PBSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

ul.tabbernav li { padding-top: 0 !important; }

div.phantom-blood-tabs ul.tabbernav li { line-height: 20px !important; }

div.phantom-blood-tabs .toc { border: 1px solid #3055A1; }

/* Battle Tendency */ div.battle-tendency-tabs .tabberlive, div.battle-tendency-tabs .tabbertab, div.battle-tendency-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.battle-tendency-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; }

div.battle-tendency-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.battle-tendency-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.battle-tendency-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.battle-tendency-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.battle-tendency-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.battle-tendency-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; }

div.battle-tendency-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#952F58, #DF9330) !important; color:white !important; } div.battle-tendency-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#5F1633,#9B6622) !important; color:white !important; border: none !important; }

div.battle-tendency-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#5F1633,#9B6622) !important; color:white !important; border-bottom: none !important; }

div.battle-tendency-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/8/89/BTSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.battle-tendency-tabs ul.tabbernav li { line-height: 20px !important; }

div.battle-tendency-tabs .toc { border: 1px solid #952F58; }

/* Stardust Crusaders */ div.stardust-crusaders-tabs .tabberlive, div.stardust-crusaders-tabs .tabbertab, div.stardust-crusaders-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.stardust-crusaders-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.stardust-crusaders-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.stardust-crusaders-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.stardust-crusaders-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.stardust-crusaders-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.stardust-crusaders-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.stardust-crusaders-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.stardust-crusaders-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#1F7EEA, #B5D302) !important; color:white !important; } div.stardust-crusaders-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#0D4F9A,#717C2E) !important; color:white !important; border: none !important; }

div.stardust-crusaders-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#0D4F9A,#717C2E) !important; color:white !important; border-bottom: none !important; }

div.stardust-crusaders-tabs .mw-header-link { background:url('https://jojowiki.com/jjba/images/e/e0/SDCSymbol.png/') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.stardust-crusaders-tabs ul.tabbernav li { line-height: 20px !important; }

div.stardust-crusaders-tabs .toc { border: 1px solid #1F7EEA; }

/* Diamond is Unbreakable */ div.diamond-is-unbreakable-tabs .tabberlive, div.diamond-is-unbreakable-tabs .tabbertab, div.diamond-is-unbreakable-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.diamond-is-unbreakable-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.diamond-is-unbreakable-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.diamond-is-unbreakable-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.diamond-is-unbreakable-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.diamond-is-unbreakable-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.diamond-is-unbreakable-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.diamond-is-unbreakable-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.diamond-is-unbreakable-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#38729F, #F7B616) !important; color:white !important; } div.diamond-is-unbreakable-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#2F5776,#B98300) !important; color:white !important; border: none !important; }

div.diamond-is-unbreakable-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#2F5776,#B98300) !important; color:white !important; border-bottom: none !important; }

div.diamond-is-unbreakable-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/4/49/DIUSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.diamond-is-unbreakable-tabs ul.tabbernav li { line-height: 20px !important; }

div.diamond-is-unbreakable-tabs .toc { border: 1px solid #38729F; }

/* Vento Aureo */ div.vento-aureo-tabs .tabberlive, div.vento-aureo-tabs .tabbertab, div.vento-aureo-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.vento-aureo-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.vento-aureo-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.vento-aureo-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.vento-aureo-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.vento-aureo-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.vento-aureo-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.vento-aureo-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.vento-aureo-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#E15FB6, #F4DA6D) !important; color:white !important; } div.vento-aureo-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#91246D,#C8B465) !important; color:white !important; border: none !important; }

div.vento-aureo-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#91246D,#C8B465) !important; color:white !important; border-bottom: none !important; }

div.vento-aureo-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/d/d2/VASymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.vento-aureo-tabs ul.tabbernav li { line-height: 20px !important; }

div.vento-aureo-tabs .toc { border: 1px solid #E15FB6; }

/* Stone Ocean */ div.stone-ocean-tabs .tabberlive, div.stone-ocean-tabs .tabbertab, div.stone-ocean-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.stone-ocean-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.stone-ocean-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.stone-ocean-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.stone-ocean-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.stone-ocean-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.stone-ocean-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.stone-ocean-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.stone-ocean-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#842D85, #98C988) !important; color:white !important; } div.stone-ocean-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#5B1E5C,#639353) !important; color:white !important; border: none !important; }

div.stone-ocean-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#5B1E5C,#639353) !important; color:white !important; border-bottom: none !important; }

div.stone-ocean-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/9/9e/SOSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.stone-ocean-tabs ul.tabbernav li { line-height: 20px !important; }

div.stone-ocean-tabs .toc { border: 1px solid #842D85; }

/* Steel Ball Run */ div.steel-ball-run-tabs .tabberlive, div.steel-ball-run-tabs .tabbertab, div.steel-ball-run-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.steel-ball-run-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.steel-ball-run-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.steel-ball-run-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.steel-ball-run-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.steel-ball-run-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.steel-ball-run-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.steel-ball-run-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.steel-ball-run-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#D4813D,#C0C0C0) !important; color:white !important; } div.steel-ball-run-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#9E561B,#817F7F) !important; color:white !important; border: none !important; }

div.steel-ball-run-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#9E561B,#817F7F) !important; color:white !important; border-bottom: none !important; }

div.steel-ball-run-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/5/54/SBRSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.steel-ball-run-tabs ul.tabbernav li { line-height: 20px !important; }

div.steel-ball-run-tabs .toc { border: 1px solid #D4813D; }

/* JoJolion */ div.jojolion-tabs .tabberlive, div.jojolion-tabs .tabbertab, div.jojolion-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.jojolion-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.jojolion-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.jojolion-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.jojolion-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.jojolion-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.jojolion-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.jojolion-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.jojolion-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#53A599,#F8A1E8) !important; color:white !important; } div.jojolion-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#388076,#D46BC1) !important; color:white !important; border: none !important; }

div.jojolion-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#388076,#D46BC1) !important; color:white !important; border-bottom: none !important; }

div.jojolion-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/6/6e/JJLSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.jojolion-tabs ul.tabbernav li { line-height: 20px !important; }

div.jojolion-tabs .toc { border: 1px solid #53A599; }

/* One-shot */ div.oneshot-tabs .tabberlive, div.oneshot-tabs .tabbertab, div.oneshot-tabs .tabbernav { margin: 0px; padding: 0px; border: none; background: none; }

div.oneshot-tabs ul.tabbernav li a { border: 1px solid #838282; border-radius: 1px; background: #efefef !important; font-family: Rubik !important; font-size: 12px !important; color: #654488 !important; margin:0 !important; padding:2px 12px !important; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); font-size: 13px !important; cursor:default; } div.oneshot-tabs ul.tabbernav li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.oneshot-tabs ul.tabbernav li:last-of-type a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } div.oneshot-tabs .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; padding: 6px 0px 0px 0px !important; } div.oneshot-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } div.oneshot-tabs ul.tabbernav li a:active { background: #f0f0f0 !important; } div.oneshot-tabs ul.tabbernav li a:hover { background: #cbc5c5 !important; } div.oneshot-tabs ul.tabbernav li.tabberactive a { background:linear-gradient(#0068B8,#E72A9E) !important; color:white !important; } div.oneshot-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#06497D,#B01A76) !important; color:white !important; border: none !important; }

div.oneshot-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#06497D,#B01A76) !important; color:white !important; border-bottom: none !important; }

div.oneshot-tabs .mw-header-link { background:url('https://static.jojowiki.com/images/5/5d/OneshotSymbol.png') no-repeat !important; background-position:center !important; padding: 17px 25px 0 0 !important; position: relative !important; overflow: hidden !important; width: 30px !important; height: 25px !important; box-sizing: border-box !important; }

div.oneshot-tabs ul.tabbernav li { line-height: 20px !important; }

div.oneshot-tabs .toc { border: 1px solid #0068B8; }

div.infoboxtabs2 .tabberlive, div.infoboxtabs2 tabbernav { background: url('https://static.jojowiki.com/images/4/46/DiamondBG2.png') !important; background-size: cover !important; }

div.infoboxtabs2 ul.tabbernav li a { padding-left: 10px !important; padding-right: 10px !important; padding-top: 2px !important; font-size: 11px !important; border-radius: 0 !important; }

div.multitab ul.tabbernav li a { padding-left: 10px !important; padding-right: 10px !important; padding-top: 2px !important; font-size: 11px !important; border-radius: 0 !important; background: white !important; }

div.multitab .tabberlive .tabbertab { background-image: url('https://static.jojowiki.com/images/4/46/DiamondBG2.png') !important; }

div.multitab .tabbertab { background: white !important; }

/***************************************/ /*              Hover                 */ /***************************************/ .show-when-hovering { display: none; } .hover-container:hover .show-when-hovering { display: inline; } .hover-container:hover .hide-when-hovering { display: none; } .fadeout img:hover { opacity:0; transition:none !important; -webkit-transition: none !important; } .fadeout img:active { opacity:0; transition:none !important; -webkit-transition: none !important; } body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadein { visibility: hidden; }

body:not(.editor) .fadeout-container.fadeout-hide-bottom > .fadeout:hover + .fadein { visibility: visible; }

.fadeout-container.img.lzyTrans { transition: none !important; -webkit-transition: none !important; }

/* Hover Box for switching the visibility of the selected item */ .hoverbox { display:inline-block; padding:0em; } .hoverbox .hoveritem { display:none; margin:0em; padding:0em; } .hoverbox .hoveritem.selected { display:inline-block; } .hoverbox:hover .hoveritem { display:inline-block; } .hoverbox:hover .hoveritem.selected { display:none; }

.customedit { background: url('https://static.jojowiki.com/images/d/d2/Edit.png') no-repeat; }

.customedit:hover { background: url('https://static.jojowiki.com/images/2/2f/Edit2.png') no-repeat; }

.edittab { background: url('https://static.jojowiki.com/images/0/0e/EditTab.png') no-repeat; }

.fadeinimg { opacity: 0.1; } .fadeinimg:hover { opacity: 1.0; }

.closerange tr > td { border: 2px #f88 solid; padding: 0.2em; } .longrange tr > td { border: 2px #c8f9bb solid; padding: 0.2em; } .autopilot tr > td { border: 2px #268BD2 solid; padding: 0.2em; } .rangeirrelevant tr > td { border: 2px #E3B52C solid; padding: 0.2em; }

div#nihongo span#jpn { display: inline; }

div#nihongo:hover span#jpn { display: none; }

div#nihongo span#romaji { display: none; }

div#nihongo:hover span#romaji { display: inline; }

span#hovertext span#outer { display: inline; }

span#hovertext:hover span#outer { display: none; }

span#hovertext span#hidden { display: none; }

span#hovertext:hover span#hidden { display: inline; }

div#hovertext span#outer { display: inline; }

div#hovertext:hover span#outer { display: none; }

div#hovertext span#hidden { display: none; }

div#hovertext:hover span#hidden { display: inline; }

.diamonds tr > td { border: 1px solid #aaaaaa; padding: 0.2em; }

.diamonds a { color: #df479c; }

/* Make collapsible table's link white/normal font */ .diamonds .mw-collapsible-toggle a { color: #ffffff; font-weight: normal; }

.diamonds tr > th { background-image:url('https://static.jojowiki.com/images/4/46/DiamondBG2.png') !important; background-size: 300px; background-position: center; background-blend-mode: soft-light; border: 1px solid #aaaaaa; }

.cquote tr > td { border: none !important; }

.cquote tr > th { border: none !important; }

/*Edit button */ .sprite.edit-pencil { background-position: 0 !important; background-image: url(https://static.jojowiki.com/images/4/46/DiamondBG2.png) !important; width: 52px !important; }

.mw-body .editsection { font-size: 0 !important; opacity: 0.5 !important; }

.mw-body .editsection:hover { opacity: 1 !important; }

.sprite.edit-pencil:hover { background-position: 0 !important; background-image: url(https://static.jojowiki.com/images/2/2f/Edit2.png) !important; }

/* Tooltips */ /* Main CSS class of the tooltip */ .main-tooltip { border: 1px solid #cac4b5; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); margin-bottom: 5px; padding: 2px 5px; background-color: #fbeecb; } /* Adds padding to the wrapper to make space for a shadow */ padding: 3px 7px 2px 3px; } /* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */ .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; } .tooltips-init-complete { cursor: help; }
 * 1) tooltip-wrapper {

/**********************************/ /*           USERPAGES           */ /**********************************/ a[href$=":MetallicKaiser"] { color: #ff98ba !important; font-weight: bold !important; }

a[href$=":Vish"] { color: #496cd4 !important; font-weight: bold !important; } a[href$=":Paisley_Park"] { color: #df6295 !important; font-weight: bold !important; font-style: italic !important; } a[href$=":Nabu"] { color: #C0C0C0 !important; font-weight: bold !important; } a[href$=":The_Speedwagon_Foundation"] { color: #9a652e !important; font-weight: bold !important; font-style: italic !important; }

a[href$=":Morganstedmanms"] { color: #a481e4 !important; font-weight: bold !important; }

/**********************************/ /*           NAVBOXES            */ /**********************************/ .navbox { width: 100%; background: #000; color: black; margin: 1em auto; font-size: 93%; clear: both; padding: 2px; border-spacing: 0; border: 1px solid #AAA; } /* Merges navboxes that are directly under eachother */ .navbox + .navbox { margin-top: -11px; } .navbox .navbox-title { background: #ffcc68; color: #000; font-weight: bold; } .navbox .navbox-title a, .navbox .navbox-footer a { color: #000 !important; } .navbox .navbox-vde { float:left; width:65px; color:#fff; } .navbox .navbox-title-padright { padding-right: 65px; } .navbox .navbox-title-padleft { padding-left: 65px; } .navbox .navbox-subgroup { border-spacing: 0; width: 100%; } .navbox .navbox-gutter { height: 2px; } .navbox .navbox-subgroup .navbox-gutter { background: #000; } .navbox .navbox-section-row > td { padding: 0; height: 100%; } .navbox .navbox-section { width: 100%; border-spacing: 0; } .navbox .navbox-above, .navbox .navbox-below { background: #ffcc68; text-align: center; } .navbox .navbox-image { background: #000; text-align: center; } .navbox .navbox-group, .navbox .navbox-header { background: #ffcc68; color: #000; font-weight: bold; height: 100%; padding: 2px 4px; } .navbox .navbox-header-collapsible { padding-left: 65px; } .navbox .navbox-group { text-align: right; padding-right: 1em; min-width: 150px; } .navbox .navbox-group, .navbox .navbox-image-left { border-right: 2px solid #000; } .navbox-image-right { border-left: 2px solid #000; } .navbox .navbox-list { background: #faebb2; color: black; width: 100%; height: 100%; padding: 0; } .navbox .alt > .navbox-list { background: #F7F7F7; } .navbox .navbox-list div { padding: 0px 4px; } .navbox .navbox-list.no-group { text-align: center; padding-top: 2px; padding-bottom: 2px; } .navbox .mw-collapsible-toggle { width: 65px; }

/* ========================== Gallery ==========================*/

.thumbcaption { font-size: 78% !important; color: #5c5959; }

div.gallerytext { font-size: 75%; }

ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper { background: rgba(0, 0, 0, 0.8); color: white; }

/* CSS Hover Gallery for Mediawiki * * @author: Unknown * current version crafted together by User:Christharp from several CSS sites. For my website:Yellpedia */

.zoom_img img{ -moz-transition:-moz-transform 0.1s ease-in; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; transition:transform 0.1 ease-in; }

.zoom_img img:hover{ z-index:1; box-shadow: 0px 0px 10px #888888; position:relative; -moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2); transform:scale(2); }

/* ==========================  Profile ==========================*/

background-color: #b0b4cf; border: groove #b0b4cf; }
 * 1) profile-toggle-button {

background-color: #7780b5; }
 * 1) profile-toggle-button:hover {

-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; }   transform: rotate(360deg); box-shadow: 0 0 20px black; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); }
 * 1) profile-image img {
 * 1) profile-image:hover img {

/* Comments */ .full { width: auto; }

.reply { width: auto; }

.f-message { width: auto; }

.r-message { width: auto; }

/* Recent Changes */ .mw-changeslist .special li { font-size: 11px; list-style: none; }

/* Poll */ .ajaxpoll .ajaxpoll-id-info { display: none; }

.ajaxpoll { width: auto; }

/* Navbox Mobile */ /* Only for mobile devices */ .onlymobile { display:none; }

/* More Button BG */ .vectorMenu { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAAO0lEQVR4AeSKhREAMQzDdN5/5uixuEKDpqgBjl2f78wd2DVj1+26/h///PfteVMN7zoGebcg1/Y/ZQQAlAUtQCujIJMAAAAASUVORK5CYII=); }

/* Main Page */

.mainpage-header { display: flex; margin: 2.6em 1.75em 1.5em; }

.mainpage-header .header-intro { flex: 2; }

.mainpage-header .header-intro .mw-headline { font-family: Bangers; }

.mainpage-header .header-intro h1 { font-size: 2.2em; border: none; margin: 0 0 0.15em; }

body.wgl-readermode .mainpage-header .header-intro h1 { font-size: 2.25em; }

.mainpage-header .header-intro p { font-size: 1.1em; line-height: 1.7em; }

.mainpage-header .header-stats { flex: 1; display: flex; justify-content: center; align-items: center; margin-top: -1em; }

.mainpage-header .header-stats ul { list-style: none; }

.mainpage-header .announcement { margin: 0.5em 0 1.5em; }

.mainpage-header .announcement a { background: #f9fafa; border: 1px solid #e4eaee; color: #5d6773; font-size: 0.9em; line-height: 1.25em; padding: 0.25em 0.75em; border-radius: 10em; transition: 0.25s ease; display: inline-flex; align-items: center; }

.mainpage-header .announcement a:hover { text-decoration: none; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); }

.mainpage-header .announcement .announcement-pill { background: #6bc71f; color: #ffffff; font-size: 0.85em; font-weight: bold; text-transform: uppercase; border-radius: 10em; padding: 0.1em 0.6em; margin: 0 0.5em 0 -0.5em; }

.mainpage-header .announcement .arrow.dark { margin-left: 0.5em; filter: invert(50%); }

/* Tiles */

.tile { background: #ffffff; border: 1px solid #e4eaee; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); padding: 1.5em 2em 1em; max-width: 40em; }

.tile h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 0.4em; }

.tile .byline + h2 { margin-top: -0.5em; }

.tile.link-button { padding: 0; }

.tile.link-button a { color: inherit; display: block; padding: 1.25em 1.5em 0.75em; text-decoration: none; }

.tile.dark { color: #ffffff; background: #5d6773; border: none; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); }

.tile.dark h2, .tile.dark h3 { color: #ffffff; }

.tile.dark a { color: #ccd2d8; }

.tile.dark .byline { color: rgba(255, 255, 255, 0.7); }

.byline { font-size: 0.9em; color: #949eaa; }

.byline a { color: #949eaa; }

.tile-row { display: flex; flex-flow: row wrap; margin-bottom: 1em; }

.tile-halves { display: flex; flex-flow: row wrap; border: 1px solid #e4eaee; background: #ffffff; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); }

.tile-halves h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 0.4em; }

.tile-halves .byline + h2 { margin-top: -0.5em; }

.tile-top { width: 100%; padding: 1.3rem 1.5rem 0.6rem; }

.tile-top.tile-image { display: flex; align-items: center; background-color: #949eaa; overflow: hidden; padding: 0; height: 13vw; max-height: 12em; }

.tile-top.tile-image a { width: 100%; }

.tile-top.tile-image img { width: 100%; height: auto; transition: 0.4s ease-out; }

.tile-bottom { background: #ffffff; border-top: 1px solid #e4eaee; width: 100%; padding: 1rem 1.5rem 0.6rem; }

.tile-bottom.link-button { align-self: flex-end; padding: 0; }

.tile-bottom.link-button a { display: block; text-align: center; padding: 0.75em 1.5em 0.8em; text-decoration: none; }

.tile-bottom.read-more { background: #f9fafa; transition: 0.3s ease-out; }

.tile-bottom.read-more a { color: #949eaa; font-weight: bold; text-align: right; }

.tile-bottom.read-more:hover { background: #f2f4f4; }

.tile-bottom.read-more:hover .arrow { transform: translateX(50%); }

.tile-bottom.read-more .arrow { filter: invert(43%) sepia(50%) hue-rotate(175deg); margin-left: 0.4em; transition: 0.3s ease-out; }

.spinner-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ff6347; z-index: 999999; }

.sk-cube-grid { width: 40px; height: 40px; margin: 100px auto; }

.sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } .sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% {   -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% {   -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }

@keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% {   -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% {   -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }


 * 1) left-navigation { margin-top: 5.4em; }
 * 2) right-navigation { margin-top: 5.4em; }

.mw-parser-output .banner-box-2 { margin-top: 15em !important; }