MediaWiki:Common.css

/***** CSS placed here will be applied to all skins on the entire site. *****/

background-image: url(https://static.jojowiki.com/images/customizations/HeaderBG.png); background-repeat: no-repeat; background-position: 192px 0; }
 * 1) mw-head {

.mw-wiki-logo { background-size: cover; margin-left: 5%; }

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

display: none; }
 * 1) menu .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 1em; }
 * 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 {

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:80em) and (min-width:61em) { #p-personal { z-index: 0; background-color: #8e94ba; border: 2px solid #3d3d51; } .menuwrapper { left:27% !important; } }

@media only screen and (max-width:61em) and (min-width:40em) { #p-personal { z-index: 0; background-color: #8e94ba; border: 2px solid #3d3d51; } .menuwrapper { left:27% !important; font-size: 72% !important; } }

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

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

@media only screen and (min-width: 40em) { #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 */
 * 1) mw-panel { width: 12em; }

margin-top: 2em; border-top: 2px solid #d5d6d8; }
 * 1) footer, #mw-head-base, #content { margin-left: 12em; }
 * 2) left-navigation { margin-left: 12em; }
 * 3) 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/customizations/Jojobg.png); border: 5px solid #3d3d51; border-top: none; -webkit-box-shadow: 0px 2px 3px 6px rgba(0,0,0,0.77); -moz-box-shadow: 0px 2px 3px 6px rgba(0,0,0,0.77); box-shadow: 0px 2px 3px 6px rgba(0,0,0,0.77); }   /* set max width and fix the background */ @media screen and (min-width: 1425px) { html, body { background: url(https://static.jojowiki.com/images/customizations/Wiki-Background.jpg) center; background-repeat: no-repeat; background-attachment: fixed; }   }    @media screen and (max-width: 1425px) { .skin-minerva html, body { background-image:url(https://static.jojowiki.com/images/customizations/WikiMinimalBG.jpg) !important; }	}
 * 1) jojowiki-body {

@media screen and (max-width: 500px) { .skin-minerva html, body { background-image: none !important; }	}   /* set right border */ .mw-body { border-right: 1px solid #A7D7F9; border-color: #c2b7de; background: url(https://static.jojowiki.com/images/customizations/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; }

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

margin-left: 0; }
 * 1) mw-data-after-content {

/* 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 #9a85b7; 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; text-transform: capitalize; }

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

/* ==========================  Thumbnails ==========================*/	div.tright, div.tleft { border: 0px transparent !important; }

html .thumbimage { border: 1px solid #000; border-radius: 4px; }

div.thumbinner { border: 2px solid #000 !important; border-radius: 6px; padding: 3px 6px 3px 4px; background-image: url(https://static.jojowiki.com/images/f/f5/Diamondbg.png) !important; background-position: bottom !important; }	.thumbinner:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transition: .2s; z-index: 1; }

/* ==========================  Headings ==========================*/ .mw-body .firstHeading { font-family: 'Rubik',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: 15.5px; font-family: "Trebuchet MS"; } .mw-body-content p { margin: .4em 0 .5em; }

.mw-body-content h2 { font-size: 28px; font-family: 'Rubik',sans-serif; }

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

a.mw-selflink { color: #000; }

/*===========================*/ /*       INFOBOX TABS       */ /*===========================*/ /*  Styles for both InfoboxTabs and InfoboxTabs2   */ ul.tabbernav li.tabberactive a:hover { color: #000 !important; } ul.tabbernav li.tabberactive a { color: black !important; }

/*  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; }

.tabber .tabbertab { border: 0px !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; }

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

.infoboxtabs2 ul.tabbernav li a:hover, .infoboxtabs2 ul.tabbernav li.tabberactive a{	background-color: darkgrey !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 { 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; }

/* 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 {

li.message-removed.hide { display: none; }

/******************* * 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/customizations/Jojobg.png'); border: 2px solid #9da1c0; border-radius: 10px; font-size: smaller; line-height: 1.5; width: 270px; }

.portable-infobox .pi-data-label a { color: white !important; text-decoration: underline; }

.portable-infobox .tabbertab img { background-image: url('https://static.jojowiki.com/images/customizations/DiamondBG.png'); }

.portable-infobox .image img { background-image: url('https://static.jojowiki.com/images/customizations/DiamondBG.png'); }

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

.portable-infobox.pi-theme-statinfo { float:unset !important; margin-left:-5px; border: none; border-radius: unset; }

.portable-infobox .pi-data .pi-data-value { font-size: 12px; }

.portable-infobox .pi-horizontal-group-item.pi-data-value { padding-left: 5px; padding-right: 5px; }

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

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

/* 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/customizations/DiamondBG.png') !important; background-blend-mode: soft-light !important; }

.portable-infobox.pi-theme-wide .pi-title, .portable-infobox.pi-theme-wide .pi-header { background-image: url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-blend-mode: soft-light !important; }

.portable-infobox.pi-theme-episodes .pi-title, .portable-infobox.pi-theme-episodes .pi-header { background-image: url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-blend-mode: soft-light !important; }

.portable-infobox.pi-theme-stand .pi-title, .portable-infobox.pi-theme-stand .pi-header { background-image: url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-blend-mode: soft-light !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: #1b3f95; border: 2px solid #0f2252; } .portable-infobox.pi-theme-StardustCrusaders .pi-title, .portable-infobox.pi-theme-StardustCrusaders .pi-header { background-color: #1b3f95; color: white; } .portable-infobox.pi-theme-StardustCrusaders .pi-data .pi-data-label { background-color: #9bb144; } .portable-infobox.pi-theme-StardustCrusaders .pi-horizontal-group-item.pi-data-label { background-color: #9bb144; 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: #78a4cd; border: 2px solid #4c7d84; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-title, .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-header { background-color: #78a4cd; color: white; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-data .pi-data-label { background-color: #F599A3; } .portable-infobox.pi-theme-DiamondIsUnbreakable .pi-horizontal-group-item.pi-data-label { background-color: #F599A3; 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: #a19b9b; } .portable-infobox.pi-theme-SteelBallRun .pi-horizontal-group-item.pi-data-label { background-color: #a19b9b; 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: #49885d; border: 2px solid #20445d; }

.portable-infobox.pi-theme-OneShot .pi-data-label a { color: white !important; }

.portable-infobox.pi-theme-OneShot .pi-title, .portable-infobox.pi-theme-OneShot .pi-header { background-color: #49885d; color: white; } .portable-infobox.pi-theme-OneShot .pi-data .pi-data-label { background-color: #AD76C9; } .portable-infobox.pi-theme-OneShot .pi-horizontal-group-item.pi-data-label { background-color: #AD76C9; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-OneShot .pi-image-collection-tabs li.current { background: #e7cdaa; }

/* JORGE JOESTAR */ .Jorge, .portable-infobox.pi-theme-Jorge { width: 270px; background-color: #e03374; border: 2px solid #e03374; }

.portable-infobox.pi-theme-Jorge .pi-data-label a { color: white !important; }

.portable-infobox.pi-theme-Jorge .pi-title, .portable-infobox.pi-theme-Jorge .pi-header { background-color: #e03374; color: white; } .portable-infobox.pi-theme-Jorge .pi-data .pi-data-label { background-color: #629a64; } .portable-infobox.pi-theme-Jorge .pi-horizontal-group-item.pi-data-label { background-color: #629a64; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-Jorge .pi-image-collection-tabs li.current { background: #818a94; }

/* Baoh */ .Baoh, .portable-infobox.pi-theme-Baoh { width: 270px; background-color: #4b8ac4; border: 2px solid #2b6396; }

.portable-infobox.pi-theme-Baoh .pi-data-label a { color: white !important; }

.portable-infobox.pi-theme-Baoh .pi-title, .portable-infobox.pi-theme-Baoh .pi-header { background-color: #4b8ac4; color: white; } .portable-infobox.pi-theme-Baoh .pi-data .pi-data-label { background-color: #35337e; } .portable-infobox.pi-theme-Baoh .pi-horizontal-group-item.pi-data-label { background-color: #35337e; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-Baoh .pi-image-collection-tabs li.current { background: #818a94; }

/* GORGEOUS IRENE */ .Irene, .portable-infobox.pi-theme-Irene { width: 270px; background-color: #D58C00; border: 2px solid #E75C1D; }

.portable-infobox.pi-theme-Irene .pi-data-label a { color: white !important; }

.portable-infobox.pi-theme-Irene .pi-title, .portable-infobox.pi-theme-Irene .pi-header { background-color: #D58C00; color: white; } .portable-infobox.pi-theme-Irene .pi-data .pi-data-label { background-color: #8FA84D; } .portable-infobox.pi-theme-Irene .pi-horizontal-group-item.pi-data-label { background-color: #8FA84D; border: 2px solid white; border-top: none; color: white; } .portable-infobox.pi-theme-Irene .pi-image-collection-tabs li.current { background: #818a94; }

/* 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: 0; }

.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: #fff; 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: #8b96e7; }

.portable-infobox .pi-title { color: #fff; background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.png'); background: #9da1c0; 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/customizations/DiamondBG.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: #7F83A2; 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%; }

.portable-infobox .pi-horizontal-group { width: 102%; border-spacing: 0; margin-left: -2px; }

.portable-infobox .pi-horizontal-group-item.pi-data-label { background-color: #7F83A2; border: 2px solid white; border-top: none; }

.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-color: #8994e7; font-size: 16px; font-weight: bold; }

.infoboxtabs2 ul.tabbernav li, .tabbertab ul.tabbernav li, .portable-infobox ul.tabbernav li, .phantom-blood-tabs ul.tabbernav li, .battle-tendency-tabs ul.tabbernav li, .stardust-crusaders-tabs ul.tabbernav li, .diamond-is-unbreakable-tabs ul.tabbernav li, .vento-aureo-tabs ul.tabbernav li, .stone-ocean-tabs ul.tabbernav li, .steel-ball-run-tabs ul.tabbernav li, .jojolion-tabs ul.tabbernav li, .oneshot-tabs ul.tabbernav li { padding-top: 0; }

.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: 2px 0px 0px 0px !important; } div.phantom-blood-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 0 !important; text-align:center; margin: 0 0 -4px 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: 9px; }

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: 2px 0px 0px 0px !important; } div.battle-tendency-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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: 2px 0px 0px 0px !important; } div.stardust-crusaders-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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://static.jojowiki.com/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: 2px 0px 0px 0px !important; } div.diamond-is-unbreakable-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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: 2px 0px 0px 0px !important; } div.vento-aureo-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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 #ffcc68; }

/* 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: 2px 0px 0px 0px !important; } div.stone-ocean-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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: 2px 0px 0px 0px !important; } div.steel-ball-run-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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: 2px 0px 0px 0px !important; } div.jojolion-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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: 2px 0px 0px 0px !important; } div.oneshot-tabs ul.tabbernav { background: transparent; border-bottom: 0 !important; padding: 8px 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(#49885d,#AD76C9) !important; color:white !important; } div.oneshot-tabs ul.tabbernav li.tabberactive a:active { background:linear-gradient(#357349,#905bab) !important; color:white !important; border: none !important; }

div.oneshot-tabs ul.tabbernav li.tabberactive a:hover { background:linear-gradient(#357349,#905bab) !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 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; }

/***************************************/ /*              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; }

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

.diamond { background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-position: center; background-blend-mode: soft-light; }

.diamond2 { background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-position: center; background-blend-mode: soft-light; }

.diamondgradient { background-image:linear-gradient(rgba(234, 90, 232, 0.52), rgba(116, 21, 205, 0.52)), url('https://static.jojowiki.com/images/customizations/DiamondBG.png') !important; background-position: center; background-blend-mode: multiply; }

.diamonds tr > th { background-image:url('https://static.jojowiki.com/images/customizations/DiamondBG.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; }

.cquote { line-height: 26px; }

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

.mw-body .editsection:hover { opacity: 1 !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$=":Vishkugeta"] { color: #496cd4 !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; }

a[href$=":Sticky_Fingers"] { color: #3359CC !important; font-weight: bold !important; font-style: italic !important; }

/**********************************/ /*           NAVBOXES            */ /**********************************/ .navbox { width: 100%; background: #000; 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: #9da1c0; color: #000; font-weight: bold; } .navbox .navbox-title a, .navbox .navbox-footer a { color: #000 !important; }

.navbox a { color: #51045d !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: #c7d2ff; text-align: center; } .navbox .navbox-image { background: #000; text-align: center; } .navbox .navbox-group, .navbox .navbox-header { background: #a7a5de; 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: #c7d2ff; 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: 90% !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; }

ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper, ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper { height: 20% !important; }

ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover, ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover, ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover { height: auto !important;; }

li.gallerybox video { height: 150px !important; }

/* CSS Hover Gallery for Mediawiki * * @author: Unknown * current version crafted together by User:Christharp from several CSS sites. For my website:Yellpedia */ .zoomimg img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transition: .2s; z-index: 1; }

.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: 1em 1.75em 1.5em; }

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

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

.mainpage-header .header-intro h2 { font-size: 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%); }


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

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

display: none; }
 * 1) ca-talk.new {

td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub { word-break: normal; }

color: white !important; font-weight: 400 !important; text-shadow: 1px 1px 3px gray; }
 * 1) p-personal a {

.recentFeedNoLegend .mw-changeslist-legend { display: none; }

.imgtile { transition: 0.4s ease-out; } .imgtile:hover { transform: scale(1.04); }

.hoverButton img:hover { filter: grayscale(100%); }

/* ==========================  GALLERIES ==========================*/ .mw-gallery-packed-overlay li.gallerybox { width:172px!important; margin:-3px!important; margin-top:0!important }

.mw-gallery-packed .gallerybox:hover:not(.zoom_img) { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transition: .2s; z-index: 1; }

.mw-gallery-packed-overlay .gallerybox:hover:not(.zoom_img) { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transition: .2s; z-index: 1; }

.mw-gallery-packed-overlay .gallerybox div { width:150px!important } .mw-gallery-packed-overlay .gallerybox .thumb a img { width:170px!important; height:150px!important } .mw-gallery-packed-overlay .gallerybox img { object-fit:cover!important; object-position:top }

ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper { max-height:45%; }

.containedGallery .gallerybox img { object-fit: contain !important; }

padding-left: 0; }
 * 1) p-personal ul {

right: 0; padding: 2px 12px 2px 0; border-radius: 2px 2px 10px 10px; border-style: solid; border-color: #7F83A2; border-width: 2px; top: -0.09em; background-color:#9da1c0; box-shadow: 1px 1px 2px #4c4f67; }
 * 1) p-personal {

background-color: #e0c9ed; border-radius: 30px; }
 * 1) points-level {

.profile-tab-on { background-color: #2e354e; padding: 6px 6px 3px 5px; border-radius: 30px; font-size: 13px; }

.profile-tab { background-color: #595f7f; padding: 6px 6px 3px 5px; border-radius: 30px; font-size: 13px; }

.profile-tab-on a, .profile-tab a { color: white !important; }

.eye-container .title { color: #000; }

.parenttabs:hover { background-color:#cbc5c5 !important; }

.parenttabs:active { filter: grayscale; }

.parenttabs:active a { color: white !important; }

.parenttabs a { position: absolute; z-index: 10; width: 100%; height: 100%; left: 0; top: 12%; text-decoration: none; }

.parenttabs a.mw-selflink { color: white !important; }

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

table.mw-wikiforum-footerrow { font-size: 15px; }

.wikiforum-avatar-image { float: left; padding: 5px; background-color: #e5eaff; border: 2px solid white; margin-right: 20px; }

td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub { padding-bottom: 20px; padding-top: 10px; } td.mw-wikiforum-thread-main { border: 1px solid #454671; border-radius: 20px; }

td.mw-wikiforum-thread-sub { border: 1px solid #4d2b51; background: #ede8ff; border-radius: 20px; }

th.mw-wikiforum-thread-top { border: 1px solid #4d2b51; background: url(https://static.jojowiki.com/images/customizations/DiamondBG.png); }

/* BLOGS */ p.main-page-sub-links { font-size: 20px; font-family: 'Rubik',sans-serif; }

/* Misc */ .gradient { background: rgb(154,133,183); background: linear-gradient(180deg, rgba(154,133,183,1) 0%, rgba(70,81,130,1) 100%); }

.page-JoJo_Wiki h1.firstHeading { display:none; }

.whitelink a { color: white !important; }

.castImg img { max-width: 80px; max-height: 80px; }

.noshadow .charicon img { box-shadow:none !important; }

.resizeImg img { height:120px; width: auto; max-width: 120px; box-shadow: 0 1px 1px 4px black; }

.resizeImg2 img { max-height: 120px; width: auto; max-width: 120px; }

.noresizeimg img { height: initial; width: initial; max-width: initial; box-shadow: initial; }

.charbox { width: 133px; }

@media only screen and (max-width:600px) { .charbox { width: 50px; } }

.charicon { padding: 5px; border: 2px solid white; width: 120px; height:120px; text-align: center; }

.charicon2 { padding: 5px; border: 2px solid white; width: 120px; height:auto; text-align: center; }

.chariconbg .diamond { background-image: none !important; }

.mainpage-shadowbox .mw-headline-headanchor { display: none; }

.profile-on { background-color: #39486b; }

.external { background-position: 100% !important; }

.mw-header { overflow: auto; }

.mw-ui-button { background-color: #f8f9fa; color: #222222; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 4em; max-width: 28.75em; margin: 0; padding: 0.57142857em 0.9375em; border: 1px solid #a2a9b1; border-radius: 2px; font-family: inherit; font-size: 1em; font-weight: bold; line-height: 1; text-align: center; zoom: 1; vertical-align: middle; cursor: pointer; }

.cbox a { color: white !important; }

padding: 0 2em; }
 * 1) headertabs.ui-tabs .ui-tabs-nav {

.ppprarity img { height: auto !important; box-shadow: none !important; }

color: #D10E7B; }
 * 1) headertabs.large .ui-widget-content a {

color: #D10E7B; }
 * 1) headertabs.large .ui-widget-content a:visited {

margin: 0 .6em 0 0em; padding: 0; }
 * 1) mw-panel .portal {

.skin-minerva #footer, .skin-minerva #mw-head-base, .skin-minerva #content { margin-left: 0; }

.skin-minerva .content table { margin: 0 !important; }

.whitelink a { color: #fff; }

.whitecollapse .mw-collapsible-text { color: white !important; }

/* POPUPS*/ .mwe-popups-is-tall { y: 0; }

/* Logos */ .page-Phantom_Blood:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/b/b4/Phantom_Blood_Logo.png); height: 75px; background-size:30%; background-repeat:no-repeat; }

.page-Phantom_Blood .firstHeading i { opacity: 0 !important; }

.page-Battle_Tendency:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/6/60/Battle_Tendency_Logo.png); height: 70px; background-size:30%; background-repeat:no-repeat; }

.page-Battle_Tendency .firstHeading i { opacity: 0 !important; }

.page-Stardust_Crusaders:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/b/b6/Stardust_Crusaders_Logo.png); height: 60px; background-size:30%; background-repeat:no-repeat; }

.page-Stardust_Crusaders .firstHeading i { opacity: 0 !important; }

.page-Diamond_is_Unbreakable:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/8/8c/Diamond_is_Unbreakable_Logo.png); height: 60px; background-size:30%; background-repeat:no-repeat; }

.page-Diamond_is_Unbreakable .firstHeading i { opacity: 0 !important; }

.page-Vento_Aureo:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/3/30/Vento_Aureo_Logo.png); height: 75px; background-size:23%; background-repeat:no-repeat; }

.page-Vento_Aureo .firstHeading i { opacity: 0 !important; }

.page-Stone_Ocean:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/7/79/Stone_Ocean_Logo.png); height: 75px; background-size:23%; background-repeat:no-repeat; }

.page-Stone_Ocean .firstHeading i { opacity: 0 !important; }

.page-Steel_Ball_Run:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/d/d9/Steel_Ball_Run_Logo.png); height: 75px; background-size:30%; background-repeat:no-repeat; }

.page-Steel_Ball_Run .firstHeading i { opacity: 0 !important; }

.page-JoJolion:not(.action-history):not(.action-edit) .firstHeading { background-image:url(https://static.jojowiki.com/images/5/59/JoJolion_Logo.png); height: 75px; background-size:18%; background-repeat:no-repeat; }

.page-JoJolion .firstHeading i { opacity: 0 !important; }

html .thumbcaption { padding: 0 !important; padding-left: 3px !important; }

.floatright { clear: right !important; }

.supalt { line-height: 0; font-size: 70%; vertical-align: top; display: inline-block; }

.popup { border-bottom: 1px dotted; position: relative; }

.popup .title { position: absolute; top: 20px; background: silver; padding: 4px; left: 0; white-space: nowrap; }

.floatleft { padding-right: 10px; }

.hoverspin img { transition: transform .8s ease-in-out; }

.hoverspin img:hover { transform: rotate(360deg); }

/* FONTS */ /* bangers-regular - vietnamese_latin-ext_latin */ @font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; src: local('Bangers Regular'), local('Bangers-Regular'), url('../fonts/bangers-v12-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/bangers-v12-vietnamese_latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; }

/* lato-regular - latin-ext_latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-v16-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/lato-v16-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; }

/* quicksand-regular - vietnamese_latin-ext_latin */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/quicksand-v20-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/quicksand-v20-vietnamese_latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; }

/* raleway-regular - latin-ext_latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url('../fonts/raleway-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/raleway-v14-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; }

/* roboto-slab-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */ @font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/roboto-slab-v11-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-slab-v11-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } /* rubik-regular - latin-ext_latin_hebrew_cyrillic */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; src: local('Rubik'), local('Rubik-Regular'), url('../fonts/rubik-v9-latin-ext_latin_hebrew_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/rubik-v9-latin-ext_latin_hebrew_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; }

background: #8da3ba; }
 * 1) msupload-div {

border: 1px dashed #668bd5; color: #fff; }
 * 1) msupload-dropzone {