/*

	2025-04-05. The W3C CSS Validation Service, https://jigsaw.w3.org/css-validator/#validate_by_input, found a few typos. Fixed.
	
	Fun thing I learned (from Devin Rhode, https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution, seems to be other useful info on that page):

		You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:

		var root = document.documentElement;

		document.addEventListener('resize', () => {
		  root.style.setProperty('--screen-x', window.screenX)
		  root.style.setProperty('--screen-y', window.screenY)
		})

	If this works, it could simplify many things for me.

	Most blockquote rules are in blockquote.css.
	Most table rules, and all table.display_data rules, are in display_table.css.
	
	Notepad++ version 6.8.6. sometimes had difficulties formatting the text after 'img:-moz-broken', currently around line 577. (I am currently using Notepad++ version 8.7.1.) If you think that the automatic keyword highlighting is messed up, try closing this file and re-opening it, which will force Notepad++ to redisplay the non-standard CSS formatting.

	On my Linux system, I am editing this code in notepadqq, which seems to do a better job displaying CSS files.
	
	This stylesheet uses some techniques I recently learned about. I didn't know about them when I was coding CSS at SRI in 2021.
	
		calc() -- 'calculate' a length by mixing different units, such as '%' and 'em'. My 'responsive design' is vastly improved now that I have this.
		rem -- Specify a length in relation to the global base font size, not to the size of surrounding text. 'rem' is almost always better than 'em', it turns out. 'em' is only the better choice when you are sizing something inside of a block of text that it wildly outsized, like inside an h1 heading. Update: I'm now getting a little happy with 'rem', and some of my rems should actually be ems.
		CSS variables (constants) -- Learned about this very recently. I can now set a global value and have all CSS rules reference that value. They are called variables but they are actually constants. And they are global. Apparently their formal name is 'custom property'.
	
		(Mid-2022: I was looking forward to using attr(), which 'Returns the value of an attribute of the selected element', according to https://www.w3schools.com/cssref/css_functions.asp. Unfortunately it is in a draft, and is not officially a part of the CSS specification. No browsers support it except for very limited purposes that don't apply to me.)
	
	Because of these innovations, CSS variables (constants) in particular, I no longer feel the need to arrange rules in the arbitrary and confusing way I did in the past. I will now follow a simpler organization scheme.
	
	I need to go through all of my stylesheets looking for ':not()', it turns out I may have been using that construct incorrectly. I fixed one in this file at around line 476,
*/


/* Define all site-wide global variables (constants). */
:root {
	--color-alert:             red;		       /* Border of blockquote.error_message. */
	--color-back-burner:       lightgray;      /* I'm not married to it. */
	--color-bcvzs:            #0000001a;       /* For blockquote.code_view zebra striping even rows. */
	--color-bg-Wikipedia:     #F9F9F9;         /* Official Wikipedia background color. */
	--color-bg-display-data:   midnightblue;
		/* Background color of thead and tfoot sections of table.display_data. I'm not married to it. */
	--color-bg-tinge:          ghostwhite;     /* I really like this faint tint. */
	--color-border-Wikipedia: #0645AD;         /* This color is unique to the Wikipedia border. */
	--color-border-tinge:      darkblue;       /* table.display_data thead and tfoot border color. I am not married to it. */
	--color-diagnostic:        lightyellow;    /* I don't think I am currently using this. */
	--color-highlighter:       yellow;         /* highlighter pen */

/* The following --color-link... family of CSS constants are 'official' link colors, from https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints, 'guidelines for expected default rendering behavior'. */
	--color-link-active:      #FF0000;
	--color-link-hover:       #FF0000;        /* I am no longer certain that this should be red. */
	--color-link-unvisited:   #0000EE;
	--color-link-visited:     #551A8B;
	--color-background:        white;         /* Normal background color of all pages. */
	--color-text-default:      black;         /* Normal text color everywhere. */
	--color-text-fainter:      darkslategray;
		/* Normal text with a lower opacity over a light background. I don't think I am using this anywhere. */
	--color-warning:           pink;          /* Background color of blockquote.error_message. */
	--color-zebra-even:        gainsboro;     /* This is the color of the 'even' tbody stripes of .display_data tables. */

	--font-base-size-family:   14pt Times, serif;   /* Sets both size and family. */
	--font-family-monospace:   Consolas, monospace;
		/* This is my 'normal' code font, for everywhere except where I use --font-head-code, see below. */
	--font-family-sans-serif:  sans-serif;
		/* All hx headers and table column theads, as well as #THS_page_head, #THS_page_foot. This is also the Wikipedia font. */
	--font-head-code:          Courier, monospace;  /* This font is for <code> used in headers: both hx and table theads. */

	--img-height-fudge:        1.5;   /* Used in sidebar of display_table_docs sub-pages (Still?) */
	--login-logout-button-y:   calc(var(--teeny-tiny) + 2px); /* from top of page to login/logout button */
		/* CSS validation error. According to https://developer.mozilla.org/en-US/docs/Web/CSS/calc, this usage is legal. */
	--me_me_me_me-bq-size:    10em;   /* The caricature of me used in the blockquote class='me_me_me_me' is shown at this size. */
	--me_me_me_me-li-size:    calc(0.33 * var(--me_me_me_me-bq-size));
		/* Smaller caricature of me for the blockquote that resembles a list item. I've never been happy with this. */

	--page-edge-left:         24px;    /* Absolute units, doesn't change with font size. */
	--page-margin-bottom:      2.5rem; /* Balance the margin-top above h1, the first element on almost all pages. */
	--page-margin-left:        /*var(--page-edge-left);*/ 1rem; /* I keep changing my mind. */
	--page-margin-right:       1rem;
	--page-margin-top:         2rem;
	--scrollwheel-width:      18px;    /* Firefox guess. Can't find documentation on this.  Probably irrelevant. */
	--sidebar-width:         300px;    /* See the .sidebar 'Discussion' comment, currently at line 214. */
	--sidebar-first-picture:  9rem;
		/* Only affects pages in the /display_table_docs/ hierarchy, so maybe this constant doesn't belong here. */

	--tallest-sidebar-image: 500px;
		/* When the tallest sidebar image is scaled to 300px wide, it becomes this many pixels high. I don't think this number is useful here. */
	--teeny-tiny:              3px;  /* So maybe I need to make tiny adjustments. We've all done it. */
	
	--z-index-login-kluge:    -1;    /* Useful in 'mini_mode'. */
	--z-index-hide-it-1:      -1;    /* reserved for navmenu padding, simplest way to hide it */
	--z-index-beneath-0:       0;    /* lowest level, all normal page contents */
	--z-index-in-front-1:      1;    /* one level up, blockquote wideblocks, which need to overlap navmenu. */
	--z-index-in-front-2:      2;    /* two levels up, #THS_page_head and #THS_page_foot, which overlap everything */

	/* There is one additonal constant defined in display_table.css. */
}


/* Rules which affect the geometry of the entire page. I use these rules to coordinate the outermost left- and right-hand padding of the page. Except for the background bars at the top and bottom of every page (but not any element *inside* of the bars), nothing will ever display outside these bounds. */

