MediaWiki:Common.css: Difference between revisions

From Practices and Politics of Representation
Jump to navigation Jump to search
No edit summary
Remove duplicated banner comment line
 
(54 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Hide all logos */
/************************************************************
* CLEAN MINIMAL THEME — BLACK & WHITE ONLY
************************************************************/
 
 
/*----------------------------------------------------------
  0. GLOBAL RESET
----------------------------------------------------------*/
 
.mw-wiki-logo,
.mw-wiki-logo,
.mw-logo,
.mw-logo,
Line 12: Line 20:
}
}


/* Force all text to Arial font */
html {
body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,  
    font-size: 18px !important;
    -webkit-text-size-adjust: 100% !important;
}
 
body, h1, h2, h3, h4, h5, h6, p, td, th,
input, textarea, select, button {
input, textarea, select, button {
     font-family: Arial, sans-serif !important;
     font-family: 'Times New Roman', Times, serif !important;
    color: rgb(0, 0, 0) !important;
    line-height: 1.2 !important;
}
}


/* Remove shadows and effects - but NOT on edit elements */
body {
.portlet, .pBody, #content, #column-content,  
    background: rgb(255, 255, 255) !important;
#column-one, .portlet h3, .portlet h5, .gallerybox,
    -webkit-text-size-adjust: 100% !important;
.thumb, .thumbinner, .infobox, table, #footer,
}
#p-cactions, .vector-menu-tabs {
 
a, a:visited {
    color: rgb(0, 0, 255) !important;
    line-height: 1 !important;
}
 
a:hover {
    color: rgb(0, 0, 255) !important;
    text-decoration: underline !important;
}
 
/* Remove shadow */
* {
     box-shadow: none !important;
     box-shadow: none !important;
     text-shadow: none !important;
     text-shadow: none !important;
}
}


/* Move entire navigation menu to bottom of sidebar */
/* Make all borders white (invisible) */
#p-navigation {
*:not(img) {
    order: 999 !important;
     border-color: rgb(255, 255, 255) !important;
    margin-top: auto !important;
    padding-top: 100px !important;
     border-top: 1px solid #eee !important;
}
}


#column-one {
/* Images*/
    display: flex !important;
.mw-body-content img,
    flex-direction: column !important;
.mw-body-content figure,
    min-height: 100vh !important;
.mw-body-content .thumb {
width: auto !important;
height: auto !important;
padding-left: 0px !important;
}
}


/* Clean headings - remove underlines */
/*----------------------------------------------------------
h1, h2, h3, h4, h5, h6, .firstHeading {
  1. HEADER
    border-bottom: none !important;
----------------------------------------------------------*/
     background: none !important;
 
    background-image: none !important;
#mw-head,
    color: #333 !important;
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
     background: rgb(255, 255, 255) !important;
}
}


/* Clean sidebar */
/* Align the top menu with the content */
.portlet {
#left-navigation {
    background: none !important;
  /*  margin-left: 10em !important;*/
    background-image: none !important;
    border: none !important;
}
}


.portlet h3, .portlet h5 {
/* Pull the login area inwards */
    background: none !important;
#p-personal {
    background-image: none !important;
  /*  margin-right: 1em !important; */
    border: none !important;
    color: #333 !important;
    font-weight: bold !important;
}
}


.portlet .pBody ul li a {
#right-navigation {
    color: #0066cc !important;
  /*  margin-right: 1em !important; */
    text-decoration: none !important;
    background: none !important;
}
}


.portlet .pBody ul li a:hover {
    color: #004499 !important;
    text-decoration: underline !important;
}


/* Clean top tabs - no borders */
/*----------------------------------------------------------
#p-cactions, #p-namespaces, #p-views {
  2. SIDEBAR
    background: none !important;
----------------------------------------------------------*/
    border: none !important;
}


#p-cactions li, #p-namespaces li, #p-views li {
#column-one,
     background: none !important;
#mw-panel,
     background-image: none !important;
