/*
	main stylesheet



	TODO: when all layout/design decisions are finalized, refactor and clean up !
	TODO: when all layout/design decisions are finalized, refactor and clean up !
	TODO: when all layout/design decisions are finalized, refactor and clean up !
	TODO: when all layout/design decisions are finalized, refactor and clean up !



*/




/*############################################################################*/
/*############################################################################*/
/* GENERAL STYLING */

html
	{
	width: 100%;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
	}

body
	{
	Xmax-width: 1920px;
	margin: auto;
	background: #ccc;
	overflow-x: hidden;
	font-size: 16px;
	line-height: 1.5;
	font-family:  Arial, Tahoma, sans-serif;
	color: #626262;
	height: 100%;
	}

body.noscroll
	{
	overflow: hidden;
	}

a
	{
	color: #2C63A8;	/* IEEE blue */
	}

a:visited
	{
	color: #00B5E2;	/* IEEE process cyan */

	color: #168CCD;	/* average of IEEE blue and IEEE process cyan */
	}


p, h1, h2, h3, h4
	{
	max-width: 44em;
	}

li
	{
	max-width: 42em;

	line-height: 1.4;
	margin-bottom: 0.6em;
	}

blockquote
	{
	max-width: 40em;
	}

img
	{
	height: auto;
	}


/*
h1, h2, h3, h4,
*/
strong
	{
	font-weight: bold;
	/*
	font-family:  Arial, Tahoma, sans-serif;
	*/
	}


blockquote
	{
	color: #888;
	}

a.mailto::after
	{
	Xborder: 1px solid green;
	content: "";
	display: inline-block;
	background-image: url(/wp-content/themes/Access2020/images/email-icon.svg);
	background-size: 100% auto;
	background-origin: content-box;
	background-repeat: no-repeat;
	background-position: bottom 0% left 0%;


	/* 80x58 */
	width:  1.1em;
	height: 1.2em;

	margin-left: 0.2em;



	}





#size_indicator
	{
	z-index: 999;
	position: fixed;
	top: 3px;
	left: 3px;
	display: block;
	display: none;
	box-sizing: content-box;
	width: auto;
	height: auto;
	background: rgba(255,255,255,0.8);
	border: 1px solid #eee;
	padding: 1px 6px;
	color: black;
	font-size: 16px;
	font-weight: bold;
	font-weight: normal;
	white-space: pre;
	}


#menu_indicator
	{
	z-index: 999;
	position: fixed;
	top: 3px;
	right: 3px;
	display: block;
	display: none;
	box-sizing: content-box;
	width: auto;
	height: auto;
	max-height: 320px;
	overflow: scroll;
	background: rgba(255,255,255,0.8);
	border: 1px solid #eee;
	padding: 1px 6px;
	color: black;
	font-size: 16px;
	font-weight: bold;
	font-weight: normal;
	white-space: pre;
	}

/*============================================================================*/
/* General IEEE items */

.ieee_access,
.ieee_xplore
	{
	white-space: nowrap;
	}

.xplore
	{
	font-style: italic;
	}


/*============================================================================*/
/* SKIP TO MAIN CONTENT */
/* for accessibility */
/*============================================================================*/

body
	{
	position: relative;
	}

.skiptomaincontent
	{
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}

.skiptomaincontent:focus,
.skiptomaincontent:active
	{
	position: static;
	left: 0px;
	width: auto;
	height: auto;
	overflow: visible;
	text-decoration: underline;
	}




/*============================================================================*/
/* TOGGLE BOXES */
/* (There is more specific formatting for Special Section and FAQ toggleboxes) */
/*============================================================================*/


.togglebox
	{
	Xbackground: #ffe;
	list-style-type: none;
	}

.togglebox .togglebox
	{
	Xbackground: #ffc;
	}



.togglebox			> .toggler
	{
	position: relative;
	display: inline-block;
	Xbackground: #cdf;
	color: #00629B;				/* IEEE Blue */
	cursor: pointer;
	}

.bio_grid_dropdown.togglebox p.toggler
	{
	background: #00629B;				/* IEEE Blue */
	color: #fff;
	font-weight: bold;
	padding: 0.5em 1em ;
	margin: 0;
	border-radius: 4px;
	}


.togglebox			> .toggler::before
	{
	content: "-";
	Xfont-size: 1.4em;
	font-size: 20px;
	position: relative;
	display: inline-block;
	width: 8px;
	margin: 0 10px 0 2px;
	margin: 0 20px 0 2px;
	}

.togglebox.closed	> .toggler::before
	{
	content: "+";
	top: 2px;
	}


.togglebox			> .togglee
	{
	Xbackground: #cfd;
	}

.togglebox.closed	> .togglee
	{
	display: none;
	}









/*############################################################################*/
/*############################################################################*/
/*############################################################################*/

/*############################################################################*/
/* TOP LEVEL FORMATTING */


/*
	top level structure:

body
	.ieeemeta
	#IEEEAccess
	.ieeefooter

*/


body
	{
	Xborder: 5px solid #c08;
	Xbox-sizing: content-box;
	}

		/*
		Xmargin: 0 0;
		Xmargin: 0 calc( (100vw - 500px) *   20 / 100 + 0px);
		Xmargin: 0 20px;
		*/

.ieeemeta
	{
	z-index: 2;
	}

/*============================================================================*/
/* BODY FLEXIBLE LAYOUT */
/*============================================================================*/

