body {
    padding: 0;
    margin: 0;
}

#periodic-table {
    width: 100%;
    max-width: 1000px;
    margin:0 auto;  
    position: relative;
}

#legend {
    width: 100%;
    max-width: 1000px;
    margin:0 auto;
    font-family: Roboto, sans-serif;
    font-size:14px;
}

#legend p {
    margin: 1px 0 1px 0;
}

.legend-column {
    float:left;
    margin-left: 12px;
}

#display {
    width:16%;
    position:absolute;
    top: 0;
    left:31.5%;
}
.element {
    width: 5.5%;
    position: absolute;
}

.element img {
    width: 96%;
    height: 96%;  
}
#display img {
    width:100%;
    height:100%;
}

.square {
    width: 12px;
    height: 12px;
    display: inline-block;
}

.metal-solid img, .square.metal-solid {
    background-color: rgb(145,195,96);
}
.element.metal-solid img:hover {
    background-color: rgba(145,195,96,.5);
}
.metal-liquid img, .square.metal-liquid {
    background-color: rgb(222,229,126);
}
.element.metal-liquid img:hover {
    background-color: rgba(222,229,126,.5);
}
.nonmetal-solid img, .square.nonmetal-solid {
    background-color: rgb(244,145,0);
}
.element.nonmetal-solid img:hover {
    background-color: rgba(244,145,0,.5);
}
.nonmetal-liquid img, .square.nonmetal-liquid {
    background-color: rgb(244,191,99);
}
.element.nonmetal-liquid img:hover {
    background-color: rgba(244,191,99,.5);
}
.nonmetal-gas img, .square.nonmetal-gas {
    background-color: rgb(255,207,81);
}
.element.nonmetal-gas img:hover {
    background-color: rgba(255,207,81,.5);
}

.unknown img, .square.unknown {
    background-color: rgb(160,160,160);
}
.element.unknown img:hover {
    background-color: rgba(160,160,160,.5);
}

.element.selected img{
    background-color: cyan !important;
}

.element.col1 {left: 0.5%;}
.element.col2 {left: 6.0%;}
.element.col3 {left: 11.5%;}
.element.col4 {left: 17.0%;}
.element.col5 {left: 22.5%;}
.element.col6 {left: 28.0%;}
.element.col7 {left: 33.5%;}
.element.col8 {left: 39.0%;}
.element.col9 {left: 44.5%;}
.element.col10 {left: 50.0%;}
.element.col11 {left: 55.5%;}
.element.col12 {left: 61.0%;}
.element.col13 {left: 66.5%;}
.element.col14 {left: 72.0%;}
.element.col15 {left: 77.5%;}
.element.col16 {left: 83.0%;}
.element.col17 {left: 88.5%;}
.element.col18 {left: 94.0%;}
.element.row1 {top: 2.5%;}
.element.row2 {top: 12.5%;}
.element.row3 {top: 22.5%;}
.element.row4 {top: 32.5%;}
.element.row5 {top: 42.5%;}
.element.row6 {top: 52.5%;}
.element.row7 {top: 62.5%;}
.element.la {top: 77.5%;}
.element.ac {top: 87.5%;}