Jump to content
Go to Vaniquotes | Go to Vanipedia | Go to Vanimedia


Vanisource - the complete essence of Vedic knowledge


MediaWiki:Common.css: Difference between revisions

From Vanisource
← Older edit
Kashya (talk | contribs)
Editor, Bureaucrats, Interface administrators, Administrators
7 edits
No edit summary
No edit summary
 
Line 2: Line 2:
/* Use IDs (#) when there is only one concurrence per page */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */


.cw_0 {
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');
  display: none;
 
}
/* ==========================================================================
.cw_50 {
  1. VANISOURCE CORE UTILITIES & TEXT FORMATTING
  width: 50px;
  ========================================================================== */
}
.cw_0 { display: none; }
.cw_150 {
.cw_50 { width: 50px; }
  width: 150px;
.cw_150 { width: 150px; }
}
.cw_500 { width: 500px; }
.cw_500 {
.tabs-input { display: none !important; }
  width: 500px;
.noautonum .tocnumber { display: none; }
}
 
.greentext, .quotelink, .nectardroptext, .daystext, .daystextb { color: #296F39; }
.quotelink, .nectardroptext, .daystextb { font-weight: bold; }
.quotelink, .nectardroptext { font-size: 1em; }


.tabs-input {
.journaltable { max-width: 108em; min-width: 65em; }
  display: none !important;
.daytable { text-align: left; }
}
.vanitable {
.noautonum .tocnumber {
     border: 0.1em solid #BFBFBF;
    display: none;  
}
.daytable {                   /* Usage: {| class="daytable" */
    text-align: left;
}
.vanitable {                     /* Usage: {| class="vanitable" */
     border: 0.1em solid #BFBFBF; /* #BFBFBF=light grey border */
     border-collapse: collapse;
     border-collapse: collapse;
     padding: 0.25em;             /* 0.25em=4px cellpadding */
     padding: 0.25em;
     background-color: #F2F2F2;   /* #F2F2F2=pale grey background */
     background-color: #F2F2F2;
    text-align: left;            /* left, center, right */
    vertical-align: middle;      /* top, bottom, or middle */
}
.timelineh2 {                          /* (Used on the timeline pages) Usage: <div class="timelineh2" */
    text-align: center;
    border: 1px solid #ddcef2;
    background: #F2F2F2;                /* was #faf5ff; */
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelineh3 {                          /* Usage: <div class="timelineh3" */
    text-align: center;
    border-top: 1px solid #ddcef2;
    border-bottom: 1px solid #ddcef2;
    background: #FFFFFF;             
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelinesummary {                      /* Usage: <div class="timelinesummary" */
    border: thin solid #ddcef2;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 0.5em #888888;
    background: #FFFFCC;
    min-width: 77em;
    margin: 1em auto 3em auto;
    padding: 1em;
    text-align: center;
}
.timelinelinks {                      /* Usage: <div class="timelinelinks"> for Timelinenav template */
    text-align: center;
    font-size: 132%;
    font-weight: bold;
}
.timelinelinks a {                    /* Usage: for Timelinenav template, link text color */
    color: #B5BD64;                  /* #B5BD64 (light mustard) */
}
.greentext {                          /* Usage: <span class="greentext">vaniquotes.org</span> */
    color: #296F39;                  /* #296F39=green */
}
.quotelink {                          /* Usage: <span class="quotelink">vaniquotes.org</span> for quote boxes */
    font-size: 1em;
    font-weight: bold;
    color: #296F39;                  /* #296F39=green */
}
.nectardroptext {                    /* Usage: <span class="nectardroptext">"Text"</span> for Nectar Drop boxes */
    font-size: 1em;
    font-weight: bold;
    color: #296F39;                  /* #296F39=green */
}
.firstchar {                          /* Usage: <span class="firstchar">A</span> */
    float: left;
    width: 0.7em;
    font-size: 375%;
    font-family: algerian, courier;
    line-height: 80%;
}
.daystext {                            /* Usage: <span class="daystext">Text Here</span> */
    color: #296F39;                    /* #296F39 = Green used for Video info on the Day in the life pages */
}
.daystextb {                          /* Usage: <span class="daystextb">Text Here</span> */
    color: #296F39;                    /* #296F39 = Green used for Video info on the Day in the life pages */
    font-weight: bold;
}
.MITL_page_nav {                      /* Usage: <div class="MITL_page_nav" */
     text-align: left;
     text-align: left;
     border: 1px solid #BFBFBF;
     vertical-align: middle;
    background: #FFF2E6;             
    padding: 0.2em 0.4em;
    margin: auto
}
.daysnav,.monthsnav {                  /* For D/MITL desktop & mobile */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.daysnav .month {
    margin: 25px 2%;
}
.monthsnav .year {
    margin: 25px 5%;
}
 
/* ----------------- Book styles (BG is done) ----------------- */
.devanagari {                    /* Usage: <div class="devanagari"> */
    color: #000000;              /* Font color #0000 = black */
    font-weight: bold;
}
@font-face {
    font-family: interDiac;
    src: url(/css/GauraTimes.ttf);      /* Vedabase font */
}
.verse {                                /* Usage: <div class="verse"> */
    color: #000000;                    /* Font color #0000 = black */
    font-style: italic;
}
.verse.inter_diac {                    /* Usage: <div class="verse inter_diac"> */
    font-family: interDiac;            /* International diacritics */
}
.synonyms {                            /* Usage: <div class="synonyms"> */
    color: #000000;
}
.synonyms.inter_diac {                  /* Usage: <div class="synonyms inter_diac"> */
    font-family: interDiac;            /* International diacritics */
}
.translation {                          /* Usage: <div class="translation"> */
    color: #000000;                    /* #296F39 = green */
    font-weight: bold;
}
}
.translation.inter_diac {               /* Usage: <div class="translation inter_diac"> */
.lec_code { font-weight: bold; }
    font-family: interDiac;             /* International diacritics */
.code { font-weight: bold; font-size: 90%; }
    font-size: 1.1em;
.highlight_quote { background-color: #F9F7E0; margin: 0px; padding: 4px 2px; }
.highlight_terms { background-color: #EEE8AA; }
.hlterm {
    background-color: yellow;
    border: 1px Solid #EE9977;
    padding: 1px 2px 1px 2px;
    margin: -1px;
}
}
.purport {                              /* Usage: <div class="purport"> */
a[href*="syno_o"]:visited { color: purple; }
    color: #000000;
}
.purport.inter_diac {                  /* Usage: <div class="purport inter_diac"> */
    font-family: interDiac;            /* International diacritics */
    font-size: 1.1em;
}
*:not(a).text {                                /* Usage: <div class="text"> */
    color: #000000;                    /* Font color #0000 = black */
}
.text.inter_diac {                      /* Usage: <div class="text inter_diac"> */
    font-family: interDiac;            /* International diacritics */
    font-size: 1.1em;
}
.SB65verse {                     /* 1962-65 SB */
    white-space: pre-line;      /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;      /* Internet Explorer 5.5+ */
    text-align: center;          /* Center or margin-left:1.5em; = a : colon. Only if not using text-align: center;*/
    color: #000000;             /* Font color #0000 = black */
}
/* ----------------- End book styles (BG is done) ----------------- */


/* --- Begin OLD book styles SB, CC (These #IDs should be replaced with .classes as above) --- */
.timelineh2 { text-align: center; border: 1px solid #ddcef2; background: #F2F2F2; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
#verse {
.timelineh3 { text-align: center; border-top: 1px solid #ddcef2; border-bottom: 1px solid #ddcef2; background: #FFFFFF; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
  white-space: pre;
.timelinesummary { border: thin solid #ddcef2; border-radius: 1em; box-shadow: 0.5em 0.5em 0.5em #888888; background: #FFFFCC; min-width: 77em; margin: 1em auto 3em auto; padding: 1em; text-align: center; }
}
.timelinelinks { text-align: center; font-size: 132%; font-weight: bold; }
#text {                          /* Used for verses and was: font-style: italic; */
.timelinelinks a { color: #B5BD64; }
}
#synonyms {                      /* Usage: <div id="synonyms"> */
}
#translation {                   /* Usage: <div id="translation"> */
    color: #000000;            
    font-weight: bold;
}
#purport {                       /* Usage: <div id="purport"> */
}
/* ----------------- End old books styles BG, SB, CC ----------------- */


/* -------------------- BEGIN NEW COMPILE FORM -------------------- */
.firstchar { float: left; width: 0.7em; font-size: 375%; font-family: algerian, courier; line-height: 80%; }
.quote {
.MITL_page_nav { text-align: left; border: 1px solid #BFBFBF; background: #FFF2E6; padding: 0.2em 0.4em; margin: auto; }
    margin: 1.5em 0em;             /* Places 20px space between quotes on multi-quote pages */
.daysnav, .monthsnav { display: flex; flex-wrap: wrap; justify-content: center; }
    font-family: tahoma;
.daysnav .month { margin: 25px 2%; }
}
.monthsnav .year { margin: 25px 5%; }
.quote_heading {
.center { text-align: center; }
    font-weight: bold;
    color: #296F39;  
}
.quote_translation {
    font-weight: bold;
    color: #000000;
}
.quote_link {                     /* Vanisource link */
    font-weight: bold;
}
.quote_text {
    color: #000000;
}
.quote_verse {                     /* To center use: text-align: center; */
    color: #000000;
}
.quote_text a {                    /* Makes the Vanisource verse links bold */
    font-weight: bold;
}
/* -------------------- END NEW COMPILE FORM -------------------- */


/* -------------------- BEGIN MAIN PAGE CODING -------------------- */
/* ==========================================================================
  2. VANISOURCE BOOK STYLES
  ========================================================================== */
@font-face { font-family: interDiac; src: url(/css/GauraTimes.ttf); }
.devanagari { color: #000000; font-weight: bold; }
.verse { color: #000000; font-style: italic; }
.versecenter { color: #000000; font-style: italic; text-align: center; }
.verse.inter_diac, .synonyms.inter_diac, .translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-family: interDiac; }
.translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-size: 1.1em; }
.synonyms { color: #000000; }
.translation { color: #000000; font-weight: bold; }
.purport { color: #000000; }
*:not(a).text { color: #000000; }
.SB65verse { white-space: pre-line; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; text-align: center; color: #000000; }
#verse { white-space: pre; }
#translation { color: #000000; font-weight: bold; }


.MainHeader h4 {
/* ==========================================================================
    margin:0!important;
  3. VANISOURCE LEGACY COMPILE & MAIN PAGE CODING
    padding:0.2em 0.4em;
  ========================================================================== */
}
.quote { margin: 1.5em 0em; font-family: tahoma; }
#mainbanner {
.quote_heading { font-weight: bold; color: #296F39; }
    text-align:center;
.quote_translation, .quote_text, .quote_verse { color: #000000; }
    background: #345B63;
.quote_link, .quote_text a { font-weight: bold; }
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    color: #D4ECDD;
    font-family:georgia;
    font-size:150%;
    font-style:italic;
}
#mainlinks {
    text-align:center;
    font-weight:bold;
    font-size: 110%;
    margin-bottom:0.5em
}
#mainlinks a {
    color:#B5BD64
}
#mainmantra {
    text-align:center;
    margin-top:1.5em;
    color:#B5BD64;
}
.maincenter {
    text-align:center;
    max-width:65em;
    margin:0px auto;
    padding-bottom:1em;
}


/* Don't display some stuff on the main page */
body.page-Main_Page h1.firstHeading, body.page-Main_Page #t-cite, body.page-Main_Page #lastmod, body.page-Main_Page #siteSub { display: none !important; }
body.page-Main_Page #t-cite,
.MainHeader h4 { margin:0!important; padding:0.2em 0.4em; }
body.page-Main_Page #lastmod,  
body.page-Main_Page #siteSub,
}


/* -------------------- END MAIN PAGE CODING -------------------- */
body.page-Main_Page h2, body.page-Talk_Main_Page h2, body.page-Main_Page_test h2, body.page-Main_Page_test h1 { background: #f0f0f0; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; margin: 1em 0; color: #B5BD64; font-family: georgia; font-weight: bold; text-align: center; }
#banner { text-align: center; background: #f9f9f9; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; font-size: 125%; }
#mainbanner { text-align: center; background: #296F39; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; color: #faf2af; font-family: georgia; font-size: 150%; font-style: italic; }
#mainlinks { text-align: center; margin-bottom: 0.5em; font-weight: bold; font-size: 110%; }
#mainlinks a, #mainh2links a { color: #B5BD64; }
#mainmantra { text-align: center; margin-top: 1.5em; color: #B5BD64; }
.maincenter { text-align: center; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainleft { text-align: left; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainjustify { text-align: justify; max-width: 65em; margin: 0px auto; padding-bottom: 1em; }


/* -------------------- BEGIN CODING TO IDENTIFY AND SORT OUT -------------------- */
.vaniquotebox { text-align: left; min-height: 11.6em; border:thin solid #000000; border-radius: 1em; box-shadow: 0.5em 0.5em 1em #bcbcbc; margin: 1em 0em; }
@media screen and (min-width: 800px) { .vaniquotebox { max-width:80%; } }
.vaniquotebox > table { text-align:left; font-size:1em; color:#000000; min-height: 11.5em; margin: 0; }
.vaniquotebox td { padding: 8px; }


/* 1. Override core Vector 2022 background CSS variables */
/* ==========================================================================
:root,
  4. VECTOR 2022 STRUCTURAL OVERRIDES (BRAND COLORS MATCHED)
.skin-vector-2022,
  ========================================================================== */
html {
:root, .skin-vector-2022, html {
     --background-color-base: #D4ECDD !important;
     --background-color-base: #faf2af !important;
     --background-color-page: #D4ECDD !important;
     --background-color-page: #faf2af !important;
     --background-color-quiet: #D4ECDD !important;
     --background-color-quiet: #faf2af !important;
     --border-color-base: transparent !important;  
     --border-color-base: transparent !important;  
}
}


/* 2. Unify legacy elements and set global font */
body, #content, .mw-body, #mw-page-base, #mw-head-base {
body,  
     background: #faf2af !important;  
#content,  
.mw-body,
#mw-page-base,  
#mw-head-base {
     background: #D4ECDD !important;  
     background-image: none !important;  
     background-image: none !important;  
     font-family: tahoma;
     font-family: tahoma;
}
}


#headertabs {
.mw-page-container, .mw-page-container-inner, .mw-content-container, .mw-header,
    background: inherit;
.vector-header-container, .vector-sticky-header, .vector-column-start, .vector-column-end,
}
.vector-sidebar-container, .vector-pinnable-element, .vector-toc, #vector-toc,
#headertabs ul li.ui-state-active {
.vector-toc-pinned-container, .vector-toc-contents, .vector-dropdown-content,
  background: #D4ECDD;
.vector-menu-content, .cdx-menu, .cdx-menu__list {
}
     background-color: #faf2af !important;
 
/* 3. Force teal and remove borders on all Vector 2022 UI containers, sidebars, and Codex menus */
.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-header,
.vector-header-container,
.vector-sticky-header,
.vector-column-start,
.vector-column-end,
.vector-sidebar-container,
.vector-pinnable-element,
.vector-toc,
#vector-toc,
.vector-toc-pinned-container,
.vector-toc-contents,
.vector-dropdown-content,
.vector-menu-content,
.cdx-menu,
.cdx-menu__list {
     background-color: #D4ECDD !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}
 
/* ------------------------------------ */
 
div.thumb {          /* Remove white border from thumbnails */
    border: none;
}
div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;
}
#lastmod {
    display:none
}
 
li#ca-unify {
    margin-left:1.6em;
}
#google-search input {
    font-size:95%;
    width:10.9em;
}
#searchform {
    padding-bottom:0.5em
}
#p-logo a, #p-logo a:hover {
    height:190px;
}
#column-one {
    padding-top:190px;
}
#p-navigation {
    padding-top:30px;
}
.ac_results {
    padding: 0px;
    border: 1px solid black;
    background-color: Window;
    overflow: hidden;
    z-index: 99999;
}
.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    /* if width will be 100% horizontal scrollbar will appear when scroll mode will be used */
    /* width: 100%; */
    font: menu;
    font-size: 12px;
    /* it is very important, if line-height not set or set in relative units scroll will be broken in firefox */
    line-height: 16px;
    overflow: hidden;
}
.ac_loading {
    background: Window url('indicator.gif') right center no-repeat;
}
.ac_odd {
    background-color: #eee;
}
.ac_over {
    background-color: aquamarine;
    color: HighlightText;
}
.ac_moreItems {
    text-align: center;
    background-color: InactiveCaption;
    color: InactiveCaptionText;
    margin: 0px;
    padding: 0px 5px;
    cursor: default;
    display: block;
    width: 100%;
    font: bold menu 12px;
    overflow: hidden;
    -moz-user-select: none;
    -khtml-user-select: none;
}
 
/* -------------------- BEGIN MAIN PAGE TEST -------------------- */
 
body.page-Main_Page_test h1 {
    background:#f0f0f0;            /* was background:#faf5ff; */
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    margin:1em 0;
    color:#B5BD64;                /* font color */
    font-family:georgia;
    font-weight:bold;
    font-size: 140%;
    text-align:center;
}
body.page-Main_Page_test h2 {
    background:#f0f0f0;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    padding:0.3em;
    margin:1em 0;
    color:#000000;
    font-family:georgia;
    font-weight:bold;
    font-size: 110%;
    text-align:center;
}
 
#mainh2links a {
    color:#B5BD64
}
/* -------------------- END MAIN PAGE TEST -------------------- */
 
/* --------------- DONATION PAGE - http://vanipedia.org/wiki/Special:IframePage/Donation --------------------*/
 
#iframeframe {
height: 800px;
}
 
/* -------------------- END CODING TO IDENTIFY AND SORT OUT -------------------- */
 
/* 2020-11-27 Elad: Scale and center main page banners */
a[href*='MainPage']::after {
    content: 'a';
    font-size: 50px;
    visibility: hidden;
}
 
img[src*='MainPage'] {
    transform: scale(1.225) translateX(9%);
}
/* End mainpage banners */
 
/* Main page mobile view classes */
@media screen and (max-width: 768px) {
  .MainPageBG {
    display: inline-table;
  }
  #mp-upper > tbody > tr {
    display: table-cell;
  }
  #mp-upper > tbody > tr > td:nth-child(2) {
    display: none;
  }
 
  /* 1. Stack the 5-column theme analysis sections vertically */
  .theme-analysis-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
 
  /* 2. Prevent the timeline from breaking the mobile viewport */
  .timelinesummary {
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
    margin: 1em auto;
  }
 
  /* 3. Make fixed-width captions flexible on mid-sized screens */
  .youtube_right .thumbcaption,
  .youtube_left .thumbcaption {
    width: auto;
    max-width: 100%;
  }
 
  /* 4. Ensure old table layouts don't cause horizontal scroll */
  .vanitable {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
}
 
