/*
URL to explanation: https://www.w3schools.com/css/css_combinators.asp
There are four different combinators in CSS:
Descendant selector (space)
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all
elements inside
elements:
div p {
background-color: yellow;
}
Child selector (>)
The child selector selects all elements that are the immediate children of a specified element.
The following example selects all
elements that are immediate children of a
element:
div > p {
background-color: yellow;
}
Adjacent sibling selector (+)
The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects all
elements that are placed immediately after
elements:
MJS: In this case it mean the
tag comes right after the closing
tag
div + p {
background-color: yellow;
}
General sibling selector (~)
The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all
elements that are siblings of
elements:
MJS: The difference between this and the Adjacent selector is this will get any
tag
following the
tag but not inside a different tag
div ~ p {
background-color: yellow;
}
Combination selector (.)
The . means select all elements having both div14 and welcome class
Example: .div14.welcome
Note: with a space in-between the two classes it will revert back to "Descendant selector (space)"
Example .div14 .welcome ...... means select all elements having .welcome class inside .div14 class
/* Settings for hr */
hr {
display: block;
position: relative;
padding: 0;
margin: 5px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border-style: solid;
border-width: 1px;
border-color: black;
}
.hrDotGrey {
display: block;
position: relative;
padding: 0;
margin: 5px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border-style: dashed;
border-width: 1px;
border-color: grey;
}
/* Various table related settings */
table {
/*border-collapse: collapse; */
margin-top:0px;
margin-bottom:0px;
padding-top: 0;
padding-bottom: 0;
}
/* for the table with the double borrder */
.myTable {margin: auto; border: 5px grey outset; border-spacing:1px;}
.myTable td, .myTable th { border:1px grey inset; padding: 3px}
th {
text-align: center;
}
th, td {
color: Black;
font-size: 16px;
border:1px grey inset;
padding: 3px;
}
/* This is for removing the td / th table record borders on the Bible Study page.
It replaces the seperate style section that was on the. php file */
#bsCourse th, #bsCourse td {
color: black;
border:0px;
padding: 1px;
}
/* This shoud be automatic included in the td th above
.td-th-border {
color: Black;
font-size: 16px;
border:1px grey inset;color
padding: 3px;
}
*/
.noBorder {
border:0px;
}
.td-th-noBorder {
border:0px;
}
.tableOffSetBorder {
margin: auto;
border: 5px grey outset;
border-spacing:1px;
}
table.center {
margin-left:auto;
margin-right:auto;
}
.tableLeft {
margin: auto 0;
margin-left:0px;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
padding-top: 0;
padding-bottom: 0;
}
tableWidthPct_50 {
width:50px;
}
tableAlignTop {
vertical-align:top;
}
noPad {
margin:10px;
padding:0px;
}
noPadTopBot {
margin-top:0px;
margin-bottom:0px;
padding-top: 0px;
padding-bottom: 0px;
}
/* Various heading related settings */
h1 {
/* font-size: 48px; */
color: Blue;
text-align: center;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
/* background-color: #FDF5E6; */
}
h2 {
color: Black;
font-weight: bold;
}
.indent {
text-indent:25px;
margin-top: 1em;
margin-bottom: 1em;
}
p {
margin-top:0px;
margin-bottom:0px;
padding-top: 0;
padding-bottom: 0;
}
.banner {
background-image: url(../images/clouds.JPG);
background-repeat: no-repeat;
background-position: center;
/* needed to prevent IE for scrolling the bacground image */
background-attachment: fixed;
text-align: center;
font-family: "Lucida Bright";
font-size: 40px;
color: yellow;
font-weight: bold;
margin-top: 0px;
margin-bottom:0px;
padding-top: 0;
padding-bottom: 0;
padding:0px;
}
.center-spread {
margin-top: 0px;
margin-bottom:0px;
padding-top: 0;
padding-bottom: 0;
font-size: 25px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.floatLeft {
float: left;
margin: 2px;
color: Red;
font-size:16px;
}
.floatLeft2 {
float: left;
margin: 2px;
color: Black;
font-size:18px;
}
.floatRight {
float: right;
margin: 2px
}
.displayInline {
display:inline;
}
/* Added as part of HTML5 for itritb.html page */
/* Need to propigate these through the other pages. */
.backgroundImage {
/* working for basic pages */
background-image: url(../images/marb009.jpg);
/* working for page one level deeper
background-image: url(../../images/marb009.jpg); */
background-repeat: repeat;
background-position: center;
margin-top:0px;
}
body {
color:black;
}
.colorWhite {
color: White;
}
.colorBlack {
color: black;
}
.colorBlue {
color: blue;
}
.colorGreen {
color: green;
}
.colorRed {
color:red;
}
.furStdy {
color: blue;
}
.bgColorYellow {
background-color: yellow;
}
.text12px{
font-size:12px;
}
.text14px{
font-size:14px;
}
/* font = 5 */
.text16px{
font-size:16px;
}
.text18px{
font-size:18px;
}
.text20px{
font-size:20px;
}
.text22px{
font-size:22px;
}
.text24px{
font-size:24px;
}
.text26px{
font-size:26px;
}
.text32px{
font-size:32px;
}
.text36px{
font-size:36px;
}
.text48px{
font-size:48px;
}
.textTest{
font-size:18px;
}
.textBold{
font-weight:bold
}
.fontStyleBaskerville {
font-family:"Baskerville Old Face"
}
.scripture {
font-style: italic;
font-weight: bold;
color: blue;
/* text-align: right; */
}
/* This seems to help the spacing but messes up the Menu */
/* img { vertical-align: bottom } */
.imgCenter {
display: block;
/* vertical-align: top; */
margin-left: auto;
margin-right: auto;
/* margin: auto; */
margin-top: 0;
padding-top: 0;
border-style: solid;
border-width: 0px;
border-color: black;
}
/* HTML5 specific */
/* This seems to help the spacing but messes up the Menu
img { display: block; }
img { vertical-align: bottom }
*/
/* 2021-01-11 Not bing used
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #DDD;
color: #555;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: #DDF;
color: #000;
}
*/
/* Slide Show CSS */
/* Set border */
[id^='fadeshow'] { /* select any id starting with "fadeshoow" */
border-style: solid;
border-width: 2px;
border-color: black;
}
*/
/* Slide Show make all images inside fadeshow4 scale to 100% of slideshow width */
/*#fadeshow1 img{ */
#fadeshow1 img{
width: 100%;
height: auto;
}
/* ==================================================================== */
/* This is the CSS for the menu.css file */
/* Class for main menu bar which will extend the full length of the window */
.navClass {
margin:0px;
padding:0px;
width:100%; /* use 100% of the width of the browser */
position:relative;
z-index:1000; /* This makes the dropdown menus appear above the page content below */
/* This would set the font size as a percent of the default size
font-size:90%; /* Menu text size */
/* By removing background enables the part of the NAV bar not used to show the body background
background:#fff; */
}
.navClass > ul {
list-style:none;
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
/* Class for main menu
items */
.navClass > ul > li {
display: inline-block; /* Displays the main menu buttons (ul > li) inline */
vertical-align: top; /* removes the space on top of the inline-block menu */
border:1px solid darkblue; /* This is the border around each main menu buttons */
margin:0px;
padding:0px;
position:relative;
}
/* Class for main menu