<? // WIDGET STYLES v14.0 ***


if(!function_exists('parseSpec')){
	function parseSpec($spec){
		// eliminating segments at the end starting in '_' gets rid of the segments added to keep widget unique, but maintain sort order
		$a=explode('_',$spec);
		$spec=$a[0];
		$css='0';
		if(substr($spec,0,1)=='e')$css=str_replace('d','.',substr($spec,1)).'em'; // d represents a decimal
		if(substr($spec,0,1)=='r')$css=str_replace('d','.',substr($spec,1)).'rem'; // d represents a decimal
		if(substr($spec,0,1)=='g')$css='calc(var(--gutter) * '.str_replace('d','.',substr($spec,1)).')'; // DEPRECATED
		if(substr($spec,0,1)=='v')$css='calc('.STYLE_VERTICAL_RHYTHM.' * '.str_replace('d','.',substr($spec,1)).'em)';
		if(substr($spec,0,1)=='p')$css=str_replace('d','.',substr($spec,1)).'%';
		if(substr($spec,0,1)=='x')$css=str_replace('d','.',substr($spec,1)).'px';
		if(substr($spec,0,1)=='h')$css=str_replace('d','.',substr($spec,1)).'vh';
		if(substr($spec,0,1)=='w')$css=str_replace('d','.',substr($spec,1)).'vw';
		if(substr($spec,0,1)=='c'){ // calc is usually used with 100%. It gives us the width of the viewport minus the scrollbar. Important for full-width styles.
			$css=str_replace('d','.',substr($spec,1)); // THIS DOESN"T WORK!!!!
			$css='calc('.$css.'vw - calc('.$css.'vw -'.$css.'%))';
		}
		if(substr($spec,0,1)=='u')$css='unset';
		if(substr($spec,0,1)=='a')$css='auto';
		return $css;
	}
}
if(!function_exists('flexRule')){
	function flexRule($rule){
		if($rule=='c') return 'center;';
		if($rule=='t') return 'stretch;';
		if($rule=='s') return 'flex-start;';
		if($rule=='a') return 'space-around;';
		if($rule=='b') return 'space-between;';
		if($rule=='e') return 'flex-end;';
		if($rule=='v') return 'space-evenly;';
		if($rule=='i') return 'initial;';
	}
}

// all widget styles are included at the top of the page. EVERY TIME there is a page load new styles are added as required
//$including_filename = pathinfo(debug_backtrace()[0]['file'])['basename'];echo $including_filename;
if(1==2){
	/* you still need -webkit-keyframes in Opera */
	echo '@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);}}'; /* image loader */
	echo '@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}';
	echo '@-webkit-keyframes bounce{0% {transform:translateY(0);} 50% {transform:translateY(-10px);} 100% {transform:translateY(0);} }';
	echo '@keyframes spin{0% { transform: rotate(0deg);} 100%{transform: rotate(360deg);}}'; /* image loader */
	echo '@keyframes fadein{from{opacity:0;}to{opacity:1;}}';
	echo '@keyframes bounce{0% {transform:translateY(0);} 50% {transform:translateY(-10px);} 100% {transform:translateY(0);} }';
	/* @-webkit-keyframes fadeinhalf{from{opacity:0;}to{opacity:.3;}}@keyframes fadeinhalf{from{opacity:0;}to{opacity:.3;}} */
}
$genericLoaded=array();
//echo PHP_EOL.'========================================';echo SESSION_STYLES_LOADED;echo PHP_EOL.'========================================';
$stylesLoaded=defined('SESSION_STYLES_LOADED')?explode(' ',SESSION_STYLES_LOADED):[];
$stylesLoaded_assoc=array();
foreach($stylesLoaded as $key=>$value){
	if($key=='')continue;
	$stylesLoaded_assoc[$value]='';
	if(strpos($value,'*')!==false){
		$genericLoaded[$value]='';
	}
}
//echo PHP_EOL.'BEFORE prune stylesLoaded';print_r($classesLoading);flush();die;
//echo PHP_EOL.'AFTER prune stylesLoaded';print_r($classesLoading);flush();
// >>>>>>>>> $stylesLoaded is now an associative array. $stylesLoaded contains the widgets loaded (in previous page loads or this one). $theWidets contains the widgets we want to load in this load <<<<<<<<
/* CSS WIDTH INHERIT. Inherits the width DECLARATION, not the physical width.
Therefore inheritied width of an absolutely positioned element causes that element to be the same width of its parent ONLY when the frame of reference is the same.
A static div within a static div has a different frame of reference than an absolutely positioned div within a static div within a static div.
Therefore we cannot use width:inherit to set the width of backgrounds or abs divs on NESTED frameworks !!! */
if(!function_exists('arrayKeyStartsWith')){
	function arrayKeyStartsWith($needle, $a){
		//echo 'arrayKeyStartsWith';echo $needle;print_r($a);
			foreach($a as $key => $value){
					if(strpos($key,$needle)===0){
						return true;
					}
			}
	}
}
if(!function_exists('arrayKeyEndsWith')){
	function arrayKeyEndsWith($needle, $a){
		//echo 'arrayKeyEndsWith ';echo $needle;print_r($a);
			foreach($a as $key => $value){
					if(strpos($key,$needle)===strlen($key)-strlen($needle)){
							return true;
					}
			}
	}
}
// the following is loaded by WebPage for the first webpage loaded for each site
//ob_start();echo 'genericLoaded';print_r($genericLoaded);ob_end_flush();

/* ==================================    RESIZE  ============================================================================================*/
if(array_key_exists('rsz_',$classesLoading)){?>
	#h_.rsz_{position:fixed;width:100%;}
<?}
/* ==================================    TILES  ============================================================================================*/
if(array_key_exists('t',$classesLoading)){?>
	.t,.t>a{display:flex;flex-direction:column;justify-content:flex-start;}<?/* this is to get auto height on images */?>
	.t .i:first-child,.t>a .i:first-child{margin-bottom:0;}
	.t{width:100%;padding:calc(var(--gutter));z-index:1;}.t>.i,.t>a>.i{flex-grow:1;}
	.t>a{text-decoration:none;}
<?}
//============================ EMBEDDED VIDEOS ======================================================================
if(array_key_exists('video_',$classesLoading)){?>
	.video_{position:relative;}
	.video_ iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
<?}
/* =============================================== TABLES =================================================== */
if(array_key_exists('table',$classesLoading)){
	echo 'table{border-collapse:collapse;}';
	echo '.x_ .table{position:relative;margin:calc(1.00rem + .2vw) 0 calc(1.00rem + .2vw) 0;}.x_ .table ul{margin-left:0;}';
	echo '.table li{margin-bottom:.5em;list-style-type:none;}.thead{display:none;}';
	echo '.table,.caption,.tbody,.tfoot,.thead,.tr,.th,.td{padding:0;border:0;outline:0;font-size:100%;vertical-align:middle;}';
	echo '.tbody>ul>li{display:inline-block;clear:both;}.tbody>ul>li:before{position:absolute;}.tbody>ul>li:nth-of-type(1){font-size:1.2em;margin-left:0;width:100%;}';
}
/* =============================================== FORMS =================================================== */
if(array_key_exists('form',$classesLoading)){?>
		form{display:flex;position:relative;flex-direction:column;}
		fieldset,form,label,legend{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
		label,input,textarea{font-size:1em;line-height:1.5;}
		input,textarea,select{padding:.5em;border:1px solid #ccc;}
		label,input,select{vertical-align:middle}
		input[type="text"],input[type="email"],input[type="file"],textarea,select{width:100%}
		button{display:inline-block;padding:.5em;}
		input[type='submit'], input[type='image'], label[for], select, button{cursor: pointer;}
	<?	//foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='form')echo $value;}
}
/* =============================================== LISTS =================================================== */
if(array_key_exists('ul',$classesLoading)){ ?>
	ul{list-style-type:disc;}ol{list-style-type:decimal;}ul ul{list-style-type:circle;}
	.xby_ ul,.xby_ ol{margin-left:calc(var(--gutter) + 3%);text-align:left;}
	.by_ ul ul{font-size:100%;}
	.xt_ ul.txc>li,.xt_ ol.txc>li{margin-left:0;}<?/*centering overrides ind settings but we never center an li unless there are no bullets */?>
<?}
if(array_key_exists('ol',$classesLoading)){ ?>
	ol{list-style-type:decimal;}ol ul{list-style-type:circle;}
	.by_ ol ol,.by_ ul ol,.by_ ol ul{font-size:100%;}
<?}
if(array_key_exists('ctf_',$classesLoading)){/* OBSOLETE */?>
	.ctf_{display:flex;flex-direction:column;}
	.ctf_ label{display:block;margin-bottom:.2em;}
	.ctf_ .reqd:after{content:'*';color:red;margin-left:.2em;vertical-align:top;}
	.wpg .ctf_err{padding:.5em;background:var(--aaa);color:var(--w);margin-bottom:1em;}.wpg .ctf_err h1,.wpg .ctf_err h2,.wpg .ctf_err h3{color:var(--w);background:transparent;}
	.ctf_err>p{margin:0;}
	.ctf_blk{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;order:3;}
	.ctf_blk>*{margin-bottom:var(--gutter);}
	.js_ .ctf_ .recaptcha{position:absolute;left:-9999px;}
	.recaptcha {min-width:15em;margin-right:1em;border:1px solid #ddd;padding:1em;background:#efefef;}
	.recaptcha label{margin-bottom:var(--gutter);}
	.recaptcha>div{display:flex;justify-content:space-between;}
	.recaptcha>div>span>span{font-size:1.5em;max-width:10em;overflow:hidden;}
	.recaptcha>div>span>span>span{letter-spacing:4px;}
	.recaptcha>div>span>span>span:nth-of-type(odd){line-height:.9;vertical-align:top;}
	.recaptcha>div>span>span>span:nth-of-type(2),.recaptcha>div>span>span>span:nth-of-type(5){display:none;}
	.recaptcha>div>span>span>span:nth-of-type(7){display:inline-block;position:relative;right:4px;transform:rotate(180deg);}
	.recatpcha input{max-width:10em;}
	<? //foreach($STYLE_CSS_PATTERNS as $key => $value){if($key==='ctf_')echo $value;}	?>
<?}
if(array_key_exists('form_',$classesLoading)){ ?>
	.form_{display:flex;flex-direction:column;}
	.form_ label{display:block;margin-bottom:.2em;margin-right:.5em;}
	.form_ .reqd:after{content:'*';color:red;margin-left:.2em;vertical-align:top;}
	.form_err{border: 2px solid #f00;}
.jenisys_loading_overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:5000;font-family:var(--jenisys_font_family);}
#jenisys_spinner {
  border: 16px solid #aaa;
  border-top: 16px solid #fff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}
#jenisys_message_pop{
  position: relative;
  min-width:20em;
  max-width: 40em;
  background: #fad6af;
  padding: 2em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-family:"Open Sans";
}

#jenisys_message_pop .ic_close {
    position: absolute;
    top: .4em;
    right: .4em;
    display:flex;
    justify-content:center;
    align-items:center;
    height: 2em;
    width: 2em;
    border:1px solid #ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size:1em;
}
#jenisys_message_pop p{
  margin-top:1em;
}
#jenisys_confirm{
  display:flex;
  flex-direction:row;
  justify-content: space-around;
  margin-top:1em;
}
#jenisys_confirm button{
  border:0;
  background: #666;
  padding:.5em 1em;
  color: #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ic_close:before{content:'X';font-family:'Open Sans';}
