:root {
	/* Define color variables */
	--blue: #0f6cb9;	/*	variation of blue	*/
	--white: #fff;
	--red: #f00;

	/* Border metrics */
	--tab_border_width: 1px;

	/* Border colors */
	--tab_border_color: var(--blue);

	/* Inactive tab colors */
	--tab_background_color_inactive: var(--blue);
	--tab_text_color_inactive: var(--white);

	/* Active tab colors */
	--tab_background_color_active: var(--white);
	--tab_text_color_active: var(--red);

	/* Padding between tab text and tab boundary */
	--tab-padding_default: 7px;
	--tab-padding_horiz: var(--tab-padding_default);
	--tab-padding_vert: var(--tab-padding_default);

	/*	IMPORTANT: this should always be set to (--tab-padding_default) minus (--tab_border_width)
	so that the top edge of the tab content border aligns evenly with the bottom edge of the tabs.
	Ideally, would use calc() as in calc(--tab-padding_default - --tab_border_width)px but
	concatenation not supported in css so must explicitly declare here. */
	--tab-content-margin-top: 6px;
}

/* Tab Content - menucool.com */
ul.tabs {
	/*display: flex;
	flex-wrap: wrap;
	height: 27px;*/
	padding: 0;
	font-size: 0;
	margin: 0;
	list-style-type: none;
	text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
ul.tabs li {
	display: inline;
	margin: 0;
	margin-right: 3px; /*distance between tabs*/
}
ul.tabs li a {
	font: Bold 14px Verdana;
	text-decoration: none;
	position: relative;
	padding: var(--tab-padding_vert) var(--tab-padding_horiz);	/* TB-LR */
	border: var(--tab_border_width) solid var(--tab_border_color);
/*	border-bottom-color: var(--tab_border_color);*/
	border-bottom-color: var(--tab_background_color_active);
	border-radius: 3px;
	background: var(--tab_background_color_inactive);
	color: var(--tab_text_color_inactive);
	outline:none;
}
ul.tabs li a:hover {
	/*border: 1px solid var(--tab_border_color);*/
	color: var(--tab_text_color_inactive);
	background: var(--tab_background_color_inactive);
}
ul.tabs li.selected a, ul.tabs li.selected a:hover {
	position: relative;
	top: 0px;
	font-weight: bold;
	color: var(--tab_text_color_active);
	background: var(--tab_background_color_active);
}
ul.tabs li.selected a:hover {
	text-decoration: none;
}
div.tabcontents {
	border: var(--tab_border_width) solid var(--tab_border_color);
	padding: 20px;
	margin-top: var(--tab-content-margin-top);
	/*margin-right: 10px;*/
	border-radius: 0 3px 3px 3px;
}
@media all and (max-width: 360px) {
	#glossary ul.tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/*justify-content: space-evenly;*/
		/*flex: 1 1 0px;*/
	}
	#glossary ul.tabs li {
		/*display: inline;*/
		height: 35px;
		max-width: 35px;
		/*width: 30px;
		margin: 0;
		margin-right: 0;
		padding: 0;
		align-items: stretch;
		/*margin-top: 3px; /*distance between tabs*/
		/*margin-right: 0px;*/
	}
	ul.tabs li a {
		min-width: 35px;
		/*max-width: 35px;*/
		/*width: 30px;
		padding: 0;*/
	}
}