h1 {
  Font-size: 12pt;
  font-style: bold;
  text-align: center;
  margin-bottom: 10px;
}

.container {
 /* width: 850px;*/
  width: 100%;
  border: solid 1px #999999;
  margin-left: auto;
  margin-right: auto;
}

#palletDIV {
   width: 90%; 
   margin-left: auto; 
   margin-right: auto; 
   padding-top: 0px; 
  text-align: left;
}

#lorem {
  font: Arial, Helvetica, Verdana, sans-serif;
  font-size: 12pt;
  margin: 10px;	
  margin-left: 0px;
  margin-right: 50px;
  padding: 10px;
}

#sync, #red, #green, #blue, #upper, #lower {
    float: left;
    width: 94%;
    height: 20px;
    margin: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
#collabelR, #collabelG, #collabelB {
  color: #000000;
  width: 30px;
  background: #ffffff;
  border: solid 1px #999999;
  font-weight: normal;
}

#coltextdivS, #coltextdivR, #coltextdivG, #coltextdivB, #RBtextdivUPPER, #RBtextdivLOWER {
  float: left;
  padding-right: 4px;
}
  
  #swatch1, #swatch2, #swatch3, #swatch4, #swatch5, #swatch6, #swatchcomp1, #swatchcomp2, #swatchcomp3, #swatchcomp4, #swatchcomp5, #swatchcomp6 {
    float: left;
    width: 16%;
    height: 240px;
    background-image: none;
    margin: 2px;
    margin-bottom: 0px;
  }
  
  #sync .ui-slider-range { background: #808080; } // ef2929
  #sync .ui-slider-handle { border-color: #404040; }
  #red .ui-slider-range { background: #ff0000; } // ef2929
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #00ff00; } // 8ae234
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #0000ff; } // 729fcf
  #blue .ui-slider-handle { border-color: #729fcf;}
  
  .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  padding-left: 6px;
  padding-bottom: 6px;
  }
  
  .coltxt {
    float: left;
    width: 16%;
    padding-bottom: 0px;
    text-align: center;
    font-size: 14pt;
    margin: 2px;
    margin-top: 0px;
  }
  
  .input-txt {
    width: 42px;
    text-align: center;
    font-weight: bold;
  }
  
  .input-td {
    text-align: center;
  }
  
  .Fbtn {
    /*position: absolute;*/
    font-size: 8pt;
    margin: 0px;
    /*margin-left: -20px;
    width: 22px;*/
    width: 40%;
    margin: 2px;
  }
  
  .Bbtn {
   /* position: absolute;*/
    font-size: 8pt;
    margin: 0px;
    /*width: 22px;*/
    width: 40%;
    margin: 2px;
  }
  
  #infoDIV {
    font-size: 10pt;
    margin: 20px;
    padding: 20px;
    border: solid 1px #999999;
    border-radius: 4px;
    height: 400px;
    overflow: auto;
    color: #191919
    background-color: #E6E6E6; 
    
  }
  
  
/**********************************************/
/*                                            */
/*              Media Controls                */
/*                                            */
/**********************************************/
  
@media only screen and (min-width: 800px) {
  .coltxt {
    font-size: 14pt;
  }
  .Fbtn, .Bbtn {
    font-size: 10pt;
  }
  #swatch1, #swatch2, #swatch3, #swatch4, #swatch5, #swatch6, #swatchcomp1, #swatchcomp2, #swatchcomp3, #swatchcomp4, #swatchcomp5, #swatchcomp6 {
    width: 16%;
    height: 200px;
  }
  .coltxt {
    width: 16%;
  }
}

@media only screen and (max-width: 799px) and (min-width: 650px) {
  .coltxt {
    font-size: 12pt;
  }
  .Fbtn, .Bbtn {
    font-size: 9pt;
  }
  #swatch1, #swatch2, #swatch3, #swatch4, #swatch5, #swatch6, #swatchcomp1, #swatchcomp2, #swatchcomp3, #swatchcomp4, #swatchcomp5, #swatchcomp6 {
    width: 14%;
    height: 160px;
  }
  .coltxt {
    width: 14%;
  }
}

@media only screen and (max-width: 649px) {
  .coltxt {
    font-size: 10pt;
  }
  .Fbtn, .Bbtn {
    font-size: 8pt;
  }
  #swatch1, #swatch2, #swatch3, #swatch4, #swatch5, #swatch6, #swatchcomp1, #swatchcomp2, #swatchcomp3, #swatchcomp4, #swatchcomp5, #swatchcomp6 {
    width: 12%;
    height: 100px;
  }
  .coltxt {
    width: 12%;
  }
}