<?}
if(array_key_exists('hd_',$classesLoading)){/* contact form style to hide labels from view but make them available to screen readers */?>
	label.hd_{border:0;clip: rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
<?}
if(array_key_exists('defer_',$classesLoading)){/* defer image load */ ?>
	.i.defer_,.i.defer_~.i{display:none;}
<?}
if(array_key_exists('coerce_',$classesLoading)){?>
	.coerce_ .i .img_,.i.coerce_ .img_{flex-grow:1;}
<?}
if(array_key_exists('swap2u',$classesLoading)){
	echo '.swap2u>.f_{margin-bottom:0;padding:0;border-top-width:0;border-bottom-width:0;}';
	echo '.swap2u>.f_ .img_{border-width:0;}';
	echo '.swap2u>.f_:first-of-type{border-top-width:1px;}';
	echo '.swap2u>.f_:last-of-type{border-bottom-width:1px;}';
	echo '.swap2u>.f_:nth-of-type(even).mup_>.x_:nth-of-type(2){order:1;}.swap2u>.f_:nth-of-type(even).mup_>.x_:nth-of-type(odd){order:4;}';
}	

if(array_key_exists('map_',$classesLoading)){/* google maps */?>
	#map-canvas{position:relative;overflow:hidden;width:100%;height:550px;margin-bottom:1em;border:1px solid #ccc;}
	<? //foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='map_')echo $value;}?>
<?}if(array_key_exists('mc_',$classesLoading)){/* mail chimp */?>
.mc_{position:relative;margin:0 auto;}
.mc_ label{display:block;line-height:1.5em;}
.mc_ ul{display:inline-block;width:39%;list-style-type:none;margin-left:0;}
.mc_ ul+ul{width:59%;}
.mc_ li{margin:0 0 0 10%;}
.mc-inst{margin-bottom:.5rem;}
#mc_submit{margin-top:1rem;}
#mc_error,#mc_success{margin-top:.5em;border-radius:3px;padding:.5em;background:red;color:black;}
.mc_ label{line-height:1.5em;}
.mc_ input{position:relative;background:var(--bg_w);padding:.5em;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;transition:all 0.2s linear;font-size:1em;vertical-align:middle;}
.mc_ input[type="email"],.mc_ input[type="text"]{width:100%;}
.mc_ input[type="checkbox"]{position:static;width:22px;height:22px;margin:.2em 8px 0 0;border:0;box-shadow:none;}
.mc_ input[type="checkbox"]+label{display:inline-block;}
.mc_ .reqd:after{content:'*';display:inline-block;margin-left:.2em;color:red;}
.mc_ button{display:block;padding:.5em;}

<?}if(array_key_exists('cti_',$classesLoading)){?>
	.cti_{position:relative;font-size:1.1em;margin:1em auto;max-width:25em}
	.cti_>.contact>span{display:inline-block;width:100%;margin-bottom:1em;}
	.cti_ span>span{font-size:100%;line-height:1.5;white-space:nowrap;}
	.cti_>.contact{max-width:20em;margin:0 auto;}
	.cti_>.contact>span>span{float:right;clear:right;}
	.cti_>.address{margin:2em 0;}

<?}if(array_key_exists('resize_menu_',$classesLoading)){?>
@media screen and (min-width:<? echo WIDGETS_MENU_BREAK; ?>em){
<?/* body gets a class of .rsz_mini when the page is scrolled and resize_menu_ in the .h_ indicates we want to shrink the menu */?>
#h_.rsz_mini{position:fixed;width:100%;}
#h_.rsz_mini .logo{font-size:.7em;transition:font-size 12s;}
#h_.rsz_mini .orgname{position:fixed;top:0;left:0;text-align:center;}
#h_.rsz_mini nav{margin-top:2em;text-align:center;}
#h_.rsz_mini .nomini_,#h_.rsz_mini>.t_ .mn_mnr{display:none;}
}		
<?}
 //********************************************************************************************************************************
 //************************************************************ PATTERNS **********************************************************
 //********************************************************************************************************************************
 if(array_key_exists('blog_1',$classesLoading)){?>
.blog_1>.f_>.x_>.t>.f_:last-of-type{border-top:1px solid #eee;}
<?}if(array_key_exists('img_exp',$classesLoading)){?> <?/* this forces the element to the edge of the tile */?>
.img_exp .i{width:calc(100% + (2 * var(--gutter)));margin-top:0;margin-bottom:0;margin-left:calc(-1 * var(--gutter));}
#html #body #wpg .img_exp .i{left:0;transform:none;}<?/* left 0 transform none overrides .txc .i, which we don't need because .img_exp results in 100% width,*/?>
.img_exp .i .img_{border-left:0;border-right:0;} <?/*  border left and right zero means image border will not double up with tile border */?>
.img_exp .i:first-child .img_{border-top:0;}
.img_exp .i+.i{margin-top:calc(.2em);}
.img_exp .i+p{margin-top:calc(var(--vertical_rhythm) * 1em);}
<?}if(arrayKeyEndsWith('-share-button',$classesLoading)){?>
[class*="-share-button"]:hover{cursor:pointer;}
<?}if(array_key_exists('share_1',$classesLoading)){?>
#html #body #wpg .share_1{display:flex;justify-content:space-around;}
.share_1>*{position:relative;display:inline-block;margin:.5em;line-height:1em;color:var(--bg_a);}
.share_1>span:after{content:'';display:inline-block;vertical-align:middle;width:0;height:0;margin-left:.3em;border:0;border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-left:.6em solid #b46627;opacity:.4;}
.share_1>div{display:inline-block;margin:0 .2em;z-index:2;}
.share_1 img{height:16px;width:16px;margin:.5em;vertical-align:middle;}
.share_1 [class*='icon_']:before{margin:0;font-size:24px;line-height:1;}
<?}if(array_key_exists('foot_',$classesLoading)){?>
.foot_{display:flex;justify-content:space-between;margin:auto 0 0 0;}
.foot_>*{margin-top:0;margin-bottom:0;}
<?}if(array_key_exists('link_3',$classesLoading)){?>
a.link_3,.link_3 a,[class*=" link_"] .link_3 a,[class^="link_"] .link_3 a{position:relative;padding-right:1em;text-decoration:none;text-transform:uppercase;}
a.link_3:after,.link_3 a:after,[class*=" link_"] .link_3 a:after,[class^="link_"] .link_3 a:after{content:'>';display:inline-block;margin-left:.5em;transition:transform .5s;}
a.link_3:hover:after,.link_3 a:hover:after,[class*=" link_"] .link_3 a:hover:after,[class^="link_"] .link_3 a:hover:after{transform:translateX(.5em);}
<?}if(array_key_exists('tile_0',$classesLoading)){/* put the bottom padding back on the tile */ ?>
.tile_0 .x_{padding:calc(var(--gutter) / 2);}
<?}if(array_key_exists('event-detail1',$classesLoading)){?>
.event-detail1{margin-bottom:1em;}
.event-detail1>.x_:first-of-type{min-width:10em;max-width:25em;}
.event-detail1 .i h2{margin-bottom:.5em;}
.event-detail1>.x_:last-of-type>p:first-of-type{margin-top:.5em;}
.event-detail1>.x_:last-of-type>.f_>.x_:nth-of-type(odd){padding-left:0;}
.event-detail1>.x_:last-of-type>.f_>.x_:nth-of-type(odd):after{display:none;}
.event-detail1 ul,.event-detail1 ol{margin-top:0;margin-bottom:0;}
.event-detail1 h3{margin:0;}
<?}if(array_key_exists('blg_',$classesLoading)){?>
.blg_>._detail>table.terms td:first-child{width:10%;padding-left:0}
.blg_hdg a{text-decoration:none}
.blg_hdg>span{display:inline-block;position:relative;font-size:.7em;top:-.5em;margin-right:2em;padding:0 1.2em 0 .5em;}
.blg_hdg>span>span{position:absolute;font-family:Lato,sans-serif;font-size:.6em;right:-.5em;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.blg_>._detail>h1{position:relative}
.blg_>._detail>h1>span{position:absolute;bottom:-1.8em;right:0;font-size:.5em}
@media (min-width:40em) and (max-width:60em){<?/* this is a transition between 1-up and 2-up where we don't have enough room for both columns if we use 50 em for f_x50 first column */?>
.f_x50>.ssr_>.sr_>input,.blg_>.ssr_>.sr_>button{width:100%;margin-top:.3em}
}
@media (min-width:50em) and (max-width:70em){<?/* this is a transition between 1-up and 2-up where we don't have enough room for both columns if we use 50 em for f_x50 first column */?>
.f_x50>.ssr_>.sr_>input,.blg_>.ssr_>.sr_>button{width:100%;margin-top:.3em}
}
<?}if(array_key_exists('ico',$classesLoading)){ /* icons that are text-based rather than font-based  */ ?>
.ico{position:absolute;top:.7em;right:.7em;width:2em;border:2px solid #8CCA23;border-radius:50%;box-shadow:inset 0 0 8px 0 #ddd;z-index:99}
.ico.abs:before{padding:0 .1em;font-size:1.2em;font-weight:bold;color:#83bc21}
.ico:hover{box-shadow:inset 0 0 8px 0 #8CCA23}
.i_can:before{content:'X'}


<?}if(array_key_exists('lgn_',$classesLoading)){ /* form styling */ ?>

.lgn_,.lgn_:before{z-index:200;width:100%}
.lgn_:before{background:#fff;opacity:.9;z-index:1}
.lgn_>.f_.u1{position:fixed;top:0;left:0;bottom:0;right:0;height:21em;max-width:25em;margin:auto;z-index:2}
.lgn_ .s_{padding-top:0 !important}
.lgn_>div>div>div{text-align:center}
<? if(ZDEF_TEST==1)echo '.lgn_ h3{position:absolute;top:0;left:10em;z-index:99}';/* this is the test heading when we are in test mode */ ?>
.lgn_ .llogo{width:100%;z-index:1;text-align:left}
.lgn_ .llogo>p{position:relative;z-index:1;margin:0;line-height:50px;font-size:1.5em;font-weight:bold;padding-top:5px}
.lgn_ .llogo>p>span{margin-left:2.1em}
.lgn_ .llogo>p:before{content:'';position:absolute;top:.5em;bottom:0;left:0;right:0;background:url(<? echo '//www.'.ZDEF_HUB_HANDLE.'/?f=c/logo-small-horizontal.gif&l=lib'; ?>) no-repeat #fff;z-index:20}
.lgn_ form{margin-top:.8em;text-align:center}
.lgn_ form>p.err{margin:.5em 0;min-height:3em;color:red}
.lgn_ form>div{height:2em;margin:1em 0}
.lgn_ form>p:last-of-type{margin:0;font-size:.8em;color:#666}
.lgn_ label{display:inline-block;width:5em;line-height:2em;text-align:right}
.lgn_ input{width:17em;margin-left:1em;padding:0 .5em;line-height:2em}
.lgn_ button{width:100%;margin:1.5em auto .3em auto;font-size:1.5em;background:linear-gradient(#28a7df,#00397e);color:#fff}

<?}
if(array_key_exists('frm_',$classesLoading)||array_key_exists('frm_styles',$classesLoading)||array_key_exists('stripe_pay',$classesLoading)){ /* form styling */ ?>
.frm_{position:relative;margin:0 auto;}
.frm_ .off{position:absolute;left:-9999px;}<?/* use this instead of display:none when we want querySelector to include an element */?>
.frm_ fieldset{position:relative;display:block;clear:both;margin-bottom:1.5em;border:1px solid #ddd;padding:1em 2%;background:#f6f6f6;}
.frm_ fieldset>h3,.frm_ .fieldset>h3{font-size:1.5em;margin:0;}
.frm_ input,.frm_ textarea {border:1px solid #ccc;padding:.5em;font-size:1em;}
.frm_ input,.frm_ select{max-width:100%;}
.frm_ select{border:1px solid #ccc;padding:.35em .5em;font-size:1em}
.frm_ input,.frm_ textarea,.frm_ select,.frm_ .zedit{position:relative;background:#fff;background:linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);border-radius:3px;border:1px solid #bbb;transition:all 0.2s linear;}
.frm_ input[type="radio"],.frm_ input[type="checkbox"]{position:static;width:22px;height:22px;margin:.2em 8px 0 0;border:0;box-shadow:none}
.frm_ input[type="checkbox"]+label{display:inline-block}
.frm_ ul{margin:0;list-style-type:none;}
.frm_ ul.bull{margin-left:3em;}.frm_ ul.bull>li{list-style-type:disc;}
.frm_ label,.frm_ p.label{display:block;line-height:1.5em;color:#000}
.frm_ .reqd>span:first-of-type:after{content:'*';display:inline-block;margin-left:.2em;color:red}
.frm_.viewonly .reqd:after{display:none}
.frm_ input[type='checkbox']:focus,.frm_ input[type='radio']:focus{border:0;box-shadow:none}
.wpg .frm_.viewonly input,.wpg .frm_.viewonly textarea,.wpg .frm_.viewonly select {background:#fff;border:1px solid #eee;box-shadow:none;transition:none}
.wpg .frm_ input:focus,.wpg .frm_ textarea:focus,.wpg .zsrch>input:focus,.frm_ input.glow{box-shadow:0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);outline:none;}
.frm_ .zdetail_ li,.frm_ li>span{display:inline-block}
.frm_ li{list-style-type:none;margin-top:1em;border:3px solid transparent}<?/* transparent border helps prevent page jump when adding errors prior to input element */?>
.frm_ .z_yn input,.frm_ .z_yn label{display:inline-block;}
.frm_ .z_yn input{margin-left:1em;}
<?/*.frm_ fieldset>li.ind input{margin-left:1em}.frm_ fieldset>li.ind2 input{margin-left:2em}
.frm_ button{margin:.5em 0;padding:.5em .8em;font-size:1.1em;text-decoration:none}
.frm_ p.help,.frm_ .instructions>p,.frm_ p.err_{clear:both;margin:.2em 0;padding:0;text-align:left;font-size:.9em}
.frm_ .instructions>p{margin-top:.8em}
.frm_ li.err_{margin-left:-1%;margin-right:-1%;padding:0 1% .2em 1%;border:3px solid red;background:#fff;}
.frm_ li.err_>p.err_{font-size:1em;color:red}
.frm_ .txc p.err_{margin-left:auto;margin-right:auto;text-align:center}
.frm_ li.err_>p.err_:first-child{margin-top:1em}
.frm_ .mini{font-size:.8em}
.frm_ li.vert label{margin-top:.5em}
.frm_ li.horz>label{display:inline-block;margin-right:1em;}
.frm_ .z_yn>li{margin-top:.5em}
.frm_ .z_yn>li:first-child{margin-top:1em}
.frm_ .z_yn>li>span{min-width:9em}
.frm_ .ynfl>li>label{display:inline-block}
.frm_ .ynfl>li>.z_yn{float:right;clear:right;}
.frm_ .mw25{max-width:25em;margin:0 auto;}
.frm_ .mw40{max-width:40em;margin:0 auto;}
.frm_ .bgwt{background:#fff;padding:.1em 1em .5em 1em;border:1px solid #ddd}
.frm_ .skillchk input{width:3em;margin-top:.2em;}
.frm_ .cg2u label, .frm_ .cg3u label{display:inline-block;width:calc(49% - 3em);margin-top:.4em;margin-left:2%;}
.frm_ .tab_>li:first-of-type>label{display:inline-block;}
.frm_ .tab_>li:first-of-type>label:nth-of-type(n+2){margin-left:1.5em}
.frm_ h3{margin-bottom:0;}.frm_ h3+li{margin-top:0;}.frm_ h3+li>ul>li:first-of-type{margin-top:.3em;}
.frm_ .subform_container>h3{position:relative;display:inline-block;margin:1em 0 -4em -.3em;border:1px solid #ddd;border-bottom-width:0;padding:.5em;background:#f9f9f9;line-height:1;z-index:2;}
.frm_ .subform_container>li{position:relative;margin:.65em -.5em 1em -.5em;border:1px solid #ddd;padding:.5em;background:#f9f9f9;z-index:1;}
.frm_ .subform>.zw{position:absolute;right:.5em;top:.5em;float:none;display:inline-block;vertical-align:middle;}
.frm_ .subform.nostyle>.zw{position:static;}
.frm_ .subform{position:relative;padding-top:.5em;}
.frm_ .subform:not(:first-of-type){margin-top:.5em;border-top:2px dashed #ddd;}
@media (min-width:800px){
	.frm_ .cg3u label{width:calc(33% - 3em);}
}*/?>
	<? if(1==2 && ZDEF_IS_MODERN_PHONE==1){?>
	.frm_ {font-size:.8em}
	<?}?>

	<? if(JENSIIS==1){?>
	.zedit{max-height:8em;outline:2px dashed #aaa;}
	.zedit.rt_open{max-height:none;outline:2px dashed #3085cf}<?/* an input on a form opened for rich editing */?>
	.frm_ .zedit{max-width:100%;min-height:2em;overflow:hidden;padding:.4em calc(var(--gutter));}
	.zedit ul>li,.zedit ol>li{margin:.8em 0 .8em calc(var(--gutter));line-height:1.5em}
	.frm_ .zedit li{list-style-type:disc}
	.frm_ .zedit a[href^=tel]{text-decoration:underline}
	.frm_ .zimagegroup img{margin:.5em;vertical-align:baseline;width:20%}
	.frm_ .zimagegroup img:hover,.frm_ .zimagegroup canvas:hover{cursor:move}
	.frm_ .zimagegroup img.zimageblank:hover{cursor:default}
	<?/* ******* We do not display:none on the zimageblank because chrome DELETES it if it is displayed:none and there is a drag & drop of images in the zimagegroup */?>
	#wss_>#wimp>#wimp1 .frm_ .zimagegroup img.zimageblank.dn{position:absolute;display:block;left:-3000px;}
	<?}?>
<?}if(array_key_exists('ldg_',$classesLoading)){/* loading spinner */ ?>
	.ldg_{position:fixed;width:120px;height:120px;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%);z-index:10;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite;}
<?}if(array_key_exists('tab_',$classesLoading)){/* tabbed display or input form */ ?>
.tab_>ul>label{position:absolute;top:0;width:25%;border:0 solid #aaa;margin-top:0;border-width:0 0 1px 1px;background:#eee;padding:1em 0;text-align:center;z-index:9;}
.tab_>ul>label:first-of-type{border-left:0;}
.tab_>ul>label:hover{cursor:pointer;}
.tab_>ul>input{position:absolute !important;left:-9999em;}
.tab_>ul>input:checked+label{background:#fff;border-bottom-color:transparent;}
.tab_>ul>input:checked+label:hover{cursor:default;}
.tab_>ul>label+ul{position:relative;display:none;padding-left:.5em;padding-right:.5em;overflow-y:auto;}
.tab_>ul>input:checked+label+ul{display:block}
.tab_u1>ul>label{width:100%;border-width:0 0 1px 0;}
.tab_u2>ul>label{width:50%;}.tab_u2>ul>label:nth-of-type(2){left:50%;}
.tab_u3>ul>label{width:33.3%;}.tab_u3>ul>label:nth-of-type(2){left:33.3%;}.tab_u3>ul>label:nth-of-type(3){left:66.6%;}
.tab_u4>ul>label{width:25%;}.tab_u4>ul>label:nth-of-type(2){left:25%;}.tab_u4>ul>label:nth-of-type(3){left:50%;}.tab_u4>ul>label:nth-of-type(4){left:75%;}
<?}
if(array_key_exists('ssr_',$classesLoading)){/* search */ ?>
.ssr_ .sr_{position:relative;margin-bottom:1em;font-size:1.3em}
.ssr_ .sr_>input{width:80%;height:3em;padding-right:6.5em;border:1px solid #ccc;}
.ssr_ .sr_>button{float:right;width:19.5%;height:3em;border:1px solid #ccc;padding:.5em 0 .55em 0;letter-spacing:1px;text-align:center;}
.sr_result div.hr{width:100%}
.sr_result a{display:inline-block;text-decoration:underline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
<?}if(array_key_exists('iover_',$classesLoading)){?>
.iover_{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;z-index:10;}
<?}if(array_key_exists('iunder_',$classesLoading)){?>  <?/* iunder is for text underneath logos if we are worried about logo not loading (walking eagle) */?>
	.i .iunder_{display:none;}
	.i .failed .iunder_{position:absolute;display:block;width:100%;max-width:<? echo WIDGETS_MENU_BREAK; ?>rem;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;}
<?}
if(array_key_exists('ss_',$classesLoading)){/* SLIDESHOW */ 
	if(!array_key_exists('ss_*',$genericLoaded)){
		$genericLoaded['ss_*']=''; ?>
		.x_.ss_{position:relative;padding:0;overflow:hidden;}
		.ss_ input{position:absolute;left:-9999px;}
		<?/* bottom toolbar buttons */?>
		.ss_ .ss_tools{position:absolute;display:flex;bottom:0;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.4);border-radius:5%;z-index:3;outline:0;}<?/* outline 0 for jensiis editor */?>
		.ss_ .ss_tools>label{display:block;bottom:5px;width:12px;height:12px;margin:.5em;border:3px solid var(--bg);border-radius:50%;transition:background-color linear 0.1s;cursor:pointer;opacity:.8;z-index:10;}
		<? if(ZDEF_IS_MODERN_PHONE) echo '.ss_ .ss_tools>label{width:20px;height:20px;}'; /* bigger toolbox buttons on phones */?>  
		.ss_ label:hover{opacity:1;}
		#wpg .ss_ .i{position:absolute;left:-100%;width:100%;height:100%;margin:0;padding:0;text-align:center;color:var(--ss_c);transition:opacity 1.2s ease-in, left ease-in 0.8s;z-index:3;transform:none;}<?/* need #wpg to override standard styling for i */?>
		.ss_ .i img{opacity:0.0;transition:opacity .8s ease-out;}
		#wpg .ss_ input:checked~.i{left:100%;} <?/* you need #wpg to override standard .i styling */?>
		.ss_ .i[draggable="true"]:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#ffff;opacity:.1;z-index:9;}
		.js_ .ss_ i:nth-of-type(n+3){display:none;}<?/* this defers image loading of all but the first two images, when there is javascript */?>
		.ss_ .img_{border:0;}
		#wpg .ss_ input:checked+label+label+.i{position:relative;left:0;}
		#wpg .ss_ input:checked+label+label+.i>.img_ img{opacity:1;}
		.ss_ .iover_{position:absolute;top:1em;display:flex;flex-direction:column;justify-content:center;align-self:center;width:auto;padding-left:var(--ss_c_pdg);padding-right:var(--ss_c_pdg);padding-bottom:.7em;<? if($STYLE_CSS_VARS['ss_c_bdr']!=='') echo'border:var(--ss_c_bdr);'; if($STYLE_CSS_VARS['ss_c_bdr_radius']!='') echo 'border-radius:var(--ss_c_bdr_radius);'; ?>background:var(--ss_c_bg);font-size:calc(.5rem + .5vw);}
		.ss_ .iover_{background:var(--ss_c_bg);}<?/* slideshow background of content */?>
		.ss_ .iover_ h1,.ss_ .iover_ h2,.ss_ .iover_ h3,.ss_ .iover_ h4,.ss_ .iover_ h5,.ss_ .iover_ h6{display:block;width:auto;<? echo 'color:'.$STYLE_CSS_VARS['ss_c_hdr1']; ?>;}
		.nojs_ #body .ss_ .i{max-height:none;}
		<?/* when no js enabled do not let a slideshow expand past the page boundary... it would become too high */?>
		.nojs_ .ss_{max-width:<? echo WIDGETS_MENU_BREAK; ?>em;margin-left:auto;margin-right:auto;}
		<? /* backward and forward buttons */?>
		.ss_ input~label{position:absolute;display:none;width:2.5em;height:2.5em;top:calc(50% - 1.25em);border:1px solid #ccc;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;z-index:10;transition:opacity linear 0.3s;}
		.ss_ input~label:before,.ss_ input~label:after{content:'';position:absolute;width:60%;left:25%;height:2px;background:#333;}
		.ss_ input~label:before{bottom:27%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
		.ss_ input~label:after{top:27%;-webkit-transform:rotate(-45deg);transform:rotate(45deg);}
		.ss_ input+label:before{top:27%;left:15%;bottom:auto;}
		.ss_ input+label:after{top:auto;left:15%;bottom:27%;}
		.ss_ input:checked+label{display:block;left:.2em;}
		.ss_ input:checked+label+label{display:block;right:.2em;}
		.t_ .ss_[data-count="1"] label,.ss_[data-count="1"] .ss_tools{display:none;}
	<?}
	$slideCount=0;$oldSlideCount=0;$newSlideCount=0;
	foreach($stylesLoaded as $key => $value){$a=explode('ss_c',$value);if(count($a)>1){$oldSlideCount=+$a[1];break;}} // figure out the number of slides for which we've already sent styles
	foreach($classesLoading as $key => $value){$a=explode('ss_c',$key);if(count($a)>1){$oldSlideCount=+$a[1];break;}} // adjust if we're echoing styles on this page load (2 slideshows on one page)
	$slideCount=max($oldSlideCount,$classesLoading['ss_']['attributes']['data-count']); 
	// if we need more slides than we already have produced css, put out enough to cover the new data-count
	$c='';
	if($oldSlideCount+1<$slideCount){
		for($i=$oldSlideCount+1;$i<=$slideCount;$i++){echo $c.'.ss_ input:nth-of-type('.$i.'):checked~.ss_tools>label:nth-of-type('.$i.')';$c=',';}
		echo '{background-color:var(--bg_a);}';

	}
	$classesLoading['ss_c'.$slideCount]=[];// this 'remembers' the number of slides we've loaded css for
	if($STYLE_CSS_VARS['ss_c_hdr2']!=='')echo '.ss_ .iover_ h2{color:var(--ss_c_hdr1);}';
	if($STYLE_CSS_VARS['ss_c_hdr3']!=='')echo '.ss_ .iover_ h3{color:var(--ss_c_hdr2);}';
	if($STYLE_CSS_VARS['ss_c_hdr4']!=='')echo '.ss_ .iover_ h4{color:var(--ss_c_hdr4);}';
	?>
<?}
if(array_key_exists('logo_',$classesLoading) && !array_key_exists('logo_*',$classesLoading) && !array_key_exists('logo_*',$genericLoaded) ){
	$genericLoaded['logo_*']='';
	if(array_key_exists('logo',$STYLE_CUSTOM_FONTS)) echo '.logo_ *{font-family:"'.$STYLE_CUSTOM_FONTS[logo].'";}';
	//foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='logo_')echo $value;}?>
<?}
/* we DO NOT use button for .fwd and .bwd arrows because we haven't figured out how to get button through HTMLPurifier */
if(array_key_exists('ix_',$classesLoading)){?>
	<? //foreach($STYLE_CSS_PATTERNS as $key => $value){if($key == 'ix_')echo $value;}?>
	.ix_ .i.ix_current .img_:before{content:'';position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);border:4px solid #ccc;border-top:4px solid #333;border-bottom:4px solid #333;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;opacity:0.5;z-index:999;}<?/* the loading symbol */?>
	.ix_ .i .img_:before{display:none;}
	.ix_ img{cursor:zoom-out;}
	.modal_{position:fixed;top:0;right:0;left:0;bottom:0;height:100%;padding-top:.5em;padding-bottom:.5em;background:#333;z-index:98;overflow:hidden;}
	#ix_{font-family:<? echo $STYLE_CUSTOM_FONTS['text']; ?>;}
	#ix_ .i{min-width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
	#ix_ .i .img_{display:flex;flex-direction:column;justify-content:center;width:<? echo ORG_IMAGE_GALLERY_MAX_WIDTH; ?>px;max-width:100vw;height:100%;opacity:0;transition: opacity 1s ease;}
	#ix_ .i .img_ img{width:100%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0 auto;border:0;}
	.slides_{position:absolute;top:.5em;bottom:.5em;display:flex;flex-direction:row;width:100%;height:calc(100% - 1em);cursor:pointer;}
	.i_control{position:absolute;top:0;bottom:0;width:99vw;height:99vh;z-index:99;}
	#wpg .modal_ .itxt{max-width:<? echo ORG_IMAGE_GALLERY_MAX_WIDTH; ?>px;margin:0;padding:.5em;font-family:var(--font_stack_text);font-size:1em;line-height:1.5;text-align:center;color:#fff;}
	#ix_ .i .img_:before{display:none;}
	#ix_ .i.ix_current .img_:before{display:block;}
	#ix_ .i.ix_current>.img_~.itxt{opacity:1;transition:opacity .6s .5s;}
	#ix_ .i.ix_current .img_{opacity:1;}
	.modal_ .itxt:empty{display:none;}
	#ix_ .close{position:absolute;top:1vh;right:1vw;padding:1rem;z-index:9;}
	#ix_ .close:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#000;opacity:.4;}
	#ix_ .close>span{position:absolute;width:70%;height:70%;top:15%;left:15%;z-index:1;}
	#ix_ .close>span:before,#ix_ .close>span:after{content:'';position:absolute;width:100%;height:1px;top:calc(50% - 1px);left:0;background:#fff;}
	#ix_ .close>span:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
	#ix_ .close>span:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
	#ix_ .close:hover:before{opacity:1;cursor:pointer;}
	#ix_ .fwd,#ix_ .bwd{position:absolute;top:calc(50% - 7px);padding:1rem;z-index:9;}
	#ix_ .fwd{right:1vw;}#ix_ .bwd{left:1vw;}
	#ix_ .fwd:before,#ix_ .bwd:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#000;opacity:.4;}
	#ix_ .fwd>span,#ix_ .bwd>span{position:absolute;width:70%;height:70%;top:15%;left:15%;z-index:1;}
	#ix_ .fwd>span:before,#ix_ .fwd>span:after,.bwd>span:before,.bwd>span:after{content:'';position:absolute;width:80%;height:1px;background:#fff;}
	#ix_ .fwd>span:before,#ix_ .bwd>span:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
	#ix_ .fwd>span:after,#ix_ .bwd>span:after{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
	#ix_ .fwd:hover:before,#ix_ .bwd:hover:before{opacity:1;cursor:pointer;}
	#ix_ .fwd>span:before,#ix_ .fwd>span:after{left:20%;}
	#ix_ .bwd>span:before,#ix_ .bwd>span:after{left:5%;}
	#ix_ .fwd>span:before,#ix_ .bwd>span:after{bottom:20%;}
	#ix_ .fwd>span:after,#ix_ .bwd>span:before{top:20%;}
	@media (min-width:30rem) {
		#ix_ .close,#ix_ .fwd,#ix_ .bwd{padding:2rem;}
	}
<?}if(array_key_exists('bbh_',$classesLoading)){
	// we don't use >>> all the way to the element because we are using an <a> to wrap block level elements and browsers get confused about what that a wraps
	// bbh_ styles are used on the home page of mini-websites
	?>
.g_.bbh_>li{position:relative;max-height:10.25em;overflow:hidden;margin-top:.5em;padding:0 1em;cursor:pointer;list-style:none;-webkit-transition:left 1s ease-in-out;-moz-transition:left 1s ease-in-out;-o-transition:left 1s ease-in-out;transition:left 1s ease-in-out}
.g_.bbh_>li>a{text-decoration:none}
.g_.bbh_>li>a>span{position:absolute;top:0;bottom:0;width:100%;background:#fff;opacity:.01;z-index:9}
.g_.bbh_ .i{width:33%;float:left;margin:.5em 2% 1em -1em;max-height:8.5em;overflow:hidden;}<?/* this lines the image up with the heading on the left, but if all text then will have 1em indent */?>
.g_.bbh_ h3{height:1.3em;overflow:hidden;margin-top:.1em}
.g_.bbh_ p:not(.ft){position:relative;max-height:4.5em;overflow:hidden;margin:0}
.g_.bbh_ p:not(.ft):after{content:' ';position:absolute;text-align:right;text-decoration:underline;color:#97a848;bottom:0;right:0;width:70%;height:1.5em;background:linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 50%)}
.g_.bbh_ .ft{margin-top:.2em}
.g_.bbh_ .ft>span:first-child{margin-left:1em}
.g_.bbh_ .ft>span:last-child{display:inline-block;float:right}
.g_.bbh_ .ft>span:last-child:hover{color:#fc0;}
<?}
if(21=='blog_1'){  /* <============================= !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   What is this???*/ ?>
.blog_1 .blogcat{text-transform:uppercase}
.blog_1 .s_+.s_ .i{width:calc(25% - .5em);float:left;margin:0 .5em 1em 0;}
.blog_1 h4{font-weight:normal}
.blog_1 .blogcats{text-align:center;}
.blog_1>.s_+.s_ li{margin-left:0;}
.blog_1 .blogcats+ul>li>span+span,.blog_1 h4,.blog_1 .mini .blogdate{color:#666;}
.blog_1 ul{list-style-type:none;}
.blog_1 .mini h4{font-size:1em;color:#000;}
.blog_1 .mini .blogdate{font-size:.9em;color:#666;}
.blog_1 .expand a{text-decoration:underline;}
.blog_1 a,.blog_1 .expand .blogcat a{text-decoration:none;}
.blog_1 .list .expand .i{width:100%;float:none;margin:0}
@media (min-width:700px) {
.blog_1 .blogcats{margin-top:.5em;}
.blog_1 .list .i+div{width:54%;float:left;}
.blog_1 .mini .i+div{width:74%;float:left;}
.blog_1 .mini h4{margin-top:0;}
.blog_1 .s_ .i{width:calc(45% - 1em);float:left;margin:0 1em 1em 0;}
.blog_1 .blogcat{display:inline-block;}
}
<?}
// get the aw_mnx widget sorted into the right order so the PROXIMITY is right for the media query and it gets placed in order of all the aw_ classes.  eg aw_20, aw_23, aw_mnx (at say 40), aw_41, aw_60
// LARGER values in aw classes always overrule lower values in aw classes
$mediaControl=[];
// ensure that a break is created for a mediaExpression that does not have a matching classesLoading aw_. E.G. @media (min-width:25em) in sitewide.styles, but no aw_25 in classesLoading
foreach ($mediaExpressions as $key => $value) {
	$break='aw_'.$key;
	if (!array_key_exists($break, $classesLoading)) {
		$classesLoading[$break] = [];
	}
}

foreach($classesLoading as $widget => $widgetInfo){
	$initialWidget=$widget;
	//$widgetInfo=[];
	//$widgetInfo['id']='';
	//$a=explode('~',$widget);
	//if(count($a)>1){
	//	$widget=$a[0];
	//	$widgetInfo['id']=$a[1];
//
	//}
	$widgetInfo['originalWidget']=$widget;
	// Detect the aw_classes and manipulate to be sure they are sorted last
	// THERE IS NO SUFFIX in front of an aw_ class
	if(substr($widget,0,3)=='aw_' || strpos($widget,'_aw_') !==false){
		$a=explode('_',$widget);
		$mediaControl[$a[1]]=false;
		// adding the tilde ~ in front of the aw_classes gets all the aw_classes sorted last
		if(substr($widget,0,7)=='aw_mnx_'){
			$a=explode('_',$widget);
			$widget='~'.array_shift($a).'_0'.WIDGETS_MENU_BREAK.'z_'.implode('_',$a); // we added the z so all the mnx classes sort after all the classes that have the same value as WIDGETS_MENU_BREAK. So, aw_48_pde_m_t0 sorts before aw_mnx_m_t0.
		}else{
			// add zero in front of the aw_value so 045 will sort before 160
			$widget='~'.array_shift($a).'_'.(intval($a[0])<100?'0':'').implode('_',$a);
		}
	}
	if(substr($widget,0,3)=='cu_' || strpos($widget,'_cu_') !==false){
		// adding zero in front of the aw_classes gets all the cu_classes sorted first
		//work on this later
		//$widget='0'.$widget;
	}

	$classesLoading[$widget]=$widgetInfo;
	if($widget!=$initialWidget){
		unset($classesLoading[$initialWidget]);
	}
}
ksort($classesLoading,SORT_STRING); // we need this sorted so we get all our media query rules lumped together
//echo PHP_EOL;print_r(array_keys($classesLoading));echo PHP_EOL;flush();die;
//print_r($mediaControl);print_r($mediaExpressions);print_r($classesLoading);flush();die;
$currentAWClass=false;
$finishedAW=false;

foreach ($classesLoading as $widget => $widgetInfo) {// Huge loop End of this loop marked with comment: LOOPEND2 $widget is a widget stripped of all classes that might occur before aw_ classes
	$originalWidget=$widgetInfo['originalWidget'];
	if($originalWidget=='aw_')continue; // if accidentally placed aw_ in code and forgot the width (aw_50) then prevent code from throwing an error by ignoring aw_
	$a=explode('_',$widget);
	//echo PHP_EOL.'====>'.$originalWidget.'<==';flush();
	if(count($a)>2 && $a[2]=='mnx'){ // if widget is ~aw_45z_mnx_bg_w, get rid of the 45z
		$aw=array_shift($a);array_shift($a);
		$widget=$aw.'_'.implode('_',$a); // this gets rid of the WIDGETS_MENU_BREAK.'z' we inserted after aw_ to get the widget sorted right so aw_ specificity can be respected				
		$a=explode('_',$widget);
	}
	if($a[0]=='~aw'){
		$widget=substr($widget,1);// strip the ~ prefix we added to get the aw_ classes to sort to the end
		if($a[1]=='mnx'){
			$a[1] = WIDGETS_MENU_BREAK;
		}
		if($currentAWClass!==intval($a[1])){
			if($currentAWClass!==false){ // on this line $currentAWClass contains the formerAWClass from the last iteration
				// we dont do this if we had a WIDGETS_MENU_BREAK media query followed by an mnx media query
				echo '}'; // end the previous media query
				$mediaControl[$currentAWClass]='finished';
			}
			$currentAWClass=intval($a[1]);
		}

		if($mediaControl[$currentAWClass]===false){
			$mediaControl[$currentAWClass]='started';
			echo '@media (min-width:'.$currentAWClass.'em){';
			if(array_key_exists($currentAWClass,$mediaExpressions)){ // classes on elements echo AFTER media expressions from stylesheets or libraries, so echo mediaExpressions now
				echo $mediaExpressions[$currentAWClass]."\n";
			}
		}
	}
	$fixedHeader=false;
	$fixedAtWidth=0;
	if(substr($widget,0,5)=== 'blog_'){
		if(!array_key_exists('blog_*',$genericLoaded)){
			$genericLoaded['blog_*']='';
			echo '.blog_ .i:first-child+*{max-height:calc(var(--vertical_rhythm) * 1em);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}';
		}
	}
	if(substr($widget,0,6)==='tile_1'){
		$classesLoading['tile_1']=$classesLoading[$widget];unset($classesLoading[$widget]); // remove the tile specs from the end of tile_1 (e.g. tile_1_12_2)
		/* do this when you want a heading to have a background
		.tile_1 h2,.tile_1 h3,.tile_1 h4{padding:calc(var(--gutter) / 2) calc(var(--gutter));background:#eee;text-align:center;margin-bottom:0;}
		 */?>
		.tile_1 .t,.tile_1 .img_{border-radius:6px;}
		.tile_1 .foot_{border-top:1px solid #ccc;}
		.tile_1 a{text-decoration:none;}
		.tile_1 .t:hover{box-shadow:10px 10px 33px -4px rgba(0,0,0,0.5);}
	<?}if(substr($widget,0,6)==='tile_2'){?>
		$classesLoading['tile_2']=$classesLoading[$widget];unset($classesLoading[$widget]); // remove the tile specs from the end of tile_1 (e.g. tile_1_12_2)
		.tile_2 .t,.tile_2 .img_{border-radius:6px;}
		.tile_2 .t h3{position:absolute;top:0;left:0;width:auto;margin:calc(var(--gutter));z-index:9;background:var(--a);color:var(--w);border-radius:6px;padding:.2em.5em;}
		.tile_2 .t:hover{box-shadow:10px 10px 33px -4px rgba(0,0,0,0.5);}
		.js_ .i .img_ img[jenisys_src][src=""]{transform: translateY(20%);}<?/* this moves the alt text below the h3 hovering over the image */?> 
	<?}	
	/* =============================================== CLOSES (cause following contents to disappear)  =================================================== */
	if(strpos($widget,'cls_') === 0){// fixed headers have a cls_
		if(strpos($widget,'cls_') === 0){
			echo '[id^=cls_]{position:absolute;right:-999em;visibility:hidden;height:0;}';
			echo '[id^=cls_]+div{transition:height .5s ease;}';
			echo '#body>#wpg [id^=cls_]:checked+div{height:0;margin:0;padding:0;border:0;overflow:hidden;}'; // this is for all alerts
			echo '.by_{transition:padding-top .5s ease;}'; // this is for alert above header
			echo '#body [id^=cls_]:checked~.h_{top:0;}'; // this is for alert above header
			echo '#body [id^=cls_]:checked~.by_{padding-top:0;}'; // this is for alert above header
			echo '.'.$widget.':hover{cursor:default;}';
		}
	}

	/* =============================================== TABLE BREAKS =================================================== */
	if(substr($widget,0,4)=='tbr_'){
		$a=explode('tbr_',$widget);
		if($a[1]){
			echo '@media (min-width:';echo $a[1];echo 'em){'
				.'.'.$widget.'.table{display:table;table-layout:fixed;position:relative;width:100%;clear:both;border-spacing:0;border:1px solid #ddd;}'
				.'.'.$widget.'>.thead{display:table-header-group;}.'.$widget.'>.tbody{display:table-row-group;}.'.$widget.'>.tbody>ul>li:before{display:none;}.'.$widget.'.table>li>ul{display:table-row;}.'.$widget.'.table>li>ul>li{display:table-cell;padding:.5em;}';
			echo '}';
		}
	}
	/* =============================================== ELLIPSES and MULTI-LINE ELLIPSES =================================================== */
	if(substr($widget,0,6)==='ellip_') {
		$a=explode('ellip_',$widget); // ellipsis ...
		if($a[1]===''){
			echo '.ellip_{max-height:'.STYLE_VERTICAL_RHYTHM.'em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}';
		}else{
			$a=explode('_',$a[1]);
			if(count($a)>1){
				$color='#'.$a[1];
			}else{
				$color='#fff';
			}
			echo '.'.$widget.' br{display:none;}';
			echo '.'.$widget.'{position:relative;max-height:'.STYLE_VERTICAL_RHYTHM * $a[0].'em;overflow:hidden;}';
			//echo '.'.$widget.':before{content:\' ...\';display:inline-block;position:absolute;bottom:.1em;right:0;background-color:'.$color.';}';
			echo '.'.$widget.':after{content:\' ...\';display:inline-block;position:absolute;bottom:.1em;right:0;background-color:'.$color.';color:#222;}';
		}
	}
	/* =============================================== ACCORDIANS =================================================== */
	if(substr($widget,0,4)=='acc_') {
		if($widget=='acc_'){?>    <?/* eg funeral homes */?>
			#body [name="acc_"]{position:absolute;left:-9999px;visibility:hidden;}
			[name="acc_"]+div>label{position:relative;display:block;}
			[name="acc_"]+div>label+div{max-height:0;overflow:hidden;transition:max-height .5s ease;}
		<?}
		if($widget=='acc_1'){?>    <?/* eg westward bound */?>
			#body [name^="acc_"]{position:absolute;left:-9999px;visibility:hidden;}
			#body [name^="acc_"]+label{display:block;margin:.5em 0 1em 0;padding:.5em;font-size:1.1em;}
			[name^="acc_"]+label+div{max-height:0;overflow:hidden;transition:.5s ease;}
			.acc_1 label{position:relative;display:block;margin:.5em 0 1em 0;padding:.5em;font-size:1.1em;}
			.acc_1 label:after{content:'+';position:absolute;right:.5em;width:1em;height:1em;top:.2em;color:#fff;text-align:center;border-radius:50%;background:#76b38f;box-shadow:-1px -1px 4px 1px rgba(0,0,0,0.22) inset;font-size:1.8em;line-height:.95;}
			#html>#body .acc_1 label+div+*{margin-top:1em;}
			.acc_1 input:checked+label:after{content:'-';}
			.acc_1 h2{padding:.5em 0;}
		<?}	
		if($widget=='acc_2'){?>   <?/* used by jensiis */?>
			.acc_2 input[type='checkbox'][name^="acc_"]+label:before{content:'+';margin-right:1em;color:blue;font-size:1.8em;vertical-align:middle;}
			.acc_2 input[type='checkbox'][name^="acc_"]:checked+label:before{content:'-';color:#222;}
		<?}
	} 
	if($widget=='dd_'){?>
		.dd_>input{position:absolute;left:-9999px;visibility:hidden;}
		.dd_>label{display:block;}
		.dd_>label:after{content:'';display:inline-block;vertical-align:middle;width:0;height:0;margin-left:0.3em;border:0;transition:transform 0.6s;border:0.6em solid transparent;border-top-color:var(--black);border-width:0.6em 0.4em;border-bottom:0;opacity:.2;}
		.dd_>input:checked+label:after{transform:rotate(180deg);}
		.dd_>input~div{height:0;transform:scaleY(0);}
		.dd_>input:checked~div{height:auto;transform:scaleY(1);transition:transform .3s ease;transform-origin:center top;}
	<?}
	/* =============================================== INDENTS =================================================== */
	if(substr($widget,0,3)=='ind') {
		if($widget=='ind0'){echo '.wpg .ind0{margin-left:0;}';}
		if($widget=='ind1'){echo '.wpg .ind1{margin-left:calc(var(--gutter) + 3%);}.ms_ .ind1{margin-left:0;}.ms_ .ind1>li{padding-left:calc(var(--gutter) + 3%);}';}
		if($widget=='ind2'){echo '.wpg .ind2{margin-left:calc(var(--gutter) + 6%);}.ms_ .ind2{margin-left:0;}.ms_ .ind2>li{padding-left:calc(var(--gutter) + 6%);}';}
		if($widget=='ind3'){echo '.wpg .ind3{margin-left:calc(var(--gutter) + 9%);}.ms_ .ind3{margin-left:0;}.ms_ .ind3>li{padding-left:calc(var(--gutter) + 9%);}';}
		if($widget=='ind4'){echo '.wpg .ind4{margin-left:calc(var(--gutter) + 12%);}.ms_ .ind4{margin-left:0;}.ms_ .ind4>li{padding-left:calc(var(--gutter) + 12%);}';}
	}
	/* =============================================== DATE AND TIME  =================================================== */
	/* dpik is the bar on top of the date picker. dpick_ is the date picker symbol in a form */
	if(substr($widget,0,3)=='dt_'||substr($widget,0,3)=='tm_'){/* date or time */?>
		[class^="dt_"]>span,[class^="tm_"]>span{position:relative;display:inline-block;white-space:nowrap;}
		[class^="dt_"]>span>.dpick_,[class^="tm_"]>span>.dpick_{position:absolute;bottom:0;right:-2.2em;}
		[class^="dt_"].sel>span:before,[class^="tm_"].sel>span:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:rgba(0,0,0,.2);}
	<?}
	/* ====================================================    GALLERIES  ============================================================================================	*/
	if(substr($widget,0,2)=='g_'){
		if(!array_key_exists('g_*',$genericLoaded)){
			$genericLoaded['g_*']=''; ?>
			.wpg [class*=" g_"],.wpg [class^="g_"]{display:flex;flex-direction:row;width:100%;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:stretch;} 
			<?/* make this custom styling in the gallery html 
			[class*=" g_"].grow .i:hover img,[class^="g_"].grow .i:hover img{width:110%;height:110%;top:-5%;left:-5%;transition:all 500ms;} 
			[class*=" g_"] h1:first-child,[class^="g_"] h1:first-child,[class*=" g_"] h2:first-child,[class^="g_"] h2:first-child,[class*=" g_"] h3:first-child,[class^="g_"] h3:first-child{margin-top:0;} */?>
		<?}
		if(1==2){
			$margin=false;
			// figure out what the margin is so we can set 
			foreach($STYLE_CSS_PATTERNS as $key => $value){
				if($key==$widget){
					echo $value;
					$styles=explode('{',$value)[1];$styles=explode('}',$styles)[0];
					$margin=explode('margin:',$styles);
					$margin=$margin[1]?explode(';',$margin[1])[0]:false;
				}
			}
			// styles specified as descending or specified on element should override STYLE_CSS_PATTERNS$widgetInfo
			
			$up=+explode('g_u',$widget)[1];
			$flexBasis='flex-basis:calc('.round(100/$up,3).'%';
			if($margin)$flexBasis.= ' - ('.$margin.' * 2)';
			$flexBasis.=');';
			echo '.wpg .x_.'.$widget.'>*{'.$flexBasis.';flex-grow:1;}';
		}
	}
	//======================================================== STYLING BASED ON CLASS NAMES ==================================================
	$classes=explode(' ','acc_ af_ bf_ bfw_ c9_ cf_ co_ db dd_ df dg dib din dpn_ dn hero_ iico_ icon_ ico9_ ide_ lh_ nb plx_ r_ tdc tde_ tdn tdl tdu txc txl txr txu xde_ wno wnw');// tde_ and ide_ can be used alone
	$classesDescendant=explode(' ','ade_ avde_ bde_ dc_ ddc_ dde_ de_ fde_ hde1_ hde2_ hde3_ hde4_ hde5_ hde6_ ide_ ifde_ iide_ ilde_ imde_ incde_ inde_ inrde_ iode_ lbde_ lde_ lude_ mde_ nde_ pde_ rde_ scde_ sdde_ sde_ tdde_ tde_ thde_ trde_ vde_ xde_');
	$classesStarting=explode(' ','af_ and_ ani_ as_ aw_ b_ bf_ bfw_ bg_ bs_ btn_ c9_ c9f_ cc_ cf_ ck_ cr_ ctf_ cu_ df_ dg_ fai_ fac_ fas_ fbs_ fdr_ ff_ fgp_ fgr_ fjc_ fl_ fs_ fsh_ fw_ fwr_ fx_ fz_ gb_ h_ hv_ i_ ii_ iico_ icon_ ico9_ ind_ js_ of_ or_ lh_ ls_ m_ mup_ p_ plx_ o_ ps r_ s_ sc_ sq_ ssq_ tr_ trn_ trs_ ts_ tsh_ tt_ u va_ vb_ w_ z_');
	$needStyle=false;
	$descendant='';
	if(in_array($widget,$classes))$needStyle=true;
	foreach($classes as $class){
		if(strpos($widget,$class) === 0){
			$needStyle=true;break;
		}
	}
	foreach($classesStarting as $class)if( ( strpos($widget,$class)===0 || strpos($widget,'_'.$class)!==false ) && $widget!=$class){$needStyle=true;break;}
	foreach($classesDescendant as $class)if( ( strpos($widget,$class)===0 || strpos($widget,'_'.$class)!==false ) && $widget!=$class){$descendant=$class;$needStyle=true;break;}
	while($needStyle){
		$prefix='';
		$hover='';
		$afbf='';
		$cf=false;
		$hasMDE=false;
		
		//====================== Recognize  AW_ Classes THIS MUST BE FIRST!!! ======================================================================
		$awmup='.';
		$c9f=strpos($widget,'c9f_')!==false; // fill colors for svg
		if(substr($widget,0,3)=='aw_'){
			$a=explode('_',$widget);
			if($a[1]=='mnx')$a[1]=WIDGETS_MENU_BREAK;
			$awmup='.aw_'.$a[1];
			array_shift($a);array_shift($a); // remove the aw_?? prefix
			$widget=implode('_',$a);
		}
		//=======================  Recognize .js_ prefix ======================================================================
		if(substr($widget,0,3)=='js_'){
			$prefix='.js_ ';
			$widget=substr($widget,3); // remove js_ from the widget
		}
		//====================== DETECT SCROLL  =================================
		if( strpos($widget,'sc_') === 0 ){
			$prefix.='.sc_ ';
			$widget=substr($widget,3); // remove sc_ from the widget
		}
		// if .js_ and .sc_ are on the same widget then we can't have a space between .js_ and .sc_
		if($prefix=='.js_ .sc_'){
			$prefix=str_replace(' ','',$prefix);
		}
		//====================== PROCESS DESCENDANTS  =================================
		if( $descendant && strpos($widget,$descendant) === 0){
			$widget=substr($widget,strlen($descendant)); // remove descendant from the widget
			if($descendant=='ade_'){$descendant=' a';}
			if($descendant=='ide_'){$descendant=' .i';}
			if($descendant=='lde_'){$descendant=' li';}
			if($descendant=='vde_'){$descendant=' a:visited';}
			if($descendant == 'lude_') $descendant=' ul';
			if($descendant == 'lbde_') $descendant=' label';
			if($descendant == 'inde_') $descendant=' input';
			if($descendant == 'incde_') $descendant=' input[type="checkbox"]';
			if($descendant == 'inrde_') $descendant=' input[type="radio"]';
			if($descendant == 'mde_') {$hasMDE=true;$descendant=' input';} // form field descendants
			if($descendant == 'pde_') {$descendant=' p';}
			if($descendant == 'pide_') {$descendant=' picture';}
			if($descendant == 'scde_') {$descendant=' section';}
			if($descendant == 'sde_'){$descendant=' span';}// REMEMBER!!!! sde works on all descendant spans, use sdde_ if you want child spans
			if($descendant == 'sdde_'){$descendant='>span';}
			if($descendant == 'tdde_'){$descendant=' td';}
			if($descendant == 'thde_'){$descendant=' th';}
			if($descendant == 'trde_'){$descendant=' tr';}
			if($descendant == 'bde_'){$descendant=' button';}
			if($descendant == 'rde_'){$descendant=' textarea';}
			if($descendant == 'xde_'){$descendant=' .x_';}
		}
		//====================== DETECT IMPORTANT  =================================
		if( strpos($widget,'i_') === 0 && $widget !=='i_'){
			$prefix.='div ';
			$widget=substr($widget,2); // remove i_ from the widget
		}
		if( strpos($widget,'ii_') === 0 && $widget !=='ii_'){
			$prefix.='#body ';
			$widget=substr($widget,3); // remove ii_ from the widget
		}

		if( strpos($widget,'ii_') === 0){
			$prefix.='.wpg div ';
			$widget=substr($widget,3); // remove ii_ from the widget
		}
		//====================== DETECT HOVER  =================================
		if( strpos($widget,'hv_') === 0 ){
			$hover=':hover';
			$widget=substr($widget,3); // remove hv_ from the widget
		}
		//====================== DETECT Before/after, followed by other widget segments  ==========================
		if( strpos($widget,'af_') === 0 && $widget != 'af_'){
			$afbf=':after';
			$widget=substr($widget,3);
		}
		if( strpos($widget,'bf_') === 0 && $widget != 'bf_'){
			$afbf=':before';
			$widget=substr($widget,3);
		}
		if( strpos($widget,'bfw_') === 0 && $widget != 'bfw_'){
			// $afbf=':before';  we don't add :before here because we want a position relative on the .bfw_ element
			$widget=substr($widget,4);
		}
		if( strpos($widget,'cf_') === 0 && $widget != 'cf_'){
			$afbf=':before';
			$cf=true;
			$widget=substr($widget,3);
		}
		$suffix=$hover.$afbf;
		if($descendant=='avde_'){
			$prefix.='.'.$originalWidget.' a'.$suffix.',.'.$originalWidget.' a:visited'.$suffix;
		}else{
			$prefix.='.'.$originalWidget.$descendant.$suffix;
		}	
		if($hasMDE){
			//$descendant was 'input'
			$prefix.=', .'.$originalWidget.' select'.$suffix;	
			$prefix.=', .'.$originalWidget.' textarea'.$suffix;	
		}
        //============================== DETECT custom class =========================
		if( strpos($widget,'cu_') === 0){
			//$prefix.=' .'.$widget;			
			//require ZDEF_PATH_TO_SUBDOMAIN.'source/css/'.ORG_CPANEL_ACCOUNT.'.customcss.php';
			break;
		}

		//==============================================================================
		//                Finished building prefix 
		//==============================================================================

		//===================== PSEUDO CLASSES ======================
		if(strpos($widget, 'ps') === 0){
			if(strpos($widget, 'psv_') ===0){
				$prefix.=':visited';
				$widget=substr($widget,4);
			}	
			if(strpos($widget, 'pso_') ===0){
				$prefix.=':open';
				$widget=substr($widget,4);
			}	
		}


		//if($descendant==' td'){echo PHP_EOL.$prefix.'    '.$widget;flush();die;}
		// ******** STANDALONE AF_, BF_, CF_  ************
		if($widget=='bf_' ){
			echo $prefix.':before{content:\'\';position:absolute;top:0;right:0;bottom:0;left:0;}';
			break;
		}
		if(strpos($prefix,'bfw_')!==false){ // :before with width that expands to edge of viewport on either side.
			if($widget=='n'){
				echo $prefix.':before{display:none;}';
				break;
			}			
			echo $prefix.'{position:relative;}';
			$a=explode('_',$widget);
			if(count($a)<2){
				$bg=($widget=='bfw_')?'':'background:var(--'.$widget.');';
			}else{
				$bg=($widget=='bfw_')?'':'background:var(--'.$a[0].');border:1px solid var(--'.$a[1].');';
			}
			echo $prefix.':before{content:\'\';position:absolute;width:var(--vww);top:0;bottom:0;left:calc(-1*(var(--vww) - 100%)/2);'.$bg.'z-index:-1;}';// don't even think about changing z-index to 0
			break;
		}
		if($widget=='af_' ){
			echo $prefix.':after{content:\'\';position:absolute;width:100%;}';
			break;
		}
		if($widget=='cf_' ){
			echo $prefix.':before,'.$prefix.':after{content:\'\';position:absolute;width:100%;}';
			break;
		}
		if(strpos($widget, 'cf_') === 0){$prefix=$prefix.':before,'.$prefix.':after';}

		// ******** CUSTOM CLASSES  ************
	
		if( strpos($widget,'c9_') === 0 || $c9f ){  // color
			if($c9f){
				echo $prefix.'{fill:var(--'.substr($widget,4).');}'; //svg fill
			}else{
				echo $prefix.'{color:var(--'.substr($widget,3).');}';
			}
		}

		if(strpos($widget, 'and_') === 0){ /* animation delay */
			echo $prefix.'{animation-delay:'.str_replace('d','.',explode('_',$widget)[1]).'s;}';
			break;
		}
		if(substr($widget,0,3)=='bg_'){
			$widget=substr($widget,3);
			if($widget=='t'){
				echo $prefix.'{background:transparent;}';
			}else
				//if(array_key_exists($widget,$STYLE_CSS_VARS)){
				echo $prefix.'{background:var(--'.$widget.');}';
			break;
		}
		if(substr($widget,0,3)=='bs_'){
			if(array_key_exists($widget,$STYLE_CSS_VARS)){
				echo $prefix.'{box-shadow:'.$STYLE_CSS_VARS[$widget].';}';
			}
			break;
		}
		if(strpos($widget,'cc_')===0){
			$a=explode('_',$widget);
			echo $prefix.'{column-count:'.$a[1].';column-width:'.parseSpec($a[2]).';}';
			echo $prefix.'>li{margin-left:3%;margin-right:3%;}';
			break;
		}
		if(strpos($widget,'cr_')===0){ /* cursor */
			$x=substr($widget,3);
			if($x=='d') $cursor='default';
			if($x=='p') $cursor='pointer';
			echo $prefix.'{cursor:'.$cursor.'}';
			break;
		}
		if($widget=='db'){
			echo $prefix.'{display:block;}';
			break;
		}
		if($widget=='df'){
			echo $prefix.'{display:flex;flex-wrap:wrap;}';
			break;
		}

		if(substr($widget,0,3)=='df_'){// display: flex shorthand: flex,direction,justify-content,wrap,align-items,gap 
			if(ctype_alpha(substr($widget,3,1))){
				$shortForm=true;
				echo $prefix.'{display:flex;';
				if(strlen($widget)>3){ 
					if(substr($widget,3,1)=='c'){
						echo 'flex-direction:column;';
					}else{
						// 'r' row is default
						echo 'flex-direction:row;';
					}
				}
				$rule=substr($widget,4,1);
				if(strlen($widget)>4){ 
					echo 'justify-content:'.flexRule($rule);
				}
				if(strlen($widget)>5){ 
					$nowrap=substr($widget,5,1)=='n';
					if($nowrap){
						echo 'flex-wrap:nowrap;';
					}else{
						echo 'flex-wrap:wrap;';
					}
				}
				if(strlen($widget)>6){ 
					$rule=substr($widget,6,1);
					echo 'align-items:'.flexRule($rule);
				}
				if(strlen($widget)>7){ 
					$rule=substr($widget,7);
					echo 'gap:'.parseSpec($rule);
				}
				//$widget=substr($widget,min(strlen($widget),7));
			}else{
				//$widget=substr($widget,3);
				$shortForm=false;
			}
			if($shortForm)echo '}';
			break;
		}
		if($widget=='dib'){
			echo $prefix.'{display:inline-block;width:auto;}';
			break;
		}
		if($widget=='din'){
			echo $prefix.'{display:inline;}';
			break;
		}
		if($widget=='dn'){
			echo $prefix.'{display:none;}';
			break;
		}

		if(strpos($widget, 'fac_') === 0){ // align-content
			$rule=substr($widget,4);
			echo $prefix.'{align-content:'.flexRule($rule).'}';
			break;
		}
		if(strpos($widget, 'fai_') === 0){ // align-items
			$rule=substr($widget,4);
			echo $prefix.'{align-items:'.flexRule($rule).'}';
			break;
		}
		if(strpos($widget, 'fas_') === 0){ // align self
			$rule=substr($widget,4);
			echo $prefix.'{align-self:'.flexRule($rule).'}';
			break;
		}
		if(strpos($widget, 'fbs_') === 0){ // flex basis
			if($widget=='fbs_a'){
				echo $prefix.'{flex-basis:auto;}';
				break;
			}
			//if(substr($widget,0,5)=='fbs_e'){echo '0===>'.$widget.' <==   ';}
			$spec=str_replace('d','.',substr($widget,4));
			if(!ctype_alpha(substr($spec,0,1)))$spec='p'.$spec; //default is percent
			$value=+substr($spec,1);
			//if(substr($widget,0,5)=='fbs_e'){echo '1===>'.$widget.' == spec  '.$spec.' === value '.$value.'   ';}
			if($value==33)$value=33.333;
			if($value==16)$value=16.666;
			$css=parseSpec(substr($spec,0,1).$value);
			//if(substr($widget,0,5)=='fbs_e'){echo $css;flush();die;}
			echo $prefix.'{flex-basis:'.$css.';flex-grow:0;flex-shrink:0;}';
			break;
		}
		if(strpos($widget, 'fdr_') === 0){ // flex direction
			$rule=substr($widget,4);
			echo $prefix.'{flex-direction:';
			if($rule=='r') echo 'row;';
			if($rule=='c') echo 'column;';
			echo '}';
			break;
		}
		if(substr($widget,0,3)=='ff_'){
			$x=substr($widget,3);
			if($x=='h')$x='headings';
			if($x=='t')$x='text';
			if($x=='l')$x='logo';
			if($x=='m')$x='menu';
			if($x=='o1')$x='other1';
			if($x=='o2')$x='other2';
			if($x=='o3')$x='other3';
			echo $prefix.'{font-family:"'.$STYLE_CUSTOM_FONTS[$x].'";}';
			break;
		}
		if(strpos($widget, 'fgr_') === 0){ // flex grow
			$spec=substr($widget,4);
			echo $prefix.'{flex-grow:'.$spec.'}';
			break;
		}
		if(strpos($widget, 'fgr_') === 0){ // gap
			$spec=substr($widget,4);
			echo $prefix.'{gap:'.$spec.'}';
			break;
		}
		if(strpos($widget, 'fjc_') === 0){ // justify contents
			$rule=substr($widget,4);
			echo $prefix.'{justify-content:'.flexRule($rule).'}';
			break;
		}
		if(strpos($widget, 'fl_') === 0) /* Filter */ {
			$spec=substr($widget,3);
			if($spec=='u'){
				echo $prefix.'{filter:unset;}';
			}else{
				echo $prefix.'{filter:var(--fl_'.$spec.');}';
			}
			break;
		}
		if(strpos($widget, 'fs_') === 0) /* Font Style */ {
			$a=explode('_',$widget);
			if($a[1]=='it') echo $prefix.'{font-style:italic;}';
			break;
		}
		if(strpos($widget, 'fsh_') === 0){ // flex shrink
			$spec=substr($widget,4);
			echo $prefix.'{flex-shrink:'.$spec.'}';
			break;
		}
		if(strpos($widget, 'fw_') === 0) /* Font Weight */ {
			$a=explode('_',$widget);
			echo $prefix.'{font-weight:'.($a[1]=='n'?'normal':($a[1]=='b'?'bold':$a[1])).';}';
			break;
		}
		if(strpos($widget, 'fwr_') === 0) /* Flex wrap */ {
			$spec=substr($widget,4);
			if($spec=='w')$spec='wrap';else $spec='nowrap';
			echo $prefix.'{flex-wrap:'.$spec.'}';
			break;
		}
		if(strpos($widget, 'fx_') === 0){ // flex
			$spec=substr($widget,3);
			echo $prefix.'{flex:'.$spec.'}';
			break;
		}
		if(strpos($widget,'fz_')===0){
			echo $prefix.'{font-size:'.parseSpec(substr($widget,3)).';}';
			break;
		}
		if(strpos($widget,'co_')===0){// coerce
			// the following 2 lines are generic. Suppress after the first co_ !!!!!!!!!!!!
			echo '.body [class*="_co_"] .x_{flex-direction:row;align-items:stretch;}';
			echo '.body [class*="_co_"] .i,.body .i[class*="_co_"],#body [class*="_co_"] .img_{flex-grow:1;overflow:hidden;}';// DO NOT even think about changing this to 0
			echo $prefix.' img{width:auto;height:auto;min-width:100%;min-height:100%;top:50%;left:50%;transform:translate(-50%,-50%);}';/* we settled on the width, height scheme because our images are always wider than they need to be. */
			echo $prefix.' .img_+p{margin-bottom:0;}';
			break;
		}
		if(strpos($widget,'hero_')===0){
			echo $prefix.'.t_,'.$prefix.'.f_{display:flex;flex-direction:row;align-items:stretch;max-width:100%;z-index:1;}'; // you can put a hero in a frame, but it makes sense to put it in a tier
			echo '.'.$originalWidget.' .i{flex-direction:row;max-width:none;z-index:-1;}';
			echo $prefix.' .img_{height:auto;align-self:stretch;padding-bottom:unset;overflow:hidden;}';
			echo $prefix.' .img_ img{width:auto;min-height:100%;min-width:100%;}';
			//foreach($STYLE_CSS_PATTERNS as $key => $value){if($key=='hero_')echo $value;}
		}
		if(strpos($widget,'iico_')===0){ // inline icon with background on icon
			echo $prefix.','.$prefix.' a{display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;text-decoration:none;}';
			echo $prefix.' .img_{flex-grow:0;}'; // need this if have a background on the icon and don't want it stretched out of shape
			break;
		}
		/* u_xx is OBSOLETE. Get rid of this as soon as you fix Raging Bull */
		if(strpos($widget,'u2')===0 || strpos($widget,'u3')===0 || strpos($widget,'u4')===0){ // column definition
			$columnCount=intval(substr($widget,1,1));
			$a=explode('_',$widget);
			echo '.'.$widget.'{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;}';
			if(count($a)>1){
				echo '@media (min-width:'.$a[1].'em){';
				if($columnCount<4)echo '.'.$widget.'{flex-wrap:nowrap;}'; // if you want to vary the column sizes of a 4up you'll need to rethink this
				echo '.'.$widget.' .x_{width:';
				if($columnCount==2 || $columnCount==4 )echo '50%;';
				if($columnCount==3)echo '33.33%;';
				echo '}}';
			}
			if(count($a)>2){
				echo '@media (min-width:'.$a[2].'em){.'.$widget.' .x_{width:25%;}}'; // 4up
			}
		}

		if($widget == 'ind_'){ /* indent  */
			$percentage=substr($widget,4)*3;
			echo $prefix.'{margin-left:calc(var(--gutter) + '.$percentage.'%)}';
			break;
		}
		if(strpos($widget,'lh_')===0) { // line height adjust
			$a=explode('_',$widget);
			if(array_key_exists(1,$a)){
				$value=str_replace('d','.',$a[1]);
				if(substr($value,0,1)=='v')$value=parseSpec($value);
				echo $prefix.'{line-height:'.$value.';}';
			}
			break;
		}
		if(strpos($widget,'ls_')===0) { // letter-spacing
			$a=explode('_',$widget);
			if(array_key_exists(1,$a)){
				//$value=str_replace('d','.',$a[1]);
				//if(substr($value,0,1)=='v')
				$value=parseSpec($a[1]);
				echo $prefix.'{letter-spacing:'.$value.';}';
			}
			break;
		}
		if($widget=='nb'){
			echo $prefix.'{list-style-type:none;}';
			break;
		}
		if(substr($widget,0,2)=='o_')/* opacity */ {
			if($widget=='o_'){
				echo $prefix.'{opacity:1;}';
			}else{
				$a=explode('_',$widget);
				echo $prefix.'{opacity:0.'.$a[1].';}';
			}
			break;
		}	
		if(strpos($widget,'of_h')===0){
			$ofDir=substr($widget,-1)=='x'?'-x':(substr($widget,-1)=='y'?'-y':'');
			echo $prefix.'{overflow'.$ofDir.':hidden;}';
			break;
		}
		if(strpos($widget,'of_v')===0){
			$ofDir=substr($widget,-1)=='x'?'-x':(substr($widget,-1)=='y'?'-y':'');
			echo $prefix.'{overflow'.$ofDir.':visible;}';
			break;
		}
		if(strpos($widget,'of_s')===0){
			$ofDir=substr($widget,-1)=='x'?'-x':(substr($widget,-1)=='y'?'-y':'');
			echo $prefix.'{overflow'.$ofDir.':scroll;}';
			break;
		}
		if(strpos($widget, 'or_') === 0){ /* order */
			echo $prefix.'{order:'.explode('_',$widget)[1].';}';
			break;
		}
		if(strpos($widget,'plx_') !== false){ // specific parallax to invoke when aw_ is reached. When no .js this is just rendered as a natural image because there is no js to determine the exact size of the image needed
			echo '.plxl_'.$prefix.'{background:transparent;}'; // we use js to add plxl_ to the image AFTER the dom is rendered. This forces the image to be very low in priority
			echo '.plxl_'.$prefix.' .i{position:fixed;top:0;height:100vh;left:0;width:100vw;z-index:-1;}';
			echo '.plxl_'.$prefix.' .img_{height:100vh;padding-bottom:0;}';
		}
		if($widget=='r_'){
			echo $prefix.'{position:relative;}';
			break;
		}
		if($widget=='r_a'){
			echo $prefix.'{position:absolute;}';
			break;
		}
		if($widget=='r_f'){
			echo $prefix.'{position:fixed;}';
			break;
		}
		if($widget=='r_s'){
			echo $prefix.'{position:sticky;}';
			break;
		}
		if($widget=='r_t'){
			echo $prefix.'{position:static;}';
			break;
		}
		if(strpos($widget, 'sq_') === 0){ /* square */
			$widget=substr($widget,3);
			$x=parseSpec($widget,3);
			if($x==0){// default to ems if no units specified
				$x=str_replace('d','.',$widget).'em';
			}
			echo $prefix.'{width:'.$x.';height:'.$x.';}';
			break;
		}
		if(strpos($widget, 'ssq_') === 0){ /* simple square OBSOLETE */
			$widget=substr($widget,4);
			$x=parseSpec($widget);
			if($x==0){// default to ems if no units specified
				$x=str_replace('d','.',$widget).'em';
			}
			echo $prefix.'{width:'.$x.';height:'.$x.';}';
			break;
		}
		$mouse=$hover?'.mouse_ ':''; //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		if(strpos($widget,'tdc')===0){
			$a=explode('-',$widget);
			if(count($a)>1){
				$v=$a[1];
				echo $prefix.'{text-decoration-color:var(--'.$v.');}';
			}
			break;
		}
		if($widget=='tdn'){
			echo $prefix.'{text-decoration:none;}';
			break;
		}
		if($widget=='tdl'){
			echo $prefix.'{text-decoration:line-through;}';
			break;
		}
		if($widget=='tdu'){
			echo $prefix.'{text-decoration:underline;}';/* we need this when we want an <a> in a heading to be underlined */
			break;
		}
		if(strpos($widget,'trn_')===0){
			$widget=str_split(substr($widget,4));
			echo $prefix.'{transition:';
			$element=array_shift($widget);
			if($element=='a')$element='all';
			$duration='';
			while(ctype_digit($widget[0])){$duration.=array_shift($widget);}
			if($widget[0]=='d'){
				//this is a decimal point
				$duration.='.';
				array_shift($widget);
				while(ctype_digit($widget[0])){$duration.=array_shift($widget);}
			}
			echo ' '.$duration.'s';
			$timing=array_shift($widget);
			$timing='ease';
			echo ' '.$timing;
			$delay=str_replace('d','.',implode('',$widget));
			echo ' '.$delay;
			echo '}';
			break;
		}
		if(strpos($widget,'tsh_')===0){
			$widget=substr($widget,4);
			$a=explode('_',$widget);
			echo $prefix.'{text-shadow:'.$a[0].'px '.$a[1].'px var(--'.$a[2].');}';
		}
		// =============================== TRANSFORMS =========================================
		$segments=explode('_',$widget); // can't use $originalWidget here because .by_ might have set it to by_
		$transforms=[];$css='';
		$transformPrefixes=array('tt','tr','ts','tw','tn');
		while(count($segments)>0){
			if(!in_array($segments[0],$transformPrefixes)){
				array_shift($segments);// get rid of all the possible prefixes
				continue;
			}
			if($segments[0]=='tn'){
				echo $prefix.'{transform:none}';
				break;
			}
			if($segments[0]=='tt'){
				$segments[1]=strtolower($segments[1]);
				if($segments[1]=='xc'){$transforms[]='translateX(-50%)';$css.='left:50%;';}
				elseif($segments[1]=='yc'){$transforms[]='translateY(-50%)';$css.='top:50%;';}
				elseif($segments[1]=='ac'){$transforms[]='translate(-50%,-50%)';$css.='top:50%;left:50%;';}
				else{
					$dimension=substr($segments[1],0,1);
					$spec=substr($segments[1],1);
					$spec=parseSpec($spec);
					if($dimension=='a'){
						$transforms[]='translate('.$spec.','.$spec.')';
					}else{
						$transforms[]='translate'.strtoupper($dimension).'('.$spec.')';

					}
				}
				array_shift($segments);
				array_shift($segments);
				continue;
			}
			if($segments[0]=='tr'){
				$rotate=str_replace('d','.',$segments[1]).'deg';
				$transforms[]='rotate('.$rotate.')';
				array_shift($segments);
				array_shift($segments);
				continue;
			}
			if($segments[0]=='ts'){
				$dimension=substr($segments[1],0,1);
				$scale=str_replace('d','.',substr($segments[1],1));
				if($dimension=='x'){$transforms[]='scaleX('.$scale.')';}
				elseif($dimension=='y'){$transforms[]='scaleY('.$scale.')';}
				elseif($dimension=='a'){$transforms[]='scale('.$scale.','.$scale.')';} // if ts_a20_-45 then transform x 20, transform&-45
				array_shift($segments);
				array_shift($segments);
				continue;
			}
			if($segments[0]=='tw'){ // transform skew is defined as tw_?20 or tw_?20_?40 where ? is the unit
				if($widget=='tw_0'){$transforms[]='skew(0)';continue;}
				array_shift($segments);
				$specs=[];
				foreach($segments as $key => $spec){
					if(substr($spec,0,1)=='t')break;// we just ran into the next transform declaration
					if(substr($spec,0,1)=='r')$specs[]=str_replace('d','.',substr($spec,1)).'rad'; // str_replace takes care of decimal conversion
					if(substr($spec,0,1)=='d')$specs[]=str_replace('d','.',substr($spec,1)).'deg';
					if(substr($spec,0,1)=='n')$specs[]=str_replace('n','.',substr($spec,1)).'turn';
					array_shift($segments);					
				}
				$transforms[]='skew('.implode(',',$specs).')';
				continue;
			}
		}
		if(count($transforms)>0){
			echo $prefix.'{transform:'.implode(' ',$transforms).';'.$css.'}';
			break;
		}
		if($widget=='txc'){
			echo $prefix.'{text-align:center;}';
			break;
		}
		if($widget=='txl'){
			echo $prefix.'{text-align:left;}';
			break;
		}
		if($widget=='txr'){
			echo $prefix.'{text-align:right;}';
			break;
		}
		if($widget=='txu'){
			echo $prefix.'{text-transform:uppercase;}';
			break;
		}
		if(strpos($widget,'va_')===0) { // vertical align
			$widget=substr($widget,3);
			echo $prefix.'{vertical-align:';
			if($widget=='m')echo 'middle';
			if($widget=='b')echo 'baseline';
			if($widget=='t')echo 'top';
			if($widget=='o')echo 'bottom';
			echo ';}';
			break;
		}
		if(strpos($widget,'vb_')===0) { // visibility
			$widget=substr($widget,3);
			echo $prefix.'{visibility:';
			if($widget=='v')echo 'visible';
			if($widget=='h')echo 'hidden';
			if($widget=='c')echo 'collapse';
			echo ';}';
			break;
		}

		if($widget=='w_a'){
			echo $prefix.'{width:auto;}';
			break;
		}
		if($widget=='h_a'){
			echo $prefix.'{height:auto;}';
			break;
		}
		if($widget=='w_na'){
			echo $prefix.'{min-width:auto;}';
			break;
		}
		if($widget=='wno'){
			echo $prefix.'{white-space:normal;}';
			break;
		}
		if($widget=='wnw'){
			echo $prefix.'{white-space:nowrap;}';
			break;
		}
		if($widget=='w_xa'){
			echo $prefix.'{max-width:none;}';
			break;
		}
		if(strpos($widget,'w_xs')===0){
			$widget=substr($widget,4);
			echo $prefix.'{max-width:'.parseSpec($widget).';}';
			break;
		}

		if(strpos($widget,'w_fs')===0){/* width, fixed, simple spec */
			$widget=substr($widget,4);
			echo $prefix.'{width:'.parseSpec($widget).';}';
			break;
		}
		if($widget=='w_vw'){
			echo $prefix.'{width:100vw;}';
			break;
		}
		if(strpos($widget,'z_')===0){
			echo $prefix.'{z-index:'.substr($widget,2).'}';
			break;
		}
		$d1=substr($widget,2,1);
		$d2=substr($widget,3,1);
		// THIS IS FOR PADDING, MARGIN IN EMS!! p_0_a == padding: 0 auto, p_1_2 == padding:1em 2em 1em 2em; p_x3 = padding x 3em; p_xx3 = padding x 3px; p_y3 =padding y 3em; p_l3 = padding-left:3em; p_lx5 = padding-left:5px;
		if((strpos($widget,'p_')===0 || strpos($widget,'m_')===0) && (ctype_digit($d1) || $d1=='d' || substr($widget,3,2)=='a_')){// check for a_ so don't pick up aed2 where a stands for 'all'
			if(strpos($widget,'p_')===0)$spec='padding';else $spec = 'margin';
			$a=explode('_',$widget);
			if(ctype_digit($d1) || $d1=='d' || $d1=='a'){// there is no dimension spec and no unit spec so units are ems, d is for decimal, a is for auto
				if(count($a)==2){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]);}
				if(count($a)==3){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]).' '.parseSpec(($a[2]=='a'?'':'e').$a[2]);}
				if(count($a)==5){$rule=parseSpec(($a[1]=='a'?'':'e').$a[1]).' '.parseSpec(($a[2]=='a'?'':'e').$a[2]).' '.parseSpec(($a[3]=='a'?'':'e').$a[3]).' '.parseSpec(($a[4]=='a'?'':'e').$a[4]);}
				
				//if($a[1]!=0){echo 'xxx '.$widget.' '.$spec.' '.$rule.'           '.$a[1];die;}
			}else{
				//if(substr($widget,3,1);
				//if($d=='a') test for all, x, y, top, right,bottom,left
			}
			if(substr($rule,0,3)=='0em')$rule='0'.substr($rule,3);
			echo $prefix.'{'.$spec.':'.str_replace (' 0em',' 0',$rule).';}';
			//if(strpos($widget,'p_ed5')===0){echo $widget;print_r($a);echo 'd1 '.$d1;echo 'd2 '.$d2;die;}
			//if($a[1]!=0)die;
			break;
		}

		//if($prefix=='')break; WHAT!!!

		if(strlen($widget)>2){
			$attribute=substr($widget,0,3);
			$spec=substr($widget,3);
			$css=parseSpec($spec);
			if($attribute=='m_a'){echo $prefix;if($spec==='0')echo '{margin:0;}'; elseif($spec==='1')echo '{margin:1em;}';elseif($css)echo '{margin:'.$css.';}';else echo '{margin:var(--'.$widget.')}';}
			elseif($attribute=='m_x'){echo $prefix;if($spec==='0')echo '{margin-left:0;margin-right:0;}'; elseif($spec==='1')echo '{margin-left:1em;margin-right:1em;}'; elseif($spec==='a')echo '{margin-left:auto;margin-right:auto;}';elseif($css)echo '{margin-left:'.$css.';margin-right:'.$css.';}'; else echo '{margin-left:var(--'.$widget.');margin-right:var(--'.$widget.');}';}
			elseif($attribute=='m_y'){echo $prefix;if($spec==='0')echo '{margin-top:0;margin-bottom:0;}'; elseif($spec==='1')echo '{margin-top:1em;margin-bottom:1em;}';elseif($css)echo '{margin-top:'.$css.';margin-bottom:'.$css.';}';else echo '{margin-top:var(--'.$widget.');margin-bottom:var(--'.$widget.');}';}
			elseif($attribute=='m_t'){
				echo $prefix;if($spec==='0')echo '{margin-top:0;}'; elseif($spec==='1')echo '{margin-top:1em;}'; elseif($spec==='a')echo '{margin-top:auto;}';elseif($css)echo '{margin-top:'.$css.';}'; else echo '{margin-top:var(--'.$widget.');}';
			}
			elseif($attribute=='m_r'){echo $prefix;if($spec==='0')echo '{margin-right:0;}'; elseif($spec==='1')echo '{margin-right:1em;}'; elseif($spec==='a')echo '{margin-right:auto;}';elseif($css)echo '{margin-right:'.$css.';}';else echo '{margin-right:var(--'.$widget.');}';}
			elseif($attribute=='m_b'){echo $prefix;if($spec==='0')echo '{margin-bottom:0;}'; elseif($spec==='1')echo '{margin-bottom:1em;}'; elseif($spec==='a')echo '{margin-bottom:auto;}';elseif($css)echo '{margin-bottom:'.$css.';}';else echo '{margin-bottom:var(--'.$widget.');}';}
			elseif($attribute=='m_l'){echo $prefix;if($spec==='0')echo '{margin-left:0;}'; elseif($spec==='1')echo '{margin-left:1em;}'; elseif($spec==='a')echo '{margin-left:auto;}';elseif($css)echo '{margin-left:'.$css.';}';else echo '{margin-left:var(--'.$widget.');}';}
			elseif($attribute=='p_a'){echo $prefix;if($spec==='0')echo '{padding:0;}'; elseif($spec==='1')echo '{padding:1em;}'; elseif($css)echo '{padding:'.$css.';}'; else echo '{padding:var(--'.$widget.');}';}
			elseif($attribute=='p_x'){echo $prefix;if($spec==='0')echo '{padding-left:0;padding-right:0;}'; elseif($spec==='1')echo '{padding-left:1em;padding-right:1em;}'; elseif($css)echo '{padding-left:'.$css.';padding-right:'.$css.';}'; else echo '{padding-left:var(--'.$widget.');padding-right:var(--'.$widget.');}';}
			elseif($attribute=='p_y'){echo $prefix;if($spec==='0')echo '{padding-top:0;padding-bottom:0;}'; elseif($spec==='1')echo '{padding-top:1em;padding-bottom:1em;}'; elseif($css)echo '{padding-top:'.$css.';padding-bottom:'.$css.';}';else echo '{padding-top:var(--'.$widget.');padding-bottom:var(--'.$widget.');}';}
			elseif($attribute=='p_t'){echo $prefix;if($spec==='0')echo '{padding-top:0;}'; elseif($spec==='1')echo '{padding-top:1em;}'; elseif($css)echo '{padding-top:'.$css.';}';else echo '{padding-top:var(--'.$widget.');}';}
			elseif($attribute=='p_r'){echo $prefix;if($spec==='0')echo '{padding-right:0;}'; elseif($spec==='1')echo '{padding-right:1em;}'; elseif($css)echo '{padding-right:'.$css.';}';else echo '{padding-right:var(--'.$widget.');}';}
			elseif($attribute=='p_b'){echo $prefix;if($spec==='0')echo '{padding-bottom:0;}'; elseif($spec==='1')echo '{padding-bottom:1em;}'; elseif($css)echo '{padding-bottom:'.$css.';}';else echo '{padding-bottom:var(--'.$widget.');}';}
			elseif($attribute=='p_l'){echo $prefix;if($spec==='0')echo '{padding-left:0;}'; elseif($spec==='1')echo '{padding-left:1em;}'; elseif($css)echo '{padding-left:'.$css.';}';else echo '{padding-left:var(--'.$widget.');}';}
			elseif($attribute=='r_a'){echo $prefix;if($spec==='0')echo '{top:0;bottom:0;left:0;right:0;}'; elseif($spec==='1')echo '{top:1em;bottom:1em;left:1em;right:1em;}'; elseif($css)echo '{top:'.$css.';bottom:'.$css.';left:'.$css.';right:'.$css.';}';}
			elseif($attribute=='r_x'){echo $prefix;if($spec==='0')echo '{left:0;right:0;}'; elseif($spec==='1')echo '{left:1em;right:1em;}'; elseif($spec==='a')echo '{left:auto;right:auto;}'; elseif($css)echo '{left:'.$css.';right:'.$css.';}';}
			elseif($attribute=='r_y'){echo $prefix;if($spec==='0')echo '{top:0;bottom:0;}'; elseif($spec==='1')echo '{top:1em;bottom:1em;}';  elseif($spec==='a')echo '{top:auto;bottom:auto;}';elseif($css)echo '{top:'.$css.';bottom:'.$css.';}';}
			elseif($attribute=='r_t'){echo $prefix;if($spec==='0')echo '{top:0;}';elseif($spec==='a')echo '{top:auto;}'; elseif($spec==='1')echo '{top:1em;}'; elseif($spec==='a')echo '{top:auto;}'; elseif($css)echo '{top:'.$css.';}';}
			elseif($attribute=='r_r'){echo $prefix;if($spec==='0')echo '{right:0;}';elseif($spec==='a')echo '{right:auto;}'; elseif($spec==='1')echo '{right:1em;}'; elseif($spec==='a')echo '{right:auto;}'; elseif($css)echo '{right:'.$css.';}';}
			elseif($attribute=='r_b'){echo $prefix;if($spec==='0')echo '{bottom:0;}';elseif($spec==='a')echo '{bottom:auto;}'; elseif($spec==='1')echo '{bottom:1em;}'; elseif($spec==='a')echo '{bottom:auto;}'; elseif($css)echo '{bottom:'.$css.';}';}
			elseif($attribute=='r_l'){echo $prefix;if($spec==='0')echo '{left:0;}';elseif($spec==='a')echo '{left:auto;}'; elseif($spec==='1')echo '{left:1em;}'; elseif($spec==='a')echo '{left:auto;}'; elseif($css)echo '{left:'.$css.';}';}
			elseif($attribute=='b_s'){// border spec
				$widget=substr($widget,3);
				$widget=str_split($widget);
				echo $prefix.'{border';
				$x=array_shift($widget);
				//if($x=='a') declaration stands on its own
				if($x=='t' || $x =='y') echo '-top';
				if($x=='l' || $x=='x') echo '-left';
				if($x=='r') echo '-right';
				if($x=='b') echo '-bottom';
				$unit=parseSpec(array_shift($widget));
				$count='';
				while(ctype_digit($widget[0])){$count.=array_shift($widget);}
				if($widget[0]=='d'){
					//this is a decimal point
					$count.='.';
					array_shift($widget);
					while(ctype_digit($widget[0])){$count.=array_shift($widget);}
				}
				$rule=':'.$count.$unit.' ';
				$style=array_shift($widget);
				if($style=='s')$rule.='solid';
				if($style=='h')$rule.='dashed';
				if($style=='t')$rule.='dotted';
				if($style=='b')$rule.='double';
				$color=implode('',$widget);
				if($color=='trans')$rule.=' transparent';else $rule.=' var(--'.$color.')';
				$rule.= ';';
				echo $rule;
				if($x=='x'||$x=='y'){
					if($x == 'x') echo 'border-right';
					if($x == 'y') echo 'border-bottom';
					echo $rule;
				}
				echo '}';
				break;
			}
			elseif($attribute=='b_a'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-color:var(--'.substr($spec,2).');}';if($spec==='0')echo '{border:0;}'; elseif($spec==='1')echo '{border-width:1px;}';elseif($css)echo '{border-width:'.$css.';}'; else echo '{border:var(--'.$widget.');}';}
			elseif($attribute=='b_x'){echo $prefix;if($spec==='0')echo '{border-left-width:0;border-right-width:0;}';elseif($spec==='1')echo '{border-left-width:1px;border-right-width:1px;}';elseif($css)echo '{border-left-width:'.$css.';border-right-width:'.$css.';}'; else echo '{border-left:var(--'.$widget.');border-right:var(--'.$widget.');}';}
			elseif($attribute=='b_y'){echo $prefix;if($spec==='0')echo '{border-top-width:0;border-bottom-width:0;}';elseif($spec==='1')echo '{border-top-width:1px;border-bottom-width:1px;}';elseif($css)echo '{border-top-width:'.$css.';border-bottom-width:'.$css.';}'; else echo '{border-top:var(--'.$widget.');border-bottom:var(--'.$widget.');}';}
			elseif($attribute=='b_t'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-top-color:var(--'.substr($spec,2).');}';elseif($spec==='0')echo '{border-top-width:0;}';elseif($spec==='1')echo '{border-top-width:1px;}';elseif($css)echo '{border-top-width:'.$css.';}';else echo '{border-top:var(--'.$widget.');}';}
			elseif($attribute=='b_r'){echo $prefix;if(strpos($spec,'c9')!==false){echo'{border-right-color:var(--'.substr($spec,2).');}';}elseif($spec==='0')echo '{border-right-width:0;}';elseif($spec==='1')echo '{border-right-width:1px;}';elseif($css)echo '{border-right-width:'.$css.';}';else echo '{border-right:var(--'.$widget.');}';}
			elseif($attribute=='b_b'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-bottom-color:var(--'.substr($spec,2).');}';elseif($spec==='0')echo '{border-bottom-width:0;}';elseif($spec==='1')echo '{border-bottom-width:1px;}';elseif($css)echo '{border-bottom-width:'.$css.';}';else echo '{border-bottom:var(--'.$widget.');}';}
			elseif($attribute=='b_l'){echo $prefix;if(strpos($spec,'c9')!==false)echo'{border-left-color:var(--'.substr($spec,2).');}';if($spec==='0')echo '{border-left-width:0;}';elseif($spec==='1')echo '{border-left-width:1px;}';elseif($css)echo '{border-left-width:'.$css.';}';else echo '{border-left:var(--'.$widget.');}';}
			elseif($attribute=='b_d'){
				echo $prefix;
				if($spec==='0'){
					echo '{border-radius:0;}';
				}else{
					$a=explode('_',$spec);
					array_shift($a);
					if(count($a)>1){
						foreach($a as $i => $corner){
							if(ctype_digit($corner[0]) && $corner!=0)$a[$i]='p'.$corner;
						}
						if(count($a)==1){$rule=parseSpec($a[0]);}
						if(count($a)==2){$rule=parseSpec($a[0]).' '.parseSpec($a[1]);}
						if(count($a)==3){$rule=parseSpec($a[0]).' '.parseSpec($a[1]).' '.parseSpec($a[2]);}
						if(count($a)==4){$rule=parseSpec($a[0]).' '.parseSpec($a[1]).' '.parseSpec($a[2]).' '.parseSpec($a[3]);}
						echo '{border-radius:'.$rule.';}';
					}else{
						echo '{border-radius:'.$css.';}';
					}
				}
			}
			elseif($attribute=='b_c'){echo $prefix.'{border-color:var(--'.substr($widget,4).');}';} // border color
			elseif($attribute=='h_0'){echo $prefix;echo '{height:0}';}
			elseif($attribute=='h_a'){echo $prefix;echo '{height:auto}';}
			elseif($attribute=='h_x'){echo $prefix;if($spec==='n')echo '{max-height:none;}';elseif($css)echo '{max-height:'.$css.';}';else echo '{max-height:'.$spec.'em;}';} /* h_x26 = element has max height of 26em */
			elseif($attribute=='h_n'){echo $prefix;if($spec==='n')echo '{min-height:none;}';elseif($css)echo '{min-height:'.$css.';}';else echo '{min-height:'.$spec.'em;}';} /* h_n26 = element has min height of 26em */
			elseif($attribute=='h_f'){ /* h_f26 = fixed height of 26em */
				echo $prefix;if($css)echo '{flex-shrink:0;height:'.$css.';}';else echo '{flex-shrink:0;height:'.$spec.'em;}';
			}
			elseif($widget=='w_vwc'){echo $prefix.'{width:100vw;left:50%;transform:translateX(-50%);}';}
			elseif($widget=='w_xn'){echo $prefix.'{max-width:none;}';}
			elseif($attribute=='w_x'){ /* w_x26 = element has max width of 26em */
				if(!$css)$css=$spec.'em';
				echo $prefix.'{max-width:'.$css.';';
				echo 'margin-left:auto;margin-right:auto;'; // .x_ already has margin-left:auto;margin-right:auto;
				echo '}';
			}
			elseif($attribute=='w_n'){echo $prefix;if($css)echo '{min-width:'.$css.';}';elseif($spec==='n')echo '{min-width:none;}';else echo '{min-width:'.$spec.'em;}';} /* w_n26 = element has min width of 26em */
			/* DO NOT set flex-basis on an attribute of w_f because if the element is a flex-item with a flex-direction of column you will force the height equal to the width */
			elseif($attribute=='w_f'){/* w_f26 = fixed width of 26em, w_fp70 = fixed width 70%, need to set width so it works on table headers, table data w_fx34.5 = fixed width of 34.5 pixels, set margin left and right auto so automatic centering */
				echo $prefix;
				if($css){
					echo '{width:'.$css.';min-width:'.$css.';max-width:'.$css.';}';
				}else{
					echo '{width:'.$spec.'em;min-width:'.$spec.'em;max-width:'.$spec.'em;}';
				}
			}	
			elseif(substr($attribute,0,2)=='w_'){/* w_80 = width:80% */
				echo $prefix.'{width:'.substr($widget,2).'%;}';
				//if($widget=='w_0')echo 'border:0;'; this is too hard to 'undo'
			}
			elseif(substr($attribute,0,2)=='h_'){/* h_100 = height:100% */
				echo $prefix.'{height:'.substr($widget,2).'%;';
				echo '}';
			}
			elseif($attribute=='s_f'){/* s_fe26 = fixed width & height of 26em */
				if(!$css)$css='0';
				echo $prefix.'{width:'.$css.';height:'.$css.';}';
			}	
			elseif(substr($attribute,0,2)=='s_'){
				echo $prefix.'{width:'.$css.';height:'.$css.';';
				if($widget=='w_0')echo 'border:0;';
				echo '}';
			}
			//=== right here put all the general rules for class starts with
			if($widget=='r_'){
				echo $prefix.'.r_{position:relative;}'; // .r_ .r_te1d5   .r_ must be explicitly added to any .r_... declarations as we don't want to override position:absolute anywhere 
			}

		}

		$spec=substr($widget,2,1);
		if($spec==='0'||$spec==='1'){
			if(substr($widget,0,2)=='b_'){
				echo $prefix;
				if($spec=='0')echo '{border-width:0;}';elseif($spec==1)echo '{border-width:1px;}';
			}
			if(substr($widget,0,2)=='p_'){
				echo $prefix;
				if($spec=='0')echo '{padding:0;}';else echo '{padding:1em}';
			}
			if(substr($widget,0,2)=='m_'){
				echo $prefix;
				if($spec=='0')echo '{margin:0;}';
			}
		}
		break;
	} //needStyle

} //LOOPEND2
if($currentAWClass!==false && !$finishedAW){
	echo '}'; // end the last AW media query
}
?>