/* ImagineFun Wiki 2024 CSS

Site Design by Quinnithan!
quinnithan.neocities.orc */

/* Web Fonts
from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Tiny5&display=swap');

/* Variables */
:root {
    --site_bg: #22235e;
    --site_bg_lite: rgb(50, 51, 106);
    --site_bg_dark_transp: rgba(8, 9, 57, 0.5);
    --site_text: #fff;
    --site-gold: gold;
    --site-pink: rgb(241, 138, 255);

    --transp_w:rgba(255,255,255,0.1);
    --transp_b:rgba(0,0,0,0.25);

    --guest: #a7a7a7;
    --pass: #d72222;
    --d23: #0174b6;
    --c33: #017f77;
    --dvc:#0175b9;
}

/* Foundation */
* { transition:ease-in-out 0.25s;}
html {scroll-behavior: smooth;}
body {font-family:"Lexend", Arial, Helvetica, sans-serif; font-size:1em; background:var(--site_bg) url("img/bg.png"); background-attachment:fixed; color:var(--site_text); margin:0 0 auto 0;}
code {font-family:"Space Mono", "Courier New", Courier, monospace; background:var(--transp_w); padding:0 1px; border-bottom:1px solid var(--transp_w);}
a:visited {color:inherit;}
.clr {clear:both;}
ul {list-style-image:url("img/bullet.png")}
hr {border:0; border-bottom:1px dotted rgba(255,255,255,0.75);}
hr.alt {border-style:solid;}

#container {display:flex;flex-direction:column; margin:1em;}
main {width:100%; padding:1em 3em;}

  /* Header */
  header {width:100%; height:5em; background-position:center; border-bottom:5px solid var(--site_bg_lite); filter:blur(1px) opacity(0.5);}

  /* Footer */
  footer {background:var(--site_bg_lite); border:1px solid var(--site-gold); border-width:1px 0; padding:1em; margin:.5em -1em 0 -1em; font-size:0.85em; text-align:center; position:relative; height:31px;}
    .quinn {width:88px; height:31px; display:block; float:right; background:url("img/util/Badge_Quinn.gif");}
    .mediawiki {display:block; margin-right:0.5em; width:88px; height:31px; float:right; background:url("img/util/Badge_MediaWiki.png");}

/* Site Nav */
#content {display:flex; position:relative;}
nav {width:15em; height:100%;}
.logo {display:block; height:125px; width:125px; background:url("img/wiki.png") no-repeat; background-size:contain; margin:0 auto 1em auto;}
#serverinfo {text-align:center; font-size:0.8em; border:1px solid var(--transp_w); background:var(--transp_b); line-height:1.5em; padding:0.5em; margin:0 auto 1em auto;}
  #serverinfo strong {font-variant:small-caps; text-transform:lowercase; color:var(--site-gold)}

.pBody { margin-bottom:1em;}
.pBody ul {font-size:0.85em; margin:0.2em; background:var(--site_bg_lite); padding:0.5em 0.7em 0.5em 2em; border-radius:0.2em; border:1px solid var(--site-gold); line-height:1.4em;}
  .pBody .search {font-size:0.85em; margin:0.2em; background:var(--site_bg_lite); padding:0.5em 0.7em; border-radius:0.2em; border:1px solid var(--site-gold); line-height:1.4em;}
  .pBody ul ul {font-size:1em; margin:0; padding:0 0 0 1em; background:transparent; border:0;}
.pBody hr {border:0; border-bottom:1px dotted var(--site_text);}
.pBody a {color:white; text-decoration:none;}
  .pBody a:hover {text-decoration:underline;}
.pBody .active {color:var(--site-gold); font-weight:700;}

#search {background:var(--site_bg_lite); width:100%; height:2em; font-size:1em; color:white; font-family:inherit; border:1px solid rgba(255,255,255,0.5); margin:0; padding:0.2em; resize:none;}