/* First, set all margin: 0 attributes, for everything, where applicable. */
.sidebar *, #THS_page_head p:first-child, #THS_login_area, #THS_page_foot {
	margin:       0;
	/*margin-left: -0.5em;*/
}

#THS_page_head {
	padding-bottom: var(--teeny-tiny);
}

/* Assure that the last bit of text will scroll up above the page footer. */
#THS_page_body {
	margin-bottom: var(--page-margin-bottom);
}

/* Rules to hide the overflow of picture_strip() begin here. */
html {
    /* min-height: 100vh; */
	/* Make the entire page at least as tall as the viewport, but always inside the THS_page_head and THS_page_foot top and bottom margins. */
    position: relative; /* For this to work, the html element needs to be a container. */
}

/* This rule affects all body elements of all pages, possibly excepting display_table.php and image_viewer.php. */
body {
    /* height: 100%; */ /* force the BODY element to match the height of the HTML element. Not needed. */
	margin-right: var(--page-margin-right);
}

/* This first set of rules affect the geometry of the entire web page. In this section, rules which refer to 'sidebar' are used for determining the location of the sidebar on the page, not to format the contents of the sidebar. */
#THS_page_head, #THS_login_area {
	padding-top: var(--teeny-tiny);
	position:    fixed;
	right:       6px;
	top:         3px;
	z-index:     var(--z-index-in-front-2);
}

#THS_page_head {
	height:         1.4rem;
	left:           0;
	padding-left:   var(--page-edge-left);
	padding-bottom: var(--teeny-tiny);
	top:            0;
	width:        100%;
	z-index:        var(--z-index-in-front-2); /* In front of all other elements. */
}

/* This rule positions the page_hierarchy display at the upper left corner of the screen. Every page has one of these. The one on image_viewer.php is unique, in its own stylesheet. Update: I don't think the last sentence is still true. */
#THS_page_head #page_hierarchy_display {
	left:     -31px;
	position:   absolute;
	top:        5px;
	z-index:    var(--z-index-in-front-2);
}

/* The next two rules style a group of unordered list items into the line of links that I want. Deprecated. */
#THS_page_head #page_hierarchy_display #page_nav_options {
	display:         ruby;
	list-style-type: none;
	white-space:     nowrap;
}

#THS_page_head #page_hierarchy_display #page_nav_options li {
	padding-right: 1em;
}

#THS_login_area {
	line-height: 0;
	height:      0;
	padding-top: var(--teeny-tiny);  /* It's so nice we're doing this twice. Yeah. */
	/* position:    absolute; */
	top:         2px;
	right:       10px;
	text-align:  right;
	width:      36em;   /* Wide enough to contain the 'login' fields. We set this to cover everything when the narrower 'logout' prompt is displayed. Turns out I need it. */
	z-index:     var(--z-index-in-front-2);
}

/* The purpose of this rule is to align the top of #THS_page_body, which is always an h1, with the top of the navmenu. I don't want #THS_page_body to get out of the regular layout order, so I am not giving it a position attribute. The .sidebar will always (?) be positioned in relation to #THS_page_body. This rule will be overriden on display_table.php, possibly other pages (if there are any) dominated by a single giant table.*/
#THS_page_body {
	/* margin-left: calc(var(--page-edge-left) + var(--sidebar-width) + var(--page-margin-left)); */
	margin-left: calc(var(--page-edge-left) + var(--sidebar-width));
	padding-top: calc(var(--page-margin-top) + var(--teeny-tiny));
}

/* This rule affects the very first element in a #THS_page_body, if applicable. */
#THS_page_body p#local_page_banner.error_message {
	/*border:   none;*/
	margin:  -0.9rem 0 -0.25rem 0;
	padding:  0.25em;
	width:   99%
}

/*body#image_viewer #THS_page_body {
	padding-top: 1rem;
}*/

/* image_viewer.php has its own stylesheet. */
/*body#image_viewer #THS_page_body {
	padding-top: 1rem;
}*/

/* This rule forces the page footer to stay stuck to the bottom of the page. */
#THS_page_foot {
	bottom:   1em;
	position: fixed;
	/*position: relative; Must be 'positioned element' in order for z-index to be effective. */
	width: 98%;
}

#THS_page_foot p {
	margin-bottom:  0;
	margin-top:     0;
	padding-bottom: 4px;
	padding-top:    4px;
}

/* Discussion about the size of --sidebar-width.
So I have a 'sidebar' column running down the left edge of every page (with some exceptions). Five things live in this column.
	1. on virtually every page: navigation, coded by navmenu.php, which is include()d by page_foot.php
	2. on virtually every page: a nice picture from the database, selected by function pick_a_picture()
	3. on image_viewer.php only: metadata about the current picture
	4. on /display_table_docs/ pages: instead of a pick_a_picture(), the column is used for hand-selected pictures that accompany the text
	5. on phpinfo.php only, a vertical picture_strip() that displays as many pictures as possible (currently limited to three times the number of 'square' pictures, because of reasons)
sidebar size limitations
	- The sidebar column needs to be wide enough to accommodate the phrase 'PEGASYS Online Video Library', set in the .smallest font. For all practical purposes, this is 200 pixels, equivalent to 16em at current font sizes. I could imagine the sidebar column getting narrower, but the layout will start to get cramped and ugly.
	- On the other hand, the sidebar column cannot get *too* wide. I don't want to stretch pictures in the sidebar (looks ugly), so I want to hold the width down to no more than 600 pixels. Only 21 pictures in my library are wider than 600 pixels, and that includes.10 album covers. I would have to go back into Photoshop and re-export every 600-pixel-width picture at a larger size in order to keep using it as a pick_a_picture(). There are potentially dozens of such pictures.
Another issue. This size, 600 pixels, is actually defined in two places: once in this document, as a CSS variable (constant), and once as a define()d PHP constant, in page_head.php. I will deal with this when I get around to it, adding code in page_head.php that will define() the constant and then use the <style> element to import it into the style cascade at runtime. This will solve some problems. In the meantime, make sure that these numbers are always the same. What happens if these two values are not the same? I don't know, but I assume it could distort the display in various ways.
There is so much .sidebar code, maybe I should consider moving it all to its own stylesheet. Maybe call it sidebar.css? */

/* Attributes of all sidebars. Sidebar images get their own rule. */
.sidebar {
	left:     var(--page-edge-left);
	position: absolute;
	/*width:    var(--sidebar-width);*/
	width:   16em; /* Need to accommodate 'PEGASYS Online Video Library' menu item. */
	z-index:  var(--z-index-beneath-0); /* The sidebar column needs to slide underneath. */
}

/* First sidebar on a page: the navigation menu. */
.sidebar.navmenu {
	/*background-color: var(--color-background);*/
	top: 2.6rem; /* The top edge of the first item in .sidebar.navmenu aligns with the of captial letters in the page's first h1 header. */
	left: 2px; /* Illegally smol, almost. */
	margin-bottom: 1em;
		/* Add space between navmenu and pick_a_picture()/picture_strip(), if applicable. */
	position: fixed; /* Experiment. */
	/*z-index: var(--z-index-hide-it-1);*/ /* Body text now scrolls over navmenu padded background. */
}

