<br />
<b>Warning</b>:  Undefined variable $NO_MARGIN in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>686</b><br />
<br />
<b>Warning</b>:  Undefined variable $NO_PADDING in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>686</b><br />
<br />
<b>Warning</b>:  Undefined variable $FGcadetblue in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>689</b><br />
<br />
<b>Warning</b>:  Undefined variable $GRIDLINE in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>728</b><br />
<br />
<b>Warning</b>:  Undefined variable $GRIDLINE in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>746</b><br />
<br />
<b>Warning</b>:  Undefined variable $FG in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>850</b><br />
<br />
<b>Warning</b>:  Attempt to read property "white" on null in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>850</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php:686) in <b>/homepages/29/d363143602/htdocs/schoenfeld.us/gizmo.php</b> on line <b>953</b><br />

/***********************/
/***
/*** C O R E
/***
/***********************/

html			{ font-size: calc(0.75em + 0.33vw) }		/* base for responsive	*/
body			{ font-family:helvetica,swiss,sans; margin:0; padding:0; }			/* font and whitespace	*/

*,
*::before,
*::after		{ box-sizing: border-box; }			/* override foolish std	*/

*			{   vertical-align:top; }

label			{ display:block; text-align:left; }
label[field]:before	{ display:block; font-variant:small-caps; ;content:attr(field);}	/* add titles to inputs	*/

inline,
[inline]		{ display:inline-block; border:1px dotted red;; }

input,
button			{ font-size:inherit; font-family:inherit; }	/* make everything obey	*/

input			{ border:0px solid transparent; border-bottom:1px dotted grey; }	/* remove the ugly box	*/
input:invalid		{ background-color:red; }

iframe			{ border:0px solid transparent; }

/***********************/
/***
/*** B U T T O N S
/***
/***********************/

.glyph			{ display:inline-block; margin:0.25em; padding:0.35em; vertical-align:bottom; font-variant:small-caps;	/* buttons with glyphs	*/
			  color:green; background-color:aliceblue; }
.glyph[label]::before		{ display:none; }
.button			{ display:inline-block; margin:0.25em; }

button,									/* regular buttons	*/
.button,
[type='submit']		{ display:inline-block; margin:0.25em; border:0px solid transparent; background-color:skyblue; padding:0.20em 0.5em; border-radius:0.3em; cursor:pointer; }

button:hover,
.button:hover,
[type='submit']:hover	{ background-color:coral; }					/* animate on hover	*/

/***********************/
/***
/*** M O D A L
/*** & F O R M
/***
/***********************/

	= " border-right:1px dotted grey;border-bottom:1px dotted grey;";

.modal			{ position:fixed; background-color:RGBA(0,0,0,0.50); top:0px; left:0px; width:100%; height:100%; text-align:center; } 
.modal input		{ display:none; }
form,
.form			{ display:inline-block; border:0px solid transparent; border-radius:0.3em; padding:0.35em; margin:0.25em; } 

/***********************/
/***
/*** T A B L E S
/***
/***********************/

table			{ width:100%; }				/* ALWAYS expand tables	*/
table *			{ vertical-align:top; }				/* tr,td,th to top	*/
tr			{}
tr:nth-of-type(odd) 	{ background-color:aliceblue; }			/* tables are banded	*/
tr:nth-of-type(odd):focus{ background-color:yellow; }				/* current row		*/
td			{  }				/* and with gridlines	*/
td[optional]		{ color:grey; }
span[required],
td[required]		{ color:red;}

/******** NOTE ********/
/*
/* db-* is the preferred manner to form a table since 'sticky' actually works
/*
/******** NOTE ********/

.db-table		{display:table;width:100%;font-size:9.5pt;}
.db-thead		{display:table-header-group;position:sticky;top:0;color:white;background:navy;}
.db-fieldname		{display:table-cell;font-weight:bold;font-variant:small-caps;}
.db-tbody		{display:table-row-group;}
.db-head-row		{display:table-row;}
.db-head-row>*		{border-bottom:3px solid white;}
.db-row			{display:table-row;}
.db-row:nth-of-type(odd):focus,
.db-row:focus		{background:beige;}
.db-row:nth-of-type(odd){background:aliceblue;}
.db-cell		{display:table-cell;border-right:1px solid grey;border-bottom:1px solid grey;}

/***********************/
/***
/*** A N N O T A T I O N
/***
/***********************/

label[label]:before	{ display:block; font-size: 0.75em; font-variant:small-caps; color:grey; content:attr(label); }
div[label]:before	{ display:block; font-size: 0.75em; font-variant:small-caps; color:grey; content:attr(label); }
div[lbl]:before		{ display:block; font-size: 0.75em; font-variant:small-caps; color:grey; content:attr(lbl); }