.vector-legacy-sidebar {
     border: none !important;
     background: transparent !important;
     margin: 0 10px 0 0 !important;
     padding-top: 5em !important;
     margin-top: 0 !important;
     width: 250px !important;
}
}


#p-cactions li a, #p-namespaces li a, #p-views li a {
.portlet, .pBody {
     background: none !important;
     background: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: #0066cc !important;
    text-decoration: none !important;
    border: none !important;
    padding: 8px 15px !important;
}
}


#p-cactions li.selected a, #p-namespaces li.selected a, #p-views li.selected a {
.portlet h3, .portlet h5 {
     color: #333 !important;
     color: rgb(0, 0, 0) !important;
     font-weight: bold !important;
     font-weight: bold !important;
     background: none !important;
     background: rgb(255, 255, 255) !important;
}
}


#p-cactions li a:hover, #p-namespaces li a:hover, #p-views li a:hover {
    background: #f0f0f0 !important;
    color: #004499 !important;
}


/* Clean personal tools (right menu) */
/* Tools gizle */
#p-personal {
#p-tb {
     background: none !important;
     display: none !important;
    border: none !important;
}
}


#p-personal ul li a {
/* Sidebar links */
     color: #0066cc !important;
#mw-panel a,
#mw-panel a:visited,
.vector-legacy-sidebar a,
.portlet a,
.pBody a {
     color: rgb(0, 0, 255) !important;
     text-decoration: none !important;
     text-decoration: none !important;
     background: none !important;
     font-size: 20px !important;
    -webkit-text-size-adjust: 100% !important;
}
}


#p-personal ul li a:hover {
#mw-panel a:hover,
    color: #004499 !important;
.vector-legacy-sidebar a:hover,
.portlet a:hover,
.pBody a:hover {
     text-decoration: underline !important;
     text-decoration: underline !important;
}
}


/* Clean content area */
/*----------------------------------------------------------
#content {
  3. TABS
     background: #ffffff !important;
----------------------------------------------------------*/
     border: 1px solid #ddd !important;
 
#p-namespaces,
#p-views,
#p-cactions,
.vector-tabs,
.vector-menu-tabs {
     background: transparent !important;
     border: none !important;
    box-shadow: none !important;
}
}


/* Gallery - larger images, no gray backgrounds */
#p-namespaces ul,
.gallerybox {
#p-views ul,
     background: none !important;
#p-cactions ul {
    border: none !important;
     background: rgb(255, 255, 255) !important;
    width: 200px !important;
    margin: 15px !important;
}
}


.gallerybox .thumb {
 
     background: none !important;
 
    border: none !important;
#p-namespaces li.selected a,
    width: 200px !important;
#p-views li.selected a {
     font-weight: bold !important;
}
}


.gallerybox .thumb img {
#p-namespaces li a:hover,
    width: 200px !important;
#p-views li a:hover,
     height: auto !important;
#p-cactions li a:hover {
     background: rgb(240, 240, 240) !important;
}
}


.gallerytext {
/* Remove tab underline */
     background: none !important;
#p-namespaces li.selected a::after,
#p-views li.selected a::after,
.vector-menu-tabs li.selected a::after {
    display: none !important;
     background: transparent !important;
     border: none !important;
     border: none !important;
     color: #666 !important;
     box-shadow: none !important;
    text-align: center !important;
}
}


/* Clean image thumbnails */
 
.thumb {
/*Menu tabs*/
     background: none !important;
.vector-menu-tabs-legacy li a {
     background: transparent !important;
    background-image: none !important;
     border: none !important;
     border: none !important;
    color: rgb(0, 0, 255) !important;
}
}


.thumbinner {
.vector-menu-tabs-legacy li {
     background: none !important;
     background: transparent !important;
    background-color: transparent !important;
     border: none !important;
     border: none !important;
}
}


.thumbcaption {
/*----------------------------------------------------------
     background: none !important;
  4. PERSONAL MENU (Login vs)
     color: #666 !important;
----------------------------------------------------------*/
 
#p-personal {
     background: rgb(255, 255, 255) !important;
}
 
