/* file albigen.com/styles/albigen-2022.css

	Update September 3, 2015. Update June 28, 2022, July 5, 2022


NEED JAVASCRIPT FOR TOTOPCLEANURL, WHERE IS?


	Stop with Anchors, at 2022.css line 927.  < start here


*/

@media only print {
	#article:after {
		content: "Update July 5, 2022";
	}
}


@media only print {

	/* mmust update from uarelov to Albigen */
	#style-gadget,
	#top,
	#title-link-awa,
	#title-link-albigen,
	#most-rapid-title-link-contents,
	#most-rapid-title-link-awa,
	nav.next-previous-item-nav,
	#menu-include-file-div,
	p.totop-above-anchor,
	p.awa-index-link {
		display: none;
	}

	#main-content {
		width: 100%;
		position: absolute;
		top: 0;
		left: 10px;
	}

	#article,
	article,
	#announce {
		width: 100%;
	}

	#book-cover-article {
		display: block;
	}
}



/* Default light theme, very light blue. Generally overridden by project CSS  */
html,
body,
/* must include these or header will be transparent; cannot be "inherit" */
#fixed-header-small-screen,
#menu-site-small-screen,
.progress-header,
.progress-container {
	color: #000;
	/* yellow */
	background: #ffffea;
}

/* Default highlighting color */
#menu-section-group a.active,
#menu-scroll a,
#toTopButton,
.item:hover,
nav.contents .item:hover {
	background: #b0d9ff;
}

/* in 2022.CSS this is same */
html.dark #menu-section-group a.active,
html.dark #menu-scroll a,
html.dark #toTopButton,
html.dark .item:hover,
html.dark nav.contents .item:hover {
	background: #449;
}



/* The following is used in conjunction with  /scripts/menu-highlighter.js
	Ajax must be enabled for highlighter to work.
	Menu element #menu-section-group must exist. It is referenced in the script.
	Also #menu-container is needed.
	http://webdesignerhut.com/active-class-navigation-menu/
/* The anchor gets the background color, not the list item. The anchor has class = active */
/* Background is among elements with "highlighting color" above.  */
/* Adjusting padding so selected item doesn't wrap if not already wrapped
	from old 2022.CSS
	This		#menu-section-group
	Is replaced by #menu-pages-div   < no, changed it back
	
*/


/* same padding and margin */
#menu-section-group a,
#menu-section-group a.active {
	/* WAS margin-left: -8px;
    padding-left: 10px;
    padding-right: 5px; */
	xmargin-left: -8px;
	padding-left: 3px;
	xpadding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 0px solid white;
	/* new, see next */
	width: 100%;
}

/* from 2022.CSS
ul.menu-section li a {
  display: inline;
  width: 100%;
}
 */



body {
	font-family: verdana, tahoma, ariel, sans-serif;
	font-size: 18px;
	/* WAS line-height: 1.7em; */
	/* line-height: 1.8em; x 18px = 32px  */
	line-height: 32px;
}

/* System Fonts as used by Medium and WordPress

The limitation of the first method is that you have to call the full stack of fonts each time it’s used on an element and that can get cumbersome and bloat your code, depending on where and how it’s used.


*/
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Verdana, Ubuntu, Cantarell, sans-serif;
}

/* System Fonts (may load faster) as used by GitHub

https://css-tricks.com/snippets/css/system-font-stack/ 

*/

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


/* Define the "system" font family

Jonathan Neal offers an alternative method where system fonts are declared using @font-face.

The benefit here is that you can declare the fonts once and then that becomes the thing you can on the font-family property instead of the long list of fonts each and every time.



@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element
body {
  font-family: "system";
}
 */



html.dark,
html.dark body,
/* must include these or header will be transparent; cannot be "inherit" */
html.dark #fixed-header-small-screen,
html.dark #menu-site-small-screen,
html.dark .progress-header,
html.dark .progress-container {
	/* try same as selfdef spanish */
	background: #252729;
	color: #fdfdff;
}

/* lightblue #add8e6 is not bright enough    */
html.dark a,
html.dark a:visited,
html.dark a:link,
html.dark a:hover,
html.dark #toTopButton {
	color: aqua;
	/* aqua is #00ffff; */
}

/* generic items */

html {
	box-sizing: border-box;
}

* {
	box-sizing: inherit;
}

*::before,
*::after {
	box-sizing: border-box;
}

/* Start z-index stacking; */
/* Start z-index stacking; */
/* also see further below
	A) .progress-header (100), .progress-container (101), .progress-bar (102)
	B) #toTop button (99) */
body,
#main-content,
#announce,
#article,
article {
	z-index: 0;
}

/* keep links accessible when list item padding overlaps them */
a.page-link-anchor,
a.return-anchor,
a.top-anchor,
a.endnote,
ul.references-list a {
	z-index: 1;
}


/* a.return-anchor and a.endnote are not clickable. Used for positioning. */

p.totop-above-anchor {
	z-index: 2;
}

/* left menu
	#menu-section-group     must be an ID
	#menu-section           must be a class */
#menu-section-group {
	z-index: 6;
}

#menu-site,
ul.menu-text {
	z-index: 10;
}

/* top menu */
#fixed-header-small-screen {
	z-index: 9;
}

#menu-site-small-screen {
	z-index: 10;
}

/* End z-index stacking; */
/* End z-index stacking; */


/* start conditional hide */
/* start conditional hide */
/* see chart at top of drop-in-menu-include */

/* adjust the following 3 as needed */
@media only screen and (max-width:600px) {

	.conditional-hide,
	#menu-site-small-screen .conditional-hide-1 {
		display: none;
	}
}

@media only screen and (max-width:500px) {

	.conditional-hide-1,
	#menu-site-small-screen .conditional-hide-2 {
		display: none;
	}
}

