body
{
    margin: 0;
    padding: 0;
    color: #000000;
    background-color: #237AA9;
    text-align:center;
    font: 12px Helvetica, Arial, Sans-Serif;
}

#periodictable
{
    width: 1000px; 
    padding: 0;  
    margin: 0 auto; 
    background-color: #ffffff; 
    border: 1px solid #88706c;  
    padding: 0 3px;  
    border-radius: 3px;  
    box-shadow: 0 0 3px rgba(0, 0, 0, .5); 
    height:auto;
    color: #000000;
    min-height:800px;
}
.header h1.mainHeader
{
margin-top:25px;
}

.header
{
    width:950px;
    line-height: 15px;  
    color: #e97e7e;  
    border: 1px solid #88706c;  
    padding: 0 3px;  
    border-radius: 3px;  
    box-shadow: 0 0 3px rgba(0, 0, 0, .5); 
    text-align:center;
    margin:0px 25px 5px 25px;
    height: 80px;
	background-color: #237AA9; 
}

.header a
{
    text-decoration:none;
}

.content 
{
    margin:10px 20px 5px 50px;
    color: #000;
} 
.content  h1
{ 
    color: #000; 
	text-align:left;
} 
.elementInfo 
{
    width:350px;
    line-height: 14px;  
    padding:2px;
} 

.detailText
{
    display:inline-block;width:333px;text-align:left;
    font-weight: bold;
    line-height: 18px;
    color: #000;
    display:inline-block;
}

.atomicNumber
{
    font: 12px Helvetica, Arial, Sans-Serif;
    line-height: 12px;
    color: #fff;
    text-align:left;
    padding:5px;
    font-weight: bold;
}

.header h1
{
    padding:5px;
    margin:0;
    line-height: 20px;
    text-align:center;
	color: #fff;
}

.atomicWeight
{
    font: 12px Helvetica, Arial, Sans-Serif;
    line-height: 12px;
    color: #fff;
    text-align:right;
    font-weight: bold;
    padding:5px;
}

h3
{
    background-color: #FF8C00;
    text-align:left;
    height:20px;
    width:350px;
    color: #FFF;
    padding:1px;
    line-height:20px;
}

p
{
    text-align:left;
    line-height:20px;
}

.electronConfig
{
    display:none;
}
.left
{
    float:left;
}

.right
{
    float:right;
}
.clearDiv
{
    clear:both;
}

.electronDiv
{
    width:300px;
    height:305px; 
    margin-right:20px;
    margin-left:50px;
}
.electronDiv h4
{ 
    margin-left:-20px;
	margin-top:1px;
}
.symbol, .symbol a
{
    color: #000;
}
.liquid, .liquid a
{
    color: #ffffff;
}
.gas, .gas a
{
    color: #FF0000;
}
.unknownstate, .unknownstate a
{
    color: #808080;
}
.nonmetal
{
    background-color:#99CC66;/*#9CD009; /*#a0ffa0;*/
}
.alkalimetal
{
    background-color:#FF6666/*#FF6347;/*#ffff99; */
}
.alkalineearthmetal
{
    background-color:#FFCC33;/*#FFD47F; /*#ffdead; */
}
.lanthanides
{
    background-color:#AA99DD;/*#9370DB;/*#4682B4;/*#FFD4C3; /*#ffbfff; */
}
.actinides
{
    background-color:#FF9E7A;
}
.transitionmetal
{
    background-color: #7EB5D6;  /*#D6BF86;*/ 
}
.poormetal
{
    background-color:#BA5B05;
}
.metalloid
{
    background-color:#3EA99F;
}
.halogen
{
    background-color:#00ddff; /*ff6666;*/
}
.noblegas
{
    background-color:#6699CC/*#c0ffff; */
}
.unknown
{
    background-color:#cccccc;
}

.circle 
{
	border-radius: 50%;
	display: inline-block;
	margin-right: 3px;
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}
		
