MediaWiki:Common.css: Difference between revisions

From HorizonXI Wiki
(changed flex container to use the gap property instead of negative margins.)
(adjusted flex basis values to accomodate change from margin based code to gap based code)
 
(One intermediate revision by the same user not shown)
Line 2,555: Line 2,555:
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: start;
justify-content: space-between;
gap: 32px; /* Gap between items replaces margins */
gap: 32px; /* Gap between items replaces margins */
min-width: 100%;
min-width: 100%;
Line 2,562: Line 2,562:
.flex-container-item-2, .flex-container-item-2-large {
.flex-container-item-2, .flex-container-item-2-large {
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-basis: calc(50% - 32px);
flex-basis: calc(50% - 16px); /* 1x 32px gap divided by 2 items: 32/2=16 */
}
}


.flex-container-item-3 {
.flex-container-item-3 {
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-basis: calc(33.33% - 32px);
flex-basis: calc(33.33% - 22px); /* 2x 32px gap divided by 3 items: 64/3~21.3 */
}
}


.flex-container-item-4 {
.flex-container-item-4 {
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-grow: 0; /* Allow items to grow and take up available space equally */
flex-basis: calc(25% - 32px);
flex-basis: calc(25% - 24px); /* 3x 32px gap divided by 4 items: 96/4=24*/
}
}


@media screen and (max-width: 1024px) { /* 3 items side by side */
@media screen and (max-width: 1024px) { /* 3 items side by side */
     .flex-container-item-4 {
     .flex-container-item-4 {
        flex-basis: calc(33.33% - 32px);
flex-basis: calc(33.33% - 22px); /* 2x 32px gap divided by 3 items: 64/3~21.3 */
     }
     }
}
}
Line 2,583: Line 2,583:
@media screen and (max-width: 768px) { /* 2 items side by side */
@media screen and (max-width: 768px) { /* 2 items side by side */
     .flex-container-item-4, .flex-container-item-3 {
     .flex-container-item-4, .flex-container-item-3 {
        flex-basis: calc(50% - 32px);
flex-basis: calc(50% - 16px); /* 1x 32px gap divided by 2 items: 32/2=16 */
     }
     }
     .flex-container-item-2-large { /* stack all items in large containers */
     .flex-container-item-2-large { /* stack all items in large containers */
         flex-basis: calc(100% - 32px);
         flex-basis: calc(100% - 0px); /* no gap */
     }
     }
}
}
Line 2,592: Line 2,592:
@media screen and (max-width: 480px) { /* On smaller screens, stack all items */
@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-container-item-4, .flex-container-item-3, .flex-container-item-2 {
         flex-basis: calc(100% - 32px);
         flex-basis: calc(100% - 0px); /* no gap */
     }
     }
}
}

Latest revision as of 18:27, 29 November 2024

/* Importing FFXIMap extension associated CSS styling */
@import url("/w/index.php?action=raw&ctype=text/css&title=MediaWiki:FFXIMap_Styles.css");

/* Importing Classes for Colors */
@import url("/w/index.php?action=raw&ctype=text/css&title=MediaWiki:Colors.css");

/* Importing Vanatime.js associated CSS styling */
@import url("/w/index.php?action=raw&ctype=text/css&title=MediaWiki:VanaTime.css");

/* Importing Special:ASBSearch associated CSS styling */
@import url("/w/index.php?action=raw&ctype=text/css&title=MediaWiki:ASBSearch.css");

/* Importing Special:FFXIWeatherForecast associated CSS styling */
@import url("/w/index.php?action=raw&ctype=text/css&title=MediaWiki:FFXIWeatherForecast.css");


/* Start of Table Class Categorisation */

/* class that can be used on divs to mimick table cells for landing page styles */
.container {
	border: 1px #aaa solid;
	padding: 0.3em 0.4em;
	margin: 1em 0;
}

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


/* || Setting a table inside a cell of another table */
.inserted-table {
	margin-top: 0px;
	margin-bottom: 0px;
	border-style: hidden;
	border-collapse: collapse;
	width: 100%;
	display: inline-table;
}
/*.inserted-table tr,
.inserted-table td {
	border: none !important;
}*/
.inserted-table tr:first-child > td {
	padding-top: 0;
}
.inserted-table tr:last-child > td {
	padding-bottom: 0;
}
.inserted-table td:first-child {
	padding-left: 0;
}
.inserted-table td:last-child {
	padding-right: 0;
}

