body {text-align:center;
			font-family:Arial;
			background-color:#000000;}
	td {border-style:solid;
		border-width:1px;
		padding:0px;}
	td.empty {border:none;}
	#notext {height:1em}
	table {border-collapse:collapse;}
	sup {font-family:Arial;}
	a {text-decoration:none;}
	td a {color:#000000;}
	td.nonborder {border:none;}
	span {display:block;}
	h1 {color:#FFFFFF;}
	
	td.alkalimetals {background-color:#F2E6FF;}
	td.alkaline {background-color:#D9FFD9;}
	td.lanthanides {background-color:#E6BFCC;}
	td.actinides {background-color:#BFBFD9;}
	td.transition {background-color:#FFE6BF;}
	td.basicmetals {background-color:#D9FFFF;}
	td.metalloids {background-color:#F2FFCC;}
	td.nonmetals {background-color:#FFE6D9;}
	td.halogens {background-color:#E6E6D9;}
	td.noblegas {background-color:#FFF2BF;}
	
	


	@media screen and (min-width: 300px)
	{
		table {width:35%;
				height:30%;}
		#title {font-size:0.6em;}
		td {width:0.9em;
			height:0.9em;}
		td.empty {line-height:30%;}
		td.notext {height:0.3em;}
		span.nunber {font-size:0.1em;}
		span.element {font-size:0.5em;}
	}
	@media screen and (min-width: 400px)
	{
		table {width:45%;
				height:40%;}
		#title {font-size:0.8em;}
		td {width:1.2em;
			height:1.2em;}
		td.empty {line-height:40%;}
		td.notext {height:0.4em;}
		span.nunber {font-size:0.2em;}
		span.element {font-size:0.6em;}
	}
	@media screen and (min-width: 500px)
	{
		table {width:55%;
				height:50%;}
		#title {font-size:1em;}
		td {width:1.5em;
			height:1.5em;}
		td.empty {line-height:50%;}
		td.notext {height:0.5em;}
		span.nunber {font-size:0.3em;}
		span.element {font-size:0.7em;}
	}
	@media screen and (min-width: 600px)
	{
		table {width:65%;
				height:60%;}
		#title {font-size:1.2em;}
		td {width:1.8em;
			height:1.8em;}
		td.empty {line-height:60%;}
		td.notext {height:0.6em;}
		span.nunber {font-size:0.4em;}
		span.element {font-size:0.8em;}
	}
	@media screen and (min-width: 700px)
	{
		table {width:75%;
				height:70%;}
		#title {font-size:1.4em;}
		td {width:2.1em;
			height:2.1em;}
		td.empty {line-height:70%;}
		td.notext {height:0.7em;}
		span.nunber {font-size:0.5em;}
		span.element {font-size:0.9em;}
	}
	@media screen and (min-width: 800px)
	{
		table {width:85%;
				height:80%;}
		#title {font-size:em;}
		td {width:2.4em;
			height:2.4em;}
		td.empty {line-height:80%;}
		td.notext {height:0.8em;}
		span.nunber {font-size:0.7em;}
		span.element {font-size:1.1em;}
	}
	@media screen and (min-width: 900px)
	{
		table {width:95%;
				height:90%;}
		#title {font-size:1.8em;}
		td {width:2.7em;
			height:2.7em;}
		td.empty {line-height:90%;}
		td.notext {height:0.9em;}
		span.nunber {font-size:0.7em;}
		span.element {font-size:1.2em;}
	}
	@media screen and (min-width: 1000px)
	{
		table {width:150;
				height:100}
		#title {font-size:2em;}
		td {width:3em;
			height:3em;}
		td.empty {line-height:100%;}
		td.notext {line-height:1em;}
		span.nunber {font-size:0.8em;}
		span.element {font-size:1.3em;}
	}
	@media screen and (min-width: 1100px)
	{
	td {height:3em;
	    width:3.3em;}
	}

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

	
	</style>