#index { border: 0; background-color: white;font-family: Arial, Helvetica, sans-serif;}
#index canvas { display: inline-block; width: 120px; height: 120px;margin: 4px; left: -1px;}
/*#index div { position: absolute; width: 120px; color: #333333; text-shadow: 0px 0px 2px #FFFFFF; }*/
#index .e {bottom: 0; right: 4px; top: 104px; font-size: 1.6rem; font-weight: bold; color:#4D4A83;}
#index .name {top:0; text-align: left; top: -2px; font-weight: bold; font-size: 1.2rem; color:#2A294D;}
#index .i { top: 16px;}
#index .ii { top: 88px;}
#index .i, #index .ii{
width: 100%;
color: black;
font-size: 1.3rem;
}
#index .r {bottom: 0; font-size: 1rem; top: 106px; color:black;}
#index .r,#index .name{
	left: 4px;
}
#index .element div{
	position: absolute;
}
#index .header{
border: 1px solid #c0c0c0;
text-align: center;
padding: 4px 8px;
background-color: #DEDEDE;
font-weight: bold;
text-align: center;
}
#index .header.vert{
	width: 130px;
}
#index .header.gor{
	height: 130px;padding-right: 11px;
}
#index .header.conor{
	height: 2.8rem;
}
#index .element{
cursor: pointer;
position:relative;
width: 130px;
height: 130px;
border: 1px solid #c0c0c0;
text-align: center;
}
#index .element,#index .header{
display: inline-block;
vertical-align: top;
}
#index .element:hover { background-color: #E3E3E3; }
#index .x0 { background-color: #C9A0DC; }
#index .x4 { background-color: #FFFFBD; }
#index .x7 { background-color: #FFFF22; }
#index .x16 { background-color: #FCDD76; }
.row{
	white-space: nowrap;
}
#show_wrap{
	overflow: auto;
	background-color: white;
	text-align: center;
	max-height: 500px;
}
#show_atom{
	display: none;
	position: relative;
}
#show_atom.on{
	display: block;
}
#show_atom .info{
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin-top: 3rem;
	border: 1px solid gray ;
	background: #E1D9E4;
	padding: 1rem;
	border-radius: 10px;
	box-shadow:0 0 .5rem rgba(0,0,0,.4);
}
#show_atom .info .name{
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-weight: bold;
	font-size: 2rem;
	color: #2A294D;
}

#show_atom .info .e{
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-weight: bold;
	font-size: 3rem;
	line-height: 2.5rem;
	color: #4D4A83;
}

#show_atom .info .i{
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-size: 1.8rem;
	line-height: 3rem;
	color: #4c2d59;
}

#show_atom .info .ii{
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-size: 1.8rem;
	line-height: 1rem;
	color: #4c2d59;
}

#show_atom .info .r{
	font-family: Helvetica, Arial, Geneva, sans-serif;
	font-size: 1.5rem;
	line-height: 0rem;
	line-height:3rem;
}