.bucket {
    border: 2px solid gray;
    border-spacing: 0;
    float: left
}

.bucket td {
    /* TODO cross cell gradient; needs clever angle, start and end color */
    background: linear-gradient(20deg,rgba(255,255,255,0.75),rgba(255,255,255,0));
    border: 3px outset transparent;
    font-size: 6px;
    height: 12px;
    width: 12px
}

.bucket td:before {
    content: "\00a0"
}

.bucket .cyan {
    background-color: #0ff;
    border-color: #0cc
}

.bucket .blue {
    background-color: #00f;
    border-color: #00c;
}

.bucket .orange {
    background-color: #f80;
    border-color: #c80;
}

.bucket .yellow {
    background-color: #ff0;
    border-color: #cc0
}

.bucket .green {
    background-color: #0c0;
    border-color: #0f0
}

.bucket .purple {
    background-color: #f0f;
    border-color: #c0c
}

.bucket .red {
    background-color: #f00;
    border-color: #c00
}

.bucket .top {
    border-top: none
}

.bucket .right {
    border-right: none
}

.bucket .bottom {
    border-left: bottom
}

.bucket .left {
    border-left: none
}