@media screen and (max-width: 400px)
{
  #mp-upper div[style*="40em"] {
    width: 78vw !important;
  }
  #mp-upper > tbody > tr > td:nth-child(1) {
    border-bottom: none !important;
  }
  .youtube_right .thumbcaption, .youtube_left .thumbcaption {
    width: 69vw !important;
  }
  #mp-upper .embedvideowrap {
    width: 69vw !important;
  }
  #mp-upper .embedvideo {
    padding: 0px !important;
  }
  #mp-upper div[style*="24em"] {
    width: unset !important;
  }
  #mp-upper .embedvideo iframe {
    width: 67vw;
  }
  #mp-upper div[style*="32em"] { /* right-to-left languages */
    min-width: 80vw !important;
  }
}
@media screen and (max-width: 320px)
{
  #mp-upper .embedvideo iframe {
    width: 70vw;
  }
  .youtube_right .thumbcaption, .youtube_left .thumbcaption {
    width: 69vw;
  }
  #mp-upper .embedvideo {
    width: 71vw !important;
  }
  #mp-upper .embedvideowrap {
    width: 67vw !important;
  }
  .NectarDropBox
  {
    min-width: 17.5em !important;
  }
  #mp-right > tbody > tr:nth-child(4) > td
  {
    padding: 0 0 0 .5em !important;
  }
  #mp-right > tbody > tr:nth-child(6) > td
  {
    padding: 0 0 0 .4em !important;
  }
  #mp-upper div[style*="32em"] { /* right-to-left languages */
    min-width: 86vw !important;
  }
}
/* End main page mobile view classes */
 
/* Generic center class */
div.center
{
    text-align: center;
}
 
/* Nectar drop classes */
@media only screen and (max-width: 640px)
{
    div.NectarDropBox
    {
        max-width: 30%;
    }
}
 
.vaniquotebox
{
    text-align: left;
    min-height: 11.6em;
    border:thin solid #000000;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 1em #bcbcbc;
    margin: 1em 0em;
}
@media screen and (min-width: 800px)
{
    .vaniquotebox {
        max-width:80%;
    }
}
.vaniquotebox > table
{
    text-align:left;
    font-size:1em;
    color:#000000;
    min-height: 11.5em;
    margin: 0;
}
 
.vaniquotebox td
{
    padding: 8px;
}
 
/* Put spacing between the YouTube video player and text that flows around it */
 
