.filter {
    width:32px;
    height:32px;
    background-image:url("../images/colors/filter-trans.png");
    display:inline-block;
    margin: 0 5px 5px 0;
}
.color-active {
    border-radius:50%;
    background-color:#0b9eda;
    box-shadow: 0 0 2px 2px #0b9eda;
}
.filter.none { background: transparent;}
.filter.rot { background-position: 0px 0px; }
.filter.orange { background-position: -32px 0px }
.filter.gelb { background-position: -64px 0px; }
.filter.gruen { background-position: -96px 0px; }
.filter.blau { background-position: 0px -32px; }
.filter.pink { background-position: -32px -32px; }
.filter.braun { background-position: -64px -32px; }
.filter.beige { background-position: -96px -32px; }
.filter.grau { background-position: 0px -64px; }
.filter.schwarz { background-position: -32px -64px; }
.filter.weiss { background-position: -64px -64px; }
.filter.neon { background-position: -96px -64px; }
.filter.transparent { background-position: 0px -96px; }
.filter.silber { background-position: -32px -96px; }
.filter.violett { background-position: -64px -96px; }

.filter16 {
    width:16px;
    height:16px;
    background-size:64px 64px;
}
.filter16.none { background: transparent;}
.filter16.rot { background-position: 0px 0px; }
.filter16.orange { background-position: -16px 0px }
.filter16.gelb { background-position: -32px 0px; }
.filter16.gruen { background-position: -48px 0px; }
.filter16.blau { background-position: 0px -16px; }
.filter16.pink { background-position: -16px -16px; }
.filter16.braun { background-position: -32px -16px; }
.filter16.beige { background-position: -48px -16px; }
.filter16.grau { background-position: 0px -32px; }
.filter16.schwarz { background-position: -16px -32px; }
.filter16.weiss { background-position: -32px -32px; }
.filter16.neon { background-position: -48px -32px; }
.filter16.transparent { background-position: 0px -48px; }
.filter16.silber { background-position: -16px -48px; }
.filter16.violett { background-position: -32px -48px; }