table {
  padding: 2px;
  border: 1px solid;
  border-spacing: 1px;
  background: yellow;
}
table th {
  font: 14px verdana, serif;
  font-weight: bold;
  cursor: default;
}
table td {
  max-width: 180px;
}
table ul { /*scroll doesn't work on td*/
  padding: 0;
  margin: 2px;
  min-width:  170px;
  border: 1px solid;
  background: white;
  overflow-x: auto;
  overflow-y: auto;
}
table li {
  margin: 2px;
  list-style-type: none;
  cursor: pointer;
}
table li, #small {
  font: 12px arial, sans-serif;
}
table li:not(:first-child), #out {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
table li:hover {
  color: white;
  background: blue;
}
table button, checkbox {
  cursor: pointer;
}
table p {
  margin: 8px 0;    
}
#inp, #out {
  width: 98%;
}
#out {
  font: 13px arial, sans-serif;
}
#list1 {
  height: 392px;
}
#list2, #list3 {
  height: 178px;
}
.cfirst, button {
  position: relative;
}
.tip1 {
  visibility: hidden;
  font: 11px arial, sans-serif;
  cursor: default;
  text-align: center;
  color: black;
  background: #eee;
  border: 1px solid;
  padding: 5px;
  position: absolute;
  top: 20px; left: -20px;
  width: 120px;
  z-index: 1;
}
button:hover .tip1 { 
  visibility: visible; 
}
.cfirst, .cname, .tip2 {
  font-weight: bold;
  text-align: center;
  background: #aaffaa;
}
.tip2 {
  visibility: hidden;
  color: black;
  border: 1px solid;
  padding: 6px;
  position: absolute;
  right: 0;
}
.cfirst:hover .tip2 { 
  visibility: visible; 
}
dialog#invokeDialog {
  background: #fc7;
  border-color: gray;
}
label#invokeLabel {
  font-family: sans-serif;
  font-size: small;
}
#invokeDialog input {
  width: 186px;
}
#invokeDialog span {
  display: inline-block;
  text-align: center;
  width: 18px;
  padding: 1px;
  border: 1px solid;
  background: white;
  cursor: pointer;
}