#p-personal ul {
     background: rgb(255, 255, 255) !important;
}
}


/* Clean and simple infobox */
 
.infobox {
 
     background: none !important;
 
     background-color: transparent !important;
/*----------------------------------------------------------
     border: none !important;
  5. CONTENT
    border-left: 3px solid #0066cc !important;
----------------------------------------------------------*/
    padding: 15px !important;
 
    margin: 0 0 20px 20px !important;
#content {
    width: 300px !important;
     background: rgb(255, 255, 255) !important;
     font-size: 38px !important;
     margin-left: 250px !important;
}
}


.infobox th {
.mw-body, .mw-body-content {
     background: none !important;
     background: rgb(255, 255, 255) !important;
    background-color: transparent !important;
     font-size: 38px !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
     font-weight: bold !important;
    padding: 8px 0 !important;
    text-align: left !important;
}
}


.infobox td {
/* Headings */
     background: none !important;
h1, h2, h3, h4, h5, h6, .firstHeading {
    background-color: transparent !important;
     color: rgb(0, 0, 0) !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
    color: #666 !important;
}
}


.infobox tr:last-child th,
h1 { font-size: 50px !important; }
.infobox tr:last-child td {
h2 { font-size: 42px !important; }
     border-bottom: none !important;
h3 { font-size: 47px !important; }
h4 { font-size: 43px !important; }
 
/* Links */
a, a:visited {
     color: rgb(0, 0, 255) !important;
}
}


/* Clean tables */
a:hover {
table {
     color: rgb(0, 0, 255) !important;
     border-collapse: collapse !important;
     text-decoration: underline !important;
     background: none !important;
}
}


table th {
 
    background: none !important;
/*----------------------------------------------------------
    background-image: none !important;
  6. SEARCH
    border: 1px solid #ddd !important;
----------------------------------------------------------*/
    color: #333 !important;
 
     font-weight: bold !important;
#p-search,
#simpleSearch,
#searchInput {
     background: rgb(255, 255, 255) !important;
}
}


table td {
 
     background: none !important;
/*----------------------------------------------------------
    border: 1px solid #ddd !important;
  7. TABLES
----------------------------------------------------------*/
 
table, th, td {
     background: rgb(255, 255, 255) !important;
}
}


/* Clean forms */
 
input, textarea, select {
/*----------------------------------------------------------
    border: 1px solid #ccc !important;
  8. IMAGES
     background: #ffffff !important;
----------------------------------------------------------*/
    border-radius: 0 !important;
 
.thumb,
.thumbinner,
.thumbimage,
.gallerybox,
figure,
figcaption {
     background: transparent !important;
}
}


#searchInput {
.thumbcaption, .gallerytext {
     border: 1px solid #ccc !important;
     color: rgb(0, 0, 0) !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}
}


/* Clean footer */
 
#footer {
/*----------------------------------------------------------
     background: none !important;
  9. INFOBOX
    border: none !important;
----------------------------------------------------------*/
    border-top: 1px solid #eee !important;
 
    color: #666 !important;
.infobox, .infobox th, .infobox td {
     background: rgb(255, 255, 255) !important;
}
}


/* Clean edit section links */
 
.mw-editsection a {
/*----------------------------------------------------------
     color: #0066cc !important;
  10. FOOTER
     text-decoration: none !important;
----------------------------------------------------------*/
 
#footer, #catlinks {
     background: rgb(255, 255, 255) !important;
     color: rgb(0, 0, 0) !important;
}
}


.mw-editsection a:hover {
 
     color: #004499 !important;
 
    text-decoration: underline !important;
 
/*----------------------------------------------------------
  11. VISUAL EDITOR
----------------------------------------------------------*/
 
.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-tool,
.oo-ui-buttonElement-button {
     background: rgb(255, 255, 255) !important;
}
}