/* All navmenu text is in the form of li elements inside ul.index. Other div classes may not be necessary.
/* Update: I decided this rule is useful outside of the sidebar. */
body #THS_page_body nav ul li a:hover,
body #THS_page_body nav.sidebar.navmenu ul.closer.index.navmenu.smallest li a:hover,
nav.sidebar.navmenu.table_columns_menu ul.closer li a:hover {
	background-color: var(--color-text-default);
	color:            var(--color-background);
}

/*.sidebar*/.navmenu ul.index, ul.index.navmenu {
	list-style-type: none;
	margin-top:      0;      /* This has to be zero. Use other CSS to position the top of the navmenu. */
}

nav.sidebar.navmenu .THS_img_element img {
	margin-left: calc(var(--teeny-tiny) * 3);
	margin-top:  0.5rem;
	width:       var(--sidebar-width);
}

nav.sidebar.navmenu .THS_img_element .caption {
	margin-top: -1rem;
	margin-left: 1em;
	width:       var(--sidebar-width);
}

/* I made the navmenu and pick_a_picture() fixed, and I needed to tweek these attributes to make additional sidebar images scroll over cleanly. */
.sidebar.picture_strip .THS_img_element .caption {
	background-color: white;
	width:            calc(var(--sidebar-width) + 2px);
}

/*.sidebar.navmenu ul.index li {
	margin-left: 0;
}

/* On a normal navmenu, shift all plain-text links to the right...  (The units need to be in rems, for consistency.)*/
/*div* /.sidebar.navmenu ul.index li {
	margin-left: 1rem;
}

/* ...but, shift all bold-text links to the left. */
/*div* /.sidebar.navmenu ul.index li b {
	margin-left: -2rem;
}

/* A whole bunch of stuff, starting here, is commented out. */

/* The next set of four rules are my oh-so-clever technique of getting the navmenu formatted the way I want.
Update: This method is stupid. * /
.sidebar.navmenu ul.index li a[href*='_index.php'] {
	font-weight: bold;
}

/* This whole :before system of indending file names inside directories (which isn't actually relevant) is a mess. * /
.sidebar.navmenu ul.index li:not(.directory) a:before {
	content: '\00a0\00a0';
}

/* This rule works, but the following rule, with the :before, does not work using this selector. I don't know why.* /
.sidebar.navmenu ul.index li :is(a[href*='image_browser.php'][href*='image_viewer.php'])  {
	font-weight: normal;
}

/* This rule works. If I ever make any pages whose file names begin with 'image_', but which are not in an 'x_index.php' directory, I will need to change this rule. * /
.sidebar.navmenu ul.index li a[href*='image_']:before,
.sidebar.navmenu ul.index li a[href*='empty']:before,
.sidebar.navmenu ul.index li a[href*='error']:before,
.sidebar.navmenu ul.index li a[href*='videos']:before   {
	content: none;
}

/* Set the correct vertical position for the first sidebar picture to appear on a display_table_docs sub-directory page. It's always inside a keep_together element. * /
.keep_together .sidebar.second_page {
	left:     calc(var(--page-edge-left) - 4px); /* Lines up with the navmenu. * /
	position: absolute;
	top:      24.5rem;
}

/* The next two rules will line up the top of a picture_strip column. We assume that each image in the strip is wrapped in a paragraph element. */
/* This first rule is for all pages which have sidebars other than the display_table_docs sub-pages. The first image appears below the navigation menu. This position will need to be adjusted when the number of lines in the navigation menu changes.
Update: Now that I count the number of lines in the various navigation menus, the 'top' attribute is no longer useful except as a default.
The page phpinfo.php is unique, so styling for that page goes in it's own stylesheet. */
.picture_strip {
	/* left:     calc(var(--page-edge-left) - 1rem); */ /* Lines up with the navmenu. */
	left:     calc(-1 * var(--teeny-tiny)); /* kluge to pan picture slightly left to viewport its entire width */
	position: absolute;
	top:      var(--sidebar-first-picture);
	width:    var(--sidebar-width);
}

/* The next rule is to position an additional series of .sidebar pictures.  I want to just move the pictures over to the left-hand column, from wherever we happen to be vertically on the page.
This rule is no longer used. * /
/*.picture_strip.afterparty {
	top:  inherit;
	left: var(--page-edge-left);
}*/

/* This rule is overridden on phpinfo.php, which is the only page that displays an actual, multi-image, picture_strip(). * /
.picture_strip p {
}*/

/* Keep this rule. It shrinks the picture_strip() pictures down to size. */
.picture_strip img {
/*	margin-left: -3px; /* Align with navmenu items. * /
	margin-bottom: -1rem; */
	width:  var(--sidebar-width);
}

/* End of long commented-out 'sidebar' section. */


/* There are additional caption rules in the display_table_docs.css and the image_viewer.css stylesheets. */

/* The next class overrides the width of any blockquote or table that would normally be constrained by the width of #THS_page_body minus .sidebar. Most other blockquote styling is defined in the blockquote.css stylesheet, and most table styling is defined in the display_table.css stylesheet.
If UN_MODE for the page is TRUE (indicated by an extra class inserted into to body tag) this rule has no effect.
There are two selectors here because the wideblock class can go inside a blockquote tag, or it can go in a div which contains the blockquote.
As of 2025-04-08, everything that applies to wide blockquotes now applies to wide tables, as well. Wideblock tables are now a thing. But it turns out that they look lame unless they are wide enough to stretch across the full width of the browser window. They 'grow from the right', which looks okay. I added 'div' to the :is() for extra generality. */
body:not(.UN_MODE) :is(blockquote, table).wideblock,
body:not(.UN_MODE) div.wideblock :is(blockquote, table) {
	background-color: var(--color-background); /* Overrides .wideblock rule in blockquote.css. */
		/* I need to make the background opaque to hide elements underneath, if there are any. */
	margin-left:   calc(var(--sidebar-width) * -1
				 - var(--page-edge-left) + calc(var(--teeny-tiny) * 2));
		/* This attribute is a monster, but it makes sense. I want the wide blockquote or table to have equal margins on both the left and right edges of the browser tab. */
	z-index: var(--z-index-in-front-1); /* In front of any sidebar elements but beneath #THS_page_head and #THS_page_foot. */
}

#THS_page_body blockquote.error_message.wideblock {
	background-color: var(--color-warning); /* Undoes the issue caused by previous rule. */
}

/* float is an attribute I have trouble with, so I should write a meaningful comment here. */
body:not(.UN_MODE) :is(table.wideblock, div.wideblock table) {
	float: right;
}

/* This rule probably belongs in display_table.php, except that it only applies outside that page. It's a good compromise for my illustration purposes on style_demo.php. */
html body:not(.UN_MODE) :is(table.wideblock, div.wideblock table)
td:is(.alt_title, .composer, .filename, .part_of, .performer, .title) {
	white-space: nowrap;
}

/* I don't understand why this rule doesn't do anything. I have to put the style='clear:both' into the markup. */
body:not(.UN_MODE) :is(table.wideblock, div.wideblock table) + p {
	clear: both;
}

/* Apply this oddball rule to any row of images to force them all to the same size. Currently used only on display_table_docs/intro.php. */
.content_distribute_width img {
	width: 100%;
}

