html {
  height: 380px;
  margin: 0;
  padding: 0;
  width: 244px;
  font-family: "Open Sans", "Hevatica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}

body {
  margin: 0px;
  padding: 0px;
}

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

#calc {
  background-color: #fff;
  border: 0;
  margin: 0;
  max-width: 244px;
  min-width: 244px;
  padding: 0px;
}

#calc #display,
#calc #display:focus {
  border: none;
  bottom: 225px;
  letter-spacing: 1px;
  line-height: 20px;
  margin: 0px;
  min-width: 204px;
  overflow: scroll;
  padding: 20px;
  position: absolute;
  top: 0px;
}

#calc .edge-top {
  height: 5px;
  width: 244px;
  z-index: 99;
  position: absolute;
  background: #fff;
}

#calc .edge {
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,
                                           rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,
                                         rgba(255,255,255,0) 100%);
  height: 20px;
  position: absolute;
  top: 5px;
  width: 244px;
  z-index: 99;
}

.equation {
  width: 100%;
  position: relative;
  clear: both;
  height: 22px;
}

.equation .operator {
  color: #2c2c2c;
  width: 15px;
  float: right;
  padding-right: 5px;
  height: 22px;
  line-height: 16px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.equation .operand {
  color: #2c2c2c;
  float: right;
  max-width: 80px;
  text-align: right;
  overflow: hidden;
  height: 16px;
  line-height: 16px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.equation .accumulator {
  color: #888;
  float: left;
  font-size: 13px;
  width: 85px;
  max-width: 80px;
  text-align: left;
  overflow: hidden;
  height: 13px;
  line-height: 13px;
  padding-top: 6px;
  padding-bottom: 3px;
}

#display .hr {
  width: 100%;
  height: 0px;
  border-top: 1px solid #d9d9d9;
  position: relative;
}

#calc #buttons {
  height: 225px;
  max-width: 244px;
  min-width: 244px;
  position: absolute;
  bottom: 0px;
}

.calc-button {
  height: 45px;
  width: 61px;
  float: left;
}

.calc-button.AC {
  background: url('img/1x/normal/52112_calculator_ac_btn.png');
  background-size: 61px 45px;
}

.calc-button.AC:active {
  background: url('img/1x/pressed/52112_calculator_ac_btn.png');
  background-size: 61px 45px;
}

.calc-button.plus-minus {
  background: url('img/1x/normal/52112_calculator_positivenegative_btn.png');
  background-size: 61px 45px;
}

.calc-button.plus-minus:active {
  background: url('img/1x/pressed/52112_calculator_positivenegative_btn.png');
  background-size: 61px 45px;
}

.calc-button.div {
  background: url('img/1x/normal/52112_calculator_division_btn.png');
  background-size: 61px 45px;
}

.calc-button.div:active {
  background: url('img/1x/pressed/52112_calculator_division_btn.png');
  background-size: 61px 45px;
}

.calc-button.mult {
  background: url('img/1x/normal/52112_calculator_multiplication_btn.png');
  background-size: 61px 45px;
}

.calc-button.mult:active {
  background: url('img/1x/pressed/52112_calculator_multiplication_btn.png');
  background-size: 61px 45px;
}

.calc-button.plus {
  background: url('img/1x/normal/52112_calculator_addition_btn.png');
  background-size: 61px 45px;
}

.calc-button.plus:active {
  background: url('img/1x/pressed/52112_calculator_addition_btn.png');
  background-size: 61px 45px;
}

.calc-button.minus {
  background: url('img/1x/normal/52112_calculator_subtraction_btn.png');
  background-size: 61px 45px;
}

.calc-button.minus:active {
  background: url('img/1x/pressed/52112_calculator_subtraction_btn.png');
  background-size: 61px 45px;
}

.calc-button.one {
  background: url('img/1x/normal/52112_calculator_1_btn.png');
  background-size: 61px 45px;
}

.calc-button.one:active {
  background: url('img/1x/pressed/52112_calculator_1_btn.png');
  background-size: 61px 45px;
}

.calc-button.two {
  background: url('img/1x/normal/52112_calculator_2_btn.png');
  background-size: 61px 45px;
}

.calc-button.two:active {
  background: url('img/1x/pressed/52112_calculator_2_btn.png');
  background-size: 61px 45px;
}

.calc-button.three {
  background: url('img/1x/normal/52112_calculator_3_btn.png');
  background-size: 61px 45px;
}

.calc-button.three:active {
  background: url('img/1x/pressed/52112_calculator_3_btn.png');
  background-size: 61px 45px;
}

.calc-button.four {
  background: url('img/1x/normal/52112_calculator_4_btn.png');
  background-size: 61px 45px;
}

.calc-button.four:active {
  background: url('img/1x/pressed/52112_calculator_4_btn.png');
  background-size: 61px 45px;
}

.calc-button.five {
  background: url('img/1x/normal/52112_calculator_5_btn.png');
  background-size: 61px 45px;
}

.calc-button.five:active {
  background: url('img/1x/pressed/52112_calculator_5_btn.png');
  background-size: 61px 45px;
}

.calc-button.six {
  background: url('img/1x/normal/52112_calculator_6_btn.png');
  background-size: 61px 45px;
}

.calc-button.six:active {
  background: url('img/1x/pressed/52112_calculator_6_btn.png');
  background-size: 61px 45px;
}

.calc-button.seven {
  background: url('img/1x/normal/52112_calculator_7_btn.png');
  background-size: 61px 45px;
}

.calc-button.seven:active {
  background: url('img/1x/pressed/52112_calculator_7_btn.png');
  background-size: 61px 45px;
}

.calc-button.eight {
  background: url('img/1x/normal/52112_calculator_8_btn.png');
  background-size: 61px 45px;
}

.calc-button.eight:active {
  background: url('img/1x/pressed/52112_calculator_8_btn.png');
  background-size: 61px 45px;
}

.calc-button.nine {
  background: url('img/1x/normal/52112_calculator_9_btn.png');
  background-size: 61px 45px;
}

.calc-button.nine:active {
  background: url('img/1x/pressed/52112_calculator_9_btn.png');
  background-size: 61px 45px;
}

.calc-button.equals {
  background: url('img/1x/normal/52112_calculator_equals_btn.png') center no-repeat;
  background-size: 61px 90px;
  height: 90px;
}

.calc-button.equals:active {
  background: url('img/1x/pressed/52112_calculator_equals_btn.png');
  background-size: 61px 90px;
}

.calc-button.zero {
  background: url('img/1x/normal/52112_calculator_0_btn.png') center no-repeat;
  background-size: 122px 45px;
  margin-top: -45px;
  width: 122px;
}

.calc-button.zero:active {
  background: url('img/1x/pressed/52112_calculator_0_btn.png') center no-repeat;
  background-size: 122px 45px;
}

.calc-button.point {
  background: url('img/1x/normal/52112_calculator_point_btn.png') center no-repeat;
  background-size: 61px 45px;
  height: 45px;
  margin-top: -45px;
  margin-left: 122px;
}

.calc-button.point:active {
  background: url('img/1x/pressed/52112_calculator_point_btn.png') center no-repeat;
  background-size: 61px 45px;
}