/* left-to-right languages */
.youtube_right .embedvideo
{
    padding: 10px;
}
 
.youtube_right .thumbcaption, .youtube_left .thumbcaption
{
    width: 330px;
}
 
/* right-to-left languages */
.youtube_left .embedvideo
{
    padding: 10px;
}
 
.rtltoc ul
{
    text-align: right !important;
    direction: rtl;
}
 
.rtltoc .tocnumber {
    padding-left: 0.5em;
    padding-right: 0;
}
 
.rtltoc .toctitle
{
    direction: rtl;
}
 
.rtltoc.ar .toctitle::before {
    content: "محتويات";
}
 
.rtltoc.he .toctitle::before {
    content: "תוכן עניינים";
}
 
.rtltoc.he,.rtltoc.ar {
    font-weight: bold;
    font-weight: sans-serif;
}
 
.rtltoc.he h2,.rtltoc.ar h2
{
    display: none !important;
}
 
/* Kasya */
/* Custom Wikipedia-style Hover Popup Alternative */
a[title]:hover::after {
    content: "Preview: " attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--background-color-page, #ffffff);
    color: var(--color-base, #202122);
    padding: 12px 16px;
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    width: 280px;
    z-index: 10000;
}
/* -------------------- THEME ANALYSIS PAGE STRUCTURE -------------------- */
/* 5-Column Grid */
.theme-analysis-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 2em 0;
}
 
.theme-column {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px;
    border: 1px solid #B5BD64;
    border-radius: 8px;
}
 
/* Formats the links cleanly inside each column */
.theme-column ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
 
.theme-column li {
    margin-bottom: 10px;
    font-weight: bold;
}
 
/* Eliminate structural white borders and force structural columns to teal */
.vector-column-start,
.vector-column-end,
.vector-toc,
#vector-toc,
.vector-pinnable-element,
.mw-body,
.mw-page-container-inner,
.vector-sidebar-container {
    border: none !important;
    background-color: #D4ECDD !important;
}
 
/* Override core Vector 2022 background CSS variables */
:root,
.skin-vector-2022,
html {
    --background-color-base: #D4ECDD !important;
    --background-color-page: #D4ECDD !important;
    --background-color-quiet: #D4ECDD !important;
    --border-color-base: transparent !important; /* Neutralizes structural borders */
}
 
/* Force the specific grid columns and pinned containers to adopt the teal */
.vector-sidebar-container,
.vector-column-start,
.vector-column-end,
.vector-toc-pinned-container,
.vector-pinnable-element,
.mw-page-container,
.mw-page-container-inner {
    background-color: #D4ECDD !important;
    background-image: none !important;
    border: none !important;
}
 
/* Wit & Wisdom Card Hover Effects */
.ww-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ww-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}
 
.ww-image-layer {
  transition: transform 0.5s ease;
}
.ww-card:hover .ww-image-layer {
  transform: scale(1.05);
}
 
.ww-text-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.ww-card:hover .ww-text-arrow {
  transform: translateX(4px);
}
 
/* Portal Books Accordion Styles */
.book-accordion-report {
    background: #FDF2D5;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
 
/* --- ENHANCED PORTAL BOOKS ACCORDION --- */
 
/* The Main Container */
.book-accordion {
    background: #f8f9fa; /* A very soft grey for the inside area */
    border: none;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); /* Deeper, softer shadow */
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
 
/* The Clickable Header Bar */
.book-accordion-header {
    background-color: #3a5c6e;
    color: #ffffff;
    padding: 16px 20px 16px 60px; /* Top: 16px, Right: 20px, Bottom: 16px, Left: 60px */
    font-size: 18px;
    font-weight: bold;
    border-bottom: 3px solid #2a4452;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}
 
/* Header Hover Effect */
.book-accordion-header:hover {
    background-color: #466e84; /* Lightens the bar slightly on hover */
}
 
/* Fix for the standard MediaWiki Collapse/Expand Button */
.book-accordion .mw-collapsible-toggle {
    float: right;
    font-weight: normal;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 20px; /* Makes it a pill shape */
    margin-top: -2px;
}
 
/* Target the link inside the toggle to ensure it stays white */
.book-accordion .mw-collapsible-toggle a {
    color: #ffffff !important;
    text-decoration: none;
}
 
.book-accordion .mw-collapsible-toggle a:hover {
    text-decoration: underline;
}
 
/* The Content Area */
.book-accordion-content {
    padding: 24px;
}
 
/* The Grid Setup */
.book-grid-list {
    column-width: 280px;
    column-gap: 20px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.book-grid-list li {
    margin-bottom: 12px;
    break-inside: avoid;
}
 
/* Mini-Card Links */
.mw-parser-output .book-grid-list li a,
.mw-parser-output .book-grid-list li a.external {
    display: block !important;
    padding: 8px 16px !important;
    background-color: #ffffff !important;
    background-image: none !important; /* Safely removes the external link icon */
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px;
    text-decoration: none;
    color: #1a5e9a;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
 
/* Mini-Card Hover Effect */
.mw-parser-output .book-grid-list li a:hover,
.mw-parser-output .book-grid-list li a.external:hover {
    background-color: #f4f8fc !important;
    border-color: #1a5e9a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26,94,154,0.12);
}
 
/* Mini-Card Hover Effect */
.book-grid-list li a:hover {
    background-color: #f4f8fc;
    border-color: #1a5e9a;
    transform: translateY(-2px); /* Lifts the card up slightly */
    box-shadow: 0 4px 10px rgba(26,94,154,0.12); /* Subtle blue glow */
}
 
/* --- Solid Buttons with a Padded Outer Frame (Pseudo-Element Method) --- */
 
.vision-btn.btn-framed {
    position: relative !important; /* Required to anchor the frame */
    margin: 12px !important; /* Ensures there is room for the frame to render */
}
 
/* This draws the actual frame 6px outside the button */
.vision-btn.btn-framed::after {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border: 2px solid #3a5c6e !important; /* The teal frame */
    border-radius: 6px !important; /* Slightly rounded to match the button */
    pointer-events: none; /* Ensures the frame doesn't block you from clicking the button */
}
 
/* Changes the frame color when you hover over the button */
.vision-btn.btn-framed:hover::after {
    border-color: #466e84 !important;
}
 
/* Mobile Responsiveness for Custom Book Grids */
@media screen and (max-width: 720px) {
    .book-grid-list {
        /* Forces the grid to stack into a single vertical column on small screens */
        grid-template-columns: 1fr;
        display: block;
    }
   
    /* Adjust padding for smaller screens if necessary */
    .book-accordion-content {
        padding: 10px;
    }
}
 
/* ----------------------------------------------------
  FIX: Mobile-Only Image Scaling (Leaves Desktop Intact)
---------------------------------------------------- */
@media screen and (max-width: 768px) {
    .mw-parser-output img {
        max-width: 100%;
        height: auto !important;
    }
}
 
/* Don't show external-link icon for image-only links */
.mw-parser-output a.external:has(img) {
    background-image: none !important;
    padding-right: 0 !important;
}
 
/* Responsive Layout for Image & Button Grids */
.compilation-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin: 20px auto;
    max-width: 1000px;
}
 
.compilation-image {
    flex: 1 1 300px;
    text-align: center;
    max-width: 450px;
}
 
.compilation-button-grid {
    flex: 1 1 400px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
}
 
.compilation-btn {
    background-color: #3a5c6e;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 3px solid #2a4452;
    border-radius: 4px;
    text-align: center;
}
 
.compilation-btn a {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
}
 
.compilation-btn-full {
    grid-column: 1 / -1;
}
 
/* Defines the layout for the main container holding all columns */
.theme-analysis-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Creates exactly 5 equal columns */
    gap: 15px; /* Adds consistent breathing room between the columns */
    width: 100%;
    box-sizing: border-box;
}
 
/* Optional but highly recommended: Make it stack nicely on smaller screens */
@media screen and (max-width: 900px) {
    .theme-analysis-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}
 
@media screen and (max-width: 600px) {
    .theme-analysis-grid {
        grid-template-columns: 1fr; /* 1 single column on mobile */
    }
}
 
/* =========================================================
  MEDIA SNIPPETS OVERFLOW FIX (The Nuclear Option)
  ========================================================= */
 
/* 1. Target the main column boxes by their unique background color */
.mw-parser-output div[style*="#feffe1"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Force-stops ANY visual spilling */
}
 
/* 2. Target the nested inner divs and forcefully strip their hardcoded 300px widths */
.mw-parser-output div[style*="#feffe1"] div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
 
/* 3. Keep images, video frames, and MediaWiki file wrappers strictly contained */
.mw-parser-output div[style*="#feffe1"] img,
.mw-parser-output div[style*="#feffe1"] iframe,
.mw-parser-output div[style*="#feffe1"] .embedvideo,
.mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 auto !important; /* Centers the media nicely */
}
 
/* ----------------------------------------------------
  Responsive Layout for Vision/About Section
---------------------------------------------------- */
.vision-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin: 30px auto;
    max-width: 950px;
}
 
.vision-logo {
    flex: 1 1 300px;
    text-align: center;
    max-width: 350px;
}
 
.vision-buttons-container {
    flex: 1 1 450px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
}
 
/* Forces the columns to stay exactly 250px wide and stack vertically */
.vision-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 250px;
}
 
/* The exact styling for the dark blue buttons */
.vision-btn {
    background-color: #3a5c6e;
    border-bottom: 3px solid #2a4452;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    width: 100%;
}
 
.vision-btn:hover {
    background-color: #466e84;
}
 
/* Stretches the clickable link and restores your exact padding/font */
.vision-btn a,
.vision-btn a.external {
    display: block;
    box-sizing: border-box;
    padding: 22px 24px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
 
/* ----------------------------------------------------
  Responsive Layout for Community Section
---------------------------------------------------- */
.community-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 40px auto;
    max-width: 1100px;
}
 
.community-image-container {
    flex: 1 1 550px;
    text-align: center;
}
 
.community-image-container img {
    max-width: 100%;
    height: auto !important;
}
 
.community-social-container {
    flex: 1 1 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px;
}
 
/* Desktop Zigzag Layout */
.social-zigzag {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    gap: 15px;
}
 
.social-item-center { align-self: center; }
.social-item-right { align-self: flex-end; margin-right: 15px; }
.social-item-left { align-self: flex-start; margin-left: 15px; }
 
.social-zigzag a {
    display: inline-block;
    transition: transform 0.2s ease;
}
 
.social-zigzag a:hover {
    transform: scale(1.08);
}
 
/* Mobile Layout: Converts zigzag to a centered cluster */
@media screen and (max-width: 768px) {
    .social-zigzag {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        gap: 20px;
    }
   
    .social-item-center,
    .social-item-right,
    .social-item-left {
        align-self: auto;
        margin: 0;
    }
}
 
