User:Vmario97/common.css

/* CSS placed here will be applied to all skins */ /* Note that Common.css does not load in Mobile View. Copy any CSS that you want to also work on mobile into Mobile.css. */ /* Note that all CSS variables are falsely flagged as syntax errors, as CodeEditor has yet to be updated to recognize them */

/* 	CONTENTS 1. Variables 2. Global 3. Main Page 4. Links 5. Fonts 6. Images 7. Tables 8. Backgrounds 9. Borders 10. Boxes 11. Grids 12. Tabs 13. Colors	*/

/*================================================== VARIABLES

=
=====================================*/

/* Do NOT edit these unless you know exactly what you're doing. These properties are used by many different classes */
 * root {

/* Global values for border radius */ --default-border-radius: 20px; --template-outer-radius: 15px; --template-inner-radius: 10px;

/* NIWA link formatting */ --niwa-icon: no-repeat scroll right center transparent; --niwa-padding: 18px;

/* Primary/Secondary colors */ --th-color-primary: var(--th-spring-primary); --th-color-secondary: var(--th-spring-secondary); /* Test colors */ /* Used for debugging. Please do not remove */ --test-red-hs: 0 100%; --test-red-hsl: hsl(0 100% 50%); --test-red-hsla: hsla(0, 100%, 50%, 50); --test-green-hs: 100 100%; --test-green-hsl: hsl(100 100% 50%); --test-green-hsla: hsla(100, 100%, 50%, 50); --test-blue-hs: 250 100%; --test-blue-hsl: hsl(250 100% 50%); --test-blue-hsla: hsla(250, 100%, 50%, 50);

/* N/A color HSL */ --not-applicable: hsl(0 0% 90%);

/* Table cell color HSL */ --cell-background: hsl(0 0% 100%); /* Template Alpha values */ --opacity-full: 100%; --opacity-high: 80%; --opacity-mid: 60%; --opacity-low: 40%; /* Template Lightness values */ --lightness-full: 100%; --lightness-primary: 70%; --lightness-secondary: 85%; --lightness-tertiary: 90%; --lightness-shadow: 40%; --lightness-text: 20%; --lightness-primary-flora: 84%; --lightness-secondary-flora: 93%; --lightness-tertiary-flora: 96%; --lightness-shadow-flora: 50%; --lightness-text-flora: 30%;

/* Default template Hue & Saturation values */ /* DO NOT CHANGE OR REMOVE THIS */ --template-color: 0 0%;

/* Gender Hue & Saturation values */ --male-hs: 214 92%; --female-hs: 306 70%;

/* Item color Hue & Saturation values */ --red-hs: 12 87%; --orange-hs: 32 92%; --yellow-hs: 42 96%; --green-hs: 135 47%; --aqua-hs: 196 50%; --blue-hs: 197 39%; --purple-hs:331 33%; --pink-hs: 11 85%; --beige-hs: 50 54%; --brown-hs: 31 47%; --gray-hs: 0 0%; --black-hs: 0 0%; --white-hs: 0 0%; /* Pocket Camp theme Hue & Saturation values */ --civic-hs: 234 50%;s --cool-hs: 208 96%; --cute-hs: 345 70%; --elegant-hs: 282 63%; --harmonious-hs: 12 74%; --hip-hs: 30 90%; --historical-hs: 341 45%; --modern-hs: 177 58%; --natural-hs: 44 96%; --rustic-hs: 71 98%; --sporty-hs: 161 93%; --generic-hs: 0 0%; --special-hs: 53 100%; /* Template Hue & Saturation values */ --art-hs: 23 61%; --bug-hs: 78 76%; --design-hs: 353 72%; --event-hs: 215 100%; --fashion-hs: 322 49%; --fashion-hs-sub: 320 45%; --film-hs: 318 69%; --fish-hs: 200 100%; --flora-hs: 350 100%; --fossil-hs: 43 74%; --furniture-hs: 106 50%; --gameplay-hs: 163 58%; --gameplay-hs-sub: 160 61%; --geography-hs: 120 50%; --image-hs: 269 74%; --islander-hs: 45 75%; --item-hs: 50 95%; --location-hs: 146 42%; --manga-hs: 318 34%; --merchandise-hs: 193 53%; --minigame-hs: 782 75%; --museum-hs: 60 31%; --music-hs: 0 59%; --nookipedia-hs: 99 45%; --publication-hs: 248 53%; --reaction-hs: 277 57%; --realworld-hs: 60 20%; --seacreature-hs: 215 100%; --special-hs: 81 87%; --species-hs: 276 56%; --ssb-hs: 34 57%; --ssb-hs-sub: 39 77%; --system-hs: 0 0%; --series-hs: 39 100%; --series-hs-sub: 42 73%; --tools-hs: 34 93%; --town-hs: 101 28%; --updates-hs: 144 39%; --user-hs: 50 70%; --villager-hs: 195 52%; --season-hs: 96 70%; --spring-hs: 333 83%; --summer-hs: 191 84%; --autumn-hs: 29 87%; --winter-hs: 241 59%;

/* Item colors HSL */ --color-red: hsl(var--(red-hs) 79%); --color-orange: hsl(var--(orange-hs) 80%); --color-yellow: hsl(var--(yellow-hs) 81%); --color-green: hsl(var--(green-hs) 71%); --color-aqua: hsl(var--(aqua-hs) 80%); --color-blue: hsl(var--(blue-hs) 66%); --color-purple: hsl(var--(purple-hs) 73%); --color-pink: hsl(var--(pink-hs) 87%); --color-beige: hsl(var--(beige-hs) 80%); --color-brown: hsl(var--(brown-hs) 80%); --color-gray: hsl(var--(gray-hs) 80%); --color-black: hsl(var--(black-hs) 70%); --color-white: hsl(var--(white-hs) 100%);

/* Pocket Camp theme colors HSL */ --theme-civic: hsl(var--(civic-hs) 80%); --theme-cool: hsl(var--(cool-hs) 80%); --theme-cute: hsl(var--(cute-hs) 80%); --theme-elegant: hsl(var--(elegant-hs) 80%); --theme-harmonious: hsl(var--(harmonious-hs) 80%); --theme-hip: hsl(var--(hip-hs) 80%); --theme-historical: hsl(var--(historical-hs) 80%); --theme-modern: hsl(var--(modern-hs) 80%); --theme-natural: hsl(var--(natural-hs) 80%); --theme-rustic: hsl(var--(rustic-hs) 80%); --theme-sporty: hsl(var--(sporty-hs) 80%); --theme-generic: hsl(var--(generic-hs) 80%); --theme-special: hsl(var--(special-hs) 80%); /* Skin theme colors */ /* PLEASE LEAVE HIDDEN MOST OF THESE AREN'T READY TO USE YET */ --th-spring-primary: hsl(95 39% 48%); --th-spring-secondary: hsl(95 36% 84%); /*--th-summer-primary: hsl; --th-summer-secondary: hsl; --th-autumn-primary: hsl; --th-autumn-secondary: hsl; --th-winter-primary: hsl; --th-winter-secondary: hsl; --th-dark-primary: hsl; --th-dark-secondary: hsl; */ /* Special theme colors */ /* PLEASE LEAVE HIDDEN NONE OF THESE ARE READY TO USE YET */ /*--th-halloween-primary: hsl; --th-halloween-secondary: hsl; --th-pc-primary: hsl; --th-pc-secondary: hsl; --th-nh-primary: hsl; --th-nh-secondary: hsl; */ }