/* Frontpage */
    /* Parks Nav */
    #hero_nav {display:flex; margin:2.5em auto; border-radius:2em; overflow:hidden; border:1px solid var(--site-gold);}
    #hero_nav a {display:block; position:relative; width:50%; padding:300px 1em 0 1em; text-align:right; vertical-align:bottom; text-decoration:none; color:white; line-height:0.5em; text-shadow:0 0 10px black; -webkit-text-stroke: 5px #3d3e70; -webkit-text-fill-color:white; paint-order: stroke fill; z-index:1;}
      #hero_nav a:first-child {border-right:1px solid var(--site-gold);}

    #hero_nav a h1 {position: relative; font-size:2em; z-index:5;}
    #hero_nav a h2 {position: relative; font-size:1.5em; z-index:5;}
    #hero_nav a::after {content:""; display:block; position:absolute; left:100%; top:0; height:100%; width:100%; background:white url("img/util/Placeholder.jpg") no-repeat; background-size:cover; transition:ease-in-out 1s; filter:opacity(0) blur(100px)}
    #hero_nav a:hover::after {content:""; left:0; filter:opacity(1) blur(0); z-index:2;}
    #hero_nav .DL {background:url("img/parks/dl/DL.jpg") no-repeat; background-size:cover;}
      #hero_nav .DL::after {content:""; display:block; position:absolute; left:100%; top:0; height:100%; width:100%; background:white url("img/parks/dl/mainstreet/Castle.jpg") no-repeat; background-size:cover; transition:ease-in-out 1s; filter:opacity(0) blur(100px);}
    #hero_nav .DCA {background:url("img/parks/dca/DCA.png") no-repeat; background-size:cover;}
      #hero_nav .DCA::after {content:""; display:block; position:absolute; left:100%; top:0; height:100%; width:100%; background:white url("img/parks/dca/DCA_2.png") no-repeat; background-size:cover; transition:ease-in-out 1s; filter:opacity(0) blur(100px);}
    .DCA span {position:absolute; font-size:75%; margin-top:-1.1em;}

    /* Recents Nav */
    #recents_nav {display:flex; position:relative; max-width:100%; justify-content:center; gap:0.5em; flex-wrap:nowrap; padding-bottom:0.5em;}
      #recents_nav:before {content:""; background:var(--transp_w); border:1px solid var(--transp_w); display:block; height:32px; width:100%; position:absolute; margin: 65px 1em 0 1em; z-index:-10;}
    #recents_nav a {display:block; position:relative;  width:15em; padding:125px 0.5em 0.5em 0.5em; text-decoration:none; line-height:1.1em; text-align:right; color:white; border-radius:.5em; margin:0 0.2em; border:1px solid var(--transp_w); text-shadow:0 0 5px black; -webkit-text-stroke: 1px #3d3e70; paint-order: stroke fill; overflow:hidden;}
      #recents_nav a:hover {transform:scale(1.1); border:1px solid var(--site-gold);}
    #recents_nav h1 {font-size:1.3em; margin:0;}
    #recents_nav h2 {font-size:1em; margin:0;}
    #recents_nav a span {display:block; position:absolute; top:0; left:0; background:var(--site-gold); font-weight:bold; padding:0.5em; color:black; text-shadow:none; -webkit-text-stroke: transparent;}

        /* Recents Items */
        /** NEVER CHANGE **/
            .backlog {background:url("img/parks/dl/fantasyland/storybook/Storybook.png") no-repeat; background-size:cover;}
        /** UPDATE AS NEEDED **/
            /*** April Stage Call ***/
            .recents_1 {background:url("img/articles/StageCall_April1.jpg") no-repeat; background-size:cover;}
            /*** May 4th ***/
            .recents_2 {background:url("img/events/May4_2025.jpg") no-repeat; background-size:cover;}
            /*** May Stage Call ***/
            .recents_3 {background:url("img/articles/StageCall_May6.jpg") no-repeat; background-size:cover;}
            /*** Pride ***/
            .recents_4 {background:url("img/events/Pride_2025.jpg") no-repeat; background-size:cover;}

