/* Common stuff */
.picker-wrapper,
.slide-wrapper {
  position: relative;
  float: left;
}

.picker-indicator,
.slide-indicator {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.picker,
.slide {
  cursor: crosshair;
  float: left;
}

/* Default skin */
.cp-default {
  background-color: gray;
  padding: 0.75rem;
  box-shadow: 0 0 2.5rem #000;
  border-radius: 0.9375rem;
  float: left;
}

.cp-default .picker {
  width: 12.5rem;
  height: 12.5rem;
}

.cp-default .slide {
  width: 1.875rem;
  height: 12.5rem;
}

.cp-default .slide-wrapper {
  margin-left: 0.625rem;
}

.cp-default .picker-indicator {
  width: 0.3125rem;
  height: 0.3125rem;
  border: 0.125rem solid darkblue;
  border-radius: 0.25rem;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  background-color: white;
}

.cp-default .slide-indicator {
  width: 100%;
  height: 0.625rem;
  left: -0.25rem;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  filter: alpha(opacity=60);
  border: 0.25rem solid lightblue;
  border-radius: 0.25rem;
  background-color: white;
}

/* Small skin */
.cp-small {
  padding: 0.3125rem;
  background-color: white;
  float: left;
  border-radius: 0.3125rem;
}

.cp-small .picker {
  width: 6.25rem;
  height: 6.25rem;
}

.cp-small .slide {
  width: 0.9375rem;
  height: 6.25rem;
}

.cp-small .slide-wrapper {
  margin-left: 0.3125rem;
}

.cp-small .picker-indicator {
  width: 0.0625rem;
  height: 0.0625rem;
  border: 0.0625rem solid black;
  background-color: white;
}

.cp-small .slide-indicator {
  width: 100%;
  height: 0.125rem;
  left: 0;
  background-color: black;
}

/* Fancy skin */
.cp-fancy {
  padding: 0.625rem;
  /*    background-color: #C5F7EA; */
  background: -webkit-linear-gradient(top, #aaa 0%, #222 100%);
  float: left;
  border: 0.0625rem solid #999;
  box-shadow: inset 0 0 0.625rem white;
}

.cp-fancy .picker {
  width: 12.5rem;
  height: 12.5rem;
}

.cp-fancy .slide {
  width: 1.875rem;
  height: 12.5rem;
}

.cp-fancy .slide-wrapper {
  margin-left: 0.625rem;
}

.cp-fancy .picker-indicator {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/target.png);
}

.cp-fancy .slide-indicator {
  width: 1.875rem;
  height: 1.9375rem;
  left: 1.875rem;
  background-image: url(http://cdn1.iconfinder.com/data/icons/bluecoral/Left.png);
}

/* Normal skin */
.cp-normal {
  padding: 0.625rem;
  background-color: white;
  float: left;
  border: 0.25rem solid #d6d6d6;
  box-shadow: inset 0 0 0.625rem white;
}

.cp-normal .picker {
  width: 12.5rem;
  height: 12.5rem;
}

.cp-normal .slide {
  width: 1.875rem;
  height: 12.5rem;
}

.cp-normal .slide-wrapper {
  margin-left: 0.625rem;
}

.cp-normal .picker-indicator {
  width: 0.3125rem;
  height: 0.3125rem;
  border: 0.0625rem solid gray;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  background-color: white;
  pointer-events: none;
}

.cp-normal .slide-indicator {
  width: 100%;
  height: 0.625rem;
  left: -0.25rem;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  filter: alpha(opacity=60);
  border: 0.25rem solid gray;
  background-color: white;
  pointer-events: none;
}