/* Center all content within the site notice / header banner */
#siteNotice {
    text-align: center;
}
 
/* Force the social icons list to display horizontally and centered */
#siteNotice ul {
    display: flex !important;
    justify-content: center;
    list-style-type: none !important; /* Removes any default Vector bullets */
    padding: 0;
    margin: 10px 0;
    gap: 15px; /* Adds space between the icons */
}
 
/* Remove Vector's default left-margin on list items */
#siteNotice ul li {
    margin: 0 !important;
    display: inline-block;
}
 
/* Ensure the dark teal bar is properly spaced */
#siteNotice .your-teal-bar-class {
    margin-top: 15px; /* Adjust if it feels too close to the links */
}
 
/* Only hide these tabs if the JavaScript determines the user is NOT authorized */
body.restricted-ui #ca-history,
body.restricted-ui #ca-talk,
body.restricted-ui #ca-viewsource {
    display: none !important;
}
 
/* =========================================================
  NIGHT MODE / DARK MODE OVERRIDES
  ========================================================= */
 
/* 1. Target the specific dark mode class applied by the Vector toggle */
html.skin-theme-clientpref-night {
    --background-color-base: #121212 !important;
    --background-color-page: #121212 !important;
    --background-color-quiet: #1a1a1a !important;
    --color-base: #e2e8f0 !important;
}
 
/* 2. Global background and text color overrides */
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night #content,
html.skin-theme-clientpref-night .mw-body,
html.skin-theme-clientpref-night #mw-page-base,
html.skin-theme-clientpref-night #mw-head-base {
    background: #121212 !important;
    color: #e2e8f0 !important;
}
 
/* 3. Unified Vector 2022 UI containers and Codex menus */
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-page-container-inner,
html.skin-theme-clientpref-night .mw-content-container,
html.skin-theme-clientpref-night .mw-header,
html.skin-theme-clientpref-night .vector-header-container,
html.skin-theme-clientpref-night .vector-sticky-header,
html.skin-theme-clientpref-night .vector-column-start,
html.skin-theme-clientpref-night .vector-column-end,
html.skin-theme-clientpref-night .vector-sidebar-container,
html.skin-theme-clientpref-night .vector-pinnable-element,
html.skin-theme-clientpref-night .vector-pinnable-header,
html.skin-theme-clientpref-night .vector-pinned-container,
html.skin-theme-clientpref-night .vector-toc,
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-toc-pinned-container,
html.skin-theme-clientpref-night .vector-toc-contents,
html.skin-theme-clientpref-night .vector-menu-content,
html.skin-theme-clientpref-night .vector-appearance-pinned-container,
html.skin-theme-clientpref-night .vector-page-toolbar-container,
html.skin-theme-clientpref-night .vector-page-toolbar,
html.skin-theme-clientpref-night .cdx-menu,
html.skin-theme-clientpref-night .cdx-menu__list,
html.skin-theme-clientpref-night .cdx-menu-item,
html.skin-theme-clientpref-night .cdx-radio,
html.skin-theme-clientpref-night #vector-appearance {
    background-color: #121212 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}
 
/* 4. Fix specific custom components (Cards, Columns, Book Accordions) */
html.skin-theme-clientpref-night .theme-column {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #4a5568 !important;
}
 
html.skin-theme-clientpref-night .book-accordion {
    background: #1a1a1a !important;
    border-color: #333 !important;
}
 
html.skin-theme-clientpref-night .book-accordion-header {
    background-color: #2d3748 !important;
    border-bottom: 3px solid #1a202c !important;
}
 
html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a,
html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a.external {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #90cdf4 !important;
}
 
html.skin-theme-clientpref-night .mw-parser-output .book-grid-list li a:hover {
    background-color: #4a5568 !important;
}
 
html.skin-theme-clientpref-night .quote_text,
html.skin-theme-clientpref-night *:not(a).text {
    color: #e2e8f0 !important;
}
 
/* 5. Fix the Search Bar and Auto-suggest Dropdown */
html.skin-theme-clientpref-night .cdx-text-input,
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .cdx-search-input__input-wrapper,
html.skin-theme-clientpref-night .vector-typeahead-search-container {
    background-color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
 
html.skin-theme-clientpref-night .cdx-text-input__input {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}
 
html.skin-theme-clientpref-night .cdx-text-input__input::placeholder {
    color: #a0aec0 !important;
}
 
html.skin-theme-clientpref-night .cdx-search-input__end-button {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}
 
html.skin-theme-clientpref-night .cdx-typeahead-search__menu {
    background-color: #121212 !important;
    border: 1px solid #333 !important;
}
 
html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-theme-clientpref-night .cdx-menu-item--selected {
    background-color: #2d3748 !important;
}
 
/* 6. Invert external iframes and override inline widget colors */
html.skin-theme-clientpref-night .vanipedia-clock iframe {
    filter: invert(0.92) hue-rotate(180deg) !important;
}
 
html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color: #ede9ce"],
html.skin-theme-clientpref-night .mw-parser-output div[style*="background-color:#ede9ce"] {
    background-color: #121212 !important;
    border-color: #333 !important;
    color: #e2e8f0 !important;
}
 
html.skin-theme-clientpref-night .mw-parser-output div[style*="#ede9ce"] a,
html.skin-theme-clientpref-night .oo-ui-panelLayout-framed a {
    color: #90cdf4 !important;
}
 
html.skin-theme-clientpref-night .oo-ui-panelLayout-framed,
html.skin-theme-clientpref-night .oo-ui-tabPanelLayout {
    background-color: #121212 !important;
    border: 1px solid #333 !important;
    color: #e2e8f0 !important;
}
 
html.skin-theme-clientpref-night .oo-ui-fieldsetLayout,
html.skin-theme-clientpref-night .oo-ui-widget {
    background-color: transparent !important;
    color: inherit !important;
}
 
/* 7. Scrollbars and Edge Stripes Cleanup */
html.skin-theme-clientpref-night #vector-toc,
html.skin-theme-clientpref-night .vector-dropdown-content {
    scrollbar-color: #3b4b5f #1a202c !important;
}
 
html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar {
    width: 8px !important;
}
 
html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-track,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-track {
    background: #1a202c !important;
}
 
html.skin-theme-clientpref-night #vector-toc::-webkit-scrollbar-thumb,
html.skin-theme-clientpref-night .vector-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #3b4b5f !important;
    border-radius: 4px !important;
}
 
html.skin-theme-clientpref-night #vector-toc .vector-toc-list-item-active {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
 
html.skin-theme-clientpref-night .vector-sticky-pinned-container::after,
html.skin-theme-clientpref-night .vector-sticky-pinned-container::before,
html.skin-theme-clientpref-night .vector-pinned-container::after,
html.skin-theme-clientpref-night .vector-pinned-container::before {
    background-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
 
/* 8. Dark Mode Sidebar Menu Widgets & Headers */
html.skin-theme-clientpref-night .vector-dropdown-content {
    background-color: #253141 !important;
    border: 1px solid #3b4b5f !important;
    border-radius: 4px !important;
    padding: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}
 
html.skin-theme-clientpref-night .vector-dropdown-content a,
html.skin-theme-clientpref-night .vector-dropdown-content a *,
html.skin-theme-clientpref-night #vector-main-menu a,
html.skin-theme-clientpref-night #vector-main-menu a * {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}
 
html.skin-theme-clientpref-night .vector-dropdown-content a:hover,
html.skin-theme-clientpref-night .vector-dropdown-content a:hover *,
html.skin-theme-clientpref-night #vector-main-menu a:hover,
html.skin-theme-clientpref-night #vector-main-menu a:hover * {
    color: #ffffff !important;
    background-color: #3b4b5f !important;
    border-radius: 2px !important;
    text-decoration: none !important;
}
 
html.skin-theme-clientpref-night #vector-main-menu .vector-menu-heading,
html.skin-theme-clientpref-night .vector-dropdown-content .vector-menu-heading {
    background-color: #3b4b5f !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-bottom: 4px !important;
    border: 1px solid #4a5568 !important;
}
 
.vanipedia-sidebar-menu.vanipedia-collapsed:has(.vector-menu-content-list:empty) {
    display: none !important;
}
 
/* =========================================================
  LIGHT MODE OVERRIDES
  ========================================================= */
 
/* 1. Global Light Mode Layout Variables */
html:not(.skin-theme-clientpref-night) {
    --background-color-base: #D4ECDD !important;
    --background-color-page: #D4ECDD !important;
    --background-color-quiet: #D4ECDD !important;
}
 
html:not(.skin-theme-clientpref-night) body,
html:not(.skin-theme-clientpref-night) .mw-page-container,
html:not(.skin-theme-clientpref-night) .mw-page-container-inner {
    background-color: #D4ECDD !important;
     background-image: none !important;
     background-image: none !important;
}
/* 2. Light Mode Sidebar & Menu Backgrounds */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container {
    background-color: #EEF2F9 !important;
    --background-color-interactive: #EEF2F9 !important;
}
/* Give the floating dropdown a visible box in Light Mode */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content {
    background-color: #ffffff !important; /* Clean white background */
    border: 1px solid #c8ccd1 !important; /* Soft grey border */
    border-radius: 4px !important;
    padding: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* Soft shadow */
}
/* Ensure inner wrappers don't double-pad or override the box */
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
/* 3. Light Mode Sidebar Menu Typography & Headers */
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading,
html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading {
    background-color: #345B63 !important; /* Dark teal background for headers */
    color: #ffffff !important; /* White text */
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-bottom: 4px !important;
}
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link {
    color: #2F5E5E !important;
}
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover,
html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover {
    color: #0645ad !important;
    background-color: #EEF2F9 !important; /* Soft hover highlight */
    border-radius: 2px !important;
}
/* =========================================================
  GLOBAL OVERRIDES (BOTH MODES)
  ========================================================= */
#mainbanner {
    margin: 0 !important;
    padding: 0 !important;
     border: none !important;
     border: none !important;
}
}


.mw-body,
#headertabs { background: inherit; }
#content,
#headertabs ul li.ui-state-active { background: #fef8cb; }
.mw-body-content,
#mw-content-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    border: none !important;
    outline: none !important;
}
 
/* Personality Landing Hero */
 
