MediaWiki:Common.css

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; src: local('Cinzel Bold'), local('Cinzel-Bold'), url(https://fonts.gstatic.com/s/cinzel/v7/8vIK7ww63mVu7gtzTUHuE2ZaGf_4-g.woff2) format('woff2'); }

/* front page nav grid */

.fp-nav { display: flex; flex-flow: row wrap; justify-content: center; align-content: stretch; }

.fp-nav-item { display: inline-block; width: calc(33% - 4px); max-width: 400px; min-width: 250px; flex-grow: 1; position: relative; min-height: 2em; margin: 2px; font-size: 180%; }

.fp-nav-text { position: absolute; z-index: 2; height: 100%; width: 100%; display: table; top: 0; box-sizing: border-box; line-height: 1; }

.fp-nav-text a { vertical-align: middle; display: table-cell; height: 100%; padding: 0.5em 1em; font-family: "Cinzel",serif; text-shadow: 0 2px 0 #0e0f11, 0 -0.5px 0 #dce1e4; text-decoration: none; letter-spacing: 0.25em; }

.fp-nav-image a, .fp-nav-image img { width: 100%; height: auto; display: block; }

/* front page content */

display: table; display: flex; flex-wrap: wrap; }
 * 1) front-page-main {

.front-page-row { display: flex; flex-wrap: wrap; width: 100%; }

.front-page-column { display: table-cell; vertical-align: top; width: 50%; display: flex; flex-wrap: wrap; min-width: 300px; flex-grow: 1; }

.front-page-portal { margin: 0.5em; width: 100%; padding: 1em; border-radius: 0.5em; box-sizing: border-box; }

.front-page-welcome { font-size: 190%; font-family: "Cinzel",serif; text-align: center; text-shadow: 0 2px 0 #0e0f11,0 -0.5px 0 #dce1e4; }

.front-page-header { font-size: 180%; font-family: "Cinzel",serif; text-shadow: 0 2px 0 #0e0f11,0 -0.5px 0 #dce1e4; }

.front-page-list { column-width: 10em; }

.front-page-list > ul { display: table; }

/* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .feature { background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 5px; padding: 10px; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0em auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.notice-tag { margin-left:auto; margin-right:auto; margin-bottom:1em; width:600px; height: 5px; border-width: 2px 2px 2px 10px; border-style: solid; vertical-align: middle; }

.rellink { padding-left:1.5em; margin-bottom:.5em; font-style:italic; }

/** * Style for horizontal lists (separator following item). * @source mediawiki.org/wiki/Snippets/Horizontal_lists * @revision 6 (2014-05-09) * @author mw:User:Edokter */ .hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; } /* Display list items inline */ .hlist dd, .hlist dt, .hlist li { margin: 0; display: inline; } /* Display nested lists inline */ .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul, .hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; } /* Generate interpuncts */ .hlist dt:after { content: ": "; } .hlist dd:after, .hlist li:after { content: " · "; font-weight: bold; } .hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; } /* For IE8 */ .hlist dd.hlist-last-child:after, .hlist dt.hlist-last-child:after, .hlist li.hlist-last-child:after { content: none; } /* Add parentheses around nested lists */ .hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before, .hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before, .hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before { content: " (";   font-weight: normal; } .hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after, .hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after, .hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {    content: ") "; font-weight: normal; } /* For IE8 */ .hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after, .hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after, .hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after { content: ") ";   font-weight: normal; } /* Put ordinals in front of ordered list items */ .hlist ol {    counter-reset: listitem; } .hlist ol > li {    counter-increment: listitem; } .hlist ol > li:before {    content: " " counter(listitem) " ";    white-space: nowrap; } .hlist dd ol > li:first-child:before, .hlist dt ol > li:first-child:before, .hlist li ol > li:first-child:before {    content: " (" counter(listitem) " "; }

/***************** /* Battle Points * /*****************/

.battlePointsContainer { background-image: url('https://vindictus.gamepedia.com/media/vindictus.gamepedia.com/7/72/Battle_Points_Background.png'); background-repeat: repeat-x; padding-top: 1px; height: 15px; width: 400px; padding-bottom: 1px; }

.battlePointsText { padding: 0; margin: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; font-size: 10px; line-height: 15px; color: white; }

.battlePointsContainer img[alt=Overlay] { position: absolute; top: -3px; left: -4px; height: 21px; width: 408px; }

.battlePointsContainer img[alt=Fill] { position: absolute; top: 2px; left: 0; height: 11px; }

/******************* /* Rounded corners * /*******************/

.round { -moz-border-radius: .5em; -khtml-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; }

