MediaWiki:Chameleon.css

body {
    background: #eaecf0;
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
    font-size: .90rem; /* Bahai9 */
}
a {
    color: #0645ad;
}
/* Hide the menu unless page is too narrow, hide logo instead */
.navbar-nav.right > .nav-item.dropdown {
    display: none;
}
.navbar-nav.right > .nav-item.p-tb-dropdown {
    display: none;
}
/* General small-screen rules */
@media (max-width: 767px) {
    /* Navbar dropdown visibility */
    .navbar-nav.right > .nav-item.dropdown {
        display: block;
    }

    .navbar-nav.right > .nav-item.dropdown.p-wikibase-otherprojects-dropdown {
        display: none;
    }

    /* Hide logo and other projects */
    .p-logo,
    .p-wikibase-otherprojects {
        display: none;
    }

    /* Toggle p-tb-dropdown visibility */
    .navbar-nav.right > .nav-item.p-tb-dropdown {
        display: block;
    }

    /* Adjust navbar link padding */
    .navbar-expand .navbar-nav .nav-link,
    .p-navbar.not-collapsible .navbar-nav .nav-link,
    .navbar-expand .navbar-nav .p-navbar .navbar-tool > a,
    .p-navbar .navbar-expand .navbar-nav .navbar-tool > a,
    .p-navbar.not-collapsible .navbar-nav .p-navbar .navbar-tool > a,
    .p-navbar .p-navbar.not-collapsible .navbar-nav .navbar-tool > a {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Remove margin-left from enhanced recent changes */
    .client-js .mw-changeslist ul,
    .client-js .mw-changeslist table.mw-enhanced-rc {
        margin-left: 0 !important;
    }
}
/* Make navbar normal */
.navbar, .p-navbar {
    padding: 0;
}
/* Search bar */
.p-search {
    width: 100%;
    order: 1;
}
.logo-wrapper {
    min-width: 0em !important;
}
#p-logo-text a {
    padding: 0em 0.7em;
    color: #000000;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    font-variant: small-caps;
    font-size: 1.85em;
    white-space: nowrap;
}
.p-navbar.not-collapsible.py-0.flex-wrap > .navbar-nav {
	align-items: center;
	flex-direction: row;
}
.p-navbar.not-collapsible > .navbar-nav {
	align-items: unset;
	flex-direction: column;
}
.mt-4, .p-navbar .navbar-nav.right, .my-4 {
    margin-top: 0rem !important;
}
.p-navbar .navbar-nav .navbar-tools {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sidebar-item .nav-link:before {
    display: none;
}
.mw-body {
    box-shadow: 4px 3px 7px 3px rgb(0 0 0 / 10%);
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    background: #ffffff;
    padding: 0em 2em 1em;
    margin-bottom: 0;
    overflow: auto;
    word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: normal;
    font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
    line-height: 1.125;
    margin-top: 0rem !important;
}
h1, .h1 {
    font-size: 2em;
}
.mw-body .firstHeading {
    border-bottom: solid 1px #c8ccd1;
}
#searchGoButton, #mw-searchButton {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    right: 0.1em;
    width: 2.5em;
    height: 2.8em;
    text-indent: -99999px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(/skins/Timeless/resources/images/search-ltr.svg?402b1);
    background-position: center 40%;
    box-shadow: none;
}
.sidebar-item {
    background: #f8f9fa;
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    margin: 0em 0 1em 0 !important;
    box-shadow: 0 1px 7px 1px rgb(0 0 0 / 10%) !important;
    padding: 1em;
    line-height: 1.125;
    word-wrap: break-word;
    font-size: 0.95em;
}
.nav-menu-label {
    font-weight: normal;
    font-size: 1em;
    margin: 0.75em 0.3em 0.75em 0.3em;
    padding-bottom: 0.15em;
    border-bottom: solid 2px #c8ccd1;
}
.navbar-brand {
	margin-left: 1rem;
    margin-right: 0rem;
}
.nav-item {
	margin-left: 6px
}
.navbar-tools.navbar-nav a:before {
    margin-right: 0 !important;
}
/* Make sidebar menu items a darker blue */
.sidebar-item.sidebar-menu.col a {
    color: #355b83;
}
.mw-list-item {
	margin-left: 6px;
}
.echo-icons > * + * {
    margin-left: 0 !important;
}
.bahai-tools {
    gap: 8px;
}
/* Don't display some stuff on the main page */
body.page-Main_Page #tools-and-categories,
body.page-Main_Page h1.firstHeading,
body.page-Main_Page #catlinks {
    display: none !important;
}
.mpwelcome {
	font-size:230%;
	line-height:130%;
	border:none;
	margin:0 1.5rem;
	color:#000;
	font-family:'hoefler text','times new roman', serif;
	font-variant: small-caps;
	white-space:nowrap
}
@media (max-width: 768px) {
    .mpwelcome {
    	white-space:unset;
    }
}
.infobox {
    background: #f8f9fa;
    border-collapse: unset;
    max-width: 32%;
}
@media (max-width: 768px) {
    .infobox {
    	max-width: unset;
        width: 100% !important; /* Full width on smaller screens */
    }
}
.infobox.sisterproject {
	max-width: 65% !important;
}
@media (max-width: 768px) {
    .infobox.sisterproject {
    	float: none;
    	max-width: 100% !important;
    }
}
.row {
    flex-wrap: inherit;
}
.navbar-tools.echo-icons {
    gap: 8px;
    margin-right: 6px;
}
.p-navbar {
    background-color: transparent;
    padding: 0em;
}
.page-tools-toflat {
    flex-direction: column;
    /* background-color: transparent !important; */
}
.navbar-nav:not(.right) {
    flex-grow: 1;
}
.sidebar {
    padding-right: 1em;
    box-sizing: border-box;
    justify-content: space-between;
    width: 14em;
    flex: 0 0 12em; /* Bahai9 change from 0 0 14em */
}
.p-navbar .navbar-brand img {
    max-width: 200px;
    width: 100%;
    object-fit: contain;
}
.sidebar .nav-link, .sidebar .p-navbar .navbar-tool > a {
    padding: 0.25em 0 !important;
}
.mw-redirectedfrom {
    display: block;
    font-size: 84%;
    line-height: 1.2em;
    margin: -8px 0px 1.4em 2em;
    color: #54595d;
}
.header-wrapper nav.p-navbar {
    max-width: 115em;
    width: 100%;
    margin: auto;
    background: #ffffff;
}