/* This rule affects the first h1 inside any element. It assumes that the first element in every #THS_page_body (and most blockquotes) is an h1. */
h1:first-of-type {
	margin-top: 0;
}

/* Most pages can run to any length, and they have a #THS_page_foot placed at the bottom. */
#THS_page_foot {
	margin-left:    calc(-1 * var(--page-margin-left));
	margin-bottom: -1em;
	padding-left:   var(--page-edge-left);     /* Where does that fudge factor 1.4 come from? */
	width:          calc(100% - 0.33rem);      /* I don't know why this needs to be so specific. */
	z-index:        var(--z-index-in-front-2); /* In front of all other elements. */
}

/* The number of pictures produced by picture_strip() is reported in this area. For 'admin' users only. Update: This rule is no longer used. I wrote a second rule to apply to 'limited length' pages, which is now commented out. Update: This is all deprecated. */
#picture_strip_reporting_area {
	position:   fixed;
	right:      calc(var(--teeny-tiny) - 1px);
	text-align: right;
	top:        calc(2 * var(--teeny-tiny));
	z-index:    var(--z-index-in-front-1);
}

/* This rule determines where #THS_page_foot is placed on specific pages that have limited lengths. That is to say, the total number of lines of text in #THS_page_body will never exceed the number of navigation menu items for admin users. On these pages, the page footer is absolutely positioned at the bottom of the browser window. For all others, it is drawn at the bottom of the whole page, after all other content. This element cannot be position: absolute unless some element that contains it also has a position property set. There is another rule at the bottom of this spreadsheet which refines the paragraph margins inside this element. * /
body:is(#error_403, #error_404, #index-html, #index, #display_table, #display_table_docs, #image_viewer, #login) #THS_page_foot {
	bottom:         0;
	left:           0;
	margin-top:     0;
	margin-bottom:  0;
	padding-bottom: 0;
	position:       fixed;
	width:          calc(100vw - 1rem + 4px); /* I don't know why this needs to be so specific. * /
}*/
/* End of page geometry rules */


/* Font attributes. 'Base font' family and size first, then all fonts by decreasing size. With some exceptions, they are mostly measured in rem. I am trying to keep the number of font sizes down to a minimum. Except for a few that need to match sizes with other elements, none of the hx header elements are explicitly sized. Blockquote font-size attributes are defined here, not in the blockquote.css file. */

/* I created .afterdash for website_documentation.php, but I imagine it will have uses other places.
Blockquote text attributes had been slipping through the cracks, fixed. */
div.THS_list_variation span.afterdash, blockquote :is(ol li, ul li, p),
html, .sidebar .error_message p, code .base_font  {
	font: var(--font-base-size-family); /* Currently 14pt. */
}

/* I want some consistency for .video_title. By default, it is always as significant as an h2 header. This rule is overridden on videos_on_the_cloud.php. Also, maybe I want a little 'charm' icon, like a little TV set, to accompany .video_title when it is a div, display:block. */
h2, .video_title, /*body#videos_on_the_cloud ol#video_menu .video_title */ {
	font-size: 1.5rem; /* Default size for h2, in 'most browsers'. */
}

body#cloud_video_editor .video_title {
	font-size: 1.25rem;
}

/* Display all error messages in larger-than-normal text. */
.error_message {
	font-size: 1.4em;
}

/* .error_message h1 is a special case. */
.error_message :not(h1) {
	line-height: 1.3;
}

p.error_message, p span.error_message {
	font-size: 1.23em;
}

/* There are situations where I want to put slightly smaller, more compact text inside a blockquote. */
#THS_page_body blockquote.smaller h1 {
	font-size: 120%;
}

blockquote.error_message p {
	font-size: 1.15em;;
}

/* code text, in some situations, could be a bit bigger. */
blockquote.smaller code, .smallest code, :is(h1, h2, h3, h4, h5, h6) code {
	font-size:     110%;
	letter-spacing: -1px; /* Picky. */
}

.source code {
	font-size:   102%;
	font-weight: bold;
}

blockquote li code, #page_hierarchy_display, table.display_data tfoot td,
th, .THS_list_variation,  #THS_login_area {
	font-size: 0.9rem;
}

/* There are situations where I want to put slightly smaller, more compact text inside a blockquote. */
blockquote.smaller :is(li, p) {
	font-size: 83%;
}

.sidebar, #THS_page_foot {
	font-size:     0.8rem;
	line-height: 110%;
}

/* About class='img_vwr_col_hdr'. This class is used only on image_viewer.php. It is described in this stylesheet because I want to coordinate it with elements shared by all pages. One rule, about its links inheriting its color, lives in image_viewer.css, however. */

.img_vwr_col_hdr, .sidebar th {
	font-size: calc(var(--sidebar-width) / 17); /* Accommodates maximum amount of text that I can cram into a .sidebar table.display_data thead th. Requires a --sidebar-width of at least 14rem. And I want a line of text on page image_viewer.php to match. */
}

/* Note that there is an HTML <small> tag, and I should consider using it. By default, it shrinks text to 83%, I think.  */
code, label, small, .smaller {
	font-size: 83%; /* Note that shrinking <code> text is not ideal in all situations, but I like it more often than I don't. */
}

p small, p.smaller {
	line-height: 1.2em; /* This has no effect inside span tags. Consider adding a display:inline-block. */
}

/* Finally, rules that deal with the smallest text I use on the website.
1. The first selector affects the entire website, except for text inside display_data tables.
2. The second selector affects only the text inside those tables.
/*
	I am going to some efforts to define the .smallest font, both its font-family and its font-size, in only two style rules and only in this one stylesheet. This assures site-wide consistency.
*/
body#cloud_video_editor blockquote.sidebar * /* special case */,
.caption, p.caption_pic_add, nav, nav.sidebar.navmenu.table_columns_menu,
#picture_strip_reporting_area, .smallest,
blockquote :is(div.source p, p.source), blockquote.smaller p,
table.display_data :is(thead th, tbody td, tfoot) {
	font-size: 10pt; /* I find that it is hard to read text smaller than this. */
}

/* Special case for blockquotes that contain more than one consecutive paragraph of .source p */
blockquote div.source p + p {
	margin-top: -0.5em;
}

/* There is an issue with .smallest. If I want the line-height to shrink with the font size, I have to use display:inline-block. This makes the element a block instead of a span, which puts a line break before and after, yadda yadda. If I don't make it inline-block, I get a normal span, which is what I want whenever the line of smallest text does not wrap to a second line, in which case I don't care about reducing the line-height. So, this compromise. */
:is(.caption, #picture_strip_reporting_area, .smallest, blockquote p.source).block {
	display: inline-block; /* Adds block behavior, but is required to allow line-height of multi-line elements to shrink with font-size. */
}

/* End of 'font-size' attributes. */


/* All other 'font' attributes. */
/* I am particular about hyperlink (anchor text) underlining, so I think it's best to lock it all down here. References to underlining elsewhere should be considered deprecated. */
a, table tbody /* tr td */ p a {
	font-family:     inherit;   /* Otherwise, anchor texts always show in the base font. */
	text-decoration: underline; /* I want to keep underlining except in navmenu items. */
}