.roundtl { -moz-border-radius: .5em 0 0 0; -khtml-border-radius: .5em 0 0 0; -webkit-border-radius: .5em 0 0 0; border-radius: .5em 0 0 0; }

.roundtr { -moz-border-radius: 0 .5em 0 0; -khtml-border-radius: 0 .5em 0 0; -webkit-border-radius: 0 .5em 0 0; border-radius: 0 .5em 0 0; }

.roundbl { -moz-border-radius: 0 0 0 .5em; -khtml-border-radius: 0 0 0 .5em; -webkit-border-radius: 0 0 0 .5em; border-radius: 0 0 0 .5em; }

.roundbr { -moz-border-radius: 0 0 .5em 0; -khtml-border-radius: 0 0 .5em 0; -webkit-border-radius: 0 0 .5em 0; border-radius: 0 0 .5em 0; }

.roundtop { -moz-border-radius: .5em .5em 0 0; -khtml-border-radius: .5em .5em 0 0; -webkit-border-radius: .5em .5em 0 0; border-radius: .5em .5em 0 0; }

.roundbottom { -moz-border-radius: 0 0 .5em .5em; -khtml-border-radius: 0 0 .5em .5em; -webkit-border-radius: 0 0 .5em .5em; border-radius: 0 0 .5em .5em; }

.roundleft { -moz-border-radius: .5em 0 0 .5em; -khtml-border-radius: .5em 0 0 .5em; -webkit-border-radius: .5em 0 0 .5em; border-radius: .7em 0 0 .7em; }

.roundright { -moz-border-radius: 0 .5em .5em 0; -khtml-border-radius: 0 .5em .5em 0; -webkit-border-radius: 0 .5em .5em 0; border-radius: 0 .5em .5em 0; }

/********************************* /* Vertical alignment for tables * /*********************************/

tr.valign-middle > td, table.valign-middle > tr > td, table.valign-middle > * > tr > td { vertical-align: middle; }

tr.valign-top > td, table.valign-top > tr > td, table.valign-top > * > tr > td { vertical-align: top; }

tr.valign-bottom > td, table.valign-bottom > tr > td, table.valign-bottom > * > tr > td { vertical-align: bottom; }

/*************** /* Content box * /***************/

