/*  Background color:       #3a4a58
    Title color:            #996633
    Text color:             #666666
    Text Dark color:        #333333
    Table Heading color:    #C4CDD6
    Table Alternate color:  #e5e8ed  */
/* background-color: #3a4a58;
   color: #8c8c8c; */

/* RGB Colors
0,0,0 = black
255,255,255 = white
*/

body {
  background-color: white;
  color: white;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 15px;
  margin: 0;
}

				/* Main Content Div */
.div-style-Main {
  margin: auto;
  position: center;
  right: 0px;
  /* width: 1200px; */
  width:53vw;
  height: 70vh;
  padding: 1px;
  border-radius: 0px; 		/* rounded corners */
  background:none; 
  border: 0px solid lime;
  border-style:solid;
  background-color:rgba(0,0,0,0.0);      
  z-index: 3;
}
	
.h-headerDiv {
  width: auto;
  height: auto;
  display: grid;

}

							/* Page Title Header */
.h-style-Main-Header {
  padding-top: 14px;
  padding-bottom: 14px;
  display: block;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 2em;
  color: white;                      /* font color */
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.75);      /* transparency */
  font-weight: normal;
  z-index: 2;

}




			/* Inner LEFT Div Image */
.div-image {
  /*      T    R    B    L    */
  /* margin: auto; */
  position: center;
  float: left;
  width: 20vw;
  padding: 0px;
  border-radius: 0px; 		//rounded corners 
  background:none; 
  border: 0px solid lime;
  border-style:solid;
  z-index: 2;
  box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.60);
}

.div-Bookmarks {
  /*      T    R    B    L    */
  /* margin: auto; */
  position: center;
  float: left;
  width: auto;
  height: auto;
  padding: 0px;
  border-radius: 0px; 		//rounded corners 
  background-color: blue; 
  background: rgba(0,0,0,0.75); 
  border: 0px solid lime;
  border-style:solid;
  z-index: 3;
  display:inline;
}

.left-div-container {
  position: center;
  float: left;
  width: auto;
  height: auto;
  padding: 0px;
  border-radius: 0px; 		//rounded corners 
  background: none;
  border: 0px solid Blue;
  border-style:solid;
  z-index: 3;
  /*                         */

}

.bookmark-colors{
	font-size: 1.2em;
	color: white; 
	padding-top:0px;
	padding-bottom:0px;
}

.bookmark-header{
	font-size: 1.3em;
	color: white; 
	padding-top:5px;
	padding-bottom:0px;

	color:white;

	font-weight:normal;
	
	width: 20vw;
	height: auto;
	display: inline;  
	position: absolute;
	text-align: center;
	z-index:9;
}

.bookmark-colors:hover{
	         /* Top Bot Fuz  All   */
	box-shadow: 0px 0px 10px 6px rgba(0,255,0,0.70);
}

.bookmark-colors::selection {
  color: white;
  background: none;
}

.bookmark-header::selection {
  color: white;
  background: none;
}
.pageNumber::selection {
  color: white;
  background: none;
}




/* box-shadow: 5px 5px 29px 5px rgba(255,255,255,0.40); */ 


				/* Inner RIGHT Div Content */
.div-style-inner-right {
  margin: auto;
  /*right: 500px;*/
  width: auto;
  height: auto;
  padding: 10px;             
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.75);      /* transparency */
  border-radius: 0px; 		//rounded corners 
  z-index: 3;
  
  border: 0px solid lime;
  color: lime; 
  border-style:solid; 
}


				/* Main Content p tag styling */
.p-style-Main {
  padding-left: 15px;
  padding-right: 15px;
  display: block;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.2em;
  color: white;                      /* font color */
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.0);      /* transparency */
  font-weight: normal;
}

.p-bookmark-links {
  padding-left: 15px;
  padding-right: 15px;
  display: block;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.2em;
  color: gold;                      /* font color */
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.0);      /* transparency */
  font-weight: normal;
}

/*
.p-bookmark-links::selection {
  color: none;
  background: none;
}
*/



					/* Content Box for Random Verses */
#page-span2{  
  width: 45vw;
  height: auto;
  display: grid;  
  position: center;
  text-align: center;
  /*      T    R    B    L    */
  margin: auto;
  top: 50px;
  padding-left:50px;
  padding-right:50px;
  /*
  border-radius: 0px; 		//rounded corners 
  border: 0px solid lime;
  border-style:solid;
  color:lime;
  */
    border: 0px solid lime;
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */

}