@media only screen and (max-width:450px) {

	.conditional-hide-2,
	#menu-site-small-screen .conditional-hide-3 {
		display: none;
	}
}

@media only screen and (max-width:400px) {

	.conditional-hide-2,
	#menu-site-small-screen .conditional-hide-4 {
		display: none;
	}
}

@media only screen and (max-width:359px) {

	.conditional-hide-2,
	#menu-site-small-screen .conditional-hide-3 {
		display: none;
	}
}

/* end conditional hide */
/* end conditional hide */

div {
	margin: 0;
	padding: 0;
}

p {
	margin: 20px 0;
}

article p.top,
article p.first,
article div.top {
	margin-top: 35px;
}

/* more generic stuff */

.totop {
	/* WAS margin-top: 2em; */
	margin-top: 36px;
}

.hide,
.hide-this {
	display: none;
}


.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.bold,
.strong {
	font-weight: bold;
}

strong,
.strong,
b {
	font-size: 95%
}

.italic {
	font-style: italic;
}

.nowrap {
	white-space: nowrap;
}

.normal,
li.normal {
	font-weight: normal;
	font-style: normal;
}

p.tall {
	margin: 36px 0;
}

.full-width {
	width: 100%;
}

.totop {
	margin-top: 20px;
}

p.totop-above-anchor {
	position: relative;
	top: 40px;
	font-size: 90%;
}

/* text align */
.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.red {
	color: red;
}

html.dark .red {
	color: #FF3040;
}

p.alert {
	background: beige;
}

html.dark p.alert {
	background: #444;
}

/* start anchors */
/* start anchors */

/* see above for html.dark anchors */
a:link {
	color: blue;
	text-decoration: none;
}

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

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

a:hover {
	color: green;
	text-decoration: underline;
}

/* Anchor is displayed as "inline-block" to avoid dead space between lines
	when an anchor tag wraps in a menu.
Can override [class=inline] when it causes unneeded newline. Need to test. */
nav a {
	display: inline-block;
}

/* Allow anchors to break to keep from forcing phone width too wide
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/   */

#main-content a {
	word-break: break-word;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* get rid of weird outline auound anchor tags */
a {
	outline: none !important;
}

/* using a border may break this; anchor element must not be empty */
/*default, large screen; this is the easy method. Can't be used for a list
of anchor tags because they will overlap. For that see below. */
a.page-link-anchor {
	padding-top: 40px;
}

a.top-anchor {
	padding-top: 20px;
}

/* In-page links, for smaller than ipad. Also see jump links. */
@media only screen and (max-width: 767px) {
	a.page-link-anchor {
		padding-top: 160px;
	}

	a.top-anchor {
		padding-top: 140px;
	}
}

/* end simple anchors */
/* end simple anchors */

/* Start Endnotes and Return Anchors */
/* Start Endnotes and Return Anchors */
/* no collapsible footnotes used yet */


/* html




end html */

/* don't wrap the "sup" */
sup {
	white-space: nowrap;
}

/* return anchor when no top menu */
a.return-anchor,
a.return-anchor:target {
	display: inline;
	/* MUST be inline or you get a blank space */
	-webkit-background-clip: content-box;
	background-clip: content-box;
	/* padding-top: 80px;
	margin-top: -80px; */
	padding-top: initial;
	margin-top: initial;
	position: relative;
	top: -80px;
	border: 0px solid red;
}

/* endnote when no top menu */
a.endnote,
a.endnote:target {
	display: inline;
	-webkit-background-clip: content-box;
	background-clip: content-box;
	/* padding-top: 50px;
	margin-top: -50px; */
	padding-top: initial;
	margin-top: initial;
	position: relative;
	/* changed from -50px to -35px
	   Mar 29, 2022 Tranmission */
	top: -35px;
	border: 0px solid red;
}

/* endnotes and return anchor. For simplicity always presume 2-line top menu */
@media only screen and (max-width: 767px) {

	/* NOT ::before  */
	a.return-anchor,
	a.return-anchor:target {
		/* padding-top: 180px;
		margin-top: -180px; */
		padding-top: initial;
		margin-top: initial;
		top: -170px;
		border: 0px solid green;
	}

	a.endnote,
	a.endnote:target {
		/* padding-top: 135px;
		margin-top: -135px; */
		padding-top: initial;
		margin-top: initial;
		top: -135px;
		border: 0px solid green;
	}
}

/* End Endnotes and Return Anchors */
/* End Endnotes and Return Anchors */


/*** scrollbar adjustments ***/
/* copied verbatum from 2022.css */
/* hide the scrollbar; only works for webkit, not IE or Firefox */
#menu-container::-webkit-scrollbar {
	display: none;
}

/* https://css-tricks.com/snippets/css/hide-scrollbar-in-edge-ie-1011/
Syntax:  auto | none | scrollbar | -ms-autohiding-scrollbar
This gets rid of the (autohidden) scrollbar on IE and Edge but still permits scrolling */
#menu-container {
	-ms-overflow-style: none;
}

/* GET RID OF SCROLLBAR ON FIREFOX
https://stackoverflow.com/questions/15394065/firefox-scroll-bar-hidden */
div {
	scrollbar-width: none;
}

/*** end scrollbar adjustments ***/


hr {
	margin-left: 5px;
}

td {
	text-align: left;
	vertical-align: top;
}

/* definition lists */
/* see supreme doctrine */
dl {
	margin: 18px 0;
}

dt,
dd {
	margin-top: 3px;
	margin-bottom: 3px;
}


/* start headers and headings */
/* start headers and headings */

/* */
header,
#announce header,
h1,
h2,
h3,
h4 {
	text-align: center;
	/* line-height: 1.8em; x 18px = 32px  */
	line-height: 32px;
}

