/**************************************************************************/
/* view1-main-v5.css changes from view1-main-v4.css:                      */
/*   in the v4 version, accidentally left out middle_text_header_centered */
/**************************************************************************/

/**************************************************************************/
/* NOTE: For STANDALONE(USB)versions to work without internet access,     */
/*  this file must be accessed locally (e.g., all references to this file */
/*  must be relative rather than from https://palousemindfulness.com)     */                                         
/**************************************************************************/

/***********************************************************************/
/* padding/margin arguments - e.g. for "padding":                      */
/*   padding: 0px 5px 0px 5px; -- top right bottom left                */
/*   padding: 0px 5px;         -- top/bottom left/right                */
/*   padding: 0px 5px 0px;     -- top right/left bottom                */
/*   padding-top: 0px;         -- (or xxx.right, xxx.bottom, xxx.left) */
/***********************************************************************/

/* core.css has defs common to all pages:                 */
/*   background-color:#eee;margin:0;padding:0;border:none;*/

/* Standard CSS color names from https://htmlcolorcodes.com/color-names/                     */
/* Color contrast must be >4.5, see https://dequeuniversity.com/rules/axe/4.8/color-contrast */

:root {	/* NOTE: Dreamweaver doesn't understand CSS vars, but browsers do  */
	--content_color: black;			/* was #333333                             */
	--amber: #c05030;   			/* Contrast 4.73                           */
	--red: #eb0000; 				/* Contrast 4.63, CSS "red" contrast < 4.5 */
	
	--normal_link_color: darkblue;	/* darkblue #00008B, was #00666            */
	--normal_link_weight: bold;		/* bold for middle_text, etc.              */
	--normal_link_hover: #c05030;	/* (same as --amber) Contrast 4.73         */
	
	--menu_link_color: darkblue;	/* darkblue #00008B, was #00666            */
	--menu_link_weight: normal;		/* normal for menu links themselves        */
	--menu_link_hover: #c05030;		/* (same as --amber) Contrast 4.73         */
	--menu_link_height1: 1.8;		/* adjust so links 24px apart - don't know */
	--menu_link_height2: 1.4;		/*   why some menus need height1 and       */
									/*   need height2?!?                       */
									
	--menu_tab_color: darkblue;		/* darkblue #00008B, was #00666            */
	--menu_tab_weight: bold;		/* bold for menu tab name (eg. "course", etc.) */
	--menu_tab_style: normal;		/* no underline                            */
	

/*********************************************************************************************/
/* Default 'sans-serif' seems most consistent within a given platform, so we are no longer   */
/*   loading fonts and just taking the 'sans-serif' default that is best for the platform    */
/*   (e.g., PC/Windows, Apple/Mac, iPhone/IOS). Paradoxically, the Google font 'Open Sans'   */
/*     displays differently on PC/Windows than it does on an iPhone even though the          */
/*     construction and styling of individual letters is the same.                           */
/* If we do decide to use loaded font, 'Noto Sans' may be better than 'Open Sans' because    */
/*   it's better for non-Latin languages. Also upper case "I" can be distinguised from lower */
/*   case "L". Also, for Japanese & Chinese, best to use these:                              */
/*                 'Noto Sans JP' (Japanese)                                                 */
/*                 'Noto Sans SC' (Simplified Chinese)                                       */
/*********************************************************************************************/
/*  --font-default: 'Open Sans', sans-serif; /* Don't do this, use sans-serif only */
    --font-default: sans-serif;
    
	--banner-fontfamily: var(--font-default);  
	--title-fontfamily: var(--font-default);
	--title-color: darkblue;
 	--heading-fontfamily: var(--font-default); 
	--heading-color: darkblue;
	--sub-heading-color: darkblue;
	--body-fontfamily: var(--font-default);  

	--banner-fontfamily: 'Open Sans', sans-serif;
	--title-fontfamily: 'Open Sans', sans-serif;
	--title-color: darkblue;
 	--heading-fontfamily: 'Open Sans', sans-serif; 
	--heading-color: darkblue;    /* Hanna's color was #1552bc */
	--sub-heading-color: darkblue;
	--body-fontfamily: 'Open Sans', sans-serif;  
    
	--font_normal: 1.0rem;			/* equiv to 16px */
	--font_small: 0.800rem;			/* equiv to 12.8px */
	--font_tiny: 0.750rem;			/* equiv to 12px */
	--font_teeny: 0.625rem;			/* equiv to 10px */
	--font_menu_item: 0.875rem;		/* equiv to 14px */
	--font_menu_title: 1.0rem;		/* equiv to 16px */
	--font_sub-heading: 1.10rem;    /* was 1.0625 "equiv to 17px"*/
	--font_heading: 1.125rem;		/* equiv to 18px */
	--font_subtitle: 1.250rem;		/* equiv to 20px */
	--font_22: 1.375rem;			/* equiv to 22px */
    --font_24: 1.500rem;            /* equiv to 24px */
    --font_26: 1.625rem;            /* equiv to 26px */
	--font_title: 1.375rem;			/* equiv to 24px - zzz was 1.375rem "equiv to 28px"*/
    
	--proportion_left: 16%;			/* 1st column (left_menu)  */
	--proportion_middle: 66%;		/* 2nd column (middle_text)*/
	--proportion_right: 14%;		/* 3rd column quotes       */
	
	}
	
	.fontsize_normal {
		font-size: var(--font_normal);
	}
	.fontsize_small {
		font-size: var(--font_small);
	}
	.fontsize_tiny {
		font-size: var(--font_tiny);
	}
	.fontsize_teeny {
		font-size: var(--font_teeny);
	}
	.font-small_italic, .fineprint12px { /* fineprint12px replaced by .font-small_italic, but retained just in case */
		font-size: var(--font_small);
		font-style: italic;
	}
	.font-tiny_italic, .fineprint10px {	/* fineprint10px replaced by .font-tiny_italic, but retained just in case */
		font-size: var(--font_tiny);
		font-style: italic;
	}
	.font-teeny_italic, .fineprint10px {
		font-size: var(--font_teeny);
		font-style: italic;
	}
	.fontsize_heading {
		font-size: var(--font_heading);
	}
	.fontsize_subtitle {
		font-size: var(--font_subtitle);
	}
	.fontsize_title {
		font-size: var(--font_title);
	}
	
	/******************************************************************/
	/* Viewport attributes to accomodate displays responsive to width */
	/******************************************************************/
	.phone-only {			
		display: none;		/* DO NOT to execute anything in this class */
	}
	
	.tablet-only {	
		display: none;		/* DO NOT to execute anything in this class */	
	}
	
	.tablet-and-smaller {
		display: none;		/* DO NOT to execute anything in this class */
	}
	
	.tablet-and-larger {
		display: inline;	/* Execute EVERYTHING in this class */
	}
	
	.laptop-and-larger {
		display: inline;	/* Execute EVERYTHING in this class */
	}
	
	.desktop-only {	
		display: inline;	/* Execute EVERYTHING in this class */
	}
	
	/******************************************************************/
	/*  GLOBAL definitions                                            */
	/******************************************************************/
	
	p, .default {
		color: var(--content_color);
	}
	
	.paragraph_indent p {
		text-indent: 1.5em; /* Indent first line                       */
		margin:0;			/* eliminate blank line between paragraphs */
	}
	
	.centered {
		display: flex;
		justify-content: center;
	}
	
	.fineprint-standalone {
		font-size: var(--font_tiny);
		line-height: 1.3;
		color: #9ea7c4; /* So will show up on banner_topright for Stand-alone version */
	}
	
	.italic_red {
		font-style: italic;
		color: var(--red);  /*  Use this rather than red to get more contrast (needs to be at least 4.5) */
	}
	
	.amber {
		color: var(--amber);
	}
	
	.red {
		color: var(--red);
	}
	
	/******************************************************************/
	/*  Basic page definitions                                        */
	/******************************************************************/
	
	#content {
		background-color: white;
		height: 100%;
		overflow: hidden;	/* allows box to expand with content */
		margin-top:0px;
		margin-bottom:0px;
		margin-right:0px;
		margin-left:0px;
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.5; /* zzz was 1.3 */
		color: var(--content_color);
	}
	#wrapper {
		padding:0;
		border:2px ridge darkblue;
		width: 1500px;	/*   So won't "spread" too wide on larger screens. On smaller viewports it's "100%". If */
		height: auto;	/* width changes here,change also max-width for viewport statement in palouse_main.dwt. */
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		background-color: white;
	}
	
	#wrapper-manual {
		padding:0;
		border:2px ridge darkblue;
		width: 1000px;	    /*   Width fixed at 1000px so that manual pages are all same width for conversion to PDF     */
		height: auto;       /* if width changes, also change (1) middle_text_manual-v1 width to this no. pixels - 40     */
		margin-left: auto;  /*                           and (2) banner_title_manual art width in palouse_manual-v1.dwt  */
		margin-right: auto;
		margin-top: 0px;
        padding-top: 0px;
		background-color: white;
	}
	
	#wrapper-graduate-map {	/* Special wrapper for Graduate Map */
		padding:0;
		border:2px ridge darkblue;
		width: 975px;
		height: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		background-color: white;
	}
	
	#wrapper-visitor-map {/* Special wrapper for Visitor Map */
		padding:0;
		border:2px ridge darkblue;
		width: 720px;
		height: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		background-color: white;
	}
	
	.pagetitle {
		font-family: var(--title-fontfamily);
		font-size: var(--font_title);
		line-height: 1.3;
		font-weight: bold;
		color: var(--title-color);
		text-align: center;
		margin: 10px 0px 0px 0px;/* zzz was margin-top: 10px */
	}
	
	.pagesubtitle {
		font-family: var(--title-fontfamily);
		font-size: var(--font_subtitle);
		line-height: 1.3;
		font-weight: normal;
		font-style: italic;
		color: var(--title-color);
		text-align: center;
		margin: 10px 0px 0px 0px;/* zzz was margin-top: 10px */
        }
	
	/******************************************************************************/
	/*  "Skip" for accessible navigation. "Tab" right after load activates "Skip" */
	/******************************************************************************/
	.hidden-nav {
		padding: 5px;
		position: absolute;
		background-color: #cbd3e0;
		left: 35%;
		height: 20px;
		transform: translateY(-105%);
		transition: transform 0.5s;
	}
	
	#skip-to-content a:focus, 
	#skip-to-course-navigation a:focus, 
	#skip-to-languages a:focus
	 {
		transform: translateY(0%);
		outline-color: darkblue;
	}
	
	#skip-to-content a, 
	#skip-to-course-navigation a, 
	#skip-to-languages a
	 {
		color: var(--content_color); 
		text-decoration: none;
		font-family: var(--body-fontfamily);
	}
	
	/*****************************************************************************************/
	/* "visually-hidden" will hide text from visual display, but screen-readers will read it */
	/*****************************************************************************************/
	.visually-hidden:not(:focus):not(:active){
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	
	/******************************************************************/
	/* Definitions for Top strip (languages/search)                   */
	/******************************************************************/
	#topstrip {		/* if no language links in top, otherwise use the three banner_ id's below */
		width: 100%;
		height: 22px;
		float: left;
		padding: 0;
		margin: 0;
		background-image: url("../art/clouds1_1500x22.jpg");
	}
	
	.topstrip_menu {			/* Formatting for language menu in upper-left */
		font-family: var(--body-fontfamily);
		display: flex;
		justify-content: space-between;
	}
	
	/************************************************************/
	/* Languages menu (upper-left corner of Top strip)          */
	/************************************************************/
	
	.lang-top-level-nav-list {
		background-color: none;
		display: flex;
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	
	.lang-second-level-nav-list {
		background-color: #516eb0;    /* light blue (#516eb0) */
		list-style-type: none;
		padding: 0;
		margin: 0;
		z-index: 5;
		position: absolute;
		top: 100%;
		min-width: 160px;
		border: 1px darkblue solid;   /* top, right, bottom, left */
		box-shadow: 0 8px 16px 5px rgba(0,0,0,0.7); /* horiz offset, vert offset, blur radius, spread, color+opacity */
	}
	
	.lang-second-level-nav-list2 {
		background-color: #516eb0;    /* light blue (#516eb0) */
		list-style-type: none;
		padding: 0;
		z-index: 5;
		position: absolute;
		
		min-width: 160px;
		border: 1px darkblue solid;   /* top, right, bottom, left */
		box-shadow: 0 8px 16px 5px rgba(0,0,0,0.7); /* horiz offset, vert offset, blur radius, spread, color+opacity */
		top: 14px;					
		left: 28px;
	
display:none; /* enable for no animation */
/*		opacity: 0;						/* Animation#1 [lang menu] described in _Joao's 2024-05-21 video at 6:50 */
/*		transform: translateY(10px);	/*   To remove animation replace these 4 lines with display:none and     */
/*		will-change: opacity, transform;/* make opposite change in lang-second-level-nav-list2 (below)           */
/*		transition: all 150ms ease-out;	/* */
	}

	.lang-second-level-nav-list2[data-disclosure-state="opened"] {
display:block; /* enable for no animation */
/*		opacity: 1;						/* To disable animation, replace these 2 lines with display:block     */
/*		transform: none;				/* */
	}
	
	.lang-second-level-nav-list a:hover{
		text-decoration: underline;
	}
	
	.lang-top-level-nav-list > li {
		position: relative;
		display: flex;
	}
	
	.lang-top-link {
		background: none;
		color: white;
		padding: 0.2em 0.6em; /* top/bottom left/right */
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		border: 0;
		font-size: var(--font_tiny);
		font-weight: bold;
		font-family: var(--body-fontfamily);
		font-style:italic; 
	}
	
	.lang-top-link:focus {
		position: relative;
		z-index: 5;
	}
	
	button.lang-top-link::after {
		content: "";
	/* Removed arrow - not necessary since all top items have pull-down menus
		border-bottom: 1px solid currentColor;
		border-right: 1px solid currentColor;
		height: 0.5em;
		margin-left: 0.75em;
		width: 0.5em;
		transform: rotate(45deg);
	*/
	}
	
	.lang-top-link:hover,
	.lang-top-link[aria-expanded="true"] {
		background-color: none;
		color: var(--menu_link_hover);
	}
	
	.lang-L2-link {
		color: white !important;/* force it to be white */
		display: block;
		padding: 0.2em 1em; /* top/bottom left/right */
		margin:0;
		text-decoration:none !important;
		font-style:italic; 
		font-size: var(--font_small); 
		line-height: var(--menu_link_height1);
	}
	
	.lang-L2-link:hover,
	.lang-L2-link:focus {
		background-color: #203769;    /* dark blue (#203769) was #ddd */
		text-decoration: underline;
	}
	
	.lang-L2-link:focus {
		/* so that outline comes on top of everything   */
		position: relative;
	}
	
	/******************************************************************/
	/* Definition for Title Banner (just under top strip)             */
	/******************************************************************/
	#banner_title_manual {	/* 1000x85 - goes underneath banner_topleft, banner_topmiddle, banner_topright) */
		color:white; 
		font-style: italic;
		font-family: var(--banner-fontfamily);
		padding: 0;
		background-image: url("../art/clouds2_title-manual_1000x85-notext.jpg");
		width: 100%;
		height: 85px;
		overflow: hidden;	/* clips the content, the photo in this case            */	
		clear:both;			/* puts image on next line without regard to float:right or float:left */
	}
	.banner_title_manual_line1 {	/* For first line of title text ("Palouse Mindfulness")   */
		display:block;
		font-size:1.5rem;
		margin-left:140px;	/*   0 for line1 so the link doesn't become active before the text is */
		margin-top:10px; 	/*  reached from the left (the 90px margin is defined in .home-link)  */
	}
	.banner_title_manual_line2 {	/* For second line of title text ("Mindfulness-Based Stress Reduction")  */
		display:block;
		font-size:1.0 rem;	/* font size redefined in view3-tablet.css and view4-phone.css  */
		margin-left:185px;	/*   130 for line2 since it must carry the full margin, the */               
		margin-top:5px; 	/* actual margins for line1 and 2 are 90px and 130px.      */ 
	}
	
	#banner_title {			/* 1500x115 - goes underneath "banner_top" pieces, above */
		color:white; 
		font-style: italic;
		font-family: var(--banner-fontfamily);
		padding: 0;
		background-image: url("../art/clouds2_title_1500x115_notext.jpg");
		width: 100%;
		height: 115px;
		overflow: hidden;	/* clips the content, the photo in this case            */	
		clear:both;			/* puts image on next line w/out regard to float:right  */
	}
	.banner_title_line1 {	/* For first line of title text ("Palouse Mindfulness")   */
		display:block;
		font-size:2.5rem;
		margin-left:0px;	/*   0 for line1 so the link doesn't become active before the text is     */
		margin-top:10px; 	/*  reached from the left (a 90px margin is defined below in .home-link)  */
	}
	.banner_title_line2 {	/* For second line of title text ("Mindfulness-Based Stress Reduction")  */
		display:block;
		font-size:1.375rem;	/* font size redefined in view3-tablet.css and view4-phone.css  */
		margin-left:130px;	/*   130 for line2 since it must carry the full margin, the */               
		margin-top:10px; 	/* actual margins for line1 and 2 are 90px and 130px.       */ 
	}
	
	/****************************************************/
	/* Definition for special link for home page title  */
	/****************************************************/
	.home-link {
		display:inline-block;
		margin-left:90px;	    /*   This affects banner-title, above to line1, above, and */
		text-decoration:none;   /* margin-left gets modified in view5-phone-narrow-v1.css  */
		color:white;
		font-weight: normal;
	}
	
	.home-link :hover {
		color: var(--menu_link_hover);
		text-decoration:underline;
	}
	
	/*********************************************************/
	/* Definitions for horizontal menu (under "Title" banner */
	/*********************************************************/
	
	.banner_menu {		/* Holds the horizontal menu */
		border-top: 1px #cccccc solid;
		border-bottom: 1px #cccccc solid;
		background-image: url("../art/clouds3_topmenu_1500x26.jpg");	
		font-family: var(--body-fontfamily);
		font-size: var(--font_menu_item);
		display: flex;
		justify-content: center;
	}
	
	.banner_menu a:link, .normal-hover a:visited{	/* For some reason, without .normal-hover, "Palouse Mindfulness" */
		font-weight: normal;						/* link on title banner turned blue instead of white             */
		color: var(--menu_link_color);	
		text-decoration: none;
	} 
	
	.banner_menu a:hover {
		color: var(--menu_link_hover);	
		text-decoration: underline;
	}
	
	/***********************************************************************/
	/*  1st column: left_menu declarations                                 */
	/***********************************************************************/
	
	.selected {		/* To indicate which link in the left column is "active" */
		font-weight: normal;
		border: 1px solid;
		border-radius: 0px;
		padding: 0px 3px 0px 3px; /* top, right, bottom, left */
	}
	
	#left_menu_wrapper a:link, #left_menu_wrapper a:visited { 
		font-weight: var(--menu_link_weight);
		color: var(--menu_link_color);
		text-decoration: none;
	}
	
	#left_menu_wrapper a:hover {
		font-weight: var(--menu_link_weight);
		color: var(--menu_link_hover); 
		text-decoration: underline;
	}
	
	#left_menu {
		width: var(--proportion_left);
		height:auto;
		float: left;
		padding: 15px 5px 10px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
		border-right: 1px #d7d7d7 solid;
		background-image: url(../art/clouds4_leftmenu_950x201.jpg);
		background-repeat:no-repeat;
		font-family: var(--body-fontfamily);
		font-size: var(--font_menu_item);
		line-height: var(--menu_link_height1);
		font-weight: bold;
		text-align: center;
	}
	
	#left_menu ul {
		list-style-type:none;
		padding-left: 0px;
	}
	
	#left_menu_manual {	/* based on left_menu but for printed manual */
		width: 39px;	/* 40 counting 1px border on right */
		height: 0px;
		float: left;
		padding: 40px 0px 179px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
	}
	
	/*  The following "left_menu" definitions are used for the title of the left column. */
	
	.left_menu_subtitle {	
		font-family: var(--body-fontfamily);
		color: var(--menu_tab_color);
		font-weight: var(--menu_tab_weight);
		font-style: var(--menu_tab_style);
		font-size: var(--font_menu_title);
		height: 1.3;
		text-align: center;
		padding: 0px; /* wwww was 0px 10px 10px 10px top, right, bottom, left */
		margin: 0px; /* wwww new */
	}
	
	.mobile-left_menu_subtitle { /* For mobile, font-size needs to be larger than 10pt, no padding on top */
		font-family: var(--body-fontfamily);
		color: var(--menu_tab_color);
		font-weight: var(--menu_tab_weight);
		font-style: var(--menu_tab_style);
		font-size: var(--font_menu_title);
		height: 1.3;
		text-align: center;
		padding: 0px 10px 10px 10px; /* top, right, bottom, left */
	}
	
	/*******************************************************************************************/
	/* mobile "sidenav" definitions for left_menu (revealed with arrow in smaller widths)      */
	/*******************************************************************************************/
	
	.sidenav-left_menu {
			height: 100%;
			width: 190px;
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;	/* left:0 comes in from left, right:0 comes in from right */
			border: 1px darkblue solid; /* joao  */
		background-image: url(../art/clouds4_leftmenu_950x1000.jpg);
			overflow-x: hidden;
			transition: 0.5s;
			padding-top: 30px;
			will-change: transform;
	}
	.sidenav-left_menu[data-disclosure-state="closed"] {
		transform: translateX(-100%);
	}
	@media (prefers-reduced-motion) {
		.sidenav-left_menu {
			transition: none;
		}
	}
	
	.sidenav-left_menu ul{
		list-style-type:none;
		padding-left: 0px;
	}
	
	.sidenav-left_menu a:link, .sidenav-left_menu a:visited{
			padding: 3px 10px 2px 10px; /* top, right, bottom, left */
			text-align:center;
			font-size: var(--font_menu_item);
		line-height: var(--menu_link_height2); 
			color: var(--menu_link_color);
			display: block;
			transition: 0.3s
	}
	
	/* Deleted for now - What does .offcanvas and a:focus do here? "a:" and "hover:" defined in left_menu_wrapper above
	.sidenav-left_menu a:hover, .offcanvas a:focus{
		text-decoration: underline;
			color: var(--menu_link_hover);
	}
	*/
	
	.sidenav-left_menu .closebtn {
			position: absolute;
			top: 0;
			right: 0px;
			margin-left: 50px;
	
			/* override default <button> styles */
			background: none;
			padding: 0;
			border: 0;
	}
	
	/*******************************************************************************************************/
	/*  2nd column: middle_text declarations - body of the text (between left_menu and right _photo.       */
	/*******************************************************************************************************/
	
	#middle_text {
		width: var(--proportion_middle);
		height: 100%;
		float: left;
		padding: 10px 20px 0px 20px; /* top, right, bottom, left */
		margin-bottom: 10px;
	}
	
	#middle_text_manual {	/* Based on middle_text but for printed manual */
		width: 749px;		/* More room for text, can be 170 pixels wider */
		height: 100%;
		float: left;
		padding: 10px 20px 0px 20px; /* top, right, bottom, left */
		margin-bottom: 0px;
	}
	
	#middle_text_manual-v1 {/* Based on middle_text but for printed manual */
		width: 960px;		/* If this changes, also change wrapper-manual to this no. of pixels + 40 */
		height: 100%;
		float: left;
		padding: 0px 20px 0px 20px; /* top, right, bottom, left */
		margin-bottom: 0px;
        margin-top: 0px;
        padding-top: 0px;
	}
	
	#middle_text a:link,        #middle_text a:visited,
	#middle_text_manual a:link, #middle_text_manual a:visited,
	.map_links a:link, .map_links a:visited
	{
		color: var(--normal_link_color);
		font-weight: var(--normal_link_weight);	
		text-decoration: underline;    
	}
	#middle_text a:hover, 
	#middle_text_manual a:hover,
	.map_links a:hover
	{
		color: var(--normal_link_hover);
		font-weight: var(--normal_link_weight);
		text-decoration: underline;    
	}
	
	.middle_text_header {
		display: inline;
		height: 100%;
		font-family: var(--heading-fontfamily);
		font-size: var(--font_heading);
		line-height: 1.4;
/*		font-weight: bold; zzz was bold/italic */
/*		font-style: italic; zzz */
		color: var(--heading-color);
	}
    
	.middle_text_header_centered {
		text-align:center;
		height: 100%;
		font-family: sans-serif;
		font-size: var(--font_heading);
		line-height: 1.3;
		font-weight: bold;
		font-style: italic;
		color: darkblue;
	}
    
    .blue-background {
		background-color: #dff1fd;
		padding: 7px;
		line-height: 1.8;
	}
    
	.middle_text_header_amber {
		display: inline;
		height: 100%;
		font-family: var(--heading-fontfamily);
		font-size: var(--font_heading);
		line-height: 1.3;
/*		font-weight: bold; zzz was bold/italic */
/*		font-style: italic;  */
		color: var(--amber);
	}
	
	.middle_text_header_centered_amber {
		text-align:center;
		height: 100%;
		font-family: var(--heading-fontfamily);
		font-size: var(--font_heading);
		line-height: 1.3;
/*		font-weight: bold; zzz was bold/italic */
/*		font-style: italic;  */
		color: var(--amber);
	}
    
   .middle_text_sub-header {
		display: inline;
		height: 100%;
		font-family: var(--heading-fontfamily);
		font-size: var(--font_sub-heading);
		line-height: 1.3;
/*		font-weight: bold; zzz was bold/italic */
/*		font-style: italic; zzz */
		color: var(--sub-heading-color);
	}

    .bold-blue-background { /* zzz */
		font-weight: bold;
		font-size: var(--font_sub-heading);
		background-color: #dff1fd;
		padding: 8px;
    }
	
	/*******************************************************************************************************/
	/*  3rd column: Declarations for Quotes column.  Holds photo and quotes.                               */
	/*******************************************************************************************************/
	
	/* changed right_photo to quotes_wrapper in next three declarations --- do a global change if this works */
	
	.quotes_wrapper {		/* Right column - holds photo & quote (used to be right_photo) */
		width: var(--proportion_right);
		height: 100%;
		float: right;
		padding: 4px 4px 4px 4px; /* top, right, bottom, left - was 0px 0px 10px 10px */
 		margin: 0; /* was margin-bottom: 0px; margin-top: 0px; */
		border-left: 1px #d7d7d7 solid;
	}
	
	.quotes_wrapper-mobile {	/* do nothing, let sidenav position.  (used to be right_photo-mobile) */
	}						
	
	.quotes_wrapper_manual {		/* Based on right_photo but for printed manual (used to be right_photo_manual)*/
		width: 120px;			/* Width reduced from 170px */ 
		height: 40px;
		float: right;
		padding: 0px 0px 179px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
		margin-top: 0px;
	}
	
	/*   In the following declarations for quotes_wrapper-mobile is identical to quotes_wrapper.    */
	/* Using quotes_wrapper in both the laptop and tablet version causes the quotes column to fail!?!  */
	
	.quotes_wrapper a:link,        .quotes_wrapper a:visited,
	.quotes_wrapper-mobile a:link, .quotes_wrapper-mobile a:visited {	
		font-weight: var(--normal_link_weight);
		color: var(--normal_link_color);
		text-decoration: underline;
	}
	.quotes_wrapper a:hover,
	.quotes_wrapper-mobile a:hover
	{
		font-weight: var(--normal_link_weight);
		color: var(--normal_link_hover);
		text-decoration: none;
	}
	.quotes_wrapper blockquote,
	.quotes_wrapper-mobile blockquote{
		margin:0;
	}
	
	/* Defines the font used in the text for the quote under the photo. */
	.right_quote {
		font-family: var(--body-fontfamily);
		font-size: var(--font_small);
		line-height: 1.3;
		color: darkblue;
		padding: 10px 5px 10px 3px; /* top, right, bottom, left */
	}
	.right_quote a:link, .right_quote a:visited {	
		font-size: var(--font_small);
		font-weight: var(--normal_link_weight);
		color: var(--normal_link_color);
		text-decoration: underline;
	}
	.right_quote a:hover {
		font-size: var(--font_small);
		font-weight: var(--normal_link_weight);
		color: var(--normal_link_hover);
		text-decoration: underline;
	}
	
	.quotes_divider {
		display: flex;
		justify-content: center;
		margin-top:15px;
	}
	
	.quotes_author {
		display: flex;
		justify-content: center;
		font-weight: bold;
		font-style: italic;
	}
	
	.quotes_more {
		display: flex;
		justify-content: center;
		font-weight: bold;
		font-style: italic;
		font-size: var(--font_small);
		margin-top: 15px;
	}
	/******************************************************************************************/
	/* mobile "sidenav" definitions for Quotes column (revealed with arrow in smaller widths) */
	/******************************************************************************************/
	
	.sidenav-right_quote {
			height: 100%;
			width: 190px;
			position: fixed;
			z-index: 1;
			top: 0;
			right: 0;	/* left:0 comes in from left, right:0 comes in from right */
			border-left: 1px darkblue solid; /* joao was 2px, problem: always present even when closed - how to hide? */
			background-color: white;
			overflow-x: hidden;
			transition: 0.5s;
			padding-top: 30px;
			will-change: transform;
	}
	.sidenav-right_quote[data-disclosure-state="closed"] {
		transform: translateX(100%);
	}
	@media (prefers-reduced-motion) {
		.sidenav-right_quote {
			transition: none;
		}
	}
	
	.sidenav-right_quote a {
	/* Does nothing?   padding: 5px 10px 5px 10px; /* top, right, bottom, left */
			text-decoration: none;
			font-size: var(--font_small);
			color: var(--menu_link_color);
			display: block;
			transition: 0.3s
	}
	
	.sidenav-right_quote a:hover, .offcanvas a:focus{
		color: var(--menu_link_hover);
	}
	
	.sidenav-right_quote .closebtn {
		position: absolute;
		line-height: 18px;	/* necessary or will be overlapped by photo */
		top: 0;
		left: 0px;
		margin-left: 0px;
	
		/* override default <button> styles */
		background: none;
		padding: 0;
		border: 0;
	}
	
	/*************************************************************************************************/
	/*  Defs for lists (such as those on the Teacher-Training page (resources/training.html)         */
	/*************************************************************************************************/
	
	.refs {
		list-style-type:none;
		padding-left: 0px;
	}
	/* ".refs li" will automatically apply class "refs" to any <li> within scope of class "refs"   */
	/* For example, if the <li> is part of <ul class="refs">, then "refs" is automatically applied */
	.refs li{	
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
	}
	
	.refs-centered {
		list-style-type:none;
		padding-left: 0px;
	}
	/* ".refs li" will automatically apply class "refs" to any <li> within scope of class "refs"   */
	/* For example, if the <li> is part of <ul class="refs">, then "refs" is automatically applied */
	.refs-centered li{	
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		text-align: center;
	}
	
	.materials {
		list-style-type:none;
		padding-left: 15px;
	}
	/* ".materials li" will automatically apply class "materials" to any <li> within scope of class "materials"   */
	/* For example, if the <li> is part of <ul class="materials">, then "materials" is automatically applied      */
	.materials li{	
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.2;
	}
	
	.materials-square {
		list-style-type:square;
		padding-left: 40px;
	}
	/* ".materials li" will automatically apply class "materials" to any <li> within scope of class "materials"   */
	/* For example, if the <li> is part of <ul class="materials">, then "materials" is automatically applied      */
	.materials-square li{	
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.2;
	}
	
	.materials-checkbox{
		list-style-type: none; /* Remove default bullets */
		list-style-image: url(https://palousemindfulness.com/art/checkbox_16.png);
		padding-left: 40px;
	}
	.materials-checkbox2 li {
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.2;
		padding-left: 10px;
	}

	.styled-numbers li::marker {    /* zzzyyy */
		color: var(--heading-color);
        font-weight: bold;
        font-size: var(--font_heading);
	}

	.clear
	{
	clear:both;	/* puts image on next line without regard to float:right or float:left */
	}
	
	.floatright {
		float:right;
		margin:10px 10px 10px 10px;
	}
	
	.photo-floatleft {
		height: 100%;
		float: left;
		padding: 0px 15px 0px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
	}
	
	.photo-floatright {
		height: 100%;
		float: right;
		padding: 0px 0px 0px 10px; /* top, right, bottom, left */
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	.photo-floatleft-tightright {
		height: 100%;
		float: left;
		padding: 5px 5px 0px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
	}
	
	.center_photo{
		text-align: center;
		margin: 0px;
		padding: 10px;
	}
	
	.photo-wrap img {	/* photo-wrap lets text wrap if goes past photo bottom */
		float: left;
		padding: 5px 5px 0px 0px; /* top, right, bottom, left */
		margin-bottom: 0px;
	}

	.photo-wrap {
		margin-bottom: 0px;
	}

	.photo-wrap:before,
	.photo-wrap:after {
		content: "";
		clear: both;		/* so next photo-wrap goes below the graphic for previous one */
		display: table;
	}
	
	.photo-flag {		/* photo-flag keeps text in a column if goes past photo bottom */
		display: table;	/* from https://csswizardry.com/2013/05/the-flag-object/       */
		width: 100%;
		margin-bottom: 20px;
	}

	.photo-flag_image,
	.photo-flag_text {
		display: table-cell;
		vertical-align: middle; /* also possible: top, bottom */
	}

	.photo-flag_image {	
	> img {				/* Dreamweaver doesn't understand ">" here, ignore 2 warnings */
		display: block;
		max-width: none;
		padding-right: 10px;
		}
	}
	.photo-flag_text {
	width:100%; /* without this a short single line of text gets centered !?! */
	}
/* example: (reversing image and text puts image on right, would need to make image "padding-left: 10px" in that case)
<div class="photo-flag">
<div class="photo-flag_image"><img src="../art/xxx.jpg" alt="xxx"/></div>
<div class="photo-flag_text">xxx</div>
</div>
*/


	/******************************************************************/
	/*  Form definitions                                              */
	/******************************************************************/
	
	input, textarea {
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		padding: 5px;
		border-radius: 3px;
		background-color: #f8f8f8;
	}
	
	.message_form {
		font-family: var(--body-fontfamily);
		max-width: 600px;
		margin-top: 20px;
		margin-right: 0px;
		margin-bottom: 20px;
		margin-left: 0px;
	}
	
	/*************************************************************************************************/
	/*  Definitions for special pages                                                                */
	/*************************************************************************************************/
	
	/**************************************************************/
	/*     Declarations for the Zoom session list                 */
	/**************************************************************/
	.columns {
		diplay:flex;
		flex-direction: row;
		margin: 5px;
		border: 1px solid #ccc;
		float:left;
		width: 200px;
		font-size: var(--font_normal);	
	}
	
	.column-list {
		list-style:none;
		margin-top:2px;
		margin-bottom: 2px;
		padding:0;
		flex:1;
		height: auto;
	}
	
	.column-list li{
		margin-left:15px;
	}
	
	/**************************************************************/
	/*     Declarations for the "About Us" gallery                */
	/**************************************************************/
	.gallery {
		margin: 5px;
		border: 1px solid #ccc;
		float:left;
		width: 110px;
		font-size: var(--font_small);	
	}
	
	/*
	.gallery:hover {
		border: 1px solid #777;
	}
	*/
	
	.gallery img {
		width: 100%;
		height: auto;
	}
	
	.gallery_desc {
		padding: 2px;
		text-align: center;
		}
	
	/******************************************************************/
	/*  For Graduate pages                                            */
	/******************************************************************/
	
	.graduate_date {
		font-size: var(--font_tiny);
		line-height: 1.3;
		font-style: italic;
		text-align: center;
	}
	
	.graduate_reference{
		margin: 40px;
		font-size: var(--font_small);
		font-style: italic;
	}
	
	.graduate_videos {
		font-size: var(--font_small);	
		line-height: 1.3; 	
		font-style: italic;
		text-align: center;
		color: darkblue;
	}
	
	.graduate_offering {
		font-size: var(--font_small);
		line-height: 1.3;
		font-style: italic;
		color: #0000ff;
	}
	
	/************************/
	/* For quotes.html page */
	/************************/
	.quote {
		padding-left: 10px;
		text-align: center;
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
	}
	ul.quote {
		list-style-type:none;
		padding-left: 10px;
	}
	li.quote {
		padding-bottom: 8px; /* top, right, bottom, left */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
	}
	
	/************************************/
	/* For testimonial/index.html       */
	/* (duplicated in testimonials.css) */
	/************************************/
	#testimonial_letter_wrapper {
		padding:0;
		width: 800px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 0px;
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
	}
	
	.testimonial_pagetitle {
		font-family: var(--body-fontfamily);
		font-size: var(--font_title);
		line-height: 1.0;
		font-style: italic;
		color: var(--amber);
		text-align: center;
		margin-top: 10px;
	}
	.testimonial_pagesubtitle { 
		font-size: var(--font_normal);
		font-weight: normal;
		font-style: italic;
		color: var(--amber);
		margin-bottom: 0px;
		margin-top: 0px;
}

	.testimonial {
		padding-left: 8px;
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		font-style: italic;
	}
	
	.testimonial-nav {
		padding-top:30px;
		font-size: var(--font_small);
		display: flex;	
		justify-content: space-around;
	}
	
	.testimonial-nav a:link, .testimonial-nav a:visited {
		color: var(--menu_link_color);	
		font-weight: var(--normal_link_weight);
		text-decoration: none;
		border: solid currentColor; 
		border-radius:8px;
		border-width: 1px; /* top, right, bottom, left */
		background-color: white;
		padding: 2px 5px;
}
	.testimonial-nav a:hover {
		color: var(--amber);
		text-decoration: none;
	}
	
	.testimonial-heading {
		font-weight: normal;
		font-size: 0.95rem
	}
	
	.testimonial_signature {
		color: var(--amber);
		padding-left: 8px;
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		font-style: italic;
	}
	
	#testimonial_letter-top {
		color: var(--content_color);
		width: 850px;	
		height: 35px;
		background-color: white;
		overflow: hidden;	/* allows box to expand with content */
		font-family: var(--body-fontfamily);
		font-size: var(--font_small);
		line-height: 1.0;		/* [rem conversion] was 14px */
		background-image: url(../art/parchment850x50-top-lighter.jpg); 
	}
	
	#testimonial_letter-middle {
		color: var(--content_color);
		width: 850px;	
		height: auto;
		background-color: white;
		overflow: hidden;	/* allows box to expand with content */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		font-style: italic;
		text-align: left;
		background-image: url(../art/parchment850x450-middle-lighter.jpg); 
			background-repeat: repeat-y;
	}
	
	#testimonial_letter-middle p {
		text-indent: 2rem;
		margin-bottom: 1.0rem;
	}
	
	#testimonial_letter-bottom {
		color: var(--content_color);
		width: 850px;	
		height: 35px;
		background-color: white;
		overflow: hidden;	/* allows box to expand with content */
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		background-image: url(../art/parchment850x35-bottom-lighter.jpg); 
	}
	
	.letter_title {
		color: var(--content_color);
		font-family: var(--title-fontfamily);
		font-size: var(--font_title);
		line-height: 1.3; 
		text-align: center;
		margin-top: 10px;
	}
	
	.letter_signature {
		font-family: var(--body-fontfamily);
		font-size: var(--font_normal);
		line-height: 1.3;
		margin-bottom: 10px;
		font-style: italic;
		text-align: center;
	}
	
	/*********************/
	/* for FAQ-list      */
	/*********************/
	.FAQ-list {	/* used only in bodyscan, raisin, sittingmeditation, yoga1, yoga 2 */
		font-size: var(--font_heading);
		line-height: 1.6;
		font-style: italic;
	}
	/************************************************************************************************************************/
	/* Normal ACCORDION declarations (used on home page, index.html)                                                        */
	/* See _accordion.js for corresponding javascript                                                                       */
	/************************************************************************************************************************/
	.accordion {
		margin: 0;
		padding: 0;
		border: none;
	}
	
	.accordion-trigger {
		cursor: pointer;
		background-color: white;
		color: darkblue;    /* text color */
		display: block;
		font-size: var(--font_normal);
		font-weight: bold;
		font-style: italic;
		margin: 0;
		padding: 2px 18px; /* top/bottom 2px right/left 18px */
		position: relative;
		text-align: left;
		width: 100%;
		outline: none;
		/* override border styles (links don't have border by default, but buttons do). This way we can use
		either a link or a button and the style will be the same */
		border-width: 1px;
		border-style: solid;
	}
	
	/* .accordion-trigger:focus,*/
	.accordion-trigger:hover {
		background-color: #cccccc;
	}
	
	.accordion-trigger:focus {
		outline: none;
	}
	
	.accordion button { 
		border-radius:8px;  
		outline: 1px black;  /*  With this the border is thick on larger screens,     */
		outline-style: solid;/* without it, there is no border on iphone size screen. */
	/*  box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4); /* removed shadow - horiz offset, vert offset, blur radius, spread, color+opacity */
	}
	
	.accordion-title {
		display: block;
		pointer-events: none;
		border: none; 
		outline: none;
	}
	
	.accordion-trigger:focus .accordion-title {
		border-color: none;
	}
	
	.accordion-icon {
		border: solid currentColor; 
		border-width: 0 2px 2px 0; /* top, right, bottom, left */
		height: 0.5rem;
		pointer-events: none;
		position: absolute;
		left: .5em;
		top: 50%;
		transform: translateY(-60%) rotate(45deg);
		width: 0.5rem;
	}
	
	.accordion-trigger:focus .accordion-icon,
	.accordion-trigger:hover .accordion-icon {
		border-color: black; /* not really relevant since no border */
	}
	
	.accordion-trigger[aria-expanded="true"] .accordion-icon {
		transform: translateY(-50%) rotate(-135deg);
	}
	
	.accordion-panel {
		background-color: white;
		padding: 0px 10px;
	}
	
	/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
	.accordion-panel[hidden] {
		display: none;
	}
	
	/************************************************************************************************************************/
	/* "citation" ACCORDION declarations (used on research.html)                                                            */
	/* See _accordion.js for corresponding javascript                                                                       */
	/************************************************************************************************************************/
	
	.citation_accordion {
		margin: 0;
		padding: 0;
		border: none;
	}
	
	.citation_accordion-trigger {
		cursor: pointer;
		background-color: white;
		color: black;    /* color doesn't take effect here - see override of link styling below*/
		display: block;
		font-size: var(--font_normal);
		font-weight: normal;
		font-style: italic;
		margin-left: 30px;
		padding: 2px 25px;
		position: relative;
		text-align: left;
		width: 75%;
		outline: none;
	}
	
	/* .accordion-trigger:focus,*/
	.citation_accordion-trigger:hover {
		background-color: #cccccc;
	}
	
	.citation_accordion-trigger:focus {
		outline: none;
	}
	
	.citation_accordion-trigger { 
		border-radius:0px;
		outline: 1px black;  /*  With this the border is thick on larger screens, but */
		outline-style: solid;/* without it, there is no border on iphone size screen. */
	/*  box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4); /* FAQ removed shadow - horiz offset, vert offset, blur radius, spread, color+opacity */
	
	
		/* override border styles (links don't have border by default, but buttons do). This way we can use
		either a link or a button and the style will be the same */
		border-width: 1px;
		border-style: solid;
	
		/* remove border and padding from the width: 100% */
		box-sizing: border-box;
	
		/* override link styling */
		color: black !important;
		text-decoration: none  !important;
	}
	
	.citation_accordion-title {
		display: block;
		pointer-events: none;
		border: none; 
		outline: none;
	}
	
	.citation_accordion-trigger:focus .citation_accordion-title {
		border-color: none;
	}
	
	.citation_accordion-icon {
		border: solid currentColor; 
		border-width: 0 1px 1px 0;
		height: 0.5rem;
		pointer-events: none;
		position: absolute;
		left: .5em;
		top: 50%;
		transform: translateY(-60%) rotate(45deg);
		width: 0.5rem;
	}
	
	.citation_accordion-trigger:focus .citation_accordion-icon,
	.citation_accordion-trigger:hover .citation_accordion-icon {
		border-color: black; /* not really relevant since no border */
	}
	
	.citation_accordion-trigger[aria-expanded="true"] .citation_accordion-icon {
		transform: translateY(-50%) rotate(-135deg);
	}
	
	.citation_accordion-panel {
		background-color: white;
		padding: 0px 10px;
	}
	
	/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
	.citation_accordion-panel[hidden] {
		display: none;
	}
	
	/* when the URL matches the id of the panel (e.g. we sent this link to someone) */
	.citation_accordion-panel:target {
		background: #ddd;
	}
	
	/************************************************************************************************************************/
	/* FAQ ACCORDION declarations (used on FAQ.html)                                                                        */
	/* See _accordion.js for corresponding javascript                                                                       */
	/************************************************************************************************************************/
	
	html {
		scroll-padding-top: 4rem;
	}
	
	.FAQ_accordion {
		margin: 0;
		padding: 0;
		border: none;
	}
	
	.FAQ_accordion-trigger {
		cursor: pointer;
		background-color: white;
		color: black;    /* color doesn't do anything here, see overide of link styling */
		display: block;
		font-size: var(--font_normal);
		font-weight: normal;
		font-style: italic;
		margin: 0;
		padding: 2px 18px; /* top/bottom 2px right/left 18px */
		position: relative;
		text-align: left;
		width: 100%;
		outline: none;
	}
	
	/* .accordion-trigger:focus,*/
	.FAQ_accordion-trigger:hover {
		background-color: #cccccc;
	}
	
	.FAQ_accordion-trigger:focus {
		outline: none;
	}
	
	.FAQ_accordion-trigger { 
		border-radius:8px;
		outline: 1px black;  /*  With this the border is thick on larger screens, but */
		outline-style: solid;/* without it, there is no border on iphone size screen. */
	/*  box-shadow: 0 2px 5px 2px rgba(0,0,0,0.4); /* removed shadow - horiz offset, vert offset, blur radius, spread, color+opacity */
	
	
		/* override border styles (links don't have border by default, but buttons do). This way we can use
		either a link or a button and the style will be the same */
		border-width: 1px;
		border-style: solid;
	
		/* remove border and padding from the width: 100% */
		box-sizing: border-box;
	
		/* override link styling */
		color: black !important;
		text-decoration: none  !important;
	}
	
	
	.FAQ_accordion-title {
		display: block;
		pointer-events: none;
		border: none; 
		outline: none;
	}
	
	.FAQ_accordion-trigger:focus .FAQ_accordion-title {
		border-color: none;
	}
	
	.FAQ_accordion-icon {
		border: solid currentColor; 
		border-width: 0 1px 1px 0;
		height: 0.5rem;
		pointer-events: none;
		position: absolute;
		left: .5em;
		top: 50%;
		transform: translateY(-60%) rotate(45deg);
		width: 0.5rem;
	}
	
	.FAQ_accordion-trigger:focus .FAQ_accordion-icon,
	.FAQ_accordion-trigger:hover .FAQ_accordion-icon {
		border-color: black; /* not really relevant since no border */
	}
	
	.FAQ_accordion-trigger[aria-expanded="true"] .FAQ_accordion-icon {
		transform: translateY(-50%) rotate(-135deg);
	}
	
	.FAQ_accordion-panel {
		background-color: white;
		padding: 0px 10px;
	}
	
	/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
	.FAQ_accordion-panel[hidden] {
		display: none;
	}
	
	/* when the URL matches the id of the panel (e.g. we sent this link to someone) */
	.FAQ_accordion-panel:target {
		background: #ddd;
	}
	
	/************************************************************************/
	/* Horizontal menu                                                      */
	/************************************************************************/
	
	.top-level-nav-list {
		background-color: none;
		display: flex;
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	
	.second-level-nav-list {
		background-color: white;    	/* was #dbdcf Very light blue, like white of clouds */
		list-style-type: none;
		padding: 0;
		margin: 0;
		z-index: 5;    				/* So doesn't go "under" any content below */
		position: absolute;
		top: 100%;
		min-width: 200px;
		border: 1px darkblue solid;   /* top, right, bottom, left */
		box-shadow: 0 8px 16px 5px rgba(0,0,0,0.7); 
		
display:none; /* enable for no animation */
/*		will-change: opacity, transform;/* Animation#2 [horiz menu]                                          */
/*		opacity: 0;						/*   To remove animation replace these 4 lines with display:none and */
/*		transform: translateY(10px);	/* make opposite change in  in lang-second-level-nav-list2 (below)   */
/*		transition: all 150ms ease-out;	/* */
}

	.second-level-nav-list[data-disclosure-state="opened"] {
display:block; /* enable for no animation */
/*		opacity: 1;						/* To disable animation, replace these 2 lines with display:block     */
/*		transform: none;				/* */
}
	
	.second-level-nav-list a:hover{ 
		text-decoration: underline;
		font-weight: bold;
	}
	
	.top-level-nav-list > li {
		position: relative;
		display: flex;
	}
	
	.top-link {
		background: none;
		color: var(--menu_tab_color);
		font-weight: var(--menu_tab_weight);
		font-style: var(--menu_tab_style);
		font-family: var(--body-fontfamily);
		font-size: var(--font_menu_title);
		padding: 0.2em 0.6em; /* top/bottom left/right */
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		border: 0;
	}
	
	.top-link-padding {		/* same as top-link except padding changed to spread out menu titles. */
		background: none;
		color: var(--menu_tab_color);
		font-weight: var(--menu_tab_weight);
		font-style: var(--menu_tab_style);
		font-family: var(--body-fontfamily);
		font-size: var(--font_menu_title);
		padding: 0.2em 2.0em; 	/* top/bottom left/right - left/right 2.0em instead of 0.6em  */
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		border: 0;
	}
	
	.top-link:focus {
	/* Removed: outline: 5px solid green; */
	/*          outline-offset: 2px;      */
		position: relative;
		z-index: 5;
	}
	
	button.top-link::after {
		content: "";
	/* Removed arrow - not necessary since all top items have pull-down menus
		border-bottom: 1px solid currentColor;
		border-right: 1px solid currentColor;
		height: 0.5em;
		margin-left: 0.75em;
		width: 0.5em;
		transform: rotate(45deg);
	*/
	}
	
	.top-link:hover,
	.top-link[aria-expanded="true"] {
		background-color: none;
		color: var(--menu_link_hover);
	}
	
	.L2-link {
		color: var(--menu_link_color); 
		line-height: var(--menu_link_height2); 
		display: block;
		padding: 0.2em 1em;
		margin:0;
		font-weight: var(--menu_link_weight) !important; /* Why does this need "!important" ?*/
	}
	
	.L2-link:hover,
	.L2-link:focus {
		text-decoration: underline;
		font-weight: var(--menu_link_weight);
	}
	
	.L2-link:focus {
	/* so that outline comes on top of everything   */
		position: relative;
	}
	
	/********************************************************/
	/* Hamburger menu                                       */
	/********************************************************/
	
	.hamburger_btn {        /* This button will be the "Hamburger" icon */
		border: 0;
		padding: 0px 0px 0px 0px; /* top, right, bottom, left */
		color: var(--menu_link_color);
		line-height: var(--menu_link_height2); 
		font-weight: 700;
		background-color: transparent; /* #c5c9e4; */
			height: 24px;
		cursor: pointer;
	}
	
	.hamburger_menu {
			position: relative;
			display: flex;
			z-index: 1;
			flex:1;
			justify-content: center;	/* make it "left" if going back to no left_menu arrow */
	}
	
	.hamburger_menu-content {
			display: none;
			position: absolute;
			z-index: 1;
		background-color: white;	/* was #cbd3e0 (doesn't do anything!?!)*/
		border: 2px darkblue solid;
			min-width: 160px;
			overflow: auto;
		padding: 0px 0px 0px 16px; /* top, right, bottom, left */
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		text-align:left;
	}
	
	.hamburger_menu-content a {
			color: var(--menu_link_color);
		line-height: var(--menu_link_height2); 
		 background-color: white; 	/* wasn't here before but still doesn't do anything!?! */
		padding: 12px 12px 0px 0px; /* top, right, bottom, left */
			text-decoration: none;
			display: block;
	}
	
	.hamburger_menu a:hover {
			color: var(--menu_link_hover)
	}
	
	.show {display:block;} 
	
	/*********************************************/
	/* Hamburger menu navigation                 */
	/*********************************************/
	
	#mobile-menu {
display:none; /* enable for no animation */
/*		opacity: 0;						/* Animation#3 [1st level hamburger menu]                             */
/*		transform: translateY(10px);	/*   To remove animation replace these 4 lines with display:none and  */
/*		will-change: opacity, transform;/* make opposite change in mobile-menu (below)                        */
/*		transition: all 150ms ease-out;	/* */
	}
	#mobile-menu[data-disclosure-state="opened"] {