/* || Special Table for the Auction House Navigation */
.auction-house-navigation-table {
	margin-top: 0;
	margin-bottom: 0;
}
.auction-house-navigation-table th {
	text-align: center;
}
.auction-house-navigation-table td {
	text-align: left;
	vertical-align: top;
	font-weight: bold;
}
.auction-house-navigation-table td a {
	color: black;
}
.auction-house-navigation-table td ul {
	list-style-type: none;
	margin: 0.3rem 0.5rem;
}
.auction-house-navigation-table-color th {
	background-color: #B0C4DE;
}
.auction-house-navigation-table-color td {
	background-color: #5F9EA0;
}
.active-category-link,
.active-category-link a {
	color: white;
}


/* || 
Template:Zone_Section_Header and Template:Zone_Infobox / Template:Zone/Infobox 
use these for zone page designs */

.zone-section-header, .zone-section-body {
	padding: 4px 8px;
}
.zone-section-header, .zone-section-header a {
	font-size: 1.2rem;
	font-weight: bold; 
	color: black;
}

/* || Global Template Format */
/* || Template:Quest Styling and Size */
/* || Horizon Infobox - standard 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;
}

.border-none-table,
.border-none-th th,
.border-none-td td {
	border: none !important;
}

.align-left-th th {
	text-align: left !important;
}

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

tr.infobox-mobs-header th {
	text-align: center;
	background-color: var(--mobs-color-dark);
	border-color: var(--mobs-color-dark);
}
.infobox-mobs th {
	text-align: left;
	background-color: var(--mobs-color-medium-light);
	border-color: var(--mobs-color-light);
}

.infobox-mobs td {
	background-color: var(--mobs-color-light);
	border-color: var(--mobs-color-light);	
}

.infobox-mobs {
	border: 1px double var(--mobs-color-darkest);	
}

.infobox-mobs-thick-border {
	border: 2px solid var(--mobs-color-dark);
}

tr.infobox-nms-header th {
	text-align: center;
	background-color: var(--nms-color-dark);
	border-color: var(--nms-color-dark);
}
.infobox-nms th {
	text-align: left;
	background-color: var(--nms-color-medium-light);
	border-color: var(--nms-color-light);
}

.infobox-nms td {
	background-color: var(--nms-color-light);
	border-color: var(--nms-color-light);	
}

.infobox-nms {
	border: 1px double var(--nms-color-darkest);	
}

.infobox-nms-thick-border {
	border: 2px solid var(--nms-color-dark);
}

/* || Various Table Colors */

/* || Mission Table Colors */

.infobox-mission th,
.horizonmissions th {
	background-color: hsl(319, 32%, 58%); /*#b773a2;*/
}
.infobox-mission td,
.horizonmissions td {
	background-color: hsl(317, 58%, 95%); /*#faecf6;*/
}
tr.infobox-mission-alt th,
tr.horizonmissions-alt th {
	background-color: hsl(314, 41%, 90%); /*#f0dbeb;*/
}

/* || Bastok Missions */
.bastokmissions th,
.bastokmissions tr,
.bastokmissions td {
	border: 1px hsl(230, 50%, 40%) solid !important;
}
.bastokmissions th,
tr.bastokmissions th,  /* higher specificity when set on a row */
table.tr.th.bastokmissions { /* highest specificity when set on the td element */
	/*background-color: hsl(236, 55%, 38%);*/ /*#2b3296;*/
	background-color: hsl(230, 50%, 40%);
	color: white;
}
.bastokmissions td,
tr.bastokmissions td,  /* higher specificity when set on a row */
table.tr.td.bastokmissions { /* highest specificity when set on the td element */
	/*background-color: hsl(236, 60%, 95%);*/ /*#ebecfa;*/
	background-color: hsl(230, 95%, 95%);
	color: black;
}
tr.bastokmissions-alt th,
table.tr.th.bastokmissions-alt {
	/*background-color: hsl(236, 56%, 70%);*/ /*#888edd;*/
	background-color: hsl(230, 50%, 80%);
	color: black;
}

