// Mixin that allows to specify arbitrary CSS properties with
// unitless numbers. The output has rem unit with pixel fallback.
// Shorthand assignments are supported too!
$base-line: 10;

@mixin font-size($value) {
  font-size: #{ $value * $base-line + px };
  font-size: #{ $value + rem };
}

@font-face{
  font-family: 'Roboto-Light';
    src: url('/public/fonts/roboto-light/Roboto-Light-webfont.eot');
    src: url('/public/fonts/roboto-light/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/public/fonts/roboto-light/Roboto-Light-webfont.woff') format('woff'),
         url('/public/fonts/roboto-light/Roboto-Light-webfont.ttf') format('truetype'),
         url('/public/fonts/roboto-light/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}


$font-family: Helvetica Neue, 'Roboto-Light', Arial;

html {
  font-family: $font-family;
  font-weight: 100;
  color: #5a5a5a;
  font-size: 62.5%;
}

div, span, h1, h2, h3, h4, h5, h6, button, input {
  -webkit-font-smoothing: subpixel-antialiased;
}

input, button, table {
  font-family: $font-family;
}

[type=text],
[type=password] {
  outline: none;
  font-weight: 200;
  @include font-size(2);
  @include placeholder {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }
}

div, td {
  @include font-size(1.9);
  font-weight: 100;
}

h2, tr {
  @include font-size(3);
  font-weight: 100;
}