span.color-picker-button-container {
    position: relative;
}

button.color-picker-button div {
    display: inline-block;
    border: 1px solid black;
    height: 1.2em;
    width: 1.6em;
    margin-right: 0.6em;
    vertical-align: bottom;
}

    button.color-picker-button div:after {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.4em 0.4em 0.4em 0.4em;
        border-color: black transparent transparent transparent;
        margin-left: 2.0em;
        vertical-align: middle;
    }

div.color-picker-dialog {
    position: absolute;
    left: 0;
    top: 100%;
    width: 35em;
    border: 2px outset #CCCCCC;
    background-color: #EEEEEE;
    padding: 0.5em;
}

.csstransitions div.color-picker-dialog.color-picker-closed {
    -moz-transition: opacity 0.4s linear;
    -webkit-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    opacity: 0;
}

.csstransitions div.color-picker-dialog.color-picker-open {
    -moz-transition: opacity 0.4s linear;
    -webkit-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    opacity: 1;
}

div.color-picker-dialog input[type="text"] {
}

div.color-picker-dialog div.hue-color-slider,
div.color-picker-dialog div.sat-color-slider,
div.color-picker-dialog div.val-color-slider,
div.color-picker-dialog div.red-color-slider,
div.color-picker-dialog div.green-color-slider,
div.color-picker-dialog div.blue-color-slider {
    display: inline-block;
    width: 20em;
    height: 0.3em;
    margin-top: 0.8em;
    margin-right: 1em;
}

div.color-picker-dialog .ui-slider-handle {
    width: 0.7em;
    margin-top: -0.2em;
}

div.color-picker-dialog ul {
    padding-left: 0;
    margin-right: 1em;
    text-align: right;
    margin-top: 0;
    float: left;
}

    div.color-picker-dialog ul li {
        list-style-type: none;
    }

        div.color-picker-dialog ul li.hue-slider-li:before {
            content: 'H:';
            margin-right: 0.5em;
        }

        div.color-picker-dialog ul li.sat-slider-li:before {
            content: 'S:';
            margin-right: 0.5em;
        }

        div.color-picker-dialog ul li.val-slider-li:before {
            content: 'V:';
            margin-right: 0.5em;
        }

div.color-picker-dialog div.hue-color-slider,
div.color-picker-dialog div.sat-color-slider,
div.color-picker-dialog div.val-color-slider {
    background-color: #999999;
    border: 1px solid #333333;
}

    div.color-picker-dialog div.hue-color-slider .ui-slider-range,
    div.color-picker-dialog div.sat-color-slider .ui-slider-range,
    div.color-picker-dialog div.val-color-slider .ui-slider-range {
        background: #cccccc;
    }

    div.color-picker-dialog div.hue-color-slider .ui-slider-handle,
    div.color-picker-dialog div.sat-color-slider .ui-slider-handle,
    div.color-picker-dialog div.val-color-slider .ui-slider-handle {
        border-color: #cccccc;
    }

div.color-picker-dialog ul li.red-slider-li:before {
    content: 'R:';
    margin-right: 0.5em;
}

div.color-picker-dialog div.red-color-slider {
    background-color: #FF9999;
    border: 1px solid #990000;
}

    div.color-picker-dialog div.red-color-slider .ui-slider-range {
        background: #ef2929;
    }

    div.color-picker-dialog div.red-color-slider .ui-slider-handle {
        border-color: #ef2929;
    }

div.color-picker-dialog ul li.green-slider-li:before {
    content: 'G:';
    margin-right: 0.5em;
}

div.color-picker-dialog div.green-color-slider {
    background-color: #99FF99;
    border: 1px solid #009900;
}

    div.color-picker-dialog div.green-color-slider .ui-slider-range {
        background: #8ae234;
    }

    div.color-picker-dialog div.green-color-slider .ui-slider-handle {
        border-color: #8ae234;
    }

div.color-picker-dialog ul li.blue-slider-li:before {
    content: 'B:';
    margin-right: 0.5em;
}

div.color-picker-dialog div.blue-color-slider {
    background-color: #9999FF;
    border: 1px solid #000099;
}

    div.color-picker-dialog div.blue-color-slider .ui-slider-range {
        background: #729fcf;
    }

    div.color-picker-dialog div.blue-color-slider .ui-slider-handle {
        border-color: #729fcf;
    }

div.color-picker-dialog div.color-swatch {
    width: 5em;
    height: 5em;
    background-color: #999999;
    border: 1px solid black;
    margin-bottom: 3px;
}

div.color-picker-dialog div.color-swatch-container {
    float: right;
    text-align: center;
}

div.color-picker-dialog .color-picker-ok-button {
    margin-top: 1em;
}
