.element{width:110px;height:110px;margin:5px;float:left;overflow:hidden;position:relative;background:#888;color:#222;-webkit-border-top-right-radius:1.2em;-moz-border-radius-topright:1.2em;border-top-right-radius:1.2em}.element.alkali{background:#F00;background:red}.element.alkaline-earth{background:#F80;background:#f90}.element.lanthanoid{background:#FF0;background:#cf0}.element.actinoid{background:#0F0;background:#3f0}.element.transition{background:#0F8;background:#0f6}.element.post-transition{background:#0FF;background:cyan}.element.metalloid{background:#08F;background:#06f}.element.other.nonmetal{background:#00F;background:#30f}.element.halogen{background:#F0F;background:#c0f}.element.noble-gas{background:#F08;background:#f09}.element *{position:absolute;margin:0}.element .symbol{left:0.2em;top:0.4em;font-size:3.8em;line-height:1.0em;color:#FFF}.element.large .symbol{font-size:4.5em}.element.fake .symbol{color:#000}.element .name{left:0.5em;bottom:1.6em;font-size:1.05em}.element .weight{font-size:0.9em;left:0.5em;bottom:0.5em}.element .number{font-size:1.25em;font-weight:bold;color:rgba(0,0,0,0.5);right:0.5em;top:0.5em}.variable-sizes .element.width2{width:230px}.variable-sizes .element.height2{height:230px}.variable-sizes .element.width2.height2{font-size:2.0em}.element.large,.variable-sizes .element.large,.variable-sizes .element.large.width2.height2{font-size:3.0em;width:350px;height:350px;z-index:100}.clickable .element:hover{cursor:pointer}.clickable .element:hover h3{text-shadow:0 0 10px white, 0 0 10px white}.clickable .element:hover h2{color:white}