/* Clean categories */
.oo-ui-tool:hover,
#catlinks {
.oo-ui-buttonElement-button:hover {
    background: none !important;
     background: rgb(240, 240, 240) !important;
    border: none !important;
    border-top: 1px solid #eee !important;
     color: #666 !important;
}
}


/* Clean body */
.oo-ui-menuSelectWidget,
body {
.oo-ui-popupWidget-popup,
     background: #ffffff !important;
.oo-ui-optionWidget,
.oo-ui-menuOptionWidget {
     background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}
}


/* Preserve layout structure */
.oo-ui-optionWidget:hover {
#column-one, #column-content {
     background: rgb(240, 240, 240) !important;
     background: none !important;
}
}


.mw-body, .mw-body-content {
.ve-ui-surface,
     background: none !important;
.ve-ce-surface {
    border: none !important;
     background: rgb(255, 255, 255) !important;
}
}
/* Academic Year links - specific targeting */
 
#n-Academic-Year-2025 a,
.wikiEditor-ui,
#n-Academic-Year-2024 a,
.wikiEditor-ui-toolbar {
#n-Academic-Year-2023 a,
     background: rgb(255, 255, 255) !important;
#n-Academic-Year-2022 a {
     text-decoration: underline !important;
    font-weight: bold !important;
}
}


/* Remove gray gradient shadow from top */
 
#mw-head,
/*----------------------------------------------------------
.mw-header,
  12. DROPDOWN MENUS
.vector-header,
----------------------------------------------------------*/
#mw-head-base,
 
#mw-page-base {
.vector-menu-dropdown .vector-menu-content,
     background: none !important;
.vector-dropdown-content,
     background-image: none !important;
#p-cactions .vector-menu-content {
    background-color: transparent !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}


/* Remove gradient from content area top */
 
#content {
 
     background: #ffffff !important;
/*----------------------------------------------------------
    background-image: none !important;
  13. FORMS
     border-top: none !important;
----------------------------------------------------------*/
 
input, textarea, select {
     background: rgb(255, 255, 255) !important;
     color: rgb(0, 0, 0) !important;
}
}


/* Clean page background */
.hover-word {
body {
  position: relative;
    background: #ffffff !important;
  text-decoration: underline dotted;
    background-image: none !important;
  cursor: help;
}
.hover-word .hover-pop {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  z-index: 100;
}
.hover-word:hover .hover-pop {
  display: block;
}
}


/* Remove any remaining gradients */
/* ============================================================
.vector-legacy-sidebar,
  14. ALIGN TOP TABS + FOOTER WITH THE HEADING
#mw-panel {
  The sidebar is 250px wide, so the heading/body sit to its
    background: none !important;
  right (the large content font adds extra left padding, so the
    background-image: none !important;
  heading text starts around 305px). By default the top tabs
}
  ("Page" / "Discussion") and the footer don't follow, so they
  look misaligned. These rules push both to the heading's edge.
 
  NOTE: #left-navigation ignores the `left` property (it is
  floated), so we must use margin-left here, not left.


/************************************
  >>> ONE KNOB: tune --rep-left until "Page" and the footer
* IMPROVEMENTS BASED ON FEEDBACK
      line up with the first letter of the heading.
************************************/
  ============================================================ */


/* ★ Use RGB at full saturation — replace navy-ish blues with full rgb blues */
:root {
a,
    --rep-left: 305px;
.portlet .pBody ul li a,
#p-personal ul li a,
#p-cactions li a,
#p-namespaces li a,
#p-views li a {
    color: rgb(0, 102, 255) !important; /* bright saturated blue */
}
}


a:hover,
/* Top-left tabs (Page / Discussion) */
.portlet .pBody ul li a:hover,
#left-navigation {
#p-personal ul li a:hover,
     margin-left: var(--rep-left) !important;
#p-cactions li a:hover,
#p-namespaces li a:hover,
#p-views li a:hover {
     color: rgb(0, 51, 204) !important; /* darker saturated blue */
}
}


