<style>
h1 {font-family:Lucida Console}
	span.atomno {font-weight:bold;}
	
table {empty-cells:hide;}
a:hover {font-size:150%;}
td {border: 1px solid black; width:50%; height:65%;}
a {text-decoration:none;}
td a{color:#000000;}

	td.alkali_metals {background-color:#f500ff}

	td.alkaline_earth {background-color:#9966FF}

	td.basic_metals {background-color:#99FFFF}

	td.semi_metals {background-color:#00ff71}

	td.halogens {background-color:#FFFF33}

	td.non_metals {background-color:#FF00CC}

	td.transition_metals {background-color:#FF66CC}

	td.noble_gas {background-color:#CCFF66}

	td.lanthanides {background-color:#c2ff00}

	td.actinides {background-color:#FF6633}
span {display:block:}



@media screen and (min-width: 300px)
{
	td.space {height:0.3em}
	td {height:0.9em;
	    width:0.9em;}
	td.empty {line-height:30%}
	table {width:20%;
		height:25%;}
	
	
	
}
@media screen and (min-width: 400px)
{
	td.space {height:0.4em}
	td {height:1.2em;
	    width:1.2em;}
	td.empty {line-height:40%}
	table {width:0.34%;
		height:25%;}
}

@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}
	table {width:42.5%;
		height:50%;}
}

@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.49998em}
	table {width:51%;
		height:60%;}  
}

@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}
	table {width:59.5%;
		height:70%;}
}

@media screen and (min-width: 800px)
{
	td.space {min-height:0.8em}
	td {height:2.4em;
	    width:2.4em;}
	td.empty {line-height:80%}
	span.atomicnumber {font-size:0.6666em}
	table {min-width:68%;
		min-height:80%;}
}

@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}
	table {width:76.5%;
		height:90%;}
}

@media screen and (min-width: 1000px)
{	table {height:100%;
		   width:80%}
	td.space {height:1em}
	td {height:1em;
	    width:2em;}
	td.empty {line-height:100%}
		table {width:85%;
		height:75%;}
h3{margin-top:0px; margin-bottom:0px}
}
</style>