/* || San d'Oria Missions */
.sandoriamissions th,
.sandoriamissions tr,
.sandoriamissions td {
	border: 1px hsl(350, 50%, 40%) solid !important;
}
.sandoriamissions th,
tr.sandoriamissions th,  /* higher specificity when set on a row */
table.tr.th.sandoriamissions { /* highest specificity when set on the th element */
	/*background-color: hsl(350, 99%, 42%);*/ /*#d60124;*/
	background-color: hsl(350, 50%, 40%);
	color: white;
}
.sandoriamissions td,
tr.sandoriamissions td,  /* higher specificity when set on a row */
table.tr.td.sandoriamissions { /* highest specificity when set on the td element */
	/*background-color: hsl(348, 100%, 95%);*/ /*#ffe5ea;*/
	background-color: hsl(350, 95%, 95%);
	color: black;
}
tr.sandoriamissions-alt th,
table.tr.th.sandoriamissions-alt {
	/*background-color: hsl(350, 99%, 70%);*/ /*#fe6780;*/
	background-color: hsl(350, 50%, 80%);
	color: black;
}

/* || Windurst Missions */
.windurstmissions th,
.windurstmissions tr,
.windurstmissions td {
	border: 1px hsl(110, 95%, 25%) solid !important;
}
.windurstmissions th,
tr.windurstmissions th,  /* higher specificity when set on a row */
table.tr.th.windurstmissions { /* highest specificity when set on the td element */
	/*background-color: hsl(102, 95%, 25%);/* /*#287e03;*/
	background-color: hsl(110, 95%, 25%);
	color: white;
}
.windurstmissions td,
tr.windurstmissions td,  /* higher specificity when set on a row */
table.tr.td.windurstmissions { /* highest specificity when set on the td element */
	/*background-color: hsl(103, 92%, 95%);*/ /*#edfee6;*/
	background-color: hsl(110, 95%, 95%);
	color: black;
}
tr.windurstmissions-alt th,
table.tr.th.windurstmissions-alt {
	/*background-color: hsl(102, 95%, 60%);*/ /*#72fa38;*/
	background-color: hsl(110, 50%, 80%);
	color: black;
}

/* || Rise of the Zilart Missions */
.rotzmissions th,
tr.rotzmissions th,  /* higher specificity when set on a row */
table.tr.th.rotzmissions { /* highest specificity when set on the td element */
	background-color: hsl(30, 48%, 59%); /*#c99866;*/
}
.rotzmissions td,
tr.rotzmissions td,  /* higher specificity when set on a row */
table.tr.td.rotzmissions { /* highest specificity when set on the td element */
	background-color: hsl(30, 46%, 95%); /*#f8f2ec;*/
}
tr.rotzmissions-alt th,
table.tr.th.rotzmissions-alt {
	background-color: hsl(30, 48%, 78%); /*#e2c7ac;*/
}

/* || Chains of Promathia Missions */
.copmissions th,
tr.copmissions th,  /* higher specificity when set on a row */
table.tr.th.copmissions { /* highest specificity when set on the td element */
	background-color: hsl(206, 32%, 50%); /*#5785a8;*/
}

/*.copmissionschapter th {*/
/*	background-color: #9ab6cb !important;*/
/*}*/

