MediaWiki:Common.css

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


/* a class that will keep a header from appearing in the TOC on the page */
.noautonum .tocnumber {
    display: none;
}


/* so that the tagline will show in all skins */
#siteSub {
  display:block;
  font-weight:normal;
  font-size:normal;
}


/* so that columns won't spread all the way across the page */
/* see Books of the Bibles entry */
div#columns {
  max-width: 450px;
}


/* enlarge text size */
body {
    font-size: 115%;
}


/* creating class to have padding between table columns */
.table-padding td {
    padding: 25px;
}

/* creating class to have padding between table columns, right side only */
.table-padding-right td {
    padding: 25px;
}


/* for expand/collapse */
.mw-collapsible .mw-collapsible-toggle {
    float:left; !important
    font-weight: bold;
    background-color: #ffff00;
    margin-left:25px;
}


/* 5/15/24: text in <pre> does not wrap on Reading mode in Edge browser, and assume in others and extends past right margin; but doesn't work; the only thing that works is max-width: 80% which is good to limit the whitespace block, but on read mode it just extends off the page... none of these worked:
pre {
    overflow: visible;
    nowrap: normal;
    max-width: 80%;
    display: inline-block;
    white-space: normal;
*/

/* per chatgitp 6/5/24: doesant work
pre {
    white-space: pre-wrap !important; /* Allows wrapping of text */ 
    max-width: 80%; /* Ensures preformatted text does not exceed the width of the container */
    word-wrap: break-word; /* Ensures long words are broken */
}
*/

/* per Chatgtp 8/7/24: */

pre {
  white-space: pre-wrap; /* This will allow text to wrap inside <pre> tags */
}


/* looks better w/ pre set to smaller width than page, but on read mode it still spills off right margin*/
pre {
    max-width: 80%;
}


/* for readability of blog posts, setting max width on blog namespace; however, it losess side margins on small screen, so needs fix */
/* note: using 
        margin: 0 auto; /* Center the content */
/*  centers the content on wide mode but forces text on small screens to the edge of left margin */

@media screen and (min-width: 850px) {
.ns-3000 #bodyContent {
    max-width: 850px; /* Adjust the value as needed */
    margin: 0 auto; /* Center the content */
}


/* to use for Bible quotations instead of <pre> tag */
/* doesn't need "whitespace"; Edge still doesn't render other formatting so centering*/

.bible {
    font-family: Roboto Mono; !important /* Use a monospace font like <pre> */
    max-width: 80% !important;
    white-space: pre-wrap;  /* Preserve whitespace, wrap text */
    overflow-wrap: break-word !important;  /* Allow words to break to prevent overflow */
    margin: 5px 5px 5px 25px !important;
    padding: 5px !important; /* Add padding for better readability */
    background-color: #f5f5f5 !important; /* Light background to mimic <pre> appearance */
    border: 1px solid #ccc !important;  /* Optional border for styling */
    border-radius: 4px !important; /* Optional rounded corners */
}

.bible2 {
    display: block;
    font-family: Roboto Mono; !important /* Use a monospace font like <pre> */
    max-width: 80% !important;
    background-color: #f5f5f5 !important; /* Light background to mimic <pre> appearance */
    border: 1px solid #ccc !important;  /* Optional border for styling */
    border-radius: 4px !important; /* Optional rounded corners */
}