// Here is where you can define your constants for your application and to configure the blueprint framework.
// Feel free to delete these if you want to keep the defaults:

$baseColor: #336699;

$blueprint-grid-columns: 24;
$blueprint-container-size: 950px;
$blueprint-grid-margin: 10px;

// Use this to calculate the width based on the total width.
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;
$font-color: $baseColor;

@import "compass/layout/stretching";
@import "compass/utilities";
@import "compass/css3";

.uriFont {
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  // font-family: "Blooming Grove";
  // font-size: 1em;
  color: shade($font-color, 30) }

.methodFont {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.notDefined {
  font-style: italic;
  font-weight: normal;
  color: lighten($font-color, 20)}

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

@mixin block-container($bgColor: #ffffff) {
    border: 1px solid #a0a0a0;
    padding: 6px;
    margin-bottom: 4px;
    background: $bgColor;
    @include rounded(top, left, 8px);
    @include rounded(top, right, 8px);
    @include rounded(bottom, left, 8px);
    @include rounded(bottom, right, 8px);
}

.toggle-updown:hover {
    cursor: pointer;
    cursor: hand;
}

.toggle-updown {
    background-repeat: no-repeat;
    background-position: right top;
    @extend .toggle-updown:hover;
}

.toggle-up {
    background-image: url('../images/collapse_arrow.gif');
    @extend .toggle-updown;
}

.toggle-down {
    background-image: url('../images/expand_arrow.gif');
    @extend .toggle-updown;
}

.block-container {
    @include block-container; }

.shady-block-container {
    @include block-container(tint($baseColor, 80)); }

@mixin stretchBox($width, $height) {
    border: none;//1px solid #f2f2ff;
    width: $width;
    height: $height;
    position: relative;
    @include inline-block; }

.serviceNameBox {
    // @include stretchBox(400px, 3em);
     }

.uriTemplateBox {
    @include stretchBox(500px, 2em); }

.methodNameBox {
    @include stretchBox(60px, 2em); }

.button {
    padding: 4px;
    background: white;
    font-weight: bold;
    @include rounded(top, left, 4px);
    @include rounded(top, right, 4px);
    @include rounded(bottom, left, 4px);
    @include rounded(bottom, right, 4px); }

.inverse_button {
  @extend .button;
  background: #336699;
  font-size: 1em;
  color: white; }

.method {
  @extend .inverse_button;
  @include stretch;
  background: tint($font-color, 30) }

.GET-method {
  @extend .method;
  background: tint(#006600, 30) }

.PUT-method {
  @extend .method;
  background: tint(#000066, 30) }

.POST-method {
  @extend .method;
  background: tint(#660066, 30) }

.DELETE-method {
  @extend .method;
  background: tint(#660000, 30) }

.uriTemplate {
  @extend .button;
  @extend .uriFont;
  @include stretch; }