.header-wrapper {
    margin-bottom: 12px;
    background: #ffffff;
    color: #000000;
    min-height: 3.125em;
}

#searchInput {
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.searchButton, .mw-searchButton {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    right: 1.5em;
    width: 2.5em;
    height: 2.5em;
    text-indent: -99999px;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(/skins/Timeless/resources/images/search-ltr.svg?402b1);
    background-position: center 40%;
    box-shadow: none;
}
.navbar-tools.navbar-nav a:before {
    color: #ababab;
}

.navbar-tool a {
    color: #000 !important;
}
.navbar-tool.mw-list-item a:before, a.navbar-more-tools:before {
    color: #385b82 !important;
}

.sidebar-wrapper{
	max-width:115em;
	width:100%;
	margin:auto;
	padding:0;
}

/* Hide in other projects that link to nothing */
.navbar-nav.right > .nav-item.p-wikibase-otherprojects-dropdown {
    display: none;
}
.sidebar-item.sidebar-menu.col > .nav-item.p-wikibase-otherprojects-dropdown {
    display: none;
}

content{
	margin: 0;
}

.logo-wrapper {
    min-width: 10.4em;
}

.footer {
    border-top: solid 1px #54595d;
    box-shadow: inset 0 7px 2px -4px rgb(0 0 0 / 10%);
    color: #ffffff;
    background: #72777d;
}
.footer-wrapper {
    padding: 0.7em 0;
    max-width:115em;
	width:100%;
	margin:auto;
}
.footer a {
    color: #dbeaff;
    font-size: 16px;
}
.wiki-content {
    padding-bottom: 15px;
}

.tools-and-categories .p-navbar{
    box-shadow: 4px 3px 7px 3px rgb(0 0 0 / 10%);
    border: solid #eaecf0;
    border-width: 1px 1px 0.2em;
    background: #ffffff;
    margin-top: 14px;
    padding: 6px 14px;
}

.tools-and-categories .categories .mw-normal-catlinks [title="Special:Categories"]:first-child:before {
    content:'';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5rem;
    display: inline-block;
    text-decoration: none;
}
.categories {
    margin-left: 10px;
}
body .mw-body .catlinks {
	margin: 1rem 0 0;
	padding:0;
    border: 0px;
    background-color: transparent;
    font-size: larger;
}
.catlinks {
	margin-top: 0;
	margin: 0.5em;
    border: 0px;
    background-color: transparent;
    font-size: larger;
}
.catlinks > .mw-hidden-catlinks {
	margin: .5rem 0;
	font-size:70%;
    font-style: italic;
    color:#666;
}
.catlinks > .mw-hidden-catlinks a {
	margin-top: .5rem;
    font-style: italic;
    color:#6289ca;
}
body .mw-body .catlinks ul {
	margin-left:0;
}
.navbar-nav.right {
    margin-left: 0 !important;
}
.suggestions-special, .suggestions-result {
    padding: 10px 30px  !important;
}
.bahai-search {
    padding-left: 16px !important;
}
.flexlayout {
	display:flex;
	flex-direction:row;
	clear:both;
}
.flexequal > .flexcol {
	flex-basis:0%;
}
.flexcol {
	flex-grow:1;
}
.flexcol+.flexcol {
	margin-left:1em;
}
@media (max-width: 1180px) {
	#mp-topbanner .flexlayout {
		flex-wrap:wrap;
	}
}
@media (max-width: 930px) {
	.flexlayout {
		flex-direction:column;
	}
	.flexcol+.flexcol {
		margin-left:unset;
	}
}
@media (min-width: 320px) and (max-width: 767px) {
   .bahai-search {
    padding: 0 !important;
   }
    .navbar-tool  .user-name {
        display: none;
    }
    .header-wrapper {
        padding-bottom: 6px;
    }
    .navbar, .p-navbar {
        padding: 0;
    }

    .flex-fill.wiki-content.container-fluid {
        padding: 0 !important;
    }
    .sidebar {
        display: none !important;
    }
    .bahai-search {
        margin-top: 14px;
    }
  }
@media (max-width: 500px) {
  .mw-body div.thumb, .mw-body img.thumbimage {
    float: none; /* Make images take 100% of screen on small displays */
    margin: 0 auto;
    display: table;
  }
  .todayinhistory {
  	width: 100% !important;
    float: none !important;
    margin-bottom: 10px;
	}
}
.sidebar-heading{
	margin: 1em 0 0.5em !important;
	font-weight: normal;
	font-size: 1em;
	padding-bottom: 0.15em;
	border-bottom: solid 2px #c8ccd1;
}
.sidebar-subitem{
	font-size: 0.95em;
	margin: 0;
	padding: 0.25em 0;
}

/* Per David's suggestion for mobile; avoid fixed content due to limited space */
@media (max-width: 767px) {
  #toc {
    position: unset;
  }
  .tocnumber, .toctext {
    display: inline !important;
  }
  body {
  	font-size: 1rem;
  }
}