BODY
{
	background-image:url(../Graphics/Marble.jpg);
}


@media screen and (max-width: 1100px) {
BODY {
	background-image:none;
}
}


H1 {
	text-align:left;
	font-size:36.0pt;
	font-family:'Times New Roman';
	font-style:italic;
	font-weight:bold;
	margin: 0px;
}

@media screen and (max-width: 750px) {
H1 {
	font-size:30.0pt;
}
}

H2 {
	margin:5px 0px 10px 10px;
	text-align:left;
	font-size:20.0pt;
	font-weight:bold;
	font-family:'Arial';
	padding-left:3pt;
	font-style:italic;
}

H4 {
	margin-top:0pt;
	margin-bottom:0pt;
	text-align:left;
	font-size:12.0pt;
	font-family:'Arial';
	font-weight:bold;
}

SUB {
font-size:75%;
}


SUP {
font-size:75%;
}


A {
	text-decoration:none;
}


IMG {
	border:none;
	float:right;
}


TABLE {
border-collapse:collapse;
}

HEADER
{
	display:flex;
	flex-direction: row;
}


.Logo
{
	vertical-align:middle;
	padding-right:15px;
	padding-top:0px;
	padding-bottom:10px;
	order:0;
}


@media screen and (max-width: 1100px) {
.Logo {
	width:100%;
	flex-basis:15%;
}

}


.H1-FrontPage {
	font-size:30.0pt;
	text-align:center;
}

@media screen and (max-width: 1000px) {
.H1-FrontPage {
	font-size:20.0pt;
	text-align:center;
}
}

.TextPane {
	width:1020px;
	padding:10px;
	background-color:#FFFFFF;
	text-align:left;
	border:2px;
	border-color:#000000;
	border-style:solid;
	font-family:'Arial';
	margin:0 auto;
}


@media screen and (max-width: 1100px) {
.TextPane
{
	width:98%;
	border-style:none;
	font-size:110%; 
	font-family:'Arial';
	margin:0px;
	box-shadow: none;
}
}

.ElementTable {
	display:block;
	margin:10px auto;
	max-width:100%;
	text-align:right;
	background-color:#F8F8F8;
	padding:9px;
	border-style:ridge;
	border-color:#B7B7B7;
	border-width:5px;
}


.ElementList {
	display:none;
}


@media screen and (max-width: 800px) {
.ElementTable {
	display:none;
}


.ElementList {
	display:block;
}
}


.ElementPlateMetal {
	background-color:#A9A9A9;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}

.ElementPlateTransitionMetal {
	background-color:#E6E6E6;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}

.ElementPlateInnerTransitionMetal {
	background-color:#BDB76B;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}

.ElementPlateGas {
	background-color:#819FF7;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}

.ElementPlateNonMetal {
	background-color:#FDF5E6;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}


.ElementPlateMetalloid {
	background-color:#008B8B;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}


.ElementPlateUnknown {
	background-color:#FFFFFF;
	border-style:ridge;
	border-width:1.5pt;
	width:50px;
	height:45px;
	border-color:#B6B6B6;
	font-size:12.0pt;
	font-weight:bold;
}

.ElementPlateMetal:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateMetal A:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateTransitionMetal:hover {
	background-color:gray;
	color:#FFFFFF;
}

.ElementPlateTransitionMetal A:hover {
	background-color:gray;
	color:#FFFFFF;
}

.ElementPlateInnerTransitionMetal:hover {
	background-color:gray;
	color:#FFFFFF;
}

.ElementPlateInnerTransitionMetal A:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateMetalloid:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateMetalloid A:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateNonMetal:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateNonMetal A:hover {
	background-color:gray;
	color:#FFFFFF;
}

.ElementPlateGas:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateGas A:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateUnknown:hover {
	background-color:gray;
	color:#FFFFFF;
}


.ElementPlateUnknown A:hover {
	background-color:gray;
	color:#FFFFFF;
}

.ElementListMetal {
	display:block;
	padding:5px;
	background-color:#A9A9A9;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListTransitionMetal {
	display:block;
	padding:5px;
	background-color:#E6E6E6;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListInnerTransitionMetal {
	display:block;
	padding:5px;
	background-color:#BDB76B;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListMetalloid {
	display:block;
	padding:5px;
	background-color:#008B8B;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListGas {
	display:block;
	padding:5px;
	background-color:#819FF7;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListNonMetal {
	display:block;
	padding:5px;
	background-color:#FDF5E6;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

.ElementListUnknown {
	display:block;
	padding:5px;
	background-color:#FFFFFF;
	border-style:ridge;
	border-width:1.5pt;
	width:200px;
	border-color:#B6B6B6;
	font-size:14.0pt;
	font-weight:bold;
}

A:link {
	color: #000000;
}

A:visited {
	color: #000000;
}

A:active {
	color: #0000FF;
}

A:hover {
	color: #0000FF;
}