h5 {
	text-align: center;
	margin-bottom: 18px;
	/* for some reason without this gives 28.6px */
}

header,
#announce header {
	margin-top: 0px;
	margin-bottom: 0px;
}

h1,
h2,
h3,
h4 {
	margin-bottom: 8px;
}

h1 {
	font-size: 115%;
	margin-top: 20px;
}

h2 {
	font-size: 110%;
	margin-top: 20px;
}

header h2 span,
header h2 span {
	display: block;
	font-size: 80%;
	margin-bottom: 3px;
}

/* mostly for headers, need to check */
h2 + h3,
h2 + p,
h3 + h4,
h3 + p {
	margin-top: 8px;
}

h4 + p,
h5 + p {
	margin-top: 18px;
}

h3 {
	font-size: 105%;
	margin-top: 20px;
}

h4 {
	font-size: 100%;
	margin-top: 20px;
}

h5 {
	font-size: 95%;
	margin-top: 20px;
}

/* li.toowide doesn't work. must have l-r margins "auto" or it won't center  */
h1.toowide,
h2.toowide,
h3.toowide,
h4.toowide,
h5.toowide,
p.toowide,
a.toowide {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* expand "toowide"for smaller screens */
@media only screen and (max-width: 767px) {

	h1.toowide,
	h2.toowide,
	h3.toowide,
	h4.toowide,
	h5.toowide,
	p.toowide,
	a.toowide {
		width: 90%;
	}
}

/* end headers and headings */
/* end headers and headings */

/* more items that set font sizes */

.note,
p.note,
a.note,
p.fnote,
p.footnote {
	font-size: 90%
}

sup,
.fnote {
	color: maroon;
}

html.dark sup,
html.dark .fnote {
	color: #FA9473;
}

.maroon {
	color: maroon;
}

html.dark .maroon {
	color: #FA9473;
}

.note80 {
	font-size: 80%;
}

.tiny {
	font-size: 70%;
}

/* font size changes small screens */
@media only screen and (max-width: 500px) {

	.note,
	p.note,
	a.note {
		font-size: 95%;
	}

	.note80 {
		font-size: 90%;
	}

	.tiny {
		font-size: 80%;
	}

}

/* start images and image-divs */
/* start images and image-divs */

/* image never to go beyond width of its container. "auto" to maintain aspect ratio */
img {
	/* no max-width: auto; */
	max-width: 100%;
	height: auto;
}

/* style the alt text
https://stackoverflow.com/questions/7101743/can-i-style-an-images-alt-text-with-css  */
img {
	color: inherit;
	font-size: 80%;
}

img.menu-image {
	/* WAS max-width: 200px;
	width: 200px;
	Changed June 20, 2022 */
	max-width: 190px;
	width: 190px;
}


div.top-image-wrapper-div {
	margin-top: 35px;
}

.image-div {
	margin-top: 20px;
	text-align: center;
}

/* 1em is 18px, so align with paragraph, give 2px more. Use "p" class note, not font-size 80%;  */
.left-image-div {
	float: left;
	margin: 18px 20px 0 20px;
	/* but add 10px to top of image, see below */
	text-align: center;
}

.right-image-div {
	float: right;
	margin: 18px 20px 0 20px;
	text-align: center;
}

/* image is smaller on large screens, when on either side,
	and larger in small screens, when centered */
.left-image-div img,
.right-image-div img {
	width: auto;
	max-width: 220px;
	margin-top: 0px;
	/* still a bit low */
	margin-top: -3px;
}

.image-div p,
.left-image-div p,
.right-image-div p {
	margin-top: 3px;
}

/* right and left images are centered in small screens */
@media only screen and (max-width: 500px) {
	.left-image-div {
		float: none;
		margin: 5px;
	}

	.right-image-div {
		float: none;
		margin: 5px;
	}

	.left-image-div img,
	.right-image-div img {
		width: auto;
		max-width: 90%;
	}
}

/* end images and image-divs */
/* end images and image-divs */


/* Start generic lists and nav lists  */
/* Start generic lists and nav lists  */
/* Start generic lists and nav lists  */

ul.generic {
	margin-top: 18px;
	/* check this */
	padding-left: 18px;
}

ul.generic-no-bullet {
	list-style: none;
	margin-top: 18px;
	/* check this */
	padding-left: 18px;
}

@media only screen and (max-width:500px) {

	ul.generic,
	ul.generic-no-bullet {
		padding-left: 10px;
	}
}

ul.generic li,
ul.generic-no-bullet li {
	margin-top: 0px;
	margin-bottom: 12px;
}

/* usage class="generic tall" */
ul.generic.tall li,
ul.generic-no-bullet.tall li {
	margin-bottom: 18px;
}


div.menu-logo-area {
	margin-top: 20px;
}


div.menu-pages-div {}

div.bottom-links-div {}

/* WAS ul.menu-logo-list,
WAS ul.menu-pages-list,
ul.menu-logo-list,  
ul.menu-logo-list,*/
#menu-site,
ul.menu-text,
ul.menu-pages-list,
ul.bottom-links-list {
	list-style: none;
	padding: 0;
	width: 100%;
	border: 0px solid blue;
}


/* top-left menu on large screens */
#menu-site,
ul.menu-text,
ul.menu-pages-list,
ul.bottom-links-list {
	display: block;
	margin-top: 20px;
	margin-bottom: 0px;
	width: 190px;
	border: 0px solid green;
}

#menu-site li,
ul.menu-text li,
ul.bottom-links-list li {
	/* 20px at top, adjust tight item with reduced top margin */
	margin-top: 15px;
	margin-bottom: 0px;
	width: 190px;
	border: 0px solid green;
}

ul.menu-pages-list li {
	margin-top: 8px;
	margin-bottom: 0px;
	width: 190px;
	border: 0px solid green;
}

ul.menu-pages-list li.first-item,
ul.bottom-links-list li.first-item {
	margin-top: 3px;
}


/* see /scipts/scrollbar-and-test.js for Ajax display/hide
	if Ajax is enabled, display = none
*/
#menu-site li.ajax-menu-item {
	font-size: 12px;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 5px;
	margin-bottom: 0px;
	color: red;
	/* has entry in dark-styles */
}