display:block; /* enable for no animation */
/*		opacity: 1;						/* To disable animation, replace these 2 lines with display:block     */
/*		transform: none;				/* */
	}

	@media (prefers-reduced-motion) {
		#mobile-menu {
			transition: none;
		}
	}
	
	.accordion-nav {
		list-style-type: none;
		margin: 0;
		padding: 0;
		border: 0;
	}
	
	.accordion-nav > li {
		display: flex;
		flex-direction: column;
	}
	
	.menu-accordion-trigger:hover {
		background: none;
	}
	
	.menu-accordion-trigger::after {
		content: "";
		border-bottom: 1px solid currentColor;
		border-right: 1px solid currentColor;
		height: 0.5em;
		margin-left: 0.75em;
		width: 0.5em;
		transform: rotate(45deg);
		transition: transform 100ms ease-in-out;
	}
	.menu-accordion-trigger[aria-expanded="true"] {
		background: #dbdcf1;
	}
	.menu-accordion-trigger[aria-expanded="true"]::after {
		transform: rotate(-135deg);
	}
	
	.menu-accordion-panel {
		margin-left: 2em;        /* Was margin:0, changed to indent list*/
		padding: 0;
		background: white;
		list-style: none;
		border: 1px darkblue solid;   /* top, right, bottom, left */
	/*  box-shadow: 0px 8px 3px 3px rgba(0,0,0,0.2); /* horiz offset, vert offset, blur radius, spread, color+opacity */
		z-index: 5; /* added so accordion in content didn't overlay menu */

display:none; /* enable for no animation  */
/*		max-height: 0;		/* Animation#4 [2nd level hamburger menu]                             */
/*		opacity: 0;			/*   To remove animation replace these 5 lines with display:none and  */
/*		border-width: 0;	/* make opposite change in menu-accordion-panel (below)               */
/*		transition: max-height 300ms ease-out, opacity 300ms ease-out; 	/* */
/*		will-change: max-height, opacity;								/* */							
/*		overflow: hidden; 												/* */
}

	.menu-accordion-panel[data-disclosure-state="opened"] {
display:block; /* enable for no animation */
/*		opacity: 1;			/* To disable animation, replace these 3 lines with display:block     */
/*		max-height: 900px;	/* */
/*		border-width: 2px;	/* */
}

	@media (prefers-reduced-motion) {
		.menu-accordion-panel {
			transition: none;
		}
	}
	
	.mobile-top-link {
		color: var(--menu_tab_color);
		background: white !important;
		font-style: var(--menu_tab_style);
		font-weight: var(--menu_tab_weight);
		font-size: var(--font_menu_title);
		font-family: var(--body-fontfamily);
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-decoration: none;
		padding: 0.2em 1.0em;
		margin: 0; /* to over-ride default */
		border: 1px darkblue solid;
		box-shadow: 0 8px 3px 3px rgba(0,0,0,0.2); /* horiz offset, vert offset, blur radius, spread, color+opacity */}
	
	.mobile-top-link:hover {
		background: #ddd !important;
	}
	
	.mobile-top-link:focus {
	/* Removed:  outline: 5px solid green; */
	/*           outline-offset: 2px;      */
		position: relative;
		z-index: 5;
	}
	
	.arrow-button {
		height: 22px;
		border: none;
		background: none; 
	}
	
	.menu-button {
		color: var(--menu_tab_color);
		font-weight: var(--menu_tab_weight);
		font-size: var(--font_menu_title);
		font-family: var(--body-fontfamily);
		background: none;
		border: 0;
		display: flex;
		align-items: center;
		padding: 0em .5em;
		margin: 0; /* to over-ride default */
	}
	
	.menu-button[aria-expanded="true"] {
		background: none;
	}
	
	.menu-button:hover {
		background: #eee;
	}
	
	.menu-button::after {
		content: "";
		background-color: transparent;
		border-bottom: 1px solid currentColor;
		border-right: 1px solid currentColor;
		height: 0.5em;
		margin-left: 0.75em;
		width: 0.5em;
		transform: rotate(45deg);
		transition: transform 100ms ease-in-out;
	}
	.menu-button[aria-expanded="true"]::after {
		transform: rotate(-135deg);
	}
	
	.menu-button:focus {
	/* Removed:  outline: 5px solid green; */
	/*           outline-offset: 2px;      */
	}
	
	.search-link {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		padding: 2px 9px;
	}
	
	.search-link:hover {
		color: var(--amber);
	}
	
	.search-link svg {
		width: 24px;
		height: 24px;
	}