.personality-card {
    max-width: 1100px;
    margin: 0 auto 35px auto;
    background: #91cfa9;
    border: 1px solid #7FA28B;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}
 
.personality-hero {
    display: flex;
    gap: 28px;
    align-items: center; /* This centers the shorter column (image or text) vertically */
}
 
.personality-image {
    flex: 0 0 396px;
    text-align: center;
}
 
.personality-image img {
    max-width: 360px;
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    padding: 4px;
    background: #E7F3E5;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}


/* Keep the title fix you applied earlier! */
div.thumb { border: none; }
.personality-title {
div.tright { border: none; margin: 0.5em 0 0.8em 1.4em; }
    font-size: 180%;
div.tleft { border: none; margin: 0.5em 1.4em 0.8em 0; }
    text-align: left;
#lastmod { display:none!important; }
    font-weight: bold;
li#ca-unify { margin-left:1.6em; }
    margin-top: 0;
#google-search input { font-size:95%; width:10.9em; }
    line-height: 1;
#searchform { padding-bottom:0.5em; }
    margin-bottom: 12px;  
}
 
.personality-content {
    flex: 1;
    padding: 0 24px 0 0;
}
 
/* --- Mobile Layout Rules --- */
@media (max-width: 768px) {
    .personality-hero {
        flex-direction: column; /* Stacks the image and text vertically */
        gap: 16px; /* Reduces the gap slightly so it doesn't feel too empty on mobile */
    }
 
    .personality-image {
        flex: 1 1 auto; /* Removes the rigid 360px width constraint */
        width: 100%; /* Allows the image to fill the mobile container gracefully */
    }
 
    .personality-image img {
        max-width: 100%; /* Ensures the image never spills off the screen */
    }
   
    .personality-title {
        text-align: center; /* Optional: Centering the title often looks better on stacked mobile layouts */
    }
.personality-content {
        padding: 0 16px; /* Adds 16px of space to the left and right of the text */
    }
}
 
/*--- Additional Info Card ---*/
.info-card {
    max-width: 900px;
    margin: 30px auto;
    padding: 24px 28px;
    background: #FFF8EE;
    border: 1px solid #D8C7A5;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left;
}
 
.info-card h3 {
    margin: 0 0 15px;
    font-size: 150%;
    color: #345B63;
}
 
.info-card p {
    margin: 0 0 16px;
    line-height: 1.7;
}
 
.info-card .cta-button {
    margin-top: 10px;
}
 
/* Hide empty sidebar menu headings */
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed {
    display: none !important;
}
 
.accordion-toc-heading {
    display: none;
}


/* ==========================================================================
/* ==========================================================================
   STICKY HEADER & FLOATING MENU ONLY
   5. STICKY HEADER & FLOATING MENU (CUSTOM)
   ========================================================================== */
   ========================================================================== */
 
#vector-main-menu-pinned-container, .vector-main-menu-pinned-container, .vector-pinnable-header,
/* 1. Permanently remove the pinned sidebar column & all pinning buttons */
.vector-main-menu-action, .vector-pinnable-header-toggle-button, .vector-pinnable-header-pin-button,
#vector-main-menu-pinned-container,
.vector-pinnable-header-unpin-button, [data-event-name*="vector-main-menu.pin"], [data-event-name*="vector-main-menu.unpin"] {
.vector-main-menu-pinned-container,
.vector-pinnable-header,
.vector-main-menu-action,
.vector-pinnable-header-toggle-button,
.vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button,
[data-event-name*="vector-main-menu.pin"],
[data-event-name*="vector-main-menu.unpin"] {
     display: none !important;
     display: none !important;
}
}


/* 2. Hide magnifying glass / search toggle icon in sticky header */
#vector-sticky-header .vector-sticky-header-search-toggle, #vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle, #vector-sticky-header .mw-ui-icon-wikimedia-search, #vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .vector-icon.mw-ui-icon-search, #vector-sticky-header .cdx-search-input__start-icon {
#vector-sticky-header .search-toggle,
#vector-sticky-header .mw-ui-icon-wikimedia-search,
#vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search,
#vector-sticky-header .cdx-search-input__start-icon {
     display: none !important;
     display: none !important;
}
}


/* 3. Sticky header container layout */
.skin-vector-2022 #vector-sticky-header, #vector-sticky-header {
.skin-vector-2022 #vector-sticky-header,
     display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
#vector-sticky-header {
     background-color: #e6dfa1 !important; border-bottom: 2px solid #296F39 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
     display: flex !important;
     padding-left: 16px !important; padding-right: 16px !important; height: 50px !important; min-height: 50px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
     background-color: #cce7d7 !important;
    border-bottom: 2px solid #345B63 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
     padding-left: 16px !important;
    padding-right: 16px !important;
    height: 50px !important;
    min-height: 50px !important;
}
}


/* Dark mode version */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start, #vector-sticky-header .vector-sticky-header-start {
html.skin-theme-clientpref-night #vector-sticky-header {
     display: flex !important; align-items: center !important; flex: 0 0 auto !important; flex-grow: 0 !important;
     background-color: #1a1a1a !important;
     width: auto !important; position: relative !important; z-index: 10 !important; gap: 18px !important; margin: 0 !important;
    border-bottom: 2px solid #3b4b5f !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
}


/* 4. Start Container: Burger + Search (PREVENTS growing/stretching across the bar) */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start,
#vector-sticky-header .vector-sticky-header-start {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important; /* Stops it from expanding across the middle */
    flex-grow: 0 !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    gap: 18px !important;
    margin: 0 !important;
}
/* 5. Burger button */
#vanipedia-sticky-main-menu {
#vanipedia-sticky-main-menu {
     display: inline-flex !important;
     display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important;
    align-items: center !important;
     width: 32px !important; min-width: 32px !important; height: 32px !important; margin: 0 !important; cursor: pointer !important;
    justify-content: center !important;
     position: relative !important; z-index: 20 !important;
    flex: 0 0 auto !important;
     width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    cursor: pointer !important;
     position: relative !important;
    z-index: 20 !important;
}
 
#vanipedia-sticky-main-menu .vector-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}
}
#vanipedia-sticky-main-menu .vector-icon { display: inline-block !important; width: 20px !important; height: 20px !important; }


/* 6. Search box */
#vector-sticky-header #p-search, #vector-sticky-header form#searchform, #vector-sticky-header .vector-search-box,
#vector-sticky-header #p-search,
#vector-sticky-header .vector-search-box-inner, #vector-sticky-header .cdx-search-input {
#vector-sticky-header form#searchform,
     position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
#vector-sticky-header .vector-search-box,
     margin: 0 !important; float: none !important; display: inline-flex !important; align-items: center !important;
#vector-sticky-header .vector-search-box-inner,
     flex: 0 0 auto !important; z-index: 10 !important;
#vector-sticky-header .cdx-search-input {
     position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
     margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
     flex: 0 0 auto !important;
    z-index: 10 !important;
}
}
 
#vector-sticky-header input.searchbox, #vector-sticky-header input[type="search"] {
#vector-sticky-header input.searchbox,
     position: relative !important; left: auto !important; margin: 0 !important;
#vector-sticky-header input[type="search"] {
     position: relative !important;
    left: auto !important;
    margin: 0 !important;
}
}


/* 7. FIX: Lock Page Title strictly on the LEFT right after search */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar, #vector-sticky-header .vector-sticky-header-context-bar {
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar,
     display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
#vector-sticky-header .vector-sticky-header-context-bar {
     flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important;
     display: flex !important;
     margin-left: 20px !important; margin-right: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
     flex: 0 0 auto !important; /* Takes only the space needed for the title */
    flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
     margin-left: 20px !important; /* Space after search box */
    margin-right: auto !important; /* Absorbs all remaining space, pushing tools to the far right */
}
}


#vector-sticky-header .vector-sticky-header-context-bar-primary,
#vector-sticky-header .vector-sticky-header-context-bar-primary, #vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
     display: inline-flex !important;
     display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
    align-items: center !important;
     font-size: 1.35rem !important; font-weight: 700 !important; color: #000000 !important; margin: 0 !important; padding: 0 !important;
    justify-content: flex-start !important;
     white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
    text-align: left !important;
     font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
     white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
 
/* Dark mode text */
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline,
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title {
    color: #ffffff !important;
}
}


/* 8. Action tools stay on the far right */
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end, #vector-sticky-header .vector-sticky-header-end {
.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end,
     display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: auto !important;
#vector-sticky-header .vector-sticky-header-end {
     display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
}


/* 9. Floating Dropdown Menu Box Styling */
#vector-main-menu-dropdown .vector-dropdown-content {
#vector-main-menu-dropdown .vector-dropdown-content {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important; border-radius: 4px !important; background-color: var(--background-color-base, #faf2af) !important;
    border-radius: 4px !important;
    background-color: var(--background-color-base, #ffffff) !important;
}
}
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { display: none !important; }


/* ==========================================================================
/* ==========================================================================
   FLOATING "BACK TO TOP" BUTTON
   6. UI COMPONENTS (ACCORDION, THEME GRID, CARDS, BACK-TO-TOP)
   ========================================================================== */
   ========================================================================== */
#vanipedia-back-to-top {
.theme-analysis-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 2em 0; width: 100%; box-sizing: border-box; }
    position: fixed !important;
.theme-column { background: rgba(255, 255, 255, 0.2); padding: 15px; border: 1px solid #B5BD64; border-radius: 8px; }
    bottom: 24px !important;
.theme-column ul { list-style-type: none; padding: 0; margin: 0; }
    right: 24px !important;
.theme-column li { margin-bottom: 10px; font-weight: bold; }
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #345B63 !important; /* Vanipedia dark teal */
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important;
}