/* Info Box left border – fully saturated cyan/blue */
/* Let "Page" sit flush at the column edge (remove tab indent) */
.infobox {
#p-namespaces li:first-child {
     border-left: 3px solid rgb(0, 122, 255) !important;
     margin-left: 0 !important;
}
#p-namespaces li:first-child a {
    padding-left: 0 !important;
}
}


/* Headings – strong neutral black instead of gray */
/* Footer text block */
h1, h2, h3, h4, h5, h6, .firstHeading {
#footer {
     color: rgb(30, 30, 30) !important;
     margin-left: var(--rep-left) !important;
    padding-left: 0 !important;
}
}
/* ============================================================
  15. EDITOR INTERFACE FIX
  The large content font (38px) was leaking into the editor
  toolbar and menus. These rules reset the editor UI to a
  normal size. The reading view is not affected.
  ============================================================ */


/* Footer and meta text – pure neutral gray */
/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */
#footer,
.ve-ui-toolbar,
.gallerytext,
.ve-ui-context,
.thumbcaption,
.ve-ui-contextSelectWidget,
#catlinks {
.oo-ui-toolbar,
     color: rgb(102, 102, 102) !important;
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-defaultOverlay {
     font-size: 14px !important;
    line-height: normal !important;
}
}


/****************************************
/* Classic (source) editor toolbar */
* ★ Increase font-size — improve reading
.wikiEditor-ui-toolbar {
****************************************/
    font-size: 14px !important;
    line-height: normal !important;
}


body, p, li, td, th, span, div {
/* Source editing textarea stays readable */
     font-size: 17px !important;   /* from ~14–16px to readable 17px */
#wpTextbox1 {
     line-height: 1.55 !important; /* smoother line spacing */
     font-size: 15px !important;
     line-height: 1.5 !important;
}
}


/***************************************************
/* Give popups/menus a visible border
* ★ Reduce line length (typography best practice)
  (the "white border" rule had made them invisible) */
***************************************************/
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget {
    border: 1px solid rgb(0, 0, 0) !important;
}


.mw-body-content,
/* Editor labels in black instead of blue */
#content,
.oo-ui-tool .oo-ui-tool-title,
#mw-content-text {
.oo-ui-labelElement-label,
    max-width: 130ch !important;    /* limit to 70 characters per line */
.ve-ui-toolbar a,
    margin-left: auto !important;
.oo-ui-popupWidget a {
     margin-right: auto !important; /* center align the content block */
     color: rgb(0, 0, 0) !important;
}
}


/* Keep sidebars unaffected by max-width */
 
#mw-panel,
/* Hover popup opening downwards - for words on the first line */
#column-one {
.hover-word .hover-pop.below {
     max-width: none !important;
     top: 100%;
    bottom: auto;
}
}

Latest revision as of 12:19, 7 September 2026

/************************************************************
 * CLEAN MINIMAL THEME — BLACK & WHITE ONLY
 ************************************************************/


/*----------------------------------------------------------
  0. GLOBAL RESET
----------------------------------------------------------*/

.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo,
#p-logo,
#p-logo a,
.mw-logo-container {
    display: none !important;
    visibility: hidden !important;
}

html {
    font-size: 18px !important;
    -webkit-text-size-adjust: 100% !important;
}

body, h1, h2, h3, h4, h5, h6, p, td, th,
input, textarea, select, button {
    font-family: 'Times New Roman', Times, serif !important;
    color: rgb(0, 0, 0) !important;
    line-height: 1.2 !important;
}

body {
    background: rgb(255, 255, 255) !important;
    -webkit-text-size-adjust: 100% !important;
}

a, a:visited {
    color: rgb(0, 0, 255) !important;
    line-height: 1 !important;
}

a:hover {
    color: rgb(0, 0, 255) !important;
    text-decoration: underline !important;
}

