MediaWiki:Common.css

/* CSS placed here are "common base styles", will be applied to all desktop skins, but won't be applied to the mobile skin. Therefore, some rules will need to be repeated in MediaWiki:mobile.css. */

/* ========================================================================== */ /* mobile.css doesn't need this part. */ /* ========================================================================== */

/* layout style for all page */ div#mw-page-base { background: transparent !important; }

div#mw-head-base { background: transparent; }

margin-top: 1em; height: 163px; }	height: 163px; } /* fixed 1.31 logo size bug under width <982px. */ @media screen and (max-width: 981px){ #p-logo a{		width: 9em; height: 9em; background-size: contain; background-position: 50% 0%; } }
 * 1) p-logo{
 * 1) p-logo a{

/* Background image */ body { background: url("https://terraria.gamepedia.com/media/c/c7/Terraria_mushroom_background.jpg") no-repeat fixed center top / cover rgb(0, 0, 0); }

/* Tabs */ div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited { color: #E4F0F7 !important; }

div.vectorTabs, div.vectorTabs span { background-image: none; }

div.vectorTabs li.selected a, div.vectorTabs li.selected a span, div.vectorTabs li.selected a:visited, div.vectorTabs li.selected a:visited span { color: #E4F0F7; }

div.vectorTabs ul { background-image: none; }

div.vectorTabs li a, div.vectorTabs li a span { color: #E4F0F7; }

div.vectorTabs li a:hover, div.vectorTabs li a:hover span { color: #E4F0F7; }

div.vectorTabs li a { background-image: none; }

div.vectorTabs li.selected { background-color: transparent; background-image: none; }

div.vectorTabs ul li { background-color: transparent; background-image: none; }

div#p-sharing .menu { margin-left: 45px; min-width: 0px; width: 48px; }

width: 100%; }
 * 1) p-sharing #socialIconImages img {

width: 40px; }
 * 1) p-sharing #socialIconImages a {

div.vectorMenu h3 { padding-top: 1em; }

div.vectorMenu h3 span { color: #E4F0F7; } div.vectorMenu h3:hover span, div.vectorMenu h3:focus span { color: #E4F0F7; } div.vectorMenu h3 span::after { background-image: url("https://commons.gamepedia.com/media/8/80/Vector_menu_downarrow_white.png") !important; }

div#mw-head div.vectorMenu h3 { background-image: none; }

div.vectorMenu h3 a { background-image: none; }

div.vectorMenu li a { color: #000000; }

/* Sidebar */ div#p-personal h5 { color: #E4F0F7; }

div#p-personal a { color: #E4F0F7; }

div#p-personal a:hover { color: #FFFFFF; background: transparent; }

div#mw-panel div.portal h3, color: #E4F0F7; font-weight: bold; }
 * 1) mw-panel.collapsible-nav .portal h3 a,
 * 2) mw-panel.collapsible-nav .portal h3 a:visited,
 * 3) mw-panel.collapsible-nav .portal.collapsed h3 a,
 * 4) mw-panel.collapsible-nav .portal.collapsed h3 a:visited {

div#mw-panel div.portal div.body ul li a:visited { color: #E4F0F7; }

div#mw-panel div.portal div.body ul li a { color: #E4F0F7; }

div#mw-panel div.portal, div#mw-panel div.portal div.body, background-image: none; }
 * 1) mw-panel.collapsible-nav .portal {

/* Content */ div#content { background-color: #FCFCFC; background-image: none; border: 0px solid #AFCFE2; border-radius: .3em; -moz-border-radius: .3em; -webkit-border-radius: .3em; color: #000000; margin-right: 10px; }

h1, h2, h3, h4, h5, h6 { color: #000000; }

.catlinks { background-color: #E4F0F7; border: 1px ridge #AFCFE2; border-radius: .3em; -moz-border-radius: .3em; -webkit-border-radius: .3em; }

.toc, .mw-warning { border: 1px solid #AFCFE2; background-color: white; padding: 5px; font-size: 95%; border-radius: .3em; -moz-border-radius: .3em; -webkit-border-radius: .3em; }
 * toc,

ul#filetoc { border: 1px solid #DEECF4; }

/* Footer */ div#footer { background-image: none; }

div#footer ul li { color: #FFFFFF; }

div#footer a { color: #E4F0F7; }

/* Gamepedia lines */ footer { border-top: #f48020 3px solid; }

.netbar-flex { border-bottom: 1px solid #f48020; }

/* Desktop view for mobile screen. */ @media(max-width: 980px) {

/* longest: User:xxx/Common.css */ body #content div#atflb, body #content div#btflb { width: 100% !important; min-width: 300px !important; }

html body { margin-top: 0 !important; }

div#netbar { overflow: hidden; height: auto; position: static; width: 100%; }

#netbar .netbar-flex { flex-wrap: wrap; }

#mw-page-base, #mw-head-base { display: none; }

div#pageWrapper { position: relative; padding-top: 0.5em; margin-right: auto; margin: auto 5px; }

div#content { margin: 3em auto auto; }

#mw-navigation { position: absolute; left: 0; top: 0.5em; width: 100%; height: 3em; }

div#mw-head { position: relative !important; height: 100%; margin-top: auto; font-size: 12px; line-height: 1; }

div#mw-head div.vectorTabs { float: none; display: block; position: relative; background: none; height: auto; line-height: 1; }

div#mw-head div.vectorTabs span { height: auto; }

div#mw-head div.vectorTabs a { float: none; padding: 0.25em; height: auto; font-size: 1em; }

div#mw-head div.vectorTabs ul, div#mw-head div.vectorTabs li { line-height: inherit; float: none; background: none; height: auto; }

div#mw-head div.vectorTabs ul { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

div#mw-head div.vectorTabs ul li { display: block; margin-right: 0.5em; }

div#mw-head div.vectorTabs ul li:last-child { margin-right: 0; }

div#mw-head div.vectorMenu { float: none; display: block; position: relative; background: none; line-height: 1; }

div#mw-head div.vectorMenu h3 { height: auto; float: none; background: none; padding: 0 !important; margin: 0; }

div#mw-head div.vectorMenu h3 span { padding: 0.25em; margin: 0; font-size: 1em; }

div#mw-head div.vectorMenu h3 a { display: none; }

div#p-namespaces, div#p-views, div#p-variants, div#p-cactions { top: 0; float: none; }

div#mw-head div.emptyPortlet { display: none; }

div#mw-head div.vectorMenu div.menu { top: 100%; margin-top: 0.25em; border: 1px solid #a2a9b1; }

div#mw-head div.vectorMenu div.menu a { font-size: 1em; }

div#left-navigation { float: none; margin: auto; position: absolute; left: 5px; margin-left: -0.25em; top: auto; bottom: 0.25em; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

div#right-navigation { float: none; margin: auto; position: absolute; right: 5px; margin-right: -0.25em; top: auto; bottom: 0.25em; text-align: right; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

div#mw-head div#left-navigation div.vectorMenu, div#mw-head div#left-navigation div.vectorTabs { margin-right: 0.5em; }

div#mw-head div#left-navigation div.vectorMenu:last-child, div#mw-head div#left-navigation div.vectorTabs:last-child { margin-right: 0; }

div#mw-head div#right-navigation div.vectorMenu, div#mw-head div#right-navigation div.vectorTabs { margin-left: 0.5em; }

div#mw-head div#right-navigation div.vectorMenu:first-child, div#mw-head div#right-navigation div.vectorTabs:first-child { margin-left: 0; }

/* right offset */ #p-cactions div.menu { left: auto; right: 0; }

div#mw-head div.vectorTabs li.mw-watchlink { width: 18px; height: 18px; overflow: hidden; }

div#mw-head div.vectorTabs li.mw-watchlink a { width: 18px; height: 18px; padding: 30px 0 0 0; background-position: center 1px; }

/* search */ div#p-search { float: none; width: auto; height: 23px; position: absolute; top: auto; right: 0.25em; margin: auto; bottom: 22px; }

div#p-search h3 { display: none; }

div#p-search form { margin: auto; width: auto; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

div#simpleSearch { width: auto; height: auto; margin: auto; border: none; background: none; }

div#p-search div#simpleSearch #searchInput { width: 20em; padding: 0.25em; box-sizing: border-box; background-color: #fff; font-size: 12px; border: 1px solid #aaa; border-radius: 1px; }

div#mw-navigation div#mw-panel { position: absolute !important; top: 2em; left: 0; padding: 0; width: 100%; display: block; font-size: inherit; background: rgba(0, 0, 0, 0.9); overflow: visible; z-index: 999; }   div#p-logo { display: block; position: absolute; left: 5px; top: -2em; width: 71px; height: 25px !important; border-radius: 3px; overflow: hidden; margin-top: 0; }

#p-logo a { width: 71px; height: 25px; background-position: -2px -25px; background-size: 75px auto; }

div#mw-navigation div#mw-panel .portal { width: auto; margin: 0.5em; margin-bottom: 1em; padding: 0; display: none; }

div#mw-navigation div#mw-panel.on .portal { display: block; }

div#mw-navigation div#mw-panel .portal h3 { display: block !important; padding: 0 !important; background: none !important; }

div#mw-navigation div#mw-panel .portal div.body { display: block !important; padding: 0 !important; margin: 0 !important; overflow: hidden; }

div#mw-navigation div#mw-panel .portal div.body ul { margin-left: -0.5em; }

div#mw-navigation div#mw-panel .portal div.body li { display: inline-block !important; padding: 0.5em 1.5em !important; }

.socialSidebar { overflow: hidden; text-align: center; width: auto; margin-top: 2em; }

div#mw-navigation div#mw-panel .resize-sensor { position: absolute !important; top: -2em !important; left: 85px !important; right: auto !important; bottom: auto !important; visibility: visible !important; margin-top: 0 !important; width: 24px !important; height: 24px !important; z-index: 999 !important; display: block; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xhc3M9Imhlcm9pY29uLXVpIiBzdHJva2U9IndoaXRlIiBmaWxsPSJ3aGl0ZSIgZD0iTTQgNWgxNmExIDEgMCAwIDEgMCAySDRhMSAxIDAgMSAxIDAtMnptMCA2aDE2YTEgMSAwIDAgMSAwIDJINGExIDEgMCAwIDEgMC0yem0wIDZoMTZhMSAxIDAgMCAxIDAgMkg0YTEgMSAwIDAgMSAwLTJ6Ii8+PC9zdmc+); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; cursor: pointer; } } /*end media max-width:880px*/

@media(max-width: 500px) { div#pageWrapper { margin: auto; }

#pageWrapper div#content { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding: 5px; }

div#p-search div#simpleSearch #searchInput { width: 14em; }

div#p-sharing { display: none !important; } } /*end media max-width:500px*/

@media(max-width: 399px) { div#p-search div#simpleSearch { max-width: 500px; }

div#p-search, div#p-search div#simpleSearch, div#p-search div#simpleSearch #searchInput { width: 100%; } } /* end media max-width:399px */

/* Forces the page to have a vertical scroll bar to avoid width jitter caused by page content changes. */ body { overflow-y: scroll; }

/* Wiki editor fixes */ .wikiEditor-ui { background: rgba(0, 0, 0, 0); border: medium none; }

div.wikiEditor-ui-buttons { background-color: rgba(0, 0, 0, 0); border-top: medium none; margin-right: 5px; }

div.wikiEditor-ui-controls { background-color: rgba(0, 0, 0, 0); /* border-bottom: 1px solid #aaaaaa; remove for mw1.31*/ }

.wikiEditor-ui-tabs { background-color: #f3f3f3; border-left: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; }

.wikiEditor-ui-tabs div { background-color: #f3f3f3; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; }

.wikiEditor-ui-tabs div a { background: #f9f9f9; /* you can use a gradient here if you want to get fancy */ color: #0645ad; }

.wikiEditor-ui-tabs div.current { background-color: #f9f9f9; border-bottom: 1px solid #aaaaaa; }

.wikiEditor-ui-tabs div.current a { color: #000000; }

.wikiEditor-ui .wikiEditor-ui-top { border-bottom: 1px solid #aaaaaa; }

.wikiEditor-toolbar-spritedButton { background: url('https://help.gamepedia.com/media/help.gamepedia.com/5/5c/Editbar_sprites.png'); }

.wikiEditor-ui-toolbar { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); }

.wikiEditor-ui-toolbar .group { border-right: 1px solid #aaaaaa; }

.wikiEditor-ui-toolbar .group-search { border-left: 1px solid #aaaaaa; border-right: none; }

.wikiEditor-ui-toolbar .group .label { color: #000000; }

.tab { border-color: transparent; }

.wikiEditor-ui-toolbar .tabs span.tab a, .wikiEditor-ui-toolbar .tabs span.tab a:visited { color: #000000; }

.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited { color: #000000; }

.wikiEditor-ui-toolbar .group .tool-select .label { color: #000000; }

.wikiEditor-ui-toolbar .sections .section { background-color: #f3f3f3; border-top: 1px solid #aaaaaa; }

.wikiEditor-ui-toolbar .booklet .index div { color: #0645ad; }

.wikiEditor-ui-toolbar .booklet .index .current { background-color: transparent; color: #000000; }

.wikiEditor-ui-toolbar .booklet .pages { background-color: transparent; }

.wikiEditor-ui-toolbar .page-characters div span { border: 1px solid #aaaaaa; color: #000000; }

.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: rgba(255, 255, 255, 0.1); border-color: #aaaaaa; color: #0645ad; }

.wikiEditor-ui-toolbar .page-table td { border-top: 1px solid #aaaaaa; color: #000000; }

.wikiEditor-preview-loading { background-color: transparent; }

.wikiEditor-preview-contents { background-color: transparent; border-color: -moz-use-text-color #aaaaaa #aaaaaa; border-image: none; border-style: none solid solid; border-width: medium 1px 1px; }

.editOptions { background-color: transparent; border-color: -moz-use-text-color #aaaaaa #aaaaaa; border-image: none; border-style: none solid solid; border-width: medium 1px 1px; }

/* Page history */ div#pagehistory li.selected { background-color: transparent; border: none; }

div#pagehistory li { background-color: transparent; border: none; }

/* More noticeable diff coloring, taken from Thorium Mod Wiki*/ table.diff { background: transparent; }

td.diff-context { background: none repeat scroll 0 0 transparent; color: #000000; }

td.diff-deletedline { background-color: #FFE49C; border-color: #FFE49C; color: #000000; }

td.diff-addedline { background-color: #A3D3FF; border-color: #A3D3FF; color: #000000; }

/* multi-upload screen font color fix */ margin-left: 10px; }
 * 1) upload_list .file .file-title {

.check_span { color: #1D1D1D; float: right; }

/* ========================================================================== */ /* mobile.css needs this part. */ /* ========================================================================== */

/* common style */ a:visited { color: #0619aa; }

.small { font-size: 85%; }

.nowrap { white-space: nowrap; }

/* "terraria" box style. */ .terraria{ border: 1px #AFCFE2 solid; padding: 8px 12px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position: relative; } .terraria > .heading, .terraria > .mw-collapsible-content > .heading { background: #E4F0F7; text-align: center; font-weight: bold; line-height: 2; min-height: 1em; margin: auto -4px; padding: 0; font-size: inherit; margin-top: 8px; } .terraria > .heading:first-child, .terraria > .mw-collapsible-content > .heading:first-child, .terraria > .heading:nth-of-type(1), .terraria > .mw-collapsible-content > .heading:nth-of-type(1){ margin-top: auto; } .terraria > .heading + *, .terraria > .mw-collapsible-content > .heading + * { padding-top: 8px; } .terraria > .mw-collapsible-toggle { position: absolute; line-height: 1; right: 12px; top: 12px; font-size: 12px; } .terraria > .mw-collapsible-toggle > .mw-collapsible-bracket { display: none; } .terraria > .mw-collapsible-toggle:before { content: ""; vertical-align: middle; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); position: relative; left: -3px; border-left: 2px solid #0645ad; border-top: 2px solid #0645ad; border-right: 0; border-bottom: 0; top: 1px; } .terraria > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before { border-left: 0; border-top: 0; border-right: 2px solid #0645ad; border-bottom: 2px solid #0645ad; top: -2px; }

/* ".center" has width=100% rule, we don't want it, so use a different class name. */ .aligncenter, .align-center { text-align: center; }

/* pic box */ div.tright { margin: 0em 0 1em 1em; }

/* clear fix for float block */ .clearfix { *zoom: 1; }

.clearfix::before, .clearfix::after { content: " "; display: table; }

.clearfix::after { clear: both; }

/* Hide page title on main page */ body.rootpage-Terraria_Wiki h1.firstHeading { display: none; } /* heading on main page. */ body.rootpage-Terraria_Wiki div.heading { background: #E4F0F7; padding: 5px; margin-bottom: 0.5em; font-weight: bold; text-align: center; color: #033251; font-size: 120%; } body.rootpage-Terraria_Wiki div.heading > span.rightimg { float: right; }

/* Add diff accent to make even smaller changes visible */ .diffchange-inline { border: 1px #FF6666 dashed; }

/* SoundManager2Button icon (It looks useless) */ a.sm2_button { background-color: #3399CC; }

a.sm2_button:hover, a.sm2_playing { background-color: #006A9F; }

/* Recent changes reduce header spacing */ fieldset.rcoptions { margin-top: 0; }

/* References smaller text than main */ .references { font-size: 90%; }

/* Larger font for Module: code display (default is smaller than other code pages) */ pre.lua.source-lua { font-size: 14px !important; }

/* Tweak vertical margins */ margin-top: 0.7em !important; }
 * 1) content h1,
 * 2) content h2 {

margin-top: 0 !important; }
 * 1) content h1#firstHeading {

margin-bottom: 0.5em !important; }
 * 1) contentSub {

padding-top: 0.4em !important; }
 * 1) content h3 {

margin-top: 0.25em !important; }
 * 1) content p {

table.terraria { margin-top: 0.4em !important; }

margin-top: 10px !important; }
 * 1) toc {

/* Allows limiting TOCs to generate links for only header levels below a limit, for instance only level-3 (=== ===) and below. Use Template:Toc limit */ .toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul, .toclimit-6 .toclevel-5 ul, .toclimit-7 .toclevel-6 ul { display: none !important; }

/* Tables */ table { font-size: 100%; color: #000000; /* we don't want the bottom borders of s to be visible through * floated tables */ background-color: #FCFCFC; /* fix 100% width table with border */ box-sizing: border-box; }

.mw-specialpages-table { margin-bottom: 0; margin-top: 0; }

/* "terraria"-classed tables */ table.terraria { /* border style is defined in common .terraria */ margin: 0.5em 0.5em 0.5em 0; padding: 2px; }

.terraria th, .terraria td { padding: 3px; }

.terraria th { background: #E4F0F7; text-align: center; }

.terraria caption { font-weight: bold; background: #E4F0F7; padding: 5px; margin: auto 2px; }

.terraria > caption { padding: 3px; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; margin: 1px 1px -4px; border: 4px solid #F9F9F9; border-bottom-width: 1px; box-shadow: 0 0 0 1px #AFCFE2; position: relative; }

.terraria > caption:after { content: ""; display: block; width: 100%; height: 1px; background: #F9F9F9; position: absolute; left: -4px; bottom: -2px; border-left: 4px solid #f9f9f9; border-right: 4px solid #f9f9f9; }

/* Auto line separators for tables */ table.lined td { border-bottom: 1px #AFCFE2 solid; }

table.lined tr:last-of-type td { border-bottom: 0; }

table tr.bottomline td { border-bottom: 1px #AFCFE2 solid; }

table tr.topline td { border-top: 1px #AFCFE2 solid; }

/* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */ table.outer { white-space: nowrap; }

table.inner { border-collapse: collapse; background: inherit; width: 100%; }

table.inner th { border: 2px solid #FCFCFC; }

/* Other "plaincollapse" styling */

/* Removes brackets from collapse/expand links for collapsible elements with "plaincollapse" class specified*/ .plaincollapse .mw-collapsible-toggle { color: rgba(0, 0, 0, 0.0); }

.plaincollapse .mw-collapsible-toggle a, .plaincollapse .mw-collapsible-toggle a:link, .plaincollapse .mw-collapsible-toggle a:visited, .plaincollapse .mw-collapsible-toggle a:hover { font-weight: bold; color: #11688F; }

/* Offset linked anchors */ .anchor { display: block; height: 0; position: relative; top: -100px; z-index: -9999; visibility: hidden; }

/* banner box */ .notice-banner { text-align: center; margin: 3px auto 5px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .notice-banner > div { border: 1px solid #AFCFE2; background: #E4F0F7; color: #063B5E; padding: 6px 2em; margin: auto; }

@media(max-width: 600px) { .notice-banner > div { padding: 6px; } }

/* multi-column list */

/* correct webkit/chrome uneven margin on the first column*/ .responsive-columns ul, .responsive-columns ol { margin-top: 0px; }

.responsive-columns ul li:first-child, .responsive-columns ol li:first-child { margin-top: 0px; }

/* Ambox styles */ .ambox { background-color: #eeeeee; border-bottom-color: #383838; border-right-color: #383838; border-top-color: #383838; border-collapse: collapse; font-size: 95%; margin: 0 auto 2px auto; width: 80%; }

.ambox-gray { border-left-color: #383838; }

.ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; }

.ambox + .ambox { margin-top: -2px; }

.ambox-text { padding: 0.25em 0.5em; }

.ambox-image { padding: 2px 0px 2px 0.5em; text-align: center; width: 60px; }

.ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; }

/* Ambox colors */ .ambox-blue { border-left: 10px solid #1e90ff; }

.ambox-red { border-left: 10px solid #b22222; }

.ambox-orange { border-left: 10px solid #f28500; }

.ambox-yellow { border-left: 10px solid #f4c430; }

.ambox-purple { border-left: 10px solid #9932cc; }

.ambox-gray { border-left: 10px solid #bbbbaa; }

.ambox-green { border-left: 10px solid #228b22; }

/* Ambox small text */ .amsmalltext { font-size: smaller; margin-left: 0.8em; margin-top: 0.5em; }

/* -- */

/* ================================================================== */ /* Template-related styles */ /* ================================================================== */

/* -- */

.feature, .documentation { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 10px; }

.documentation_header { padding-bottom: 3px; border-bottom: 1px solid #AAAAAA; }

/* For Template:achievement */ div.achievement a.mw-selflink{ font-weight: inherit; }

/* For Template:main */ div.main-article { padding: 0.5em 0 1em 1.5em; color: #666; }

/* For Template:Key */ div.key { pointer-events: none; }

div.key span { cursor: pointer; white-space: nowrap; pointer-events: all; }

div.key a:-webkit-any-link { text-decoration: none; }

/* For Template:Quotation*/ blockquote.quotation{ position: relative; font-style: italic; padding: 0em 1em; margin: 1em auto; overflow: hidden; } blockquote.quotation:before{ content: "“"; display: block; font: bold 5em Times New Roman, Times, Georgie, serif; line-height: 0.8; color: silver; position: absolute; left: 0.2em; top: 0; } blockquote.quotation > div{ padding: 0.25em 0 0 1em; margin-left: 3em; border-left: 1px solid silver; } blockquote.quotation > div > p:last-child{ text-align: right; font-size: 0.9em; margin: 0; } @media(max-width: 550px){ blockquote.quotation{ clear: both; } }

/* .eicons Template:eicons, Template:item */ .eico { white-space: nowrap; position: relative; top: -0.1em; line-height: 1; }

/* template:eil */ .eil { white-space: nowrap; }

.eil .eico { margin-left: 3px; }

/* note text, Template:note, Template:item, etc. */ .note-text { color: #666; }

/* Expert */ .expert { color: #9B5700; cursor: pointer; font-weight: bold; }

/* -- item link - */ .item-link { white-space: nowrap; display: inline-block; }

.item-link > a, .item-link > img { display: inline-block; line-height: 0.1; vertical-align: middle; margin-left: 2px; }

.item-link > span { display: inline-block; margin-left: 3px; text-align: left; }

.item-link > a:first-child, .item-link > img:first-child, .item-link > span:first-child { margin-left: auto; } .item-link.multi-line > span, .item-link.-w > span { line-height: 1.25; vertical-align: middle; }

.item-link > span > .eico { font-size: 0.75em; vertical-align: middle; }

.item-link .note { color: #666; font-size: 85.7142%; /*12px/14px*/ }

.item-link > span > div.note { /*note2*/ font-size: 100%; line-height: 1; }

.item-link > span > .eico, .item-link > span > span.note { margin-left: 3px; }

.item-link.-w > span > .eico:last-child, .item-link.-w > span > span.note:last-child { display: block; margin-left: auto; }

.item-link.-w > span > span.note:last-child { line-height: 1; }

.item-link .id { font-size: 71.4285%; /*10px/14px*/ background-color: #E4F0F7; font-weight: bold; margin-top: 1px; padding: 0 2px; }

.item-link.boldname > span span:first-child { font-weight: bold; }

.item-link.notecolor span.note { color: inherit; }

.item-link.note2color div.note { color: inherit; }

.item-link.block, .item-link.block > span:first-child, .item-link.allblock, .item-link.allblock > * { display: block; }

.item-link.allblock > * { text-align: inherit; }

.item-link.notesize span.note { font-size: 100%; }

.item-link.note2size div.note { font-size: 85.7142%; /*12px/14px*/ }

.item-link.alignleft { text-align: left; }

.item-link.aligncenter { text-align: center; }

.item-link.alignright { text-align: right; }

.item-link.textleft > span { text-align: left; }

.item-link.textcenter > span { text-align: center; }

.item-link.textright > span { text-align: right; }

/* -- crafts table -- */ div.crafts { margin-bottom: 4px; line-height: 1.5; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; overflow: auto; } div.crafts.centered { -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -moz-justify-content:center; justify-content:center; } div.crafts .wrap { border: 1px solid #aaa; border-radius: 8px; padding: 6px 6px 2px 5px; position: relative; background: #FCFCFC; }

div.crafts .wrap::after { content: ""; display: block; height: 1px; width: auto; background: #fcfcfc; position: absolute; bottom: 2px; left: 6px; right: 6px; } div.crafts table { position: relative; } div.crafts table::after { content: ""; display: block; height: 100%; width: 1px; background: #fcfcfc; position: absolute; top: 0; left: 0; }

div.crafts caption { font-size: 1.17em; background: #E4F0F7; padding: 0.25em; position: relative; margin-bottom: 2px; font-weight: bold; }

div.crafts caption div._nav { position: absolute; left: 1em; top: 0.5em; font-size: 10px; font-weight: normal; }

div.crafts caption div._nav s { text-decoration: none; }

div.crafts th { background: #E4F0F7; padding: 0.25em 0.5em; border-right: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9; } div.crafts th:first-child { border-left-width: 0px; }

div.crafts th:last-child { border-right: 0; }

div.crafts td { padding: 0.25em 0.5em; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } /* div.crafts td:first-child{ border-left: 0; }*/ div.crafts td.result, div.crafts td.ingredients{ white-space: nowrap; } div.crafts td.station{ text-align: center; }

div.crafts td.station span.water{ display: inline-block; vertical-align: middle; }

div.crafts.nostation th.station, div.crafts.nostation td.station { display: none; }

div.crafts table .ingredients ul { margin: 0; list-style: none; }

div.crafts table .ingredients li { margin: 3px auto; } /* itemlink default as multiline */ div.crafts .item-link > span, div.crafts .item-link > span, div.crafts .note-text {   line-height: 1.25; vertical-align: middle; }

/* multi-column list */ .mclist > ul { list-style: none; margin-left: 0; }

/* itemlist */ .itemlist > ul { list-style: none; margin: 0.25em 0 -0.25em 0; }

.itemlist > ul > li { width: 10em; /* default width */ margin: auto 1em 0.5em auto; display: inline-block; }

/* dot list */ .dotlist { margin: auto; }

.dotlist > .title { font-weight: bold; }

.dotlist.nobold > .title { font-weight: normal; }

.dotlist > .title::after { content: " "; }

.dotlist > ul { display: inline; list-style: none; margin: auto; /* please don't delete this line, we need it to remove default ul margin setting. */ }

.dotlist > ul > li { display: inline; }

.dotlist > ul > li::after { content: " • "; } .dotlist.nodot > ul > li::after { content: "　"; }

.dotlist > ul > li:last-child::after { display: none; }

.dotlist.l > .title { margin-right: 5px; }

.dotlist.l > ul > li::after { margin-left: 3px; margin-right: 3px; }

.dotlist.xl > .title { margin-right: 10px; }

.dotlist.xl > ul > li::after { margin-left: 6px; margin-right: 6px; }

.dotlist.xxl > .title { margin-right: 15px; }

.dotlist.xxl > ul > li::after { margin-left: 9px; margin-right: 9px; }

.dotlist.xxxl > .title { margin-right: 20px; }

.dotlist.xxxl > ul > li::after { margin-left: 12px; margin-right: 12px; }

.dotlist.xxxxl > .title { margin-right: 25px; }

.dotlist.xxxxl > ul > li::after { margin-left: 15px; margin-right: 15px; }

/* navbox */ .navbox { border: 1px solid #aaa; border-radius: 8px; padding: 6px; margin: 0.5em auto; width: 100%; max-width: 1800px; box-sizing: border-box; position: relative; clear: both; line-height: 1.5; }

.navbox > .header { background: #E4F0F7; text-align: center; font-size: 16px; font-weight: bold; line-height: 2; padding: 4px 70px; min-height: 1em; }

.navbox > .vde { position: absolute; left: 12px; top: 10px; font-size: 9px; line-height: 1; color: #999; }

.navbox > .mw-collapsible-toggle { position: absolute; line-height: 1; right: 10px; top: 10px; font-size: 12px; }

.navbox > .mw-collapsible-toggle > .mw-collapsible-bracket { display: none; }

.navbox > .mw-collapsible-toggle:before { content: ""; vertical-align: middle; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); position: relative; left: -3px; border-left: 2px solid #0645ad; border-top: 2px solid #0645ad; border-right: 0; border-bottom: 0; top: 1px; } .navbox > .mw-collapsible-toggle:after{ content: ""; } .navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before { border-left: 0; border-top: 0; border-right: 2px solid #0645ad; border-bottom: 2px solid #0645ad; top: -2px; }

.navbox > .content { padding-top: 6px; text-align: center; }

.navbox > .content .dotlist + .dotlist { margin-top: 0.5em; }

/* nested navbox */ .navbox .navbox { border: 0; padding: 0; width: auto; margin: 0 0 6px; }

.navbox .navbox:last-child { margin: 0; }

.navbox .navbox > .header { font-size: 14px; padding: 0px 64px; }

.navbox .navbox > .vde { left: 6px; top: 4px; }

.navbox .navbox > .mw-collapsible-toggle { right: 4px; top: 4px; font-size: 10px; }

.navbox .navbox > .mw-collapsible-toggle:before { width: 3px; height: 3px; border-left: 1px solid #0645ad; border-top: 1px solid #0645ad; border-right: 0; border-bottom: 0; top: 1px; }

.navbox .navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before { border-left: 0; border-top: 0; border-right: 1px solid #0645ad; border-bottom: 1px solid #0645ad; top: -1px; }

.navbox .h1 { font-weight: bold; margin-top: 0.75em; margin-bottom: 0.25em; line-height: 1.5; }

.navbox .h1::after { content: ''; display: block; margin: auto; width: 5em; height: 0; border-bottom: 2px solid #ccc; }

.navbox .h1:first-child { margin-top: auto; }

.navbox .h2 { font-weight: bold; line-height: 1.5; margin-top: 0.25em; font-size: 12px; }

.navbox .h1 + .h2 { margin-top: 0.5em; }

.navbox .h3 { font-size: 10px; font-weight: bold; line-height: 1.5; }

.navbox h2 + .h3 { margin-top: 0.5em; }

/* -- */ /* -- Infobox & infobox wrapper template style -- */ /*  some rules just kept for "old" template. -- */ .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 #AAA solid; }

.infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

/* styles for latest template */ .infobox { border: 1px solid #aaa; border-radius: 8px; padding: 6px; float: right; font-size: 12px; background-color: #f9f9f9; margin: 0 0 0.5em 1em; }

@media(max-width:450px) { .infobox { float: none; } }

.infobox.float-right { float: right; margin: 0 0 0.5em 1em; }

.infobox.float-left { float: left; margin: 0 1em 0.5em 0; }

.infobox.float-none { float: none; margin: 0 1em 0.5em 0; }

.infobox table { background-color: transparent; width: 100%; border-spacing: 0; }

.infobox table th { white-space: nowrap; padding: 2px; text-align: right; border-right: 1px solid #f9f9f9; width: 5em; vertical-align: middle; }

.infobox table td { padding: 2px; vertical-align: middle; }

.infobox .title { background-color: #E4F0F7; color: #063B5E; font-weight: bold; text-align: center; padding: 2px 0; }

.infobox > .title { font-size: 15px; padding: 6px 3px; line-height: 1.2; }

.infobox > .title > span { display: block; font-size: 12px; color: slategray; font-style: italic; }

.infobox > .title > span::before { content: "(";   font-style: normal; }

.infobox > .title > span::after { content: ")";   font-style: normal; }

.infobox .content-section { padding: 6px 3px; }

.infobox .variant { background-color: #E4F0F7; color: #063B5E; font-weight: bold; text-align: center; font-size: 12px; padding: 4px 0; line-height: 1.2; }

.infobox .images { position: relative; padding: 6px 0; min-height: 40px; text-align: center; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; /* direction=column, for IE11 */ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-box-direction: normal; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

.infobox .images > img { margin-top: 0.5em; }

.infobox ul { list-style: none; margin: auto; text-align: center; }

.infobox .statistics .title { margin-bottom: 6px; } .infobox .statistics table th, .infobox .statistics table td { padding-top: 3px; padding-bottom: 3px; }

.infobox .stat td > small { font-size: 10.5px; font-weight: bold; }

.infobox .stat td > small::before { content: "("; }

.infobox .stat td > small::after { content: ")"; }

.infobox tr.buff th, .infobox tr.buff td { background-color: #E4F0F7; border: 1px solid #f9f9f9; }

.infobox tr.buff th { border-left: 0; }

.infobox tr.buff td { border-right: 0; padding-left: 3px; }

.infobox tr.buff td b { font-weight: bold; white-space: nowrap; }

.infobox .section.ids { margin-top: 3px; border-top: 1px solid #aaa; text-align: center; font-size: 10.5px; background-color: #E4F0F7; color: #063B5E; }

.infobox .section.ids li { padding: 2px 0; border-bottom: 2px solid #f9f9f9; margin: 0; font-weight: bold; }

.infobox .section.ids li:last-child { border-bottom: 0; }

.infobox .variant { margin-bottom: 2px; }

.infobox .drops td:first-child { text-align: left; }

.infobox .drops td:last-child { text-align: right; }

.infobox .drops th:first-child { text-align: left; border-right: 0; }

.infobox .section.drops { margin-top: 6px; margin-bottom: 6px; }

.infobox .drops.money { margin: 2px auto; }

.infobox .drops.money table th { width: 1px; }

.infobox .imageother { text-align: center; padding-top: 8px; border-top: 1px solid #aaa; }

.infobox .drops.items { margin-bottom: 1px; }

.infobox .drops.items li { border-bottom: 1px #AFCFE2 solid; padding: 3px 0; margin-bottom: auto; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

.infobox .drops.items li:first-child { background-color: #E4F0F7; color: #063B5E; padding: 2px 3px 0; } .infobox .drops.items li:last-child { border-bottom: none; }

.infobox .drops.items li > div { display: block; }

.infobox .drops.items li > div:first-child { text-align: left; }

.infobox .drops.items li > div:last-child { text-align: right; }

.infobox .drops.items li.caption { border-top: 2px #AFCFE2 solid; margin-top: 2px; line-height: 1; text-align: center; color: #063B5E; font-size: 10.5px; background: #f0f7fb; padding-top: 5px; display: block; } .infobox .drops.items li.caption.group_end { padding-bottom: 5px; }

.infobox .drops.items li.group_end { border-bottom: 5px #AFCFE2 solid; position: relative; }

.infobox .drops.items li.group_end::after { content: ""; display: block; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background-color: #f9f9f9; }

/* for item infobox */ .item.infobox { width: 21em; }

.item.infobox .images .auto, .infobox.item .images .stack { position: absolute; right: 3px; }

.item.infobox .images .auto { top: 3px; }

.item.infobox .images .stack { bottom: 3px; }

.item.infobox .images ul.inline li { display: inline-block; padding: 0 8px 0 9px; margin: 2px auto; position: relative; vertical-align: middle; }

.item.infobox .images ul.inline li::before { content: ""; display: block; width: 1px; background: #ccc; height: 80%; position: absolute; left: 0; top: 10%; }

.item.infobox .images ul.inline li:first-child::before { display: none; }

.item.infobox .images ul.block li { display: block; padding: 13px 0 0 0; margin: auto; position: relative; }

.item.infobox .images ul.block li::before { content: ""; display: block; height: 1px; background: #ccc; width: 80%; position: absolute; left: 10%; top: 6px; }

.item.infobox .images ul.block li:first-child { padding-top: 0; }

.item.infobox .images ul.block li:first-child::before { display: none; }

.item.infobox ul.toolpower { padding: 6px 0; cursor: pointer; }

.item.infobox ul.toolpower li { display: inline-block; padding: 0 0.5em; }

/* for npc infobox */ .npc.infobox { width: 23em; } .npc.infobox .statistics table th { width: 6em; }

/* infobox wrapper */ .infobox-wrapper.float-right { float: right; margin-left: 0.5em; }

.infobox-wrapper.float-left { float: left; margin-right: 0.5em; }

.infobox-wrapper.float-none { float: none; }

@media(max-width:450px) { .infobox-wrapper.float-right { float: none; margin-left: auto; }

.infobox-wrapper.float-left { float: none; margin-right: auto; } }

.infobox-wrapper.float-right.direction-row .infobox, .infobox-wrapper.float-right.direction-row-reverse .infobox, .infobox-wrapper.float-right.direction-row .infobox.float-left, .infobox-wrapper.float-right.direction-row-reverse .infobox.float-left, .infobox-wrapper.float-right.direction-row .infobox.float-right, .infobox-wrapper.float-right.direction-row-reverse .infobox.float-right, .infobox-wrapper.float-right.direction-row .infobox.float-none, .infobox-wrapper.float-right.direction-row-reverse .infobox.float-none { float: none; margin: 0 0 0.5em 0.5em; }

.infobox-wrapper.float-left.direction-row .infobox, .infobox-wrapper.float-left.direction-row-reverse .infobox, .infobox-wrapper.float-left.direction-row .infobox.float-left, .infobox-wrapper.float-left.direction-row-reverse .infobox.float-left, .infobox-wrapper.float-left.direction-row .infobox.float-none, .infobox-wrapper.float-left.direction-row-reverse .infobox.float-none, .infobox-wrapper.float-left.direction-row .infobox.float-right, .infobox-wrapper.float-left.direction-row-reverse .infobox.float-right, .infobox-wrapper.float-none.direction-row .infobox, .infobox-wrapper.float-none.direction-row-reverse .infobox, .infobox-wrapper.float-none.direction-row .infobox.float-left, .infobox-wrapper.float-none.direction-row-reverse .infobox.float-left, .infobox-wrapper.float-none.direction-row .infobox.float-none, .infobox-wrapper.float-none.direction-row-reverse .infobox.float-none, .infobox-wrapper.float-none.direction-row .infobox.float-right, .infobox-wrapper.float-none.direction-row-reverse .infobox.float-right { float: none; margin: 0 0.5em 0.5em 0; }

.infobox-wrapper.float-left.direction-column .infobox, .infobox-wrapper.float-left.direction-column-reverse .infobox, .infobox-wrapper.float-left.direction-column .infobox.float-left, .infobox-wrapper.float-left.direction-column-reverse .infobox.float-left, .infobox-wrapper.float-left.direction-column .infobox.float-none, .infobox-wrapper.float-left.direction-column-reverse .infobox.float-none, .infobox-wrapper.float-left.direction-column .infobox.float-right, .infobox-wrapper.float-left.direction-column-reverse .infobox.float-right { float: left; margin: 0 0.5em 0.5em 0; }

.infobox-wrapper.float-none.direction-column .infobox, .infobox-wrapper.float-none.direction-column-reverse .infobox, .infobox-wrapper.float-none.direction-column .infobox.float-right, .infobox-wrapper.float-none.direction-column-reverse .infobox.float-right { float: right; margin: 0 0 0.5em 0.5em; }

.infobox-wrapper.float-none.direction-column .infobox.float-left, .infobox-wrapper.float-none.direction-column-reverse .infobox.float-left, .infobox-wrapper.float-none.direction-column .infobox.float-none, .infobox-wrapper.float-none.direction-column-reverse .infobox.float-none { float: left; margin: 0 0.5em 0.5em 0; }

.infobox-wrapper.float-right.direction-column .infobox, .infobox-wrapper.float-right.direction-column-reverse .infobox, .infobox-wrapper.float-right.direction-column .infobox.float-left, .infobox-wrapper.float-right.direction-column-reverse .infobox.float-left, .infobox-wrapper.float-right.direction-column .infobox.float-none, .infobox-wrapper.float-right.direction-column-reverse .infobox.float-none, .infobox-wrapper.float-right.direction-column .infobox.float-right, .infobox-wrapper.float-right.direction-column-reverse .infobox.float-right { float: right; margin: 0 0 0.5em 0.5em; }

/* */ table.diagram{ border-spacing: 0; background: transparent; } table.diagram tr{ height: 1px; text-align: center; } table.diagram td.l{	border-style: none; border-width: 1px; border-color: #a0a0a0; padding: 0.5em; } table.diagram td.n{	padding: 0; } table.diagram td.db{ border-bottom-style: dashed; } table.diagram td.dr{ border-right-style: dashed; } table.diagram td.sb{ border-bottom-style: solid; } table.diagram td.sr{ border-right-style: solid; } table.diagram td.nb{ border-bottom-style: solid; border-bottom-color: transparent; } table.diagram td.nr{ border-right-style: solid; border-right-color: transparent; } /*center dot fix*/ table.diagram td.cf{ position: relative; } table.diagram td.cf:after{ content: ""; display: block; position: absolute; width: 0.9px; height: 1px; border-bottom: 1px solid #a0a0a0; right: 0; bottom: 0; } .diagram-box{ border-width: 2px; border-style: solid; border-color: #AFCFE2; border-radius: 7px; padding: 0.25em 0.5em; } table.diagram td.no-border{ border: none; } table.diagram td.craft-station{ border: none; padding: 2px 0; } .crafting-tree{ overflow: auto; padding: 0.5em 0; } .crafting-tree .diagram{ white-space: nowrap; }

/* */ .hp{ display:inline-block; vertical-align:middle; } .hp > div{ margin: -2px; max-width: 260px; } .hp > div > img, .hp > div > a{	width: 22px; height: 22px; padding: 2px; }

/* */ .infocard{ margin: 0.5em 0; padding: 1em; box-sizing: border-box; border: 1px solid #aaa; border-radius: 6px; width: 100%; min-width: 300px; position: relative; background: #f2f2f2; color: #000; } .infocard > .card{ float: right; margin: -1em 1em 0.75em 0.75em; box-shadow: 0 0 6px rgba(0,0,0,0.05); position: relative; z-index: 5; } .infocard > .card .image{ background: #eee; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .infocard > .card .content{ border: 1px solid #ddd; border-top: 0; margin: 0 1px; background: #fff; border-radius: 0 0 4px 4px; box-sizing: border-box; padding: 0 0.75em 0; } .infocard > .card .content > .intro{ margin-top: 0.75em; } .infocard > .card .content > dl{ margin: 0.75em 0; } .infocard > .card .content dt{ font-weight: bold; margin-top: 0.75em; } .infocard > .card .content dd{ margin: 0; } .infocard > .card .content > .outro{ margin-bottom: 0.75em; } .infocard > .heading{ border-right: 3em solid transparent; padding-left: 1em; margin: 1em -1em; position: relative; line-height: 1; } .infocard > .heading .hgroup{ background: #f2f2f2; padding: 0 1em; display: inline-block; position: relative; z-index:10; color: #999; font-weight: 100; } .infocard > .heading .hgroup > .main{ font-size: 2em; color: #000; } .infocard > .heading .hgroup > .main span{ font-size: 62.5%; color: #999; } .infocard > .heading .icon{ position: absolute; right: -2em; top: 0; height: 100%; z-index: 1; display:-webkit-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; -moz-align-items:center; align-items:center; -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center; } .infocard > .intro{ margin: 1em 0; min-width: 200px; } .infocard > .outro{ margin: 1em 0 0 0; min-width: 250px; } .infocard > .box{ margin: 1em 0 0 0; } .infocard > .intro > .box, .infocard > .outro > .box{ margin: 0 0 1em 0; } .infocard > .intro > .box:last-child, .infocard > .outro > .box:last-child{ margin: 0; } .infocard .box{ border: 1px solid #ddd; background: #fff; border-radius: 4px; padding: 1em; } .infocard .box > .title{ line-height: 1; display: inline-block; margin-left: -1em; padding: 0 1em 0 0.5em; min-width: 150px; border-left: 0.5em solid transparent; } .infocard .box > .title span{ font-weight: lighter; font-size: 1.5em; } .infocard .box > .content{ margin-top: 1em; } .infocard .box > .content:first-child{ margin-top: 0; } .infocard .heading{ margin: 1em 0 0.5em; font-weight: bold; }

/* -- */ /* ======================== Extensions ===============================*/ /* -- This is the style for the tabs of the tabber extension. --- */ body ul.tabbernav li a, body ul.tabbernav li a:link, body ul.tabbernav li a:visited, body ul.tabbernav li a:hover { border-radius: .5em .5em 0 0; }

/* -- Removes redundant Cargo extension "Purge cache" link -- */ div.menu li#ca-cargo-purge { display: none; }

/* -- Maximum image size for NPC images storing in Cargo table -- */ .npcimg img{ height: auto; width: auto; max-height: 100px; max-width: 100px; }

/* ========================================================================== */ /* === New flex mainpage styles ============================================= */ /* ========================================================================== */   min-width: 300px; background: #fcfcfc; }
 * 1) mainpage-global-wrapper {

color: #033251; background: #fff; border: 7px solid #E4F0F7; margin: 1px 3px 5px; border-radius: 5px; box-shadow: 0 0 0 1px #AFCFE2; position: relative; padding: 5px; /* this value shouldn't be greater then "right" and/or "top" of #mf-wikiheader-toggle-link */ }
 * 1) mf-wikiheader {

transition: all 0.3s; }
 * 1) mf-wikiheader * {

position: absolute; z-index: 50; line-height: 1; right: 5px; top: 5px; cursor: pointer; font-size: 10px; display: none; }
 * 1) mf-wikiheader-toggle-link {

content: ""; vertical-align: middle; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); position: relative; left: -3px; border-left: 0; border-top: 0; border-right: 2px solid #0645ad; border-bottom: 2px solid #0645ad; top: -2px; }
 * 1) mf-wikiheader-toggle-link span:first-child::before {

content: ""; vertical-align: middle; display: inline-block; width: 4px; height: 4px; transform: rotate(45deg); position: relative; left: -3px; border-left: 2px solid #0645ad; border-top: 2px solid #0645ad; border-right: 0; border-bottom: 0; top: 1px; }
 * 1) mf-wikiheader-toggle-link span:last-child::before {

display: none; }
 * 1) mf-wikiheader-toggle-link span:first-child {

text-align: center; position: relative; z-index: 10; padding-bottom: 8px; }
 * 1) mf-wikiheader .main-title {

position: relative; z-index: 100; background: #fff; overflow: hidden; padding-top: 5px; padding-bottom: 12px; }
 * 1) mf-wikiheader .related-info {

margin: 0.25em 1em 1em; text-align: center; }
 * 1) mf-wikiheader .related-info .i {

margin-bottom: 0; }
 * 1) mf-wikiheader .related-info .i:first-child {

line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; }
 * 1) latest-version {

vertical-align: middle; }
 * 1) latest-version * {

text-decoration: none; }
 * 1) latest-version a:hover {

padding: 0; background: none; color: #0645ad; }
 * 1) latest-version a.external {

display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; margin: 0; }
 * 1) latest-version ul {

display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; margin: 0.25em 0.5em; }
 * 1) latest-version ul li {

margin: auto auto auto 0.25em; text-align: left; }
 * 1) latest-version ul li > div {

display: block; }
 * 1) latest-version ul li > div > * {

display: inline; }
 * 1) latest-version ul li > div.pic > * {

font-size: 10px; }
 * 1) latest-version ul li > div > span {

font-size: 16px; }
 * 1) latest-version ul li > div > strong {

font-size: 10px; color: #999; }
 * 1) latest-version ul li > div > small {

text-align: center; }
 * 1) latest-version div.pic {

display: inline; }
 * 1) mf-wikiheader.collapsed #mf-wikiheader-toggle-link span:first-child {

display: none; }
 * 1) mf-wikiheader.collapsed #mf-wikiheader-toggle-link span:last-child {

display: none !important; }
 * 1) mf-wikiheader.collapsed .related-info {

display: none; }
 * 1) mf-wikiheader.collapsed .main-title .statistics {

@media(max-width: 600px) { #mf-wikiheader { padding: 15px; } }

.fp-box { border: 1px solid #AFCFE2; -moz-border-radius: 5px; border-radius: 5px; padding: 7px; box-sizing: border-box; margin: 0 2px 4px; }

.fake-bullet { padding: 1px 0; white-space: nowrap; }

.fake-bullet::before { content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%2300528c%22%2F%3E%0A%3C%2Fsvg%3E%0A); padding-right: 5px; }

text-align: center; margin: 0.5em 2px; }
 * 1) mainpage-global-wrapper .footer {

border: 1px solid #AFCFE2; -moz-border-radius: 5px; border-radius: 5px; background: #E4F0F7; padding: 0.5em; max-width: 25em; margin: auto; }
 * 1) mainpage-global-wrapper .footer > div {

/* ========================================================================== */ /* === New flex mainpage styles end ========================================= */ /* ========================================================================== */

/* Geshi syntax highlighting */ .mw-highlight, .mw-highlight pre {background: #282828 !important;}

.kw1 {color: #FFFFFF; font-weight: bold;} .nf {color: aqua;}

/* Operators */ .mw-highlight .p, .mw-highlight .o {color: #fff; font-weight: bold;}

/* Comments */ .mw-highlight .c {color: #8d9e6b; font-weight: bold;}

/* HTML Tags */ .mw-highlight .nt {color: #bfe431;}

/* IDs */ .mw-highlight .nn {color: #a8a8ff;}

/* Classes */ .mw-highlight .nc {color: #7676ff;}

/* Pseudo-classes */ .mw-highlight .nd {color: #cf82ff;}

/* Properties */ .mw-highlight .k, .mw-highlight .kp {color: #fff; font-weight: normal;}

/* Keywords */ .mw-highlight .nb {color: #ff5858;}

/* Text values, strings */ .mw-highlight .kc, .mw-highlight .s1, .mw-highlight .s2, .mw-highlight .sx, .mw-highlight .n {color: #00c6d2;}

/* Numeric values */ .mw-highlight .mi, .mw-highlight .mf {color: #60feff; font-weight: bold;}

/* Units */ .mw-highlight .kt {color: #ff3f85; font-weight: bold;}

/* #Color values */ .mw-highlight .mh {color: #b2d241;}

/* !important */ .mw-highlight .cp {color: #F37F20;}

/* JS generic */ .mw-highlight .nx {color: #a8a8ff;}

/* Highlight fields inside code class (eg. Template:Code) */ .code .mw-highlight{ background: #f8f9fa !important; }

/* curse video */ div.embedvideo.ev_right{ margin-left: 1em; } div.embedvideo.ev_left{ margin-right: 1em; } @media(max-width: 800px){ div.embedvideo.ev_right{ margin-left: auto; }  div.embedvideo.ev_left{ margin-right: auto; }  div.embedvideo.ev_right, div.embedvideo.ev_left{ float: none; text-align: center; }  div.embedvideo.ev_right .embedvideowrap, div.embedvideo.ev_left .embedvideowrap{ margin: auto; } }