@charset "utf-8";
#container * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ---- isotope ---- */
.isotope {}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .itemList ---- */

.itemList {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  color: #262524;
}

.itemList > * {
  margin: 0;
  padding: 0;
}

.itemList .name {
  position: absolute;
  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.itemList .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.itemList .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.itemList .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.itemList.alkali          {background: #F00; background:hsl(   0, 100%, 50%); }
.itemList.alkaline-earth  {background: #F80; background:hsl(  36, 100%, 50%); }
.itemList.lanthanoid      {background: #FF0; background:hsl(  72, 100%, 50%); }
.itemList.actinoid        {background: #0F0; background:hsl( 108, 100%, 50%); }
.itemList.transition      {background: #0F8; background:hsl( 144, 100%, 50%); }
.itemList.post-transition {background: #0FF; background:hsl( 180, 100%, 50%); }
.itemList.metalloid       {background: #08F; background:hsl( 216, 100%, 50%); }
.itemList.diatomic        {background: #00F; background:hsl( 252, 100%, 50%); }
.itemList.halogen         {background: #F0F; background:hsl( 288, 100%, 50%); }
.itemList.noble-gas       {background: #F08; background:hsl( 324, 100%, 50%); }