/*
	Styles for image_browser.php.
	
	Refer to comment and root: rule at the top of TitusHeights.studio.css. Also see localization.constants.php, which actually sets the value of :root {--sidebar-width:}.
*/

/* There are just two pages where the following variable (constant) and associated rule makes sense. They are image_browser.php and videos_on_the_cloud.php. These are pages where we show the navmenu but not a (full size) pick_a_picture(), so the left margin of #THS_page_body needs to be no wider than enough space to accommodate 'PEGASYS Online Video Library', plus two non-breaking spaces. */

/*:root {--image-browser-left: 13rem} /* Wide enough to accommodate 'PEGASYS Online Video Library', plus two non-breaking spaces. * /

/* The next two rules are unique to this page. * /
#THS_page_body {
  margin-left: var(--image-browser-left);
}*/

form {
	margin-left: 1rem;
}

/* The next rule plays games with allocating horizontal space. The 'width' limit prevents a horizontal scroll bar from showing. 'overflow-x' is wide to allow thumbnails to fill the available width of the window. */
.browser_thumbnails {
	/* border: 1px solid black; */
	left:         calc(var(--teeny-tiny) * -2); /* Unique value for this page only. */
	margin-top:  -2.5rem;
	overflow-x:   clip;
	padding-top: 0;
	padding-left: var(--teeny-tiny); /* Clean up left edge of .pretty_query block. */
	position:     relative;
	width:        unset /* calc(95vw - var(--sidebar-width)) */;
	/* z-index:      var(--z-index-hide-it-1); /* Solves the widget hot spot problem. */
}

/* This rule is useful for throwing a block of thumbnails into any body text.  Overrides a similar rule in TitusHeights.studio.css. */
.browser_thumbnails img {
	height: /*150px 75px*/6em; /* 150 is 'normal' size, 75 is good for debugging. 6em is good, too. */
	margin: /*var(--teeny-tiny)*/ calc(var(--teeny-tiny) * 1);
	width:  unset; /* Side effect of overriding the rule in TitusHeights.studio.css. */
}

.browser_thumbnails table tr td#browser_page_esplain {
	padding-top:    1em;
	vertical-align: bottom;
}


div#report_pix_found p {
	left:     17.5rem;
	position:  relative;
	top:       0.3rem;
}

select#image_category {
	position: relative; /* z-index has no effect on non-positined elements. */
	z-index:  var(--z-index-in-front-1);
	/* Needs to be in front of all other elements in order expose entire widget hot spot. */
}

.THS_img_element {
	display: inline;
}