/* Content
  /* Global */
  .contentbox a {color:var(--site-pink)}
  .contentbox p {line-height:1.4em;}
  /* Pagesplash */
  .pagesplash {min-height:15em; margin-top:-1em; background-size:cover; background-position:center center; background-repeat:no-repeat;}

  /* Titles Nav */
  .titlenav {font-size:1.7em; border-bottom:1px solid; color:var(--site-gold); margin-top:-2em; margin-bottom:1.5em; padding:0 0.5em; text-shadow:2px 2px 5px black;white-space:nowrap;}
  .titlenav span {font-size:70%; color:white;}
  .titlenav a {color:white; text-decoration:none;}
    .titlenav a:hover {color:var(--site-pink); text-decoration:underline;}

  /* Infobox */
  .infobox {float:right; width:250px; box-shadow:5px 5px 5px var(--site_bg_dark_transp);}
  .infobox h1 {background:var(--site-gold); color:black; padding:0.5em; font-size:1.1em; margin:0; position:relative;}
  .infobox h2 {background:var(--site-gold); color:black; padding:0.5em; margin:0; font-size:1em;}
  .infobox .thumb img {width:100%;}
  .infobox dl { font-size:90%; margin:0; padding:0.5em; background:var(--site_bg_lite); border:1px solid var(--transp_w); border-top:0;}
  .infobox dt {font-weight:bold;}
  .infobox dd {font-size:90%;}
    .infobox dt {background-size:contain; background-position:center left; background-repeat:no-repeat; padding-left:2em;}
    .infobox .open {background:rgb(22, 121, 91);}
    .infobox .closed {background:rgb(121, 22, 47);}
  .infobox code {word-wrap:break-word;}

  /* TOC */
  #toc {max-width:15em; background:var(--transp_w); border:1px solid var(--transp_w); padding:0.5em 1em;}
  #toc h1 {font-size:1em; text-align:center; border:0; padding:0; margin:0 0 0.5em 0;}
  #toc ol { margin:0; padding:0 0 0 1em; line-height:1.7em; list-style:decimal inside; font-size:0.9em;}
  #toc ol > ol {list-style:upper-roman inside; padding-left:1.5em; font-size:1em;}

  /* Wikitable */
  .wikitable {margin:0.5em auto; border-collapse:collapse;}
  .wikitable th {background:var(--site-gold); color:black; padding: 0.5em;}
  .wikitable tr.subh th {background:var(--site_bg); color:white; padding: 0.5em;}
  .wikitable td {padding:0.5em;}
  .wikitable tr:nth-child(even) {background-color:var(--transp_w);}
  

  /* General page content */
  .contentbox {background:var(--site_bg_lite); border:1px solid var(--transp_w); padding:1em; margin-right:265px; box-shadow:5px 5px 5px var(--site_bg_dark_transp);}
    .frontpage {text-align:center;}
      .flexy {display:flex; gap:10em; margin:2em 0 1em 0;}
      .flexy .item {background:var(--transp_b); padding:1em; width:50%; font-size:1.2em; border-radius:1em;}
      .flexy .icon {float:left;}
  .contentbox h1 {border-bottom:1px dotted;}
  .contentbox h2 {margin:0;}
    .feat {background-size:contain; background-repeat:no-repeat; background-position:center left; padding-left:2em;}
  .contentbox .sub {font-size:0.9em; font-style:italic; margin: 0 0 0 2em;}
    .frontpage h1 {border:0; text-align:center; font-size:1.2em; font-weight:400;}
    .frontpage h2 {border-bottom:1px dotted; text-align:left; margin:0 0 0.2em 120px;}
  .contentbox blockquote {border-left:4px solid; padding:0.5em 0.5em 0.5em 1em; font-style:italic; background:var(--transp_w);}
  .contentbox ul {line-height:1.5em;}

  .rideslist {list-style:none;}
    .rideslist .icon {margin-right:3pt}

    /* Generic thumbnail img */
    .contentbox .floatthumb {float:right; background:var(--transp_w); border:1px solid var(--transp_w); max-width:250px; padding:0.5em; margin:0 0 1em 1em;}
    .contentbox .floatthumb img {max-width:250px;}
    .contentbox .floatthumb .caption {font-size:0.8em; text-align:center; margin:0.2em; line-height:1.5em;}

    /* Shows article */
    .show {display:flex; gap:1em; margin:1em 0;}
      .show_img {width:25%; min-height:150px; background-size:cover; background-position:center; flex-grow:0; flex-shrink:0;}
      .show_desc {width:75%; max-width:75%; flex-grow:0; flex-shrink:0;}
      .show h2 {}
      .show h3 {font-size:1em; background:var(--site_bg); margin:0; padding:0.2em 0.2em 0.2em 1em; font-style:italic;}
      .show p {font-style:italic;}

  /* Galleries */
  .gallery { display:flex; justify-content:center; gap:2em; flex-wrap:wrap;}
  .gallery .thumb {padding:1em; background:var(--transp_w); border:1px solid var(--transp_w); text-align:center;}
  .gallery .thumb img {max-width:20em; text-align:center;}
  .gallery .thumb .caption {font-size:0.8em; text-align:center; margin:0.2em; line-height:1.5em;}

