MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/** CSS placed here will be applied to all skins */

@font-face {
    font-family:"Gotham-Black";
    src:url("/styles/Gotham-Black.otf")
}

@font-face {
    font-family:"Gotham-BlackItalic";
    src:url("/styles/Gotham-BlackItalic.otf")
}

@font-face {
    font-family:"Gotham-Bold";
    src:url("/styles/Gotham-Bold.otf")
}
@font-face {
    font-family:"Gotham-BoldItalic";
    src:url("/styles/Gotham-BoldItalic.otf")
}

@font-face {
    font-family:"Gotham-Book";
    src:url("/styles/Gotham-Book.otf")
}

@font-face {
    font-family:"Gotham-BookItalic";
    src:url("/styles/Gotham-BookItalic.otf")
}
h1, h2, h3, h4, h5, h6 { font-family:Gotham-Book; 
                         /* text-transform: uppercase; */
}
body {font-family:Gotham-Book;Montserrat}

.mw-body h1,.mw-body h2,.mw-body h3, .mw-body h4,.mw-body h5 {font-family:Gotham-Book,Montserrat}



.mw-headline
{
	font-family: "Gotham-Bold","Gotham-Book" , Montserrat, sans-serif;
	/*font-size: 14px; */
	/*font-weight: bold;*/
	/*color: #008080;*/
background:#ffffff;
//background:#cef2e0;
//	background-color: #CCFFCC;
//	border-radius: 5px;
	//border: 1px outset #008080;
padding: 2px;
	width: 300px;
}
.structuredData {display:none}

td {vertical-align:top}

body {
 max-width:1366px; 
}

/* max-width of text on page 
body {max-width:1366px;}
html {max-width:1366px;}
.mw-body-content {max-width:1366px;}
*/


/* ****************** NO TITLE ON MAINPAGE *************** */
body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-view h1.firstHeading, body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-submit h1.firstHeading { display: none; }



/* responsive image sizing */
img {
  max-width: 100%;
  height: auto;
}

/* responsive table of contents with introduction https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 */
    .tocdiv {
    max-width: 1366px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(300px, 4fr));
    grid-template-rows: repeat(2, 300px);
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
}

