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);}


/* TGE changed line-height from 1.5 to 1.3 */
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.5em}
h2{font-size:1.5em}
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 {
    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: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:90%;overflow:hidden}

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

.tge-bar-item2 {
  width: 50%;
  display: inline-block;
  float: left;
  padding: 5px 0px;
  text-align: center;
  border: none;
  white-space: normal;
  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 Hover */
.tge-bar-item: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}

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