html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
summary{display:list-item}
audio,canvas,progress,video{display:inline-block}

a{color:inherit; background-color:transparent}
a:active,a:hover{outline-width:0}
progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
figure{margin:1em 40px}
img{border-style:none; vertical-align:middle}

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}

/* End Misc standard stuff */

/* Horizontal Ruler Line*/
hr{height:2px; border:0; padding:0; margin:auto; width:80%; background-color: #795548;}

/* TGE: Set max width of website and center it; not sure if margin and float are important. */
.tge-body { 
	max-width: 700px; 
	margin: 0 auto !important; 
	float: none !important; 
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}

/*  LINE HEIGHT !!!!!!!!!!!!!!!!!! */

html,body{font-family:Arial,Verdana,sans-serif;font-size:1.0em;line-height:1.3}
/* html,body{font-family:Georgia,serif;font-size:15px;line-height:1.3} */

html{overflow-x:hidden}
h1{font-size:2.25em}
h2{font-size:1.88em}
h3{font-size:1.5em}
h4{font-size:1.25em}
h5{font-size:1.13em}
h6{font-size:1.0em}

/* TGE-added line height */
h1, h2, h3, h4, h5, h6 {line-height: 1.1;}

/* TGE added p style */
p {
    font-size: 1.0em;
	  display: block;
    line-height: 1.3;
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
  }

h1,h2,h3,h4,h5,h6{font-family:Arial,sans-serif;font-weight:400;margin:0px 0 6px 0}
/*h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0} */

/* SIMPLE BLOCK */
.tge-block{display:block; margin: 0; clear:both; height:auto;}
/* SIMPLIFIED for SK (removed color, added separate color wherever needed in .html file)... Maybe update FfEL in future
.tge-block{display:block; margin: auto; clear:both; height:auto; background-color: #b8fa99;}
.tge-block-sk{display:block; margin: auto; clear:both; height:auto; background-color: #ddf5f7;}*/

/* THE "CLEARFIX HACK" 
.tge-container:after,.tge-container:before,.tge-panel:after,.tge-panel:before,.tge-row:after,.tge-row:before,.tge-row-padding:after,.tge-row-padding:before,.tge-cell-row:before,.tge-cell-row:after,.tge-clear:after,.tge-clear:before,.tge-bar:before,.tge-bar:after{content:"";display:table;clear:both;}  */

/* GENERAL CENTER */
.tge-center{text-align:center!important}
.tge-align{margin:auto}

/* TGE fonts */
.tge-bold{font-weight:bold}
.tge-bolditalic{font-weight:bold;font-style:italic}
.tge-italic{font-weight:normal;font-style:italic}

.tge-margin-top{margin-top:15px}

/* NORMAL CONTAINER PADDING (changed padding for better box shadows */
.tge-container,.tge-panel, .tge-block{padding:8px 10px 10px 10px}

/* PADDING */
.tge-row-padding,.tge-row-padding>.tge-half,.tge-row-padding>.tge-third,.tge-row-padding>.tge-twothird,.tge-row-padding>.tge-threequarter,.tge-row-padding>.tge-quarter,.tge-row-padding>.tge-col{padding:0 8px}

.tge-padding-small{padding:4px 8px!important}
.tge-padding{padding:8px 16px!important}

.tge-margin-href{margin:0px 0px 12px 30px}

/* IMAGES */
.tge-image{max-width:100%;height:auto}

/* NAVIGATION BAR "inline-block" allows auto width (rather than "block").  "float:left" is needed in .tge-bar-item, even though VSC marks it as a problem! ("display:inline-block" does not negate the need for it in the NAV BAR). */
.tge-bar{display:inline-block;width:95%;max-width: 700px;}

.tge-bar-item{width:33.33%;display:inline-block;padding:5px 0px;text-align:center;border:none;white-space:normal;float:left;outline:0;text-decoration-line: none;}

/* BASIC RESPONSIVE DIVISIONS:  Mobile First -> 100% width single column, centered (max width of 500px overridden by smaller limits elsewhere) */
.tge-col,.tge-half,.tge-third,.tge-twothird,.tge-threequarter,.tge-quarter{width:100%;max-width:500px; margin:auto}

/* REDUCED @media STATEMENTS: Changes book images and text to dual columns for large screens (>= 601px-wide). 
(Maximum of 1000px wide overridden elsewhere). */
@media (min-width:601px)
{.tge-quarter{width:24.99999%}
.tge-third{width:33.33333%}
.tge-half{width:48%; float:left; max-width:1000px}
.tge-twothird{width:66.66666%}
.tge-threequarter{width:74.99999%}}

/* TGE: THIS IS FOR MOBILE-FIRST.  This changes the Navbar from one row to two rows for small screens (does not affect book columns).
Changed from max-width:350px (for FfEL.com, 4 buttons) to max-width:400px (for SK.org, 5 buttons) */
@media (max-width:400px){
  .tge-mobile{display:block;width:49.999%!important}
	.tge-mobile3{display:block;width:33.333%!important}}

/* TGE border rounding options (most are not used). */
.tge-round-2px{border-radius:2px}
.tge-round-4px{border-radius:4px}
.tge-round-8px{border-radius:8px}
.tge-round-16px{border-radius:16px}
.tge-round-32px{border-radius:32px}

/* BULLETS */
.list-disc {
    display: block;
    list-style-type: disc;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 15px;
    margin: 0;
  }
.list-item1 {
    display: list-item;
    line-height: 1.3;
    padding: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;
    text-align: left;
    text-indent: 0;
  }

/* CARD SHADOW */
.tge-card-4,.tge-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

/* Nav Bar & Button Hover */
.tge-bar-item:hover{color:#000!important;background-color:#ccc!important}

.button1:hover {
  color: #000 !important;
  background-color: #962c6f !important
}

.button2:hover {
  color: #8d7959fe !important;
  background-color: #d7b685fe !important
}

/* IMAGE HOVER opacity */
.tge-hover-opacity:hover{opacity:0.7}

/* Custom Border Color for FfEL.com (Mostly for Nav Bar). */
.tge-border-0{border:0!important}
.tge-border{border:2px solid #076222!important}
.tge-border-top{border-top:2px solid #076222!important}
.tge-border-bottom{border-bottom:2px solid #076222!important}
.tge-border-left{border-left:2px solid #076222!important}
.tge-border-right{border-right:2px solid #076222!important}

/* Custom Border Color for SK.com (Mostly for Nav Bar). */
.tge-border2-0{border:0!important}
.tge-border2{border:2px solid #795548!important}
.tge-border2-top{border-top:2px solid #795548!important}
.tge-border2-bottom{border-bottom:2px solid #795548!important}
.tge-border2-left{border-left:2px solid #795548!important}
.tge-border2-right{border-right:2px solid #795548!important}

/* COLORS for FfEL.com*/
.tge-text-maroon{color:#930000}
.tge-green-ffel{color:#000!important;background-color:#b8fa99!important}
.tge-green{color:#fff!important;background-color:#4CAF50!important}
.tge-brown{color:#fff!important;background-color:#795548!important}
.tge-tan{background-color:#c29e90!important}

/* New COLORS for SK.com*/
.tge-blue-sk{color:#000!important;background-color:#ddf5f7!important}
.tge-purple{color:#fff!important;background-color:#8c2de3!important}
.tge-blue{color:#fff!important;background-color:#0080ff!important}

 /* LINK COLORS: unvisited, visited, mouse-over, selected */
 a:link {color: rgba(184, 3, 184, 0.87);}
 a:visited {color: #661919;}
 a:hover {color: blue;}
 a:active {color: red;} 
 
 .button1 {
  background-color: #7f1f5c;
  border: 2px solid #340508;
  border-radius: 8px;
  color: rgb(220, 137, 213);
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em;
  margin: 10px 0.6%;
  cursor: pointer;
  /*float: right; */
  }

  /* button2 added for reading slides with parchment background */
 .button2 {
   background-color: #f0ca92fe;
   border: 2px solid #cbaf84fe;
   border-radius: 8px;
   color: #9f8864fe;
   padding: 5px 5px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 1.0em;
   margin: 10px 0.6%;
   cursor: pointer;
   /*float: right; */
 }


 /* COLORS for Songs123 (text size buttons & Background) */
.color-small {background-color: #4CAF50 !important}
.color-normal {background-color: #795548 !important}
.color-large {background-color: #4CAF50 !important}
.color-xlarge {background-color: #4CAF50 !important}  



/* FORMERLY:
.tge-slides{background-color:#500050}
*/

/* 
Note the difference in how slides.html is different from the music.html:
Slides.html uses a background image so the buttons are on top of it.
Music.html uses a regular image so the buttons are above it.
The Javascript for each is considerably different.
Since the background image is part of the style, and is unique to each song, it must be styled within slides.html (not in css_slides1.css).
*/

.tge-slidesBody {
  background-color:#500050;
  /* Background image must be called from within the selected song folder*/
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0;
  padding: 0;
}

/* tge-slidesBody2 added for reading slides with parchment background */
.tge-slidesBody2 {
  background-color: #cab18cfe;
  /* Background image must be called from within the selected song folder*/
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0;
  padding: 0;
}

.tge-musicBody{
  background-color:#500050;
  height: 100%;
  margin: 0;
  padding: 0;
}

.tge-musicDiv{
  margin: auto; 
  max-width: 600px;
}