.copmissions td,
tr.copmissions td,  /* higher specificity when set on a row */
table.tr.td.copmissions { /* highest specificity when set on the td element */
	/*background-color: hsl(203, 31%, 95%);*/ /*#eef3f6;*/
	background-color: hsl(206, 32%, 95%);
}
tr.copmissions-alt th,
table.tr.th.copmissions-alt {
	/*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 */
/* || Regular Mobs and Dropped By Table */
table tr.mobs, 
.mobs tr,
.droppedby tr,
.stolenfrom tr {
	background-color: hsl(235, 90%, 95%) !important;
	border:1px hsl(235, 90%, 25%) solid !important;
}
.mobs th,
.droppedby th,
.stolenfrom th {
	background-color: hsl(235, 90%, 75%) !important;
	border:1px hsl(235, 90%, 25%) solid !important;
}

/* || Notorious Monsters */
table.nm-table tr,
table tr.bg-red,
table tr.bg-nm,
table tr.nms,
.bg-red tr,
.bg-nm tr,
.bg-red,
.bg-nm,
.nms,
.nms tr {
	background-color: hsl(0, 90%, 95%) !important;
	border:1px hsl(0, 90%, 25%) solid !important;
}
table.nm-table th,
.bg-red th,
.bg-nm th,
.bg-nm .ffxi-header,
.bg-nm .ffxi-footer,
.nms th {
	background-color: hsl(0, 90%, 75%);
	border:1px hsl(0, 90%, 25%) solid !important;
}

/* || Mega Bosses */
table tr.megaboss, 
.megaboss tr {
	background-color: hsl(0, 90%, 95%) !important;
	border:1px hsl(235, 90%, 25%) solid !important;
}
.megaboss th {
	background-color: hsl(0, 90%, 60%) !important;
	border:1px hsl(235, 90%, 25%) solid !important;
}


/* || Battlefield  */
table tr.bcnm-table, 
.bcnm-table tr,
table tr.enm-table, 
.enm-table tr,
table tr.ksnm-table, 
.ksnm-table tr {
	background-color: hsl(60, 71%, 92%) !important;
	border:1px hsl(60, 70%, 30%) solid !important;
}
.bcnm-table th,
.enm-table th,
.ksnm-table th {
	background-color: hsl(60, 70%, 60%) !important;
	border:1px hsl(60, 70%, 30%) solid !important;
}
.bcnm-table td,
.enm-table td,
.ksnm-table td {
	border:1px hsl(60, 70%, 30%) solid !important;
}

/* Chests/Coffers Tables */
.treasurecoffer th,
.treasurechest th {
	background-color: hsl(48, 9%, 58%) !important;
}
 
.treasurecoffer tr,
.treasurechest tr {
	background-color: hsl(48, 9%, 90%) !important;
}
  
/* || Page Header Colors */
.area-header th,
.bestiary-header th,
.ffxi-table th,
.ffxi-header,
.ffxi-footer,
.general-table th {
	background-color:#afc7cf !important;
}
.area-header tr,
.bestiary-header tr,
.ffxi-table tr,
.general-table tr {
	background-color:#eff4f5 !important;
}


/* || Miscellaneous Colors */
.editing-table {
	border-color:#678198;
}
.editing-table th {
	background-color:#b3c0cb;
}
.editing-table tr {
	background-color:#f0f2f5;
}

.table-grey th {
	background-color: hsl(0, 0%, 80%);
}
.table-grey td {
	background-color: hsl(0, 0%, 95%);
}
tr.table-grey-alt th {
	background-color: hsl(0, 0%, 88%);
}


/* || Event Banner Classes */
/* For use on the https://horizonffxi.wiki/MediaWiki:Sitenotice page */
/* Simple wrapper to make images in sitenotice responsive */
.simple-event-banner-wrapper a > img {
	max-width: 100%;
	height: auto;
}

/* alternative, more involved use with a background image and text overlay */
.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 */

/* || Missing Content */

.fellow,
.adventuringfellow {display:none !important;}
.mogsafetwo {display:none !important;}
.mogsack {display:none !important;}
.mogcase {display:none !important;}
.ballista {display:none !important;}
.grouptwomerits {display:none !important;}
.absolutevirtue {display:none !important;}
.expeditionaryforce {display:none !important;}


/* || Out of era content (OOE) - All dates are approximate */
/* || Treaures of Aht Urghan */

.toau {display: none !important;}					/* Apr 2006 */
.recipeEra {width:275px;}
.recipeEra:has(span.toau) {display: none !important; }

.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 */
.mythic {display: none !important;}

.znm {display: none !important;}					/* Zeni Notorious Monsters - Jun 2008 */
.znm-tier1 {display: none !important;}
.znm-tier2 {display: none !important;}
.znm-tier3 {display: none !important;}
.znm-tier4 {display: none !important;}

.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 - ?? */
.portermooglelive {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;}
.ambuscade {display: none !important;}
.empyrean {display: none !important;}
.evolith {display:none !important;}
.despoil {display:none !important;}

/* || In-era Missing Content */

.burrowbore {display: none !important;}
.egghelmlive {display: none !important;}
.fellow {display: none !important;}
.brenner {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;
}

/* weather box on zone pages colors (original colors, not changed yet!!!) */
.weather-table,
.weather-table th {
	background-color: #FFD86F;
}
.weather-table td {
	background-color: #F2EDC0;
}

/* colors for zone infobox */
.zone-infobox-header, .zone-infobox-table th {
	background-color: #bc73a1;
}
.zone-infobox-body, .zone-infobox-table td {
	background-color: #eddce7
}


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

.crafthobbies-fishing, 
.crafthobbies-fishing th {
  background-color: hsl(207, 69%, 60%);
}
.crafthobbies-fishing tr {
  background-color: hsl(235, 100%, 97%);
}


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

/* this section seems to be long to the <infobox> element */
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;
}

