/* Standard Styles */
/* (Für HLS oder HSL, es gibt verschiedene Bezeichnungen)
   Hue, Saturation, Luminance
   das entspricht
   Farbe, Sättigung, Helligkeit
.sliderVertical {
  background-image: linear-gradient(to bottom, hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));
  /* linear-gradient(0deg, purple, green, yellow, blue, red, purple);  */
  /*linear-gradient(to top, hsl(360,100%,50%), hsl(0,100%,50%));

  }

.sliderHorizontal {
  background-image:
  linear-gradient(to left, hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));
  }

.colorPickerContainer {
   /*Farbspektrum
   background-image:
    /*linear-gradient(to right, hsl(360,100%,40%,1), hsl(100,100%,45%,0.75), hsl(135,100%,45%,0.75), hsl(155,100%,55%,0.75), hsl(180,100%,75%,1), hsl(200,100%,50%,1), hsl(270,100%,45%,1), hsl(360,100%,40%,
    linear-gradient(to right, hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));
  /*background-image: linear-gradient(90deg, purple, green, yellow, blue, red, purple); */

  /* }

.colorPickerContainer2{
 Lightness (mit Transparenz) über Farbspektrum
   background-image: linear-gradient(135deg, hsl(0,10%,0%, 0.5), hsl(0,50%,100%, 0));
}
                                                                                     */



.font1{
  font-family: arial;
  font-size: 0.8em;
}

.font2{
  font-family: arial;
  font-size: 1em;
}

.font3{
  font-family: arial;
  font-size: 0.7em;
}

.buttonClass{
  position: relative;
  margin-top:2px;
  margin-left:0px;
  float: left;
  width: 93px;
  height: 16px;
  background-color: #FFA500;
  border: solid 1px #808080;
  font-family: arial;
  font-size: 0.85em;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

.buttonClassAuto{
  position: relative;
  background-color: #FFA500;
  border: solid 1px #808080;
  width: auto;
  height: auto;
  border-radius: 5px;
  font-family: arial;
  text-align: center;
  cursor: pointer;
}

.closePicker {
  position: relative;
  float: right;
  width: 17px;
  height: 17px;
  font-family: arial;
  font-size: 1em;
  text-align: center;
  background-color: #FF0000;
  border: solid 1px #FF0000;
  border-radius: 2px;
  color: #FFF;
  font-weight: bold;
  margin-right: 3px;
  cursor: pointer;
}

.hidePosX {
  position: relative;
  float: right;
  width: 32px;
  height: 17px;
  font-family: arial;
  font-size: 0.7em;
  text-align: center;
  background-color: #FFF;
  border: solid 1px #000;
  color: #000;
  margin-right: 5px;
  visibility: hidden;
}

.hidePosY {
  position: relative;
  float: right;
  width: 32px;
  height: 17px;
  font-family: arial;
  font-size: 0.7em;
  text-align: center;
  background-color: #FFF;
  border: solid 1px #000;
  color: #000;
  margin-right: 5px;
  visibility: hidden;
}

.hidePosS {
  position: relative;
  float: right;
  width: 32px;
  height: 17px;
  font-family: arial;
  font-size: 0.7em;
  text-align: center;
  background-color: #FFF;
  border: solid 1px #000;
  color: #000;
  margin-right: 5px;
  visibility: hidden;
}

.noMark {
 -ms-user-select: None;
 -moz-user-select: None;
 -webkit-user-select: None;
 user-select: None;
 width: 374px;
 }

.movePicker{
  background-image: url('MOUSE02.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.headingStyle{
  font-size: 0.8em;
}

.pickerColorDiv{
  position: relative;
  float: left;
  width: 20px;
  height: 20px;
  border: none;
  cursor: pointer;
  margin-right: 5px;
}