/* || GENERAL STYLES */
/* The "*" selector below means 'apply this style to everything */
* {
box-sizing: border-box;
}
/* The selector below changes a default 16px font size (which is most browsers' default) to 10px. The 62.5% setting here, does set the default html font to 10px, but notice that the font-size in the body tag sets it a little larger, as it looked too small at 10px, however, keeping the 62.5% here makes it easier to calculate all the other rem's being multiples of 10. */
html {
font-size: 62.5%;
width: 100vw;
height: 100vh;
}
body {
font: 1.6rem "Times New Roman", Times, serif; /* font size = 16px */
line-height: 1.25;
background-color: #9bdeff;
color: #000080;
margin: auto;
max-width: 960px;
padding: .5rem; /* 5px */
overflow-x: hidden;
}
/* Hyperlinks - aka "anchor" links */
a:link {
color: #0000ee;
font-weight: bold;
font-size: calc(19px + 0.390625vw);
text-underline-position: under;
}
/* This turns link purple once the user has clicked them */
a:visited a:visited:active {
color: #551a8b;
font-weight: bold;
font-size: calc(19px + 0.390625vw);
}
a:hover {
color: #0000ee;
cursor: pointer;
}
a:focus {
color: 0000ee;
outline: 1px #0000ee dotted;
}
a:active {
color: #ff0000;
outline: 1px #ff0000 dotted;
}
/* Regular text paragraph, in html. This should allow the text to adjust its size according to the viewport width. */
p {
font-size: calc(19px + 0.390625vw);
color: #000080;
text-align: left;
}
/* For making containers adjust their width - this is being used on Spirit within image on About Us max 32% */
.adjustable-width {
height: auto;
max-width: 32%;
margin: auto;
}
/* For making containers adjust their width automatically to its contents */
.auto-width {
height: auto;
width: auto;
margin: auto;
}
/* Blue bold text, centered,
in html. */
.a {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
}
/* White bold text, centered,
in html. */
.b {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
color: #ffffff;
}
/* White normal weight text, centered,
in html. */
.c {
font-size: calc(19px + 0.390625vw);
font-weight: normal;
text-align: center;
color: #ffffff;
}
/* Navy normal weight text, centered,
in html. */
.d {
font-size: calc(19px + 0.390625vw);
font-weight: normal;
text-align: center;
color: #000080;
}
/* White bold text, centered,
in html. */
.e {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
color: #ffffff;
line-height: .5;
}
/* Blue normal LARGE text, centered,
in html. */
.f {
font-size: calc(1.4rem + 1.2vw);
font-weight: normal;
text-align: center;
color: #000080;
}
/* White normal weight text, left aligned,
in html. */
.g {
font-size: calc(19px + 0.390625vw);
color: #ffffff;
text-align: left;
}
/* Green bold text,
in html. */
.h {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
color: #008000;
}
/* Red bold text
in html. */
.j {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
color: #a80000;
}
/* Very light blue bold text
in html. */
.k {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
color: #daf5fe;
}
/* White normal LARGE text, centered,
in html. */
.m {
font-size: calc(1.4rem + 1.2vw);
font-weight: normal;
text-align: center;
color: #ffffff;
}
/* X Large font
in html. */
.xlg {
font-size: calc(2.5rem + 1.2vw);
}
/* Background image for Become a Member - Blue Balloons */
.blue-balloons {
position: relative;
display: flex;
white-space: nowrap;
border: solid #000080 .1rem;
margin: auto;
justify-content: center;
align-items: center;
color: #000080;
line-height: calc(3rem + 1vw);
font-size: calc(19px + 0.390625vw);
}
/* Blockquote - indents from both sides
... don't forget to close it with
*/
blockquote {
margin-left: 5rem;
margin-right: 5rem;
}
/* Blue background with white font */
.blue {
position: relative;
border: .3rem solid #3ec0ff; /* 3px */
padding: 1.3rem; /* 13px */
background-color: #000080;
color: #ffffff;
margin: auto;
width: 100%;
}
/* This is the 'box model' styling with a navy background, no border and white lettering */
.bluebox {
background-color: #000080;
padding: .7rem;
color: #ffffff;
max-width: 100%;
font-size: 2.25rem;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* For 3px aqua border around images or other elements */
.brdr {
border: .3rem #3ec0ff solid;
}
/* For 5px navy border around images or other elements */
.brdrnavy {
border: solid #000080 .5rem;
}
/* For 15px navy border around images or other elements */
.brdrwide {
border: 1.5rem solid #000080;
background-color: #3ec0ff;
margin: auto;
text-align: center;
padding: .3rem;
}
/* This is the 'box model' styling with a white background, no border and navy lettering */
.breadbox {
background-color: #e0f8fe;
border: .1rem solid #000080;
padding: 2rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
}
/* This is the 'containing' wrapper for the directory section */
.breadwrapper {
border: .5rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .2rem;
padding: .3rem;
width: 88%;
margin: auto;
grid-template-areas:
"bb1"
"tb1"
"tb2"
"tb3"
"tb4"
"tb5"
"tb6"
"tb7"
"tb8"
"tb9"
"tb10"
"tb11"
"tb12"
"tb13"
"tb14"
"tb15"
"tb16"
"tb17"
"tb18"
"tb19"
"tb20"
"tb21"
"tb22"
"tb23"
"tb24";
}
/* cccc Step 5 studies table - mobile*/
.cccc-studies {
border: .5rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .2rem;
padding: .3rem;
width: 100%;
margin: auto;
grid-template-areas:
"tb1" "tb2" "tb3" "tb4" "tb5" "tb6" "tb7" "tb8" "tb9" "tb10" "tb11" "tb12" "tb13" "tb14" "tb15" "tb16" "tb17" "tb18" "tb19" "tb20" "tb21" "tb22" "tb23" "tb24" "tb25" "tb26" "tb27" "tb28" "tb29" "tb30" "tb31" "tb32" "tb33" "tb34" "tb35" "tb36" "tb37" "tb38" "tb39" "tb40" "tb41" "tb42" "tb43" "tb44" "tb45" "tb46" "tb47" "tb48" "tb49" "tb50" "tb51" "tb52" "tb53" "tb54" "tb55";
}
/* to center text over an image at the bottom */
.center-bottom {
position: absolute;
text-align: center;
bottom: 1.6rem;
left: 0rem;
right: 0rem;
}
/* Centered text over an image*/
.centered {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
text-align: center;
}
/* to center text over an image at the top */
.center-top {
position: absolute;
text-align: center;
top: 1.6rem;
left: 0rem;
right: 0rem;
}
/* Container, has no styling, it is just like an empty table to "contain" things in.
*/
.container {
padding: 0px;
margin: auto;
position: relative;
width: 100%;
max-width: 100%;
border: none;
}
/* This is the OUTER box that holds the inner box (content2) for the body, so that it looks like there are two navy blue borders with a turquoise border between them.
*/
.content {
background-color: #3ec0ff;
padding: .2rem;
text-align: center;
color: #000080;
border: .3rem solid #000080; /* 3px */
display: block;
margin: auto;
max-width: 100%;
}
/* This is the INNER box for the body, so that it looks like there are two navy blue borders with a turquoise border between them.
*/
.content2 {
background-color: #ffffff;
padding: 1.3rem; /* 13px */
text-align: center;
color: #000080;
border: .3rem solid #000080; /* 3px */
display: block;
margin: auto;
max-width: 100%;
}
.cookies-eu-banner {
background: #ddd;
color: #000080;
padding: 7px;
font-size: 15px;
font-family: Arial;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
margin: auto;
max-width: 100%;
z-index: 10;
}
.cookies-eu-banner button {
text-decoration: none;
background: #fff;
color: #0000ff;
border: 1px solid #000080;
cursor: pointer;
padding: 4px 7px;
margin: 0px 0px 0px 14px;
font-size: 13px;
font-weight: bold;
letter-spacing: .05em;
transition: background 0.07s, color 0.07s, border-color 0.07s;
}
.more-info {
text-decoration: none;
background: #fff;
color: #222;
border: 1px solid #000080;
cursor: pointer;
padding: 4px 7px;
margin: 0px 14px 0px 0px;
font-size: 13px;
font-weight: bold;
transition: background 0.07s, color 0.07s, border-color 0.07s;
}
.cookies-eu-banner a:link {
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
.cookies-eu-banner button:hover {
background: #fff;
color: #222;
}
.hidden {
display: none;
}
/* Division ... DON'T FORGET to always close it with
*/
div {
font-size: calc(1rem + 1.5vw);
}
/* Dotted border on Purity Books*/
.dotted{
border: dotted 9px #3ec0ff;
}
/* Definition list */
dl {
margin: 10px 10px;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
color: #000080;
text-align: left;
}
/* This is the styling for the background for scripture that looks like a piece of blue paper with rounded edges, lifted up off the page. The same is used for our Purity Publications Poetry e-books to separate each poem. ... DON'T FORGET the
. */
.drop-shadow {
position: relative;
float: center;
width: 95%;
padding: 1em;
margin: auto;
background: #f7fbfd;
box-shadow:0 1rem 1rem -.5rem rgba(0, 0, 0, 0.3), 0 0 .7rem rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position: absolute;
z-index: -2;
}
/* This is what makes it look like lifted corners */
.lifted {
border-radius: .7rem; /* 7px */
}
.lifted:before,
.lifted:after {
bottom: 1.5 rem; /* 15px */
left: 1 rem; /* 10px */
width: 50%;
height: 20%;
max-width: 3 rem; /* 3px */
max-height: 1 rem; /* 1px */
box-shadow: 0 1.5rem 1rem rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
}
.lifted:after {
right: .1 rem;
left: auto;
transform: rotate(3deg);
}
/* This is end of the styling code for scripture backgrounds */
.fit {
margin: auto;
width: fit-content;
height: fit-content;
padding: 0;
}
/* This is the grid styling for the logo section */
.grid-container1 {
display: grid;
grid-template-columns: 9.4rem 1fr;
grid-template-rows: 9.4rem;
padding: .3rem;
justify-content: space-between;
align-items: center;
background-color: #000080;
border: .4rem solid #000080; /* 7px */
}
/* This is the grid styling for the cool-clicks section */
.grid-container2 {
display: grid;
grid-template-columns: 1fr 9.4rem;
gap: 0rem 0rem;
padding: .7rem;
justify-content: space-between;
align-items: center;
background-color: #000080;
}
/* This is the grid styling for the love-offerings section */
.grid-container3 {
display: grid;
grid-template-columns: 1fr 8.6rem;
gap: 0rem 0rem;
padding: .7rem;
justify-content: space-between;
align-items: center;
background-color: #000080;
}
.grid-container3b {
display: grid;
border: .7rem solid #000080;/* 7px */
gap: .3rem;
padding: .3rem;
justify-content: stretch;
align-items: stretch;
background-color: #3ec0ff;
max-width: 100%;
grid-template-areas:
"bb1"
"bb2";
}
/* This is for the Spirit Within Beast Without banner. */
.grid-container3c {
border: .7rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .3rem;
padding: .3rem;
max-width: 100%;
grid-template-areas:
"bb1"
"bb2";
}
/* Different sizes of text, commonly called "Headings" in website design. Only one
allowed per page. */
h1 {
font-size: 2.5rem;
text-align: center;
margin: 0;
}
h2 {
font-size: 2rem;
text-align: center;
margin-bottom: 0;
}
/* I purposely only used h3 tags on the keyword phrases between paragraphs so they could be omitted from @media print easily. */
h3 {
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
}
.half-width {
height: auto;
max-width: 50%;
margin: auto;
}
.handwriting {
font-family: 'Brush Script MT', cursive;
font-weight: normal;
}
hr.thin {
border: 0;
height: 2px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #3ec0ff, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
/* For hyperlink blue font, class="hyper" */
.hyper {
color: #0000ff;
text-align: center;
}
/* Images - this will supposedly keep them centered in their element. */
img {
display: block;
position: relative;
margin: auto;
background-color: #9bdeff;
max-width: 100%;
height: auto;
font-size: calc(14px + 0.390625vw);
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000080;
text-align: left;
}
/* This is used to insert small images inline with text */
.inline {
display: inline-block;
vertical-align: bottom;
}
/* This is the text styling for the logo section on mobile */
.item-text1 {
grid-column: 2 / 3;
font-family: 'Times New Roman', Times, serif;
font-weight: normal;
font-size: 2.5rem;
line-height: 1.5;
color: #ffffff;
height: 9.4rem;
padding: 1rem;
display: flex;
flex-direction: column;
margin: 0;
justify-content: center;
align-items: center;
background-color: #000080;
}
/* This is the text styling for the logo section on larger screens */
.item-text1a {
grid-column: 2 / 3;
font-family: 'Times New Roman', Times, serif;
font-weight: normal;
font-size: 5rem;
line-height: 1;
color: #ffffff;
display: none;
height: 12.4rem;
text-align: center;
background-color: #000080;
}
/* This is the text styling for the cool-clicks section on mobile */
.item-text2 {
grid-column: 1 / 2;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
font-weight: normal;
font-size: 2.75rem;
color: #ffffff;
text-align: center;
background-color: #000080;
}
/* This is the text styling for the love-offerings section on mobile */
.item-text3 {
grid-column: 1 / 2;
font-size: 2.1rem;
font-weight: bold;
color: #ffffff;
text-align: center;
background-color: #000080;
}
/* This is image of the palms on the left side of the logo section */
.item-1 {
height: 9.4rem;
width: 9.4rem;
background-color: #9bdeff;
border: .3rem solid #3ec0ff; /* 3px */
grid-column: 1 / 2;
background-repeat: no-repeat;
background-size: 88px 88px;
background-image: image-set(
"https://www.christianityoasis.com/images/logo-left-side.webp" type("image/webp"),
"https://www.christianityoasis.com/images/logo-left-side.png" type("image/png")
);
}
/* This is image of the palms on the right side of the cool-clicks section */
.item-a {
display: flex;
margin: auto;
justify-content: center;
align-items: center;
background-color: #9bdeff;
border: .3rem solid #3ec0ff; /* 3px */
grid-column: 2 / 3;
}
/* This is image of the window of heaven (right side) in the love-offerings section */
.item-z {
display: flex;
align-items: center;
justify-content: center;
height: 11.3rem;
width: 8.6rem;
border: .3rem solid #3ec0ff; /* 3px */
grid-column: 2 / 3;
float: right;
}
/* This is the square image for Living Water */
div.living-water-square {
background-repeat: no-repeat;
color: #ffffff;
width: 100%;
background-size: cover;
background-position: center;
}
@media (max-width: 569px) {
.lazy {
display: none;
background-color: #000080;
}
}
.no-mirage {
font-family: 'Times New Roman', Times, serif;
font-weight: 400;
font-style: normal;
}
/* START of navigation bar for MOBILE and TABLET */
/* This is the styling of the block that holds the hamburger */
nav {
background-color: #ffffff;
height: 3.5rem;
padding: 0 .5rem;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
/* This hides the menu until the hamburger is clicked */
nav .m-menu__checkbox {
display: none;
}
/* This makes the cursor into a pointer finger instead of an arrow when the hamburger is hovered, also, this is the size for the hamburger and the X that closes the menu */
nav label.m-menu__toggle {
cursor: pointer;
font-size: 4.5rem;
}
/* Below are the dimensions, position, size, manner of entrance, etc. of the menu once hamburger is clicked, it is also the background of the unordered lists */
nav .m-menu {
position: absolute;
top: 0;
left: 0;
max-width: 32rem;
width: calc(100vw - 3rem);
height: 100%;
transform: translate3d(-450px, 0, 0);
transition: transform 0.35s;
z-index: 1;
overflow: hidden;
background-color: #ddd;
}
/* This is the opaque grey that shadows the website when the menu is open in mobile */
nav .m-menu__overlay {
background-color: rgba(103, 103, 103, 0.5);
position: absolute;
top: 0;
width: 100%;
bottom: 0;
z-index: 1;
display: none;
}
/* This makes the background of the title of [each] menu a little darker grey */
nav .m-menu__header {
padding: 0 1.6rem;
height: 5rem;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: .1rem solid #e8e8e8;
}
/* Styling for the menu title(s) */
nav .m-menu__header span {
font-size: 1.8rem;
font-weight: bold;
text-align: center;
width: 100%;
}
/* This causes the slide in effect */
nav .m-menu .m-menu {
transform: translate3d(480px, 0, 0);
}
/* Block that holds the unordered lists. Adds a scrollbar if the list is too long for screen and no bullets on list items */
nav .m-menu ul {
height: 100%;
overflow-y: hidden;
list-style: none;
margin: 0;
padding: 0;
}
/* The styling of the unordered lists, items, labels */
nav .m-menu ul li a, nav .m-menu ul li label {
display: block;
text-align: left;
padding: 0 1.5rem;
line-height: 3.75rem;
text-decoration: none;
color: #0000ff;
background-color: #f9f9f9;
cursor: pointer;
font-size: 1.8rem;
font-weight: normal;
border-bottom: .1rem solid #e8e8e8;
position: relative;
}
/* This is a hover effect on the list items */
nav .m-menu ul li:hover, nav .m-menu ul li a:hover, nav .m-menu ul li label.a-label__chevron:hover {
background-color: #e8e8e8;
}
/* The right pointing arrows (or chevrons) for each of the 5 list items that have dropdowns [these are actually squares that have borders on the top and right side, then are turned 45 degrees on point to create the chevrons */
nav .m-menu ul li label.a-label__chevron::after {
content: "";
position: absolute;
display: inline-block;
height: 1rem;
width: 1rem;
border-color: #000080;
border-style: solid;
border-width: .1rem .1rem 0 0;
transform: rotate(45deg);
top: 50%;
margin-top: -.5rem;
right: 1.6rem;
}
/* Unknown */
nav .m-menu ul li .-invisible {
border-bottom: 0;
}
/* Styling for the left facing chevrons that close the second tier menus */
nav .m-menu .m-menu label.m-menu__toggle {
display: flex;
border-bottom: 0;
padding: 0;
color: #000080;
box-sizing: content-box;
background-color: #ddd;
font-size: 2.5rem;
}
/* This brings up second tier Menu overlay */
nav .m-menu__checkbox:checked ~ .m-menu__overlay {
display: block;
}
/* This is the manner of entrance for second tier menus */
nav .m-menu__checkbox:checked ~ .m-menu {
transform: translate3d(0, 0, 0);
}
/* End of nav CSS for MOBILE and TABLET*/
/* START of horizontal navigation CSS for LARGER screens */
/* This is the styling of the block that holds the menu and the overflow property is so it doesn't create a scroll bar */
.navbar {
display: flex;
overflow: hidden;
background-color: #ffffff;
justify-content: space-between;
align-items: center;
}
/* This is for 'Home' and 'Contact Us' ONLY, in the horizontal navbar*/
.navbar a {
float: left;
font-size: calc(1rem + .7vw);
font-weight: normal;
color: #0000ff;
text-align: center;
padding: calc(1rem + .1vw) calc(1rem + .1vw);
text-decoration: none;
}
/* This aligns the dropdown box on the left side with the button above it and will not cause a scrollbar if the list is too long */
.dropdown {
float: left;
overflow: hidden;
}
/* Styling for the 5 middle buttons that are not hyperlinks, but activate the dropdown(s) when hovered */
.dropdown .dropbtn {
font-size: calc(1rem + .7vw);
border: none;
outline: none;
color: #0000ff;
padding: calc(1rem + .1vw) calc(1rem + .1vw);
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Causes the links and buttons in the horizontal bar to turn darker grey when hovered over */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
}
/* The styling for the light grey box that drops down, including the shadow around the edges of it */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 16rem;
box-shadow: 0rem .8rem 1.6rem 0rem rgba(0,0,0,0.2);
z-index: 1;
}
/* Styling for the links in the dropdown boxes, i.e. no underline, blue text, align left, etc. */
.dropdown-content a {
float: none;
color: #0000ff;
padding: .7rem 1rem;
text-decoration: none;
display: block;
text-align: left;
}
/* This causes the background of the links in the dropdown boxes to turn darker grey when hovered over */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Unknown */
.dropdown:hover .dropdown-content {
display: block;
}
/* End of horizontal navbar CSS*/
.no-bottom {
border-bottom: 0rem;
padding-bottom: 0rem;
margin: 0rem;
}
.no-top {
border-top: 0rem;
padding-top: 0rem;
margin: 0rem;
}
/* Ordered List */
ol {
margin: 10px 10px;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
color: #000080;
text-align: left;
}
.opti-right {
background-color: #ffffff;
padding: 1.5rem .7rem 0rem .7rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.opti-right p.a {
margin-bottom: 0;
}
.optiwhite {
background-color: #ffffff;
display: flex;
flex-direction: column;
padding: .7rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
text-align: center;
align-items: center;
justify-content: center;
line-height: 1;
}
/* For the Oasis Title and Copyright, for print only. */
.printonly {
display: none;
}
/* Quotes ... or rather 'smart quotes' or 'curly quotes.' */
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/* For red font, class="rdltr" */
.rdltr {
color: #a80000;
}
/* Red background with white font */
.red {
position: relative;
border: .3rem solid #3ec0ff; /* 3px */
padding: 1.3rem; /* 13px */
background-color: #e50000;
color: #000080;
margin: auto;
width: 100%;
}
/* For related studies "tables," class="related" */
.related {
display: grid;
border: .5rem solid #000080;
background-color: #3ec0ff;
display: grid;
margin: auto;
max-width: 100%;
text-align: center;
gap: .3rem;
padding: .3rem;
grid-template-areas:
"related-top"
"related-bottom";
}
/* For related studies white bottom section */
.related-bottom {
border: .1rem solid #000080;
background-color: #ffffff;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: .5rem;
padding-bottom: .5rem;
}
/* For related studies blue top section */
.related-top {
background-color: #000080;
text-align: center;
color: #ffffff;
}
/* For 77% "tables," with turquoise top cell class="related-turquoise" */
.related-turquoise {
display: grid;
border: .5rem solid #000080;
background-color: #3ec0ff;
margin: auto;
text-align: center;
gap: .3rem;
padding: .3rem;
width: 77%;
grid-template-areas:
"related-turquoise-top"
"related-bottom";
}
/* For related studies turquoise top section */
.related-turquoise-top {
border: .1rem solid #000080;
background-color: #e1f7fb;
text-align: center;
color: #000080;
padding: 1.3rem;
max-width: 100%;
}
/* Blue lettered Scripture,
in html. */
.scripture-blue {
font-size: calc(19px + 0.390625vw);
color: #000080;
}
/* Red lettered Scripture,
in html. */
.scripture-red {
font-size: calc(19px + 0.390625vw);
color: #a80000;
}
/* Sections - no real style, it just tells Google that all things are related within the
. */
.section {
padding: 0px;
margin: auto;
max-width: 100%;
}
/* Small font class="sf" */
.sf {
font-size: 1em;
}
.step {
padding: 2.5rem;
margin: 1px;
background-color: #ffffff;
text-align: center;
font-size: calc(19px + 0.390625vw);
display: inline-flex;
}
.stones {
border: .1rem solid #000080;
background-color: #e1f7fb;
padding: 2rem;
color: #000080;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(19px + 0.390625vw);
line-height: 1;
font-weight: bold;
text-align: center;
}
.stepping-stones {
border: .5rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .2rem;
padding: .3rem;
width: 100%;
margin: auto;
grid-template-areas:
"bb1"
"tb1"
"tb2"
"tb3"
"tb4"
"tb5"
"tb6"
"tb7"
"tb8"
"tb9"
"tb10"
"tb11"
"tb12"
"tb13"
"tb14";
}
/* This is for two columns on tablet and laptop but one column on mobile */
.side-by-side {
border: .5rem solid #000080;/* 7px */
background-color: #ffffff;
display: grid;
gap: .2rem;
padding: .25rem;
width: 100%;
margin: auto;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"bb1"
"tb1";
}
sup {
font-weight: bold;
}
/* No underline on hyperlink - tdn = text decoration none */
.tdn {
text-decoration: none;
}
.thebookright {
background-color: #ffffff;
padding: .7rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
/* This is the table of contents chapter columns */
.toc-chapters {
border: .1rem solid #000080;
background-color: #e1f7fb;
padding: 2rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
line-height: 1;
font-weight: bold;
text-align: center;
}
/* This is the 'containing' wrapper for Table of Contents */
.toc {
border: .5rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .2rem;
padding: .3rem;
width: 100%;
margin: auto;
grid-template-areas:
"bb1"
"tb1"
"tb2";
}
/* For use with
or to underline text, use ... and DON'T FORGET the . */
u, .u {
text-decoration: underline;
text-underline-position: under;
}
/* Unordered List */
ul {
line-height: 1.5;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
color: #000080;
text-align: left;
}
/* Remove bullets */
ul.no-bullets {
margin-right: 2rem;
margin-left: 2rem;
line-height: 1.5;
font-size: calc(19px + 0.390625vw);
font-weight: normal;
color: #000080;
text-align: left;
list-style-type: none;
}
/* For making YouTube Videos Mobile Responsive */
.videoWrapper {
position: relative;
padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Beginning of styles for the directory grid. */
.bb1 {grid-area: bb1;} .bb2 {grid-area: bb2;} .bb3 {grid-area: bb3;} .bb4 {grid-area: bb4;} .bb5 {grid-area: bb5;} .bb6 {grid-area: bb6;} .bb7 {grid-area: bb7;} .bb8 {grid-area: bb8;} .bb9 {grid-area: bb9;} .bb10 {grid-area: bb10;}
.tb1 {grid-area: tb1;} .tb2 {grid-area: tb2;} .tb3 {grid-area: tb3;} .tb4 {grid-area: tb4;} .tb5 {grid-area: tb5;} .tb6 {grid-area: tb6;} .tb7 {grid-area: tb7;} .tb8 {grid-area: tb8;} .tb9 {grid-area: tb9;} .tb10 {grid-area: tb10;} .tb11 {grid-area: tb11;} .tb12 {grid-area: tb12;} .tb13 {grid-area: tb13;} .tb14 {grid-area: tb14;} .tb15 {grid-area: tb15;} .tb16 {grid-area: tb16;} .tb17 {grid-area: tb17;} .tb18 {grid-area: tb18;} .tb19 {grid-area: tb19;} .tb20 {grid-area: tb20;} .tb21 {grid-area: tb21;} .tb22 {grid-area: tb22;} .tb23 {grid-area: tb23;} .tb24 {grid-area: tb24;} .tb25 {grid-area: tb25;} .tb26 {grid-area: tb26;} .tb27 {grid-area: tb27;} .tb28 {grid-area: tb28;} .tb29 {grid-area: tb29;} .tb30 {grid-area: tb30;} .tb31 {grid-area: tb31;} .tb32 {grid-area: tb32;} .tb33 {grid-area: tb33;} .tb34 {grid-area: tb34;} .tb35 {grid-area: tb35;} .tb36 {grid-area: tb36;} .tb37 {grid-area: tb37;} .tb38 {grid-area: tb38;} .tb39 {grid-area: tb39;} .tb40 {grid-area: tb40;} .tb41 {grid-area: tb41;} .tb42 {grid-area: tb42;} .tb43 {grid-area: tb43;} .tb44 {grid-area: tb44;} .tb45 {grid-area: tb45;} .tb46 {grid-area: tb46;} .tb47 {grid-area: tb47;} .tb48 {grid-area: tb48;} .tb49 {grid-area: tb49;} .tb50 {grid-area: tb50;} .tb51 {grid-area: tb51;} .tb52 {grid-area: tb52;} .tb53 {grid-area: tb53;} .tb54 {grid-area: tb54;} .tb55 {grid-area: tb55;} .tb56 {grid-area: tb56;} .tb57 {grid-area: tb57;}
.wb1 {grid-area: wb1;} .wb2 {grid-area: wb2;} .wb3 {grid-area: wb3;} .wb4 {grid-area: wb4;} .wb5 {grid-area: wb5;} .wb6 {grid-area: wb6;} .wb7 {grid-area: wb7;} .wb8 {grid-area: wb8;}
/* White background with blue lettering, used in footer because it has wider padding . */
.white {
position: relative;
border: .3rem solid #3ec0ff; /* 3px */
padding: 1.3rem; /* 13px */
background: #ffffff;
color: #000080;
}
.white-background {
margin: auto;
width: 100%;
display: flex; /* establish flex container */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
}
/* This is the 'box model' styling with a white background, no border and navy lettering */
.whitebox {
background-color: #ffffff;
border: 1px solid #fbfefb; /*so you can see where the ad is even when google doesn't show one*/
padding: .7rem;
color: #000080;
font-size: calc(19px + 0.390625vw);
font-weight: bold;
text-align: center;
}
.wide-width {
width: 100%;
}
/* This is the 'containing' wrapper for the directory section */
.wrapper {
border: .5rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .5rem;
padding: .5rem;
grid-template-areas:
"wb1"
"bb1"
"wb2"
"wb3"
"wb4"
"bb2"
"wb5"
"wb6"
"wb7"
"wb8";
}
/* This is the 'containing' wrapper/grid for the optimization-paragraph section in mobile */
.wrapper-opti {
border: .7rem solid #000080;/* 7px */
background-color: #3ec0ff;
display: grid;
gap: .3rem;
padding: .3rem;
max-width: 100%;
grid-template-areas:
"bb1"
"wb1";
}
/* This is for no padding */
.zpad {
padding: 0rem;
}
/* The CSS below with aqua colored letters are 'id' or 'identification' names */
/* This is the styling code for the aqua inner border in the footer */
#aqua {
padding: .7rem;
border-width: .1rem solid #3ec0ff;
margin: .4vw;
}
/* This is the styling code for the thick navy border in the footer */
#fancyfooter {
border: calc(1rem + 4vw) solid #000080;
}
/* This concerns the bottom margin that was too wide on turquoise link boxes */
#fixbtm {
margin-bottom: -.3rem;
}
#grey {
background-color: #f7f7f7;
padding: 2.5rem;
}
/* This makes normal weight text */
#light {
font-weight: normal;
}
/* This concerns the love offerings section */
#luv-1 {
border: .5rem solid #000080;
}
/* This concerns the love offerings section */
#luv-2 {
border: .1rem solid #000080;
}
#mall-banner {
width: 100%;
margin: auto;
padding: 3rem;
background-color: #3ec0ff;
border-right: .5rem;
border-left: .5rem;
border-top: 0rem;
border-bottom: 0rem;
border-color: #000080;
border-style: solid;
}
#mall-2 {
border-width: .2rem;
border-bottom: none;
}
#memban {
margin: auto;
width: 100%;
}
#members-banner {
width: 100%;
margin: auto;
padding: 0rem 3rem 3rem 3rem;
background-color: #3ec0ff;
border-right: .5rem;
border-left: .5rem;
border-top: 0rem;
border-bottom: 0rem;
border-color: #000080;
border-style: solid;
}
#navy {
background-color: #000080;
}
#no-bg {
background-color: rgba(0,0,0,0.0);
}
#navy-scripture {
background: #000080;
color: #ffffff;
padding: .25em;
}
#white-c {
background-color: #ffffff;
padding-left: .25em;
padding-right: .25em;
padding-top: .5em;
padding-bottom: .7em;
align-items: center;
line-height: calc(1.4rem + 1vw);
}
/* This is the styling code for wikipedia background */
#wiki-def {
background: #f7f7f7;
padding: .5em;
}
#xtrapad {
padding: .5em;
}
#xtrapad {
padding: 1.5rem;
}
/* The CSS below begins the media queries that make changes to the different elements as the viewport becomes larger. They are not in alphabetical order, but in numerical order of width. */
/*The CSS below is for adding the opposite sun palms logo on the header at the top of the page and the one at cool clicks, once the viewport reaches 450px */
@media (min-width: 450px) {
.item-text1 {
font-size: 3rem;
padding: .75rem;
height: 9.4rem;
}
}
/* The code below is for keeping the Related Studies and Christian Walk Studies boxes at 50% width */
@media (min-width: 569px) {
section#read-more .related {
width: 50%;
}
#memban {
max-width: 50%;
margin: auto;
}
/* This is for transforming the logo section from one column to three columns when the viewport reaches 569px */
.grid-container1 {
grid-template-columns: 14rem 1fr 14rem;
grid-template-rows: 12.4rem;
gap: .3rem;
justify-content: space-between;
align-content: center;
border: .7rem solid #000080; /* 7px */
background-color: #3ec0ff;
}
/* This makes the aqua colored area around the logo larger in the logo section when the viewport reaches 569px */
.item-1 {
background-position: center;
padding: 2rem;
height: 12.4rem;
width: 14rem;
display: flex;
justify-items: center;
align-items: center;
border: none;
background-repeat: no-repeat;
background-size: 100px 100px;
}
/* This adds the right logo in the logo section when the viewport reaches 569px */
.item-2 {
background-position: center;
padding: 2rem;
height: 12.4rem;
width: 14rem;
display: flex;
justify-items: center;
align-items: center;
background-color: #9bdeff;
grid-column: 3 / 4;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: image-set(
"https://www.christianityoasis.com/images/logo-right-side.webp" type("image/webp"),
"https://www.christianityoasis.com/images/logo-right-side.png" type("image/png")
);
}
/* This adds the left logo in the cool-clicks section when the viewport reaches 569px */
.item-b {
display: flex;
margin: auto;
justify-content: center;
align-items: center;
padding: 2rem;
height: 12.4rem;
width: 14rem;
background-color: #9bdeff;
border: .3rem solid #3ec0ff; /* 3px */
grid-column: 1 / 2;
}
/* This makes the text larger in the logo section when the viewport reaches 569px */
.item-text1 {
font-size: 3rem;
padding: 1.75rem;
height: 12.4rem;
}
/* This transforms the grid position and makes the text larger in the cool-clicks section when the viewport reaches 569px */
.item-text2 {
grid-column: 2 / 3;
font-size: 4.75rem;
color: #ffffff;
}
/* This transforms the grid position and makes the text larger in the love-offerings section when the viewport reaches 569px */
.item-text3 {
grid-column: 2 / 3;
font-size: 2.1rem;
font-weight: bold;
color: #ffffff;
text-align: center;
background-color: #000080;
}
/* This transforms the grid position and makes the makes the aqua colored area around the logo larger in the cool-clicks section when the viewport reaches 569px */
.item-a {
grid-column: 3 / 4;
padding: 2rem;
height: 12.4rem;
width: 14rem;
}
/* This adds the left window of heaven image in the love-offerings section when the viewport reaches 569px */
.item-y {
display: flex;
align-items: center;
justify-content: center;
height: 11.3rem;
width: 8.6rem;
border: .3rem solid #3ec0ff; /* 3px */
grid-column: 1 / 2;
float: right;
}
/* This transforms the grid position of the right window of heaven image when the viewport reaches 569px */
.item-z {
grid-column: 3 / 4;
height: 11.3rem;
width: 8.6rem;
}
/* This transforms the cool-clicks section from two columns to three when the viewport reaches 569px */
.grid-container2 {
display: grid;
grid-template-columns: 14rem 1fr 14rem;
}
/* This transforms the love offerings section from two columns to three when the viewport reaches 569px */
.grid-container3 {
display: grid;
grid-template-columns: 8.6rem 1fr 8.6rem;
}
.grid-container3b {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"bb1 bb2";
}
.grid-container3c {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"bb1 bb2";
}
/*This sets the directory grid for tablet size viewports */
.wrapper {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
"wb1 wb1 wb1 wb1 wb1 wb1"
"bb1 bb1 bb1 bb1 bb1 bb1"
"wb2 wb2 wb3 wb3 wb4 wb4"
"bb2 bb2 bb2 bb2 bb2 bb2"
"wb5 wb5 wb5 wb6 wb6 wb6"
"wb7 wb7 wb7 wb8 wb8 wb8";
}
/* cccc Step 5 studies table - tablet*/
.cccc-studies {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"tb1 tb2 tb3"
"tb4 tb5 tb6"
"tb7 tb8 tb9"
"tb10 tb11 tb12"
"tb13 tb14 tb15"
"tb16 tb17 tb18"
"tb19 tb20 tb21"
"tb22 tb23 tb24"
"tb25 tb26 tb27"
"tb28 tb29 tb30"
"tb31 tb32 tb33"
"tb34 tb35 tb36"
"tb37 tb38 tb39"
"tb40 tb41 tb42"
"tb43 tb44 tb45"
"tb46 tb47 tb48"
"tb49 tb50 tb51"
"tb52 tb53 tb54"
"tb55 tb56 tb57";
}
/*This sets the daily bread grid for tablet size viewports - tb1 stands for turquoise box 1 */
.breadwrapper {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"bb1 bb1"
"tb1 tb2"
"tb3 tb4"
"tb5 tb6"
"tb7 tb8"
"tb9 tb10"
"tb11 tb12"
"tb13 tb14"
"tb15 tb16"
"tb17 tb18"
"tb19 tb20"
"tb21 tb22"
"tb23 tb24";
}
.stepping-stones {
grid-template-columns: repeat(7, 1fr);
grid-template-areas:
"bb1 bb1 bb1 bb1 bb1 bb1 bb1"
"tb1 tb2 tb3 tb4 tb5 tb6 tb7"
"tb8 tb9 tb10 tb11 tb12 tb13 tb14";
}
}
/* End of CSS for Media Queries min-width: 569px */
@media only screen and (min-width: 600px) {
/* This transforms the optimization paragraph section from one column to two columns when the viewport reaches 600px */
.wrapper-opti {
grid-template-columns: 4fr 6fr;
grid-template-areas: "bb1 wb1";
max-width: 100%;
}
/* Different sizes of text, commonly called "Headings" in website design. Only one
allowed per page. */
h1 {
font-size: calc(1.3rem + 1.2vw);
text-align: center;
margin: 0;
}
h2 {
font-size: calc(1.3rem + 1vw);
text-align: center;
}
}
/* End of CSS for Media Queries min-width: 600px */
@media only screen and (max-width: 663px) {
/* This keeps the Living Water banner hidden for mobile */
div#living-water-banner {
display: none;
}
}
/* End of CSS for Media Queries max-width: 663px */
@media only screen and (min-width: 664px) {
/* This keeps the Living Water square hidden for tablet and above */
div#living-water-square {
display: none;
}
}
/* End of CSS for Media Queries min-width: 664px */
/* This keeps the horizontal navbar hidden on any viewport less than 727px*/
@media (max-width: 727px) {
.navbar {
display: none;
}
/* This keeps the mall banner hidden on mobile */
div#mall-2 {
display: none;
}
}
/* End of CSS for Media Queries max-width: 727px */
/* This hides the mobile navigation on viewports above 728px */
@media (min-width: 728px) {
#memban {
max-width: 37%;
margin: auto;
}
nav {
display: none;
}
/* This hides the mall 'square' if viewport is wider than 728px */
div#mall-1 {
display: none;
}
/* Small font class="sf" */
.sf {
font-size: .57em;
}
}
/* End of CSS for Media Queries min-width: 728px */
/* The code below is for hiding the large Spirit of Truth dove picture below 767px */
@media (max-width: 767px) {
img#lgdv {
display: none;
}
}
@media (min-width: 768px) {
/* The code below is for hiding the small Spirit of Truth dove picture above 768px */
img#smdv {
display: none;
}
/* This changes the thickness of the border on the logo header at large tablet size */
.grid-container1 {
border: 1.3rem solid #000080; /* 13px */
}
/* This hides Faith is no mirage on larger screens */
.item-text1 {
display: none;
}
/* This changes 'Faith ... is no mirage' into 'Where Christianity is C-O-O-L' on 768 and larger screens */
.item-text1a {
display: block;
padding: 1rem;
}
/* This is the grid template for the directory above 768px */
.wrapper {
grid-template-columns: repeat(12, 1fr);
grid-template-areas:
"wb1 wb1 wb1 wb1 wb1 wb1 wb1 wb1 wb1 wb1 wb1 wb1"
"bb1 bb1 bb1 bb1 bb1 bb1 bb1 bb1 bb1 bb1 bb1 bb1"
"wb2 wb2 wb2 wb2 wb3 wb3 wb3 wb3 wb4 wb4 wb4 wb4"
"bb2 bb2 bb2 bb2 bb2 bb2 bb2 bb2 bb2 bb2 bb2 bb2"
"wb5 wb5 wb5 wb6 wb6 wb6 wb7 wb7 wb7 wb8 wb8 wb8";
}
.breadwrapper {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"bb1 bb1 bb1"
"tb1 tb2 tb3"
"tb4 tb5 tb6"
"tb7 tb8 tb9"
"tb10 tb11 tb12"
"tb13 tb14 tb15"
"tb16 tb17 tb18"
"tb19 tb20 tb21"
"tb22 tb23 tb24";
}
/* cccc Step 5 studies table - laptop*/
.cccc-studies {
grid-template-columns: repeat(5, 1fr);
grid-template-areas:
"tb1 tb2 tb3 tb4 tb5"
"tb6 tb7 tb8 tb9 tb10"
"tb11 tb12 tb13 tb14 tb15"
"tb16 tb17 tb18 tb19 tb20"
"tb21 tb22 tb23 tb24 tb25"
"tb26 tb27 tb28 tb29 tb30"
"tb31 tb32 tb33 tb34 tb35"
"tb36 tb37 tb38 tb39 tb40"
"tb41 tb42 tb43 tb44 tb45"
"tb46 tb47 tb48 tb49 tb50"
"tb51 tb52 tb53 tb54 tb55";
}
.toc {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"bb1 bb1"
"tb1 tb2";
}
/* This contains the body of the study to 88% on larger screens so that the line length doesn't cause eye fatigue. */
section#main-content {
width: 88%;
margin: auto;
}
.narrow {
width: 88%;
margin: auto;
}
}
/* End of CSS for Media Queries min-width: 768px */
/* The CSS below is for printing out with a printer, it turns off most everything but the main content of the study (or page). */
@media print {
/* turn off cookie consent */
section#cookie-consent { display:none; }
/* turn off logo header */
section#logo { display:none; }
/* turn off navigation section */
section#navigation { display:none; }
/* turn off Spirit of Truth and optimization paragraph section */
section#optimization-paragraph { display: none; }
/* turn off go-to-home section */
section#go-to-home { display: none; }
/* turn off Google Ads sections */
section#google-ads { display: none; }
/* turn off Living Water banners section */
section#living-water { display: none; }
/* turn off The Book Ad banners section */
section#the-book-ad { display: none; }
/* turn off New Testament Table area */
section#new-testament-table { display: none; }
/* turn off Steps area */
section#quest-steps { display: none; }
/* turn off Related Studies area */
section#read-more { display: none; }
/* turn off External Links area */
section#external-links { display: none; }
/* turn off C-O-O-L Clicks*/
section#cool-clicks { display: none; }
/* turn off Directory */
section#directory { display: none; }
/* turn off Mall Banners */
section#the-mall { display: none; }
/* turn off Members Banner */
section#become-member { display: none; }
/* turn off Donations Box */
section#love-offerings { display: none; }
/* turn off Footer/Copyright Box */
section#footer { display: none; }
/* Gives 1/2 inch margin on all four sides */
@page {
margin: 0.5in;
}
/* Styling for the body of the study */
body {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
line-height: 1.3;
color: #000000;
background-color: transparent;
max-width: 100%;
padding: 0px;
}
/* This is styling for paragraphs */
p {
color: #000000;
text-align: justify;
text-indent: 0rem;
}
/* This hides the keyword phrases between paragraphs */
h3 {
display: none;
}
/* This makes links print in black */
p.a {
color: #000000;
text-align: center;
text-indent: 0rem;
}
/* This makes blue boxes with titles print without borders and white background */
.blue {
position: relative;
border: 0;
padding: 0rem;
background-color: #ffffff;
color: #000000;
width: 100%;
}
/* This makes blue boxes with titles print without borders and white background
*/
.bluebox {
background-color: #ffffff;
padding: 0;
color: #000000;
font-size: 2.25rem;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* This is styling for scripture */
.scripture-blue {
text-align: justify;
text-indent: 0rem;
}
/* This is styling for scripture */
.scripture-red {
text-align: justify;
text-indent: 0rem;
}
/* This is styling for scripture */
.container {
max-width: 100%;
}
/* This is styling for anything with class="content." */
.content {
background-color: #ffffff;
padding: 0;
color: #000000;
border-width: 0px;
display: block;
margin: 0px;
max-width: 100%;
}
/* This is styling for anything with class="content2." */
.content2 {
background-color: #ffffff;
padding: 0px;
color: #000000;
border-width: 0px;
display: block;
margin: 0px;
max-width: 100%;
}
/* This is styling for scripture boxes. */
.drop-shadow {
background-color: #transparent;
box-shadow: none;
}
.lifted:before,
.lifted:after {
box-shadow: none;
}
.drop-shadow lifted a {
text-align: center;
}
/* This is so that any images will only print 3 1/2 inches wide */
img {
max-width: 3.5in;
}
/* This is styling for the title and copyright that are hidden online. */
.printonly {
display: block;
text-indent: 0rem;
}
}
/* This is the end of the CSS for formatting webpages to print out on printers. */