/* Shown when scrolled down */
.book-accordion { background: #FFF8EE; border: none; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
#vanipedia-back-to-top.visible {
.book-accordion-header { background-color: #296F39; color: #ffffff; padding: 16px 20px 16px 60px; font-size: 18px; font-weight: bold; border-bottom: 3px solid #1c4b26; cursor: pointer; transition: background-color 0.2s ease; user-select: none; }
    opacity: 1 !important;
.book-accordion-header:hover { background-color: #3b874c; }
    visibility: visible !important;
.book-accordion .mw-collapsible-toggle { float: right; font-weight: normal; font-size: 13px; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; margin-top: -2px; }
    transform: translateY(0) !important;
.book-accordion .mw-collapsible-toggle a { color: #ffffff !important; text-decoration: none; }
}
.book-accordion .mw-collapsible-toggle a:hover { text-decoration: underline; }
.book-accordion-content { padding: 24px; }


#vanipedia-back-to-top:hover {
.book-grid-list { column-width: 280px; column-gap: 20px; list-style-type: none; margin: 0; padding: 0; }
    background-color: #244147 !important;
.book-grid-list.single-column { column-width: auto; column-count: 1; column-gap: 0; }
    transform: translateY(-2px) !important;
.book-grid-list li { margin-bottom: 12px; break-inside: avoid; }
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
.mw-parser-output .book-grid-list li a, .mw-parser-output .book-grid-list li a.external { display: block !important; padding: 8px 16px !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e1e4e8 !important; border-radius: 6px; text-decoration: none; color: #1a5e9a; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s ease; }
}
.mw-parser-output .book-grid-list li a:hover, .mw-parser-output .book-grid-list li a.external:hover { background-color: #f4f8fc !important; border-color: #1a5e9a !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26,94,154,0.12); }


#vanipedia-back-to-top:active {
.vision-btn.btn-framed { position: relative !important; margin: 12px !important; }
    transform: translateY(0) !important;
.vision-btn.btn-framed::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid #296F39 !important; border-radius: 6px !important; pointer-events: none; }
}
.vision-btn.btn-framed:hover::after { border-color: #1c4b26 !important; }


#vanipedia-back-to-top svg {
.compilation-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; margin: 20px auto; max-width: 1000px; }
    display: block !important;
.compilation-image { flex: 1 1 300px; text-align: center; max-width: 450px; }
    width: 22px !important;
.compilation-button-grid { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; }
    height: 22px !important;
.compilation-btn { background-color: #296F39; padding: 12px 24px; font-size: 16px; font-weight: bold; border-bottom: 3px solid #1c4b26; border-radius: 4px; text-align: center; }
    stroke: #ffffff !important;
.compilation-btn a { color: #ffffff !important; text-decoration: none; display: block; }
}
.compilation-btn-full { grid-column: 1 / -1; }


/* Dark mode theme */
#vanipedia-back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #296F39 !important; color: #ffffff !important; border: none !important; outline: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top {
#vanipedia-back-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
    background-color: #3b4b5f !important;
#vanipedia-back-to-top:hover { background-color: #1d5229 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; }
    color: #ffffff !important;
#vanipedia-back-to-top svg { display: block !important; width: 22px !important; height: 22px !important; stroke: #ffffff !important; }
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}


html.skin-theme-clientpref-night #vanipedia-back-to-top:hover {
/* MEDIA SNIPPETS OVERFLOW FIX */
    background-color: #4f637c !important;
.mw-parser-output div[style*="#feffe1"] { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
}
.mw-parser-output div[style*="#feffe1"] div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
 
.mw-parser-output div[style*="#feffe1"] img, .mw-parser-output div[style*="#feffe1"] iframe, .mw-parser-output div[style*="#feffe1"] .embedvideo, .mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; }
/* Mobile positioning */
@media screen and (max-width: 768px) {
    #vanipedia-back-to-top {
        bottom: 18px !important;
        right: 18px !important;
        width: 40px !important;
        height: 40px !important;
    }
}


/* ==========================================================================
/* ==========================================================================
   UNCLUTTERED "DOORS" HOMEPAGE LAYOUT
   7. MOBILE RESPONSIVENESS
   ========================================================================== */
   ========================================================================== */
 
@media screen and (max-width: 900px) {
.vani-sanctuary {
     .theme-analysis-grid { grid-template-columns: repeat(2, 1fr); }
    max-width: 1140px;
     margin: 0 auto;
    padding: 10px 0 40px;
}
}
 
@media screen and (max-width: 768px) {
/* 1. Entrance Hero (Serene & Welcoming) */
     .mw-parser-output img { max-width: 100%; height: auto !important; }
.vani-entrance-hero {
     #vanipedia-back-to-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; }
    display: flex;
     .book-grid-list { grid-template-columns: 1fr; display: block; }
    align-items: center;
    background-color: #e8f4ec; /* Soft sage green */
    border: 1px solid #c8e0d1;
    border-radius: 12px;
    padding: 28px 32px;
    gap: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 16px rgba(52, 91, 99, 0.06);
}
 
.vani-entrance-avatar {
     flex: 0 0 160px;
    text-align: center;
}
 
.vani-portrait-circle,
.vani-entrance-avatar img {
    border-radius: 50% !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important;
}
 
.vani-entrance-text {
    flex: 1 1 auto;
}
 
.vani-sanctuary-badge {
    display: inline-block;
    background-color: #345B63;
     color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
 
.vani-sanctuary-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1e3a40 !important;
    margin: 0 0 8px !important;
    border: none !important;
    padding: 0 !important;
}
 
.vani-sanctuary-subtitle {
    font-size: 1.02rem;
    color: #334447;
    line-height: 1.5;
    margin: 0 0 14px;
}
 
.vani-sanctuary-milestone {
    display: inline-block;
     font-size: 0.88rem;
    color: #2b494f;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 6px 14px;
    border-radius: 6px;
    border-left: 3px solid #345B63;
}
 
/* 2. The Doors Grid (3 Columns, Clean & Spacious) */
.vani-doors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 32px;
}
 
/* 3. Door Cards */
.vani-door-card {
    background-color: #ffffff;
    border: 1px solid #d9e8e0;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    position: relative;
}
 
.vani-door-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(52, 91, 99, 0.12);
    border-color: #345B63;
}
 