/* Remove shadow */
* {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Make all borders white (invisible) */
*:not(img) {
    border-color: rgb(255, 255, 255) !important;
}

/* Images*/
.mw-body-content img,
.mw-body-content figure,
.mw-body-content .thumb {
width: auto !important;
height: auto !important;
padding-left: 0px !important;
}

/*----------------------------------------------------------
  1. HEADER
----------------------------------------------------------*/

#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
    background: rgb(255, 255, 255) !important;
}

/* Align the top menu with the content */
#left-navigation {
  /*  margin-left: 10em !important;*/
}

/* Pull the login area inwards */
#p-personal {
   /*  margin-right: 1em !important; */
}

#right-navigation {
   /*  margin-right: 1em !important; */
}


/*----------------------------------------------------------
  2. SIDEBAR
----------------------------------------------------------*/

#column-one,
#mw-panel,
.vector-legacy-sidebar {
    background: transparent !important;
    padding-top: 5em !important;
    margin-top: 0 !important;
    width: 250px !important;
}

.portlet, .pBody {
    background: rgb(255, 255, 255) !important;
}

.portlet h3, .portlet h5 {
    color: rgb(0, 0, 0) !important;
    font-weight: bold !important;
    background: rgb(255, 255, 255) !important;
}


/* Tools gizle */
#p-tb {
    display: none !important;
}

/* Sidebar links */
#mw-panel a,
#mw-panel a:visited,
.vector-legacy-sidebar a,
.portlet a,
.pBody a {
    color: rgb(0, 0, 255) !important;
    text-decoration: none !important;
    font-size: 20px !important;
    -webkit-text-size-adjust: 100% !important;
}

#mw-panel a:hover,
.vector-legacy-sidebar a:hover,
.portlet a:hover,
.pBody a:hover {
    text-decoration: underline !important;
}

/*----------------------------------------------------------
  3. TABS
----------------------------------------------------------*/

#p-namespaces,
#p-views,
#p-cactions,
.vector-tabs,
.vector-menu-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#p-namespaces ul,
#p-views ul,
#p-cactions ul {
    background: rgb(255, 255, 255) !important;
}



#p-namespaces li.selected a,
#p-views li.selected a {
    font-weight: bold !important;
}

#p-namespaces li a:hover,
#p-views li a:hover,
#p-cactions li a:hover {
    background: rgb(240, 240, 240) !important;
}

/* Remove tab underline */
#p-namespaces li.selected a::after,
#p-views li.selected a::after,
.vector-menu-tabs li.selected a::after {
    display: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/*Menu tabs*/
.vector-menu-tabs-legacy li a {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: rgb(0, 0, 255) !important;
}

.vector-menu-tabs-legacy li {
    background: transparent !important;
    border: none !important;
}

/*----------------------------------------------------------
  4. PERSONAL MENU (Login vs)
----------------------------------------------------------*/

#p-personal {
    background: rgb(255, 255, 255) !important;
}

#p-personal ul {
    background: rgb(255, 255, 255) !important;
}




/*----------------------------------------------------------
  5. CONTENT
----------------------------------------------------------*/

#content {
    background: rgb(255, 255, 255) !important;
    font-size: 38px !important;
    margin-left: 250px !important;
}

