body {text-align:center;
		background-color:#000}
	td.empty {border-style:none}
	td.space {height:1em}
	td {border-style:solid;
	    border-width:1px;
		font-family:Arial;}
	span.atomicnumber, span.element {display:block;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:2px;
		margin-right:2px}
	span.symbol {display:block;
		margin-top:4px;
		margin-bottom:4px;
		margin-left:2px;
		margin-right:2px}
	span.element {font-weight:bold}
	table {border-collapse:collapse;
		text-align:center;
		background-color:#000}
	.series, h1 {color:#FFE4C4}
	
	td.nonmetal
	{
		background-image: linear-gradient(bottom, rgb(245,63,82) 47%, rgb(252,113,122) 89%);
		background-image: -o-linear-gradient(bottom, rgb(245,63,82) 47%, rgb(252,113,122) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(245,63,82) 47%, rgb(252,113,122) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(245,63,82) 47%, rgb(252,113,122) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(245,63,82) 47%, rgb(252,113,122) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(245,63,82)),
			color-stop(0.89, rgb(252,113,122))
		);
	}
	
	td.alkalimetal 
	{
		background-image: linear-gradient(bottom, rgb(190,9,222) 47%, rgb(198,97,211) 89%);
		background-image: -o-linear-gradient(bottom, rgb(190,9,222) 47%, rgb(198,97,211) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(190,9,222) 47%, rgb(198,97,211) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(190,9,222) 47%, rgb(198,97,211) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(190,9,222) 47%, rgb(198,97,211) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(190,9,222)),
			color-stop(0.89, rgb(198,97,211))
		);
	}
	
	td.alkaliearth
	{
		background-image: linear-gradient(bottom, rgb(11,152,217) 47%, rgb(99,173,208) 89%);
		background-image: -o-linear-gradient(bottom, rgb(11,152,217) 47%, rgb(99,173,208) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(11,152,217) 47%, rgb(99,173,208) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(11,152,217) 47%, rgb(99,173,208) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(11,152,217) 47%, rgb(99,173,208) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(11,152,217)),
			color-stop(0.89, rgb(99,173,208))
		);
	}

	td.transitionmetal
	{
		background-image: linear-gradient(bottom, rgb(255,247,10) 47%, rgb(255,249,64) 89%);
		background-image: -o-linear-gradient(bottom, rgb(255,247,10) 47%, rgb(255,249,64) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(255,247,10) 47%, rgb(255,249,64) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(255,247,10) 47%, rgb(255,249,64) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(255,247,10) 47%, rgb(255,249,64) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(255,247,10)),
			color-stop(0.89, rgb(255,249,64))
		);
	}
	
	td.basicmetal
	{
		background-image: linear-gradient(bottom, rgb(116,240,0) 47%, rgb(145,242,60) 89%);
		background-image: -o-linear-gradient(bottom, rgb(116,240,0) 47%, rgb(145,242,60) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(116,240,0) 47%, rgb(145,242,60) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(116,240,0) 47%, rgb(145,242,60) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(116,240,0) 47%, rgb(145,242,60) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(116,240,0)),
			color-stop(0.89, rgb(145,242,60))
		);
	}

	td.semimetal
	{
		background-image: linear-gradient(bottom, rgb(252,113,0) 47%, rgb(255,153,64) 89%);
		background-image: -o-linear-gradient(bottom, rgb(252,113,0) 47%, rgb(255,153,64) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(252,113,0) 47%, rgb(255,153,64) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(252,113,0) 47%, rgb(255,153,64) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(252,113,0) 47%, rgb(255,153,64) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(252,113,0)),
			color-stop(0.89, rgb(255,153,64))
		);
	}

	td.halogen
	{
		background-image: linear-gradient(bottom, rgb(0,209,167) 47%, rgb(94,209,186) 89%);
		background-image: -o-linear-gradient(bottom, rgb(0,209,167) 47%, rgb(94,209,186) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(0,209,167) 47%, rgb(94,209,186) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(0,209,167) 47%, rgb(94,209,186) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(0,209,167) 47%, rgb(94,209,186) 89%);
	
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(0,209,167)),
			color-stop(0.89, rgb(94,209,186))
		);
	}

	td.noblegas
	{
		background-image: linear-gradient(bottom, rgb(224,187,0) 47%, rgb(255,213,0) 89%);
		background-image: -o-linear-gradient(bottom, rgb(224,187,0) 47%, rgb(255,213,0) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(224,187,0) 47%, rgb(255,213,0) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(224,187,0) 47%, rgb(255,213,0) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(224,187,0) 47%, rgb(255,213,0) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(224,187,0)),
			color-stop(0.89, rgb(255,213,0))
		);
	}

	td.lanthanides
	{
		background-image: linear-gradient(bottom, rgb(164,245,24) 47%, rgb(196,246,111) 89%);
		background-image: -o-linear-gradient(bottom, rgb(164,245,24) 47%, rgb(196,246,111) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(164,245,24) 47%, rgb(196,246,111) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(164,245,24) 47%, rgb(196,246,111) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(164,245,24) 47%, rgb(196,246,111) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(164,245,24)),
			color-stop(0.89, rgb(196,246,111))
		);
	}

	td.actinides
	{
		background-image: linear-gradient(bottom, rgb(255,154,31) 47%, rgb(255,194,115) 89%);
		background-image: -o-linear-gradient(bottom, rgb(255,154,31) 47%, rgb(255,194,115) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(255,154,31) 47%, rgb(255,194,115) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(255,154,31) 47%, rgb(255,194,115) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(255,154,31) 47%, rgb(255,194,115) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(255,154,31)),
			color-stop(0.89, rgb(255,194,115))
		);
	}
	
	td:hover
	{
		background-image: linear-gradient(bottom, rgb(255,228,196) 47%, rgb(255,228,196) 89%);
		background-image: -o-linear-gradient(bottom, rgb(255,228,196) 47%, rgb(255,228,196) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(255,228,196) 47%, rgb(255,228,196) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(255,228,196) 47%, rgb(255,228,196) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(255,228,196) 47%, rgb(255,228,196) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(255,228,196)),
			color-stop(0.89, rgb(255,228,196))
		);
	}

	td.empty:hover
	{
		background-image: linear-gradient(bottom, rgb(0,0,0) 47%, rgb(0,0,0) 89%);
		background-image: -o-linear-gradient(bottom, rgb(0,0,0) 47%, rgb(0,0,0) 89%);
		background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 47%, rgb(0,0,0) 89%);
		background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 47%, rgb(0,0,0) 89%);
		background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 47%, rgb(0,0,0) 89%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.47, rgb(0,0,0)),
			color-stop(0.89, rgb(0,0,0))
		);
	}
	
	a {text-decoration:none;
		border:none;
		display:block}
	a:link, a:visited, a:hover, a:active {color:#000}

	
@media screen and (min-width: 300px)
{
	td.space {height:0.3em}
	td {height:0.9em;
	    width:0.9em;}
	td.empty {line-height:30%}
	span.atomicnumber {font-size:0.2499em}
	span.symbol{font-size:0.405em;}
	span.element{font-size:0.165em;}
	table {width:25.5%;
		height:30%;}
	h1 {font-size:0.6em}
	.series {font-size:0.3em}
	span {display:inline-block;
		margin-top:0.25px;
		margin-bottom:0.25px;
		margin-left:0.25px;
		margin-right:0.25px;}
}
@media screen and (min-width: 400px)
{
	td.space {height:0.4em}
	td {height:1.2em;
	    width:1.2em;}
	td.empty {line-height:40%}
	span.atomicnumber {font-size:0.3333em}
	span.symbol{font-size:0.54em;}
	span.element{font-size:0.22em;}
	table {width:0.34%;
		height:25%;}
	h1 {font-size:0.8em}
	.series {font-size:0.4em}
	span {display:inline-block;
		margin-top:0.5px;
		margin-bottom:0.5px;
		margin-left:0.5px;
		margin-right:0.5px;}
}

@media screen and (min-width: 500px)
{
	td.space {height:0.5em}
	td {height:1.5em;
	    width:1.5em;}
	td.empty {line-height:50%}
	span.atomicnumber {font-size:0.41665em}
	span.symbol{font-size:0.635em;}
	span.element{font-size:0.275em;}
	table {width:42.5%;
		height:50%;}
	h1 {font-size:1em}
	.series {font-size:0.5em}
	span {display:inline-block;
		margin-top:0.75px;
		margin-bottom:0.75px;
		margin-left:0.75px;
		margin-right:0.75x;}
}

@media screen and (min-width: 600px)
{
	td.space {height:0.6em}
	td {height:1.8em;
	    width:1.8em;}
	td.empty {line-height:60%}
	span.atomicnumber {font-size:0.49em}
	span.symbol{font-size:0.81em;}
	span.element{font-size:0.33em;}
	table {width:51%;
		height:60%;}
	h1 {font-size:1.2em}
	.series {font-size:0.6em}
	span {display:inline-block;
		margin-top:1px;
		margin-bottom:1px;
		margin-left:1px;
		margin-right:1px;}
}

@media screen and (min-width: 700px)
{	
	td.space {height:0.7em}
	td {height:2.1em;
	    width:2.1em;}
	td.empty {line-height:70%}
	span.atomicnumber {font-size:0.5833em}
	span.symbol{font-size:0.945em;}
	span.element{font-size:0.385em;}
	table {width:59.5%;
		height:70%;}
	h1 {font-size:1.4em}
	.series {font-size:0.7em}
	span {display:inline-block;
		margin-top:1.25px;
		margin-bottom:1.25px;
		margin-left:1.25px;
		margin-right:1.25px;}
}

@media screen and (min-width: 800px)
{
	td.space {min-height:0.8em}
	td {min-height:2.4em;
	    min-width:2.4em;}
	td.empty {line-height:80%}
	span.atomicnumber {font-size:0.6666em}
	span.symbol{font-size:1.08em;}
	span.element{font-size:0.44em;}
	table {min-width:68%;
		min-height:80%;}
	h1 {font-size:1.6em}
	.series {font-size:0.8em}
	h1 {line-height: 50%}
	span {display:inline-block;
		margin-top:1.5px;
		margin-bottom:1.5px;
		margin-left:1.5px;
		margin-right:1.5px;}
}

@media screen and (min-width: 900px)
{
	td.space {height:0.9em}
	td {height:2.7em;
	    width:2.7em;}
	td.empty {line-height:90%}
	span.atomicnumber {font-size:0.74997em}
	span.symbol{font-size:1.215em;}
	span.element{font-size:0.495em;}
	table {width:76.5%;
		height:90%;}
	h1 {font-size:1.8em}
	.series {font-size:0.9em}
	span {display:inline-block;
		margin-top:1.75px;
		margin-bottom:1.75px;
		margin-left:1.75px;
		margin-right:1.75px;}
}

@media screen and (min-width: 1000px)
{
	td.space {height:1em}
	td {height:3em;
	    width:3em;}
	td.empty {line-height:100%}
	span.atomicnumber {font-size:0.8333em}
	span.symbol{font-size:1.35em;}
	span.element{font-size:0.55em;}
	table {width:85%;
		height:100%;}
	p {line-height:95%;}
	h1 {font-size:2em}
	.series {font-size:1em}
}

@media screen and (min-width: 1100px)
{
	td {height:3.3em;
	    width:3.3em;}
}

@media screen and (min-width: 1200px)
{
	td {height:3.5em;
	    width:3.5em;}
}