/* Global overrides */
  /* Cursors */
  .infobox .thumb a, .gallery .thumb a, .floatthumb a, #lightbox .button, .override a img {cursor:pointer;}
  /* Links */
  .ext:after {content:""; width:0.6em; height:0.6em; margin-left:0.2em; position:relative; top:-3px; display:inline-block; background:url("img/util/External.png") no-repeat center; background-size:cover;}
  .area_link { display:block; padding:1em; background-size:cover; background-position:center; color:white!important; text-decoration:none; text-shadow:2px 2px 5px black;}
  .retro {font-family:"Tiny5";}
  .ref {font-size:0.8em; position:relative; top:-0.5em;}
  /* Popouts */
  .important {background:rgba(255,0,0,0.1); padding:1em; border:1px solid rgba(255,0,0,0.5); border-left:5px solid red; }
  .important:before {content:""; width:2em; height:2em; display:block; float:left; background:url("img/util/Exclaim.png") no-repeat center center; background-size:contain; margin-right:1em; position:relative; top:-5px;}
  .distinguish {margin-left:1.5em; font-style:italic;}
  .KC:before {content:""; display:inline-block; background:url("img/util/KC.png"); background-size:cover; height:1em; width:1em; position:relative; top:2px; margin-right:0.2em;}
  /* JS Util */
  .JS_SHOW {display:block;}
  .JS_HIDE {display:none;}
  /* Rank Badges */
  .GUEST {background:var(--guest); color:white!important; text-decoration:none; font-weight:700; padding:0 5px;}
  .PASS {background:var(--pass); color:white!important; text-decoration:none; font-weight:700; padding:0 5px;}
  .D23 {background:var(--d23); color:white!important; text-decoration:none; font-weight:700; padding:0 5px;}
  .C33 {background:var(--c33); color:white!important; text-decoration:none; font-weight:700; padding:0 5px;}
  .DVC {background:var(--dvc); color:white!important; text-decoration:none; font-weight:700; padding:0 5px;}
  .IFPlus {background:var(--site-gold); color:black!important; text-decoration:none; font-weight:700; padding:0 5px;}
  /* Icons and Symbols */
  .icon {display:inline-block; width:34px; height:34px;}
    .infobox .icon {position: absolute; opacity: 0.5; right: 5px; top: 5px;}

/* Lightbox */
#lightbox {position:fixed; left:0; top:0; width:100%; height:100%; padding:5em; background:rgba(0,0,0,0.8); z-index:999;}
/*  */
  #lightbox .thumb {position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  #lightbox .button {position:absolute; top:-3em; right:-3em; background:rgba(255,255,255,0.75); padding:0.5em; border-radius:1em; color:black;}
  #lightbox img {max-width:50em; box-shadow:0 0 5px black;}
  #lightbox .desc {margin:0.5em; text-shadow:2px 2px 5px black;}

/* Ifone Menu */
.ifone_container {position: absolute; top: 60px; left: 21px; width: 100%; height: 100%;}
.ifone_button {display:block; position:absolute;}
#ifone_info {text-align:center;}

/* Calculator */
#calculator {padding:1em; background:var(--transp_w)}
#calculator label {font-weight:700;}
.calculator_row {padding:0.5em 0;}
.calculator_result {padding:1em; background:var(--site_bg);}
#calculator input, #calculator select {padding:0.5em;}
.calculator_result hr {border:1px dashed rgba(255,255,255,0.5);}

/* Mobile Devices Evil */
@media (max-width:1000px) {
  .pagesplash {min-height:10em}
  .titlenav {font-size:1.4em}
}