/* ©2024 J. J. Olson, licensed as CC-BY */
/**********************************************************/
/*                      text-page.css                     */
/*                                                        */
/* Style settings for a typical text and diagram page.    */
/* i.e. for all pages except the individual exercises.    */
/* e.g. how-to-use.html  ex/grpB.html  ex/index-nms.html  */
/*                                                        */
/* All of these pages use a sheet-of-paper model where    */
/* the sheet stops expanding after reaching a reasonable  */
/* size that depends on the browser's font size.          */
/*                                                        */
/* Typically these pages (except index.html) include a    */
/* navigation bar that remains fixed at the top of the    */
/* the sheet despite scrolling.                           */
/*                                                        */
/* The group pages include a special "star map" that      */
/* rewards a star for each exercise that is visited.      */
/*                                                        */
/* The exercise and name indexes are lists of entries     */
/* divided into sections either by group or by alphabet.  */
/*                                                        */
/* Bibliography entries support the references page.      */
/*                                                        */
/**********************************************************/


/**********************************************************/
/*        global color scheme                             */
body {
   --bararea: #850;   /* GFA 53% brown bar */
   --bartext: #fe9;   /* GFA yellow bar text */
   --barhovr: #6cf;   /* CFE lt blue bar hover */
   --barttip: #fff;
   --barttxt: #000;
   --starvstd: #fe4;  /* CFE gold star */
   --paprwhit: #fff;
   --paprdesk: #eee;
   --paprshdw: #ddd;
   --indxltrs: #00f;
   --linkblck: #000;
   --linkhovr: #00e;
   --linkblue: #06c;
   --linkvstd: #808;
   --linkactv: #f00;
   background-color: var(--paprdesk);
   font-family: Century SchoolBook, Times New Roman, Times, serif;
   /* font-family: 'Varela Round', sans-serif; */
   margin: 0.5em;
}


/**********************************************************/
/*        for general tags                                */

a {
   text-decoration: none;
   color: var(--linkblue);
}

a:visited {
   color: var(--linkblue);
}

a:hover {
   color: var(--linkhovr);
}

a:active {
   color: var(--linkactv);
}

h1 {
   text-align: center;
   font-size: 1.6em;
   font-weight: bold;
}

h2 {
   text-align: left;
   font-size: 1.1em;
   font-weight: bold;
}

p.norm {
   text-indent: 3ch;
}

p.jj {
   text-indent: 3ch;
   font-style: italic;
}

/**********************************************************/
/*        for postscript png and lilypond svg figures     */

.png, .svg {
   width: 100%;
}

.inpng, .insvg {
   position: relative;
   bottom: 0px;
}

/**********************************************************/
/*        for limited width paper                         */

.papr {
   box-sizing: border-box;
   background-color: var(--paprwhit);
   max-width: 50em;
   font-size: calc(min(1em, 1.95vw));
   margin: auto;
   padding: 0em 3em 2em;
   border-width: 0.2em 0.3em 0.4em;
   border-style: solid;
   border-color: var(--paprshdw);
}

/**********************************************************/
/*        for fixed navigation bar at top                 */

.barfixer {
   box-sizing: border-box;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   font-size: calc(min(1em, 1.95vw));
   background-color: var(--paprdesk);
   padding: 0.3em 0.6em 0em;
}

.bar {
   box-sizing: border-box;
   max-width: 50em;
   margin: auto;
   border-width: 0.2em 0.3em 0em;
   border-style: solid;
   border-color: var(--paprshdw);
   display: grid;
   grid-template-columns: auto auto auto auto auto;
   background-color: var(--bararea);
   font-family: Helvetica, Arial, sans-serif;
   color: var(--bartext);
   height: 1.6em;
   line-height: 1.4em;
}

.bar a {
   color: var(--bartext);
   text-decoration: none;
}

.bar a:hover {
   color: var(--barhovr);
}

.bar a:active {
   color: var(--linkactv);
}

.prev {
   text-align: left;
   --ttipat: 1.4em;
}

.home {
   --ttipat: 2.5em;
}

.icon {
   height: 1.4em;
}

a:hover .icon {
   background-color: var(--barhovr);
}

a:active .icon {
   background-color: var(--linkactv);
}

.chap {
   text-align: center;
   --ttipat: 3em;
}

.indx {
   text-align: right;
   --ttipat: 1.4em;
}

.next {
   text-align: right;
   --ttipat: 1.4em;
}

/**********************************************************/
/*        for tooltips in the navigation bar              */
/*        (tooltipr is the right-justified version)       */
.tooltip,
.tooltipr {
   position: relative;
   display: inline-block;
   height: 1.4em;
   --arrowsize: 1.0em;
}

.tooltip .tooltiptext,
.tooltipr .tooltiptext {
   visibility: hidden;
   position: absolute;
   z-index: 1;
   top: 170%;
   background-color: var(--barttip);
   color: var(--barttxt);
   font-size: 0.7em;
   text-align: center;
   width: max-content;
   padding: 0em 1em;
   border-radius: 0.6em;
   border-width: 0.2em;
   border-style: solid;
   opacity: 0;
   transition: opacity 1s;
}

.tooltip .tooltiptext {
   left: 0%;
}

.tooltipr .tooltiptext {
   right: 0%;
}

.tooltip .tooltiptext::before,
.tooltipr .tooltiptext::before {
   content: " ";
   position: absolute;
   bottom: 100%;  /* At the top of the tooltip */
   margin-left: calc(var(--arrowsize) * -1)-7px;
   border-width: var(--arrowsize);
   border-style: solid;
   border-color: transparent transparent var(--barttxt) transparent;
}

