$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;
$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
$body-line-height: 20px;

$light-blue: #f0f7fd;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
$orange: #f96e5b;
$yellow: #fff8af;
$cream: #F6EFD4;
$border-color: #ddd;

// edX colors
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);

@mixin hide-text {
  background-color: transparent;
  border:           0;
  color:            transparent;
  font:             0/0 a;
  text-shadow:      none;
}

// 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: 1px solid darken($orange, 15%);
  @include border-radius(4px);
  @include box-shadow(inset 0 0 0 1px adjust-hue($orange, 20%), 0 1px 0 #fff);
  color: #fff;
  font-weight: bold;
  @include linear-gradient(adjust-hue($orange, 8%), $orange);
  padding: 6px 20px;
  text-shadow: 0 1px 0 darken($orange, 10%);
  -webkit-font-smoothing: antialiased;

  &:hover, &:focus {
    @include box-shadow(inset 0 0 6px 1px adjust-hue($orange, 30%));
  }
}

#{$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;
}