@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-dark';

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

input, button { @include box-sizing(border-box); }
::-moz-focus-inner { padding: 0; border: 0 }

@font-face {
  font-family: 'UbuntuMono';
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/UbuntuMono.woff) format('woff');
}

body {
  font: 12px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #d8e5e5;
}

.calc {
  margin: 50px auto;
  padding: 15px;
  width: 177px;
  background: #3d4543;
  border: 1px solid #222;
  border-radius: 4px;
  @include linear-gradient(top, #3d4543, #2f2a2f);
  @include box-shadow(inset 0 0 0 1px rgba(white, .1),
                      0 0 4px rgba(black, .5));
}

.calc-display {
  margin: 0 0 20px;
  padding: 3px;
  background: #222;
  border-radius: 3px;
  @include box-shadow(inset 0 0 0 1px rgba(black, .1),
                      0 0 0 1px rgba(white, .08));
}

.calc-display-input {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 8px;
  font: 26px/35px UbuntuMono, monospace;
  color: #444;
  text-align: right;
  background: #bccd95;
  background-clip: padding-box; /* Don't let the background bleed outside the border */
  border: 1px solid #222;
  border-radius: 2px;
  @include linear-gradient(top, #bccd95, #e0f5b1);
  @include box-shadow(inset 0 2px 3px rgba(black, .5),
                      0 0 0 1px rgba(white, .12));
}

.calc-row {
  margin-top: 7px;
  @include clearfix;
}

.calc-button {
  float: left;
  padding: 0;
  margin: 0 0 0 7px;
  width: 39px;
  font: 14px/23px UbuntuMono, monospace;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(black, .4);
  background: #313131;
  background-clip: padding-box !important; /* !important because FF overrides the value on :active */
  border: 0; /* IE 8 fix */
  border: 1px solid rgba(black, .8);
  border-radius: 3px;
  cursor: pointer;
  @include linear-gradient(top, #313131, #1c1c1c);
  @include box-shadow(inset 0 0 0 1px rgba(white, .08),
                      0 1px rgba(black, .3),
                      0 0 0 1px rgba(white, .08));

  &:first-child { margin-left: 0; }

  &:active {
    background: #282828;
    @include box-shadow(inset 0 1px 2px rgba(black, .6),
                        0 1px rgba(black, .1),
                        0 0 0 1px rgba(white, .05));
  }
}

.calc-button-gray {
  background: #6f6f6f;
  @include linear-gradient(top, #6f6f6f, #515151);

  &:active { background: #555; }
}

.calc-button-red {
  background: #ff4561;
  @include linear-gradient(top, #ff7286, #ff4561);

  &:active { background: #ff4561; }
}

.calc-button-yellow {
  background: #ffa70c;
  @include linear-gradient(top, #ffb935, #ffa70c);

  &:active { background: #ffa70c; }
}

.calc-button-big { font-size: 16px; }

.lt-ie8 .calc-display-input { width: 152px; } /* border-box fix */

.lt-ie7 .calc-row { margin-left: -7px; } /* first-child fix */