/*================================================== GLOBAL

=
=====================================*/

/* Causes MediaWiki:Tagline to display */ #siteSub { display:block; font-weight:normal; font-size:small;}

/* Top icons */ .topicon { position: absolute; top: -3.8em; margin-right: -10px; display: block !important; }

/* Prevent list items in columns from breaking into the next column */ .list-columns li { page-break-inside: avoid; }

/* Allow limiting of which header levels are shown in a TOC. , for instance, will limit to showing ==headings== and ===headings=== but no further. */ .toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul { display: none; }

/* Hide content that should only appear on mobile */ .onlymobile { display:none; }

/* No margin */ .no-margin { margin: 0; } .no-margin p { margin: 0; }

/*================================================== MAIN PAGE

=
=====================================*/

/* Prevents some things from displaying on the main page */ body.page-Main_Page #ca-delete, body.page-Main_Page #ca-move, body.page-Main_Page #deleteconfirm, body.page-Main_Page #siteSub, body.page-Main_Page #contentSub, body.page-Main_Page .firstHeading { display: none !important; }

/* Main page header images */ .main-page-header { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/*================================================== LINKS

=
=====================================*/

/* Styling links to ARMS Institute */ background: url("https://dodo.ac/np/images/1/1c/NIWA_Arms.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://armswiki.org"].extiw {

/* Styling links to Bulbapedia */ background: url("https://dodo.ac/np/images/8/8a/NIWA_Pokemon.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://bulbapedia.bulbagarden.net/wiki"].extiw {

/* Styling links to Dragon Quest Wiki*/ background: url("https://dodo.ac/np/images/3/31/NIWA_DQ.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://dragon-quest.org/wiki"].extiw {

/* Styling links to Fire Emblem Wiki */ background: url("https://dodo.ac/np/images/a/a1/NIWA_Fire_Emblem.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://fireemblemwiki.org"].extiw {

/* Styling links to F-Zero Wiki */ background: url("https://dodo.ac/np/images/7/78/NIWA_F-Zero.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://mutecity.org/wiki"].extiw {

/* Styling links to Golden Sun Universe */ background: url("https://dodo.ac/np/images/0/05/NIWA_Golden_Sun.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://goldensunwiki.net/wiki"].extiw {

/* Styling links to Hard Drop Wiki */ background: url("https://dodo.ac/np/images/8/8b/NIWA_Hard_Drop.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://harddrop.com/wiki"].extiw {

/* Styling links to Icaruspedia */ background: url("https://dodo.ac/np/images/4/45/NIWA_Icarus.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.kidicaruswiki.org/"].extiw {

/* Styling links to Inkipedia */ background: url("https://dodo.ac/np/images/8/89/NIWA_Splatoon.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://splatoonwiki.org"].extiw {

/* Styling links to Lylat Wiki */ background: url("https://dodo.ac/np/images/9/96/NIWA_Star_Fox.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://starfoxwiki.info/"].extiw {

/* Styling links to Metroid Wiki */ background: url("https://dodo.ac/np/images/5/50/NIWA_Metroid.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://metroidwiki.org/wiki/"].extiw {

/* Styling links to NintendoWiki */ background: url("https://dodo.ac/np/images/3/3d/NIWA_Nintendo.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="http://niwanetwork.org/wiki"].extiw {

/* Styling links to Pikipedia */ background: url("https://dodo.ac/np/images/0/05/NIWA_Pikmin.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.pikminwiki.com"].extiw {

/* Styling links to Pikmin Fanon */ background: url("https://dodo.ac/np/images/1/16/NIWA_Pikmin_Fanon.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.pikminfanon.com/"].extiw {

/* Styling links to SmashWiki */ background: url("https://dodo.ac/np/images/b/b7/NIWA_Super_Smash_Bros.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.ssbwiki.com"].extiw {

/* Styling links to Starfy Wiki */ background: url("https://dodo.ac/np/images/c/c0/NIWA_Starfy.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://starfywiki.org"].extiw {

/* Styling links to StrategyWiki */ background: url("https://dodo.ac/np/images/f/f2/NIWA_Strategy.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://strategywiki.org"].extiw {

/* Styling links to Super Mario Wiki */ background: url("https://dodo.ac/np/images/0/0e/NIWA_Mario.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.mariowiki.com"].extiw {

/* Styling links to Wars Wiki */ background: url("https://dodo.ac/np/images/a/a1/NIWA_Wars.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://warswiki.org/wiki"].extiw {

/* Styling links to WikiBound */ background: url("https://dodo.ac/np/images/d/dd/NIWA_EarthBound.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://wikibound.info/wiki"].extiw {

/* Styling links to WiKirby */ background: url("https://dodo.ac/np/images/c/c0/NIWA_Kirby.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://wikirby.com/wiki"].extiw {

/* Styling links to Xeno Series Wiki */ background: url("https://dodo.ac/np/images/2/24/NIWA_Xeno_Series_Wiki.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://www.xenoserieswiki.org"].extiw {

/* Styling links to Zelda Wiki */ background: url("https://dodo.ac/np/images/0/0e/NIWA_Zelda.png") var(--niwa-icon); padding-right: var(--niwa-padding); }
 * 1) bodyContent a[href^="https://zelda.gamepedia.com"].extiw {

/*================================================== FONTS

=
=====================================*/

/* Coustard font */ @font-face { font-family: 'Coustard'; font-style: normal; font-weight: 400; src: local('Coustard Regular'), local('Coustard-Regular'), url(https://fonts.gstatic.com/s/coustard/v11/3XFpErgg3YsZ5fqUU-UIt2TMR_Tc.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*================================================== IMAGES

=
=====================================*/

/* Galleries */ .gallery.mw-gallery-traditional { text-align: center; }

/* Thumbnails */ .thumbinner { min-width: 100px; text-align: center; }

/* Try to use nearest neighbor scaling for pixelated images */ .sprite { image-rendering: optimizeSpeed; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }

/* Rounded images */ .roundyimage { border-radius: 5px; }

/*================================================== TABLES

=
=====================================*/

/* Tables */ .table-items { background: #FFDD66; } .table-items tr { border-bottom: 4px solid #FFDD66; } .table-items td { padding: 8px 0; } .table-items th { padding: 8px 0; } .table-fish { background: #4F9FC6; } .table-fish tr { border-bottom: 4px solid #4F9FC6; } .table-fish td { padding: 8px 0; } .table-fish th { padding: 8px 0; } .table-bugs { background: #77AC3F; } .table-bugs tr { border-bottom: 4px solid #77AC3F; } .table-bugs td { padding: 8px 0; } .table-bugs th { padding: 8px 0; } .table-villagers { background: #8CBCD1; } .table-villagers tr { border-bottom: 4px solid #8CBCD1; } .table-villagers td { padding: 8px 0; } .table-villagers th { padding: 8px 0; } .table-music { background: #E08585; } .table-music tr { border-bottom: 4px solid #E08585; } .table-music td { padding: 8px 0; } .table-music th { padding: 8px 0; }

/* Styled tables */ /* Use class="styled" to make a table use this appearance. You can combine this with one of the color classes below to theme the styled table */ table.styled { margin: 10px; background: hsl(var(--template-color, 0 0%) var(--lightness-primary-override, var(--lightness-primary, 70%))); border: 4px solid hsl(var(--template-color) var(--lightness-primary-override, var(--lightness-primary, 70%))); border-radius: 14px; } table.styled td { background: var(--cell-background, hsl(0 100% 100%)); } /* This class will try to fallback to regular color if subcolor is undefined */ table.styled th { background: hsl(var(--template-subcolor, var(--template-color, 0 0%)) var(--lightness-tertiary-override, var(--lightness-tertiary, 90%))); } /* This class will try to fallback to regular color if subcolor is undefined */ table.styled tr:first-child th { font-weight: normal; font-family: Coustard; font-size: 1.0em; height: 40px; padding: 0 5px; text-align: center; background-color: hsl(var(--template-subcolor, var(--template-color, 0 0%)) var(--lightness-secondary-override, var(--lightness-secondary, 85%))); color: hsl(var(--template-color, 0 0%) var(--lightness-text-override, var(--lightness-text, 30%))); } table.styled tr:first-child th:first-child { border-top-left-radius: 9px; border-bottom-left-radius: 0; } table.styled tr:first-child th:last-child { border-top-right-radius: 9px; border-bottom-left-radius: 0; } table.styled tr:last-child > :first-child { border-bottom-left-radius: 9px; } table.styled tr:last-child > :last-child { border-bottom-right-radius: 9px; }

/* Palette table cells */ .palette td { height: 22px; width: 22px; border-radius: 30px !important; }

/* Table column coloring for Guide: Coffee Preferences */ .coffee td:nth-child(1), .coffee td:nth-child(5) { background-color: #dcf6d3; }

/* Column text alignment for villager ideal gift tables */ .idealgifts td { text-align: center; } .idealgifts td:nth-child(1) { text-align: left; }

/*================================================== BACKGROUNDS

=
=====================================*/

/* Grass backgrounds */ .grassSpring { background: url(https://dodo.ac/np/images/c/ce/MainPageGrass-Spring.png) repeat; }

.grassSummer { background: url(https://dodo.ac/np/skins/nookipedia/summer/water-summer.png) repeat; }

.grassFall { background: url(https://dodo.ac/np/images/4/4a/MainPageGrass-Fall.png) repeat; }

.grassWinter { background: url(https://dodo.ac/np/images/5/5e/MainPageGrass-Winter.png) repeat; }

.grassBirthday { background: url(https://dodo.ac/np/images/b/b0/MainPageGrass-Birthday.png) repeat; }

/*================================================== BORDERS

=
=====================================*/

/* Rounded corners */ .noroundy { border-radius: 0 !important; } .roundy { border-radius: var(--default-border-radius); } .roundytl { border-top-left-radius: var(--default-border-radius); } .roundytr { border-top-right-radius: var(--default-border-radius); } .roundybl { border-bottom-left-radius: var(--default-border-radius); } .roundybr { border-bottom-right-radius: var(--default-border-radius); } .roundybottom { border-bottom-left-radius: var(--default-border-radius); border-bottom-right-radius: var(--default-border-radius); } .roundytop { border-top-left-radius: var(--default-border-radius); border-top-right-radius: var(--default-border-radius); } .roundyleft { border-top-left-radius: var(--default-border-radius); border-bottom-left-radius: var(--default-border-radius); } .roundyright { border-bottom-right-radius: var(--default-border-radius); border-top-right-radius: var(--default-border-radius); }

/* Rounded tables */ table.roundlast tr:last-child td:last-child { border-bottom-right-radius: 16px; } table.roundCorners tr:first-child td:first-child { border-top-left-radius: 10px; } table.roundCorners tr:first-child td:last-child { border-top-right-radius: 10px; } table.roundCorners tr:last-child td:first-child { border-bottom-left-radius: 10px; } table.roundCorners tr:last-child td:last-child { border-bottom-right-radius: 10px; }

/*================================================== BOXES

=
=====================================*/

/* Themed divs */ .theme-background { background-color: var(--th-color-secondary, #D1E6C6); } .theme-border { border: 3px solid var(--th-color-primary, #67AD42); } .theme-text { color: var(--th-color-primary, #67AD42); } .theme-hr { background-color: var(--th-color-primary, #67AD42); }

/* Infoboxes */ .infobox { table-layout: fixed; border-radius: var(--template-outer-radius); border-spacing: 2px; margin-left: 10px; margin-bottom: 10px; width: 320px; padding: 5px; float:right; background-color: hsl(var(--template-color) var(--lightness-primary)); }

/*================================================== GRIDS

=
=====================================*/

/* Gridding */ .grid-container-2-col { display: grid; grid-template-columns: auto auto; } .grid-item { border: 0 solid; padding: 1px 0; }

/* Flex boxes */ .flex-container { display: flex; flex-wrap: wrap; } .flex-item { flex: 1; } @media (max-width: 1000px) { .flex-container { display: block; } }

/* PC villager info flex boxes */ .pc-villager-flex-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .pc-villager-flex-item { margin: 0 auto; } .pc-villager-left { flex: 1; } .pc-villager-right { flex: 4; } .pc-villager-data { text-align: left; } @media (max-width: 800px) { .pc-villager-flex-container { display: block; }	.pc-villager-data { text-align: center; } }

/* Villager house flex boxes */ .house-flex-container { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; align-items: center; } .house-flex-item { flex: 1; margin: 0 auto; } .house-img { width: 360px; max-height: 275px; } .house-img img { max-width: 100%; width: 360px; max-height: 275px; height: auto; object-fit: contain; } @media (max-width: 1500px) { .house-flex-container { display: block; }	.house-img { max-height: none; }	.house-img img { width: 360px; max-height: none; height: auto; } }

/* NH items */ .nh_item-flex-container { display: flex; flex-wrap: wrap; } .nh_item-flex-item { flex-grow: 1; } .nh_item-var { flex-grow: 0; width: 36px; } .nh_item-var-img { display: inline-block; vertical-align: top; padding:12px 0 0 0; } .nh_item-var-title { line-height: 1.4em; max-height: 2.8em; overflow: hidden; word-wrap: break-word; } .nh_item-var-data { display: inline-block; font-size: .9em; vertical-align: top; padding: 12px 0 0 0; width: 90px; } .nh_item-lang { overflow: hidden; word-wrap: anywhere; margin: 0 3px; width: 30%; } .nh_item-divider { background-color: transparent; border-bottom: 1px solid #efba00; }

/*================================================== TABS

=
=====================================*/ .tabs-tabbox > .tabs-label { margin: 0 3px 5px 3px; border: none; border-radius: 7px; position: relative; display: inline-block; vertical-align: bottom; font-family: 'Coustard'; color: #555; }

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { background-color: #d5f3ba; }

.tabs-tabbox > .tabs-container { margin-top: -1px; padding: 2px 6px; border-radius: 8px; position: relative; border: none; width: inherit; max-width: inherit; min-width: inherit; z-index: 1; }

/* Tabs */ .tab-article { -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; -khtml-border-radius: 7px 7px 0 0; -icab-border-radius: 7px 7px 0 0; -o-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0; text-align:center; padding: 3px 5px; margin: 0; border: 2px solid #78AB46; background-color: #A5D97B; white-space: nowrap; cursor:pointer; } span.tab-article:hover, div.tab:hover, td.tab:hover { background-color:#B1E48C; } .tabselected { background-color:#9ACE74 !important; border-bottom: 2px solid #9ACE74; } .tabcontainer p { margin:0; }

/* CSS fallback for tabber when JS is unavailable */ .nookipedia-tabber { border: 1px solid #a2a9b1; padding: 1em; } .nookipedia-tab-header { font-size: larger; font-weight: bold; border-bottom: 2px solid #666; margin-bottom: 1em; } .client-js .nookipedia-tabber { display: none }

/*================================================== COLORS

=
=====================================*/

/* Test color */ .color-test { --template-color: var(--test-red-hs); --template-subcolor: var(--test-green-hs); }

/* Gender colors */ .color-male { --template-color: var(--male-hs); } .color-female { --template-color: var(--female-hs); }

/* Item colors */ .color-red { --template-color: var(--red-hs); } .color-orange { --template-color: var(--orange-hs); } .color-yellow { --template-color: var(--yellow-hs); } .color-green { --template-color: var(--green-hs); } .color-aqua { --template-color: var(--aqua-hs); } .color-blue { --template-color: var(--blue-hs); } .color-purple { --template-color: var(--purple-hs); } .color-pink { --template-color: var(--pink-hs); } .color-beige { --template-color: var(--beige-hs); } .color-brown { --template-color: var(--brown-hs); } .color-gray { --template-color: var(--gray-hs); } .color-black { --template-color: var(--black-hs); } .color-white { --template-color: var(--white-hs); }

/* Pocket Camp theme colors */ .color-civic { --template-color: var(--civic-hs); } .color-cool { --template-color: var(--cool-hs); } .color-cute { --template-color: var(--cute-hs); } .color-elegant { --template-color: var(--elegant-hs); } .color-harmonious { --template-color: var(--harmonious-hs); } .color-hip { --template-color: var(--hip-hs); } .color-historical { --template-color: var(--historical-hs); } .color-modern { --template-color: var(--modern-hs); } .color-natural { --template-color: var(--natural-hs); } .color-rustic { --template-color: var(--rustic-hs); } .color-sporty { --template-color: var(--sporty-hs); } .color-generic { --template-color: var(--color-generic); } .color-special { --template-color: var(--color-special); }

/* Template colors */ /* Classes without subcolors fallback to regular Hue and Saturation values when "template-subcolor" is declared */ .color-art { --template-color: var(--art-hs); } .color-bug { --template-color: var(--bug-hs); } .color-design { --template-color: var(--design-hs); } .color-event { --template-color: var(--event-hs); } .color-fashion { --template-color: var(--fashion-hs); --template-subcolor: var(--fashion-hs-sub); } .color-film { --template-color: var(--film-hs); } .color-fish { --template-color: var(--fish-hs); } .color-flora { --template-color: var(--flora-hs); --lightness-primary-override: var(--lightness-primary-flora); --lightness-secondary-override: var(--lightness-secondary-flora); --lightness-tertiary-override: var(--lightness-tertiary-flora); } .color-fossil { --template-color: var(--fossil-hs); } .color-furniture { --template-color: var(--furniture-hs); } .color-gameplay { --template-color: var(--gameplay-hs); --template-subcolor: var(--gameplay-hs-sub); } .color-geography { --template-color: var(--geography-hs); } .color-image { --template-color: var(--gallery-hs); } .color-islander { --template-color: var(--islander-hs); } .color-item { --template-color: var(--item-hs); } .color-location { --template-color: var(--location-hs); } .color-manga { --template-color: var(--manga-hs); } .color-merchandise { --template-color: var(--merchandise-hs); } .color-minigame { --template-color: var(--minigame-hs); } .color-museum { --template-color: var(--museum-hs); } .color-music { --template-color: var(--music-hs); } .color-nookipedia { --template-color: var(--nookipedia-hs); } .color-publication { --template-color: var(--publication-hs); } .color-reaction { --template-color: var(--reaction-hs); } .color-realworld { --template-color: var(--realworld-hs); } .color-seacreature { --template-color: var(--seacreature-hs); } .color-special { --template-color: var(--special-hs); } .color-species { --template-color: var(--species-hs); } .color-ssb { --template-color: var(--ssb-hs); --template-subcolor: var(--ssb-hs-sub); } .color-system { --template-color: var(--system-hs); } .color-series { --template-color: var(--series-hs); --template-subcolor: var(--series-hs-sub); } .color-tools { --template-color: var(--tools-hs); } .color-town { --template-color: var(--town-hs); } .color-updates { --template-color: var(--updates-hs); } .color-user { --template-color: var(--user-hs); } .color-villager { --template-color: var(--villager-hs); } .color-season { --template-color: var(--season-hs); } .color-spring { --template-color: var(--spring-hs); } .color-summer { --template-color: var(--summer-hs); } .color-autumn { --template-color: var(--autumn-hs); } .color-winter { --template-color: var(--winter-hs); }

/* Theme primary/secondary colors */ /* PLEASE LEAVE HIDDEN MOST OF THESE AREN'T READY TO USE YET */ .theme-spring { --th-color-primary: var(--th-spring-primary); --th-color-secondary: var(--th-spring-secondary); } /*.theme-summer { --th-color-primary: var(--th-summer-primary); --th-color-secondary: var(--th-summer-secondary); } .theme-autumn { --th-color-primary: var(--th-autumn-primary); --th-color-secondary: var(--th-autumn-secondary); } .theme-winter { --th-color-primary: var(--th-winter-primary); --th-color-secondary: var(--th-winter-secondary); } .theme-dark { --th-color-primary: var(--th-dark-primary); --th-color-secondary: var(--th-dark-secondary); } .theme-halloween { --th-color-primary: var(--th-halloween-primary); --th-color-secondary: var(--th-halloween-secondary); } .theme-pc { --th-color-primary: var(--th-pc-primary); --th-color-secondary: var(--th-pc-secondary); } .theme-nh { --th-color-primary: var(--th-nh-primary); --th-color-secondary: var(--th-nh-secondary); } */

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */ /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */ /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */

/*================================================== STATIONERY TEST

=
=====================================*/ .stationery { background: url(https://dodo.ac/np/images/5/59/Notebook_paper.png); background-size: 250px 100px; }

/*================================================== STAFF LINKS

=
=====================================*/ /* Patrollers */ .mw-userlink[title="User:Decomposer"], .mw-userlink[title="User:Paviinka"], .mw-userlink[title="User:Ruthless Cutie"], .mw-userlink[title="User:AgentParadox"], .mw-userlink[title="User:BladeofEvilsBane"], .mw-userlink[title="User:HylianAngel"], .mw-userlink[title="User:TurtleCrossing"], .mw-userlink[title="User:PanchamBro"], a.whopatrol, #whopatrollers a { background:url(//dodo.ac/np/images/thumb/1/16/Villager_NH_Character_Icon.png/16px-Villager_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important; }

/* Administrators */ .mw-userlink[title="User:Mario"], .mw-userlink[title="User:ZCJigglypuff"], .mw-userlink[title="User:Dorsal Axe"], .mw-userlink[title="User:Lampshade59276"], a.whoadmin, #whoadmins a { background:url(//dodo.ac/np/images/thumb/9/91/Isabelle_NH_Character_Icon.png/16px-Isabelle_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important; }

/* Bureaucrats */ .mw-userlink[title="User:Drago"], .mw-userlink[title="User:Sunmarsh"], .mw-userlink[title="User:Vmario97"], .mw-userlink[title="User:AlexBot2004"], a.whocrat, #whocrats a { background:url(//dodo.ac/np/images/thumb/6/68/Lottie_PC_icon.png/16px-Lottie_PC_icon.png) center left no-repeat; padding-left: 17px !important; }

/* Directors */ .mw-userlink[title="User:Jake"], .mw-userlink[title="User:SuperHamster"], a.whodirector, #whodirectors a { background:url(//dodo.ac/np/images/thumb/6/68/Tom_Nook_NH_Character_Icon.png/16px-Tom_Nook_NH_Character_Icon.png) center left no-repeat; padding-left: 17px !important; }

/* Bots */ .mw-userlink[title="User:Autotroph"], .mw-userlink[title="User:Bot"], .mw-userlink[title="User:HamsterMech"], .mw-userlink[title="User:Puppet"], .mw-userlink[title="User:Weavile"], .mw-userlink[title="User:Ribbot"], a.whobot, #whobots a { background:url(//dodo.ac/np/images/thumb/8/87/Ribbot_NH_Villager_Icon.png/16px-Ribbot_NH_Villager_Icon.png) center left no-repeat; padding-left: 17px !important; }

/* Discord Staff */ .mw-userlink[title="User:PoizonMushro0m"], .mw-userlink[title="User:WeatherGeek"], .mw-userlink[title="User:Akuhime-sama"], .mw-userlink[title="User:Senor Mexicano"], a.whobot, #whobots a { background:url(//dodo.ac/np/images/thumb/1/18/Discord_icon.png/16px-Discord_icon.png) center left no-repeat; padding-left: 17px !important; }

/* Former Staff */ .mw-userlink[title="User:AnimalCrossingFan12"], .mw-userlink[title="User:DataWizard"], .mw-userlink[title="User:AgentCarmen12"], .mw-userlink[title="User:Anteater99"], .mw-userlink[title="User:SnorlaxMonster"], .mw-userlink[title="User:Crazyguy20076"], .mw-userlink[title="User:RAP"], .mw-userlink[title="User:Zharkaer"], .mw-userlink[title="User:Pakkun"], .mw-userlink[title="User:SpideyCanThrash"], .mw-userlink[title="User:Grekox"], .mw-userlink[title="User:Imjon"], .mw-userlink[title="User:Miku51"], .mw-userlink[title="User:Heidy Isabel"], .mw-userlink[title="User:Trainiax"], .mw-userlink[title="User:Username1770"], .mw-userlink[title="User:Lotter"], .mw-userlink[title="User:Ocre"], .mw-userlink[title="User:Vulpes"], .mw-userlink[title="User:Dabtowner"], .mw-userlink[title="User:mlnintendo97"], .mw-userlink[title="User:Minifig-me"], .mw-userlink[title="User:C-Star55"], .mw-userlink[title="User:GoalieGuy6"], .mw-userlink[title="User:Sailor sofia"], .mw-userlink[title="User:MerrytonRyan"], .mw-userlink[title="User:Dragonfree97"], .mw-userlink[title="User:Leem01"], .mw-userlink[title="User:SuperAlpaca"], .mw-userlink[title="User:Sky"], .mw-userlink[title="User:LoneShadowStar"], a.whoformer, #whoformers a { background:url(//dodo.ac/np/images/thumb/8/8c/Tortimer_aF_Character_Icon.png/16px-Tortimer_aF_Character_Icon.png) center left no-repeat; padding-left: 17px !important; }

/*================================================== MISC

=
=====================================*/ .main-flex-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .main-flex-item { flex: 1; margin: 0 auto; } .main-img { width: 360px; max-height: 275px; } .main-img img { max-width: 100%; width: 360px; max-height: 275px; height: auto; object-fit: contain; } @media (max-width: 1500px) { .main-flex-container { display: block; }	.main-img { max-height: none; }	.main-img img { width: 360px; max-height: none; height: auto; } }