/* Special special case: links which appear in code spans inside table cells inside paragraph elements get colors but not underlines.*/
:is(nav, .navmenu, td p) a {
	display:         block;
	text-decoration: none;
	/*width:           calc(var(--sidebar-width) + 2 * var(--teeny-tiny));*/
	width:           var(--sidebar-width);
}

/* textarea is for image_viewer.php and cloud_video_editor.php. */
/* video_title is for videos_on_the_cloud.php and cloud_video_editor.php. I decided I wanted one consistent style. */
/*
	I am going to some efforts to define the .smallest font, both its font-family and its font-size, in only two style rules and only in this one stylesheet. This assures site-wide consistency.
*/
body#cloud_video_editor blockquote.sidebar * /* special case */,
blockquote.smaller p, caption, .caption, p.caption_pic_add, .picture_strip .caption, h1, h2, h3, h4, h5, h6,
.img_vwr_col_hdr, .index strong, nav, #picture_strip_reporting_area,
.sidebar *, .smallest, .source, table th,
table /*.display_data*/ tfoot td, /*table :not(.display_data) tbody td, */ #table_name_positioner, textarea,
.text_Wikipedia, /*text_Wikipedia :is(h5, h6),*/ #THS_login_area, #THS_page_head,
#THS_page_body .THS_list_variation, #THS_page_foot, .video_title {
	font-family: var(--font-family-sans-serif);
}

/* This style rule may be obsolete. */
/*body#display_table*/ table.display_data tfoot td {
	font-family: var(--font-family-sans-serif);
}

/*
blockquote .pretty_query * fixes a problem on useful_queries.php
label is used in cloud_video_editor.php.
*/
a:is(#prev_image_button, #next_image_button), blockquote.code_view, blockquote .pretty_query *, code, label,
.pretty_query, .pretty_query_generic, sup {
	font-family:   var(--font-family-monospace);
	font-weight:   bold;
	word-spacing: -0.15em; /* This attribute needs to be overridden in 'blockquote.code_view div q', which is defined in stylesheet blockquote.css. */
}

/* video_title is for videos_on_the_cloud.php and cloud_video_editor.php. I decided I wanted one consistent style. */
h1, h2, h3, h4, h5, h6, :is(h1, h2, h3, h4, h5, h5) code, .img_vwr_col_hdr, #THS_page_foot p, .video_title {
	font-weight: normal;
}

/* This rule places an overline (border-top) above every h2 that follows either a form, another h2, an ol, a paragraph, or ul. This version works everywhere, but is overridden by the next rule. I added '.sidebar' so that this rule would affect the display_table_docs pages. 'form' is only relevant on videos_on_the_cloud.php. '.appointment_list' is a kluge for one situation, on page index.php. */
:is(div.appointment_list, form, h2, ol, p, .sidebar, ul) + h2 {
	border-top:  var(--teeny-tiny) solid black; /* Same thickness as THS_info table border-bottom. */
	margin-top:  1.5em;
	padding-top: 1em;
}

/* This rule places an overline (border-top) above every h2 that follows either another h2, an ol, a paragraph, or ul. This version works only inside blockquotes. */
blockquote :is(h2, ol, p, ul) + h2 {
	border-top:  2px solid black;
	display:     block; /* I don't understand why I need this. I mean, we're *all* block elements here, aren't we? */
	margin-top:  1.25em;
	padding-top: 1em;
}

/* This variation removes the overline on the first h2 of #THS_page_body, assuming that it follows an h1 and a p. */
#THS_page_body h1 + p + h2 {
	border-color: transparent;
	margin-top:   0;
	padding-top:  0;
}

:is(h1, h2, h3, h4, h5, h5) code {
	font-family: var(--font-head-code); /* I want a different code font that contrasts better against headers. */
}

.source code {
	font-weight: bold;
}

/* Actaul Wikipedia website definitions. */
.text_Wikipedia :is(h1, h2, h3, h4) {
	font-family: 'Linux Libertine', 'Linux Libertine G', 'Georgia', 'Times', serif;
}

/* blockquote.text_Yamaha, mimics typography from the hard copy Yamaha AW16G manual. */
:not(body#display_column) :not(.sidebar) blockquote.text_Yamaha :is(h1, h2, h3, h4, h5, h6, p) {
	font-family: Helvetica, Geneva, Arial, var(--font-family-sans-serif);
}
/* End of non-font-size font attributes. */


/* Color attributes. 'current_page_highlight' is for a display_table_docs sub-page. The rules which style all images which link to the image_viewer page lives in this group of rules. */
/* The first rule inverts colors in a number of places, including the page header and footer, table caption (but not in index_viewer.php, where 'caption' means something unique to that page), thead and tfoot, and virtually all hyperlinks (there are some exceptions--hyperlinks that appear in paragraphs are styled less flamboyantly). The second selector of this rule specifically fixes the highlighting of navmenu index links. Three rules in image_viewer.css override this rule. */
body a:hover, body .sidebar.navmenu ul.index li a:hover,
body table:is(.data_table, .simpletable, .THS_info) :is(caption, th),
#column_name_positioner, #picture_strip_reporting_area, sup.footnote, #THS_login_area form,
#THS_page_body.display_table_docs table.column_list.display_data.sidebar td.current_page_highlight a,
:is(.index, .sidebar) a:hover, #table_name_positioner, table.THS_info th, .sidebar h1,
#THS_page_head, #THS_new_order, #THS_page_foot, #THS_pick_list, .negative {
	background-color: var(--color-text-default);
		/* THIS is where my inability to change the text-decoration-color for image links originally came from. What I needed to do was to override it in my a[href*='.php']:hover rules, starting around line 490. */
	color:            var(--color-background);
}

/* I need the wildcard here so that the background-color will apply to the entire element, includig the ul > blockquote > p element on page style_demo.php. I need both this rule and rule li + blockquote.me_me_me_me_li in the blockquote.css stylesheet, around line 263. */
.back_burner, .back_burner *{
	background-color: var(--color-back-burner);
}

.error_message {
	display:          inline-block; /* This class will always show as a paragraph instead of a span. */
	border:           1px solid var(--color-alert);	
	background-color: var(--color-warning);
	padding:          1em;
}

/* Adjustment for the error_message class applied to span elements. */
p.error_message {
	margin:  0.25em 0;
	padding: 0.75em;
}

.highlighter { 
	background-color: var(--color-highlighter);
}

.quotate:before {
	content: '\0201C';
}

.quotate:after {
	content: '\0201D';
}

/* This rule applies to the single HTML page, DOCUMENT_ROOT/index.html, only. I don't understand why I need this rule.*/
/* body#index-html .sidebar img {
	width: 15rem;
}*/

.sidebar li.smallest {
	color: var(--color-text-fainter);
}

span.error_message {
	border:    none;
	display:   inline;
	padding:   0 0 2px 0;
}

li.error_message {
	border:  none;
	display: list-item;
	padding: 0 0 0 0.25em;
}

