/* ALL STYLES HAVE BEEN VERIFIED AS BEING IN Element-Template */
body.Element, body.AtomConfig {
	font-family: "Segoe UI", "SF UI Display Light", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14pt;
	line-height: 1.5em;
	padding-top: 6px;
	margin: 0;
}
p {
	margin: 0;
}
body.ElementDEMO p {
	margin-bottom: 2em;
}
a {
	text-decoration: none;
	padding: 1px;
}
a:hover, a:focus, a:active {
	background-color: transparent;
}
/* div.element-page is the entire content of the element page */
div.element-pageOLD {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
div.element-card {
	margin: 0 12px 0 9px;
	text-align: center;
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
div.element-card img {
	height: 400px;
}
div.atom-info {
	display: flex;
	padding: 0 4px;
	justify-content: space-between;
}
div.atom-info p:nth-child(1) {
	font-weight: bold;
	font-size: 18pt;
	color: green;
}
div.atom-info p:nth-child(2) {
	font-size: 16pt;
	font-weight: normal;
	color: navy;
}
/* div.element-history holds the four items of element info: name, etymology, year of discovery, discover */
div.element-history {
}
/* the style for block-info (group, period, block) shares selectors */
div.element-history p, p.block-info {
	font-size: 14pt;
}
div.element-history p.el-name {
	font-weight: bold;
	color: maroon;
	padding-top: 8px;
}
div.element-history p.el-etym {
	font-family: "Times New Roman";
	color: navy;
}
div.element-history p.el-year {
	font-weight: bold;
}
div.element-history p.el-discov {
	padding-bottom: 16px;
}
div.neighborhood {
	border-style: solid;
	border-width: 2px 0;
	border-color: inherit;
	padding: 10px 5px;
	margin-bottom: 9px;
}
div.neighbors {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 2fr repeat(4, 1fr);
	grid-template-rows: repeat(5, 1fr);
	height: 11em;
	align-items: center; /* vertical-align */
}
p.el-sym {
	font-weight: bold;
	line-height: 60px;
}
div.neighbors p {
	padding: 3px 0;
	text-align: center;
	font-size: 16pt;
	font-weight: bold;
	font-family: Verdana, "SF UI Display Light", Geneva, Tahoma, sans-serif;
}
div.neighbors p.el-sym {
	font-size: 66pt;
}
div.neighbors p.leftbox {
	text-align: left;
}
div.neighbors p.rightbox {
	text-align: right;
}
div.neighbors a, div.neighbors a:link, div.neighbors a:visited, div.neighbors a:focus, div.neighbors a:active {
	border: 1px solid black;
	text-decoration: none;
	padding: 0 4px 2px;
}
div.neighbors a:hover { /* NO LONGER NEED SEPARATE STYLES FOR ELEMENT STATES: gas, et al */
	background-color: silver;
	border: thin navy solid;
	color: white;
}
div.element-page {
	display: grid;
}
	div.element-page div.element-card {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin: 0 4px 0 0;
	}
		div.element-page div.element-card > div {
			align-self: center;
			padding: 0.5em;
		}
div.group-period-third {
	border-left: solid 1px black;
	border-right: solid 1px black;
}
	div.group-period-third a {
		border-bottom: none;
	}
	div.group-period-third img {
		width: 50%;
		height: auto
	}
div.neighborhood-third {
	border: none;
}
div.element-history p {
	padding: 0.25em 0;
}
	div.element-history p.el-name {
		font-size: 150%;
	}
div.language-block {
	display: grid;
	padding: 0.25em 0;
	margin-top: 0.5em;
}
div.lang-indoe-row { /* analogous to time-page in Time.css */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
	div.lang-indoe-row.non-ie {
		margin-top: 1.5em;
	}
		div.lang-indoe-row.non-ie .lang-column {
			justify-content: start;
		}
/*
.ar-script {
	font-family: "Times New Roman", Times, serif;
	font-size: 130%;
}
*/
/* THE FOLLOWING ARE USED ONLY IN THE AtomicConfig-Template */
div.config-layout {
	display: flex;
	align-items: center;
}
div.symname, div.shells {
	display: flex;
	flex-direction: column;
	margin: 1em;
}
div.symname p {
	text-align: center;
	font-weight: bold;
}
div.symname p:nth-child(1) {
	font-size: 125%;
	color: navy;
	padding: 0 0 3px 0;
}
div.symname p:nth-child(2) {
	font-size: 66pt;
	line-height: 60px;
	padding: 3px 0 16px 0;
}
div.symname p:nth-child(3) {
	font-size: 125%;
	color: maroon;
	padding-top: 8px;
}
div.shells {
	text-align: left;
}
p.atomic-config {
	font-size: 115%;
	line-height: 2em;
}
/* the following must be maintained in the Element.css file because these are loaded before the inserted AC_Footer.html frame is loaded*/
div.legend {
	display: flex;
	flex-direction: column;
	width: 100%;
}
div.legend iframe {
	height: 25em;
	margin: 0;
	padding-top: 0;
	border: 0;
}
/* legend STYLES USED SOLELY BY THE LEGEND IFRAME INSERT on individual Element Configuration pages */
/*
body.legend-body {
	margin: 0;
}
div.legend-row {
	display: flex;
	align-items: center;
}
div.legend-row p {
	margin: 0 0.25em;
	font-size: 12pt;
	font-family: "Segoe UI Semibold";
}
div.legend-row p:nth-child(1) {
	width: 20%;
}
div.legend-row p:nth-child(2) {
	width: 15%;
}
div.legend-row p:nth-child(3) {
line-height: normal;
}
*/