html.dark #menu-site li.ajax-menu-item {
	color: #FF3535;
	font-weight: bold;
	font-size: 11px;
}

/* has two items, 2nd refers to activating Ajax; default margin is already zero */
li.scroll-menu-item {
	font-size: 13px;
	margin-top: 10px;
	padding-bottom: 0;
}



/* first used April 27, 2022. Dhananjay, Sublimating */
ol.generic,
ol.generic-2 {
	margin: 18px 0;
}

ol.generic {
	padding-left: 30px;
}

/* when count is in double digits */
ol.generic-2 {
	padding-left: 37px;
}

ol.generic li,
ol.generic-2 li {
	margin-top: 0;
	margin-bottom: 14px;
}

/* usage class="generic tall"
	Gurdjieff Aphorisms, santanelli */
ol.generic.tall li,
ol.generic-2.tall li {
	margin-bottom: 24px;
}

/* roy vincent summary of ploys; orage five strivings;
	black & white, appendix  */
ol.generic li p,
ol.generic-2 li p {
	margin-top: 0px;
	margin-bottom: 14px;
}


@media only screen and (max-width:500px) {

	/* puts flush to left. Any less is off page border */
	/* Cannot use this if ordered-list goes into 2 digits (ol.generic-2) */
	ol.generic {
		padding-left: 25px;
	}
}

/* end list items, general, not menus/navigation */
/* end list items, general, not menus/navigation */


/* Paragraph adjustments */
nav.next-previous-item-nav + p {
	margin-top: 35px;
}

/* Can't be Auto, must stretch */
nav.next-previous-item-nav,
ul.next-previous-item-list {
	width: 100%;
	padding: 0;
}


/* If an element contains only floated elements, its height collapses to nothing.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
a.k.a. "clearfix"
Precaution because device contains floating elements. But ends with li.clear */
ul.next-previous-item-list::after {
	content: "";
	display: block;
	clear: both;
}

/* default large screens, 768px and greater */
/* Top and bottom margins can be thin because spacing is wide */
nav.next-previous-item-nav {
	/* WAS margin-top: 8px; update May 8, 2022 to 12px, updated June 22, 2022 to 18;px; */
	margin-top: 18px;
	/* WAS margin-bottom: 5px; */
	margin-bottom: 8px;
	border: 0px solid yellow;
}

/* need to test these Why are these more narrow? */
@media only screen and (max-width: 600px) {
	nav.next-previous-item-nav {
		margin-top: 12px;
		margin-bottom: 25px;
	}
}


/* now the list */
.next-previous-item-list {
	list-style: none;
	font-size: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0px solid red;
}

/* can decrease font size as below if page titles are long; default is 90%. put option in project CSS

ul.next-previous-item-list 
	{font-size:85%;}
*/

/* increase bottom margin at point where left and right items may overlap
	leave option in project CSS
	NOT NECESSARY BECAUSE OF "AFTER" PSEUDO-ELEMENT ABOVE
@media only screen and (max-width: 500px) {
	.next-previous-item-list {margin-bottom: 25px;}
} */

/* mow the list items */
.next-previous-item-list li {
	margin: 0;
	padding: 0;
	display: inline-block;
}

/* long menu items overlap on small screens
need inside margin so items don't touch as they come together */
.next-previous-item-list li.align-left {
	float: left;
	text-align: left;
	margin-left: 2px;
	margin-right: 8px;
}

.next-previous-item-list li.align-right {
	float: right;
	text-align: right;
	margin-left: 8px;
	margin-right: 3px;
}

li.align-left,
li.align-right {
	border: 0px solid green;
}


/* Link color - has corresponding entry in dark-styles next */
.next-previous-item-list a:link,
.next-previous-item-list a:visited {
	color: #400000;
}

/* lightblue = add8e6 is not bright enough?    */
html.dark ul.next-previous-item-list li a:link,
html.dark ul.next-previous-item-list li a:visited {
	color: lightblue;
}

.next-previous-item-nav li a:hover {
	text-decoration: underline;
}

/*** End Next-Previous Nav ***/
/*** End Next-Previous Nav ***/




/*** Start Nav In-Page Links ***/
/*** Start Nav In-Page Links ***/

/* this is the structure: ul inside nav
	<nav class="in-page-nav">
		<ul class="page-links">
			<li><a href="#">section</a></li>
		</ul>
	</nav>
*/


/* PAGE-LINKS DEFAULT WIDTH -- override this width in project CSS or on page if necesary
	As ul has zero border */


nav.in-page-nav {
	margin-top: 35px;
	border: 0px solid green;
}


/* these are Paragraph advistments */
nav.in-page-nav + p,
nav.in-page-nav + blockquote {
	margin-top: 35px;
}

/* when Nav is below a title, to test.
	Works ok but must eliminate "nav-spacer" if any */
h4 + nav.in-page-nav {
	margin-top: 18px;
}

/* PAGE-LINKS DEFAULT WIDTH -- override this 
	on page if necesary
	As ul has zero border */
ul.page-links {
	list-style: none;
	font-size: 90%;
	padding: 0;
	width: 315px;
	margin: 0 auto 0px;
	border: 0px solid red;
}