/* Many text anchors which are not in paragraphs get some extra oomph. */
:is(.index, /*.sidebar,*/ #THS_page_head, #THS_page_foot) a, #THS_page_body.display_table_docs table.column_list.display_data.sidebar td.current_page_highlight a,
a:is(#prev_image_button, #next_image_button) {
	margin:  -0.1rem -0.25rem -0.1rem -0.25rem;
	padding:  0.1rem  0.25rem  0.1rem  0.25rem;
}

:is(#THS_page_head, #THS_page_foot) a {
	background-color: var(--color-text-default);
	color:            var(--color-background);
}

:is(#THS_page_head, #THS_page_foot) a:hover {
	background-color: var(--color-background);
	color:            var(--color-text-default);
}

/* I need this rule to make 'normal' (non-image, non-navmenu) hyperlinks look normal. */
/*html body*/ /* div#THS_page_body */ /* :is(ol, ul) */ li a:hover, p a:hover {
	background-color: var(--color-background);
	color:            var(--color-link-hover);
}
/* End of color attributes. */


/* below: things that only live in the sidebar column.  Consider moving these to a separate stylesheet. I'm thinking making a navmenu.css stylesheet for this purpose. */
.sidebar {
	margin:  0;
	padding: 0.25rem 0 0.25rem 0;
}

.sidebar .error_message p {
	margin-top: 0.5em;
}

/*html body*/ div#THS_page_body .sidebar.navmenu ul.index li a:hover {
	background-color: /*black*/ var(--color-text_default);
	color:            /*white*/ var(--color-link-hover);
	/*text-decoration: none;*/
}

td.two img, .picture_strip img {
	/*border: 3px solid var(--color-background);*/
}

/* Eliminate some extraneous text from the sidebar column. I don't think I use this anywhere. */
.sidebar .abridgment {
	display: none;
}

/* Maybe combine this and another list-style-type: none rule into one rule. */
body#index ul.index li, :is(nav, .navmenu, .sidebar) ul {
	list-style-type: none;
}

#THS_page_body /*div*/.sidebar ul.index * li {
	margin-top:    0;
	margin-bottom: 0;
}

.sidebar li {
	line-height:   initial;
	margin-bottom: initial;
}

.sidebar p {
	margin-bottom: 2rem;
}

/* Position a thumbnail-sized image in the sidebar, vertically lined up with the next block of text. */
.sidebar.picture_strip /*:not(#big_picture) img*/ {
	background-color: var(--color-background);
	left:     calc(var(--teeny-tiny) * 4);
	position: absolute;
	top:      unset;
	width:    var(--sidebar-width);
	z-index:  var(--z-index-in-front-1);
}

/* Use this class to align a div, placed immediately after an h2, to a specific distance from the top of the page relative to the top of the h2 text or the paragraph that follows, and not to the h2's overline. There are different values of margin-top because I was experimenting. */
.sidebar.picture_strip.h2_align {
	/*margin-top: -2.5em; /* Picture lines up with the top of the h2 text. */
	margin-top:  1em; /* PIcture lines up with the first paragraph following the h2 text. */
}

/* Similar to above, but will align a picture with the top of the table cell that contains the image markup. */
.sidebar.picture_strip.cell_top {
	margin-top: -3em;
}

.sidebar ul {
	margin-left: -1.4rem;
}
/* above: things that only live in the sidebar column */


/* This is where I'm trying to clean things up. */
/* more rules, in order by selectors */
/* a (anchor tag rules) */

/* This next rule took me years to figure out.  I am eliminating the default 'underline highlighting' from pictures which are links to any .php page. */
a[href*='.php']:hover {
	background-color: transparent;
		/* FINALLY SOLVED! Get rid of text-decoration by making it transparent. This exact rule, which is select for any link to a page ending in '.php', is the only rule I have found that works. I don't see how to remove these underlines from all hovered link pictures generally. */
	color: var(--color-link-active); /* This rule only affects text links, not images. */
}

/* Now we style pictures, in the sidebar, which are links to any .php page.*/

/* The next two rules position pictures in the navbar column. */
/* picture_strip() pictures, seen on most pages */
/* Commented out, for now. */
/*div.picture_strip img {
	margin: calc(var(--teeny-tiny) * 4);
}*/

/* pictures shown in the navbar on display_table_docs pages, where they are aligned with the markup (in the #THS_page_body column) that inserts them on the page. This applies to all such images, whether or not they are links. */
/*div.picture_strip*/.sidebar /*a[href*='.php']*/ img {
	/* margin: calc(var(--teeny-tiny) * 7);*/
}

/* The next two rules prevent highlighted picture links from moving around. Works great in picture_strip(), which now only happens on phpinput.php. On all other pages, the hovered thumbnails move around. */

/* When we hover over them, draw a red border around all pictures which are also links.
(Most pictures on this website, excepting blockquote decorations, and #big_picture images on image_viewer.php, are links.) */
/*html body div#THS_page_body*/ a img:hover {
	border: var(--teeny-tiny) solid var(--color-link-hover);
}

/* We don't want the hovered image links to move around, however, so we draw an equal size transparent border around them when they are not hovered. */
/*html body div#THS_page_body*/ a/*[href*='.php']*/ img {
	border-width: var(--teeny-tiny);
	border-style: solid;
	border-color: transparent;
}

/* That's it for the linked elements. */


/* I want <code> to always be non-italic, regardless of context */
code {
	font-style: normal;
}

h2 + table {
	margin-top: 0.75rem;
}

:is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
}

/* So I have a problem with horizontal rules. Namely, there are spurious <hr> tags coded into some pages, and I seem to have a problem deleting them. I guess I'm stupid. So I am eliminating horizontal rules on some pages. I don't know where they are coming from. I can't find them in the code. I have decided to remove all hr elements from my entire website. However, <hr> elements with class='real_rule' are allowed to stay. Yes, this is an incredible kluge.
Update. It appears this problem has been solved. I don't know what I did. * /
hr {
	display: none;
}*/

hr.real_rule {
	display: block;
}

/* hr {
	margin-top: 1.75rem;
}*/

/* This rule shows placeholders for missing imgs, which normally don't show in Firefox. In the case of missing background URLs in blockquotes this rule does nothing--if there is a problem loading one of those image files, Firefox silently displays blank space where the missing images should be. This code is from https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-force-broken-image-icon. We are warned that it is non-standard, it only works in 'gecko-based' browsers, and it should not be used in 'production sites facing the web'. I suppose I could just do an about:config in Firefox and set browser.display.show_image_placeholders to true, but I chose not to do that. I could also write code to only include this rule on the development version, I guess.
There are two possible values for the -moz-force-broken-image-icon attribute:
	1 = The broken image icon is shown even if the image has an alt attribute.
	0 = The image will act as usual and only display the alt attribute.
So this rule draws a red 3px border around the rectangle that would have been occupied by the image. What are the dimensions of this box?
	- For all sidebar images: 294 x 294 pixels. (Because of the 3px border. 300 - 3 - 3 = 294. )
	- For images in the #big_picture area on image_viewer.php, where $largest_width and $largest_height dimensions are determined by monitor size and SIDEBAR_WIDTH_PIXELS.
		= which fit inside the $largest_width x $largest_height dimensions: the image is shown at (original width - 3) x (original height - 3). (Again, the image minus 3 px on each side.)
		= which do not fit inside $largest_width x $largest_height dimensions
			+ 'wide' images (aspect ratio > 1.25): I wrote a specialist rule for this situation, see below.
			+ 'tall' images (aspect ration <= 1.25): Again, specialist rule. It has magic numbers in it because I got tired of messing with it.
Another fun thing. I don't know why, but suddenly alt_texts are showing on broken images. They never showed before, not until about a minute ago. Let's never change any of these rules again.
This styling doesn't do what I want on image_browser.php. */
img:-moz-broken, img.moz_broken {
	-moz-force-broken-image-icon: 1;
	border:     3px solid var(--color-alert);
	box-sizing: border-box;
}

