@import "blueprint/reset";
@import "base";
@import "fancy-fonts";

$border_color: #aaaaaa;

#container {
  @include container; }

$min_width: 340px;

.examples {
  margin-bottom: 1em;
  @include row;
  min-width: $min_width * 3 + 20px * 2 + 20px; }

h1 {
  text-align: center; }

.example, .gutter {
  min-height: 21em; }

.example {
  @include column;
  width: 30%;
  min-width: $min_width;
  border: 4px solid #{$border_color};
  @include border-radius(0.667em);
  @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px);
  margin-bottom: 1em;
  h2 {
    margin: 0.5em 0 1em;
    text-align: center; } }

.inset {
  @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
}

.gutter {
  display: block;
  float: left;
  width: 2.5%;
  min-width: 20px;
  content: " "; }

.example {
  @include background-image(linear-gradient(white, #cccccc));
  pre {
    padding: 1em;
    margin: 1em;
    color: white;
    text-shadow: 1px 1px 2px black;
    font-weight: bold; } }

#background-clip {
  pre {
    background: transparent #{image_url("example.png")} no-repeat;
    border: 1em solid rgba(255, 0, 0, 0.25); }
  .padding-box {
    @include background-clip(padding-box);
    @include background-origin(padding-box); }
  .border-box {
    @include background-clip(border-box);
    @include background-origin(border-box); } }

#background-size {
  pre {
    background: transparent #{image_url("example.png")} no-repeat;
    border: 1em solid #{mix(red, white, 0.5)};
    border: 1em solid rgba(255, 0, 0, 0.25); }
  .top-left {
    @include background-size(50% 50%); }
  .centered {
    @include background-size(50% 50%);
    background-position: center center; } }

#gradients {
  .horizontal {
    @include background-image(left, linear-gradient(#d92626, #2626d9)); }
  .vertical {
    @include background-image(linear-gradient(#d92626, #2626d9)); }
  .diagonal {
    @include background-image(linear-gradient(right top, #d92626, #2626d9)); }
  .radial {
    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
    @include background-image(radial-gradient(#d92626 10px, #2626d9 150px));
    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
    // background-color: #2626d9
  }
  .radial-1 {
    // A default radial gradient:
    @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
  .radial-2 {
    // A centered gradient
    @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
  .radial-3 {
    // A centered radial gradient at the top
    @include background-image(radial-gradient(top center, #dddddd, #aaaaaa)); }
  .radial-4 {
    // A centered radial gradient with fixed color stops
    @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50px)); }
  .radial-5 {
    // A centered gradient with several color stops
    @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
  .radial-6 {
    // A centered gradient with color stops
    @include background-image(radial-gradient(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }