td
	{
	opacity:1.0;
	filter:alpha(opacity=40); 
	}
	td:hover
	{
	opacity:0.5;
	filter:alpha(opacity=50); 
	}
	a {text-decoration:none;}
	body {text-align:center;}
	td.empty {border-style:none}
	td.space {height:1em}
	td {spacing:0px;
	    padding:0px;
	    font-family:"century gothic";}
	h2 {font-family:"century gothic";}
	span.atomicnumber {font-size:10px;}
	    .symbol {font-size:30px;}
	    .element {font-size:20px;}
	table {border-collapse:separate}


	td.alkalimetal {background-color:#66CCFF}
	td.alkaliearth {background-color:#99CCCC}
	td.basicmetal {background-color:#FFCC66}
	td.semimetal {background-color:#FF99FF}
	td.halogen {background-color:#CCFF66}
	td.nonmetal {background-color:#FFCCCC}
	td.transitionmetal {background-color:#CCFF99}
	td.noblegas {background-color:#FF99CC}
	td.lanthanides {background-color:#CCFFFF}
	td.actinides {background-color:#CC99FF}

	
@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%;}
}


@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%;}
}



@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%;}
}



@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}
	span.symbol{font-size:0.81em;}
	span.element{font-size:0.33em;}
	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}
	span.symbol{font-size:0.945em;}
	span.element{font-size:0.385em;}
	table {width:59.5%;
		height:70%;}
}



@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%;}
}



@media screen and (min-width: 900px)
{
	td.space {height:0.9em}
	td {height:2.7em;
	    width:2.7em;}
	td.empty {line-height:90%}
	span {display:block;}
	span.atomicnumber {
		font-size:0.74997em}
	span.symbol{font-size:1.215em;}
	span.element{font-size:0.495em;}
	table {width:76.5%;
		height:90%;}
}



@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%;}
}



@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;}
}