/* 
  CSS ColorPicker
  (c) 1998 Netscape Communications Corporation
  Written by Michael Bostock (mikebos@netscape.com)
*/

/*
  This file sets up all the layers used in the Color Picker.  
  It was originally part of the main HTML file (version 2.0).
  Modified October, 2003 by DM Solutions Group (dev@dmsolutions.ca)
*/

#OSad {
  position: absolute;
  top: 8;
  left: 180;
  width: 290;
  height: 20;
  clip: rect(0,290,20,0);
}

#tabRGB {
  position: absolute;
  top: 5;
  left: 10;
  width: 53;
  height: 22;
  clip: rect(0,53,22,0);
  layer-background-image: url(images/tabRGB.gif);
  background-image: url(images/tabRGB.gif);
  z-index: 0;
}

#tabHSB {
  position: absolute;
  top: 5;
  left: 65;
  width: 53;
  height: 22;
  clip: rect(0,53,22,0);
  layer-background-image: url(images/tabHSB.gif);
  background-image: url(images/tabHSB.gif);
  z-index: 0;
}

#boxBevel {
  position: absolute;
  top: 25;
  left: 5;
  width: 325;
  height: 213;
  clip: rect(0,325,213,0);
  z-index: 1;
  background-color: #d9d9d9;
}

#hue {
  position: absolute;
  top: 40;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#hue_bg {
  position: absolute;
  top: 38;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#saturation {
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 6;
}

#saturation2 {
  visibility: hidden;
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 5;
}

#saturation2_ie {
  visibility: hidden;
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 5;
  background-color: #ffffff;
  Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0);
}

#saturation3 {
  visibility: hidden;
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#saturation_nn4 {
  visibility: hidden;
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 6;
}

#saturation_bg {
  position: absolute;
  top: 68;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#brightness {
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 6;
}

#brightness_ie {
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 6;
  background-color: #000000;
  Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0);
}

#brightness2 {
  visibility: hidden;
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 5;
}

#brightness3 {
  visibility: hidden;
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#brightness_nn4 {
  visibility: hidden;
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 6;
}

#brightness_bg {
  position: absolute;
  top: 98;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#red {
  visibility: hidden;
  position: absolute;
  top: 40;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#red_bg {
  visibility: hidden;
  position: absolute;
  top: 38;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#green {
  visibility: hidden;
  position: absolute;
  top: 70;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#green_bg {
  visibility: hidden;
  position: absolute;
  top: 68;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#blue {
  visibility: hidden;
  position: absolute;
  top: 100;
  left: 100;
  width: 200;
  height: 10;
  clip: rect(0,200,10,0);
  z-index: 4;
}

#blue_bg {
  visibility: hidden;
  position: absolute;
  top: 98;
  left: 98;
  width: 204;
  height: 14;
  clip: rect(0,204,14,0);
  layer-background-image: url(images/bg_bar.png);
  background-image: url(images/bg_bar.png);
  z-index: 3;
}

#thumbH {
  position: absolute;
  top: 49;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#thumbS {
  visibility: hidden;
  position: absolute;
  top: 79;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#thumbV {
  visibility: hidden;
  position: absolute;
  top: 109;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#thumbR {
  visibility: hidden;
  position: absolute;
  top: 49;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#thumbG {
  visibility: hidden;
  position: absolute;
  top: 79;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#thumbB {
  visibility: hidden;
  position: absolute;
  top: 109;
  left: 95;
  width: 11;
  height: 17;
  layer-background-image: url(images/thumb.gif);
  background-image: url(images/thumb.gif);
  clip: rect(0,11,17,0);
  z-index: 10;
}

#testLayer {
  position: absolute;
  top: 148;
  left: 184;
  width: 76;
  height: 76;
  clip: rect(0,76,76,0);
  z-index: 10;
}

#testLayer_bg {
  position: absolute;
  top: 146;
  left: 182;
  width: 80;
  height: 80;
  clip: rect(0,80,80,0);
  layer-background-image: url(images/testlayer_bg.png);
  background-image: url(images/testlayer_bg.png);
  z-index: 9;
}

#testLayer2 {
  position: absolute;
  top: 148;
  left: 144;
  width: 36;
  height: 76;
  clip: rect(0,36,76,0);
  z-index: 10;
}

#testLayer2_bg {
  position: absolute;
  visibility: hidden;
  top: 146;
  left: 142;
  width: 40;
  height: 80;
  clip: rect(0,40,80,0);
  layer-background-image: url(images/testlayer2_bg.png);
  background-image: url(images/testlayer2_bg.png);
  z-index: 9;
}

#testLayer3 {
  position: absolute;
  visibility: hidden;
  top: 148;
  left: 144;
  width: 36;
  height: 36;
  clip: rect(0,36,36,0);
  z-index: 10;
}

#testLayer3_bg {
  position: absolute;
  visibility: hidden;
  top: 146;
  left: 142;
  width: 40;
  height: 40;
  clip: rect(0,40,40,0);
  layer-background-image: url(images/testlayer3_bg.png);
  background-image: url(images/testlayer3_bg.png);
  z-index: 9;
}

#testLayer4 {
  position: absolute;
  visibility: hidden;
  top: 188;
  left: 144;
  width: 36;
  height: 36;
  clip: rect(0,36,36,0);
  z-index: 10;
}

#testLayer4_bg {
  position: absolute;
  visibility: hidden;
  top: 186;
  left: 142;
  width: 40;
  height: 40;
  clip: rect(0,40,40,0);
  layer-background-image: url(images/testlayer4_bg.png);
  background-image: url(images/testlayer4_bg.png);
  z-index: 9;
}

#webSafeLayer {
  position: absolute;
  top: 148;
  left: 264;
  width: 36;
  height: 36;
  clip: rect(0,36,36,0);
  z-index: 10;
}

#webSafeLayer_bg {
  position: absolute;
  top: 146;
  left: 262;
  width: 40;
  height: 40;
  clip: rect(0,40,40,0);
  z-index: 9;
  layer-background-image: url(images/websafelayer_bg.png);
  background-image: url(images/websafelayer_bg.png);
}

#exclaim {
  position: absolute;
  visibility: hidden;
  top: 196;
  left: 275;
  width: 15;
  height: 15;
  clip: rect(0,15,15,0);
  z-index: 10;
  layer-background-image: url(images/exclaim.gif);
  background-image: url(images/exclaim.gif);
}

#testLayerLabels {
  position: absolute;
  top: 130;
  left: 142;
  width: 160;
  height: 20;
  clip: rect(0,160,20,0);
  z-index: 2;
}

#rgbLayer {
  visibility: hidden;
  position: absolute;
  top: 30;
  left: 10;
  width: 80;
  height: 100;
  clip: rect(0,80,100,0);
  z-index: 10;
}

#hsvLayer {
  visibility: hidden;
  position: absolute;
  top: 30;
  left: 10;
  width: 80;
  height: 100;
  clip: rect(0,80,100,0);
  z-index: 10;
}

#hexLayer {
  position: absolute;
  top: 130;
  left: 10;
  width: 150;
  height: 150;
  clip: rect(0,150,150,0);
  z-index: 2;
}

#buttons {
  position: absolute;
  top: 238;
  left: 150;
  width: 200;
  height: 44;
  clip: rect(0,200,44,0);
  z-index: 2;
}

.MAIN {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  
}

.SMALL {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.FORM1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  width: 40px;

}

.FORM2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  width: 50px;

}

.FORM3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  width: 100px;

}

.boxColor {
  background-color: #d9d9d9;
}