img.moz_broken {
	height: var(--sidebar-width); /* We need something here, and this value is better than nothing. */
}

/* This rule is useful for throwing a line of thumbnails into body text.  A similar rule in image_browser.css overrides this. */
.browser_thumbnails img {
	/* height: /*150px 75px*/6em; /* 150 is 'normal' size, 75 is good for debugging. 6em is good, too. */
	width:  18%; /* On my narrow screen, with a 200px sidebar, this squozes five thumbnails into a single line. */
	margin:   var(--teeny-tiny) calc(var(--teeny-tiny) * 1);
}

.browser_thumbnails .THS_img_element {
  display: inline;
}

.browser_thumbnails .THS_img_element .caption {
  display: none; /* Override function THS_img_element(), which will display a credit_line when I ask it to not display an item_caption. */
}

/* Kluge. */
.browser_thumbnails .THS_img_element br {
  display: none; /* Override function THS_img_element(), which will display a credit_line when I ask it to not display an item_caption. */
}


/* This is the 'specialist' rule for displaying placeholders representing missing 'wide' images. It displays a rectanagle 1384 wide x 553 tall. I don't understand where the width calculated value comes from, but it seems to work. */
#big_picture.wide img:-moz-broken {
	height: calc(1384px / 2.5); /* Currently the widest image in the library is about 2.5 times wider than it is tall. */
	width:  1384px;
}

/* This is the 'specialist' rule for displaying placeholders representing missing 'tall' images. I'm tired. So very, very tired. */
#big_picture.tall img:-moz-broken {
	height: 1097px;
	width:  calc(1097px / 2); /* Tallest image currently has aspect of about 0.5 (twice as tall as wide). */
}

/* On the next rule, ':not(.sidebar)' needs to modify (follow) 'div' in order to have an effect. */
/*html body div#THS_page_body div:not(.sidebar) :is(ol, ul) li {
	line-height:   1.15em;
	margin-bottom: 0.33em;
}*/

/*div:not(.sidebar) /*:is(ol, ul)* / li:first-child {
	/* margin-top: 0.5em; * / /* I don't want this on display_table_docs/ pages. It affects the first line of the first menu cell.* /
}*/

/*#THS_page_body div:not(.sidebar) :not(blockquote) li:last-child {
	margin-bottom: 0.5em;
}*/

/*li/*:not(:last-child)* / + p {
	margin-top: 0.5em; /* I wrote this rule for documentaion.php, it may not work well on other pages. * /
}*/

/* Note that there is now a <nav> tag, useful for indicating HTML content. I now use the tag <nav class='sidebar navmenu'>, where it is the two class identifiers that do all the work. */

/* Looks good for the top levels of most ordered and unordered lists. Works best if any of the list items take up more than one line. */
/*:is(ol, ul) :* /not(.closer) li {
	margin-top: 0.5em; /* Looks good on url_srcer.php, I decided it looks OK on style_demo.php, may mess up layout elsewhere. * /
}*/

.nowrap {
	white-space: nowrap;
}

/* All of the CSS that follows, dealing with leading between li elements, is messed up. */
/* If every list item is just a single line, like for navmenus or lists of other short items, use this instead. This rule and another at line 899 appeared to contradict each other, but I think the problem was caused by another stylesheet, display_table_docs.css. This rule also applies to the first item of a .leadmore list. */
:is(ol.closer, ul.closer) li {
	margin-top:    0 !important; /* Needed. */
	margin-bottom: 0;
}

/*body#pegasys_producers div#THS_page_body*/ :not(nav) :is(ol.closer, ul.closer) li:first-child {
	margin-top: 0.5em;
}

/*html body#pegasys_producers div#THS_page_body*/ :not(nav) ol li.first_child {
	margin-top: 0.5em;
}

/* What the hell, this is useful, too. I think maybe this rule needs more specifiers. */
/*body#pegasys_producers div#THS_page_body*/ :not(nav) :is(ol.leadmore, ul.leadmore) li {
	margin-top: 0.5em;
}

ol.closer p {
	margin: 0;
}

ol ol {
	list-style-type: lower-alpha; /* By default, top level ordered lists (<ol>s) would be numerical, second level will be lowercase alphabetical. This will not be true on all pages, however. */
}

ol ol ol {
	list-style-type: lower-roman; /* Third-level ordered list items. */
}

/* This class will turn any ol or ul into a nice little header. I suppose I could make it look exactly like an h3, for example, but I have not done that. Check out examples on style_demo.php. There are a group of .THS_list_variation rules farther down, also. Oops.*/
/* Update. I now think this style is stupid, and I should just always use h3, or possible h4, instead. */
.THS_list_variation {
	font-weight:    bold;
	/* list-style-type: none; */
	margin-left:   -1rem;
	margin-bottom: -0.5em;
}

/* The next three rules draw extra attention to 'list headers' (which are not lis) which introduce ol and ul elements. */
.THS_list_variation {
	font-weight:   bold;
	margin-top:    1em;
	margin-left:   0.1rem;
	/* margin-bottom: 0.3rem; */
}

/*.THS_list_variation:first-of-type {
	margin-top: 0.3rem;
}*/

/* This rule lays out text into two columns (regular page) or three columns (UN_MODE page). */
.two_column_layout {
	column-width: 30vw; /* Allows two columns in a normal #THS_page_body, three on an UN_MODE page. */
}

/* Same, except for three or four columns. */
.three_column_layout {
	column-width: 22vw; /* Allows three columns in a normal #THS_page_body, four on an UN_MODE page. */
}
ul + p {
	margin-top: -0.5em;
}

/*
div:not(.sidebar) p + :is(ol, ul) li:first-child {
	margin-top: -0.5em;
}

#THS_page_body div:not(.sidebar) :is(ol, ul) :is(ol, ul) :is(ol, ul) li:first-child {
	margin-top: 0em;
}
*/

/* Indent a paragraph. I created this rule for 'before_running_url_srcer.php', and found it useful generally. */
p.indent {
	margin-left: 1em;
}

/* This rule and another at line 855 appeared to contradict each other, but I think the problem was caused by another stylesheet, display_table_docs.css. */
ol:not(.closer) p + li:not(:first-child) {
	margin-top: -0.5em;
}

/* This extremely specific rule
	reduces the leading inside a ul, between a p element and the following li
	renders the p element in the 'header' font
Presently it applies to two pages. */
body:is(#index-html, #studio_mulduzi) #THS_page_body ul p {
	font-family:   var(--font-family-sans-serif);
	margin-bottom: 0.25rem;
}


.pretty_date {
	display: inline-block;
	width:   11em;
}

/* The next set of rule are for my pretty_query() function, which mixes all kinds of markup into SQL queries. */
.pretty_query {
	margin-top: 0.33em;
}

