.numpad{
    left:350px;
    top:200px;
}

hr{
    margin-top:40px;
}

/*
.clear{
    display: block;
    clear: both;
    height: 1px;
}

*/.helpers button{
    width:auto;
    padding:10px;

}

.values{
    margin-top:40px;
    line-height:20px;
}

.closed{
    display:none;
}

.pressed{
    background:#666;
}

.input{
    display: block;
    border:2px solid #666;
    max-width: 100px;
    padding:5px 10px;
    height:18px;
    text-decoration: none;
    color:#000;
}

.focus{
    border:2px solid #FF0000;
}

.numpad {
  position: relative;
  height: 320px;
  width: 230px;
  padding: 13px;
  z-index: 10000;
  background: #666;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #666666));
  background-image: -webkit-linear-gradient(#999999, #666666);
  background-image: -moz-linear-gradient(#999999, #666666);
  background-image: -o-linear-gradient(#999999, #666666);
  background-image: linear-gradient(#999999, #666666);
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 25px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 25px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 25px;
}

.numpad[disabled] button {
  opacity: .5;
}

.numpad .button-wrapper {
  width: 200px;
  overflow: auto;
}

.numpad .button-wrapper button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
  background-image: -webkit-linear-gradient(#ffffff, #e5e5e5);
  background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
  background-image: -o-linear-gradient(#ffffff, #e5e5e5);
  background-image: linear-gradient(#ffffff, #e5e5e5);
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 10px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 10px;
  box-sizing: border-box;
  display: block;
  float: left;
  width: 51px;
  height: 51px;
  padding: 10px 0px;
  margin: 0 10px 10px 0;
  border: none;
  font-size: 20px;
}

.numpad .button-wrapper .smaller {
  font-size: 14px;
}

.numpad .button-wrapper .button-wide {
  width: 82px;
}

.numpad .button-wrapper .pressed {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dadada), color-stop(100%, #bebebe));
  background-image: -webkit-linear-gradient(#dadada, #bebebe);
  background-image: -moz-linear-gradient(#dadada, #bebebe);
  background-image: -o-linear-gradient(#dadada, #bebebe);
  background-image: linear-gradient(#dadada, #bebebe);
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
}

.numpad .drag-indicator {
  position: absolute;
  width: 24px;
  height: 80px;
  top: 115px;
  left: 208px;
}

.numpad .drag-indicator > span {
  display: block;
  height: 80px;
  width: 0px;
  border-left: 1px solid #666666;
  border-right: 1px solid #999999;
  float: left;
  margin-right: 3px;
}

.numpad .close {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  -webkit-box-shadow: black 0px 1px 2px inset;
  -moz-box-shadow: black 0px 1px 2px inset;
  box-shadow: black 0px 1px 2px inset;
  position: absolute;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 198px;
  background: #fff;
  border: none;
  padding-top: 4px;
}

.numpad .close:before {
  font-family: Arial;
  content: "X";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  font-weight: bold;
  color: #000;
  font-size: 16px;
}