/* Coordinate with the above, test. */
@media only screen and (max-width:359px) {
	ul.page-links {
		width: 100%;
	}
}

/* Weird bug. May only apply to Developer tools.
Must have this or viewport will be screwed up on narrow screens
   MUST be on a page if page-links width is specified on that page */
@media only screen and (max-width:300px) {
	ul.page-links {
		width: 100%;
	}
}

.page-links li {
	width: inherit;
	padding: 5px 0;
	margin-top: 5px;
	margin-bottom: 10px;
	border: 0px solid blue;
}

@media only screen and (max-width: 767px) {
	.page-links li {
		margin-top: 10px;
		margin-bottom: 15px;
	}
}



/*** End Nav In-Page Links ***/
/*** End Nav In-Page Links ***/

/* End generic lists and nav lists  */
/* End generic lists and nav lists  */
/* End generic lists and nav lists  */



/* CSS3 Columns for navigation, and Contents-Index Page  */
/* CSS3 Columns for navigation, and Contents-Index Page  */

/* Start CSS3 columns */
/* Default and wide screen, 3 columns
	3 x 120px = 360px plus gutters of 10px */
div.to-center {
	width: 440px;
	margin: 0 auto;
	border: 0px solid red;
}


.to-center hr {
	margin-top: 20px;
	margin-bottom: 20px;
}

nav.contents {
	-webkit-columns: 3;
	-moz-columns: 3;
	columns: 3;
	width: 100%;
	margin: 0 auto;
	border: 0px solid yellow;
	-webkit-column-gap: 5px;
	/* Chrome, Safari, Opera */
	-moz-column-gap: 5px;
	/* Firefox */
	column-gap: 5px;
}

/* optional culumn-rule, good when item is centered, put on page

    Example liberty/xenofon/
    Huang Po-Blofield

    nav.contents {
        column-rule: 1px solid #666;
    }
*/


/* hover-item width. These are divs, NOT list items.
        Override in project CSS if necessary depending on anchor length. */
nav.contents .item {
	width: 140px;
	/* times 3 columns = 420px plus gutters 5px x 2 or 3 */
	margin-bottom: 25px;
	/* CAREFUL: "center" removed June 9, 2022
        text-align: center; */
	text-align: left;
}

/* Small screens = 2 columns. Dev tools says that "witdth" here is that of #main-content */
@media only screen and (max-width:460px) {

	div.to-center {
		width: 300px;
	}

	nav.contents {
		-webkit-columns: 2;
		-moz-columns: 2;
		columns: 2;
		/* no change so remove this
            width: 100%; */
		/* don't know what this is so comment out
            margin: 30px auto 0; */
	}

	nav.contents .item {
		/* no change, so remove this
            width: 120px;
            */
	}
}

/* now the anchor elements */
/* padding on anchor does not affect highlighting (nav list item) but
        makes the anchor more easily clickable
        increase padding if width of item is smaller */
nav.contents .item a {
	padding-left: 10px;
	padding-right: 10px;
}


/* Avoid column breaks:  To test. See if used in Sadony.
        Not used in:  Transmission-Eng,
    https://css-tricks.com/almanac/properties/b/break-inside/
    */
div.item {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}


/* End CSS3 Columns */
/* End CSS3 Columns */

/* Start Contents-Index Page */
/* Start Contents-Index Page */

/* #index-lists is a nav
        Some of these have dual use with left menu so they can simply be copied */


/* Don't know why left margin was set, should be auto. Update April 25, 2022   */
nav.index-lists {
	/* width is default, override on page if desired */
	width: 400px;
	margin: 40px auto;
}

nav.index-lists hr {
	width: 75%;
	margin: 30px auto;
}

/* fix width allows the uls to be centered */
nav.index-lists ul {
	list-style: none;
	margin: 20px auto;
	padding: 0;
	width: 400px;
}

/* the ULs are as follows: */

ul.index-contents-links {}

ul.index-links {}


nav.index-lists ul li {
	margin: 0 0 18px 0;
}

/* test this, the following may not be necessary  */
nav.index-lists ul li:first-child {
	margin-top: 0;
}

li.first-item,
nav.index-lists ul li.first-item {
	margin-top: 3px;
}

/* check this html.dark */
li.header-item,
nav.index-lists ul li.header-item {
	margin-bottom: 3px;
	color: maroon;
	font-weight: bold;
	font-size: 95%;
}


html.dark li.header-item,
html.dark nav.index-lists ul li.header-item {
	color: #FA9473;
	;
}


li.subhead,
nav.index-lists ul li.subhead {
	margin-top: 3px;
	margin-bottom: 3px;
}

/* needed due to specificity, also see p.tight section */
nav.index-lists li.tight {
	margin-top: 3px;
	margin-bottom: 3px;
}

/* anchor */
nav.index-lists a {
	display: inline;
}

/* anchor options */
nav.index-lists a.block {
	display: block;
}

nav.index-lists a.inline-block {
	display: inline-block;
}

/* media queries */
/* media queries */

/* squeeze a little. NO, THIS IS BAD
@media only screen and (max-width:540px) {

	nav.index-lists {
		margin-left: 10px;
	}
}
 */

/* default width is 400px, start at 440px to keep from going outside #index-lists */
@media only screen and (max-width:440px) {

	nav.index-lists,
	nav.index-lists ul {
		width: 100%;
	}
}


/* End Contents-Index Page */
/* End Contents-Index Page */


/* Start Footnotes and Endnotes */
/* Start Footnotes and Endnotes */
/* Start Footnotes and Endnotes */

/* -- nothing yet -- */

/* -- no return-anchor yet -- */
/* -- no endnote yet -- */

/* End Footnotes and Endnotes */
/* End Footnotes and Endnotes */
/* End Footnotes and Endnotes */