/*  responsive iframe for youtube videos */
@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Power Characters */
@font-face {
    font-family: 'power_symbols';
    src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.ttf') format('ttf'),
         url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'),
         url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.power{
  font-family: 'power_symbols';
  font-style: normal;
}

/* standard link colors */
.mw-body-content a:link { color: #0000FF; } /* normal unvisited links */
.mw-body-content a:link:visited { color: #0B0080; } /* visited links */
.mw-body-content a:link:active { color: #FF0000; } /* active links */
.mw-body-content a:link.new { color: #FF0000; } /* new links */
.mw-body-content a:link.extiw { color: #3366BB; } /* interwiki links */
.mw-body-content a:link.external { color: #3366BB; } /* external links */
.mw-body-content a:link.stub { color: #772233; } /* hovered links */
/*
.mw-body-content a:link {color: #FF0000}
.mw-body-content a:visited {color: #00FF00}
.mw-body-content a:hover {color: #FF00FF}
.mw-body-content a:active {color: #0000FF}
*/
// no right click
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// l1 comparison table

/* === L1 comparison table scroll container === */
.mw-parser-output .l1-compare-wrap {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* === CRITICAL OVERRIDE: defeat Vector/Minerva table width clamp === */
.mw-parser-output .l1-compare-wrap table.l1-compare {
  white-space: nowrap;
  width: max-content;
  min-width: 1400px;
  max-width: none !important;   /* ← THIS is the blocker you were hitting */
  border-collapse: separate;
  border-spacing: 0;
}

/* === Sticky header row === */
.mw-parser-output .l1-compare-wrap table.l1-compare th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  color: #202122;
  z-index: 10;
}

/* === Sticky first column === */
.mw-parser-output .l1-compare-wrap table.l1-compare th:first-child,
.mw-parser-output .l1-compare-wrap table.l1-compare td:first-child {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 9;
  border-right: 1px solid #a2a9b1;
}

/* === Image display on hover over text === */

.hover-image-wrapper {
  position: relative;
  display: inline-block;
  cursor: help;
}

.hover-image-popup {
  position: absolute;
  top: 1.2em;
  left: 0;
  z-index: 9999;

  background: #fff;
  padding: 4px;
  border: 1px solid #ccc;

  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  transition: opacity 0.15s ease-in-out;
}

.hover-image-wrapper:hover .hover-image-popup {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* MediaWiki:Common.js
   Lightweight fallback mobile menu
   Activates only when Minerva/native mobile menu is not present
*/

mw.hook('wikipage.content').add(function () {
  // Only run on narrow screens
  if (window.innerWidth > 800) return;

  // If native Minerva menu exists, do nothing
  if (document.querySelector('.minerva-menu-button, .minerva-hamburger, .mw-mobile-menu')) return;

  // Avoid injecting twice
  if (document.querySelector('.fallback-mobile-hamburger')) return;

  // Create hamburger button
  var btn = document.createElement('button');
  btn.className = 'fallback-mobile-hamburger';
  btn.type = 'button';
  btn.setAttribute('aria-label', 'Open menu');
  btn.setAttribute('aria-expanded', 'false');
  btn.innerHTML = '☰';

  // Insert into header area (best-effort)
  var header = document.querySelector('.minerva-header') || document.querySelector('#mw-head') || document.body;
  try {
    header.insertBefore(btn, header.firstChild);
  } catch (e) {
    document.body.appendChild(btn);
  }

  // Create overlay and panel
  var overlay = document.createElement('div');
  overlay.className = 'fallback-mobile-overlay';
  overlay.setAttribute('role', 'dialog');
  overlay.setAttribute('aria-modal', 'true');
  overlay.style.display = 'none';

  var panel = document.createElement('nav');
  panel.className = 'fallback-mobile-panel';
  panel.setAttribute('aria-label', 'Mobile menu');
  panel.setAttribute('role', 'menu');

  overlay.appendChild(panel);

  // Close control
  var close = document.createElement('div');
  close.className = 'fallback-mobile-close';
  close.innerHTML = '<a href="#" aria-label="Close menu">✕</a>';
  panel.appendChild(close);

  // Menu links — mirror typical Mobile-menu entries
  var links = [
    { href: mw.util.getUrl('Main_Page'), label: 'Home' },
    { href: mw.util.getUrl('Special:Search'), label: 'Search' },
    { href: mw.util.getUrl('Recentchanges'), label: 'Recent changes' },
    { href: mw.util.getUrl('Special:Random'), label: 'Random page' },
    { href: mw.util.getUrl('Special:AllPages'), label: 'All pages' },
    { href: mw.util.getUrl('Special:Categories'), label: 'Categories' },
    { href: mw.util.getUrl('Special:Upload'), label: 'Upload file' }
  ];

  links.forEach(function (lnk) {
    var a = document.createElement('a');
    a.href = lnk.href;
    a.textContent = lnk.label;
    a.setAttribute('role', 'menuitem');
    a.tabIndex = 0;
    panel.appendChild(a);
  });

  document.body.appendChild(overlay);

  // Focus management helpers
  function trapFocus(container) {
    var focusable = container.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])');
    if (!focusable.length) return null;
    var first = focusable[0];
    var last = focusable[focusable.length - 1];

    function handleTab(e) {
      if (e.key !== 'Tab') return;
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
    document.addEventListener('keydown', handleTab);
    return function remove() { document.removeEventListener('keydown', handleTab); };
  }

  var removeTrap = null;

  function openMenu() {
    overlay.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    btn.setAttribute('aria-expanded', 'true');
    // focus first link
    var firstLink = panel.querySelector('a');
    if (firstLink) firstLink.focus();
    removeTrap = trapFocus(panel);
  }

  function closeMenu() {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
    btn.setAttribute('aria-expanded', 'false');
    if (removeTrap) { removeTrap(); removeTrap = null; }
    btn.focus();
  }

  // Event listeners
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    openMenu();
  });

  overlay.addEventListener('click', function (e) {
    if (e.target === overlay) closeMenu();
  });

  close.addEventListener('click', function (e) {
    e.preventDefault();
    closeMenu();
  });

  // Close on Escape
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && overlay.style.display === 'flex') {
      closeMenu();
    }
  });

  // If viewport is resized to desktop, remove fallback elements
  window.addEventListener('resize', function () {
    if (window.innerWidth > 800) {
      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
      if (btn.parentNode) btn.parentNode.removeChild(btn);
      document.body.style.overflow = '';
    }
  });
});