div[note]:before	{ display:inline-block; content:'\2023';margin-right:0.5em;}
div[note]		{ display:block; background-color:aliceblue; padding:0.35em; width:80%;margin:1em auto;}
q:before		{ display:inline-block; content:'\201C'}
q:after			{ display:inline-block; content:'\201D'}

/***********************/
/***
/*** H E A D E R S &
/*** F O O T E R S
/***
/***********************/

.h1			{font-family:garamond,times,serif;font-size:1.5em;margin:1em 0em;color:cadetblue;font-weight:bold;}
.h2			{font-family:garamond,times,serif;font-size:1.2em;margin:1em 0em;color:cadetblue;font-weight:bold;}
.h3			{font-family:garamond,times,serif;font-size:1.1em;margin:1em 0em;color:cadetblue;font-weight:bold;}

.footer			{ text-align:center; }			/* align content (copyright)	*/ 
.copyright		{ display:block; text-align:center; color:grey; font-variant:small-caps; font-size: 0.75em; }
.copyright:first-of-type{ padding-top:.5em; }

[onclick],						/* pointerize hot spots	*/
[ondblclick]		{ cursor:pointer; }

/***********************/
/***
/*** S E L E C T and
/*** C O M B O B O X
/***
/***********************/

greyed			{ color:grey }

.option-box *		{ cursor:pointer; vertical-align:top; }
.combo *,
.combo *::before,
.combo *::after		{ box-sizing: border-box; }
	
.combo			{ display:block; position:relative; font-family:helvetica,swiss,sans; margin-bottom: 0.5em; min-width:15em; }
	 
