/*
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 <p> elements inside <div> 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 <p> elements that are immediate children of a <div> 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 <p> elements that are placed immediately after <div> elements:
		MJS: In this case it mean the <p> tag comes right after the closing </div> 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 <p> elements that are siblings of <div> elements: 
		MJS: The difference between this and the Adjacent selector is this will get any <p> tag 
		     following the </div> tag but not inside a different tag
			div ~ p {
				background-color: yellow;
			}

	Combination selector (.)
		The <class>.<class> 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 */
.iframe-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
	/*padding-top: 56.25%; */
	/*border-style: solid;
	border-width: 1px;
	border-color: green;*/
}


.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	right: 0;
	width: 100%;
	height: 100%;
	/*border-style: solid;
	border-width: 1px;
	border-color: red;*/
}

.iframe-bkp {
	/*display: block;*/
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0px;
	float: left;
	height: 100%;
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: green;
}

	
/* 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;
	}

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 fro scrollin 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;
	}

	
.colorBlack {
	color: black;
	}

.colorBlue {
	color: blue;
	}
	
.colorGreen {
	color: green;
	}
	
.colorRed {
	color:red;
	}
	
.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 }
*/


#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 "fadeshow" */
	border-style: solid;
	border-width: 2px;
	border-color: black;
	width: 100%;
	height: auto;
	}