#palette {
    display: block;
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 5px;
    width: 410px;
    right: 145px;
    height: 30px;
}

.palette_item {
    height: 20%;
    width: 5.2%;
    float: left;
    cursor: url(../images/eyedropper.svg) 0 16, crosshair;
}

.palette_item.transparent,
.palette_item.white,
.palette_item.black {
    background: #fff;
    position: absolute;
    width: 10px;
    height: 10px;
    left: -10px;
    top: 0;
}

.palette_item.transparent {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAVdEVYdENyZWF0aW9uIFRpbWUAOC8yMi8xMg1cp6sAAABESURBVBiVjdBBCgAgCETRr/e/87SJKFPLnfIcQRMIwMBIShIAvgZzoSrfkzrs8WyF1+kX9r3p8AE7nL7kSpSshN+JEQ8GixkF0mSevgAAAABJRU5ErkJggg==);
}

.palette_item.black {
    background: #000;
    top: 10px;
}

.palette_item.white {
    background: #fff;
    top: 20px;
}