MediaWiki:Common.css: Difference between revisions
From HorizonXI Wiki
mNo edit summary |
mNo edit summary |
||
Line 2,026: | Line 2,026: | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.infobox-magic | table.infobox-magic { | ||
border-collapse: collapse; | border-collapse: collapse; | ||
width: 100% | width: 100% |
Revision as of 22:06, 3 December 2023
/* 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"); /* 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 uses these for zone page designs */ .zone-section-header { margin: 0; text-align: left; padding: 0.2em 0.4em; /*margin-bottom: -18px;*/ /* offsets the top margin of the table below */ } .zone-section-header a { font-size: 120%; font-weight: bold; color: #000; } /* || 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; } /* || 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 { background-color: hsl(235, 90%, 95%) !important; border:1px hsl(235, 90%, 25%) solid !important; } .mobs th, .droppedby 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; } /* || 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;} /* || 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 */ .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;} /* || In-era Missing Content */ .burrowbore {display: none !important;} .egghelm {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; } /* 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.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; } table.infobox-magic { border-collapse: collapse; width: 100% } .infobox-magic th, .infobox-magic td { text-align: left; font-size: .85em; border: 1px rgba(82,0,68,0.5) solid; padding: 8px; } .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: center; 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-grow: 1; /* Allow items to grow and take up available space equally */ flex-basis: calc(50% - 32px); } .flex-container-item-3 { margin: 16px; flex-grow: 1; /* Allow items to grow and take up available space equally */ flex-basis: calc(33.33% - 32px); } .flex-container-item-4 { margin: 16px; flex-grow: 1; /* Allow items to grow and take up available space equally */ 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); } } /* 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 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;} /* just a helper class to help set text to bold when explicitly using style is not a good option */ .text-bold {font-weight: bold;} /* 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); }