.clearfix {
  *zoom: 1; }
.clearfix:before, .clearfix:after {
  content: "";
  display: table; }
.clearfix:after {
  clear: both; }

/* Using box shadows to create 3D effects */
#calculator {
  width: 400px;
  height: auto;
  padding: 10px;
  margin: auto;
  font-size: 1em;
  background-color: #232323;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  overflow: hidden;
  text-align: center;

  position: absolute;
/*  top: 10px;
  left: 10px;*/
  left: 20%;
  top: 15%;
  z-index: 99;
  -webkit-transform: translateZ(0);

  background: white;
}

/* Top portion */
#calculator .top span.clear {
  float: left; }

/* Inset shadow on the screen to create indent */
#calculator .top .screen {
  position: relative;
  width: auto;
  height: 93px;
  margin: 12px 10px 30px;
  padding: 1em 0.5em;
  color: #222;
  font-family: "Myriad Pro", Arial, sans-serif;
  text-align: right;
  overflow: auto;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  background-color: #f0f0f0;


  border-color: rgb(229,231,233);
}
  #calculator .top .screen .result {
    font-size: 3em;
    letter-spacing: 3px;
	-webkit-transform: translateZ(0);
	height: 42px;
	width: 100%;
	}
  #calculator .top .screen .legend {
    display: block;
    height: 20px;
    width: 100%;
	-webkit-transform: translateZ(0);
}

/* Clear floats */
#calculator .keys, .top {
  overflow: hidden; }

/* Applying same to the keys */
#calculator .keys input[type=button] {
  display: inline-block;
  float: left;
  width: 22.5%;
  margin: 1.2%;
  padding: 0.7em 0 0.5em;
  color: #c0c0c0;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: -2px;
  background-color: #2f2f2f;
  border: #000 1px solid;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  -webkit-box-shadow: none;

  color: #fff;
  background-image: -webkit-linear-gradient(top, rgb(190,190,190), rgb(175,175,175));
  border: 1px solid rgb(170,170,170);
}

#calculator .keys input[type=button]:active {
}

.button--wide {
  width: 47.5% !important; }

.button--tall {
  padding: 2.1em 0 !important;
  margin-bottom: -2.75em !important;
}

#calculator .keys input[type=button].eval {
  background-image: -webkit-linear-gradient(top, rgb(98,160,184), rgb(77,136,166));
  border: 1px solid rgb(7,120,157);
}


#calculator .close_button {
  display: inline-block;
  width: 10%;
  margin: 1.2%;
  padding: 0.7em 0 0.5em;
  color: #c0c0c0;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: -2px;
  background-color: #2f2f2f;
  border: #000 1px solid;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;

  background: white;
  border: none;
  color: #aaa;
}

@media (max-width: 560px){
  #calculator{
    left:0;
    right:0;
    margin:auto;
    max-width: 94%;
  }
}