$fg-column: 70px;
$fg-gutter: 26px;
$fg-max-columns: 12;
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
$body-line-height: 20px;

$light-blue: #f0f8fa;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
$orange: #f96e5b;
$yellow: #fff8af;

// Base html styles
html {
  height: 100%;
}

a {
  text-decoration: none;
  color: #888;
  @include transition;

  &:hover {
    color: #ccc;
  }
}

input {
  font-family: $body-font-family;
}

button, input[type="submit"], .button {
  background-color: $orange;
  border: 0;
  color: #fff;
  font-weight: bold;
  padding: 8px 10px;
  -webkit-font-smoothing: antialiased;

  &:hover {
    background-color: shade($orange, 10%);
  }
}

#{$all-text-inputs}, textarea {
  border: 1px solid $dark-blue;
  @include box-shadow(inset 0 3px 6px $light-blue);
  color: lighten($dark-blue, 30%);
  font: $body-font-size $body-font-family;
  outline: none;
  padding: 4px 6px;

  &:hover {
    background: lighten($yellow, 13%);
    color: $dark-blue;
  }

  &:focus {
    @include box-shadow(inset 0 3px 6px $light-blue, 0 0 3px lighten($bright-blue, 10%));
    color: $dark-blue;
    background: lighten($yellow, 13%);
  }
}

textarea {
  @include box-sizing(border-box);
  display: block;
  line-height: lh();
  padding: 15px;
  width: 100%;
}

// Extends
.new-module {
  position: relative;

  a {
    padding: 6px;
    display: block;
  }

  ul.new-dropdown {
    list-style: none;
    position: absolute;

    li {
      display: none;
      padding: 6px;
    }

  }

  &:hover {
    ul.new-dropdown {
      display: block;
    }
  }
}

.draggable {
  background: url('../img/drag-handle.png') no-repeat center;
  text-indent: -9999px;
  display: block;
  cursor: move;
  height: 100%;
  padding: 0;
  @include position(absolute,  0px 0px 0 0);
  width: 30px;
  z-index: 99;
}

.editable {
  &:hover {
    background: lighten($yellow, 10%);
  }

  button {
    padding: 4px 10px;
  }
}

.wip {
  outline: 1px solid #f00 !important;
  position: relative;
}

.hidden {
  display: none;
}