.combo::after		{ display:block; top:50%; right:1em; width:0.75em; height:0.75em; position:absolute; border-bottom: 2px solid #000; border-right: 2px solid #000; content: ''; border-color: RGBA(0,0,0,0.50);;transform: translate(0, -65%) rotate(45deg); pointer-events: none; }
	 
.combo-input		{ display:block; width:100%; border-radius:0.3em; border:1px solid RGBA(0,0,0,0.50);; background-color:#f5f5f5;
			  padding:0.35em; text-align:left; font-size: 1em; min-height:2em;}
	 
.open .combo-input	{ border-radius:0.3em; }
.combo-input:focus	{ border-color:red;; box-shadow:0 0 5px red;; outline: 0px solid transparent;; }
	 
.combo-label		{ display:block; font-family:helvetica,swiss,sans; font-variant:small-caps; margin-bottom: 0.25em; }
	 
.combo-menu		{ display:none; position:absolute; top:100%;left:0px; border-radius:0.3em; width:100%; border:1px solid rgba(0, 0, 0, 0.42); background-color:white;; 
			  max-height: calc(10 * (1em + .7em + 2px) + 2px); overflow-y:auto; z-index:1000; }
	 
.open .combo-menu	{ display:block; }
	 
.combo-option		{ padding:0.35em; }
	 
.combo-option.option-current,
.combo-option:hover	{ background-color:RGBA(0,0,0,0.10);; }
	 
.combo-option.option-selected { position:relative;; padding-right: 30px;}		/* room for CHECKMARK	*/
.combo-option.option-selected::after { top:50%; right:1em; width:0.50em; height:1.00em; position:absolute; border-bottom: 2px solid #000; border-right: 2px solid #000; content: ''; transform: translate(0, -50%) rotate(45deg); }				/* actual CHECKMARK	*/
	 
.selected-options	{ display:block; margin:0; padding:0; list-style-type: none; max-width:15em;}
	 
.selected-options li	{ display:inline-block; margin-bottom: 0.25em; margin-right: 0.25em; }
	 
.remove-option		{ position:relative; border-radius:0.3em; font-size: 0.75em; font-weight: bold; ; background-color:skyblue; 
			  padding: 0.25em 1.75em 0.25em 0.25em;	border:1px solid skyblue;;	/* room for the white X	*/
			}
	 
.remove-option:focus	{ border-color:red;; box-shadow:0 0 5px red;; outline: 0px solid transparent;; }						/* focus ring		*/
	 
.remove-option::before,								/* draws a white X	*/
.remove-option::after	{ position:absolute; top:50%; right:0.75em; width:0; height:1em;	/*	V		*/
			  border-right: 2px solid #fff; content: ""; }		/*	V		*/
.remove-option::before	{ transform: translate(0, -50%) rotate( 45deg); }	/*	V		*/
.remove-option::after	{ transform: translate(0, -50%) rotate(-45deg);}	/*	V		*/

/***********************/
/***
/*** C H E C K B O X
/***   &   R A D I O 
/***
/***********************/

.input-group		{ display:inline-block; font-family:helvetica,swiss,sans; vertical-align:top; padding:0.35em; margin-top:0.5em;}
.input-group>span	{ display:block;  font-variant:small-caps; font-family:helvetica,swiss,sans;   }
.selector		{ display:block; width:100%; margin-left:3em; cursor:pointer; height:1.2em; padding-top:0.2em;}
.selector input		{ opacity:0; width:0; font-size:1em;line-height:0.0em; height:0.0em; padding:0; margin:0; border-width:em;}
.selector label		{ position:relative; top:0px;}
.selector span::before,
.selector span::after		{ position:absolute; top:0px; bottom:0px; margin:auto; content:' ';}
.selector span.radio::before	{ left:-2.50em; width:2.00em; top:0.40em;height:0.20em; background-color:lightgrey; border-radius:0.35em; }
.selector span.radio::after	{ left:-2.25em; width:0.80em; top:0.40em;height:0.80em; background-color:lightgrey; border-radius:0.80em; 
				  transition:left 1.0s, background-color 0.25s }

.selector input:checked + label span.radio::after {left: -1.5em; background: steelblue;}
.selector input:focus + label	{ background-color:RGBA(0,0,0,0.05); }
.selector input:focus + label span.radio::before{ background-color:grey; }
.selector input:focus + label span.radio { font-weight: bold; }

/***********************/
/***
/*** M O D A L 
/*** & F O R M
/***
/***********************/

.modal			{ position:fixed; background-color:RGBA(0,0,0,0.30); top:0px; left:0px; width:100%; height:100%; text-align:center; } 
.modal input		{ display:none; }
.form			{ display:inline-block; border:0px solid transparent; background-color:white;  border-radius:0.3em; padding:0.35em; margin:0.2em; color:black;  } 
.button			{ display:inline-block; border:0px solid transparent; background-color:skyblue; border-radius:0.3em; padding:0.35em; margin:0.2em; color:black; font-size:0.75em;}

/***********************/
/***
/*** F I L E B O X
/***
/***********************/

.thumb			{ position:relative; display:inline-block; min-width:20em;min-height:10em;border:1px dotted lightgrey; margin-top:1.0em;}
.thumb::before		{ display:block;  font-variant:small-caps; font-family:helvetica,swiss,sans;  content: attr(label);padding-bottom:0.15em;}
.thumb-buttons		{ position:absolute; opacity:0; background-color:transparent; transition:opacity 1s;}
.thumb .button		{ display:inline-block; border:0px solid transparent; background-color:darkgreen; border-radius:0.3em; padding:0.35em; margin:0.2em; color:white; font:bold 0.75em helvetica,swiss,sans;}
.thumb .button:hover	{ background-color:crimson; }
.thumb[value=''] .button[open],
.thumb[value=''] .button[blur],
.thumb[value=''] .button[drop]	{ display:none; }
.thumb[value=''] .pix		{ display:none; }
.thumb .pix		{ display:block; height:40vh;  vertical-align:top; }
.thumb input		{ display:none; }
.thumb .backend		{ display:none; }
.thumb:hover .thumb-buttons		{ opacity:1; }

/***********************/
/***
/*** S L I D E R 
/***
/***********************/

.slider-box		{ display:block; max-width:15em; }			/* the container	*/
.slider-label		{ display:block;  font-variant:small-caps; font-family:helvetica,swiss,sans;  position:relative;; cursor:pointer; }		/* the label		*/
.slider-label:focus	{ border:5px dotted green; }			/* focus feedback	*/
.slider-feedback	{ position:absolute;; right:0px;; }			/* the feedback area*/
.slider-value		{ }						/* value within feedback */

.slider-box input	{ width:100%; opacity:0; margin:0; padding:0; border:0px solid transparent; outline: 0px solid transparent;;	height:1.0em; }	/* hide actual INPUT	*/
									/* craft doppelganger	*/
/* the dimensions drive the locations ... starting with the INPUT
   ... using 1em (for example) the track-box must overlay it so
   it is the same size (1em) and moved using margin-top up (-1em)
   next the width of the track (and left) define the padding-top
   needed in order to place them in the middle of the track-box
   ... using 0.2em we calculate this as (1em - 0.2em) / 2 => 0.4em
   later the thumb must move up by the same amount

   width of the thumb is important as it is needed in the placement
   relative to the percentage of the range indicated by the value
   using 1em this is derived as margin-left:calc(1em * -percentage)
   in this way the thumb has a 0em margin at the minimum and -1em
   margin at the max
*/

.slider-track-box	{ border-radius:0.3em; 			height:1.0em; margin-top:-1.0em;padding-top:0.4em;}
.slider-track		{  display:block; border-radius:0.3em; background-color:lightgrey;	height:0.2em; }
.slider-left		{ display:inline-block; border-radius:0.3em; background-color:cadetblue;	height:0.2em; }
.slider-thumb		{ display:inline-block; border-radius:50%;   background-color:steelblue; height:1.0em; width:1.0em;	margin-top:-0.4em;}
.slider-box input:focus ~ .slider-track-box	{ background-color:RGBA(0,0,0,0.05); }