.tooltip .tooltiptext::after,
.tooltipr .tooltiptext::after {
   content: " ";
   position: absolute;
   bottom: 91%;  /* At the top of the tooltip */
   margin-left: calc(var(--arrowsize) * -1)-7px;
   border-width: var(--arrowsize);
   border-style: solid;
   border-color: transparent transparent var(--barttip) transparent;
}

.tooltip .tooltiptext::before,
.tooltip .tooltiptext::after {
   left: var(--ttipat);
}

.tooltipr .tooltiptext::before,
.tooltipr .tooltiptext::after {
   right: var(--ttipat);
}

.tooltip:hover .tooltiptext,
.tooltipr:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}

/**********************************************************/
/*        for main title and toc page                     */

.titl {
   text-align: center;
   font-size: 1.5em;
   font-weight: bold;
   margin-top: 2.0em;
}
.subttl {
   text-align: center;
   font-size: 1.1em;
   font-weight: bold;
   margin-top: 0.1em;
}
.auth {
   text-align: right;
   font-size: 1.0em;
   font-weight: normal;
   margin-top: 0.1em;
   margin-right: 1.5em;
}

.toc {
   font-weight: bold;
   margin-top: 1.0em;
}
.tocttl {
   text-align: center;
   font-size: 1.0em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}
.tocitm {
   margin-left: 7em;
   text-align: left;
   font-size: 0.9em;
}
.toctxt {
   font-style: italic;
   font-weight: normal;
   margin-left: 11em;
   text-align: left;
   font-size: 0.9em;
}

/**********************************************************/
/*        for group pages                                 */

.top {
   text-align: center;
}

.cells {
   display: grid;
   width: 100%;
   grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
   grid-gap: 1px;
   color: var(--paprwhit);
}

.ex {
   background-color: var(--bararea);
   width: 100%;
   height: 1.0em;
   line-height: 0.9em;
   font-size: 4.0em;
   text-align: center;
}

.ex a {
   text-decoration: none;
}

.ex a:link {
   color: var(--bararea);
}

.ex a:visited {
   color: var(--starvstd);
}

.ex a:hover {
   color: var(--barhovr);
}

.ex a:active {
   color: var(--linkactv);
}

/**********************************************************/
/*        for exercise index and name index pages               */

.container {
   box-sizing: border-box;
   font-family: Helvetica, sans-serif;
   font-size: 0.95em;
   width: 90%;
   margin-left: 10%;
}

.container a {
   text-decoration: none;
}

.letters {
   text-align: center;
   color: var(--indxltrs);
   margin-top: 2.0em;
   font-size: 1.1em;
}

.igrp {
   text-align: center;
   height: 2.0em;
   line-height: 2.0em;
   font-size: 1.5em;
}

.iltrid {
   height: 3.0em;  /* so jumped-to letter remains visible */
}

.iltr {
   text-align: center;
   height: 2.0em;
   line-height: 1.0em;
   font-size: 1.5em;
}

.ix {
   display: grid;
   grid-template-columns: 20% 80%
}

.id {
   text-align: left;
}

.it {
   text-align: left;
}

.id a:visited {
   color: var(--linkvstd);
}

/**********************************************************/
/*        for bibliography                                */

.bib {
   display: grid;
   grid-template-columns: 62% auto auto;
   font-size: 0.9em;
   width: 100%;
}
.bttl {
   text-align: left;
}
.bref {
   text-align: left;
}
.blic {
   text-align: right;
}

/*
.bib {
   display: grid;
   grid-template-columns: 58% auto auto;
   font-size: 1.6vw;
   width: 100%;
   overflow-x: hidden;
}
.bttl::before {
   float: left;
   height: 1em;
   width: 0;
   white-space: nowrap;
   content:
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
}
.bttl {
   text-align: left;
   background: white;
}
.bref {
   text-align: left;
   background: white;
}
.blic {
   text-align: right;
   background: white;
}
*/

/*
.bib {
   display: flex;
   font-size: 1.6vw;
   width: 100%;
   overflow-x: hidden;
}
.bib::before {
   float: left;
   width: 0;
   white-space: nowrap;
   content:
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
   ". . . . . . . . . . . . . . . . . . . . "
}
.bttl {
   flex: 0 0 58%;
   text-align: left;
}
.bref {
   text-align: left;
   background: white;
}
.blic {
   align-self: flex-end;
   text-align: right;
   background: white;
}
*/

/**********************************************************/
/*        for random exercise buttons                     */

#bfe, #dfe, #cfe, #mfe {
   background-color: white;
   color: var(--linkblue);
   border-color: var(--linkblue);
   border-radius: 0.4em;
   border-width: 0.1em;
   font-size: 0.8em;
   padding: 0.2em 0.9em;
   margin-left: 18em;
}

#bfe:hover, #dfe:hover, #cfe:hover, #mfe:hover {
   background-color: var(--butnnorm);
   color: var(--linkhovr);
   border-color: var(--linkhovr);
}

/**********************************************************/
/*        for references                                  */

.ref {
   width: 100%;
   margin-top: 1.0em;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-size: 1.1em;
}

/**********************************************************/
/*        for main copyright (first page of book)         */

.copyr {
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 1.5em;
   width: 80%;
   margin: auto;
   margin-top: 3.0em;
   margin-bottom: 2.0em;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-size: calc(min(0.8em, 1.56vw));
}
.copyr-img {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
   margin-left: auto;
   margin-right: 5%;
   height: 2.5em;
}

/**********************************************************/
/*        for identification footer (other pages)         */

.foot {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 100%;
   margin-top: 3.0em;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-size: 0.6em;
}

.footL {
   text-align: left;
}

.footC {
   text-align: center;
}

.footR {
   text-align: right;
}