windowed.css

/* CSS sorted with CSS comb (http://csscomb.com/) */

/* Container div */
.windowed {
  position: relative;
  display: inline-block;
  height: 35px;

  background: #f0f0f0;
  background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top, #f0f0f0 0%,#ffffff 100%);
  background: -o-linear-gradient(top, #f0f0f0 0%,#ffffff 100%);
  background: -ms-linear-gradient(top, #f0f0f0 0%,#ffffff 100%);
  background: linear-gradient(to bottom, #f0f0f0 0%,#ffffff 100%);

  box-shadow: inset 0 1px 0 1px #aaa, 0 1px 0 1px #eee;
}

/* Common styles */
.windowed, .windowed .slider {
  padding: 2px;
  border-radius: 8px;
}

.windowed .checkstate, .windowed li {
  color: #333;
  text-shadow: 1px 1px #ddd;
  font-weight: bold;
  font-size: 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}

/* Hide the original DOM elements */
.windowed input[type=checkbox], .windowed select {
  display: none;
}

/* Sliding window */
.windowed .slider {
  position: absolute;
  top: 1px;
  left: 0;
  border: 5px solid #fff;
  box-shadow: inset 0 1px 1px 1px #aaa, 0 0 0 2px #ccc;
}

/* Disabled state */
.windowed.disabled {
  opacity: 0.5;
}

.windowed.disabled label, .windowed.disabled li {
  cursor: default;
}

/* Checkboxes */
.windowed.checkbox {
  width: 100px;
}

.windowed .checkstate {
  float: left;
  padding-top: 1px;
  text-align: center;
}

.windowed label {
  position: absolute;
  z-index: 999;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Selects */
.windowed li {
  display: block;
  float: left;
  margin: 0;
  padding: 1px 15px;
  height: 30px;
  cursor: pointer;
}

.windowed.select-one {
  padding-bottom: 1px;
}

.windowed.select-one .slider {
  padding-right: 0;
  padding-left: 0;
}

.windowed ul {
  margin: 0;
  padding: 0;
  border-radius: inherit;
}

.windowed ul > li:first-of-type {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.windowed ul > li:last-of-type {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Vertical selects */
.windowed.vertical {
  height: auto;
}

.windowed.vertical li {
  float: none;
  background: none;
  text-align: left;
  white-space: nowrap;
}

/* Themes */
.windowed.warning .slider {
  border-color: #ff9a1c;
  box-shadow: 0 1px 1px 1px #aaaaaa inset, 0 0 0 1px #ff8400;
}

.windowed.danger .slider {
  border-color: #ff3b10;
  box-shadow: 0 1px 1px 1px #aaaaaa inset, 0 0 0 1px #ee5f5b;
}

.windowed.success .slider {
  border-color: #7ec43a;
  box-shadow: 0 1px 1px 1px #aaaaaa inset, 0 0 0 1px #68a52e;
}

.windowed.info .slider {
  border-color: #3a8cf4;
  box-shadow: 0 1px 1px 1px #aaaaaa inset, 0 0 0 1px #4bb1cf;
}