body
{
    margin: 0;
    padding: 0;
    color: #000000;
    background-color: #237AA9;
    text-align:center;
}
.header
{
    width:900px;
    line-height: 15px;  
    color: #fff;  
    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 45px 35px 45px;
    height: 80px;
	background-color: #237AA9; 
}

#periodictable
{
    width: 1000px; 
    padding: 0;  
    margin: 0 auto; 
    background-color: #ffffff; 
    border: 1px solid #88706c;  
    padding: 0 15px 35px 15px;  
    border-radius: 3px;  
    box-shadow: 0 0 3px rgba(0, 0, 0, .5); 
}

h1 {
	font-size: 32px;
	margin-bottom: 15px;
}
.elementDetails
{
    width:260px;height:120px;float:left;margin:0px 0px 12px 25px; 
    line-height: 14px;  
    color: #e97e7e;  
    border: 1px solid #88706c;  
    padding: 0 3px;  
    border-radius: 3px;  
    box-shadow: 0 0 3px #f51f4c;   
}    
 
.electron {float:right; width:190px; height:130px;margin:0px 15px 0px 10px;border:0px solid green;}     
.element, .elementlabel
{
    width:40px; height:40px;
    line-height: 15px; 
    border: 1px solid #88706c;  
    padding: 0 3px;  
    border-radius: 3px;  
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);   
}
.element
{
    cursor: pointer;  
}
.electronConfig
{
    display:none;
}

.elementInfo { display:none; }

.atomicNumber
{
    font: 11px Helvetica, Arial, Sans-Serif;
    line-height: 12px;
    color: #000;
	font-weight: bold;
}
.atomicWeight
{
    font: 11px Helvetica, Arial, Sans-Serif;
    line-height: 12px;
    color: #000;
	font-weight: bold;
}
.symbol, .symbol a
{
    color: #000;
    font-size:16px;
	font-weight: bold;
	text-decoration: none;
}
.symbol a:hover, .gas a:hover, .liquid a:hover
{
    color: #fff;
}
.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; /*#dddd88ff99cc;*/
}
.transitionmetal
{
background-color: #7EB5D6;  /*#D6BF86;*/ 
}
.poormetal
{
background-color:#BA5B05;/*#cccccc;*/
}
.metalloid
{
background-color:#3EA99F;/*#008080#ffaaaa;/*cccc99; */
}
.halogen
{
    background-color:#00ddff; /*ff6666;*/
}
.noblegas
{
background-color:#6699CC/*#c0ffff; */
}
.unknown
{
background-color:#cccccc;
}
.content
{
height:10px;
}
.trianglesRight
{
margin-left:2px;
width:0; 
height:0;
border-color: transparent transparent transparent green; 
border-style: solid;
border-width: 7px; /*width of each border*/
display:inline-block;
position:relative;
top:3px;
}
.trianglesDown
{
margin:1px;
width:0; /*set dimensions of DIV to 0 so its borders collapse and touch one another*/
height:0;
border-color: green transparent transparent transparent; /*top, right, bottom, and left border*/
border-style: solid;
border-width: 7px; /*width of each border*/
display:block;
position:relative;
top:5px;
}
.lblText
{
    padding:1px;
    font-size:16px;
}
.circle 
{
	border-radius: 50%;
	display: inline-block;
	margin-right: 5px;
}
@-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: 10px;
	height: 10px;
			
	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: radial-gradient(5px 5px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
		
	/* webkit chrome, safari, mobile */
	-webkit-animation-name: spin; 
	-webkit-animation-duration: 3s; 
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;

	/* mozilla ff */
	-moz-animation-name: spin; 
	-moz-animation-duration: 3s; 
	-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;
}

.detailText
{
    display:inline-block;width:240px;text-align:left;
    font: 11px Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    line-height: 10px;
    color: #000;
}

.legend, .legendmatter
{
    margin-left:150px;
	margin-top:15px;
	margin-bottom:5px;
    color: #000000;
    font-size:14px;
}
.black
{
	background-color: #000;
}
.outliner
{
	 box-shadow: 0 0 5px #f51f4c;   
}
.legendelement, .legend .element1
{
    width:40px;
	line-height: 15px;
    border: 1px solid #88706c;  
    padding: 0 3px;  
    border-radius: 3px;  
	height: 15px;
}
.shadow
{ 
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);   
}
.leftAlign{text-align:left;}
.lblSize{font-size:14px;}