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

/* Normal skin */

.hsvcolorwheel-wrapper {
    padding: 13px 10px 10px 10px; 
    height: 100%;
    width: 100%;
    -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
      user-select: none;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
}

.hsvcolorwheel-preview {
    height: 30px;
    width: 100%;
}

.hsvcolorwheel {
    height: 100%;
    width: 100%;
}

.hsvcolorwheel .picker-wrapper {
    height: 100%;
    width: 92%;
}
.hsvcolorwheel .slide-wrapper {
    height: 100%;
    width: 8%;
}

.hsvcolorwheel .picker {
    width: 100%;
    height: 100%;
}
.hsvcolorwheel .slide {
    width: 100%;
    height: 100%;
}

.hsvcolorwheel .picker-indicator {
    width: 5px;
    height: 5px;
    border: 1px solid gray;
    opacity: .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;
}
.hsvcolorwheel .slide-indicator {
    width: 100%;
    height: 10px;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    filter: alpha(opacity=60);
    border: 2px solid gray;
    background-color: white;
    pointer-events: none;
}