/* start blockquotes and tight */
/* start blockquotes and tight */

blockquote,
div.blockquote {
	margin: 0 12px 0 18px;
}

p.blockquote {
	margin-right: 12px;
	margin-left: 18px;
}

@media only screen and (max-width:500px) {

	blockquote,
	p.blockquote,
	div.blockquote {
		margin-left: 4px;
		margin-right: 4px;
	}
}

/* need to test */
blockquote.tight p,
div.tight p,
p.tight {
	margin-top: 8px;
	margin-bottom: 8px;
}

li.tight {
	margin-top: 3px;
	margin-bottom: 3px;
}

li.tight.zero {
	margin-top: 0;
}


/* end blockquotes and tight */
/* end blockquotes and tight */

/* end of normal styles */


/* START DOCUMENT STRUCTURE, DEFAULT THEN RESPOSIVE */
/* START DOCUMENT STRUCTURE, DEFAULT THEN RESPOSIVE */
/* START DOCUMENT STRUCTURE, DEFAULT THEN RESPOSIVE */

/* Structure index file

#mainwrapper-index				width 768 on wide
	#style-gadget				out of flow, float right
	#top						always at top
	#maincontent-index
		#container-index		default position absolute - 1st positioned ancestor
			#image-div			on left at 768 and above - position absolute
			#article			on right   768 and above - position absolute
				#announce
				#bottom-links
		*/

/* Structure System files	- OLD, MUST REFORMAT

#mainwrapper				width 768 on wide
	#style-gadget			out of flow, float right
	#top
	##maincontent
		#container				default position absolute - 1st positioned ancestor
			#menu-panel			default position absolute - on left at 768 and above
				menu include file
					logo
					menu 		combined left/top
			#article			default position absolute - on right   768 and above

					article

	#announce		< there is no announce


START CURRENT STRUCTURE, BEGIN WITH ALBIGEN PAPERS - COPIED VERBATUMFRON 2022.CSS

body + class
	#mainwrapperr
		#container
			#menu-panel
				<- menu include file, has #left-menu-container ->
			#main-content				< position: absolute. 1st positioned ancestor
				#main-content-relative
					div.progress-header
						div.progress-container
							div.progress-bar
					#article
						article
							#announce
								header <- title include file ->
									

 1

If top, right, bottom, or left properties are NOT defined on a position: absolute
element, the element will be positioned according to it's location in the HTML.

So the position: absolute element cares about it's preceding siblings in that it will
use the preceding siblings to determine it's position in the layout.

	*/

/* body width is not set */
body {}

#mainwrapper {
	width: 100%;
	max-width: 768px;
	/* static is the default */
	position: static;
	/* the marnins center the page, must have */
	margin: 0 auto;
	border: 0px solid orange;
}


/* first positioned ancestor - element,
i.e., first positioned ancestor                  Positioned relative in 2022.CSS must check
of #image-div and #text */
#container {
	/* has no dimensions, just "absolute" positioning */
	position: absolute;
	/* no need to set top = 0 */
	/* do not set left = 0 or it will collapse to left edge */
}


/* position is within first positioned ancestor */
#menu-panel {
	width: 220px;
	/* 768 minus 220 menu panel = 548 space available on right side */
	position: absolute;
	/* positioning allows for #text to appear beside it.
	must set left. No need to set top, handled by document flow
	Check this, in 2022.CSS it is 
	top: 0; */
	left: 0px;
	margin-top: 4px;
	border: 0px solid lightgreen;
}

/* top menu */
#fixed-header-small-screen {
	display: none;
}

/* lots of notes here in 2022.CSS, see there */
/* WAS #left-menu-container { */
#menu-container {
	display: block;
	/* gives 10px safety on right. but see padding below, reduces it by 10px */
	width: 220px;
	/* MUST be fixed, or it will scroll with page */
	position: fixed;
	/*
	fixed;      is positioned relative to the viewport
	absolute;   is positioned relative to the nearest positioned ancestor (instead of relative to viewport)
	https://www.w3schools.com/css/css_positioning.asp
	*/
	top: 10px;
	/* note, #menu-site has top margin of 20px; */
	/* MUST have bottom = 0 or mebnu will not scroll */
	bottom: 0;
	font-size: 16px;
	overflow-y: scroll;
	overflow-x: hidden;
	/* This prevents IE9 scrollbar from obscuring the right edge of the menu */
	padding-right: 0px;
}




li.menu-image {
	width: 190px;
}

#menu-scroll {
	margin-top: 50px;
	font-size: 80%;
}

#menu-scroll a {
	width: auto;
	margin-left: 0px;
	padding: 3px 8px 3px 8px;
}

/* end of menu */
/* end of menu */
/* end of menu */


/* copied verbatum from 2022.CSS */
/* nearest positioned ancestor of #main-content is #container. See above */
#main-content {
	/* 768 minus 220 menu panel = 548 space available on right side */
	/* Do not set width; 
	WAS  width:530px;
	it does not constrain anything because position is absolute;
	/* must be Absolute because Left is positioned */
	position: absolute;
	top: 0;
	left: 221px;
	border: 0px solid orange;
	/* test - does nothing 
	width: 530px; 
	max-width: 100%;*/
	max-width: 530px;
}

/* see notes in 2022.CSS */
#main-content-relative {
	margin: 0;
	position: relative;
	padding-top: 0;
	/* padding-left pushes everyything to the right, width stays the same */
	padding-left: 0px;
	/* padding-right affects position of to-top button */
	padding-right: 0px;
	border: 0px solid green;
	border-bottom: 200px solid transparent;
}