/*----------------------------------------------------------------------------*/
/* @media (min-width: 301px) and (max-width: 500px) */
/*----------------------------------------------------------------------------*/
@media (max-width: 500px)
	{
	body { padding: 0 0; }

	.ieeemeta nav			{ left:		20px; }
	.ieeemeta .masterbrand	{ right:	20px; }


	.ieeefooter
		{
		padding-left: 20px;
		padding-right: 20px;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 501px) and (max-width: 600px)
	{
	body { padding: 0 calc( (100vw - 500px) *   20 / 100 + 0px);	/* 0 - 20 */ }

	.ieeemeta nav
		{ left:  calc( (100vw - 500px) *   -20 / 100 + 20px);	/* 20 - 0 */ }
	.ieeemeta .masterbrand
		{ right: calc( (100vw - 500px) *   -20 / 100 + 20px);	/* 20 - 0 */ }


	.ieeefooter
		{
		padding-left:  calc( (100vw - 500px) *   -20 / 100 + 20px);	/* 20 - 0 */
		padding-right:  calc( (100vw - 500px) *   -20 / 100 + 20px);	/* 20 - 0 */
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 601px)
	{
	.ieeemeta nav			{ left:		0px; }
	.ieeemeta .masterbrand	{ right:	0px; }


	.ieeefooter
		{
		padding-left: 0px;
		padding-right: 0px;
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 601px) and (max-width: 1440px)
	{
	body
		{
		padding:
			0
			calc( (100vw - 600px) *   20 / 840 + 20px);	/* 20 - 40 */
		}

	}


/*----------------------------------------------------------------------------*/
@media (min-width: 1441px)
	{
	body
		{
		max-width: 1360px;
		max-width: 1440px;
		padding: 0 40px;
		}

	}



/*----------------------------------------------------------------------------*/




/*############################################################################*/
/*############################################################################*/
/* IEEE STYLES */


/*============================================================================*/
/* IEEE meta-nav header */

.ieeemeta
	{
	position: relative;
	height: 52px;
	}

.ieeemeta	{ background: transparent; Xbackground: #0f0; }

.ieeemeta nav
	{
	position: absolute;
	top: 22px;
	}

.ieeemeta nav li
	{
	display: inline-block;
	}

.ieeemeta nav li + li::before
	{
	content: "|";
	}

.ieeemeta nav li a
	{
	padding: 0 4px;
	}

.ieeemeta nav li + li::before,
.ieeemeta nav li a
	{
	color: #777;
	}

.ieeemeta .masterbrand
	{
	position: absolute;
	top: 9px;
	height: 34px;
	}

/*============================================================================*/
/* IEEEMETA FLEXIBLE LAYOUT */
/*============================================================================*/

/*----------------------------------------------------------------------------*/
/*
meta-nav and masterbrand are flush with body edges when body has 20px margins
but needs to add own side margins when body approaches viewport sides.
SEE BODY LAYOUT BELOW
*/
/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/* Toggle Minimal Nav */
/*----------------------------------------------------------------------------*/

@media (max-width: 700px)
	{
	.ieeemeta nav.ieeemeta-nav-minimal { display: block; }
	.ieeemeta nav.ieeemeta-nav-regular { display: none; }
	}

/*----------------------------------------------------------------------------*/
@media (min-width: 701px)
	{
	.ieeemeta nav.ieeemeta-nav-minimal { display: none; }
	.ieeemeta nav.ieeemeta-nav-regular { display: block; }
	}



/*----------------------------------------------------------------------------*/
/* Compress spacing between nav items */
/*----------------------------------------------------------------------------*/

@media (min-width: 701px) and (max-width: 1100px)
	{

	.ieeemeta nav li
		{
		font-size:		calc( (100vw - 700px) *   4 / 400 + 12px);	/* 12 - 16 */
		line-height:	calc( (100vw - 700px) *   4 / 400 + 12px);	/* 12 - 16 */
		}

	.ieeemeta nav li a
		{
		}

	.ieeemeta nav li + li::before
		{
		padding: 0 calc( (100vw - 700px) *   22 / 400 + 2px); 		/* 2 - 24 */
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 1101px)
	{

	.ieeemeta nav li a
		{
		font-size: 16px;
		line-height: 16px;
		}

	.ieeemeta nav li a
		{
		}

	.ieeemeta nav li + li::before
		{
		padding: 0 24px;
		}

	}



/*############################################################################*/
/*############################################################################*/
/* MAIN SITE (i.e. not ieeemeta/ieeefooter) */
/*############################################################################*/
/*############################################################################*/

#IEEEAccess
	{
	margin: 0 0;	/* do in body? does shadow extend beyond margins??? */
	position: relative;
	background-color: transparent;
	}

/*----------------------------------------------------------------------------*/
/* IEEE angled corner + Dropshadow */

#IEEEAccess::before
	{

	content: " ";
	display: block;
	position: absolute;
	background-image: url(/wp-content/themes/Access2020/images/BG_dropcorner30.svg);

		top: -20px;
		left: -20px;
		height: calc(100% + 40px);
		width: calc(100% + 40px);


/* TRY TO FIX SEVERE BLURRING ISSUE ON SAFARI (Mac, iOS) on long page */

/* this set doesn't work:
filter: none;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
 */

/* neither do these:
 image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
*/



	}

/* temporarily (?) change BG on problematic page */

body.buggy_tall_safari #IEEEAccess::before,
body.buggy_tall_firefox #IEEEAccess::before
	{
	background-image: none;
	background: #fff;

		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		box-shadow: 0 0px 10px 0px rgba(0,0,0,0.8);
	}





/*----------------------------------------------------------------------------*/
/* clear floats */

#IEEEAccess::after
	{
	clear: both;
	content: " ";
	display: block;
	width: 0.01px;
	height: 0.01px;
	}


/*============================================================================*/
/* IEEEAccess FLEXIBLE LAYOUT */
/*============================================================================*/

/* #navbar sides extend across #IEEEAccess padding */

/*----------------------------------------------------------------------------*/
@media (max-width: 500px)
	{
	#IEEEAccess
		{
		padding: 20px;
		}

	#navbar
		{
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
		}

	#homebanner
		{
		margin-left: -20px;
		margin-right: -20px;
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 501px) and (max-width: 600px)
	{
	#IEEEAccess
		{
		padding:
			calc( (100vw - 500px) *   30 / 100 + 20px);	/* 20 - 50 */
		}

	#navbar
		{
		margin-left:	calc( (100vw - 500px) *  -30 / 100 + -20px);	/* -20 - -50 */
		margin-right:	calc( (100vw - 500px) *  -30 / 100 + -20px);	/* -20 - -50 */
		padding-left:	calc( (100vw - 500px) *   30 / 100 +  20px);	/* 20 - 50 */
		padding-right:	calc( (100vw - 500px) *   30 / 100 +  20px);	/* 20 - 50 */
		}

	#homebanner
		{
		margin-left:	calc( (100vw - 500px) *  -30 / 100 + -20px);	/* -20 - -50 */
		margin-right:	calc( (100vw - 500px) *  -30 / 100 + -20px);	/* -20 - -50 */
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 601px)
	{
	#IEEEAccess
		{
		padding: 50px;
		}

	#navbar
		{
		margin-left: -50px;
		margin-right: -50px;
		padding-left: 50px;
		padding-right: 50px;
		}

	#homebanner
		{
		margin-left: -50px;
		margin-right: -50px;
		}

	}




/*############################################################################*/
/*############################################################################*/
/* HEADER LAYOUT */
/*############################################################################*/
/*############################################################################*/


header
	{
	Xborder: 5px solid #dc9;
	Xbackground: #fff;
	display: grid;
	position: relative;
	overflow-y: visible;
	}

header > *
	{
	display: block;
	}

/*----------------------------------------------------------------------------*/

#access_logo	{ grid-area: ga-logo; }
/* #access_tagline	{ grid-area: ga-tagline; } */
#social_search	{ grid-area: ga-socsrch; }
#navbar			{ grid-area: ga-navbar; }


/*============================================================================*/
/* HEADER FLEXIBLE LAYOUT */
/*============================================================================*/

header
	{
	align-items: end;
	}


/*----------------------------------------------------------------------------*/

@media (min-width: 301px) and (max-width: 440px)
	{

	header
		{

		grid-template-columns:
			100%;
			;

		grid-template-rows: auto auto auto ;

		grid-template-areas:
			"ga-logo"
			"ga-socsrch"
			"ga-navbar"
			;

		}

	}



/*----------------------------------------------------------------------------*/

@media (min-width: 441px) and (max-width: 900px)
	{

	header
		{
		grid-template-columns:
			auto 360px auto;
			;

		grid-template-rows: auto auto auto ;

		grid-template-areas:
			".	ga-logo		."
			".	ga-socsrch	."
			"ga-navbar	ga-navbar	ga-navbar"
			;

		}

	}




/*----------------------------------------------------------------------------*/
@media (min-width: 901px) and (max-width: 1200px)
	{

	header
		{

		grid-template-columns:
			360px
			calc( (100vw - 900px) * 120 / 300 +  20px)	/*  20 -  140 */
			auto ;

		grid-template-rows: auto auto ;

		grid-template-areas:
			"ga-logo	.			ga-socsrch"
			"ga-navbar	ga-navbar	ga-navbar"
			;

		}

	#access_logo
		{
		align-self: end;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1201px)
	{

	header
		{

		grid-template-columns:
			360px
			auto
			505px	/* from "auto" above... */
			;

		grid-template-rows: auto auto ;

		grid-template-areas:
			"ga-logo	.			ga-socsrch"
			"ga-navbar	ga-navbar	ga-navbar"
			;

		}

	#access_logo
		{
		align-self: end;
		margin-bottom: 2px;
		}

	#social_search
		{
		margin-bottom: 2px;
		}

	#access_logo
		{
		align-self: end;
		margin-bottom: 2px;
		}

	}





/*############################################################################*/
/* LOGO */
/*############################################################################*/

a#access_logo
	{
	display: block;
	}

a#access_logo img
	{
	width: 100%;
	height: auto;
	Xborder: 1px solid green;
	}

/*============================================================================*/
/* LOGO FLEXIBLE LAYOUT */
/*============================================================================*/

/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 440px)
	{
	a#access_logo
		{
		margin-top:	calc( (100vw - 300px) *  15 / 180 + 0px);	/* 0 - 15 */
		margin-top:	calc( (100vw - 300px) *  19 / 180 + 0px);	/* 0 - 19 */
		width: 100%;
		width:  80%;
		margin-left: auto;
		margin-right: auto;
		}
	}


/*----------------------------------------------------------------------------*/
@media (min-width: 441px) and  (max-width: 900px)
	{
	a#access_logo
		{
		width: 360px;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
		}
	}


/*----------------------------------------------------------------------------*/
@media (min-width: 901px)
	{
	a#access_logo
		{
		width: 360px;
		}
	}


/*############################################################################*/
/* TAGLINE */
/*############################################################################*/

/*
#access_tagline
	{
	display: block;
	color: #888;
	font-size: 18px;
	line-height: 1;
	margin-top: 8px;
	}
*/



/*############################################################################*/
/* SOCIAL/SEARCH */
/*############################################################################*/


#social_search
	{
	Xborder: 1px solid #da0;
	}

/*############################################################################*/
/* SOCIAL */
/*############################################################################*/

#social > div
	{
	Xborder: 1px solid orange;
	margin-left: auto;
	margin-right: 0;
	width: max-content;
	}

#social > div::after
	{
	clear: both;
	display: block;
	content: " ";
	font-size: 0.01px;
	width: 0.01px;
	height: 0.01px;
	visibility: hidden;
	}

#social > div p
	{
	Xborder: 1px solid green;
	font-size: 12px;
	line-height: 12px;
	color: #888;
	font-style: italic;
	margin-bottom: 6px;
	}


#social a
	{
	Xdisplay: inline-block;
	float: left;
	margin-left: 6px;
	}

#social a:first-of-type
	{
	margin-left: 0;
	}

#social a img
	{
	height: 24px;
	width: 24px;
	}


/*============================================================================*/
/* SOCIAL FLEXIBLE LAYOUT */
/*============================================================================*/

@media (min-width: 301px) and (max-width: 900px)
	{
	#social_search { margin-top:	27px; }
	#social_search { margin-top:	20px; }
	}




/*############################################################################*/
/* SEARCH BAR */
/*############################################################################*/

#searchform
	{
	position: relative;
	margin-top: 20px;
	margin-top: 12px;
	Xborder: 1px solid #d0a;
	}

#searchform *
	{
	Xmargin: 0;
	Xpadding: 0;
	Xborder: 0;
	}

#searchform form
	{
	margin: 0;
	}

#searchform form *
	{
	margin: 0;
	padding: 0;
	border: 0;
	height: 38px;
	}

#searchform > div,
#searchform > div > div,
#searchform > div > div > div,
X#searchform form div
	{
	Xdisplay: inline-block;
	}

#searchform #___gcse_0
	{
	display: block;
	}

#searchform #___gcse_0 > .gsc-control-cse
	{
	padding: 0;
	}




X#searchform form *
	{
	padding: 8px;
	border: 2px solid #80f;
	background: #fda;
	}

#searchform > div,
#searchform > div > div,
#searchform > div > div > div,
X#searchform form div
	{
	Xborder: 2px solid #f08;
	Xbackground: #daf;
	}





#searchform #gsc-iw-id1
	{
	border: 1px solid #777;
	background: #fff;
	}

#searchform #gsc-iw-id1,
#searchform input,
#searchform button
	{
	box-sizing: border-box;
	border-radius: 0;
	}

#searchform #gsc-iw-id1,
#searchform button
	{
	height: 38px;
	}

#searchform input
	{
	height: 36px;
	padding-left: 10px;
	background: transparent;


	-webkit-appearance: none;	/* fix bug in safari */
	}

#searchform input::placeholder
	{
	color: #999;
	font-size: 16px;
	font-style: italic;
	}


/* This is where we implement the input-field focus indication */
#searchform #gsc-iw-id1:focus-within
	{
	border: 1px solid red;
	border: 1px solid #00B5E2;	/* IEEE process cyan */
	/* Consider increasing border width, adjust alignment accordingly... */
	}



#searchform input:focus
	{
	height: 30px;
	Xoutline: 1px solid orange;
	height: 32px;	/* Can be up to 34px without covering the container outline */
	Xborder: 1px solid orange;


	outline: none;
	/* Implement focus indication in div that also contains the
	"X" input-clearing control,
	since that div is visually masquerading as the input box. */


	}

#searchform #gs_st50
	{
	width: 16px;
	}

#searchform button
	{
	background: #00629B;
	width: 38px;
	border-radius: 0;
	}

#searchform button svg
	{
	padding: 0;
	background: transparent;
	Xborder: 4px solid red;
	width: 20px;
	height: 20px;
	}

#searchform button svg path
	{
	padding: 0;
	fill: white;
	Xstroke: black;
	}





/*============================================================================*/
/* SEARCHFORM FLEXIBLE LAYOUT */
/*============================================================================*/

@media (min-width: 301px) and (max-width: 480px)
	{
	#searchform
		{
		width: 100%;
		}
	}

@media (min-width: 481px) and (max-width: 800px)
	{
	#searchform
		{
		max-width: 415px;
		}
	}



/*############################################################################*/
/* NAVBAR */
/*############################################################################*/

/*----------------------------------------------------------------------------*/
/* Overall layout */
/*----------------------------------------------------------------------------*/

#navbar
	{

	margin-bottom: 0px; /* let <#pagecontent> make its space under navbar */
	/* Background extends into container padding. */
	/* See #IEEEAccess, above, for negative side margin calculations. */
	/* And for corresponding side padding. */


	background-color: #00629B;
	}

#navbar a
	{
	color: #fff;
	}

#navbar ul.menu
	{
	line-height: 1;
	display: flex;
	justify-content: space-between;
	}


/*----------------------------------------------------------------------------*/
/* TOP LEVEL NAV ITEMS
/*----------------------------------------------------------------------------*/

#navbar ul.menu > li
	{
	flex: 0;
	Xdisplay: inline-block;
	margin-left: 35px;
	margin-left: 20px;
	margin-left: 0px;
	line-height: 1;
	margin-bottom: 0;
	}

#navbar ul.menu > li > a
	{
	display: block;
	Xfont-weight: bold;

	padding-left:	 10px;
	margin-left:	-10px;
	padding-right:	 10px;
	margin-right:	-10px;
	/* DO WE WANT TO DO FOR "▾" ALSO? */
	/* DO WE WANT TO DO FOR "▾" ALSO? */
	/* DO WE WANT TO DO FOR "▾" ALSO? */
	}

#navbar ul.menu > li > a:hover
	{
	background: rgba(255,255,255,0.4);;
	}

#navbar ul.menu > li.current-menu-ancestor > a,
#navbar ul.menu > li.current-menu-item > a
	{
	background: rgba(255,255,255,0.2);;
	}

/* #navbar ul.menu > li.current-menu-ancestor > a:hover */
/* #navbar ul.menu > li.menu-item-has-children > a:hover */
#navbar ul.menu > li.category_only > a:hover
	{
	background: transparent;
	}

/*============================================================================*/
/* MAIN NAVBAR FLEXIBLE LAYOUT */
/*============================================================================*/


/*----------------------------------------------------------------------------*/
/* Overall layout */
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 500px)
	{
	#navbar
		{
		margin-top: 15px;
		}
	}

/*----------------------------------------------------------------------------*/
@media (min-width: 501px) and (max-width: 600px)
	{
	#navbar
		{
		margin-top:	calc( (100vw - 500px) *  15 / 100 + 15px);	/* 15 - 30 */
		}
	}

/*----------------------------------------------------------------------------*/
@media (min-width: 601px)
	{
	#navbar
		{
		margin-top: 30px;
		}
	}




/*----------------------------------------------------------------------------*/
/* internal layout of individual nav items*/
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 800px)
	{

	#navbar
		{
		height: 46px;
		height: auto;
		}

	#navbar ul.menu
		{
		flex-direction: column;
		}

	#navbar ul.menu > li
		{
		white-space: nowrap;
		margin-bottom: 10px;
		padding-left: 22px;	/* all items match the room for "▾" */
		}

	/* #navbar ul.menu > li > a > br	{ display: none; } */
	#navbar ul.menu br	{ display: none; }

	}


/*----------------------------------------------------------------------------*/
/* No stacking of nav items - go from hamburger to fully horizontal */
/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/
@media (min-width: 801px) and (max-width: 1250px)
	{

	#navbar
		{
		height: 46px;
		height: auto;
		}

	#navbar ul.menu
		{
		}

	#navbar ul.menu > li
		{
		line-height: 1.2;
		white-space: nowrap;
		}
	}

/*----------------------------------------------------------------------------*/
@media (min-width: 1251px)
	{

	X#navbar,
	X#main_site_menu,
	X.menu-nested-pages-container,
	X#navbar ul.menu,
	X#navbar ul.menu > li
		{
		overflow: visible;
		}

	#navbar
		{
		height: 46px;
		height: auto;
		}

	#navbar ul.menu
		{
		}

	#navbar ul.menu > li			{ white-space: nowrap; }
	#navbar ul.menu > li > a > br	{ display: none; }
	}





/*============================================================================*/
/* DROPDOWN MENUS */
/*============================================================================*/

header
	{
	Xz-index: 2;
	}

#navbar ul.menu > li
	{
	position: relative;
	}

#navbar ul.menu > li > ul.sub-menu
	{
	padding: 10px;
	z-index: 50;	/* > board member dropdown */
	}



/*----------------------------------------------------------------------------*/
/* DROPDOWN NAV ITEMS
/*----------------------------------------------------------------------------*/

#navbar ul.sub-menu li
	{
	margin-bottom: 15px;
	/* because <li> is aligned properly, so push <a> padding out: */
	margin-left: -10px;
	}

#navbar ul.sub-menu a
	{
	display: block;
	padding: 10px;
	line-height: 1.2;
	line-height: 1;
	}

/*
#navbar ul.sub-menu a:not([href])
	{
	color: #000;
	}
*/

#navbar ul.sub-menu li:hover
	{
	background: rgba(0,98,155,0.2);
	}

#navbar ul.sub-menu li.current-menu-item:hover
	{
	background: transparent;
	}

#navbar ul.sub-menu > li.current-menu-item > a
	{
	color: #444;
	}


/*----------------------------------------------------------------------------*/
/* Triangle for dropdowns */
/*----------------------------------------------------------------------------*/

#navbar ul.menu > li.menu-item-has-children > a
	{
	position: relative;
	margin-left: 5px;
	margin-left: 0px;
	padding-left: 24px;	/* room for "▾" */
	}

#navbar ul.menu > li.menu-item-has-children > a::before
	{
	Xborder: 1px solid pink;
	position: absolute;
	left: 0px;
	display: block;

	width:  20px;
	height: 10px;
	width:  18px;
	height:  9px;

	content: " ";
	font-size: 0.1px;

	background-image: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 100 50' xmlns='http://www.w3.org/2000/svg'><path d='m0 0 50 50 50-50z' fill='white'/></svg> ");


	background-size: 100% 100%;
	background-origin: content-box;
	background-repeat: no-repeat;
	background-position: 0 0px;

	}



/*============================================================================*/
/* DROPDOWN FLEXIBLE LAYOUT */
/*============================================================================*/

/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 800px)
	{

	#navbar ul.menu > li > ul.sub-menu
		{
		background: rgba(255,255,255,0.2);
		padding: 10px 10px 10px 25px;
		}

	#navbar ul.sub-menu > li
		{
		Xmargin-bottom: 5px;
		Xline-height: 1.2;
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 801px)
	{

	#navbar ul.sub-menu
		{
		color: #000;
		background: #fff;
		}

	#navbar ul.menu > li > ul.sub-menu
		{
		position: absolute;
		padding: 20px 20px 20px 22px;
		Xborder: 2px solid red;
		display: none;
		}

	#navbar ul.sub-menu > li
		{
		Xborder: 2px solid teal;
		Xmargin-bottom: 5px;
		Xline-height: 1.2;
		Xline-height: 1.8;
		}

	/* #navbar ul.menu > li.menu-item-has-children:hover > ul.sub-menu */

	#navbar ul.menu > li.menu-item-has-children:hover   ul.sub-menu
		{
		display: block;
		}

	#navbar ul.sub-menu a
		{
		color: #00629B;
		}

	#navbar ul.menu > li > ul.sub-menu
		{
		box-shadow: 0 3px 6px 0 rgba(0,0,0,0.5);
		}

	}


/*----------------------------------------------------------------------------*/
@media (min-width: 801px) and (max-width: 1250px)
	{

	#navbar ul.menu > li:last-child > ul.sub-menu
		{
		right: -10px;	/* line up w/top level highlight */
		}
	}

/*----------------------------------------------------------------------------*/
/* DROPDOWN vertical positioning depends on link height (ie stacking text) */
/*----------------------------------------------------------------------------*/

/* top = content height + 2x15px padding */

/*----------------------------------------------------------------------------*/
@media (min-width: 801px) and (max-width: 1250px)
	{

	#navbar ul.menu > li > ul.sub-menu
		{
		top: 68px;
		}
	}

/*----------------------------------------------------------------------------*/
@media (min-width: 1251px)
	{

	#navbar ul.menu > li > ul.sub-menu
		{
		top: 46px;
		}
	}

/*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*/

/*============================================================================*/
/* NAVBAR HAMBURGER */
/*============================================================================*/

#nav_controller
	{
	position: relative;
	Xborder: 1px solid #fff;
	Xborder-radius: 4px;
	width: 50%;
	width: 100%;
	height: 36px;
	height: 40px;
	margin: 0 auto;
	}

#navburger
	{
	Xpointer-events: none;
	position: relative;
	Xborder: 1px solid #aaa;
	Xborder-radius: 4px;
	width: 32px;
	width: 64px;
	height: 32px;
	margin: 0 auto;
	}

#navburger::before
	{
	Xborder: 1px solid #d0f;
	/* &#9776; is ☰  */
	content: "☰";
	position: absolute;
	top: -11px;
	top: -2px;	/* Good for Android/Chrome */
	top: -3px;	/* Good for iOS/Safari */
	top: -7px;	/* This is good for MacOS/Firefox */
	top: -3px;	/* Good for iOS/Safari */
	top: -4px;	/* Good for iOS/Safari , iOS 8 needs a little higher... */
	left: 50%;
	width: 32px;
	margin-left: -16px;
	color: #fff;
	font-weight: bold;
	font-size: 32px;
	}



/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 800px)
	{
	#nav_controller	{ display: block; }

	nav#main_site_menu
		{
		display: none;
		margin-top: 5px;
		margin-bottom: 5px;
		}

	nav#main_site_menu ul.menu > li > a
		{
		padding-top: 5px;
		padding-bottom: 5px;
		}

	#navbar ul.menu > li.menu-item-has-children > a::before
		{
		/* same as link padding+2 */
		top: 2px;
		top: 7px;
		}

	body.noJS	nav#main_site_menu,
				nav#main_site_menu.nav_opened
		{
		display: block;
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 801px)
	{

	#nav_controller	{ display: none; }

	nav#main_site_menu
		{
		display: block;
		}

	nav#main_site_menu ul.menu > li > a
		{
		padding-top: 15px;
		padding-bottom: 15px;
		}

	#navbar ul.menu > li.menu-item-has-children > a::before
		{
		/* same as link padding+2 */
		top: 2px;
		top: 17px;
		}

	}



/*############################################################################*/
/*############################################################################*/
/* PAGE CONTENT AREA */

/* This is the "middle" of the IEEE Access part of the web page.
	It contains the actual <main> and the (sometimes) page-specific sidebar. */

/* It is styled in "pagecontent.css". */
/*############################################################################*/
/*############################################################################*/






/*############################################################################*/
/*############################################################################*/
/* GENERAL CONTENT STYLING */
/*############################################################################*/
/*############################################################################*/



/*============================================================================*/
/* BUTTONS */
/*============================================================================*/

a.button
	{
	display: block;
	width: max-content;
	margin: 20px auto;
	text-align: center;
	padding: 5px 12px;
	border-radius: 4px;
	color: #fff;
	font-weight: normal;
	background: #00B5E2;	/* IEEE process cyan */
	}

/*============================================================================*/
/* ANCHOR LINKS */
/*============================================================================*/

nav#page_anchors
	{
	max-width: max-content;
	background: #eee;
	border-radius: 4px;
	padding: 1em;
	}

nav#page_anchors a
	{
	display: block;
	}


/***** THIS DOESN'T APPEAR IN THIS CONTEXT

#pagecontent a[href="#maincontent"]
	{
	display: block;
	text-align: right;
	}

*****/


/*============================================================================*/
/* Definition Lists */
/*============================================================================*/


dl
	{
	display: block;
	}

dt
	{
	display: inline;
	font-weight: bold;
	}

dt.bigdef
	{
	display: block;
	margin-bottom: 6px;
	}

dt::after
	{
	content: " - ";
	display: inline;
	}

dt.bigdef::after
	{
	content: ":";
	}

dd
	{
	display: inline;
	}

dt.bigdef + dd
	{
	display: block;
	}

dd::after
	{
	display: block;
	margin-bottom: 12px;

	content: " ";
	font-size: 0.01px;
	line-height: 0.01px;
	height: 0.01px;
	width: 0.01px;
	}


/*============================================================================*/
/* Off-site links icon */
/*============================================================================*/


			a[href*="//"]:not([href*="ieeeaccess."])::after

	{
	content: "";

	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-38 -50 88 88' %3E %3Cg stroke-width='6' fill='none' %3E %3Cpath d='M0 0L47 -47' stroke='rgb(44,99,168)' /%3E %3Cpath d='M20 -47L47 -47 47 -20' stroke='rgb(44,99,168)' /%3E %3Cpath d='M0 -35L-25 -35   Q-35 -35 -35 -25   L-35 25     Q-35 35 -25 35   L25 35   Q35 35 35 25   L35 0' stroke='rgb(44,99,168)' /%3E %3C/g%3E %3C/svg%3E ");

	background-size: 100% 100%;
	background-origin: content-box;
	background-repeat: no-repeat;
	display: inline-block;
	width:  0.9em;
	height: 0.9em;


	margin: 0 0.2em 0 0.5em ;

	vertical-align: -0.06em;
	}



			/* This does not seem to render, even though the selection happens. */
			a:visited[href*="//"]:not([href*="ieeeaccess."])::after

	{
	/* color: #168CCD;*/	/* average of IEEE blue and IEEE process cyan */
	Xborder: 1px solid red;
	Xtransform: rotate(25deg);

	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-38 -50 88 88' %3E %3Cg stroke-width='6' fill='none' %3E %3Cpath d='M0 0L47 -47' stroke='rgb(22,140,205)' /%3E %3Cpath d='M20 -47L47 -47 47 -20' stroke='rgb(44,99,168)' /%3E %3Cpath d='M0 -35L-25 -35   Q-35 -35 -35 -25   L-35 25     Q-35 35 -25 35   L25 35   Q35 35 35 25   L35 0' stroke='rgb(44,99,168)' /%3E %3C/g%3E %3C/svg%3E ");

	}


/*
Don't display offsite icon for any specified links,
ieee meta (top) nav, or...
*/

			a[href*="//"]:not([href*="ieeeaccess."]).no_offsite_icon::after,
.ieeemeta	a[href*="//"]:not([href*="ieeeaccess."])::after,
.ieeefooter	a[href*="//"]:not([href*="ieeeaccess."])::after,
a.socimage[href*="//"]:not([href*="ieeeaccess."])::after,
#IEEEAccess > header a[href*="//"]:not([href*="ieeeaccess."])::after

	{
	content: "";
	background-image: none;
	display: none;
	}



/* Different color icons in buttons */
		a.button[href*="//"]:not([href*="ieeeaccess."])::after
	{
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-38 -50 88 88' %3E %3Cg stroke-width='6' fill='none' %3E %3Cpath d='M0 0L47 -47' stroke='rgb(255, 255, 255)' /%3E %3Cpath d='M20 -47L47 -47 47 -20' stroke='rgb(255, 255, 255)' /%3E %3Cpath d='M0 -35L-25 -35   Q-35 -35 -35 -25   L-35 25     Q-35 35 -25 35   L25 35   Q35 35 35 25   L35 0' stroke='rgb(255, 255, 255)' /%3E %3C/g%3E %3C/svg%3E ");
	}




a[href$=".pdf"]::after
	{
	color: red;
	content: "";
	background-image: url("/wp-content/uploads/PDFicon.svg");
	background-size: 100% 100%;
	background-origin: content-box;
	background-repeat: no-repeat;
	display: inline-block;
	width:  15px;
	height: 18px;


	margin: 0 0.2em 0 0.5em ;

	vertical-align: -0.06em;
	}



/*============================================================================*/
/* BREADCRUMBS */
/*============================================================================*/

.breadcrumb
	{
	color: #555;
	font-size: 14px;
	margin-bottom: 15px;
	}

.breadcrumb a,
.breadcrumb span
	{
	Xwhite-space: nowrap;
	}

.breadcrumb a
	{
	color: #2C63A8;
	}

.breadcrumb a::after
	{
	Xcontent: ' » ';
	Xcolor: #2C63A8;
	}



/*============================================================================*/
/* "Add to Any" share icons at bottom and/or top of pages */
/*============================================================================*/

body .addtoany_list
	{
	display: block;
	margin-top: 60px;	/* This was at the bottom */
	margin-top: 00px;
	margin-left: -4px;	/* compensate for icon padding */
	}

.share_tools
	{
	margin-bottom: 20px;
	}

.home .share_tools
	{
	margin-top: 40px;
	margin-bottom: -20px;	/* homemodules margin-top is 40px, too much */
	/* we may not keep tools on top of homemodules */
	}

.share_tools p
	{
	font-size: 12px;
	line-height: 12px;
	color: #888;
	font-style: italic;
	margin-bottom: 6px;
	}

/*############################################################################*/
/*############################################################################*/
/* FOOTER */

footer
	{
	Xborder: 5px solid red;
	Xbackground: #efd;
	}

/*----------------------------------------------------------------------------*/

.ieeefooter
	{
	padding-top: 22px;
	padding-bottom: 22px;
	}

.ieeefooter
	{
	color: #777;
	}

.ieeefooter ul
	{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 -20px;
	margin: 0 -15px;
	}

.ieeefooter li
	{
	display: inline-block;
	text-transform: uppercase;
	list-style-type: none;
	font-size: 16px;
	font-size: 12px;
	margin: 0 15px;
	line-height: 3.0em;
	}

.ieeefooter li + li
	{
	}

.ieeefooter p
	{
	line-height: 1.9;
	margin-top: 0.9em;
	font-size: 12px;
	max-width: 100%;
	}

.ieeefooter a
	{
	color: #777;
	}




/*----------------------------------------------------------------------------*/
/* FLEXIBLE LAYOUT */
/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 600px)
	{
	.ieeefooter ul
		{
		flex-direction: column;
		}

	}


/*----------------------------------------------------------------------------*/
/* @media (min-width: 601px) and (max-width: 1920px) */
@media (min-width: 601px)
	{
	.ieeefooter ul
		{
		flex-direction: row;
		}

	}


/*----------------------------------------------------------------------------*/





/*############################################################################*/
/*############################################################################*/
/* PAGE-SPECIFIC CONTENT */
/*############################################################################*/
/*############################################################################*/





/*############################################################################*/
/* CONTENT - SEARCH RESULTS */
/*############################################################################*/

.search-results p,
.search-results h2
	{
	max-width: 60em;
	}


body.search-results article {
	border: 0;
	padding: 0;
	margin: 0em 0 2em 0;
}

body.search-results article:last-child {
	margin: 0;
}

body.search-results article h2 {
	padding-bottom: 5px;
}


body.search-results article h2		/* size as h3 in main content */
	{
	font-size: 21px;
	margin-top: 4px;		/* but not these */
	margin-bottom: 4px;
	}

body.search-results article h3		/* size as h4 in main content */
	{
	font-size: 18px;
	margin-top: 18px;
	margin-bottom: 15px;
	}

body.search-results article section
	{
	margin-top: 0px;	/* closer than default */
	}


body.search-results span.sitename
	{
	font-size: 0.8em;
	font-weight: bold;
	font-family:  Arial, Tahoma, OpenSansBold, sans-serif;
	color: #888;
	}

body.search-results article p strong {
	Xfont-weight: bold;
	Xfont-size: 1.1em;
	color: #000
}

body.search-results article footer {
	display: none;
}


/*----------------------------------------------------------------------------*/

body.search-results ul.pagination
	{
	padding: 0;
	display: flex;
	justify-content: space-between;
	width: 300px;
	}

body.search-results ul.pagination li
	{
	}

body.search-results ul.pagination li:empty
	{
	display: none;
	}


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/





/*############################################################################*/
/* CONTENT - HOME PAGE */
/*############################################################################*/


#homebanner
	{
	Xborder: 2px solid #8f4;
	padding-left: 0;
	padding-right: 0;
	background: #00629B;				/* IEEE Blue */

	/* SIDE MARGINS EXTEND OUT, LIKE NAVBAR - SEE ABOVE ALSO */
	}

#homerotator
	{
	Xborder: 2px solid #408;
	background: hsl(212,  80%, 22%);	/* #002855 */
	background: #00629B;				/* IEEE Blue */
	}

#homerotator img
	{
	height: auto;
	border: 0;
	}

#hometitle
	{
	background: hsl(192,100%,44%);	/* #00B5E2 */
	background: hsla(192,100%,44%, 0.15);
	background: rgb(219,242,249);
	Xborder: 2px solid #a6f;
	}

#hometitle h1
	{
	margin: 0;
	}

#homecontent
	{
	background: hsl(192,100%,44%);	/* #00B5E2 */
	background: hsla(192,100%,44%, 0.15);
	background: rgb(219,242,249);
	Xborder: 2px solid #a6f;
	font-size: 1.2em;
	}

#homecontent p:last-child,
#homecontent .button
	{
	margin-bottom: 0;
	}

#homecontent .button
	{

	/* do this when homebanner sticks out over IEEEAccess padding,
		same as for navbar. */
	margin-right: 0;


	margin-right: 20px;
	}

/*============================================================================*/
/* HOME PAGE BANNER LAYOUT */
/*============================================================================*/

#homebanner
	{
	display: grid;
	}

#homerotator	{ grid-area: ga-homerotator; }
#hometitle		{ grid-area: ga-hometitle; }
#homecontent	{ grid-area: ga-homecontent; }



/*----------------------------------------------------------------------------*/

@media (min-width: 301px) and (max-width: 900px)
	{

	#homebanner
		{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"ga-homerotator"
			"ga-hometitle"
			"ga-homecontent"
			;
		}

	#hometitle		{ padding: 40px 30px 10px 30px; }
	#homecontent	{ padding:  5px 30px 30px 30px; }

	}



/*----------------------------------------------------------------------------*/

@media (min-width: 901px)
	{

	#homebanner
		{
	Xheight: 320px;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto auto;
		grid-template-areas:
			"ga-homerotator	ga-hometitle"
			"ga-homerotator	ga-homecontent"
			;
		}

	#hometitle		{ padding: 40px 30px 10px 30px; }
	#homecontent	{ padding:  5px 30px 30px 30px; }

	}






/*============================================================================*/
/* HOME PAGE ROTATOR - PURE CSS */
/*============================================================================*/

.rotator
	{
	position: relative;
	}

.rotator img
	{
	position: relative;
	display: block;
	opacity: 0;
	animation-iteration-count: infinite;
	Xborder: 1px solid #ccc;
	}

.rotator img ~ img
	{
	position: absolute;
	top: 0;
	left: 0;
	}

.rotator img:nth-child(1)	{ animation-delay:  0.0s; }
.rotator img:nth-child(2)	{ animation-delay:  6.0s; }
.rotator img:nth-child(3)	{ animation-delay: 12.0s; }
.rotator img:nth-child(4)	{ animation-delay: 18.0s; }
.rotator img:nth-child(5)	{ animation-delay: 24.0s; }
.rotator img:nth-child(6)	{ animation-delay: 30.0s; }
.rotator img:nth-child(7)	{ animation-delay: 36.0s; }
.rotator img:nth-child(8)	{ animation-delay: 42.0s; }
.rotator img:nth-child(9)	{ animation-delay: 48.0s; }

.rotator img:first-child:nth-last-child(2), .rotator img:first-child:nth-last-child(2) ~ img { animation-name: fade2; animation-duration: 12s; }
.rotator img:first-child:nth-last-child(3), .rotator img:first-child:nth-last-child(3) ~ img { animation-name: fade3; animation-duration: 18s; }
.rotator img:first-child:nth-last-child(4), .rotator img:first-child:nth-last-child(4) ~ img { animation-name: fade4; animation-duration: 24s; }
.rotator img:first-child:nth-last-child(5), .rotator img:first-child:nth-last-child(5) ~ img { animation-name: fade5; animation-duration: 30s; }
.rotator img:first-child:nth-last-child(6), .rotator img:first-child:nth-last-child(6) ~ img { animation-name: fade6; animation-duration: 36s; }
.rotator img:first-child:nth-last-child(7), .rotator img:first-child:nth-last-child(7) ~ img { animation-name: fade7; animation-duration: 42s; }
.rotator img:first-child:nth-last-child(8), .rotator img:first-child:nth-last-child(8) ~ img { animation-name: fade8; animation-duration: 48s; }
.rotator img:first-child:nth-last-child(9), .rotator img:first-child:nth-last-child(9) ~ img { animation-name: fade9; animation-duration: 54s; }






.rotator img:only-child
	{
	opacity: 1;
	}

@keyframes fade2
	{
	from	{ opacity: 0; }
	25%		{ opacity: 1; }
	50%		{ opacity: 1; }
	75%		{ opacity: 0; }
	}

@keyframes fade3
	{
	from	{ opacity: 0; }
	16.667%	{ opacity: 1; }
	33.333%	{ opacity: 1; }
	50%		{ opacity: 0; }
	}

@keyframes fade4
	{
	from	{ opacity: 0; }
	12.5%	{ opacity: 1; }
	25%		{ opacity: 1; }
	37.5%	{ opacity: 0; }
	}

@keyframes fade5
	{
	from	{ opacity: 0; }
	10%		{ opacity: 1; }
	20%		{ opacity: 1; }
	30%		{ opacity: 0; }
	}

@keyframes fade6
	{
	from	{ opacity: 0; }
	 8.333%	{ opacity: 1; }
	16.667%	{ opacity: 1; }
	25%		{ opacity: 0; }
	}

@keyframes fade7
	{
	from	{ opacity: 0; }
	 7.143%	{ opacity: 1; }
	14.286%	{ opacity: 1; }
	21.429%	{ opacity: 0; }
	}

@keyframes fade8
	{
	from	{ opacity: 0; }
	 6.25%	{ opacity: 1; }
	12.5%	{ opacity: 1; }
	18.75%	{ opacity: 0; }
	}

@keyframes fade9
	{
	from	{ opacity: 0; }
	 5.555%	{ opacity: 1; }
	11.111%	{ opacity: 1; }
	16.666%	{ opacity: 0; }
	}



/*============================================================================*/
/* HOME PAGE ROTATOR - JS */
/*============================================================================*/

.rotator_js
	{
	position: relative;
	Xborder: 2px solid yellow;
	height: max-content;
	}

.rotator_js img
	{
	Xborder: 2px solid pink;
	display: block;
	transition: opacity 1s;
	}

.rotator_js img:first-child
	{
	Xborder: 2px solid green;
	position: relative;		/* first image defines the size of rotator */
	opacity: 1;
	}

.rotator_js img ~ img
	{
	Xborder: 2px solid orange;
	position: absolute;
	top: 0;
	left: 0;

	opacity: 0;
	}


.rotator_js .nextbutton,
.rotator_js .prevbutton
	{
	position: absolute;
	top: calc(50% - 20px);
	display: block;
	width: 0px;
	height: 0px;
	background: transparent;
	border-style: solid;
	box-sizing: content-box;
	}

.rotator_js .nextbutton
	{
	right: 5px;
	border-width: 20px 0px 20px 15px;
	border-color: transparent transparent transparent rgba(255,255,255,0.3);
	}

.rotator_js .prevbutton
	{
	left: 5px;
	border-width: 20px 15px 20px 0px;
	border-color: transparent rgba(200,200,200,0.4) transparent transparent;
	}

/*============================================================================*/
/* HOME PAGE MODULES */
/*============================================================================*/

#homemodules
	{
	margin-top: 40px;
	clear: both;
	}

#homemodules > div
	{
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px;
	padding: 20px;
	}

#homemodules > div > h2
	{
	Xwidth: max-content;
	max-width: 100%;
	margin: 0 auto 12px auto;
	}

#homemodules > div > h3
	{
	max-width: 100%;
	margin: 0 auto 12px auto;
	font-size: 18px;
	}

#homemodules  img
	{
	margin: 0 auto 12px auto;
	max-width: 260px;
	max-width: 100%;
	Xmax-height: 130px;
	height: auto;
	border: 1px solid #eee;

	}


/*============================================================================*/
/* HOME MODULES FLEXIBLE LAYOUT */
/*============================================================================*/

#homemodules
	{
	display: grid;
	}



/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 700px)
	{

	#homemodules
		{
		grid-template-columns: 1fr;
		row-gap: 40px;
		}


	}



/*----------------------------------------------------------------------------*/
@media (min-width: 701px) and (max-width: 1000px)
	{

	#homemodules
		{
		grid-template-columns: 1fr 1fr;
		column-gap: calc( (100vw - 700px) *   40 / 300 + 20px);
		row-gap: 40px;
		}


	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1001px) and (max-width: 1440px)
	{

	#homemodules
		{
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: calc( (100vw - 1000px) *   20 / 440 + 20px);
		row-gap: 40px;
		}


	}




/*----------------------------------------------------------------------------*/
@media (min-width: 1441px)
	{

	#homemodules
		{
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 40px;
		row-gap: 40px;
		}


	}



/*############################################################################*/
/* LEARN MORE ABOUT IEEE ACCESS page */
/*############################################################################*/

 .about_clarivate
 	{
	float:right;
	height:20px;
	}

.about_indexicons
	{
	display: flex;
	justify-content: space-between;
	margin: 20px 0 60px;
	}

.about_indexicons img
	{
	height: 60px;
	width: auto;
	Xpadding-right: 20px;
	}


/*############################################################################*/
/* BIO PAGES */
/*############################################################################*/

/*----------------------------------------------------------------------------*/
/* structure:

.bio
	.bio_box				box of "affiliation, etc"
	.about_box				the "title"
	.description
	.readmore_description
/*----------------------------------------------------------------------------*/

.bio
	{
	margin: 40px 0 40px 0;
	}

/* on bio list pages with no intro copy,
align the baseline of first name in bio to first heading in sidebar */

h1 + .bio
	{
	margin: -1px 0 40px 0;
	}

.bio > .description
	{
	height: max-content;
	}

/*----------------------------------------------------------------------------*/

.bio_box
	{
	display: block;
	Xmargin-top: 80px;
	margin-top: 6px;
	width: 220px;
	height: max-content;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #777;
	font-size: 16px;
	font-size: 14px;
	color: #777;
	}

.bio_box > *
	{
	Xwidth: max-content;
	Xmargin: 0 auto 10px auto;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 10px;
	}

.bio_box .bio_portrait
	{
	Xborder: 2px solid #0f8;
	border-radius: 99px;
	box-sizing: border-box;
	overflow: hidden;
	Xbackground: #ccc;
	}

body.page-template-T-eicpage	.bio_box .bio_portrait,
body.page-template-T-biopages	.bio_box .bio_portrait
	{
	width: 198px;	/* bio_box 220px - 2x10 - 2x1 */
	height: 198px;
	}

.bio_box .bio_portrait img
	{
	Xborder: 2px solid #f80;
	box-sizing: border-box;
	}

body.page-template-T-eicpage	.bio_box .bio_portrait img,
body.page-template-T-biopages	.bio_box .bio_portrait img
	{
	width: 198px;	/* bio_box 220px - 2x10 - 2x1 */
	height: auto;
	}


.bio_box .fullname
	{
	font-size: 20px;
	color: #444;
	}

.bio_box .institution
	{
	margin-bottom: 0px;
	}

.bio_box .fulltitle
	{
	margin-top: 10px;
	Xtext-align: center;
	}

.bio_box .socialmedia
	{
	Xbackground: #eee;
	padding: 10px 0;
	border-top: 1px solid #ccc;
	border-top: 1px solid #eee;
	margin-top: 20px;
	margin-bottom: 0;
	padding-bottom: 0;
	}

.bio_box .socialmedia:empty
	{
	display: none;
	}

.bio_box .socialmedia a		/* contains an icon */
	{
	Xborder: 1px solid green;
	border-radius: 3px;
	overflow: hidden;
	display: inline-block;

	width:  1.6em;
	height: 1.6em;

	margin-left: 1em;

	}

.bio_box .socialmedia a:first-child
	{
	margin-left: 0;
	}

.bio_box .socialmedia a img
	{
	border: none;
	}


/*----------------------------------------------------------------------------*/

.about_box
	{
	height: min-content;
	Xborder: 1px solid green;
	}

.about_box h2
	{
	margin: 0;	/* use grid spacing */
	}

.about_box .fellow
	{
	font-size: 0.6em;
	color: #888;
	font-style: italic;
	margin-left: 1em;
	white-space: nowrap;
	}



.bio .description,
.bio .readmore_description .readmore_contents
	{
	white-space: pre-wrap;
	}

.bio .readmore_description
	{
	Xmargin-top: 20px;
	}

.bio .readmore_description .readmore_contents
	{
	margin-top: 20px;
	margin-top: 10px;
	}


/*============================================================================*/
/* ALPHABET NAVIGATION */
/*============================================================================*/

#top_anchors
	{
	height: 0;
	margin: 0;
	padding: 0;
	}



/*============================================================================*/
/* BIOGRAPHY FLEXIBLE LAYOUT */
/*============================================================================*/

.bio
	{
	display: grid;
	column-gap: 20px;
	column-gap: 40px;
	row-gap: 10px;
	}

/*----------------------------------------------------------------------------*/

.bio_box			{ grid-area: ga-bio_box; }
.about_box			{ grid-area: ga-about_box; }
.description		{ grid-area: ga-description; }
.readmore_description	{ grid-area: ga-readmore_description; }



/*----------------------------------------------------------------------------*/

@media (min-width: 301px) and (max-width: 650px)
	{

	.bio
		{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		row-gap: 20px;
		grid-template-areas:
			"ga-bio_box"
			"ga-about_box"
			"ga-description"
			"ga-readmore_description"
			;
		}

	.bio_box
		{
		justify-self: center;
		margin-top: 0px;
		margin-bottom: 10px;
		}

	}






/*----------------------------------------------------------------------------*/
@media (min-width: 651px) and (max-width: 900px)
	{

	.bio
		{
		display: block;
		}

	.bio::after
		{
		clear: both;
		display: block;
		content: " ";
		font-size: 0.01px;
		}

body.page-template-T-eicpage	.bio .bio_box,
body.page-template-T-biopages	.bio .bio_box
		{
		float: left;
		margin: 0 40px 20px 0;
		}

	}

/*----------------------------------------------------------------------------*/
@media (min-width: 901px) and (max-width: 1000px)
	{

	.bio
		{
		grid-template-columns: 220px auto;
		grid-template-rows: min-content 1fr auto;
		grid-template-rows: min-content max-content 1fr;
		grid-template-areas:
			"ga-bio_box		ga-about_box"
			"ga-bio_box		ga-description"
			"ga-bio_box		ga-readmore_description"
			;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1001px) and (max-width: 1100px)
	{

	.bio
		{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		row-gap: 20px;
		grid-template-areas:
			"ga-bio_box"
			"ga-about_box"
			"ga-description"
			"ga-readmore_description"
			;
		}

	.bio_box
		{
		justify-self: center;
		margin-top: 0px;
		margin-bottom: 10px;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1101px) and (max-width: 1400px)
	{

	.bio
		{
		display: block;
		}

	.bio::after
		{
		clear: both;
		display: block;
		content: " ";
		font-size: 0.01px;
		}

body.page-template-T-eicpage 	.bio .bio_box,
body.page-template-T-biopages 	.bio .bio_box
		{
		float: left;
		margin: 0 40px 20px 0;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1401px)
	{

	.bio
		{
		grid-template-columns: 220px auto;
		grid-template-rows: min-content 1fr auto;
		grid-template-rows: min-content max-content auto;
		grid-template-rows: min-content max-content 1fr;
		grid-template-areas:
			"ga-bio_box		ga-about_box"
			"ga-bio_box		ga-description"
			"ga-bio_box		ga-readmore_description"
			;
		}

	}




/*----------------------------------------------------------------------------*/


/*############################################################################*/
/* BIO PAGES (GRID LIKE PROCEEDINGS) */
/*############################################################################*/


/*----------------------------------------------------------------------------*/
/* structure:

.bio_grid					Added container for grid layout

.bio
	.bio_box				box of "affiliation, etc"
	.about_box				the "title"
	.description
	.readmore_description

/*----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------*/
/*============================================================================*/
/* */


.bio_grid
	{
	Xborder: 1px solid red;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;

	justify-content: space-between;
	align-items: flex-start;
	margin: 0 -5px;
	margin: 0 -25px;
	}



.bio_grid	.bio
	{
	position: relative;
	Xborder: 2px solid #3a3;
	Xdisplay: inline-block;
	display: block;	/* cancel display: grid from original template */
	margin: 20px 5px 0 5px;
	margin: 20px 25px 0 25px;
	flex: 1 1 180px;
	flex: 1 1 180px;
	}


/*============================================================================*/
/* Toggle system */


/* just hide this */
.bio_grid	.bio > input[type=checkbox]
	{
	display: none;
	}


/*----------------------------------------------------------------------------*/

/* make entire bio thumbnail clickable */
.bio_grid					label
	{
	cursor: pointer;
	z-index: 25;
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background: rgba(255,200,200,0.5);
	background: transparent;
	}

/* entire window behind popup is clickable */
.bio_grid	input:checked ~	label
	{
	z-index: 90;
	position: fixed;
	display: block;
	left: 0; right: 0; top: 0; bottom: 0;
	background: rgba(200,255,200,0.5);
	background: rgba(0,0,0,0.5);
	}


/* bar above top of popup box */
.bio_grid	input:checked ~ label::before
	{
	content: "X";
	background: #ccc;
	position: fixed;
	height: 30px;
	text-align: right;
	padding: 5px;
	}


/*----------------------------------------------------------------------------*/
/* The entire popup box */

.bio_grid					.bio_pop
	{
	Xborder: 1px solid blue;
	display: block;
	background: #fff;
	}

/* The popup bio */
.bio_grid	input:checked ~ .bio_pop
	{
	z-index: 95;
	position: fixed;
	left: 100px; right: 100px;
	Xborder: 5px solid #00f;
	padding: 20px;
	overflow-y: scroll;
	}

/*----------------------------------------------------------------------------*/
/* Responsive popup width */

@media (min-width: 301px) and (max-width: 400px)
	{
	.bio_grid	input:checked ~ label::before,
	.bio_grid	input:checked ~ .bio_pop
		{
		left:	calc( (100vw - 300px) *  20 / 100 + 0px);	/* 0 - 20 */
		right:	calc( (100vw - 300px) *  20 / 100 + 0px);	/* 0 - 20 */
		}
	}

@media (min-width: 401px) and (max-width: 700px)
	{
	.bio_grid	input:checked ~ label::before,
	.bio_grid	input:checked ~ .bio_pop
		{
		left: 20px; right: 20px;
		}
	}

@media (min-width: 701px) and (max-width: 900px)
	{
	.bio_grid	input:checked ~ label::before,
	.bio_grid	input:checked ~ .bio_pop
		{
		left:	calc( (100vw - 700px) *  80 / 200 + 20px);	/* 20 - 100 */
		right:	calc( (100vw - 700px) *  80 / 200 + 20px);	/* 20 - 100 */
		}
	}

@media (min-width: 901px) and (max-width: 1000px)
	{
	.bio_grid	input:checked ~ label::before,
	.bio_grid	input:checked ~ .bio_pop
		{
		left: 100px; right: 100px;
		}
	}

@media (min-width: 1001px)
	{
	.bio_grid	input:checked ~ label::before,
	.bio_grid	input:checked ~ .bio_pop
		{
		left:	calc( (100vw - 800px) / 2);
		right:	calc( (100vw - 800px) / 2);
		}
	}

/*----------------------------------------------------------------------------*/
/* Responsive popup height */

@media (max-height: 500px)
	{
	.bio_grid	input:checked ~ label::before
		{
		top: 0px;
		}

	.bio_grid	input:checked ~ .bio_pop
		{
		top: 30px; bottom: 0px;
		}
	}

@media (min-height: 501px) and (max-height: 800px)
	{
	.bio_grid	input:checked ~ label::before
		{
		top: calc( (100vh - 500px) *  50 / 300 + 0px);	/* 0 - 50 */
		}

	.bio_grid	input:checked ~ .bio_pop
		{
		top:	40px;
		top:	calc( (100vh - 500px) *  50 / 300 + 30px);	/* 30 - 80 */
		bottom:	calc( (100vh - 500px) *  50 / 300 + 0px);	/* 0 - 50 */
		}
	}

@media (min-height: 801px)
	{
	.bio_grid	input:checked ~ label::before
		{
		top: 50px;
		}

	.bio_grid	input:checked ~ .bio_pop
		{
		top: 80px;
		bottom: 50px;
		}
	}


/*----------------------------------------------------------------------------*/
/* bio_box is the "thumbnail" (photo, name, affiliation) in grid view
/*----------------------------------------------------------------------------*/

.bio_grid					.bio_pop .bio_box
	{
	border: 0;
	Xborder: 1px solid #f5e;
	border-radius: 0;
	Xborder: 1px solid blue;
	padding: 0;
	margin: 0;
	Xdisplay: inline-block;
	Xwidth: 200px;
	width: auto;

	font-size: 16px;
	font-size: 14px;
	}

.bio_grid					.bio_pop .bio_box .fullname
	{
	font-size: 20px;
	}


.bio_grid	input:checked ~ .bio_pop .bio_box
	{
	max-width: 360px;
	border: 1px solid #eee;
	padding-bottom: 10px;
	}

@media (max-width: 700px)
	{
	.bio_grid	input:checked ~ .bio_pop .bio_box
		{
		margin: 0 auto 20px;
		}
	}

@media (min-width: 701px)
	{
	.bio_grid	input:checked ~ .bio_pop .bio_box
		{
		float: right;
		margin: 0 0 20px 20px;
		}
	}




.bio_grid					.bio_pop	.fulltitle
	{
	display: none;
	}

.bio_grid	input:checked ~	.bio_pop	.fulltitle
	{
	display: block;
	}


.bio_grid					.bio_pop	.socialmedia,
.bio_grid					.bio_pop	.about_box,
.bio_grid					.bio_pop	.description,
.bio_grid					.bio_pop	.readmore_description
	{
	display: none;
	}

.bio_grid	input:checked ~ .bio_pop	.socialmedia,
.bio_grid	input:checked ~ .bio_pop	.about_box,
.bio_grid	input:checked ~ .bio_pop	.description,
.bio_grid	input:checked ~ .bio_pop	.readmore_description
	{
	display: block;
	}


/*----------------------------------------------------------------------------*/
/* portrait images */
/*----------------------------------------------------------------------------*/


.bio_grid					.bio_pop .bio_box > *
	{
	margin-left: 10px;
	margin-right: 10px;
	}


/* .bio_grid .bio_portrait */
.bio_grid					.bio_pop .bio_box .bio_portrait
	{
	border-radius: 0;
	Xborder: 1px solid #5fe;
	margin: 0 0 10px 0;
	}

.bio_grid	input:not(:checked) ~ .bio_pop .bio_portrait
	{
	width: auto;
	height: 200px;
	position: relative;
	}

.bio_grid	input:checked ~ .bio_pop	.bio_portrait
	{
	margin: 0 auto 10px;
	}



.bio_grid	.bio_pop .bio_portrait img
	{
	border: 1px solid #eee;
	}

.bio_grid	input:not(:checked)	~ .bio_pop .bio_portrait img
	{
	max-height: 100%;
	width: auto;

	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	}

.bio_grid	input:checked		~ .bio_pop .bio_portrait img
	{
	margin: 0 auto;
	}


/*----------------------------------------------------------------------------*/





.bio_grid	input:checked ~ .bio_pop	.bio_portrait,
.bio_grid	input:checked ~ .bio_pop	.bio_portrait img
	{
	Xborder: 2px solid magenta;

	max-width: min(
		calc( (100vw - 400px) *  240 / 400 + 120px),
		calc( (100vh - 500px) *  240 / 300 + 120px)
		);

	max-height: min(
		calc( (100vh - 500px) *  320 / 300 + 160px),
		calc( (100vw - 400px) *  320 / 400 + 160px)
		);

	}



@media (min-width: 401px) and (max-width: 800px) and (max-width: 2px)
	{
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait,
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait img
		{
		Xborder: 1px solid green;
		max-width:	calc( (100vw - 400px) *  240 / 400 + 120px);	/* 120 - 360 */
		max-height:	calc( (100vw - 400px) *  320 / 400 + 160px);	/* 160 - 480 */
		}
	}

@media (min-height: 501px) and (max-height: 800px) and (max-width: 2px)
	{
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait,
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait img
		{
		Xborder: 1px solid yellow;
		max-width:	calc( (100vh - 500px) *  240 / 300 + 120px);	/* 120 - 360 */
		max-height:	calc( (100vh - 500px) *  320 / 300 + 160px);	/* 160 - 480 */
		}
	}



@media (min-width: 801px) and (min-height: 801px)
	{
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait,
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait img
		{
		Xborder: 1px solid red;
		max-width: 360px;
		max-height: 480px;
		}
	}



@media (max-width: 400px), (max-height: 500px)
	{
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait,
	.bio_grid	input:checked ~ .bio_pop	.bio_portrait img
		{
		Xborder: 1px solid blue;
		max-width: 120px;
		max-height: 160px;
		}
	}


/*----------------------------------------------------------------------------*/
/* dropdown list */
/*----------------------------------------------------------------------------*/

.bio_grid_dropdown
	{
	z-index: 33;
	overflow: visible;
	width: 200px;
	width: 220px;	/* now with toggler "+" */
	height: 41px;
	border-radius: 4px;
	}


.bio_grid_dropdown:hover
	{
	height: auto;
	}

.bio_grid
	{
	clear: both;
	}

.bio_grid_dropdown p
	{
	background: #00629B;				/* IEEE Blue */
	color: #fff;
	font-weight: bold;
	padding: 0.5em 1em ;
	margin: 0;
	border-radius: 4px;
	}

.bio_grid_dropdown:hover p
	{
	border-radius: 4px 4px 0 0;
	}

.bio_grid_dropdown ul
	{
	Xborder: 1px solid red;
	Xdisplay: none;
	/* transform: scaleY(0); */
	background: #fff;
	background: #f8f8f8;
	box-shadow: 1px 8px 8px 0px rgba(0,0,0,0.5);
	margin: 0;
	padding: 5px 0;
	list-style-type: none;
	/*
	transition-property: transform;
	transition-duration: 0.07s;
	transition-delay: 0.8s;
	transition-delay: 0.3s;
	transform-origin: top;
	*/
	}

/*
<offset-x> <offset-y> <blur-radius>  <spread-radius> ["inset"] [ <color> ]
*/


.bio_grid_dropdown:hover ul
	{
	Xdisplay: block;
	/*
	transform: scaleY(1);
	transition-duration: 0.02s;
	transition-delay: 0s;
	transform-origin: top;
	*/
	}


.bio_grid_dropdown li
	{
	Xborder: 1px solid green;
	margin: 0;
	padding: 0 ;
	}

.bio_grid_dropdown li label
	{
	display: block;
	width: 100%;
	cursor: pointer;
	font-size: 14px;
	margin: 0;
	padding: 3px 1em ;
	}

.bio_grid_dropdown li label:hover
	{
	background: #eee;
	}


/*----------------------------------------------------------------------------*/
/* Responsive Dropdown */
/*----------------------------------------------------------------------------*/

@media (max-width: 600px)
	{
	.bio_grid_dropdown
		{
		position: relative;
		margin-bottom: 20px;
		}
	}

@media (min-width: 701px)
	{
	.bio_grid_dropdown
		{
		position: absolute;
		top: 26px;
		right: 0;
		}
	}




/*############################################################################*/
/* INDIVIDUAL POSTS and PAGES ("single.php" T-content.php, etc) */
/*############################################################################*/

/*----------------------------------------------------------------------------*/
/* Images */
/*----------------------------------------------------------------------------*/

img.attachment-full,
img.size-full,
iframe
	{
	Xborder: 5px solid orange;
	display: block;
	margin: 0 auto 20px auto;
	}

/* NOT JUST .featured-video-plus iframe */



img.attachment-full		/* featured images, e.g. on top of posts */
	{
	max-width: 100%;
	max-height: 100%;
	height: auto;
	}

img.size-full			/* images inserted into content */
	{
	max-width: 100%;
	Xmax-height: 100%;
	}

iframe	/* All iframes are user-inserted content, probably all youtube videos */
	{
	max-width: 100%;
	Xmax-height: 100%;
	}

/* .featured-video-plus iframe	/* featured video, which replaces featured image */



/*############################################################################*/
/* LISTING PAGES (Society Sections, Announcements, Featured Articles) */
/*############################################################################*/



/*============================================================================*/
/* INDIVIDUAL LIST ITEMS */
/*============================================================================*/


/*----------------------------------------------------------------------------*/
/* Separators */
/*----------------------------------------------------------------------------*/

.announcement,
.feature
	{
	margin: 50px 0;
	border-top: 2px solid #ccc;
	}


.announcement:last-of-type,
.feature:last-of-type
	{
	padding-bottom: 10px;
	border-bottom: 2px solid #ccc;
	}


/*----------------------------------------------------------------------------*/
/* Images ("Thumbnails") */
/*----------------------------------------------------------------------------*/

.announcement img,
.feature img
	{
	Xborder: 5px solid orange;
	max-width: 100%;
	max-height: 200px;
	width: auto;
	height: auto;
	margin: 0 auto 20px auto;
	}

.announcement img
	{
	max-width: 100%;
	max-width: calc( 100% - 300px);		/* allow 300px for text to flow */
	max-width: calc( 100% - 400px);		/* allow 300px for text to flow */
	max-width: calc( 100% - 360px);		/* allow 300px for text to flow */
	max-height: 200px;
	width: auto;
	height: auto;
	margin: 0 auto 20px auto;
	margin: 0 0 20px 20px;
	float: right;
	}

.announcement::after
	{
	content: " ";
	font-size: 0.01px;
	height: 0px;
	width: 0px;
	color: transparent;
	display: block;
	clear: both;
	}


/*----------------------------------------------------------------------------*/
/* Announcements responsive
/*----------------------------------------------------------------------------*/

@media (max-width: 1000px)
	{
	.announcement img
		{
		min-width: 120px;
		}
	}

@media (min-width: 1001px)
	{
	.announcement img
		{
		min-width: 200px;
		}
	}

/*----------------------------------------------------------------------------*/
/* Dates */
/*----------------------------------------------------------------------------*/

.date
	{
	margin: 10px 0;
	font-size: 0.8em;
	color: #aaa;
	}

.date::before
	{
	content: "Publication date: ";
	}

/*----------------------------------------------------------------------------*/
/* Authors */
/*----------------------------------------------------------------------------*/

.authors
	{
	margin-bottom: 20px;
	}

.authors::before
	{
	content: "Authors: ";
	font-weight: bold;
	}


/*############################################################################*/
/* SOCIETY SECTIONS */
/*############################################################################*/



/*============================================================================*/
/* SOCIETY SECTION MODULES */
/*============================================================================*/

.socsec
	{
	padding-top: 20px;
	margin: 50px 0;
	border-top: 2px solid #ccc;
	}

.socsec:first-of-type
	{
	margin-top: 30px;
	}

.socsec:last-of-type
	{
	padding-bottom: 10px;
	border-bottom: 2px solid #ccc;
	}





.socsec > h3	/* Society name */
	{
	font-weight: bold;
	}

.socsec_info
	{
	margin-top: 20px;	/* images need more margin than text */
	}

.socsec a.socimage
	{
	display: block;
	}

.socsec .socimage img
	{
	box-sizing: content-box;
	display: block;
	width: auto;
	height: auto;
	border: none;
	}

.socsec .sectionurl
	{
	display: block;
	margin-bottom: 5px;
	}

.socsec .editors h3
	{
	margin-top: 10px;
	}

.socsec .editors p
	{
	white-space: pre-line;
	}

/*============================================================================*/
/* SOCIETY SECTION FLEXIBLE LAYOUT */
/*============================================================================*/

.socsec_info
	{
	Xborder: 2px solid orange;
	display: grid;
	}

.socimage		{ Xborder: 2px solid blue; }
.ss_description	{ Xborder: 2px solid green; }



.socimage		{ grid-area: ga-socimage; }
.ss_description	{ grid-area: ga-ss_description; }



/*----------------------------------------------------------------------------*/
@media
	(min-width:  301px) and (max-width:  800px),
	(min-width: 1001px) and (max-width: 1300px)
	/* Stack image and text vertically */
{


	.socsec_info
		{

		row-gap: 20px;

		grid-template-columns:
			100%;
			;

		grid-template-rows: auto auto ;

		grid-template-areas:
			"ga-socimage"
			"ga-ss_description"
			;

		}


	a.socimage
		{
		width: 250px;
		height: max-content;
		max-height: 100px;
		margin: 0 auto;
		}

	.socsec .socimage img
		{
		max-height: 100px;
		margin: 0 auto;
		}


}

/*----------------------------------------------------------------------------*/
@media
	(min-width: 801px) and (max-width: 1000px),
	(min-width: 1301px)
	/* Stack image and text horizontally */
{

	.socsec_info
		{

		column-gap: 20px;

		grid-template-columns:
			auto 250px;
			;

		grid-template-rows: 100% ;

		grid-template-areas:
			" ga-ss_description ga-socimage"
			;

		}

	a.socimage
		{
		width: 250px;
		height: max-content;
		max-height:  85px;
		margin: 0;
		}

	.socsec .socimage img
		{
		max-width: 250px;
		max-height:  85px;
		margin: 0;
		}

}






/*############################################################################*/
/* FAQs */
/*############################################################################*/

/*============================================================================*/
/* FAQ LIST */
/*============================================================================*/

/*============================================================================*/
/* FAQ MODULES */
/*============================================================================*/


.faq
	{
	position: relative;
	list-style-type: none;
	Xpadding: 10px;	/* move to the toggler within */
	background: #eee;
	border-radius: 5px;
	margin-bottom: 10px;
	color: #444;
	}

.faq .faq
	{
	padding: 5px 10px;
	margin-bottom: 5px;
	}




.faq ul
	{
	padding: 0 0 0 15px;
	padding: 0 0 0 35px;
	margin: 10px 0 0 0;
	}

.faq li
	{
	margin-bottom: 10px;
	}

.faq li:last-child
	{
	margin-bottom: 0px;
	}

.faq li li
	{
	list-style-type: disc;
	list-style-position: outside;
	line-height: 1.2;
	margin-bottom: 10px;
	}


/*----------------------------------------------------------------------------*/


.faq.togglebox p,
.faq.togglebox li
	{
	width: auto;
	}

.faq.togglebox .togglee
	{
	padding: 15px 35px;
	}





/*############################################################################*/
/* BOTH FAQs AND SPECIAL SECTIONS */
/*############################################################################*/

/*============================================================================*/
/* TOGGLE BOXES - FAQ AND SPECIAL SECTIONS */
/* and Board Grid */
/*============================================================================*/

ul.section_list,
ul.faq_list
	{
	padding-left: 0;
	}

ul.section_list li,
ul.faq_list li
	{
	max-width: 100%;
	}


.faq_list							.togglebox			> .toggler,
.page-template-T-specialsections	.togglebox			> .toggler,
.page-template-T-biopages-grid		.togglebox			> .toggler
	{
	display: block;
	Xcolor: #00629B;				/* IEEE Blue */
	Xcursor: pointer;
	}

/* These affect Sr Editor/Staff toggleboxes too */

.togglebox
	{
	padding-bottom: 10px;
	}

.togglebox.closed
	{
	padding-bottom: 0px;
	}




.faq							.toggler,
.special_section				.toggler,
.page-template-T-biopages-grid	.toggler
	{
	padding: 10px;
	padding: 10px 10px 10px 40px;	/* add 30px for "+" */
	}



						  .faq.togglebox	> .toggler::before,
			  .special_section.togglebox	> .toggler::before,
.page-template-T-biopages-grid.togglebox	> .toggler::before
	{
	position: absolute;
	left: 10px;	/* border-box */
	top: 4px;
	display: block;
	width: 8px;
	}


						  .faq.togglebox.closed	> .toggler::before,
			  .special_section.togglebox.closed	> .toggler::before
.page-template-T-biopages-grid.togglebox.closed	> .toggler::before
	{
	top: 6px;
	}



/* TODO: condense toggleboxes into "inline" and "block" styles */
/* TODO: condense toggleboxes into "inline" and "block" styles */
/* TODO: condense toggleboxes into "inline" and "block" styles */
/* then page-specific styles will be mostly just color/bg */



/*############################################################################*/
/* SPECIAL SECTIONS */
/*############################################################################*/



/*============================================================================*/
/* EXPAND/COLLAPSE BUTTONS */
/*============================================================================*/

.openclose
	{
	margin: 0 auto 20px auto;
	width: max-content;
	}

.openclose a.button
	{
	display: inline-block;
	white-space: nowrap;
	margin: 0 auto 10px auto;
	}


/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 660px)
	{

	.openclose
		{
		width: min-content;
		}

	.openclose a.button
		{
		display: block;
		}

	}



/*============================================================================*/
/* SPECIAL SECTION LIST */
/*============================================================================*/

ul.section_list
	{
	padding-left: 0;
	}

ul.section_list li
	{
	max-width: 100%;
	}

/*============================================================================*/
/* SPECIAL SECTION MODULES */
/*============================================================================*/


.special_section
	{
	position: relative;
	list-style-type: none;
	Xpadding: 10px;	/* move to the toggler within */
	background: #eee;
	border-radius: 5px;
	margin-bottom: 10px;
	color: #444;
	}




.special_section ul
	{
	padding: 0 0 0 15px;
	padding: 0 0 0 35px;
	margin: 10px 0 0 0;
	}

.special_section li
	{
	margin-bottom: 10px;
	}

.special_section li:last-child
	{
	margin-bottom: 0px;
	}

.special_section li
	{
	list-style-type: disc;
	list-style-position: outside;
	line-height: 1.2;
	margin-bottom: 10px;
	margin-left: 22px;
	}

.special_section > ul
	{
	padding-bottom: 10px;
	}

/* Closed SS "year" boxes */
.special_section li.togglebox
	{
	list-style-type: none;
	margin-left: 0px;
	margin-bottom: 0px;
	}

/*----------------------------------------------------------------------------*/



/*============================================================================*/
/* SPECIAL SECTION FLEXIBLE LAYOUT */
/*============================================================================*/





/*############################################################################*/
/* AEs and OAEs */
/*############################################################################*/

/*
OAE_box now contains ONLY the award emblem.
(It used to contain links: from AE page to OAE page, or OAE page to previous years)
*/

.OAE_box
	{
	display: block;
	Xborder: 1px solid #777;
	Xpadding: 9px;
	width: 180px;
	height: 180px;
	height: auto;
	Xborder-radius: 90px;
	}

.OAE_box svg
	{
	width: 150px;
	height: 150px;
	width: 180px;
	height: 180px;
	margin: 16px auto 6px auto;
	margin: 0 auto 6px auto;
	padding: 0;
	}

.OAE_box svg,
.OAE_box a
	{
	position: relative;
	display: block;
	bottom: 0;
	}

.OAE_box p
	{
	padding: 0;
	margin: 2px auto;
	Xborder: 1px solid #ddd;
	width: max-content;
	}



/*============================================================================*/
/*
	Special alignment of OAE_box:
	Push box up into page-title area, to allow AEs and OAEs to move up.
	Except when OAE_box would intersect the actual title.
*/
/*============================================================================*/


/* INSERT AE vs OAE page template id */

.OAE_box
	{
	position: relative;
	float: right;
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: 20px;
	}


/* Adjust for OAEs */

.OAE_top
	{
	position: relative;
	}

/*
There seems to be a bug in Firefox 81.0.1 where the viewport width
does not get transmitted properly to the page.
This transition happens at the wrong places, and not consistently:
	shrinking viewport: at the 801->800px transition.
	(or at whatever pixels it is changed to)
	growing viewport: at the 900->901px transition.
	These transitions replace the one from 860 <--> 861 here.

It also happens at 1300/1400 instead of 1350.
*/

@media screen and (max-width: 860px)
	{ .OAE_top .OAE_box { top: 0; } }

@media screen and (min-width: 861px) and (max-width: 1000px)
	{ .OAE_top .OAE_box { top: -65px; } }

@media screen and (min-width: 1001px) and (max-width: 1350px)
	{ .OAE_top .OAE_box { top: 0; } }

@media screen and (min-width: 1351px)
	{ .OAE_top .OAE_box { top: -65px; } }


.buggy_viewport_firefox .OAE_top .OAE_box { top: 0; }


/* Adjust for AEs */

@media
	/*
	(min-width: 661px) and (max-width: 1000px),
	(min-width: 1101px)
	*/
	(min-width: 631px)
	{
	.AE_top .OAE_box
		{
		margin-top: -65px;	/* push box up to match top of page title ascenders */
		}
	}








/*============================================================================*/
/* Split the alphabet anchor links when page is too narrow for A-Z */
/*============================================================================*/

@media (min-width: 301px) and (max-width: 500px)
{
	body .AE_anchors .full_alpha
		{
		display: none;
		}

	body .AE_anchors .half_alpha
		{
		display: flex;
		}

}






/*############################################################################*/
/* OAEs */
/*############################################################################*/

#OAE_grid
	{
	clear: both;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}

#OAE_grid
	{
	margin: 0 -10px;
	margin: 30px -10px;
	Xpadding: 20px;
	Xbackground: #ddf;
	}

#OAE_grid .OAE_biobox
	{
	display: inline-block;
	width: 200px;
	width: 180px;
	Xborder: 1px solid #eee;
	Xbackground: #efd;
	margin: 10px;
	margin: 0 10px 20px 10px;
	}

.OAE_biobox img
	{
	border: 1px solid #eee;
	}

#OAE_grid .OAE_biobox .name
	{
	display: block;
	margin-bottom: 10px;
	margin-bottom:  6px;
	font-weight: bold;
	}

#OAE_grid .OAE_biobox .affiliation
	{
	display: block;
	line-height: 1.2;
	}


/*============================================================================*/
@media (max-width: 434px)
	{

	#OAE_grid
		{
		justify-content: space-around;
		}

	}



/*############################################################################*/
/* WPCF7-FORM */
/*############################################################################*/


.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea
	{
	border: 1px solid #888;
	width: 100%;
	}

.wpcf7-form label
	{
	display: block;
	margin-top: 15px;
	}

.wpcf7-form label[for=terms-conditions]
	{
	width: calc(100% - 40px);
	}

.wpcf7-form span.acceptance-278
	{
	margin-top: 15px;
	}

.wpcf7-form span.acceptance-278,
.wpcf7-form label[for=terms-conditions]
	{
	display: inline-block;
	vertical-align: top;
	}


.wpcf7-form .wpcf7-list-item
	{
	margin: 0 1em 0 0;
	}


.wpcf7-form input[type=submit]
	{
	margin-top: 20px;

	/* same as a.button */
	display: block;
	width: max-content;
	margin: 20px auto;
	text-align: center;
	padding: 5px 12px;
	border-radius: 4px;
	color: #fff;
	font-weight: normal;
	background: #00B5E2;	/* IEEE process cyan */

	border: 0px;	/* negate other input border */
	}





/*############################################################################*/
/*############################################################################*/
/*############################################################################*/
/*############################################################################*/
/*############################################################################*/


/*############################################################################*/
/* METABOXES - These get styled in "admin.css", not here. */
/*############################################################################*/


/*----------------------------------------------------------------------------*/








/*############################################################################*/
/* ASDF */

/*----------------------------------------------------------------------------*/