MediaWiki:Common.css
From HorizonXI Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Start of Table Class Categorisation */
/* || Various Table Stylings */
/* || Horizon Table */
.horizon-table,
.ffxi-table {
margin: 1em 0;
background-color: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
color: black;
width: 100%;
}
.horizon-table th,
.ffxi-table th {
border: 1px #aaa solid;
padding: 0.3em 0.4em;
font-weight: bold;
text-align: center;
}
.horizon-table tr,
.ffxi-table tr {
border: 1px #aaa solid;
padding: 0.3em 0.4em;
}
.horizon-table td,
.ffxi-table td {
border: 1px #aaa solid;
padding: 0.3em 0.4em;
}
.horizon-table caption,
.ffxi-table caption {
font-weight: bold;
text-align: center;
}
/* || Table caption helper functions */
/* set class for caption on top as a big title */
.caption-title caption {
caption-side: top;
font-weight: bold;
padding: 2px;
}
/* set class for caption at bottom as a footnote */
.caption-footnote caption {
caption-side: bottom;
font-weight: normal;
padding: 2px 1em;
text-align: left;
border: none !important;
background-color: transparent !important;
color: black !important;
}
/* || Various Table Widths */
.table-xxl {
max-width: none !important; /* as far as available */
}
.table-xl {
max-width: 1198px !important; /* available space of max width of the content container minus paddings */
}
.table-lg {
max-width: 1018px !important; /* available space after next breakpoint */
}
.table-md { /* THIS IS THE DEFAULT SIZE */
max-width: 775px !important; /* available space after next breakpoint */
}
.table-sm {
max-width: 576px !important;
}
.table-xs {
max-width: 400px !important;
}
/* || Global Template Format */
/* || Template:Quest Styling and Size */
/* || Horizon Infobox */
.horizon-infobox {
margin: 1em 0;
border: 1px #aaa solid;
border-collapse: collapse;
color: black;
max-width: 400px;
width: 100%; /* try to fill the 400px unless the screen is too small */
}
.horizon-infobox th {
border: 1px #aaa solid;
padding: 0.3em 0.4em;
font-weight: bold;
min-width: 100px; /* width controlled by infobox-xx-yy class but at least 100px to remain readable */
text-align: right;
vertical-align: top;
}
.horizon-infobox td {
border: 1px #aaa solid;
padding: 0.3em 0.4em;
vertical-align:top;
}
.infobox-50-50 th {
width: 50%; /* 50% of the .horizon-infobox size*/
}
.infobox-34-66 th {
width: 34%; /* 34% of the .horizon-infobox size*/
}
th.infobox-quest-header,
tr.infobox-quest-header {
width:150px; text-align:right; vertical-align:top;
}
td.infobox-quest-field,
tr.infobox-quest-field {
vertical-align:top;
}
tr.infobox-quest-cutscenes-header {
width:150px;
}
/* || Various Table Colors */
/* || Mission Table Colors */
.infobox-mission th {
background-color: hsl(319, 32%, 58%); /*#b773a2;*/
}
.infobox-mission td {
background-color: hsl(317, 58%, 95%); /*#faecf6;*/
}
tr.infobox-mission-alt th {
background-color: hsl(314, 41%, 90%); /*#f0dbeb;*/
}
/* || Bastok Missions */
.bastokmissions th {
/*background-color: hsl(236, 55%, 38%);*/ /*#2b3296;*/
background-color: hsl(230, 50%, 40%);
color: white;
}
.bastokmissions td {
/*background-color: hsl(236, 60%, 95%);*/ /*#ebecfa;*/
background-color: hsl(230, 95%, 95%);
color: black;
}
tr.bastokmissions-alt th {
/*background-color: hsl(236, 56%, 70%);*/ /*#888edd;*/
background-color: hsl(230, 50%, 80%);
color: black;
}
/* || San d'Oria Missions */
.sandoriamissions th {
/*background-color: hsl(350, 99%, 42%);*/ /*#d60124;*/
background-color: hsl(350, 50%, 40%);
color: white;
}
.sandoriamissions td {
/*background-color: hsl(348, 100%, 95%);*/ /*#ffe5ea;*/
background-color: hsl(350, 95%, 95%);
color: black;
}
tr.sandoriamissions-alt th {
/*background-color: hsl(350, 99%, 70%);*/ /*#fe6780;*/
background-color: hsl(350, 50%, 80%);
color: black;
}
/* || Windurst Missions */
.windurstmissions th {
/*background-color: hsl(102, 95%, 25%);/* /*#287e03;*/
background-color: hsl(110, 95%, 25%);
color: white;
}
.windurstmissions td {
/*background-color: hsl(103, 92%, 95%);*/ /*#edfee6;*/
background-color: hsl(110, 95%, 95%);
color: black;
}
tr.windurstmissions-alt th {
/*background-color: hsl(102, 95%, 60%);*/ /*#72fa38;*/
background-color: hsl(110, 50%, 80%);
color: black;
}
/* || Rise of the Zilart Missions */
.rotzmissions th {
background-color: hsl(30, 48%, 59%); /*#c99866;*/
}
.rotzmissions td {
background-color: hsl(30, 46%, 95%); /*#f8f2ec;*/
}
tr.rotzmissions-alt th {
background-color: hsl(30, 48%, 78%); /*#e2c7ac;*/
}
/* || Chains of Promathia Missions */
.copmissions th {
background-color: hsl(206, 32%, 50%); /*#5785a8;*/
}
/*.copmissionschapter th {*/
/* background-color: #9ab6cb !important;*/
/*}*/
.copmissions td {
/*background-color: hsl(203, 31%, 95%);*/ /*#eef3f6;*/
background-color: hsl(206, 32%, 95%);
}
tr.copmissions-alt th {
/*background-color: hsl(206, 32%, 70%);*/ /*#9ab6cb;*/
background-color: hsl(206, 32%, 70%);
}
/* || Quest Table Colors */
/* || All Quests */
.quest-table th,
.infobox-quest th,
th.infobox-quest-header,
tr.infobox-quest-header,
tr.infobox-quest-cutscenes-header {
background-color: #867ab8;
}
.quest-table tr,
.infobox-quest td,
td.infobox-quest-field,
tr.infobox-quest-field {
background-color: #f0eef6;
}
/* || NPC Table Colors */
/* || ALL NPCs */
.npc-table th {
background-color: #9acbcb;
}
.npc-table tr {
background-color: #eef6f6;
}
/* || Jobs Abilities Spells */
.jobs-table th {
background-color: #afc7cf;
}
.jobs-table td {
background-color: #eff4f5;
}
/* || Gear */
.gear-table th {
background-color: #6bd0f2;
}
.gear-table td {
background-color: #e3f6fd;
}
/* || Monster Colors */
/* || Notorious Monsters */
.nms,
.nms tr {
background-color: #fee7e7 !important;
border:1px #9f6060 solid !important;
}
.nms th {
background-color: #f88787;
border:1px #9f6060 solid !important;
}
/* || Page Header Colors */
.area-header th,
.bestiary-header th,
.ffxi-table th,
.ffxi-header,
.ffxi-footer {
background-color:#afc7cf;
}
.area-header tr,
.bestiary-header tr,
.ffxi-table tr {
background-color:#eff4f5;
}
/* || Miscellaneous Colors */
.editing-table {
border-color:#678198;
}
.editing-table th {
background-color:#b3c0cb;
}
.editing-table tr {
background-color:#f0f2f5;
}
/* || Event Banner Classes */
/* For use on the https://horizonffxi.wiki/MediaWiki:Sitenotice page */
.event-banner-link {
display: block;
text-decoration: none;
color: inherit;
}
/* the picture */
.event-banner-container {
background-image: url(https://horizonffxi.wiki/w/images/8/82/HorizonXI_Sun_breeze_2023.png);
min-height: 300px; /* Set the minimum desired height for your image */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
width: 100%;
}
/* the overlay */
.event-banner-overlay {
position: absolute;
top: 5px; /* Adjust the vertical position as needed to align the overlay to the top */
left: 5px; /* Adjust the horizontal position as needed */
right: 35%; /* Adjust the horizontal position as needed */
background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity here (0.3 means 30% transparent) */
padding: 5px 20px; /* one number for same padding all sizes. two numbers for "y x". four numbers for "top right bottom left". see https://www.w3schools.com/css/css_padding.asp */
text-align: center;
color: #fff; /* Text color for the overlay */
}
/* the text */
.event-banner-text {
font-size: 2.5rem;
font-weight: bold;
font-family: cursive;
margin-top: 20px;
}
/* the underline comes from mediawiki styling h2. this container controls the size and position of the h2 inside */
.event-banner-underline-container {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
@media (max-width: 768px) {
/* Adjust the styles for screens with a maximum width of 768px */
.event-banner-overlay {
left: 10%;
right: 10%;
}
}
@media (max-width: 576px) {
/* Adjust the styles for screens with a maximum width of 768px */
.event-banner-overlay {
top: 0;
left: 0;
right: 0;
}
}
.starlight {display: none;}
.sunbreeze {display: none;}
/* End of site notice banner */
/* || Out of era content (OOE) - All dates are approximate */
/* || Treaures of Aht Urghan */
.toau {display: none !important;} /* Apr 2006 */
.besieged {display: none !important;} /* Apr 2006 */
.isnm {display: none !important;} /* Imperial Standing Notorious Monsters - Jul 2006 */
.raising {display: none !important;} /* Chocobo Raising - Aug 2006 */
.salvage {display: none !important;} /* Salvage - Dec 2006 */
.hotandcold {display: none !important;} /* Chocobo Hot and Cold Game - Dec 2006 */
.nyzul {display: none !important;} /* Nyzul Isle Investigation - Mar 2007 */
.racing {display: none !important;} /* Chocobo Racing - Mar 2007 */
.pankration {display: none !important;} /* Pankration - Sept 2007 */
.znm {display: none !important;} /* Zeni Notorious Monsters - Jun 2008 */
.assault {display: none !important;} /* Assault - Apr 2006 */
.assault-psc {display: none !important;}
.assault-pfc {display: none !important;}
.assault-sp {display: none !important;}
.assault-lc {display: none !important;}
.assault-c {display: none !important;}
.assault-s {display: none !important;}
.assault-sm {display: none !important;}
.assault-cs {display: none !important;} /* Chief Sergeant Rank - Mar 2007 */
.assault-sl {display: none !important;} /* Second Lieutenant Rank - Jun 2007 */
.assault-fl {display: none !important;} /* First Lieutenant Rank - Aug 2007 */
.einherjar {display: none !important;} /* Einherjar - Jun 2007 */
.einherjar-wingi {display: none !important;}
.einherjar-wingii {display: none !important;}
.einherjar-wingiii {display: none !important;}
.einherjar-odin {display: none !important;}
/* || Wings of the Goddess */
.wotg {display: none !important;}
.campaign {display: none !important;} /* Campaign - Nov 2007 */
.ops, /* Campaign Ops - Nov 2007 */
.c-ops {display: none !important;}
.scnm {display: none !important;} /* Sealed Container Notorious Monsters - Sept 2008 */
.annm {display: none !important;} /* Allied Notes Notorious Monsters - Apr 2009 */
/* || SoA */
.soa {display: none !important;}
.moggarden {display: none !important;} /* Mog Garden - Jul 2013 */
.rearing, /* Monster Rearing - July 2014 */
.monsterrearing {display: none !important;}
/* || Addon-on Scenarios */
.acrystallineprophecy {display: none !important;} /* March 2009 */
.acp {display: none;}
.amooglekupodetat,
.amkd {display: none !important;} /* Approx June 2009 */
.ashantottoascension,
.asa {display: none !important;} /* Approx Nov 2009 */
.rhapsodiesofvanadiel,
.rov {display: none !important;} /* May 2015 */
.thevoraciousresurgence,
.tvr {display: none !important;} /* August 2020 */
/* || No associated expansion */
.casket, /* treasure caskets - Dec 2008 */
.treasurecasket {display: none !important;}
.mmm {display: none !important;} /* Moblin Maze Mongers - Dec 2008 */
.augment {display: none !important;} /* Augments - Apr 2009 */
.tenshodocoffer {display: none !important;} /* Tenshodo Coffers - Apr 2009 */
.fov, /* fields of valor - Nov 2009 */
.fieldsofvalor {display: none !important;}
.synergy {display: none !important;} /* Synergy - Nov 2009 */
.dominion {display: none !important;} /* Dominion Ops - Dec 2010 */
.gov, /* grounds of valor - May 2011 */
.groundsofvalor {display: none !important;}
.gobbiemysterybox {display: none !important;} /* gobbie mystery box - end of 2011 */
.escutcheons {display: none !important;} /* escutcheons - 2017 ? */
.abyssea {display: none !important;}
.vnm {display: none !important;}
.voidwatch {display: none !important;}
.walkofechoes {display: none !important;}
.unity {display: none !important;} /* unity - ?? */
.portermoogle {display: none !important;} /* porter moogles to store gear - ?? */
.magiantrials {display: none !important;} /* trials of the magians - ?? */
.reforgedrelic {display: none !important;} /* reforged relic armor - ?? */
.reforgedartifact {display: none !important;} /* reforged artifact armor - ?? */
.reforgedempyrean {display: none !important;} /* reforged empyrean armor - ?? */
.recordsofeminence, /* records/sparks of eminence - Dec 2013 */
.roe,
.sparksofeminence,
.soe {display: none !important;}
/* || In-era Missing Content */
.burrowbore {display: none !important;}
.egghelm {display: none !important;}
.fellow {display: none!important;}
/* End of out of era content */
/* Main CSS class of the tooltip */
.main-tooltip {
border: 1px solid #cac4b5;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
margin-bottom: 5px;
padding: 2px 5px;
background-color: #fbeecb;
}
/* Adds padding to the wrapper to make space for a shadow */
#tooltip-wrapper {
padding: 3px 7px 2px 3px;
}
/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
.has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents {
display: none;
}
.tooltips-init-complete {
cursor: help;
}
/* Align images with text the same way it's in page content */
/* Was probably better to play with the classes but that would cause ton of side effects */
.main-tooltip img {
vertical-align: middle;
}
/* General purpose "pretty (data) tables" */
table.job-header th,
table.job-header td,
table.job-header tr {
width: 100%;
height: 40;
background-color: #eddce7;
vertical-align: top;
border: 2px solid #000000;
}
table.datatable {
background-color: transparent;
}
table.datatable th,
table.datatable td {
padding: 4px;
}
table.datatable th {
text-align: left;
background-color: #d87093;
}
table.datatable tr {
background-color: #ccccff;
}
table.datatable tr:hover {
background-color: #e3e6ff;
}
li #credits {
white-space: normal;
}
.headbare h1,
.headbare h2 {
border-bottom: none;
}
.mw-plusminus-pos {
color: #006500;
}
.mw-plusminus-neg {
color: #8B0000;
}
/* Lists with less indentation */
.compact-list dd {
margin-left: 1ex;
}
.flush-list dd {
margin-left: 0;
}
/* Various common tables */
table.mission-table,
table.monster-table,
table.poi-table,
table.nm-table {
width: 100%;
}
table.helm-table,
table.crafting-table-small {
max-width: 590px;
}
table.crafthobbies,
table.crafthobbies-clamming,
table.crafthobbies-digging,
table.crafthobbies-excavation,
table.crafthobbies-fishing,
table.crafthobbies-gardening,
table.crafthobbies-harvesting,
table.crafthobbies-logging,
table.crafthobbies-mining {
max-width: 1180px;
}
table.mission-table,
table.monster-table,
table.nm-table,
table.helm-table,
table.crafting-table {
border-spacing: 2px;
}
table.job-table {
border-spacing: 0;
border-collapse: collapse;
}
table.crafthobbies,
table.crafthobbies-clamming,
table.crafthobbies-digging,
table.crafthobbies-excavation,
table.crafthobbies-fishing,
table.crafthobbies-gardening,
table.crafthobbies-harvesting,
table.crafthobbies-logging,
table.crafthobbies-mining {
border-spacing: 1px;
}
table.job-table td,
table.job-table th {
border: 2px ridge;
}
table.nm-table td,
table.nm-table th,
table.job-table th {
padding: 5px;
}
table.skill-table td,
table.job-table td,
table.spell-table td {
padding: 5px;
}
table.helm-table td,
table.helm-table th,
table.crafting-table td,
table.crafting-table th,
table.crafthobbies td,
table.crafthobbies th,
table.crafthobbies-clamming td,
table.crafthobbies-clamming th,
table.crafthobbies-digging td,
table.crafthobbies-digging th,
table.crafthobbies-excavation td,
table.crafthobbies-excavation th,
table.crafthobbies-fishing td,
table.crafthobbies-fishing th,
table.crafthobbies-gardening td,
table.crafthobbies-gardening th,
table.crafthobbies-harvesting td,
table.crafthobbies-harvesting th,
table.crafthobbies-logging td,
table.crafthobbies-logging th,
table.crafthobbies-mining td,
table.crafthobbies-mining th {
padding: 5px;
}
table.helm-table td {
padding-left: 2ex;
}
table.job-table td,
table.job-table th {
padding-left: 1ex;
}
table.job-table td {
vertical-align: top;
}
table.crafting-table tr,
table.crafting-table td {
text-align: center;
}
table.mission-table td,
table.mission-table th,
table.poi-table td,
table.poi-table th,
table.monster-table td,
table.monster-table th,
table.monster-table tr.ffxi-footer td,
table.monster-table td.ffxi-footer {
text-align: center;
padding: 2px;
}
table.nm-table td {
text-align: left;
}
table.crafting-table tr,
table.crafting-table td {
text-align: center;
}
/* HELM and crafting table background colors */
.crafthobbies,
.crafthobbies th {
background-color: #6699CC;
}
.crafthobbies tr {
background-color: #e9f2fb;
}
/* Clamming table background colours */
.clamming-table,
.clamming-table th,
.crafthobbies-clamming,
.crafthobbies-clamming th {
background-color: #7fc5c2;
}
.clamming-table tr,
.crafthobbies-clamming tr {
background-color: #d7e6e5;
}
/* Digging table */
.digging-table,
.digging-table th,
.crafthobbies-digging,
.crafthobbies-digging th {
background-color: #8FBC8F;
border: 1px solid #609f60 !important;
}
.digging-table tr td,
.crafthobbies-digging tr td {
background-color: #e6f0e6;
border: 1px solid #609f60 !important;
}
/* Excavating table background colours */
.excavating-table,
.excavating-table th,
.crafthobbies-excavation,
.crafthobbies-excavation th {
background-color: #bcae5d;
}
.excavating-table tr,
.crafthobbies-excavation tr {
background-color: #edeadc;
}
/* Fishing table background colours */
.fishing-table,
.fishing-table th,
.crafthobbies-fishing,
.crafthobbies-fishing th {
background-color: #53A0DF;
}
.fishing-table tr,
.crafthobbies-fishing tr {
background-color: #f2f3ff;
}
/* Gardening table background colours */
.gardening-table,
.gardening-table th,
.crafthobbies-gardening,
.crafthobbies-gardening th {
background-color: #836843;
}
.gardening-table tr,
.crafthobbies-gardening tr {
background-color: #d9cfc2;
}
/* Harvesting table background colours */
.harvesting-table,
.crafthobbies-harvesting,
.harvesting-table th,
.crafthobbies-harvesting th {
background-color: #6fa112;
border: 1px #838c73 solid !important;
}
.harvesting-table tr td,
.crafthobbies-harvesting tr td {
background-color: #f0fbda;
border: 1px #838c73 solid !important;
}
/* Logging table background colours */
.logging-table,
.logging-table th,
.crafthobbies-logging,
.crafthobbies-logging th {
background-color: #857e6b;
}
.logging-table tr,
.crafthobbies-logging tr {
background-color: #e2e0da;
}
/* Mining table background colours */
.mining-table,
.mining-table th,
.crafthobbies-mining,
.crafthobbies-mining th {
background-color: #b7b7b7;
}
.mining-table tr,
.crafthobbies-mining tr {
background-color: #ebebeb;
}
/* Crafting table background colours */
table.crafting-table-color,
table.crafting-table-color th {
background-color: #6699CC;
}
table.crafting-table-color tr {
background-color: #ffffff;
}
/* Various table background colors */
table.mission-table tr,
table.monster-table tr,
table tr.bg-blue,
.bg-blue tr,
.bg-blue {
background-color: #eddce7;
}
table.bg-blue-alt tr,
table tr.bg-blue-alt,
.bg-blue-alt {
background-color: #d5d9ff;
}
table.monster-table th,
table.poi-table th,
table.itm-table th,
table.gtm-table th,
table.chocodig-table th,
table tr.bg-header,
.bg-header tr,
.bg-header {
background-color: #bc73a1;
}
table.job-table tr,
table tr.bg-bright-blue,
.bg-bright-blue tr,
.bg-bright-blue {
background-color: #eddce7;
}
table tr.bg-mauve,
.bg-mauve tr,
.bg-mauve {
background-color: #fffcf5;
}
table tr.bg-seablue,
.bg-seablue tr,
.bg-seablue {
background-color: #66b2ff;
}
table.chocodig-table tr,
table tr.bg-cream,
.bg-cream tr,
.bg-cream {
background-color: #fffacd;
}
table.spell-table tr,
table tr.bg-faint-blue,
.bg-faint-blue tr,
.bg-faint-blue {
background-color: #eddce7;
}
/* Job Page AF Tables */
table.jobpageAF-table tr {
background-color: #ffffff;
}
table.jobpageAF-table th {
background-color: #bc73a1;
}
table.nm-table th,
.bg-red th,
.bg-nm th,
.bg-nm .ffxi-header,
.bg-nm .ffxi-footer {
background-color: #f76b6b;
}
table.nm-table tr,
table tr.bg-red,
table tr.bg-nm,
.bg-red tr,
.bg-nm tr,
.bg-red,
.bg-nm {
background-color: #ffd9d9;
}
table.artifact-table tr,
table tr.bg-faint-red,
.bg-faint-red tr,
.bg-faint-red {
background-color: #ffeaf0;
}
table.skill-table td,
table tr.bg-beige,
.bg-beige tr,
.bg-beige {
background-color: #eddce7;
}
.bg-beige tr,
.bg-beige {
background-color: #4f0d44; color:white;
}
.bg-header-blue tr,
.bg-header-blue {
background-color: #3d0b34; color:white;
}
.theme-fandomdesktop-light table.job-table th,
.theme-fandomdesktop-light table tr.bg-header-blue,
.bg-header-blue tr,
.bg-header-blue {
background-color: #bc73a1;
}
table.spell-table th,
table tr.bg-header-purple,
.bg-header-purple tr,
.bg-header-purple {
background-color: #bc73a1;
}
.bg-header-purple tr,
.bg-header-purple {
background-color: #3d0b34; color:white;
}
table.skill-table th,
table tr.bg-header-beige,
.bg-header-beige tr,
.bg-header-beige {
background-color: #bc73a1;
}
.bg-header-beige tr,
.bg-header-beige {
background-color: #3d0b34; color:white;
}
table.artifact-table th,
table tr.bg-header-red,
.bg-header-red tr,
.bg-header-red {
background-color: #e87093;
}
table.gtm-table tr,
table.spawn-table tr,
table.poi-table tr,
table tr.bg-green,
.bg-green tr,
.bg-green {
background-color: #c8e6c9;
}
table.spawn-table th,
table tr.bg-dark-green,
.bg-dark-green tr,
.bg-dark-green {
background-color: #6bf799;
}
table tr.bg-purple,
.bg-purple tr,
.bg-purple {
background-color: #e1bee7;
}
table.itm-table tr,
table tr.bg-yellow,
.bg-yellow tr,
.bg-yellow {
background-color: #f0f4c3;
}
table.mission-table th,
table th.pst-green,
.pst-green th,
.pst-green {
background-color: #ceffc7;
}
.wide-table {
width: 100%;
}
/* Item page sections and headers */
.item-header {
margin-top: 0;
}
.showhide {
float: right;
cursor: pointer;
font-size: 67%;
font-weight: normal;
}
.item-header .showhide::before {
content: '[show/hide]'
}
.item-section .item-header,
.item-subsection .item-header {
margin-right: 1ex;
}
.item-section {
vertical-align: top;
display: inline-block;
width: 100%;
}
.item-subsection {
vertical-align: top;
display: inline-block;
width: 50%;
}
/* Fix overflow issues on small screens */
@media screen and (max-width: 1024px) {
.item-subsection {
width: 100%;
}
}
/* Fix main page column font size */
.page-Main_Page div#column-one {
font-size: 127%;
}
/* Box with image border */
.ffxi-border-box {
border: 8px solid transparent;
border-image: url(https://vignette.wikia.nocookie.net/ffxi/images/f/f8/FFXIbox.png) 8 repeat;
}
/* Links that won't override text color */
.no-color-links a,
.no-color-links a:visited {
color: inherit;
}
/* New-style .js Tooltip appearance */
.main-tooltip {
border: 1px solid #A3B1BF;
-moz-border-radius: 10px;
padding: 1em;
background-color: rgba(163, 177, 191, .8);
/* enforce full width for lazy-loaded image tooltips */
width: max-content!important;
}
/* Hidden categories not hiding */
.mw-hidden-cats-ns-shown {display: none}
/*******************
* LUA Navboxes (to replace existing broken Navbox template)
*******************/
.navbox {
width: 100%;
background: white;
color: black;
margin: 1em auto;
font-size: 84%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 1px solid #AAA;
}
/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
margin-top: -11px;
}
.navbox .navbox-title {
background: #CCF;
color: black;
font-weight: bold;
}
.navbox .navbox-vde {
float:left;
width:65px;
}
.navbox .navbox-title-padright {
padding-right: 65px;
}
.navbox .navbox-title-padleft {
padding-left: 65px;
}
.navbox .navbox-subgroup {
border-spacing: 0;
width: 100%;
}
.navbox .navbox-gutter {
height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
background: white;
}
.navbox .navbox-section-row > td {
padding: 0;
height: 100%;
}
.navbox .navbox-section {
width: 100%;
border-spacing: 0;
}
.navbox .navbox-above,
.navbox .navbox-below {
background: #DDF;
text-align: center;
}
.navbox .navbox-image {
background: white;
text-align: center;
}
.navbox .navbox-group,
.navbox .navbox-header {
background: #DDF;
color: black;
font-weight: bold;
height: 100%;
padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
padding-left: 65px;
}
.navbox .navbox-group {
text-align: right;
padding-right: 1em;
min-width: 150px;
}
.navbox .navbox-group,
.navbox .navbox-image-left {
border-right: 2px solid white;
}
.navbox-image-right {
border-left: 2px solid white;
}
.navbox .navbox-list {
background: white;
color: black;
width: 100%;
height: 100%;
padding: 0;
}
.navbox .alt > .navbox-list {
background: #F7F7F7;
}
.navbox .navbox-list div {
padding: 0px 4px;
}
.navbox .navbox-list.no-group {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
}
.navbox .mw-collapsible-toggle {
width: 65px;
}
/* hlist */
.hlist ul {
margin: 0;
list-style: none;
}
.hlist li, .hlist ul ul {
display: inline;
}
.hlist li a {
white-space: nowrap;
}
.hlist ul ul:before {
content: "("
}
.hlist ul ul:after {
content: ")"
}
.hlist li:after {
content: " • ";
}
.hlist ul ul li:after {
content: "/";
}
.hlist li:last-child:after, .hlist ul ul li:last-child:after {
content: none;
}
/* Item page sections and headers */
.item-section,
.item-subsection {
width: 100%;
}
.showhide {
font-size: 13px;
}
.item-header .showhide::before {
content: 'show/hide';
}
.compact-list dl,
.compact-list ul {
margin: 0;
}
.flush-list dl,
.flush-list ul {
margin: 0;
}
.digging-table dl {
margin: 0;
}
/* Infobox template style */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
margin-bottom: 0.5em;
/* margin-left: 0.5em; */
padding: 0.2em;
float: right;
clear: right;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
@media print {
.infobox.sisterproject {
display: none;
}
}
/* Styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
border-right: 1px solid #aaa;
}
/* Standard Navigations Documentation at [[Wikipedia:NavFrame]]. */
div.Boxmerge,
div.NavFrame {
margin: 0px;
margin-left: 0em;
padding: 4px;
border: 0px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.Boxmerge div.NavFrame {
border-style: none;
border-style: hidden;
}
div.NavFrame + div.NavFrame {
border-top-style: none;
border-top-style: hidden;
}
div.NavPic {
background-color: #fff;
margin: 0px;
padding: 2px;
float: left;
}
div.NavFrame div.NavHead {
height: 1em;
font-weight: bold;
background-color: #ccf;
position:relative;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
div.NavEnd {
margin: 0px;
padding: 0px;
line-height: 1px;
clear: both;
}
a.NavToggle {
position:absolute;
top:0px;
right:3px;
font-weight:normal;
font-size:smaller;
}
div.Boxmerge,
div.MainPageNavFrame {
margin: 0px;
padding: 4px;
border: 0px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.MainPageNavFrame div.MainPageNavHead {
height: 1.6em;
font-weight: bold;
background-color: transparent;
position:relative;
}
/* Template preloads */
.preload_table {
text-align:center;
padding:1px;
border-spacing: 4px 2px;
}
.preload_button,
.preload_button2 {
background-color: #ddddee;
border: 2px outset #9999bb;
text-align: center;
padding: 2px 4px;
}
.preload_button2 {
font-size: 110%;
background-color: #E0BF1C;
border:2px outset #BFb428;
}
/* elemental text templates for Dark Theme */
span.light-elemental-text {
color: #888888;
}
span.dark-elemental-text {
color: #000000;
}
td.nation-color-highlight-bastok {
background-color: #88ACE0;
}
span.nation-color-highlight-bastok {
background-color: #88ACE0;
}
td.nation-color-highlight-sandoria {
background-color: #FF6666;
}
span.nation-color-highlight-sandoria {
background-color: #FF6666;
}
td.nation-color-highlight-windurst {
background-color: #BCED91;
}
span.nation-color-highlight-windurst {
background-color: #BCED91;
}
aside.portable-infobox ol,aside.portable-infobox ul{
list-style-position:outside;
margin:0 0 0 15px;
text-align:initial
}
aside.portable-infobox ol ol,aside.portable-infobox ol ul,aside.portable-infobox ul ol,aside.portable-infobox ul ul{
margin-left:3px;
margin-top:6px;
padding-left:9px
}
aside.portable-infobox p,aside.portable-infobox section{
margin-bottom:0
}
aside.portable-infobox h2,aside.portable-infobox h3{
border-bottom:0;
font-family:inherit;
font-weight:700;
margin:0
}
aside.portable-infobox .pi-title{
background:#520044;
color:#fff;
font-size:18px;
line-height:1.25;
padding:12px 9px;
border-top:0;
margin: 0;
border-color: rgba(82,0,68,0.5);
}
.mw-body .mw-parser-output h1:after, .mw-body .mw-parser-output aside.portable-infobox h2:after {
border-bottom: 0 none;
}
aside.portable-infobox .pi-title p{
margin: 0;
}
.skin-timeless #mw-content-text .pi-title {
background:#520044;
color:#fff;
font-size:18px;
line-height:1.25;
padding:12px 9px;
border-top:0;
margin: 0;
}
.skin-timeless #mw-content-text .pi-title p{
margin: 0;
}
.mw-body .mw-parser-output h1:after, .mw-body .mw-parser-output aside.portable-infobox h2:after {
border-bottom: 0 none;
}
aside.portable-infobox .pi-header{
font-size:14px;
line-height:1.25;
padding:9px
}
aside.portable-infobox .pi-data-label{
font-size:12px;
line-height:1.5
}
aside.portable-infobox{
border-radius:3px;
border-style:solid;
border-width:1px;
clear:right;
float:right;
margin:0 0 18px 18px;
width:270px;
border-color: rgba(82,0,68,0.5);
}
aside.portable-infobox .pi-item-spacing{
padding-bottom:9px;
padding-top:9px
}
aside.portable-infobox .pi-border-color{
border-color:rgba(82,0,68,0.5);
}
.pi-background{
background-color:#ffffff;
}
.pi-secondary-background{
background:#520044;
color:#fff;
}
.pi-secondary-background+.pi-secondary-background{
border-top:1px solid #ffffff;
}
.pi-secondary-background+*>.pi-data:first-child,.pi-secondary-background+.pi-data{
border-top:0
}
aside.portable-infobox .pi-secondary-background a{
color:inherit
}
.pi-font{
font-size:12px
}
.pi-secondary-font{
font-size:14px;
font-weight:700;
line-height:1.25;
margin-top:0
}
.pi-caption,.pi-data,.pi-header,.pi-navigation,.pi-title{
padding-left:9px;
padding-right:9px
}
.pi-header,.pi-title{
text-align:center
}
.pi-data{
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
grid-column-gap:9px;
border-top-style:solid;
border-top-width:1px;
border-bottom-width: 0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:-webkit-box;
display:flex;
flex-direction:row;
overflow:hidden
}
.pi-image+.pi-data,.pi-image-collection+.pi-data,.pi-secondary-background+.pi-data,aside.portable-infobox>.pi-data:first-child{
border-top:0
}
.pi-layout-stacked .pi-data{
display:block
}
.pi-data-label{
flex-basis:90px;
margin:0;
overflow:hidden
}
.pi-data-label,.pi-data-value{
-webkit-hyphens:auto;
hyphens:auto
}
.pi-data-value{
line-height:1.5;
overflow-wrap:break-word
}
.pi-data-value>*{
margin:0
}
.pi-data-value:not(:first-child){
flex-basis:180px
}
.pi-image{
text-align:center
}
.pi-image img{
height:auto;
max-width:100%;
vertical-align:middle
}
.pi-caption{
word-wrap:break-word;
color:rgba(58,58,58,.6);
font-size:14px;
font-style:italic;
-webkit-hyphens:auto;
hyphens:auto;
text-align:center
}
.pi-horizontal-group{
border-collapse:collapse;
table-layout:fixed;
text-align:center;
width:100%
}
.pi-horizontal-group .pi-header{
display:table-caption;
text-align:left
}
.pi-horizontal-group .pi-secondary-background+* .pi-horizontal-group-item{
border-top:0
}
.pi-horizontal-group-item.pi-data-label{
border-top-style:solid;
border-top-width:1px;
padding:9px 9px 0
}
.pi-horizontal-group-item.pi-data-value{
padding:0 9px 9px
}
.pi-horizontal-group-item:not(:first-child){
border-left-style:solid;
border-left-width:1px
}
.pi-smart-group{
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
border-top-style:solid;
border-top-width:1px;
display:-webkit-box;
display:flex;
flex-direction:column;
text-align:center
}
.pi-smart-group .pi-smart-data-label{
margin-bottom:0;
padding-bottom:0
}
.pi-smart-group .pi-smart-data-value,.pi-smart-group h3.pi-smart-data-label{
-webkit-box-sizing:border-box;
box-sizing:border-box;
flex-basis:auto;
margin:3px 0;
padding:6px 9px
}
.pi-smart-group .pi-smart-data-value:not(:first-child),.pi-smart-group h3.pi-smart-data-label:not(:first-child){
border-left-style:solid;
border-left-width:1px
}
.pi-smart-group .pi-smart-data-value:first-child,.pi-smart-group h3.pi-smart-data-label:first-child{
padding-left:9px
}
.pi-smart-group .pi-smart-data-value:last-child,.pi-smart-group h3.pi-smart-data-label:last-child{
padding-right:9px
}
.pi-smart-group-body,.pi-smart-group-head{
display:-webkit-box;
display:flex
}
.pi-smart-group-head+.pi-smart-group-body{
border-top-style:solid;
border-top-width:1px
}
.pi-secondary-background+.pi-smart-group{
border-top:0
}
.pi-collapse.pi-collapse-closed{
border-bottom:none
}
.pi-collapse.pi-collapse-closed .pi-header:first-child:after{
-webkit-transform:rotate(135deg);
transform:rotate(135deg)
}
.pi-collapse.pi-collapse-closed .pi-horizontal-group tbody,.pi-collapse.pi-collapse-closed .pi-horizontal-group thead,.pi-collapse.pi-collapse-closed>:nth-child(n+2){
display:none
}
.pi-collapse .pi-header:first-child{
cursor:pointer;
padding-right:40px;
position:relative;
text-align:center
}
.pi-collapse .pi-header:first-child:after{
border-color:currentcolor;
border-style:solid;
border-width:2px 2px 0 0;
content:"";
display:inline-block;
display:block;
height:8px;
margin-top:-6px;
position:relative;
position:absolute;
right:0;
right:16px;
top:-1px;
top:50%;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transition:-webkit-transform .3s;
transition:-webkit-transform .3s;
transition:transform .3s;
transition:transform .3s,-webkit-transform .3s;
vertical-align:middle;
width:8px
}
.pi-error-info{
background-color:var(--theme-alert-color);
color:var(--theme-alert-label);
font-size:18px;
line-height:28px;
margin:0;
padding:36px 50px
}
.pi-debug{
background-color:#f2f2f2;
font-family:monospace;
list-style-type:none;
margin:0;
width:100%
}
.pi-debug li{
margin:0
}
.pi-debug .error{
font-size:inherit
}
.pi-debug-line{
display:-webkit-box;
display:flex
}
.pi-debug-line-code,.pi-debug-line-number{
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.pi-debug-line-number{
flex-basis:50px;
flex-shrink:0;
padding-left:9px
}
.pi-debug-error-message{
background-color:#1e0c1b;
color:#fff;
font-family:Helvetica,Arial,sans-serif;
margin:20px 0 10px 25px;
padding:9px 13.5px;
position:relative;
width:400px
}
.pi-debug-error-message:before{
border-bottom:18px solid #1e0c1b;
border-left:18px solid transparent;
border-right:18px solid transparent;
content:"";
display:block;
height:0;
left:25px;
position:absolute;
top:-18px;
width:0
}
.pi-debug-error-message .pi-debug-error-message-item{
margin:4.5px 0
}
.pi-item p {
margin: 0;
}
/* Vana'diel Tribune II table */
.VTTable {
background-color: #D3CEC3;
background-image: url(https://images.wikia.nocookie.net/ffxi/images/f/f6/VTBG.PNG);
background-repeat: repeat-y;
background-position: right;
background-size: contain;
}
.VTTitle {
background-color: #D3CEC3;
background-image: url(https://images.wikia.nocookie.net/ffxi/images/1/12/VTHeaderBG.PNG);
background-repeat: repeat-y;
}
/* Vana'diel Tribune I table */
.VT1Table {
background-color: #E4CDA3;
background-image: url(https://images.wikia.nocookie.net/ffxi/images/4/4f/VT1Bg.jpg);
background-repeat: repeat-y;
background-position: right;
background-size: contain;
}
.VT1Title {
background-color: #E4CDA3;
background-image: url(https://images.wikia.nocookie.net/ffxi/images/1/12/VT1TableBG3.PNG);
background-repeat: repeat-y;
}
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
background: rgba(109,169,247,0.5);
}
#discord-chunk {
display: none;
margin: 1em 0;
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
#discord-chunk {
display: block;
margin-top: 0;
}
#discord-widget {
width: 198px;
}
}
@media screen and (min-width: 1340px) {
#discord-chunk {
display: block;
}
#discord-widget {
width: 228px;
}
}
#new-page-modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#new-page-modal-content {
background-color: white;
color: black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: fixed;
top: 50%;
width: 320px;
z-index: 1000;
padding-bottom: 20px;
}
#new-page-create-name-container {
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
background: #ffffff;
width: 320px;
border: solid 1px #c8ccd1;
}
#new-page-create-name-input {
border: 0;
margin: 0;
height: 2.1em;
padding: 0.3em 4.75em 0.2em 1em;
box-shadow: none;
background: transparent;
min-height: 0;
width: 233px;
}
#new-page-create-button {
border-radius: 0.375rem;
background-color: rgb(255 255 255);
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: rgb(17 24 39);
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
box-shadow: inset 0 0 0 1px rgb(209 213 219);
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
margin-top: 1em;
}
#new-page-create-button:hover {
background-color: rgb(249 250 251);
}
.cm-mw-template-name, .cm-mw-template-argument-name, .cm-mw-template-delimiter, .cm-mw-template-bracket, .cm-mw-template {
color: #aa00ff;
}
.cm-mw-exttag-bracket, .cm-mw-exttag-attribute, .cm-mw-htmltag-bracket, .cm-mw-htmltag-attribute, .cm-mw-exttag-name, .cm-mw-htmltag-name {
color: #10a213;
}
#mw-content-container {
background-size: 100%;
}
#mw-content {
background: rgb(255,255,255,0.90);
}
#p-logo-text {
display: flex;
align-items: center;
justify-content: center;
}
#p-logo-text a.long {
padding: 0;
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#p-logo-text a.long {
padding-right: 0.5em;
}
}
@media screen and (max-width: 850px) {
#p-logo-text {
padding-top: 0.6em;
}
}
.horizon-changes {
display: inline-block;
height: 16px;
width: 16px;
}
.horizon-changes a.image img {
height: 16px;
width: 16px;
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
}
.main-page-top-container {
display: flex;
flex-wrap: nowrap;
}
.main-page-top-left {
flex: 3;
}
.main-page-top-right {
flex: 1;
}
.main-page-top-left div.thumbinner {
width: 100% !important;
max-width: 750px;
}
.stack-fix {
position: relative;
z-index: 1;
}
/* ------------------------------------- */
/* horizon herald frame code */
/* note: this frame is coded mobile first.
so all these class definitions refer to mobile view
desktop view is defined below the @media query min-width: 768px
*/
/* Style for the outer container */
.hh-outer-container {
background-color: #eff2f4; /* Light background color */
border: 3px solid #78b077;
padding: 48px 4px; /* Add padding to create space for the inner container */
position: relative;
}
/* Style for the second container */
.hh-inner-container {
background-color: #394451; /* Dark background color */
border: 3px solid #78b077; /* Green border */
margin: 4px; /* Create space between the outer and inner containers */
padding: 4px; /* Add padding to create space for the content container */
position: relative;
margin-top: 40px;
}
/* Style for the third container */
.hh-content-container {
background-color: #eff2f4; /* Light background color */
border: 3px solid #78b077; /* Green border */
margin: 4px; /* Create space between the inner and content containers */
padding: 8px; /* Add content padding */
}
/* Style for the top right corner div */
.hh-horizon-signature-container {
background-color: #394451; /* dark background */
color: #ffffff; /* white Text color */
padding: 4px; /* Add padding to the div */
z-index: 1; /* Ensure it appears above the inner container */
}
/* small devices */
/*@media (max-width: 768px) {
.hh-horizon-signature-container::after {
content: "";
position: absolute;
bottom: 0;
left: 28px;
right: 28px;
height: 3px;
background-color: #78b077;
}
}
*/
.hh-horizon-signature-text-container {
display: flex;
justify-content: center;
}
.hh-horizon-signature-icon {
height: 40px;
width: 40px;
margin: 4px;
margin-top: auto;
margin-bottom: auto;
}
.hh-horizon-signature-text {
margin: auto 8px;
font-size: 1.5rem;
font-family: hinted-highwind;
}
/* Style for the SVG graphic */
.hh-mandy-svg-container {
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, -75%, 0);
z-index: 2;
min-width: 300px;
}
/* reduce top margin for heading */
.hh-content-heading {
margin-top: 0.5em !important;
}
.hh-content-author {
min-height: 22px;
text-align: right;
margin-bottom: 0.5em;
}
/* styling for large devices (box to the side) */
@media (min-width: 768px) {
/* mode padding on outer container */
.hh-outer-container {
padding: 48px;
}
/* more padding on the inner container */
.hh-inner-container {
padding: 24px;
}
/* more padding on the content container */
.hh-content-container {
padding: 16px;
}
/* box to the side */
.hh-horizon-signature-container {
position: absolute;
top: 0;
right: 0;
padding: 4px 16px;
}
/* draw missing border parts for the box */
.hh-horizon-signature-container::before {
content: "";
position: absolute;
top: 28px; /* padding of the dark container plus something */
left: 0;
bottom: 0;
width: 3px; /* Border width */
background-color: #78b077; /* Green color for the border */
}
.hh-horizon-signature-container::after {
content: "";
position: absolute;
bottom: 0; /* Offset from the top */
left: 0;
right: 28px; /* padding of the dark container plus something */
height: 3px; /* Border width */
background-color: #78b077; /* Green color for the border */
}
/* make text bigger and limit box in width */
.hh-horizon-signature-text {
max-width: 180px;
font-size: 2.5rem;
}
/* make icon bigger */
.hh-horizon-signature-icon {
height: 64px;
width: 64px;
}
/* calculate position: subtract half the box add padding back and lower */
.hh-mandy-svg-container {
left: calc(50% - 150px + 16px);
transform: translate3d(-50%, -50%, 0);
}
/* adjust space for the heading to account for the box */
.hh-content-heading {
width: calc(100% - 300px + 4px + 24px);
}
/* adjust space for author to account for the box */
.hh-content-author {
width: calc(100% - 300px + 4px + 24px);
margin-bottom: 0;
}
/* incease top padding for content slightly to dodge the box*/
.hh-content-body {
padding-top: 8px;
}
}
/* ---------- end of horizon herald code --------- */
/* class for flex container for responsive table code */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: -16px; /* negative margin to offset margin of items to outside */
min-width: 100%;
}
.flex-container-item-2, .flex-container-item-2-large {
margin: 16px;
flex-basis: calc(50% - 32px);
}
.flex-container-item-3 {
margin: 16px;
flex-basis: calc(33.33% - 32px);
}
.flex-container-item-4 {
margin: 16px;
flex-basis: calc(25% - 32px);
}
@media screen and (max-width: 1024px) { /* 3 items side by side */
.flex-container-item-4 {
flex-basis: calc(33.33% - 32px);
}
}
@media screen and (max-width: 768px) { /* 2 items side by side */
.flex-container-item-4, .flex-container-item-3 {
flex-basis: calc(50% - 32px);
}
.flex-container-item-2-large { /* stack all items in large containers */
flex-basis: calc(100% - 32px);
}
}
@media screen and (max-width: 480px) { /* On smaller screens, stack all items */
.flex-container-item-4, .flex-container-item-3, .flex-container-item-2 {
flex-basis: calc(100% - 32px);
}
}