/* #ARTICLE CONTAINS ARTICLE
	ARTICLE CONTAINS ANNOUNCE, NEXT-PREVIOUS AND "P" ALL SEME LEVEL
	TRY ADDING RIGHT PADDING TO #ARTICLE */


#article,
article,
#announce {
	width: 530px;
	/* at first breakpoint expands to 600px */
}

/* this does nothing 
#article {
	padding-right: 12px;
}
*/

/* this works. Try 8px then check for Edge screen sizes */
article {
	padding-right: 8px;
}

#announce {
	margin: 20px 0 0 0;
	border: 0px solid orange;
}

/* This is in _the-header-include.htm */
/******* start header-include-file.htm ******/
/******* start header-include-file.htm ******/
#style-gadget {
	text-align: right;
	margin: 0px 20px 0 0;
	font-size: 70%;
	border: 0px solid blue;
}

/* not necessary
@media only screen and (max-width:500px) {
    #style-gadget {
        margin-top: 20px;

    }
}
*/

/* too close to edge at 768px -- was 15px, default was 0, so increasing it here
DOES NOT WORK ON ALBIGEN
@media only screen and (min-width:768px) {
    #style-gadget {
        margin-right: 40px;
    }
}
 */


#style-gadget #theme-checkbox-label {
	/* in 2022.CSS was 
	display: inline-block;, test this */
	display: block;
	vertical-align: top;
}

/* new July 30, 2022 */

p.logo {
	/* WA Sfont-weight: bold;
	font-size: 90%; Changed back to old May 31, 2022 */
	font-weight: normal;
	font-size: 90%;
	margin-top: 0;
}





#book-cover-article {
	display: none;
}


/* what are these?  
#top div.up-a-level {
	float: left;
	font-size: 16px;
}

body.books #top {
	margin-top: 10px;
	height: 50px;
}

#logo-span {
	display: inline-block;
	font-size: 20px;
	margin-left: 10px;
}
*/






/* this exists in "SYSTEM", NOT IN "BOOKS" */
#horizontal-menu-div {
	width: 600px;
	margin: 0 auto;
	height: 50px;
	border: 0px solid blue;
}

#horizontal-menu-list {
	padding-left: 0;
	width: 100%;
	border: 0px solid green;
	list-style: none;
	margin: 0 auto;
}

#horizontal-menu-list li {
	display: inline-block;
	font-size: 14px;
	width: 120px;
	vertical-align: top;
}

#horizontal-menu-list #contact-link {
	width: auto;
	float: right;
}

/* make header match width dimensions of main-content, which follows */
/* This is the TOP, NOT the left menu */
#insert-header {
	padding-left: 15px;
	padding-right: 15px;
	border: 0px solid green;
	/* NO, cannot do this
	xposition: absolute; */
}

/******* end header-include-file.htm ******/
/******* end header-include-file.htm ******/

/* #test in index.htm becomes #article here */
#article {
	/* doesn't need to be absolute
	must NOT be absolute with Left of 210 
	position: absolute; */
	/* at this point the #image-div is 300px wide
	left: 0px;  */
	/* width: 100%; */
	/* text narrows automatically  NOT NEEDED,
	max-width: calc(100% - 230px);  */
	margin-top: 0px;
	margin-left: 0px;
	border: 0px solid yellow;
}


}

#article header {
	text-align: center;
}

/* this is cover image, show in left menu on wide screens and
 in a right-image-div in small screens */
#article #book-cover {
	display: none;
}


/* END DEFAULT/WIDE SCREEN */
/* End Default (Wide-Screen) Positioning and Widths  */
/* End Default (Wide-Screen) Positioning and Widths  */

/* Start responsive positioning and display */
/* Start responsive positioning and display */
/* MEDIA QUERIES */

/* HUGE amount of notes in 2022.CSS */

/* First breakpoint, left menu goes away */
@media only screen and (max-width:767px) {

	#mainwrapper,
	#container,
	/* NO, see below. #main-content must be relative, 
	not static, in order to set top  */
	#main-content,
	#main-content-relative,
	#article,
	article,
	#announce {
		position: static;
		width: 100%;
		/* memo only, is default */
		max-width: 600px;
		/* to test. Width is 530px in 2022.CSS for first breakpoint 767px; */
	}

	/* on small screen #menu-panel expands from 220px to 100% with maximim
	#nav is the container for the menu include file */
	#menu-panel,
	#nav {
		position: relative;
		width: 100%;
		max-width: 600px;
	}

	/* #fixed-header-small-screen is swapped with #left-menu-container */
	/* WAS #left-menu-container { */
	#menu-container {
		display: none;
	}



	#main-content {
		position: relative;
		top: 60px;
		left: 0;
	}

	/* TEMP TESTING ONLY FOR HEIGHT, THEN DELETE */



	/* is this necessary? no longer exists in Books, check System */
	#top {}

	/* Set width at 100% (same as article) so article doesn't show through on the right when scrolled
			Color must be set or it will also be transparent */
	/* this is inside #menu-panel */
	#fixed-header-small-screen {
		display: block;
		position: fixed;
		/* WAS width: 100%; */
		width: calc(100% - 15px);
		max-width: 600px;
		/* progress-bar height is 5px, NOW 6 PX its container is set at 6px for overlap. << no, is same, check this
		line 3160 of 2022.CSS */
		top: 7px;
		/* must not be defined left so it can
		takes it's position inside elements above it
		left: 0; */
		font-size: 16px;
		border: 0px solid green;
	}


	/* this is ul */
	#menu-site-small-screen {
		padding: 0;
		display: block;
		font-size: 16px;
		margin-top: 3px;
		margin-bottom: 0;
		border: 0px solid yellow;
	}

	/* this is ul */
	#menu-site-small-screen li {
		list-style: none;
		display: inline-block;
		width: auto;
		margin: 0px 15px 4px 2px;
		padding: 5px;
		/* line-height: 1.8em; x 18 = 32.4 */
		line-height: 32px;
		border: 0px solid blue;
	}


	#menu-site-small-screen li:last-child {
		margin-right: 0;
	}

	body.books header.title-include-header {
		margin-top: 20px;
	}

	#book-cover-article {
		display: block;
	}
}