/* infobox magic rework classes */
.infobox-magic-container {
    background: #f8f9fa;
    clear: right;
    float: right;
    margin: 0 0 16px 16px;
    width: 270px;
}

.infobox-magic-title {
	background: #520044;
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    padding: 12px 9px;
    border-top: 0;
    margin: 0;
    font-weight: bold;
    text-align: center;
}
table.infobox-magic {
	border-collapse: collapse;
	width: 100%
}
.infobox-magic p {
	margin: 0;
}
.infobox-magic th, 
.infobox-magic td {
    background: #f8f9fa;
	text-align: left;
	vertical-align: top;
    font-size: .8em;
    border: 1px rgba(82,0,68,0.5) solid;
    padding: 8px;
    hyphens: auto;
}
.infobox-magic th {
	border-right: none;
}
.infobox-magic td {
	border-left: none;
}


/* 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,
.horizon-changes 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: space-between;
	gap: 32px; /* Gap between items replaces margins */
	min-width: 100%;
}

.flex-container-item-2, .flex-container-item-2-large {
	flex-grow: 0; /* Allow items to grow and take up available space equally */
	flex-basis: calc(50% - 16px);  /* 1x 32px gap divided by 2 items: 32/2=16 */
}

.flex-container-item-3 {
	flex-grow: 0; /* Allow items to grow and take up available space equally */
	flex-basis: calc(33.33% - 22px); /* 2x 32px gap divided by 3 items: 64/3~21.3 */
}

.flex-container-item-4 {
	flex-grow: 0; /* Allow items to grow and take up available space equally */
	flex-basis: calc(25% - 24px);  /* 3x 32px gap divided by 4 items: 96/4=24*/
}

@media screen and (max-width: 1024px) { /* 3 items side by side */
    .flex-container-item-4 {
	flex-basis: calc(33.33% - 22px); /* 2x 32px gap divided by 3 items: 64/3~21.3 */
    }
}

@media screen and (max-width: 768px) { /* 2 items side by side */
    .flex-container-item-4, .flex-container-item-3 {
	flex-basis: calc(50% - 16px);  /* 1x 32px gap divided by 2 items: 32/2=16 */
    }
    .flex-container-item-2-large { /* stack all items in large containers */
        flex-basis: calc(100% - 0px);  /* no gap */
    }
}

@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% - 0px);  /* no gap */
    }
}


