@import "bourbon";

$pageWidth: 930px;
/* We use this core red in a few places like buttons and links. */
$coreRed: #D20000;
$deepRed: #7A0124;
$linkColor: $coreRed;
$textColor: #333;
$lightTextColor: #777;
/* The color of those tan/grey sections of the site which look sunken into the page. */
$sunkenColor: #F0EEEA;
$borderColor: darken($sunkenColor, 15%);
$standardBorder: 1px solid $borderColor;
$dragHandleWidth: 30px;
$almostWhite: #FDFDFD;
$textShadowColor: darken($textColor, 30%);

// Fonts
$sansFont: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
$monoFont: "Ubuntu Mono", Courier, monospace;

// Close links (Xs)
@mixin closeLinks {
  border: 0;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  &:active {
    color: $linkColor;
    background-color: transparent;
  }
}

@mixin gravatar($size: 25px) {
  position: relative;
  display: inline-block;
  width: $size;
  height: $size;
  vertical-align: middle;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: $size / 8;

  img {
    width: 100%;
    height: 100%;
    border-radius: $size / 8;
  }
}

@mixin standardPanel {
  background-color: $sunkenColor;
  border: $standardBorder;
}

@mixin raisedPanel {
  @include standardPanel;
  border-bottom-width: 2px;
  box-shadow: 3px 3px 2px #e8e8e8;
}

@mixin embossedPanel {
  @include standardPanel;
  box-shadow: 0px 2px 2px white;
}

// When we don't want text in anchors to have typical link properties
@mixin noLink {
  cursor: default;
  text-decoration: none;
  background: transparent;
  &:hover {
    text-decoration: none;
    background: transparent;
  }
}
