/*
- allign selector panel w/ hexgrid, fits screen,
resizing lags b/c lot of polygon
- padding to seperate blocks
- white smoke background color
*/
#hexMap, #elementSelector {
  max-width: 770px;
  border-radius: 10px;
  margin: 10px 10px 0px 10px;
  background-color: #F5F5F5
}

.element{
  height: 42px;
  width: 42px;
  border-radius: 50%;
  display: inline-block;
  margin: 3px;
  vertical-align: middle;
  text-align: right;
  color: black;
  text-shadow: -1px 1px silver;
}

.mainTypePanel{
  background-color: #A9A9A9;
  display: inline-block;
  border-radius: 10px;
  margin: 3px 6px;
}

polygon {
  stroke-width: 5;
  stroke: #002b64;
  fill: #006ec7;
}

polygon:hover {
  stroke: #004c97;
  fill: #00a6d6;
}

/* zoom and opacity to illustrate selector interactions */
.zoom{
    transition: transform .2s;
}

.zoom:hover{
  transform: scale(1.5);
}

.selected{
  border: 1px solid yellow;
}

.elementSVG{
  visibility: hidden;
}

/* Element Colors */
.whitey{
  fill: rgb(224, 224, 224);
}

.one{
  fill:rgb(115, 194, 251);
}

.two{
  fill:rgb(252, 102, 0);
}

.three{
  fill:rgb(79, 151, 163);
}

.four{
  fill:rgb(76, 187, 23);
}
/* Metals */
.mOne{
  fill:rgb(70, 130, 180);
}

.mTwo{
  fill:rgb(169, 186, 157);
}

.mThree{
  fill:rgb(112, 41, 99);
}

.mFour{
  fill:rgb(202, 52, 51);
}

.mFive{
  fill:rgb(105, 105, 128);
}

.gold{
  fill:rgb(249, 166, 2);
}
/* Reverse */
.rBlack{
  fill:rgb(34, 32, 33);
}

.rPink{
  fill:rgb(253, 185, 200);
}