/* float container for floating elements (also called clearfix) */
.float-container::after,
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
.float-container .float-container-item-left,
.clearfix .float-container-item-left {
	float: left;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
.float-container .float-container-item-right,
.clearfix .float-container-item-right {
	float: right;
	margin-left: 1rem;
	margin-bottom: 1rem;
}
/* for screens below 400px: let float container items fill entire width */
@media screen and (max-width: 400px) {
	.float-container .float-container-item-right,
	.clearfix .float-container-item-right,
	.float-container .float-container-item-left,
	.clearfix .float-container-item-left {
		width: 100%;
	}
}

/* classes to center content of columns of tables */
.center-col-1 td:nth-child(1) {text-align: center;}
.center-col-2 td:nth-child(2) {text-align: center;}
.center-col-3 td:nth-child(3) {text-align: center;}
.center-col-4 td:nth-child(4) {text-align: center;}
.center-col-5 td:nth-child(5) {text-align: center;}
.center-col-6 td:nth-child(6) {text-align: center;}
.center-col-7 td:nth-child(7) {text-align: center;}
.center-col-8 td:nth-child(8) {text-align: center;}

/* classes to left align content of columns of tables */
.left-col-1 th:nth-child(1) {text-align: left;}
.left-col-2 th:nth-child(2) {text-align: left;}
.left-col-3 th:nth-child(3) {text-align: left;}
.left-col-4 th:nth-child(4) {text-align: left;}
.left-col-5 th:nth-child(5) {text-align: left;}
.left-col-6 th:nth-child(6) {text-align: left;}
.left-col-7 th:nth-child(7) {text-align: left;}
.left-col-8 th:nth-child(8) {text-align: left;}

.left-col-1 td:nth-child(1) {text-align: left;}
.left-col-2 td:nth-child(2) {text-align: left;}
.left-col-3 td:nth-child(3) {text-align: left;}
.left-col-4 td:nth-child(4) {text-align: left;}
.left-col-5 td:nth-child(5) {text-align: left;}
.left-col-6 td:nth-child(6) {text-align: left;}
.left-col-7 td:nth-child(7) {text-align: left;}
.left-col-8 td:nth-child(8) {text-align: left;}

/* classes to hide content of columns of tables */
/* headers */
.hide-col-1 th:nth-child(1) {display: none;}
.hide-col-2 th:nth-child(2) {display: none;}
.hide-col-3 th:nth-child(3) {display: none;}
.hide-col-4 th:nth-child(4) {display: none;}
.hide-col-5 th:nth-child(5) {display: none;}
.hide-col-6 th:nth-child(6) {display: none;}
.hide-col-7 th:nth-child(7) {display: none;}
.hide-col-8 th:nth-child(8) {display: none;}
/* cell contents */
.hide-col-1 td:nth-child(1) {display: none;}
.hide-col-2 td:nth-child(2) {display: none;}
.hide-col-3 td:nth-child(3) {display: none;}
.hide-col-4 td:nth-child(4) {display: none;}
.hide-col-5 td:nth-child(5) {display: none;}
.hide-col-6 td:nth-child(6) {display: none;}
.hide-col-7 td:nth-child(7) {display: none;}
.hide-col-8 td:nth-child(8) {display: none;}

/* class to set borders on tables to none */
.no-borders th, 
.no-borders td,
.no-borders tr,
.no-borders {
	border: none;
}

/* no borders just for the cells (can still set on table and row */
.no-borders-cells th, 
.no-borders-cells td {
	border: none;
}

/* just a helper class to help set text to bold when explicitly using style is not a good option */
.text-bold {font-weight: bold;}

/* a helper class to suppress the top and bottom margin of child paragraphs */
.suppress-p-margin p {
	margin-top: 0;
	margin-bottom: 0;
}

/* class to make lists take up less space inside tables */
.tight-list ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
/* add a negative space before the element to make it stick tighter to the marker */
.tight-list li:before {
    content: "";
    margin-left: -0.5rem;
}

/* give list elements a little more space vertically*/
.spaced-list li {
  margin-bottom: 0.3rem;
  margin-top: 0.3rem;
}

.plain-list ul {
	margin: 0;
	list-style-type: none;
}

.horizontal-list ul {
  list-style-type: none; /* Removes default bullet points */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  overflow: hidden; /* Ensures the list wraps correctly */
}

.horizontal-list ul li {
  display: inline-block; /* Makes list items sit next to each other */
  /* margin-left: 4px; */ /* Adds some space between the list items, adjust as needed */
  position: relative; /* Needed for positioning the pseudo-element */
  padding-right: 0.65em; /* Provides space for the custom bullet */
}

.horizontal-list ul li::after {
  content: '•'; /* This is your custom bullet */
  position: absolute;
  right: 0; /* Adjust accordingly to align the bullet */
  top: 0; /* Adjust if needed to align vertically with the text */
}

.horizontal-list ul li:last-child::after {
  content: none; /* Removes the bullet point from the last list item */
}
.horizontal-list ul li:last-child {
	padding-right: 0;
}


/* To Top button */
.mainpage-button-scrollToTop {
	right: 2%; 
	background: #FFFFFF; 
	opacity: 1; 
	position: fixed; 
	display: none; 
	border-radius: 10px; 
	border: 0.5px solid #a7a7a7; 
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

/* class for area pages where tables are put under headers so their top margin vanishes and they fit nicely */
.under-zone-section-header {
	margin-top: 0 !important;
}


.not-restocked,
tr.not-restocked td {
	background-color: hsl(0, 90%, 95%) !important;
}
tr.not-restocked a,
tr.not-restocked td {
	color: grey !important;
}

/* strikethrough class set on row will show all text as strikethrough */
tr.strikethrough td {
    text-decoration: line-through;
}
Retrieved from "https://horizonffxi.wiki/w/index.php?title=MediaWiki:Common.css&oldid=75541"