@charset "iso-8859-1"; * { margin: 0; padding: 0; box-sizing: border-box; font-size: 100%; }

 body {max-width:  height: 100vh;  width: 100%; background-color: #ffffd4;  color: navy; font-family: arial; font-size: .9em; line-height: 1.4}
  
  .word-wrap {
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Specifies the size of the audio container */
audio {
  width: 100px;
  height: 15px;
}


audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(80% + 10px); /* Adjust as needed */
	justify-content: center;
}

/* Removes the timeline */
audio::-webkit-media-controls-timeline {
  display: none !important;
}

/* Removes the timeline */
audio::-webkit-media-controls-more-options {
  display: none !important;
}

/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
  display: none;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none;
}

.buttonClass {
  font-size:15px;
  font-family:Arial;
  width:22px;
  height:22px;
  border-width:1px;
  color:#fff;
  border-color:#84bbf3;
  font-weight:bold;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  text-shadow:inset 0px 1px 0px #528ecc;
  background:linear-gradient(#79bbff, #378de5);
}

.buttonClass:hover {
  background: linear-gradient(#378de5, #79bbff);
}

header h1 {display: inline-block; padding-left: .5em; font-size: 2.5em; font-family: sans-serif; color: menu}
.nav {
    padding: .5em;
   }
.nav ul {border: 0px; list-style-type: none; padding-left: .5em; margin-bottom: 0; margin-top: 0; margin-left: 0; margin-right: 0; text-align: left; top: -.5em; border-top-width: thin; border-bottom-width: thin}
.nav li {display: list-item; padding-right: 1.3em; font-family: Arial;}
 
 .inav {
    padding: 0;	
	
   }
.inav ul {border: 0px; list-style-type: none; padding-left: .5em; text-align: left; top: -1.5em;}
.inav li {padding-right: 1.3em; font-family: Arial; }



.aside-left {display: inline-block; width: 15%; padding: .4em; background-repeat: repeat; float: left; height: 100%; margin-top: 2em}
article {
    display: inline-block;
    padding: 0em;
    width: 64%;	
	height: 100vh;
}
.mostly-customized-scrollbar {
  display: block;
  width: 100%;
  overflow: auto;
  height: 625px;
}
.bullets {
  width: 90%;
  margin-left: 4em
}

blockquote { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
  text-align: justify;
}
.tableleft {display: inline-block; float: left;	border:8px; width: 45%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.tableright {display: inline-block; float: left; border:8px; width: 45%; margin-left: 1em; margin-right: 1em; text-align: left
}

.ctableleft {display: inline-block; float: left;	border:8px; width: 10%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.ctableright {display: inline-block; float: left; border:8px; width: 80%; margin-left: 1em; margin-right: 1em; text-align: left
} 

.dtableleft {display: inline-block; float: left;	border:8px; width: 20%; margin-left: 1em; margin-right: 1em; text-align: left
}
   
.dtableright {display: inline-block; float: left; border:8px; width: 70%; margin-left: 1em; margin-right: 1em; text-align: left
} 



.phrase-table {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  grid-template-rows: repeat(12, 28px);
  grid-gap: 1px;
  margin-right: 1%;
  max-width: 175px;
  justify-content: right;
}

.phrase-element group-level {
  padding: 1px;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: all 0.1s ease;
}
.phrase-element void {
  padding: 4px;
  position: relative;
  z-index: 1;
 
  transition: unset;
}
.phrase-element .phrase-element-inner {
  background-color: #ffffd4; 
  border-color: #ffff97;
  padding: 4px 4px;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  transition: inherit;
}
.phrase-element .title {
  font: 700 9pt/1.3 "Poppins", sans-serif;
  margin: 0em 0 0;
  padding-right: 4px;
  transition: 0.08s ease 60ms;
  background: transparent;
    border-color: red;
text-align:right;
}

.phrase-element:after {
  z-index: 10;
  background: #f9f8f7;
  color: #222;
  width: 35px;
  position: absolute;
  top: 80%;
  opacity: 0;
  transition: opacity 0.03s ease 0.03s, top 0.03s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.03s;
  height: auto;
  font-size: 10pt;
  line-height: 1;
  padding: 6px;
  margin: 0 0 0 0px;
  border-radius: 2px;
    border-color: white;
  text-align: right;
}
.phrase-element:hover {
  transform: scale(.95);
  z-index: 10;
}
.phrase-element:hover .phrase-element-inner {
  background: transparent;
  color:white;
}
.phrase-element:hover .title,


.phrase-element:hover:after {
  top: 100%;
  opacity: 1;
}

a.phrase-element {
  cursor: pointer;
}

a:link {
  text-decoration: none;
  color: navy;
}

a:visited {
  text-decoration: none;
  color: navy;
}

a:hover {
  text-decoration: underline;
  color: white;
  background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}

a:active {
  text-decoration: none;
  color: navy;
}

.group-level {
  background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}
.group-level .title,



.empty-spacer-1 {
  grid-column: 3/span 4;
  grid-row: 1;
}
.empty-spacer-2 {
  grid-column: 1;
  grid-row: 4;
}



h2 {
    font-size: 2em;	
	margin-left: .5em;
	margin-top: .25em;
	margin-bottom: .25em;
}
article p {margin-bottom: 1em; margin-top: .5em; margin-left: 1em; margin-right: 1em; text-align: justify}
.aside-right {
    display: inline-block;
    vertical-align: top;
  
    padding: 1em; 
	background-repeat: repeat;
	color: navy;
}	
frame {margin-bottom: 1em; margin-top: .5em; margin-left: 2em; margin-right: 1em; text-align: left}   
 footer {	 
  border-bottom: 2px solid gray; 
   width: 100%;	
	height: 2em;
   }
footer ul {border: 0px; list-style-type: none; padding-left: .5em; margin-bottom: 0; margin-top: 0; margin-left: 0; margin-right: 0; text-align: center; top: -1em; border-top-width: thin; border-bottom-width: thin; }
footer li {display: inline-block; padding-right: 1.2em; font-family: Arial; font-weight: bold; }
 
 
 #words {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#words td, #words th {
  border: 1px solid #ddd;
  padding: 4px;
}

#words tr:nth-child(even){background-color: #e9f7ff;}

#words th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: left;
  background-color: #0000ff;
  color: white;
}
 
 #details {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: normal;
  border-collapse: collapse;
  width: 100%;
  vertical-align:top;
  background-color: white;
}

#details td, #words th {
  border: 1px solid #aaaaaa;
  padding: 4px;
  vertical-align:top;
}

#details tr:nth-child(even){background-color: #1d87ff;
color: white; }

#details th {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  border: 1px solid #aaaaaa;
  background-color: #0068de;
  color: white;
  font-size:large;
}

 
h3 {font-size: 1.25em; margin-top: .5em; text-align: center}
h6 {font-size: 4.25em; color: #000080; margin-top: .5em; text-align: center}
h5 {font-size: 3.25em; color: #000080; margin-top: .5em; text-align: center}
h4 {font-size: 2.25em; color: #000080; margin-top: .5em; text-align: center}
.h7 {font-size: 1.25em; color: #000080; margin-left: .5em; margin-right: .25em; margin-bottom: .25em; text-align: left}
.h8 {font-size: .9em; color: #000080; margin-left: 3em; margin-right: .25em; margin-bottom: .25em; text-align: left}

/* BACKGROUND COLORS */
header {
     background-color: #ffffff;
   
}
aside, main { background-color: #ffff97; }
nav {
    background-color: #ffff97;
   
}	
 footer {
    background-color: #ffff97;
   
}	

article {
    background-color: white;
}