@import "compass/reset";
@import "compass/css3";
@import "compass/typography";
@import "compass/utilities";
@import "variables";
@import "mixins";
@import "classes";

* {
  @include box-sizing(border-box);
}
 
body {
  padding: $body-padding;
  font-size: $font-size;
  line-height: $line-height;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: $black-text;
}

h1 {
  font-size: $h1-font-size;
}
h2 {
  font-size: $h2-font-size;
}
h3 {
  font-size: $h3-font-size;
}
h4 {
  font-size: $h4-font-size;
}
h5 {
  font-size: $h5-font-size;
}
h6 {
  font-size: $h6-font-size;
}

input[type="text"] {
  height: $input-height;
  font-size: $font-size;
  padding: 6px 6px;
  margin: 0;
  border-radius: $border-radius;
  @include border;
  outline: none;
  width: 300px;

  &:hover {
    border-color: $border-color-active;
  }

  &:focus {
    border-color: $border-color-master;
  }
}

input[type="checkbox"] {
  position: relative;
  top: 1px;
}

button {
  font-size: $font-size;
  cursor: pointer;
  padding: 6px 8px;
  margin: 0;
  border-radius: $border-radius;
  @include border;
  @include background-image(linear-gradient(#eee, #fff 15%, #eee));
  color: #444;

  &:hover {
    border-color: $border-color-active;
    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
    @include background-image(linear-gradient(#e7e7e7, #fff 15%, #e7e7e7));
  }

  &:active {
    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.08) inset, 0 0 8px 1px rgba(0, 0, 0, 0.1) inset);
  }
}

// Pseudo classes don't support a comma between selectors, and -moz is still required for Firefox
::selection {
  background: $master-color;
}
::-moz-selection {
  background: $master-color;
}

.tabs {

  li {
    display: inline-block;
    width: $tab-width;
    height: $tab-height;

    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: $tab-height;
      text-align: center;
      color: $black-text;
      text-decoration: none;
      font-size: $h3-font-size;
      opacity: $faded-opacity;
      border-bottom: 2px dashed transparent;

      &:hover {
        border-bottom-color: $black-text;
        opacity: $faded-hover-opacity;
      }

      &:active {
        opacity: $faded-active-opacity;
      }
    }

    &.active {
      a {
        border-bottom-color: $black-text;
        opacity: 1.0;
      }
    }
  }
}

a {
  color: $master-text-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}