/* TWO-LINE TWO LINE TOP MENU */
/* adjust as needed depending on height of #fixed-header-small-screen */
@media only screen and (max-device-width: 480px) {

	#main-content {
		top: 100px;
	}

}


/* Second breakpoint, various tweaks, 
	no positions or widths changed Except padding for Edhe */
@media only screen and (max-width:670px) {

	header.title-include-header {
		margin-top: 20px;
	}


	#article {
		/* Adjust as needed for Edge screens */
		padding-left: 8px;
		padding-right: 8px;
	}

	/* these are in System pages, maybe delete */
	#horizontal-menu-div {
		width: calc(100% - 10px);
	}

	#horizontal-menu-list {
		margin-left: 10px;

	}

	#horizontal-menu-list #contact-link {
		margin-right: 30px;
	}

	#horizontal-menu-list li {
		width: 120px;
	}

	/* only in /system/ check if index.htm   */
	#logo-span {
		font-size: 20px;
	}

	/* squish the top menu a little */
	#menu-site-small-screen li {
		margin-right: 5px;
	}
}

/* Third, height of top menu expands */
@media only screen and (max-width:590px) {



	#top {
		/* allow space for style gadget so Albigen.Com is not pushed down */
		margin-top: 0px;
	}

	#horizontal-menu-div,
	#horizontal-menu-list {
		height: 80px;
	}

	#horizontal-menu-list #contact-link {
		width: 240px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}

/* end of "medium and smaller" screens */

/* Third breakpoint */

/* larger body font and menu line-height for mobile menus.
	iPhone 4 breakpoint is 480 px
	iPhone 5 width of 320 is 640 px */
/* using max-device-width not max-width here */
@media only screen and (max-device-width: 500px) {

	body {
		font-size: 19px;
	}
}



/* try to get more on old Iphones reducing the font size from 18px to 17px */
/* Pixl 2 = 411 ; Iphone X = 375px; Nexus 5 = 360 ;  */
/* Iphone 4 = 320px */
@media only screen and (max-width: 320px) {

	/* can't remember if other phones are affected */
	article {
		font-size: 17px;
	}
}



/* START PROGRESS BAR AND TOTOP BUTTON */
/* START PROGRESS BAR AND TOTOP BUTTON */
/* START PROGRESS BAR AND TOTOP BUTTON */

/* Top progress bar initiated Nov 17, 2019 */
/* How To Create a Scroll Indicator
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
*/

/* Implemented Nov 17, 2019
   needs 3 components: Divs, Script and this CSS */
/* For wide screens default: width is 530px */
.progress-header {
	position: fixed;
	top: 0;
	/* note: fixed elements don't contribute height to the document  */
	height: 7px;
	z-index: 100;
	width: 525px;
	/* NOT HERE, width: calc(100% - 20px);   */
}

@media only screen and (max-width:767px) {
	.progress-header {
		/* if you don't set the left edge, bar will start at left edge of
		#main-content or #main-content-relative, don't know which.
		Here bar spans entire viewport width, (#mainwrapper?) not the document (article) width */
		left: 10px;
		width: calc(100% - 20px);
	}
}

/* Progress bar height will affect fixed menu positioning */

/* The progress container */
.progress-container {
	width: 100%;
	height: 7px;
	z-index: 101;
	/* backgrounnd cannot be "inherit" or it's see-through
	background is defined at top along with html, body, etc. */
}

/* The progress bar (scroll indicator) */
/* Width is increased by the script */
.progress-bar {
	height: 6px;
	background: #4a5;
	width: 0%;
	z-index: 102;
}

/* to-top button:
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
*/
/* Since large screen does not have top menu
only show on large screens, in media query below */
/* default is to hide. Default on large screen is hide, but shown by script */
#toTopButton {
	display: none;
}


#toTopButton a,
#toTopButton a:active {
	outline: none !important;
}

/* This is MIN-WIDTH not MAX-WIDTH */
@media only screen and (min-width:768px) {
	#toTopButton {
		display: none;
		/* Hidden by default, appears after scroll, shown by script */
		position: sticky;
		/* Fixed/sticky position */
		bottom: 20px;
		/* Place the button at the bottom of the page */
		left: 100%;
		/* Place the button 30px from the right < no, put on right edge */
		z-index: 99;
		/* Make sure it does not overlap */
		border: none;
		/* Remove borders */
		outline: none;
		/* Remove outline */
		/* background:#;  Set a background color << is set at top */
		color: #0000ff;
		/* Text color */
		cursor: pointer;
		/* Add a mouse pointer on hover */
		padding: 14px;
		/* Some padding */
		border-radius: 5px;
		/* Rounded corners */
		font-size: 17px;
		/* Increase font size */
		border: 0px solid #00f;
		/* pick a color to match */
	}

	#toTopButton:hover {
		background: #fcfff0;
		/* DEFAULT, WILL BE OVERRIDDEN IN PROJECT css */
		/* use page color instead of gray */
		text-decoration: underline;
	}
}

/* the button is going to be within #main-content-relative,
	but if page is wide, put it in the right margin */
@media only screen and (min-width:900px) {
	#toTopButton {
		margin-right: -50px;
	}
}

/* END PROGRESS BAR AND TOTOP BUTTON */
/* END PROGRESS BAR AND TOTOP BUTTON */
/* END PROGRESS BAR AND TOTOP BUTTON */







/* END */