/* Style for colorspect.com  */    /*  March 31 2023   updated; October 27 2024   September 22 2024    September 14 2024     August 17 2024    February 20 2024   */

/* Free Basic Website Template - v1.0 */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h4n {                             /* new h4 modified 09/14/2024 */
  display: block;
  font-size: 1em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  background-color: #010161 ;
  color: #dfdfdf ;
}

.wrapper {
 /* width: 1200px;   modified 09/14/2024 */
  margin: 0 /* auto; modified 09/14/2024 */ 
}

body {
  background: #d4d3d4;           /*  #e4e3e4; updated 10/27/2024    #f4f3f4; updated 08/16/2024   */
  color: #313131;
  font-family: Helvetica;
  margin: 0;
}
/* Header */

header {
	width: 1200px;
  margin-bottom: 30px;     
  margin-top: 10px;             

/* background-color: #007070 ;         */

}

header img {
  max-width: 100%;
}

.main-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #007070 ;   /* #006060 ; #515151: 03/31/2023 */
}

.main-menu li {
  float: left;
}

.main-menu li a {
  display: block;
  color: white;
  text-align: center;
  height: 20px;                /* added 03/31/2023 */
  line-height: 0px;            /* added 03/31/2023 */
  font-size: 14px;             /* added 03/31/2023 */
  padding: 14px 10px;          /* padding: 14px 16px; modified 02/20/2024 */
  text-decoration: none;
}

.main-menu li a:hover:not(.active) {
  background-color: #333;
}
.main-menu .active {
  background-color: #994d00;   /* #B93026; 03/31/2023 */
}
.main-menu  li a:hover.active {                 /* added Dec 06 2023  or a: */
  background-color: #f80001;
}
/**/

aside {
  float: left;
  width: 240px;                /* 340px; 03/31/2023 */
  margin-left: 100px;           /* 0px  added 01/13/2024  */
  margin-right: 10px;
  font-size: 14px;             /* added 04/01/2023 */ /* Buy & Download */
  padding: 0px 0;              /* 20px 0; 3/31/2023 */
}

aside h3 {
  padding: 0 0 5px 20px;
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu a {
  display: block;
  background-color: #CCC;
  height: 30px;                /* added 04/01/2023 */
  line-height: 10px;           /* added 04/01/2023 */
  font-size: 14px;             /* added 04/01/2023 */ /* PayLoadz link */
  text-decoration: none;
  padding: 10px 20px;
  color: #000;
}

.side-menu a:hover {
    background-color: #45FA9F; /* #C5C5C5; 04/02/2023 */
}
.featured-text {
  padding: 0 20px;
}
section {
  float: left;
  width: 675px;                /* was 850px; 03/31/2023 */
}

.main-content-section {
  padding: 20px;               /* 40px; 3/31/2023 */
  padding-top: 2px;             /* 12/15/2023 */
  padding-left: 20px;           /* 12/15/2023 */
}
.main-content-section h1 {
  margin: 0;
  padding-bottom: 10px;
}
/*.clear {

}   */
.clear::after {
  content: "";
  clear: both;
  display: table;
}

aside{
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 3px;
  background-color: #fff;
}

section {
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 3px;
  background-color: #fff;
}
/* Footer */
footer {
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 3px;
  background-color: #00DDDD;  /* #ccc; 04/02/2023 */
  text-align: center;
  font-size: 14px;            /* added 03/31/2023 */
}

.footer-menu {
  margin:5px;                 /* 15px; 04/02/2023 */
  padding-bottom:0px;         /* 15px; 03/31/2023 */
}
.footer-menu ul {
  padding:0;
  margin:0;
}
.footer-menu li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
.footer-menu a {
  color:#333;
}
.footer-menu a:hover {
     color:#999;
}
#copyright{
  height: 20px;           /* 60px; 03/31/2023 */
  bottom: 0px;
  left: 0px;
  line-height: 10px;      /* 50px; 03/31/2023 */
  color: #8000ff;         /* #333; 04/02/2023 text */
  text-align: center;
  font-size: 12px;        /* added 03/31/2023 */
  width: 100%;
}



/* ---- added December 04 2023 for dropdown menu    updated Dec 06 2023*/

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown  {               /*  .dropbtn */
  cursor: pointer;
  height: 20px;                /* added 12/04/2023 */
  line-height: 0px;            /* added 12/04/2023 */
  font-size: 14px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 10px;          /* padding: 14px 16px; modified 02/20/2024 */
  background-color:  inherit ;            /* inherit;  */
  font-family: inherit;
  margin: 0;
}

.dropdown-menu  {
  display: none;
  position: absolute;
  top: 89px;                              /* added Dec 06 2023 */
  background-color: #006060 ;             /*   #f9f9f9;  */
  min-width: 160px;
/*  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);       */
  z-index: 1;
  flex-wrap: wrap;       /*  for window resize  added  02/20/2024 */
}

.dropdown-menu  a {                    /* a  no effect     li a has effect */
  float: none;
  color: yellow ;                        /*white;  black;  */
  padding: 0px 16px;
  text-decoration: none;
/* display: block; */
         display: flex;
  text-align: left;
}

.dropdown-menu li a:hover:not(.active) {          /* added Dec 05 2023 */
  background-color: #333333 ;                     /*   #777777  */
}
.dropdown-menu li a:hover.active  {
  background-color: #f80001 ;                  /*   #003d99  #444444  a:hover f80001  ;*/
}
                                                       /*{  Dec 06 2023 */
.dropdown .dropdown-menu .active  {
  background-color: #994d00 ;                     /*   #003d99  */
}

.dropdown-menu li {
  margin: 0;
  padding: 1px;                             /*   border  */
}
          /*            */
                                                     /* ?no effect  */
/* .dropdown-menu li:hover {
  background-color: #111;
} */
                            /* li a:active   doesn't display: flex but li:not(.active) effects drop down menu color Dec 06 2023 */
/*.dropdown:hover  .active  {
   background-color: #003d99 ;
}  */

.dropdown:hover {
   background-color: #333333 ;               /*   #777777 */
}
   .dropdown:hover .active  {
   background-color: #994d00 ;
}

.dropdown:hover .dropdown-menu {
  display: block;                      /* display: flex; display horizontally    flex-direction:column  */
  display: flex;
}

  /*   </style>    */
/* ---- above added December 04 2023   .main-menu  li a:hover.active { */


 :root {                              /* style="background-color: var(--adoblue) ;"    custom */

  --adoblue: #1a202c;
}



/* ---- added Januay 15 2024   for wavl-hue-convert.htm    updated    */


form {
  display: flex ;         /* elements in form put on one line   */
  max-width: 920px;
  margin: auto ;            /*  900px modified 08/17/2024   */
  margin-left: 100px ;      /*  70px modified 08/17/2024   */
  margin-top: 20px ;
  margin-bottom: 20px ;
  padding: 5px;
  background: #f7f7f7 ;

}
input[type="number"] {
  width: 5em ;             /* 6em updated 08/15/2024   */
}
input[type="color"] {
  width: 4em ;             /* 6em updated 08/15/2024   */
}
#form_xrgbH {              /*       added 08/16/2024   */
input[type="number"] {
  width: 4em ;             
 }
}
datalist {
  display: flex ;
  column-gap: 27px ;           /*  27px  align with ticks  */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 125px ;                   /* 127px  modified 09/22/2024  77px  updated 01/13/2024   */
  font-size:8pt;
  writing-mode: horizontal-lr ;
  width: 200px ;
  margin-top: -30px ;   /* // negative    ticks removed -20px  modified 09/22/2024   */
  margin-bottom: 10px
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}