.div-box1 {   
  width: 18vw;
  height: auto;
  display: inline;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;
}

.div-box2 {   
  width: 18vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */
  z-index: 1;
}

.div-box3 {   
  width: 18vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */
  z-index: 1;
}

.wrapper {
	float: right;
	position: auto;
	width: 18vw;
    height: auto;
	z-index:1; 
	
		border: 0px solid lime;
		border-style:solid;
	}

.pageInfo{  
  display: grid;  
  z-index:9;
  position: center;
  
  padding-top:0px;
  padding-bottom:0px;
  padding:0px;
  
  border-radius: 12px;
  border: 0px solid red;
  border-style:solid;
  
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: black;  

}

#pageInfoDiv{   
  width: auto;
  height: auto;
  display: block;  
  float:right;
  z-index:9;
  padding:0px;

  border-radius: 0px;
  border: 0px solid lime;
  border-style:solid;
  
  background-color: rgba(0,255,255,0.25);  
}

#dateAndTime{
	 
	
}

 .p-style-date2 {
/*   
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;                 
  background-color: #eff0f1;     
  background: rgba(0,255,255,0.25);    
  font-weight: bold; */
} 




.content{
	font-size: 1.3em;
	color: white; 
	padding-top:18px;
	padding-bottom:18px;
}

.modalLinks {
	color: #32CD32;
}


.wrapper2 {
	float: left;
	position: auto;
	width: 20vw;
    height: auto;
}
.div-box1a {  
  padding-top:8px;
  padding-bottom:5px; 
  width: 20vw;
  height: auto;
  display: inline;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;

}
.div-box2a {   
  padding-top:8px;
  padding-bottom:5px; 
  width: 20vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;
}
.div-box3a {   
  padding-top:8px;
  padding-bottom:5px; 
  width: 20vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;
}
.div-box4a {   
  padding-top:8px;
  padding-bottom:5px; 
  width: 20vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;
}
.div-box5a {   
  padding-top:8px;
  padding-bottom:5px; 
  width: 20vw;
  height: auto;
  display: none;  
  position: absolute;
  text-align: center;
  /*      T    R    B    L    float: right;  */
  /*margin: 5px 5px 5px 50px;*/
  /*margin: 10px;*/
  background: rgba(0,0,0,0.75);      /* BG transparency */ 
  z-index: 1;
}

#button2{
  background-color: rgba(0,255,0,0.00);    
  width: 50vw;
  height: auto;
  display: block;  
  position: center;
  text-align: center;
  color:black;
}

.colorChoice{
	font-size: 1.25em;
	color: white; 
	padding-top:18px;
	padding-bottom:0px;
}

.colorChoice::selection {
  color: none;
  background: none;
}

.colors{
	font-size: 1.2em;
	color: white; 
	padding-top:0px;
	padding-bottom:0px;
	display:inline;
}

.colors::selection {
  color: white;
  background: none;
}

.colors1a{
	font-size: 1.2em;
	color: white; 
	padding-top:0px;
	padding-bottom:0px;
	display:inline;
}

.colors1a::selection {
  color: white;
  background: none;
}

.pageNumber{
	font-size: 2.0em;
	color: white; 
	padding-top:0px;
	padding-bottom:0px;
	display:inline;
}
.pageNumber::selection {
  color: none;
  background: none;
}


.Gem{
	font-size: 2em;
	color: white; 
	display:inline;
}














/*This table part is so I can see the table border. Can erase when done.*/
table, th, td {
  border: 0px solid black;
  border-collapse: collapse;
}
						     /*  Table Color  */
tr:nth-child(odd) { background: rgba(0,0,0,0.75); }
tr:nth-child(even) { background: rgba(0,0,0,0.75); }

#downloads tr:hover { background: rgba(0,255,0,0.90); color: black; }
#downloads tr:hover a { color: black; }
#downloads tr:active a { color: blue; }

#downloads tr:hover th { background: rgba(0,0,0,0.90); color: white; }
#downloads th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background: rgba(0,0,0,0.80);      /* transparency */
  color: white;
  font-size: 1.2em;
  padding: 10px 10px 10px 10px;
}

