.color {
    float: left;
    padding: 0 !important;
    margin: 0;
    width: 51px;
    height: 16px;
    margin-right: 5px;
    background: url(../img/ddcolor/color-sprite.png) no-repeat;
}
.color.black {
    background-position: 0 0
}
.color.charcoal {
    background-position: 0 -16px
}
.color.marron {
    background-position: 0 -32px
}
.color.brown {
    background-position: 0 -48px
}
.color.red {
    background-position: 0 -64px
}
.color.gray {
    background-position: 0 -80px
}
.color.huntergreen {
    background-position: 0 -96px
}
.color.cream {
    background-position: 0 -112px
}
.color.ltblue {
    background-position: 0 -128px
}
.color.medblue {
    background-position: 0 -144px
}
.color.navy {
    background-position: 0 -160px
}
.color.silver {
    background-position: 0 -176px
}
.color.tan {
    background-position: 0 -192px
}
.color.white {
    background-position: 0 -208px
}
.color.yellow {
    background-position: 0 -224px
}


.colorcf {
    float: left;
    padding: 0 !important;
    margin: 0;
    width: 51px;
    height: 16px;
    margin-right: 5px;
    background: url(../img/ddcolor/cf-color-sprite.jpg) no-repeat;
}
.colorcf.SCS1 {
    background-position: 0 0
}
.colorcf.SCS2 {
    background-position: 0 -16px
}
.colorcf.SCS3 {
    background-position: 0 -32px
}
.colorcf.SCS4 {
    background-position: 0 -48px
}
.colorcf.SCS5 {
    background-position: 0 -64px
}
.colorcf.SCS6 {
    background-position: 0 -80px
}
.colorcf.SCS7 {
    background-position: 0 -96px
}
.colorcf.SCS8 {
    background-position: 0 -112px
}
.colorcf.SCS9 {
    background-position: 0 -128px
}
.colorcf.SCS10 {
    background-position: 0 -144px
}
.colorcf.SCS11 {
    background-position: 0 -160px
}
.colorcf.SCS12 {
    background-position: 0 -176px
}
.colorcf.SCS13 {
    background-position: 0 -192px
}
.colorcf.SCS14 {
    background-position: 0 -208px
}
.colorcf.SCS15 {
    background-position: 0 -224px
}
.colorcf.SCS16 {
    background-position: 0 -240px
}