/* I don't know what happened. */
.pretty_query p.UNION_kluge {
	margin-top:    0;
	margin-bottom: 1rem;
}

.pretty_query p {
	margin: 0; /* Keep the lines close together. */
}

/* Parts of the next three rules (they know who they are) should be moved to the font-size section of this stylesheet. */
.pretty_query .tab_stop {
	display:     block;
	margin-top: -1.2em;
	margin-left: 4.75em; /* This is wide enough to fit 'ORDER BY', which appears in many queries. Not wide enough to accommodate 'INSERT INTO', which only happens on two pages, page_head.php and cloud_video_editor.php. Neither page displays a pretty_query(), so this is moot. It needs to be in em units because the width needs to be in proportion to the size of the actual characters in the space. There is a rule in useful_queries.php which overrides this rule. */
}

/*body#before_running_url_srcer .pretty_query .tab_stop {
	margin-left: 6.5em; /* Wide enough to accommodate 'INSERT INTO', on one page. * /
}*/

/*.query_cell .pretty_query {
	font-size: 84%; /* Same size as other <code> text in nearby table cells. * /
}*/

/* This rule prevents any text inside <q></q> elements from showing in the browser. Admin users get a rule in the <head><style> section of page_head.php that undoes this, allowing admins (only) to see such 'hidden' text. Special case: See blockquote.css, around line 96, for an exception, which uses <q> to style comments inside certain blockquotes.
This is not a great solution, beacuse display: none text can be read in the HTML markup, using 'show source'. A better solution would be to (once again) expand the scope of tag_wrap, str_replace()ing out any text wrapped in an 'admins_only'-type tag. There are probably other ways to do this, too. */
q {
	display: none; /* No effect for admin users, see above. */
}

/* Note that <strike> is deprecated, not supported in all browsers. I include it here just so I can insert this comment about it. Use <span class='strikethrough'> instead. */
strike, .strikethrough {
	text-decoration: line-through 0.15em;
}

/* Increase footnote visibility. Not for ordinary superscripts. */
sup.footnote {
	/* font-weight: bold; */
	line-height: 0;
	margin-left: 0.15em;
	padding:     0 0.15em 0 0.15em;
}

/* table rules--for non-display_data tables--those can be found in display_table.css. My goal here is to include the smallest number of rules that will give me what I want for all tables other than .display_table tables. */
table, table thead, table tbody {
	border-collapse: collapse; /* Is it possible that *this* is what prevents tables having rounded corners? *?
/*	display:         table;
	table-layout:    fixed; */
}

/* table.THS_info rules belong here rather than display_table.css or display_table_docs.css */
/* I actually think these rules are a mess. There are too many of them, for one thing. */
table.THS_info {
	border-bottom: var(--teeny-tiny) solid var(--color-text-default); /* Same thickness as the h2 overline. */
	/* margin-bottom: 2rem; */
}

table.THS_info td {
	border-bottom: 1px solid var(--color-text-default);
	padding:       0.25em 0 0.25em 0;
}

table.THS_info td p:first-child {
	margin-top: 0;
}

table.THS_info td p:last-child {
	margin-bottom: 0;
}

table.THS_info td:first-child {
	white-space: nowrap;
	width: 0;
}

/* VIDEO_FILE_LIKES is no longer a constant. Deprecated. */
table.THS_info td.VIDEO_FILE_LIKES .pretty_query {
	margin: 0;
	padding-bottom: 2px; /* What is my problem? Give me a break. */
}

table.THS_info tr:last-child td {
	border:         none;
	padding-bottom: 0.3em; /* Improves THS_info tables */
}

table.THS_info td p {
	/* margin: 0 0 0.5em 0; */
}

table.THS_info td p:last-child {
	/* margin-bottom: 0.5em; */
}

table.THS_info td.center {
	text-align: center;
}

table.THS_info td.nowrap {
	white-space: nowrap;
}

table.THS_info td.numeric {
	padding-right: 0.25em;
	text-align:    right;
}

table.THS_info td table.THS_info.nested_in_cell {
	border-bottom: none;
	/* margin-bottom: 0; */
}

table.THS_info td table.THS_info.nested_in_cell th {
	background-color: initial;
	color:            initial;
	text-align:       center;
}

table:is(.simpletable, .THS_info) th, .img_vwr_col_hdr {
	padding:     0.25em;
	white-space: nowrap;
}

table:is(.simpletable, .THS_info) td {
	padding-left: 0.5em;
	text-align:   left;
}

table:is(.simpletable, .THS_info) td:first-child {
	padding-left: 0;
}

/* My concept for .simpletable is that it has all the features that I would want from my 'simplest' pretty table. */
table.simpletable {
	text-align: center;
	/*width: 100%;*/
}

table.table_illo {
	margin: -1rem 0 0 0; /* top, right, bottom, left */
}

/* Special case for a table.table_illo followed by a paragraph element, reducing the vertical space between them. */
table.table_illo + p {
	margin-top: 0;
}

table.table_illo tbody tr td:first-child {
	padding-right: 0.5rem;
	width:        35%; /* Default. Looks good on page style_demo.php. */
}

table.table_illo li {
	margin: 0.2em 0;
}

/* The next rule should probably be moved up earlier in this stylesheet. On the other hand, maybe not. */
body:is(#error_403, #error_404, #index-html, #index, #display_table, #display_table_docs, #image_viewer, #login, #public_greeting) #THS_page_foot p {
	margin-top:    0;
	margin-bottom: 0;
}

/* Late additions to the party. If I make these blockquotes, I will move them to blockquote.css. Otherwise, I will probably keep them here.
I would like to make a whole family of styles, such as:
	blockquote.PEGASYS.video_title.big - Maybe this could be an enormous blank television screen that I put text inside of.
	blockquote.PEGASYS.video_title - The current p.PEGASYS.video_title could actually be this.
	p.PEGASYS.video_title - Smaller.
	p.PEGASYS.video_title.mini - Smaller still.
And I could make a set of similar styles, just dropping the .PEGASYS specifier, which would be generic television program.
I guess blockquote.PEGASYS.video_title.big would actually be blockquote.video_title.big, without the .PEGASYS.
*/
p/*.generic*/.video_title {
	/*background-image:  url('../style/TV-2025-16x9-no-text.gif');*/
	background-repeat: no-repeat;
	background-size:   8rem;
	margin-top:        0.5rem;
	margin-bottom:     1rem;
	padding-top:       3rem;
	padding-left:      9rem;
	padding-bottom:    2.7rem;
	position:          relative;
}

/*p.PEGASYS.video_title {
	background-image:  url('../style/PEGASYS-iyv-TV16x9-600.gif');
	background-repeat: no-repeat;
	background-size:   8rem;
	margin-top:        0.5rem;
	margin-bottom:     1rem;
	padding-top:       3rem;
	padding-left:      9rem;
	padding-bottom:    2.7rem;
	position:          relative;
}*/

p.generic.video_title {
	background-image: url('../style/TV-2025-16x9-no-text.gif');
}

p.PEGASYS.video_title {
	background-image: url('../style/PEGASYS-iyv-TV16x9-600.gif');
}

p.PEGASYS.video_title.mini {
	background-size: 5rem;
}