#downloads {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table {
  width: 100%;
  border-spacing: 0;
  padding: 20px 20px 20px 20px;
}

td {
  text-align: left;
  padding: 10px 15px;
  font-size: 1.2em;
  font-color: white;
}

.tm-text-left { text-align: left; }

td.redtext {
  color: red;
}

/* Table Header Color */
tr.tm-tr-header {
  background-color: #c4cdd6;
  height: 50px;
}

			/* Verse Modal pop ups */
.p-style-00 {
  display: block;
  margin-top: 0.025em;
  margin-bottom: 0.025em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.75em;
  color: black;
}

			/* Verse Modal pop ups - Header */
.header-style-00 {
  color: #B50D0D;
  text-align: center;
  font-weight: 600;
  font-size: 2.5em;
  margin-top: 10px;
  margin-bottom: 10px;
}



a {
  font-size: 1.0em;
}
		/* unvisited link */
a:link {
  color: white;
}
		/* visited link */
a:visited {
  color: white;
}
		/* mouse over link */
a:hover {
  color: blue;
}
		/* selected link */
a:active {
  color: lightblue;
}

			/* Highlight colors */

::-moz-selection { /* Code for Firefox */
/*
  color: white;
  background: blue;
*/
}


::selection {
  color: white;
  background: blue;
}




				/* Verse of day div */
.div-style-VoD {
  margin: auto;
  position: center;
  right: 0px;
  width: 300px;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		//rounded corners 
  background:none; 
  border-style:solid;
}

.p-style-VoD {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                      /* font color */
  background-color: #eff0f1;         /* p tag bg color */
  background: rgba(0,0,0,0.20);      /* transparency */
  font-weight: normal;
}

			       /* Paragraph */ 

.p-style-rv-2 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                    /* font color */
  background-color: #eff0f1;       /* p tag bg color */
  background: rgba(0,0,0,0.50);    /* transparency */
  font-weight: normal;
}

.p-style-rv-1 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.3em;
  color: white;                 /* font color */
  background-color: #eff0f1;     /* p tag bg color */
  background: rgba(0,0,0,0.25);    /* transparency */
  font-weight: normal;
}

.p-style-date1 {
  display: grid;              
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;                 /* font color */
  background-color: #eff0f1;     /* p tag bg color */
  background: rgba(0,255,255,0.25);    /* transparency */
  font-weight: normal;
}



.p-style-0 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.5em;
  color: black;
}

.p-style-1 {
  display: block;
  margin-top: 1em;
  margin-bottom: 0.35em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.25em;
  color: black;
}

.p-style-2 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0.4em;
  margin-right: 0.4em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-3 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-4 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: center;
  font-size: 1.5em;
  color: black; 
}

.p-style-5 {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
}

.p-style-6 {
  display: inline;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 2.0em;
  margin-right: 0.5em;
  text-align: left;
  font-size: 1.25em;
  color: black;
  text-align: center;
}

.p-style-7 {
  display: block;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-size: 1.25em;
  color: black;
}

			/* Styling for Div of Verses  */
.div-style-1 {
  position: left;
  right: 0px;
  width: 820px;
  padding: 1px;
  border: 2px solid #b30000;
  border-radius:30px; 
  background:none; 
  border-style:solid;
}
				/* Float RIGHT div */
.div-style-2 {
  float: right;
  position: right;
  right: 0px;
  width: 300px;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		/* rounded corners */
  background:none; 
  border-style:solid;
}
				/* Float LEFT div */
.div-style-3 {
  float: left;
  position: right;
  right: 0px;
  width: 300px;
  padding: 1px;
  border: 0px solid black;
  border-radius:30px; 		/* rounded corners */
  background:none; 
  border-style:solid;
}

/*                              headers      Font size was 3.5rem       h1 h2 h3 h4 */ 
.header-style {
  color: #B50D0D;
  text-align: center;
  font-weight: 600;
  font-size: 2.5em;
  margin-top: 10px;
  margin-bottom: 10px;
}

.header-style-2 {
  color: #B50D0D;
  text-align: center;
  font-weight: 400;
  font-size: 2.2em;
  margin-top: 10px;
  margin-bottom: 15px;
}

.header-style-3 {
  color: white;
  text-align: center;
  background: rgba(0,0,0,0.20);      /* transparency */
  font-size: 2.0em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: normal;
}