.vani-door-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
}
.vani-door-icon {
    font-size: 1.8rem;
}
.vani-door-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: #7b948f;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.vani-door-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}
.vani-door-title a {
    color: #1e3a40 !important;
    text-decoration: none;
}
.vani-door-title a:hover {
    color: #345B63 !important;
    text-decoration: underline;
}
.vani-door-desc {
    font-size: 0.92rem;
    color: #556668;
    line-height: 1.5;
    margin: 0 0 18px;
    flex-grow: 1;
}
.vani-door-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #345B63 !important;
    background-color: #edf6f0;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.vani-door-card:hover .vani-door-btn {
    background-color: #345B63;
    color: #ffffff !important;
}
/* 4. Sanctuary Base (Mission Door) */
.vani-mission-door {
    background-color: #f7faf8;
    border: 1px solid #cde2d6;
    border-radius: 10px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.vani-mission-info h3 {
    margin: 0 0 6px !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
    color: #24464c !important;
}
.vani-mission-info p {
    margin: 0;
    font-size: 0.93rem;
    color: #4a5c5f;
}
.vani-mission-links {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.vani-m-btn {
    display: inline-block;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.vani-m-primary {
    background-color: #345B63;
    color: #ffffff !important;
}
.vani-m-primary:hover {
    background-color: #233e44;
}
.vani-m-ghost {
    background-color: #ffffff;
    border: 1px solid #345B63;
    color: #345B63 !important;
}
.vani-m-ghost:hover {
    background-color: #e8f4ec;
}
.vani-m-accent {
    background-color: #d97724;
    color: #ffffff !important;
}
.vani-m-accent:hover {
    background-color: #b86016;
}
/* 5. Dark Mode Adaptation */
html.skin-theme-clientpref-night .vani-entrance-hero {
    background-color: #1f272a;
    border-color: #313d42;
}
html.skin-theme-clientpref-night .vani-sanctuary-title {
    color: #e0f2f1 !important;
}
html.skin-theme-clientpref-night .vani-sanctuary-subtitle {
    color: #b0bec5;
}
html.skin-theme-clientpref-night .vani-sanctuary-milestone {
    background-color: rgba(0, 0, 0, 0.4);
    color: #cfd8dc;
}
html.skin-theme-clientpref-night .vani-door-card {
    background-color: #1a1e20;
    border-color: #2e3b40;
}
html.skin-theme-clientpref-night .vani-door-title a {
    color: #92c5cd !important;
}
html.skin-theme-clientpref-night .vani-door-desc {
    color: #9ea7aa;
}
html.skin-theme-clientpref-night .vani-door-btn {
    background-color: #242e32;
    color: #92c5cd !important;
}
html.skin-theme-clientpref-night .vani-mission-door {
    background-color: #191c1e;
    border-color: #2b373c;
}
/* 6. Responsive Mobile Breakpoints */
@media screen and (max-width: 900px) {
    .vani-doors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vani-entrance-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .vani-mission-door {
        flex-direction: column;
        text-align: center;
    }
    .vani-mission-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) {
     .vani-doors-grid {
     .theme-analysis-grid { grid-template-columns: 1fr; }
        grid-template-columns: 1fr;
    }
}
}


/* ==========================================================================
/* ==========================================================================
   Vanipedia Visitors Statistics — Zero Scrollbar Configuration
   8. LEGACY AC_RESULTS (AUTOCOMPLETE)
   ========================================================================== */
   ========================================================================== */
.ac_results { padding: 0px; border: 1px solid black; background-color: Window; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; }
.ac_loading { background: Window url('indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: aquamarine; color: HighlightText; }
.ac_moreItems { text-align: center; background-color: InactiveCaption; color: InactiveCaptionText; margin: 0px; padding: 0px 5px; cursor: default; display: block; width: 100%; font: bold menu 12px; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; }


/* Hide right Appearance menu */
/* ==========================================================================
.page-Vanipedia_Visitors_Statistics .vector-column-end,
  9. USED BY TEMPLATE:NAVBAR AND BG FOOTER
.page-Vanipedia_Visitors_Statistics #vector-appearance-pinned-container,
  ========================================================================== */
.page-Vanipedia_Visitors_Statistics #vector-page-tools-pinned-container {
.verse-nav { float:right; }
    display: none !important;
.prev-link { float:left; min-height:22px; padding:0 0 0 25px; background:url(/w/images/Go-previous.png) no-repeat left }
}
.next-link { float:left; min-height:22px; padding:0 25px; background:url(/w/images/Go-next.png) no-repeat right }
.chap-nav, #chap-nav, #book-nav, #page-nav { float:left }


/* 1350px centered container */
/* ==========================================================================
body.page-Vanipedia_Visitors_Statistics {
  10. DARK MODE / NIGHT MODE OVERRIDES
    --max-width-base: 1350px !important;
  ========================================================================== */
    --width-layout: 1350px !important;
html.skin-theme-clientpref-night { --background-color-base: #121212 !important; --background-color-page: #121212 !important; --background-color-quiet: #1a1a1a !important; --color-base: #e2e8f0 !important; }
}
html.skin-theme-clientpref-night body, html.skin-theme-clientpref-night #content, html.skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-night #mw-page-base, html.skin-theme-clientpref-night #mw-head-base { background: #121212 !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .mw-page-container, html.skin-theme-clientpref-night .mw-page-container-inner, html.skin-theme-clientpref-night .mw-content-container, html.skin-theme-clientpref-night .mw-header, html.skin-theme-clientpref-night .vector-header-container, html.skin-theme-clientpref-night .vector-sticky-header, html.skin-theme-clientpref-night .vector-column-start, html.skin-theme-clientpref-night .vector-column-end, html.skin-theme-clientpref-night .vector-sidebar-container, html.skin-theme-clientpref-night .vector-pinnable-element, html.skin-theme-clientpref-night .vector-pinnable-header, html.skin-theme-clientpref-night .vector-pinned-container, html.skin-theme-clientpref-night .vector-toc, html.skin-theme-clientpref-night #vector-toc, html.skin-theme-clientpref-night .vector-toc-pinned-container, html.skin-theme-clientpref-night .vector-toc-contents, html.skin-theme-clientpref-night .vector-menu-content, html.skin-theme-clientpref-night .vector-appearance-pinned-container, html.skin-theme-clientpref-night .vector-page-toolbar-container, html.skin-theme-clientpref-night .vector-page-toolbar, html.skin-theme-clientpref-night .cdx-menu, html.skin-theme-clientpref-night .cdx-menu__list, html.skin-theme-clientpref-night .cdx-menu-item, html.skin-theme-clientpref-night .cdx-radio, html.skin-theme-clientpref-night #vector-appearance { background-color: #121212 !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night #vector-sticky-header { background-color: #1a1a1a !important; border-bottom: 2px solid #3b4b5f !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { color: #ffffff !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top { background-color: #3b4b5f !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top:hover { background-color: #4f637c !important; }
html.skin-theme-clientpref-night .quote_text, html.skin-theme-clientpref-night *:not(a).text { color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .devanagari, html.skin-theme-clientpref-night .verse, html.skin-theme-clientpref-night .versecenter, html.skin-theme-clientpref-night .synonyms, html.skin-theme-clientpref-night .translation, html.skin-theme-clientpref-night .purport { color: #e2e8f0 !important; }


.page-Vanipedia_Visitors_Statistics .mw-page-container {
/* ==========================================================================
    max-width: 1350px !important;
  11. LIGHT MODE SPECIFIC OVERRIDES
    width: 90% !important;
  ========================================================================== */
    margin: 0 auto !important;
html:not(.skin-theme-clientpref-night) .vector-sidebar-container { background-color: #e6dfa1 !important; --background-color-interactive: #e6dfa1 !important; }
}
html:not(.skin-theme-clientpref-night) .vector-dropdown-content { background-color: #ffffff !important; border: 1px solid #c8ccd1 !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu, html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading, html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading { background-color: #296F39 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 12px !important; margin-bottom: 4px !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link { color: #296F39 !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover { color: #0645ad !important; background-color: #e6dfa1 !important; border-radius: 2px !important; }


.page-Vanipedia_Visitors_Statistics .mw-page-container-inner,
/* ==========================================================================
.page-Vanipedia_Visitors_Statistics .mw-content-container,
  12. CUSTOM WIKIPEDIA-STYLE HOVER POPUP
.page-Vanipedia_Visitors_Statistics #content,
  ========================================================================== */
.page-Vanipedia_Visitors_Statistics .mw-parser-output {
a[title]:hover::after {
     max-width: 100% !important;
     content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
    width: 100% !important;
     background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px;
    margin: 0 !important;
     border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0 !important;
     font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000;
     display: block !important;
}
 
/* Dashboard container */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px auto !important;
    padding: 0 !important;
     background: transparent !important;
    border: none !important;
    overflow: hidden !important;
}
 
/* Iframe with enough vertical room */
.page-Vanipedia_Visitors_Statistics .vanipedia-analytics-dashboard iframe {
    display: block !important;
    width: 100% !important;
     min-width: 100% !important;
    height: 950px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}
}

Latest revision as of 12:23, 16 September 2026

/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');

/* ==========================================================================
   1. VANISOURCE CORE UTILITIES & TEXT FORMATTING
   ========================================================================== */
.cw_0 { display: none; }
.cw_50 { width: 50px; }
.cw_150 { width: 150px; }
.cw_500 { width: 500px; }
.tabs-input { display: none !important; }
.noautonum .tocnumber { display: none; }

.greentext, .quotelink, .nectardroptext, .daystext, .daystextb { color: #296F39; }
.quotelink, .nectardroptext, .daystextb { font-weight: bold; }
.quotelink, .nectardroptext { font-size: 1em; }

.journaltable { max-width: 108em; min-width: 65em; }
.daytable { text-align: left; }
.vanitable {
    border: 0.1em solid #BFBFBF;
    border-collapse: collapse;
    padding: 0.25em;
    background-color: #F2F2F2;
    text-align: left;
    vertical-align: middle;
}
.lec_code { font-weight: bold; }
.code { font-weight: bold; font-size: 90%; }
.highlight_quote { background-color: #F9F7E0; margin: 0px; padding: 4px 2px; }
.highlight_terms { background-color: #EEE8AA; }
.hlterm {
    background-color: yellow;
    border: 1px Solid #EE9977;
    padding: 1px 2px 1px 2px;
    margin: -1px;
}
a[href*="syno_o"]:visited { color: purple; }

.timelineh2 { text-align: center; border: 1px solid #ddcef2; background: #F2F2F2; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
.timelineh3 { text-align: center; border-top: 1px solid #ddcef2; border-bottom: 1px solid #ddcef2; background: #FFFFFF; padding: 0.2em 0.4em; margin: auto; overflow: hidden; }
.timelinesummary { border: thin solid #ddcef2; border-radius: 1em; box-shadow: 0.5em 0.5em 0.5em #888888; background: #FFFFCC; min-width: 77em; margin: 1em auto 3em auto; padding: 1em; text-align: center; }
.timelinelinks { text-align: center; font-size: 132%; font-weight: bold; }
.timelinelinks a { color: #B5BD64; }

.firstchar { float: left; width: 0.7em; font-size: 375%; font-family: algerian, courier; line-height: 80%; }
.MITL_page_nav { text-align: left; border: 1px solid #BFBFBF; background: #FFF2E6; padding: 0.2em 0.4em; margin: auto; }
.daysnav, .monthsnav { display: flex; flex-wrap: wrap; justify-content: center; }
.daysnav .month { margin: 25px 2%; }
.monthsnav .year { margin: 25px 5%; }
.center { text-align: center; }

/* ==========================================================================
   2. VANISOURCE BOOK STYLES
   ========================================================================== */
@font-face { font-family: interDiac; src: url(/css/GauraTimes.ttf); }
.devanagari { color: #000000; font-weight: bold; }
.verse { color: #000000; font-style: italic; }
.versecenter { color: #000000; font-style: italic; text-align: center; }
.verse.inter_diac, .synonyms.inter_diac, .translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-family: interDiac; }
.translation.inter_diac, .purport.inter_diac, .text.inter_diac { font-size: 1.1em; }
.synonyms { color: #000000; }
.translation { color: #000000; font-weight: bold; }
.purport { color: #000000; }
*:not(a).text { color: #000000; }
.SB65verse { white-space: pre-line; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; text-align: center; color: #000000; }
#verse { white-space: pre; }
#translation { color: #000000; font-weight: bold; }

/* ==========================================================================
   3. VANISOURCE LEGACY COMPILE & MAIN PAGE CODING
   ========================================================================== */
.quote { margin: 1.5em 0em; font-family: tahoma; }
.quote_heading { font-weight: bold; color: #296F39; }
.quote_translation, .quote_text, .quote_verse { color: #000000; }
.quote_link, .quote_text a { font-weight: bold; }

body.page-Main_Page h1.firstHeading, body.page-Main_Page #t-cite, body.page-Main_Page #lastmod, body.page-Main_Page #siteSub { display: none !important; }
.MainHeader h4 { margin:0!important; padding:0.2em 0.4em; }

body.page-Main_Page h2, body.page-Talk_Main_Page h2, body.page-Main_Page_test h2, body.page-Main_Page_test h1 { background: #f0f0f0; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; margin: 1em 0; color: #B5BD64; font-family: georgia; font-weight: bold; text-align: center; }
#banner { text-align: center; background: #f9f9f9; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; font-size: 125%; }
#mainbanner { text-align: center; background: #296F39; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.3em; color: #faf2af; font-family: georgia; font-size: 150%; font-style: italic; }
#mainlinks { text-align: center; margin-bottom: 0.5em; font-weight: bold; font-size: 110%; }
#mainlinks a, #mainh2links a { color: #B5BD64; }
#mainmantra { text-align: center; margin-top: 1.5em; color: #B5BD64; }
.maincenter { text-align: center; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainleft { text-align: left; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainjustify { text-align: justify; max-width: 65em; margin: 0px auto; padding-bottom: 1em; }

.vaniquotebox { text-align: left; min-height: 11.6em; border:thin solid #000000; border-radius: 1em; box-shadow: 0.5em 0.5em 1em #bcbcbc; margin: 1em 0em; }
@media screen and (min-width: 800px) { .vaniquotebox { max-width:80%; } }
.vaniquotebox > table { text-align:left; font-size:1em; color:#000000; min-height: 11.5em; margin: 0; }
.vaniquotebox td { padding: 8px; }

/* ==========================================================================
   4. VECTOR 2022 STRUCTURAL OVERRIDES (BRAND COLORS MATCHED)
   ========================================================================== */
:root, .skin-vector-2022, html {
    --background-color-base: #faf2af !important;
    --background-color-page: #faf2af !important;
    --background-color-quiet: #faf2af !important;
    --border-color-base: transparent !important; 
}

body, #content, .mw-body, #mw-page-base, #mw-head-base {
    background: #faf2af !important; 
    background-image: none !important; 
    font-family: tahoma;
}

.mw-page-container, .mw-page-container-inner, .mw-content-container, .mw-header,
.vector-header-container, .vector-sticky-header, .vector-column-start, .vector-column-end,
.vector-sidebar-container, .vector-pinnable-element, .vector-toc, #vector-toc,
.vector-toc-pinned-container, .vector-toc-contents, .vector-dropdown-content,
.vector-menu-content, .cdx-menu, .cdx-menu__list {
    background-color: #faf2af !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

#headertabs { background: inherit; }
#headertabs ul li.ui-state-active { background: #fef8cb; }

div.thumb { border: none; }
div.tright { border: none; margin: 0.5em 0 0.8em 1.4em; }
div.tleft { border: none; margin: 0.5em 1.4em 0.8em 0; }
#lastmod { display:none!important; }
li#ca-unify { margin-left:1.6em; }
#google-search input { font-size:95%; width:10.9em; }
#searchform { padding-bottom:0.5em; }

/* ==========================================================================
   5. STICKY HEADER & FLOATING MENU (CUSTOM)
   ========================================================================== */
#vector-main-menu-pinned-container, .vector-main-menu-pinned-container, .vector-pinnable-header,
.vector-main-menu-action, .vector-pinnable-header-toggle-button, .vector-pinnable-header-pin-button,
.vector-pinnable-header-unpin-button, [data-event-name*="vector-main-menu.pin"], [data-event-name*="vector-main-menu.unpin"] {
    display: none !important;
}

#vector-sticky-header .vector-sticky-header-search-toggle, #vector-sticky-header #vector-sticky-header-search-toggle,
#vector-sticky-header .search-toggle, #vector-sticky-header .mw-ui-icon-wikimedia-search, #vector-sticky-header .mw-ui-icon-search,
#vector-sticky-header .vector-icon.mw-ui-icon-search, #vector-sticky-header .cdx-search-input__start-icon {
    display: none !important;
}

.skin-vector-2022 #vector-sticky-header, #vector-sticky-header {
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    background-color: #e6dfa1 !important; border-bottom: 2px solid #296F39 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding-left: 16px !important; padding-right: 16px !important; height: 50px !important; min-height: 50px !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-start, #vector-sticky-header .vector-sticky-header-start {
    display: flex !important; align-items: center !important; flex: 0 0 auto !important; flex-grow: 0 !important;
    width: auto !important; position: relative !important; z-index: 10 !important; gap: 18px !important; margin: 0 !important;
}

#vanipedia-sticky-main-menu {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important;
    width: 32px !important; min-width: 32px !important; height: 32px !important; margin: 0 !important; cursor: pointer !important;
    position: relative !important; z-index: 20 !important;
}
#vanipedia-sticky-main-menu .vector-icon { display: inline-block !important; width: 20px !important; height: 20px !important; }

#vector-sticky-header #p-search, #vector-sticky-header form#searchform, #vector-sticky-header .vector-search-box,
#vector-sticky-header .vector-search-box-inner, #vector-sticky-header .cdx-search-input {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    margin: 0 !important; float: none !important; display: inline-flex !important; align-items: center !important;
    flex: 0 0 auto !important; z-index: 10 !important;
}
#vector-sticky-header input.searchbox, #vector-sticky-header input[type="search"] {
    position: relative !important; left: auto !important; margin: 0 !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-context-bar, #vector-sticky-header .vector-sticky-header-context-bar {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
    flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important;
    margin-left: 20px !important; margin-right: auto !important;
}

#vector-sticky-header .vector-sticky-header-context-bar-primary, #vector-sticky-header .vector-sticky-header-title,
#vector-sticky-header .vector-sticky-header-context-bar .mw-headline {
    display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important;
    font-size: 1.35rem !important; font-weight: 700 !important; color: #000000 !important; margin: 0 !important; padding: 0 !important;
    white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}

.skin-vector-2022 #vector-sticky-header .vector-sticky-header-end, #vector-sticky-header .vector-sticky-header-end {
    display: flex !important; align-items: center !important; flex: 0 0 auto !important; margin-left: auto !important;
}

#vector-main-menu-dropdown .vector-dropdown-content {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important; border-radius: 4px !important; background-color: var(--background-color-base, #faf2af) !important;
}
#vector-main-menu.vanipedia-sidebar-menu.vanipedia-collapsed { display: none !important; }

/* ==========================================================================
   6. UI COMPONENTS (ACCORDION, THEME GRID, CARDS, BACK-TO-TOP)
   ========================================================================== */
.theme-analysis-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 2em 0; width: 100%; box-sizing: border-box; }
.theme-column { background: rgba(255, 255, 255, 0.2); padding: 15px; border: 1px solid #B5BD64; border-radius: 8px; }
.theme-column ul { list-style-type: none; padding: 0; margin: 0; }
.theme-column li { margin-bottom: 10px; font-weight: bold; }

.book-accordion { background: #FFF8EE; border: none; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.book-accordion-header { background-color: #296F39; color: #ffffff; padding: 16px 20px 16px 60px; font-size: 18px; font-weight: bold; border-bottom: 3px solid #1c4b26; cursor: pointer; transition: background-color 0.2s ease; user-select: none; }
.book-accordion-header:hover { background-color: #3b874c; }
.book-accordion .mw-collapsible-toggle { float: right; font-weight: normal; font-size: 13px; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; margin-top: -2px; }
.book-accordion .mw-collapsible-toggle a { color: #ffffff !important; text-decoration: none; }
.book-accordion .mw-collapsible-toggle a:hover { text-decoration: underline; }
.book-accordion-content { padding: 24px; }

.book-grid-list { column-width: 280px; column-gap: 20px; list-style-type: none; margin: 0; padding: 0; }
.book-grid-list.single-column { column-width: auto; column-count: 1; column-gap: 0; }
.book-grid-list li { margin-bottom: 12px; break-inside: avoid; }
.mw-parser-output .book-grid-list li a, .mw-parser-output .book-grid-list li a.external { display: block !important; padding: 8px 16px !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e1e4e8 !important; border-radius: 6px; text-decoration: none; color: #1a5e9a; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s ease; }
.mw-parser-output .book-grid-list li a:hover, .mw-parser-output .book-grid-list li a.external:hover { background-color: #f4f8fc !important; border-color: #1a5e9a !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26,94,154,0.12); }

.vision-btn.btn-framed { position: relative !important; margin: 12px !important; }
.vision-btn.btn-framed::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid #296F39 !important; border-radius: 6px !important; pointer-events: none; }
.vision-btn.btn-framed:hover::after { border-color: #1c4b26 !important; }

.compilation-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; margin: 20px auto; max-width: 1000px; }
.compilation-image { flex: 1 1 300px; text-align: center; max-width: 450px; }
.compilation-button-grid { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; }
.compilation-btn { background-color: #296F39; padding: 12px 24px; font-size: 16px; font-weight: bold; border-bottom: 3px solid #1c4b26; border-radius: 4px; text-align: center; }
.compilation-btn a { color: #ffffff !important; text-decoration: none; display: block; }
.compilation-btn-full { grid-column: 1 / -1; }

#vanipedia-back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #296F39 !important; color: #ffffff !important; border: none !important; outline: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important; }
#vanipedia-back-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
#vanipedia-back-to-top:hover { background-color: #1d5229 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; }
#vanipedia-back-to-top svg { display: block !important; width: 22px !important; height: 22px !important; stroke: #ffffff !important; }

/* MEDIA SNIPPETS OVERFLOW FIX */
.mw-parser-output div[style*="#feffe1"] { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
.mw-parser-output div[style*="#feffe1"] div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.mw-parser-output div[style*="#feffe1"] img, .mw-parser-output div[style*="#feffe1"] iframe, .mw-parser-output div[style*="#feffe1"] .embedvideo, .mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; }

/* ==========================================================================
   7. MOBILE RESPONSIVENESS
   ========================================================================== */
@media screen and (max-width: 900px) {
    .theme-analysis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
    .mw-parser-output img { max-width: 100%; height: auto !important; }
    #vanipedia-back-to-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; }
    .book-grid-list { grid-template-columns: 1fr; display: block; }
}
@media screen and (max-width: 600px) {
    .theme-analysis-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. LEGACY AC_RESULTS (AUTOCOMPLETE)
   ========================================================================== */
.ac_results { padding: 0px; border: 1px solid black; background-color: Window; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; }
.ac_loading { background: Window url('indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: aquamarine; color: HighlightText; }
.ac_moreItems { text-align: center; background-color: InactiveCaption; color: InactiveCaptionText; margin: 0px; padding: 0px 5px; cursor: default; display: block; width: 100%; font: bold menu 12px; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; }

/* ==========================================================================
   9. USED BY TEMPLATE:NAVBAR AND BG FOOTER
   ========================================================================== */
.verse-nav { float:right; }
.prev-link { float:left; min-height:22px; padding:0 0 0 25px; background:url(/w/images/Go-previous.png) no-repeat left }
.next-link { float:left; min-height:22px; padding:0 25px; background:url(/w/images/Go-next.png) no-repeat right }
.chap-nav, #chap-nav, #book-nav, #page-nav { float:left }

/* ==========================================================================
   10. DARK MODE / NIGHT MODE OVERRIDES
   ========================================================================== */
html.skin-theme-clientpref-night { --background-color-base: #121212 !important; --background-color-page: #121212 !important; --background-color-quiet: #1a1a1a !important; --color-base: #e2e8f0 !important; }
html.skin-theme-clientpref-night body, html.skin-theme-clientpref-night #content, html.skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-night #mw-page-base, html.skin-theme-clientpref-night #mw-head-base { background: #121212 !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .mw-page-container, html.skin-theme-clientpref-night .mw-page-container-inner, html.skin-theme-clientpref-night .mw-content-container, html.skin-theme-clientpref-night .mw-header, html.skin-theme-clientpref-night .vector-header-container, html.skin-theme-clientpref-night .vector-sticky-header, html.skin-theme-clientpref-night .vector-column-start, html.skin-theme-clientpref-night .vector-column-end, html.skin-theme-clientpref-night .vector-sidebar-container, html.skin-theme-clientpref-night .vector-pinnable-element, html.skin-theme-clientpref-night .vector-pinnable-header, html.skin-theme-clientpref-night .vector-pinned-container, html.skin-theme-clientpref-night .vector-toc, html.skin-theme-clientpref-night #vector-toc, html.skin-theme-clientpref-night .vector-toc-pinned-container, html.skin-theme-clientpref-night .vector-toc-contents, html.skin-theme-clientpref-night .vector-menu-content, html.skin-theme-clientpref-night .vector-appearance-pinned-container, html.skin-theme-clientpref-night .vector-page-toolbar-container, html.skin-theme-clientpref-night .vector-page-toolbar, html.skin-theme-clientpref-night .cdx-menu, html.skin-theme-clientpref-night .cdx-menu__list, html.skin-theme-clientpref-night .cdx-menu-item, html.skin-theme-clientpref-night .cdx-radio, html.skin-theme-clientpref-night #vector-appearance { background-color: #121212 !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night #vector-sticky-header { background-color: #1a1a1a !important; border-bottom: 2px solid #3b4b5f !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { color: #ffffff !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top { background-color: #3b4b5f !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top:hover { background-color: #4f637c !important; }
html.skin-theme-clientpref-night .quote_text, html.skin-theme-clientpref-night *:not(a).text { color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .devanagari, html.skin-theme-clientpref-night .verse, html.skin-theme-clientpref-night .versecenter, html.skin-theme-clientpref-night .synonyms, html.skin-theme-clientpref-night .translation, html.skin-theme-clientpref-night .purport { color: #e2e8f0 !important; }

/* ==========================================================================
   11. LIGHT MODE SPECIFIC OVERRIDES
   ========================================================================== */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container { background-color: #e6dfa1 !important; --background-color-interactive: #e6dfa1 !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content { background-color: #ffffff !important; border: 1px solid #c8ccd1 !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu, html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading, html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading { background-color: #296F39 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 12px !important; margin-bottom: 4px !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link { color: #296F39 !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover { color: #0645ad !important; background-color: #e6dfa1 !important; border-radius: 2px !important; }

/* ==========================================================================
   12. CUSTOM WIKIPEDIA-STYLE HOVER POPUP
   ========================================================================== */
a[title]:hover::after {
    content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
    background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px;
    border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000;
}
Retrieved from "https://dev.vanisource.org/w/index.php?title=MediaWiki:Common.css&oldid=793242"