/*  bonbondemo.css -- 11/2/26 by CC

	Loaded after index.css: what the demo hides, and the one thing it
	moves. The page's HTML is BonBon's, every element of it, so index.js
	finds everything it wires at startup; these rules take out of sight
	what a page in Chrome doesn't have. The chrome's height is measured
	after this loads, so the page starts right under the bar.
	
	11/2/26, evening, Dave: "we need a new user interface approach,
	having it look like a browser is not good, because we are in another
	browser." The bar is the address box, centered like the box on the
	search page, and the stylesheet button where BonBon has it, at the
	right. Chrome's back button is the back button, so no arrows, no
	reload, no home; no search, for now.  */

.divTabBar { /* Chrome's tabs are the tabs (Dave: no tab strip, "that's a browser feature, and this is a demo") */
	display: none;
	}

.divBookmarksBar { /* no bookmarks (Dave) */
	display: none;
	}

.buttonMore, .divMoreMenu { /* no three-dots menu (Dave: "leave it out") */
	display: none;
	}

.divLinkStatus { /* Chrome shows the address of the link under the mouse itself, in the same corner */
	display: none;
	}

.divNavButtons { /* Chrome's back, forward and reload do the work; no home */
	display: none;
	}

.buttonSearch, .divSearchBar { /* no search in this version (Dave) */
	display: none;
	}

.divAddressBar { /* the address box in the middle, the search page's way */
	position: relative;
	justify-content: center;
	padding: 10px 18px 9px 18px;
	}

.divAddressField {
	flex: 0 1 520px;
	border-radius: 4px;
	}

.divAddressBar .buttonStylesheets { /* where BonBon has it, at the right end of the bar, whatever the box's width */
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
	}

.divStylesheetsPanel { /* under the button; BonBon's top counts a tab bar this page doesn't have */
	top: 42px;
	}