.tm-container {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.tm-main-content { background-color: #ffffff; }

#tm-intro-img {
  background-image: url(../img/banner33.jpg);
  background-position: center;
  background-size: cover;
  min-height: 200px;
}

#tm-outro-img {
  background-image: url(../img/outro.jpg);
  background-position: center;
  background-size: cover;
  min-height: 425px;
}

.tm-text-white { color: white; }

.tm-page-footer-container { text-align: center; }

.tm-page-header {
  display: inline-block;
  vertical-align: baseline;
  margin-top: 20px;
  margin-bottom: 35px;
  font-size: 2.1rem;
  font-weight: 400;
}

.tm-page-icon {
  display: inline-block;
  vertical-align: baseline;
  padding: 15px;
}

.tm-section {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
}

.tm-section-small {
  max-width: 490px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

p {
  font-size: 1rem;
  line-height: 1.7;
}

.tm-mb-0 { margin-bottom: 0; }
img { max-width: 100%; }
figure { margin: 0; }
figcaption { text-align: center; }

figcaption span {
  display: block;
  color: #333333;
  font-size: 18px;
}

.tm-item-name {
  margin-top: 20px;
  margin-bottom: 10px;
}

.tm-special-items {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

.tm-special-item {
  padding-left: 15px;
  padding-right: 15px;
}

hr {
  width: 60%;
  border: 0.5px solid #ccc;
}

.tm-social-icons {
  text-align: center;
  margin-top: 30px;
}

.tm-social-icons i { font-size: 1.2rem; }
.tm-social-link-container { display: inline-block; }

.tm-social-link {
  color: white;
  background-color: #c5ced8;
  border-radius: 2px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tm-social-link:hover { background-color: #808e9e; }

.tm-contact-link {
  color: #333333;
  font-weight: 600;
  text-decoration: none;
}

a { transition: all 0.3s ease; }
.tm-contact-link:hover { color: #808e9e; }

.tm-footer-text {
  font-size: 0.9rem;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.tm-footer-link {
  color: #fff;
  text-decoration: none;
}

.tm-footer-link:hover { color: #c5ced8; }

@media (max-width: 550px) {
  .tm-special-item {
    padding-left: 10px;
    padding-right: 10px;
  }
  .tm-special-items {
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (max-width: 480px) {
  .tm-special-item {
    padding-left: 5px;
    padding-right: 5px;
  }
  .tm-special-items {
    margin-left: -5px;
    margin-right: -5px;
  }
}

@media (max-width: 430px) {
  .tm-responsive-table { overflow-x: auto; }
  table { width: auto; }
  .tm-special-items { flex-direction: column; }
  .tm-special-item { margin-bottom: 40px; }
  figcaption p {
    margin-bottom: 0;
    line-height: 1;
  }
}


/*Experimental Below*/
/* Deepest possible browser support code for CSS FONTS from:
https://css-tricks.com/snippets/css/using-font-face-in-css/

Helvetica
sans-serif */

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}



/* Flash Card Styling */
/*https://www.w3schools.com/howto/howto_css_flip_box.asp*/

/* NOTES
Expressing sizes, such as margins and paddings,
in em means they are related to the font size,
and if the user has a big font (e.g., on a big screen)
or a small font (e.g., on a handheld device), 
the sizes will be in proportion. Declarations 
such as text-indent: 1.5em and margin: 1em are 
extremely common in CSS.

Font Size can use PX, EM or REM

px
Pixels dont resize very well with browser settings.

em
An em is equal to the computed font-size of that element’s parent.
For example, If there is a div element defined with font-size: 16px
then for that div and for its children 1em = 16px.

rem
rem values are relative to the root html element, 
not to the parent element.
If font-size of the root element is 16px then 1 rem = 16px for 
all elements. If font-size is not explicitly defined in root 
element then 1rem will be equal to the default font-size provided 
by the browser (usually 16px).

*/

/*
Original Colors From 
Tooplate 2118 Chilling Cafe
https://www.tooplate.com/view/2118-chilling-cafe
    Background color:       #3a4a58
    Title color:            #996633
    Text color:             #666666
    Text Dark color:        #333333
    Table Heading color:    #C4CDD6
    Table Alternate color:  #e5e8ed 
*/