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:1.88em} /* these font sizes change for each css file for songs123.xyz */
h2{font-size:1.5em}
h3{font-size:1.5em}
h4{font-size:1.25em} /*keep constant 1.25em for buttons*/
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;  /* this changes for each css file for songs123.xyz (same as h6 size above?) */
  display: block;
  line-height: 1.3;
  padding: 0;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
}


/*NEW list styles 9/2023*/
ol.decimal {
  list-style-type: decimal;
  text-align: left;
  font-size: 1.13em;
  /* this changes for each css file for songs123.xyz (same as h5 size, above) */
  font-weight: bold;
  margin: auto;
  max-width: 500px;
  /* this changes for each css file for songs123.xyz */
}

ol li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
}

ol li span {
  font-weight: normal;
}

h1,h2,h3,h4,h5,h6{font-family:Arial,sans-serif;font-weight:400;margin:12px 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: auto; 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;
  text-align: center;
  border-radius: 8px;
}

.tge-bar-item {
  width:33.33%;
  display:inline-block;
  padding:5px 0px;
  text-align:center;
  font-size: 1.0em;
  border:none;
  white-space:normal;
  float: left;
  outline:0;
  text-decoration-line: none;
  color: #fff !important;
  background-color: #4CAF50 !important;
}

.tge-bar-item4 {
  width:25%;
  display:inline-block;
  padding:5px 0px;
  text-align: center;
  border:none;
  white-space:normal;
  float:left;
  outline:0;
  text-decoration-line: none;
  color: #fff !important;
  background-color: #4CAF50 !important;
}

.tge-bar-item5 {
  width: 20%;
  display: inline-block;
  padding: 5px 0px;
  text-align: center;
  border: none;
  white-space: normal;
  float: left;
  outline: 0;
  text-decoration-line: none;
  color: #fff !important;
  background-color: #4CAF50 !important;
}

/* 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 (.tge-half)(>= 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%}}

/* @media STATEMENTS for Songs123.*: Change song list from 1 column to 3 columns for large screens landscape (>= ???px-wide). 
*/

.tge-columns {
  column-count: 1;
}

@media (min-width:700px) {
  .tge-columns{
    column-count: 2;
  }
  .tge-width95{
    max-width: 95%
  }  
}
@media (min-width:1100px){
  .tge-columns{
    column-count:3;
  }
  .tge-width95{
    max-width: 95%
  }  
}



/* 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).  Max-width 250 or 330 for Songs123. */
@media (max-width:250px) {
  .tge-mobile {display: block; width: 49.999% !important}
  .tge-mobile3 {display: block; width: 33.333% !important}
}
@media (max-width:300px) {
  .tge-mobile2 {display: block; width: 49.999% !important}
}
@media (max-width:330px) {
  .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 {
  font-size: 1.0em;
  /* this changes for each css file for songs123.xyz */
  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: #ccc !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}

/* COLORS for Songs123 */
.tge-color1 {color: #930000}
.tge-color2 {color: #000 !important;background-color: #fdeca6 !important}
.tge-color3 {color: #fff !important; background-color: #4CAF50 !important}
.tge-color4 {color: #fff !important; background-color: #795548 !important}
.tge-color-background {background-color: #b8fa99 !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: #4CAF50;*/
  border: 2px solid #076222;
  border-radius: 8px;
  color: white;
  margin: 4px 2px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /*font-size: 1.0em; */
  cursor: pointer;
}

/* COLORS for Songs123 text size buttons.
These are customized for each css file */
.color-small {background-color: #4CAF50 !important}
.color-normal {background-color: #795548 !important}
.color-large {background-color: #4CAF50 !important}
.color-xlarge {background-color: #4CAF50 !important}
.color-xxl {background-color: #4CAF50 !important}

.tge-headerImage1 {
  padding-top:2px; 
  padding-bottom:0px;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-headerImage2 {
  width: 80%;
  max-width: 600px;
}

.tge-navbar1 {
  padding-top:0px; 
  padding-bottom:0px;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-navbar2 {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-navbar3 {
  padding-top: 0px;
  padding-bottom: 15px;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-navbar4 {
  padding-top: 35px;
  padding-bottom: 0px;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-lyrics1 {
  color: #000;
  background-color: #fdeca6;
  margin:auto; 
  padding-top:0px;
  text-align: center;
}

.tge-lyrics2 {
  color: #000;
  text-align: center;
  font-style: normal;
  margin-top:0;
  margin-bottom:0;
  padding-top: 15px;
  padding-bottom: 0;
}

.tge-lyrics3 {
  color: #930000;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 15px;
}

.tge-lyricsText {
  text-align: center;
}

.tge-lyricsNotes1 {
  padding-top:5%;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-lyricsNotes2 {
  margin:auto; 
  width:80%; 
  padding-top:1em;
  text-align: center;
} 

.tge-files1 {
  margin:auto; 
   color: #000;
   background-color: #fdeca6;
}

.tge-files2 {
  margin:auto; 
  width:80%;
  color: #000;
  background-color: #fdeca6;
}

.tge-files3 {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 8px;
  padding-bottom: 0px;
  text-align: center;
  color: #930000;
  font-weight: bold;
  font-style:italic;
}

.tge-files4 {
  color: #000;
  text-align: center;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 15px;
  padding-bottom: 0;
}

.tge-filesHref {
  margin: 0px 0px 12px 30px;
}

.tge-filesNotes1 {
  padding-top:5%;
  text-align: center;
  color: #000;
  background-color: #fdeca6;
}

.tge-filesFooter {
color: #930000;
text-align: center;
}

.tge-button1 {
  color: #000;
  background-color: #fdeca6;
  margin: auto;
  padding: 0px;
}

.tge-button2 {
  font-weight: bold;
  text-align: center;
}

.tge-index1 {
  color: #000;
  background-color: #fdeca6;
  margin: 0;
  padding-top: 0px;
  padding-bottom: 0px;
}

.tge-index2 {
  color: #930000;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.tge-index3 {
  color: #000;
  background-color: #fdeca6;
  margin: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.tge-notesCenter {
  color: #000;
  background-color: #fdeca6;
  text-align: center;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 0;
  width: 80%;
}

.tge-notesLeft {
  color: #000;
  background-color: #fdeca6;
  text-align: left;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 0;
  width: 80%;
}

.tge-contents1 {
  color: #930000;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding-top: 0.5em;
  padding-bottom: 0em;
}

.tge-contents2 {
  color: #930000;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0.5em;
}

/* Font size for text-size buttons.
Stays same for all font size css files. */
.fontSize2 {
  font-size: 1.25em;
}

/* For "Text-size:" image next to Text Size buttons.
Font size is for alternate text.  */
.imageTextSize {
  font-size: 1.25em;
  width: 40px;
  height: 40px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 7px;
}

.tge-rulerMargin1 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.tge-rulerMargin2 {
  margin-top: 25px;
  margin-bottom: 10px;
}