#canvaskeypad {
  position:absolute;
  top:0px;
  left:0px;
  max-width:570px;
  min-width:300px;
  padding: 5px;
  background: #eef;
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: 1px 3px 3px;
  z-index: 99;
}

.keypadBut {
  height: 45px;
  vertical-align: middle;   /* not sure why otherwise vertical alignment 
                    is inconsistent between img and text-based buttons */
  border: 1px solid #666;
  border-radius: 3px;
  box-shadow: 0px 1px 1px;

  margin: 2px;
  font-size:30px;
  background: #eee;
  cursor: pointer;
}

/* Browser compatibility OK, IE9+ */
.keypadBut[disabled] {
  color: #ccc;
  cursor: default;
}

.keypadPhrase {
  font-size:20px;

  border: 1px solid #666;
  border-radius: 3px;
  box-shadow: 0px 1px 1px;

  background: #eee;
  cursor: pointer;
}

.disabled {
  opacity: 0.2;
}