table 
{
font-size:98%;
font-family:Arial
}

body 
{
background-color:black;
}

h1, h5
{
color:white;
}
a 
{
text-decoration:none;
}

a:link  {color:black;}
a:visited {color:black;}
a:active  {color:floralwhite;}

td 
{
height:75%;
width:75%;
}
 
td a 
{
border:none; 
text-align:center; 
display:block 
}
 
.alkali, .alkaline, .othernonmet, .hal,
.noble, .trans, .posttrans, .metalloid,
.unknown, .lantha, .acti, .shrink 
{
border:1px solid black;
width:5%;
}
 
td.alkali {background-color:tomato;}
td.alkaline {background-color:orange;}
td.othernonmet {background-color:lime;}
td.hal {background-color:powderblue;}
td.noble{background-color:steelblue;}
td.trans {background-color:yellow;}
td.posttrans {background-color:slategray;}
td.metalloid {background-color:darkkhaki;}
td.unknown {background-color:whitesmoke;}
td.lantha {background-color:darkorchid;}
td.acti {background-color:plum;}
tr.shrink {font-size:69%;}

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

/* Pop-ups */

h1, p, b
{
color:white;
font-family:Arial, Serif;
}

/* End of Pop-ups */