* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

h1 {font-size: 18px;}

h2 {font-size: 14px;}

.navbar {
  overflow: hidden;
  background-color: #dddddd;
  background-image: linear-gradient(to bottom, #ffffff 40%, #dddddd 100%);
  width: 870px;
  border: 1px solid #999999;
}

.dropdown {  /*top menu container*/
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {  /*container and text (dropbtn) of each top menu*/
  font-size: 12px;
  border: none;
  outline: none;
  color: black;
  padding: 20px 4px 4px 8px;  /*top, right, bottom, left*/
  background-color: #dddddd;
  background-image: linear-gradient(to bottom, #ffffff 40%, #dddddd 100%);
  font-family: inherit;
  margin: 0;
  text-align: left;
  vertical-align: middle;
}

.dropdown:hover {background-color: #ccccdd;}

.dropdown-content {  /*container for the dropdown menu items, i.e. line*/
  display: none;
  position: absolute;
  background-color: #dddddd;
  /*min-width: 150px;*/
  border: 1px solid #aabeff;
  z-index: 1;
}

.submenu-content {
  display: none;
  background-color: #dddddd;
  border: 1px solid #aabeff;
  z-index: 1;
}

.submenu-contentv {
  background-color: #dddddd;
  border: 1px solid #aabeff;
  z-index: 1;
  display: block;
  float: none;
}

.submenu-contents {  /*for loadMenu2 and loadMenu3 - submenu-contentv adds extra left margin?*/
  background-color: #dddddd;
  border: 1px solid #aabeff;
  z-index: 1;
  display: block;
  float: none;
}

.dropdown-content a {  /*a is for the text of the dropdown menu items, i.e. line*/
  float: none;         /*float:left makes the dropdown menu horizontal*/
  color: black;
  padding: 2px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 14px;
  white-space: nowrap;
}

.submenu-contentv a {  /*a is for the text of the dropdown menu items, i.e. bmp,gif,jpg,png*/
  float: none;         /*float:left makes the dropdown menu horizontal*/
  color: black;
  padding: 0px 10px 0px 10px;  /*top, right, bottom, left*/
  /*text-decoration: none;*/
  /*display: block;*/
  /*text-align: left;*/  /*does not seem to work for scroll element*/
  /*max-height: 100px;*/  /*height of content area - set small to get scroll*/
  /*overflow:auto;*/      /* to get scroll */
  line-height: 18px;  /*centers text vertically*/
  white-space: nowrap;
}

.submenu-contents a {  /*a is for the text of the dropdown menu items, i.e. bmp,gif,jpg,png*/
  float: none;         /*float:left makes the dropdown menu horizontal*/
  color: black;
  padding: 0px 10px 0px 5px;  /*top, right, bottom, left*/
  /*text-decoration: none;*/
  /*display: block;*/
  /*text-align: left;*/  /*does not seem to work for scroll element*/
  /*max-height: 100px;*/  /*height of content area - set small to get scroll*/
  /*overflow:auto;*/      /* to get scroll */
  line-height: 18px;  /*centers text vertically*/
  white-space: nowrap;
}

/*a is for the html a tag*/
.dropdown-content a:hover {background-color: #ccccdd;}

.dropdown:hover .dropdown-content {display: block;}

canvas {
  background: #dce1ff;
  /*border-left: 1px solid #999999;*/
}

textarea {
  /*box-sizing: border-box;*/ /*box-sizing includes padding and border in total width and height*/
  border: 1px solid #999999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  resize: none;
  background: #eeeeee;
  text-align: center;
  line-height: 20px;  /*set line-height equal to height to center vertically*/
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: absolute;
  top: 71px;
  left: 129px;
  width: 55px;
  z-index: 9;
}

.fillform-popup {
  display: none;
  position: absolute;
  top: 107px;
  left: 129px;
  width: 55px;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 55px;
  background-color: #dddddd;
}

/* When the inputs get focus, do something */
.form-container input[type=color]:focus {
  background-color: #eee8aa;
  outline: none;
}

/* Add some hover effects to buttons */
.form-container .cancel:hover, .open:hover, input[type=color]:hover {
  opacity: 1;
  background-color: #eee8aa;
}

input[type=color] {
  width: 55px;
  height: 37px;
  background-color: #dddddd;
  border: 1px solid #aabeff;
  padding: 8px 10px 8px 10px;  /*top, right, bottom, left*/
  /*margin: 0px 0px 0px 0px;*/
}