.contentbox { background-color: #20282f; border: 0px; -moz-border-radius: .5em; -khtml-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; padding: 10px; }

.contentbox_header { background: none !important; padding-bottom: 12px; font-size: 1.2em; color: #ffffff; text-shadow: #000000 0px 1px 0px; font-weight: bold; }

/*********************** /* Color pallet styles * /***********************/

table.color-pallet { border: none; width: 100%; background: none; margin: 1em 1em 1em 0; border-collapse: collapse; text-align: center; }

table.color-pallet td { padding: 8px; border: solid 1px #000; }

/***************** /* Navbox styles * /*****************/

.navbox { border: none; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; }

.navbox-inner, .navbox-subgroup { width: 100%; }

.navbox-group, .navbox-title, .navbox-abovebelow { padding: 0.25em 1em; line-height: 1.5em; text-align: center; }

th.navbox-group { white-space: nowrap; text-align: right; }

.navbox-list { line-height: 1.8em; border-color: #0e1b23; }

.navbox-odd { background: transparent; } table.navbox + table.navbox { margin-top: -1px; } .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul, .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; } ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }

/***************** /* Navbar styles * /*****************/

.navbar { display: inline; font-size: 88%; font-weight: normal; }

.navbar ul { display: inline; white-space: nowrap; }

.navbar li { word-spacing: -0.125em; }

.navbar.mini li span { font-variant: small-caps; }

/* Navbar styling when nested in infobox and navbox */ .infobox .navbar { font-size: 100%; }

.navbox .navbar { display: block; font-size: 100%; }

.navbox-title .navbar { /* @noflip */ float: left; /* @noflip */ text-align: left; /* @noflip */ margin-right: 0.5em; width: 6em; }

/****************** /* Infobox styles * /******************/

.infobox, .old-infobox { border: none; position: relative; padding: .25em; margin-bottom: 1em; }

.infobox table, .old-infobox table { background: none; color: inherit; }

.infobox h1, .old-infobox h1 { font-size: 1.4em; padding: 0 .2em .4em .2em; border: 0; }

.infobox h2, .old-infobox h2 { font-size: 1.2em; border: 0; }

.infobox .editsection, .old-infobox .editsection { display: none; }

/******************** /* Infobox item CSS * /********************/

.itemib, .setib { border: none; float: right; padding: 10px; margin-left: 1em; margin-bottom: 1em; }

.itemib { width: 420px; }

.setib { width: 320px; }

.itemib table, .setib table { width: 100%; border-spacing: 0px; }

.itemib .title, .setib .title { font-weight: bold; font-size: 130%; }

.itemib .icon-border { border-radius: 5px; border: 2px solid #0e1b23; padding: 1px; margin-right: 5px; }

.itemib .icon-border img { border-radius: 2px; }

.itemib .item-info, .setib .item-info { border: 1px solid #303940; border-radius: 3px; width: 100%; margin-bottom: 3px; }

.itemib .item-desc { margin: .5em 0; border-style: solid; border-color: #303940; border-width: 1px 0; padding: 5px; }

/** * Prevents line breaks in links, used for navboxes */ .nowraplinks a, .nobreak { white-space: nowrap; }

/******************************************************************* /* realtable and prettytable, these should use "wikitable" instead * /*******************************************************************/

.realtable { width: 100%; }

.realtable, .prettytable { border: 3px solid #0e1b23; border-spacing: 1px; }

.realtable tr, .prettytable tr { background: #242d34; color: #ffffff; }

/****************** /* Old tab styles * /******************/

.tabdiv > ul { border: 0; border-bottom: 2px solid #16232b; list-style-type: none; padding-bottom: 0; margin: 0; line-height: 1; }

.tabdiv > ul a { background-color: #0e1b23; padding: 2px 1em; border: 2px solid #16232b; border-bottom: none; color: #CCCCCC; margin-right: 0.5em; margin-bottom: 0; display: inline-block; }

.tabdiv > ul li { display: inline-block; margin: 0; margin-bottom: 0; // wiki sets this explicitly }

.tabdiv > ul li.active { /* This is a little box behind that shows up behind the active tab */ }

.tabdiv > ul li.active a { background: #16232b; color: #eee; font-weight: bold; position: relative; top: 1px; padding-top: 3px; }

.tabdiv > div { background-color: #242d34; margin: 0; border: 1px solid #16232b; border-top: 0; padding: 1em 5px 5px 5px; }

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

/** * In navboxes, the show/hide button balances the v·d·e links * from Template:Navbar, so they need to be the same width. */ .navbox .collapseButton { width: 6em; }

/** * Styling for JQuery makeCollapsible, matching that of collapseButton */ .mw-collapsible-toggle { font-weight: normal; /* @noflip */ text-align: right; }

.navbox .mw-collapsible-toggle { width: 6em; }

/* Main page stuff */

/* Front page appearance styles */ .fpbox .heading, .fpbox .mainheading { border: 0; }

.fpbox { border: 1px solid #505050; box-shadow: 0 2px 5px #505050; }

.fplink:not(.fplink-plain) { border: 1px solid #505050; }

.linkslabel { border-bottom: 2px solid #505050; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {   text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

/* Front page structure */ .fpbox { margin: 5px; padding: 5px; overflow: auto; width: calc(100% - 2px); }

.fpbox.plain { background: transparent; border: none; box-shadow: none; }

.fpbox .heading, .fpbox .mainheading, .fpbox .welcome { margin: 0 0 10px; padding: 0 0 5px; overflow: auto; font-size: 180%; font-family: "Cinzel",serif; text-shadow: 0 2px 0 #0e0f11,0 -0.5px 0 #dce1e4; }

.fpbox .mainheading, .fpbox .welcome { font-size: 150%; font-weight: bold; }

.fpbox .heading { text-align: center; font-size: 132%; }

.linkslabel { margin: 15px 5px 5px; padding: 0 0 5px; }

/* Template:FP links styles */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /* Auto-resize front page video to fit smaller columns */ .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

/* Multi-column box support */ .fp-container main .columns .leftcol, .fp-container .columns .rightcol { width: 100%; margin: 0; padding: 0; }

@media (min-width: 990px) { .fp-container .columns .leftcol { float: left; width: 50%; }

.fp-container .columns .rightcol { float: right; width: 50%; } }

.fp-section { display: flex; flex-wrap: wrap; }

/* ***************************************************** */ /* This section affects the main page layout            */ /*                                                      */ /* Both 3 and 2 column layouts are here. Managers should */ /* remove whichever of the two they are not using, as   */ /* well as this comment. */ /* ***************************************************** */

/* this CSS governs the responsive 2 column main page layout */ display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-2column.fp-container { grid-template-areas: "a b" "c c"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-2column.fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } }
 * 1) fp-2column.fp-container {

grid-area: a; }
 * 1) fp-top {

grid-area: b; }
 * 1) fp-flex {

grid-area: c; }
 * 1) fp-bottom {

/* end responsive 2 column main page layout */

/* ******************** */ /* End main page layout */ /* ******************** */