.mw-body, .mw-body-content {
    background: rgb(255, 255, 255) !important;
    font-size: 38px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .firstHeading {
    color: rgb(0, 0, 0) !important;
}

h1 { font-size: 50px !important; }
h2 { font-size: 42px !important; }
h3 { font-size: 47px !important; }
h4 { font-size: 43px !important; }

/* Links */
a, a:visited {
    color: rgb(0, 0, 255) !important;
}

a:hover {
    color: rgb(0, 0, 255) !important;
    text-decoration: underline !important;
}


/*----------------------------------------------------------
  6. SEARCH
----------------------------------------------------------*/

#p-search,
#simpleSearch,
#searchInput {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  7. TABLES
----------------------------------------------------------*/

table, th, td {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  8. IMAGES
----------------------------------------------------------*/

.thumb,
.thumbinner,
.thumbimage,
.gallerybox,
figure,
figcaption {
    background: transparent !important;
}

.thumbcaption, .gallerytext {
    color: rgb(0, 0, 0) !important;
}


/*----------------------------------------------------------
  9. INFOBOX
----------------------------------------------------------*/

.infobox, .infobox th, .infobox td {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  10. FOOTER
----------------------------------------------------------*/

#footer, #catlinks {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}




/*----------------------------------------------------------
  11. VISUAL EDITOR
----------------------------------------------------------*/

.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-tool,
.oo-ui-buttonElement-button {
    background: rgb(255, 255, 255) !important;
}

.oo-ui-tool:hover,
.oo-ui-buttonElement-button:hover {
    background: rgb(240, 240, 240) !important;
}

.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-optionWidget,
.oo-ui-menuOptionWidget {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}

.oo-ui-optionWidget:hover {
    background: rgb(240, 240, 240) !important;
}

.ve-ui-surface,
.ve-ce-surface {
    background: rgb(255, 255, 255) !important;
}

.wikiEditor-ui,
.wikiEditor-ui-toolbar {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  12. DROPDOWN MENUS
----------------------------------------------------------*/

.vector-menu-dropdown .vector-menu-content,
.vector-dropdown-content,
#p-cactions .vector-menu-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/*----------------------------------------------------------
  13. FORMS
----------------------------------------------------------*/

input, textarea, select {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}

.hover-word {
  position: relative;
  text-decoration: underline dotted;
  cursor: help;
}
.hover-word .hover-pop {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  z-index: 100;
}
.hover-word:hover .hover-pop {
  display: block;
}

/* ============================================================
   14. ALIGN TOP TABS + FOOTER WITH THE HEADING
   The sidebar is 250px wide, so the heading/body sit to its
   right (the large content font adds extra left padding, so the
   heading text starts around 305px). By default the top tabs
   ("Page" / "Discussion") and the footer don't follow, so they
   look misaligned. These rules push both to the heading's edge.

   NOTE: #left-navigation ignores the `left` property (it is
   floated), so we must use margin-left here, not left.

   >>> ONE KNOB: tune --rep-left until "Page" and the footer
       line up with the first letter of the heading.
   ============================================================ */

:root {
    --rep-left: 305px;
}

/* Top-left tabs (Page / Discussion) */
#left-navigation {
    margin-left: var(--rep-left) !important;
}

/* Let "Page" sit flush at the column edge (remove tab indent) */
#p-namespaces li:first-child {
    margin-left: 0 !important;
}
#p-namespaces li:first-child a {
    padding-left: 0 !important;
}

/* Footer text block */
#footer {
    margin-left: var(--rep-left) !important;
    padding-left: 0 !important;
}
/* ============================================================
   15. EDITOR INTERFACE FIX
   The large content font (38px) was leaking into the editor
   toolbar and menus. These rules reset the editor UI to a
   normal size. The reading view is not affected.
   ============================================================ */

/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */
.ve-ui-toolbar,
.ve-ui-context,
.ve-ui-contextSelectWidget,
.oo-ui-toolbar,
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-defaultOverlay {
    font-size: 14px !important;
    line-height: normal !important;
}

/* Classic (source) editor toolbar */
.wikiEditor-ui-toolbar {
    font-size: 14px !important;
    line-height: normal !important;
}

/* Source editing textarea stays readable */
#wpTextbox1 {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Give popups/menus a visible border
   (the "white border" rule had made them invisible) */
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget {
    border: 1px solid rgb(0, 0, 0) !important;
}

/* Editor labels in black instead of blue */
.oo-ui-tool .oo-ui-tool-title,
.oo-ui-labelElement-label,
.ve-ui-toolbar a,
.oo-ui-popupWidget a {
    color: rgb(0, 0, 0) !important;
}


/* Hover popup opening downwards - for words on the first line */
.hover-word .hover-pop.below {
    top: 100%;
    bottom: auto;
}