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;
}