.advanced 
{
	width: 12px;
	height: 12px;
	display:inline-block;
	/* fallback */
	background-color:#FF8C00;
	background-image: -moz-radial-gradient(5px 5px 45deg, circle cover, orange 0%, red 100%, red 95%);
	background-image: -webkit-radial-gradient(5px 5px, circle cover, orange, red);
	background-image: -o-radial-gradient(5px 5px 45deg, circle cover, orange 0%, red 100%, red 95%);
	background-image: -ms-radial-gradient(5px 5px 45deg, circle cover, orange 0%, red 100%, red 95%);
	background-image: radial-gradient(5px 5px 45deg, circle cover, yellow 0%, orange 100%, red 95%);	
	vertical-align: top;
	margin-top: 4px;
	
	/* webkit chrome, safari, mobile */
	-webkit-animation-name: spin; 
	-webkit-animation-duration: 3s; /* 3 seconds */
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;

	/* mozilla ff */
	-moz-animation-name: spin; 
	-moz-animation-duration: 3s; /* 3 seconds */
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: linear;

	/* microsoft ie */
	-ms-animation-name: spin; 
	-ms-animation-duration: 3s; /* 3 seconds */
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
}

/*
********************************************************************************
		tool tip
********************************************************************************
*/

.js span.tooltip {
	border-bottom:1px dashed #006892;
	color:#006892;
	cursor:help;
}

div.tooltipContainer {
	background:url(../images/tooltipBtm.png) no-repeat left bottom;
	display:none;
	padding-bottom:28px;
	position:absolute;
	width:212px;
	z-index:1000;
}

div.tooltipContainer dl {
	background:url(../images/tooltipTop.png) no-repeat left top;
	color:#6a737b;
	font-size:1.2em;
	margin:0;
	padding:10px 15px 4px 13px;
}

div.tooltipContainer dl dt {
	border-bottom:1px solid #006892;
	color:#006892;
	font-weight:normal;
	padding-bottom:5px;
}

div.tooltipContainer dl dd {
	margin:0;
	padding-top:5px;
}
div.tooltips{
	text-align:left;
	margin:0px 25px 5px 35px;
}
div.tooltips h2{
	margin:20px 0px 0px 0px;
}
div.tooltips dl dt {
	font-weight: bold;
    margin-top: 10px;
}

div.tooltips dl {
	font-size: 14px;
}
/*
********************************************************************************
		element navigation
********************************************************************************
*/
div.elementNav {
    font-size: 140%;
    height: 20px;
    margin: 0px 25px 5px 25px;
    width:950px;
}
div.elementNav div.next {
    text-align: right;
}
div.elementNav div.prev 
{
    float: left;
    text-align: left;
}
.nonmetallink a
{
    color:#99CC66;
}
.alkalimetallink a
{
    color:#FF6666;
}
.alkalineearthmetallink a
{
    color:#FFCC33;
}
.lanthanideslink a
{
    color:#AA99DD;
}
.actinideslink a
{
    color:#FF9E7A;
}
.transitionmetallink a
{
    color:#7EB5D6;
}
.poormetallink a
{
    color:#BA5B05;
}
.metalloidlink a
{
    color:#3EA99F;
}
.halogenlink a
{
    color:#00ddff;
}

.noblegaslink a
{
    color:#6699CC;
}
.unknownlink a
{
    color:#cccccc;
}

/*
********************************************************************************
		top navigation
********************************************************************************
*/

#tabs {
float:right;
}
#tabs ul {
margin:0;
padding:0px 0px 0 0px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
font-weight:bold;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*
********************************************************************************
		Right navigation
********************************************************************************
*/
.rightNav{width:180px; margin-left:20px; color:Black;}
.rightNav ul{line-height:0;margin:0;padding:0;background-color:	#FFBA66;} 
.rightNav ul li{border-bottom:1px solid #ffffff;list-style-type:none;} 
.rightNav ul  li a{display:block;text-decoration:none;font:bold 11px/19px Verdana,Arial,Helvetica,sans-serif;color:#ffffff;padding:5px 5px 5px 10px;line-height:16px; text-align:left;} 
.rightNav  ul  li a:hover {BACKGROUND-COLOR:#FF8C00;color:white;} 

.elementFacts {
    line-height: 20px;
    padding: 2px;
    width: 570px;
}
.elementFacts .detailText {
    width: 550px;
}