jacquescrocker/_compass_mini.scss

## _compass_mini.scss
/////////////////////
// compass/_support.scss
//
// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
$legacy-support-for-ie: true !default;

// Setting this to false will result in smaller output, but no support for ie6 hacks
$legacy-support-for-ie6: $legacy-support-for-ie !default;

// Setting this to false will result in smaller output, but no support for ie7 hacks
$legacy-support-for-ie7: $legacy-support-for-ie !default;

// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;

// @private
// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
// But in case the user set each of those explicitly, we need to sync the value of
// this combined variable.
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;

// Support for mozilla in experimental css3 properties (-moz).
$experimental-support-for-mozilla      : true !default;
// Support for webkit in experimental css3 properties (-webkit).
$experimental-support-for-webkit       : true !default;
// Support for webkit's original (non-standard) gradient syntax.
$support-for-original-webkit-gradients : true !default;
// Support for opera in experimental css3 properties (-o).
$experimental-support-for-opera        : true !default;
// Support for microsoft in experimental css3 properties (-ms).
$experimental-support-for-microsoft    : true !default;
// Support for khtml in experimental css3 properties (-khtml).
$experimental-support-for-khtml        : false !default;
// Support for svg in experimental css3 properties.
// Setting this to true might add significant size to your
// generated stylesheets.
$experimental-support-for-svg          : false !default;
// Support for CSS PIE in experimental css3 properties (-pie).
$experimental-support-for-pie          : false !default;


/////////////////////
// compass/utilities/general/_hacks.scss
//
// The `zoom` approach generates less CSS but does not validate.
// Set this to `block` to use the display-property to hack the
// element to gain layout.
$default-has-layout-approach: zoom !default;

// This mixin causes an element matching the selector
// to gain the "hasLayout" property in internet explorer.
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
@mixin has-layout($approach: $default-has-layout-approach) {
  @if $legacy-support-for-ie {
    @if $approach == zoom {
      @include has-layout-zoom;
    } @else if $approach == block {
      @include has-layout-block;
    } @else {
      @warn "Unknown has-layout approach: #{$approach}";
      @include has-layout-zoom;
    }
  }
}

@mixin has-layout-zoom {
  @if $legacy-support-for-ie {
    *zoom: 1;
  }
}

@mixin has-layout-block {
  @if $legacy-support-for-ie {
    // This makes ie6 get layout
    display: inline-block;
    // and this puts it back to block
    & { display: block; }
  }
}

// A hack to supply IE6 (and below) with a different property value.
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
@mixin bang-hack($property, $value, $ie6-value) {
  @if $legacy-support-for-ie6 {
    #{$property}: #{$value} !important;
    #{$property}: #{$ie6-value};
  }
}


/////////////////////
// compass/utilities/general/_clearfix.scss
//
// This basic method is preferred for the usual case, when positioned
// content will not show outside the bounds of the container.
//
// Recommendations include using this in conjunction with a width.
// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
@mixin clearfix {
  overflow: hidden;
  @include has-layout;
}

// This older method from Position Is Everything called
// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
// has the advantage of allowing positioned elements to hang
// outside the bounds of the container at the expense of more tricky CSS.
@mixin legacy-pie-clearfix {
  &:after {
    content    : "\0020";
    display    : block;
    height     : 0;
    clear      : both;
    overflow   : hidden;
    visibility : hidden;
  }
  @include has-layout;
}

// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
//
// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
@mixin pie-clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  @include has-layout;
}


/////////////////////
// compass/css3/_shared.scss
//

// This mixin provides basic support for CSS3 properties and
// their corresponding experimental CSS2 properties when
// the implementations are identical except for the property
// prefix.
@mixin experimental($property, $value,
  $moz      : $experimental-support-for-mozilla,
  $webkit   : $experimental-support-for-webkit,
  $o        : $experimental-support-for-opera,
  $ms       : $experimental-support-for-microsoft,
  $khtml    : $experimental-support-for-khtml,
  $official : true
) {
  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
  @if $official                                        {         #{$property} : $value; }
}

// Same as experimental(), but for cases when the property is the same and the value is vendorized
@mixin experimental-value($property, $value,
  $moz      : $experimental-support-for-mozilla,
  $webkit   : $experimental-support-for-webkit,
  $o        : $experimental-support-for-opera,
  $ms       : $experimental-support-for-microsoft,
  $khtml    : $experimental-support-for-khtml,
  $official : true
) {
  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
  @if $official                                        { #{$property} :         #{$value}; }
}


/////////////////////
// compass/css3/_images.scss
//

// Background property support for vendor prefixing within values.
@mixin background(
  $background-1,
  $background-2: false,
  $background-3: false,
  $background-4: false,
  $background-5: false,
  $background-6: false,
  $background-7: false,
  $background-8: false,
  $background-9: false,
  $background-10: false
) {
  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
                        $background-6, $background-7, $background-8, $background-9, $background-10);
  $mult-bgs: -compass-list-size($backgrounds) > 1;
  $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
  @if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {      background:    -svg($backgrounds); }
  @if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {      background:    -owg($backgrounds); }
  @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
  @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
  @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
  @if $experimental-support-for-microsoft    and prefixed(-ms,     $backgrounds) {      background:     -ms($backgrounds); }
  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
                                                                                        background:         $backgrounds ;
}

@mixin background-with-css2-fallback(
  $background-1,
  $background-2: false,
  $background-3: false,
  $background-4: false,
  $background-5: false,
  $background-6: false,
  $background-7: false,
  $background-8: false,
  $background-9: false,
  $background-10: false
) {
  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
                        $background-6, $background-7, $background-8, $background-9, $background-10);
  $mult-bgs: -compass-list-size($backgrounds) > 1;
  $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
  @if not blank($simple-background) { background: $simple-background; }
  @include background($background-1, $background-2, $background-3, $background-4, $background-5,
                      $background-6, $background-7, $background-8, $background-9, $background-10);
}


// Background image property support for vendor prefixing within values.
@mixin background-image(
  $image-1,
  $image-2: false,
  $image-3: false,
  $image-4: false,
  $image-5: false,
  $image-6: false,
  $image-7: false,
  $image-8: false,
  $image-9: false,
  $image-10: false
) {
  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
  $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;

  @if $experimental-support-for-svg          and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
  @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) { background-image:    -owg($images); }
  @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
  @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
  @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
  @if $experimental-support-for-microsoft    and prefixed(-ms,     $images) { background-image:     -ms($images); }
  @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
                                                                              background-image:         $images ;
}

// Emit a IE-Specific filters that renders a simple linear gradient.
// For use in IE 6 - 8. Best practice would have you apply this via a
// conditional IE stylesheet, but if you must, you should place this before
// any background-image properties that you have specified.
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
  @include has-layout;
  $gradient-type: if($orientation == vertical, 0, 1);
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
  }
}


// Border image property support for vendor prefixing properties and values.
@mixin border-image($value) {
  @if $experimental-support-for-mozilla      {    -moz-border-image:    -moz(reject(-compass-list($value), fill)); }
  @if $support-for-original-webkit-gradients { -webkit-border-image:    -owg(reject(-compass-list($value), fill)); }
  @if $experimental-support-for-webkit       { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); }
  @if $experimental-support-for-opera        {      -o-border-image:      -o(reject(-compass-list($value), fill)); }
  @if $experimental-support-for-svg          {         border-image:    -svg(reject(-compass-list($value), fill)); }
                                                       border-image:                              $value;
}

// List style image property support for vendor prefixing within values.
@mixin list-style-image($image) {
  @if $experimental-support-for-mozilla      and prefixed(-moz,    $image) { list-style-image:    -moz($image); }
  @if $support-for-original-webkit-gradients and prefixed(-owg,    $image) { list-style-image:    -owg($image); }
  @if $experimental-support-for-webkit       and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
  @if $experimental-support-for-opera        and prefixed(-o,      $image) { list-style-image:      -o($image); }
  @if $experimental-support-for-svg          and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
                                                                             list-style-image:         $image ;
}

// List style property support for vendor prefixing within values.
@mixin list-style($value) {
  $value: -compass-list($value);
  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { list-style-image:    -owg($value); }
  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
  @if $experimental-support-for-opera        and prefixed(-o,      $value) { list-style-image:      -o($value); }
  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
                                                                             list-style-image:         $value ;
}

// content property support for vendor prefixing within values.
@mixin content($value) {
  $value: -compass-list($value);
  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { content:    -moz($value); }
  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { content:    -owg($value); }
  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { content: -webkit($value); }
  @if $experimental-support-for-opera        and prefixed(-o,      $value) { content:      -o($value); }
  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { content:    -svg($value); }
                                                                             content:         $value ;
}


/////////////////////
// compass/css3/_border-radius.scss
//
$default-border-radius: 5px !default;

// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
//
// When two values are passed, the first is the horizontal radius
// and the second is the vertical radius.
//
// Note: webkit does not support shorthand syntax for several corners at once.
// So in the case where you pass several values only the first will be passed to webkit.
//
// Examples:
//
//     .simple   { @include border-radius(4px, 4px); }
//     .compound { @include border-radius(2px 5px, 3px 6px); }
//     .crazy    { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
//
// Which generates:
//
//    .simple {
//      -webkit-border-radius: 4px 4px;
//      -moz-border-radius: 4px / 4px;
//      -o-border-radius: 4px / 4px;
//      -ms-border-radius: 4px / 4px;
//      -khtml-border-radius: 4px / 4px;
//      border-radius: 4px / 4px; }
//
//    .compound {
//      -webkit-border-radius: 2px 3px;
//      -moz-border-radius: 2px 5px / 3px 6px;
//      -o-border-radius: 2px 5px / 3px 6px;
//      -ms-border-radius: 2px 5px / 3px 6px;
//      -khtml-border-radius: 2px 5px / 3px 6px;
//      border-radius: 2px 5px / 3px 6px; }
//
//    .crazy {
//      -webkit-border-radius: 1px 2px;
//      -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
//      -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
//      -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
//      -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
//      border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }

@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {

  @if $vertical-radius {
    // Webkit doesn't understand the official shorthand syntax for specifying
    // a vertical radius unless so in case there's several we only take the first.
    @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius),
      not -moz,
      -webkit,
      not -o,
      not -ms,
      not -khtml,
      not official
    );
    @include experimental("border-radius", $radius unquote("/") $vertical-radius,
      -moz,
      not -webkit,
      -o,
      -ms,
      -khtml,
      official
    );
  }
  @else {
    @include experimental(border-radius, $radius);
  }
}

// Round radius at position by amount.
//
// * legal values for `$vert`: `top`, `bottom`
// * legal values for `$horz`: `left`, `right`

@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
  // Support for mozilla's syntax for specifying a corner
  @include experimental("border-radius-#{$vert}#{$horz}", $radius,
    -moz,
    not -webkit,
    not -o,
    not -ms,
    not -khtml,
    not official
  );
  @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
    not -moz,
    -webkit,
    -o,
    -ms,
    -khtml,
    official
  );

}

// Round top-left corner only

@mixin border-top-left-radius($radius: $default-border-radius) {
  @include border-corner-radius(top, left, $radius); }

// Round top-right corner only

@mixin border-top-right-radius($radius: $default-border-radius) {
  @include border-corner-radius(top, right, $radius); }

// Round bottom-left corner only

@mixin border-bottom-left-radius($radius: $default-border-radius) {
  @include border-corner-radius(bottom, left, $radius); }

// Round bottom-right corner only

@mixin border-bottom-right-radius($radius: $default-border-radius) {
  @include border-corner-radius(bottom, right, $radius); }

// Round both top corners by amount
@mixin border-top-radius($radius: $default-border-radius) {
  @include border-top-left-radius($radius);
  @include border-top-right-radius($radius); }

// Round both right corners by amount
@mixin border-right-radius($radius: $default-border-radius) {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius); }

// Round both bottom corners by amount
@mixin border-bottom-radius($radius: $default-border-radius) {
  @include border-bottom-left-radius($radius);
  @include border-bottom-right-radius($radius); }

// Round both left corners by amount
@mixin border-left-radius($radius: $default-border-radius) {
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius); }


/////////////////////
// compass/css3/_inline-block.scss
//

// Provides a cross-browser method to implement `display: inline-block;`

@mixin inline-block {
  @if $legacy-support-for-ie {
    & { *display: inline; }
  }
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  @if $legacy-support-for-ie {
    *vertical-align: auto;
  }
}


/////////////////////
// compass/css3/_opacity.scss
//

// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
//
//     @param $opacity
//         A number between 0 and 1, where 0 is transparent and 1 is opaque.

@mixin opacity($opacity) {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
    filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  }
  opacity: $opacity;
}

// Make an element completely transparent.
@mixin transparent { @include opacity(0); }

// Make an element completely opaque.
@mixin opaque { @include opacity(1); }


/////////////////////
// compass/css3/_box-shadow.scss
//

// The default color for box shadows
$default-box-shadow-color: #333333 !default;

// The default horizontal offset. Positive is to the right.
$default-box-shadow-h-offset: 0px !default;

// The default vertical offset. Positive is down.
$default-box-shadow-v-offset: 0px !default;

// The default blur length.
$default-box-shadow-blur: 5px !default;

// The default spread length.
$default-box-shadow-spread : false !default;

// The default shadow inset: inset or false (for standard shadow).
$default-box-shadow-inset : false !default;

// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box
// shadows are needed.
// Each shadow argument should adhere to the standard css3 syntax for the
// box-shadow property.
@mixin box-shadow(
  $shadow-1 : default,
  $shadow-2 : false,
  $shadow-3 : false,
  $shadow-4 : false,
  $shadow-5 : false,
  $shadow-6 : false,
  $shadow-7 : false,
  $shadow-8 : false,
  $shadow-9 : false,
  $shadow-10: false
) {
  @if $shadow-1 == default {
    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
  }
  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
  @include experimental(box-shadow, $shadow,
    -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.
@mixin single-box-shadow(
  $color  : $default-box-shadow-color,
  $hoff   : $default-box-shadow-h-offset,
  $voff   : $default-box-shadow-v-offset,
  $blur   : $default-box-shadow-blur,
  $spread : $default-box-shadow-spread,
  $inset  : $default-box-shadow-inset
) {
  @if not ($inset == true or $inset == false or $inset == inset) {
    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
  }

  @if $color == none {
    @include box-shadow(none);
  } @else {
    $full   : $hoff $voff;
    @if $blur   { $full: $full $blur;   }
    @if $spread { $full: $full $spread; }
    @if $color  { $full: $full $color;  }
    @if $inset  { $full: inset $full;   }
    @include box-shadow($full);
  }
}


/////////////////////
// compass/css3/_text-shadow.scss
//

// These defaults make the arguments optional for this mixin
// If you like, set different defaults in your project

$default-text-shadow-color:    #aaa !default;
$default-text-shadow-h-offset: 0px  !default;
$default-text-shadow-v-offset: 0px  !default;
$default-text-shadow-blur:     1px  !default;

// Provides cross-browser text shadows when one or more shadows are needed.
// Each shadow argument should adhere to the standard css3 syntax for the
// text-shadow property.
@mixin text-shadow(
  $shadow-1 : default,
  $shadow-2 : false,
  $shadow-3 : false,
  $shadow-4 : false,
  $shadow-5 : false,
  $shadow-6 : false,
  $shadow-7 : false,
  $shadow-8 : false,
  $shadow-9 : false,
  $shadow-10: false
) {
  @if $shadow-1 == default {
    $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
  }
  text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
                       $shadow-4, $shadow-5, $shadow-6,
                       $shadow-7, $shadow-8, $shadow-9, $shadow-10);
}

// Provides a single cross-browser CSS text shadow.
// Includes default arguments for color, horizontal offset, vertical offset, and blur
@mixin single-text-shadow(
  $color: $default-text-shadow-color,
  $hoff: $default-text-shadow-h-offset,
  $voff: $default-text-shadow-v-offset,
  $blur: $default-text-shadow-blur
) {
  // XXX I'm surprised we don't need experimental support for this property.
  @if $color == none {
    text-shadow: none;
  } @else {
    text-shadow: $color $hoff $voff $blur;
  }
}


/////////////////////
// compass/css3/_columns.scss
//

// Specify the number of columns
@mixin column-count($count) {
  @include experimental(column-count, $count,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Specify the gap between columns e.g. `20px`
@mixin column-gap($width) {
  @include experimental(column-gap, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Specify the width of columns e.g. `100px`
@mixin column-width($width) {
  @include experimental(column-width, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Specify the width of the rule between columns e.g. `1px`
@mixin column-rule-width($width) {
  @include experimental(rule-width, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Specify the style of the rule between columns e.g. `dotted`.
// This works like border-style.
@mixin column-rule-style($style) {
  @include experimental(rule-style, unquote($style),
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Specify the color of the rule between columns e.g. `blue`.
// This works like border-color.
@mixin column-rule-color($color) {
  @include experimental(rule-color, $color,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}

// Mixin encompassing all column rule properties
// For example:
//
//     @include column-rule(1px, solid, #c00)
//
// Or the values can be space separated:
//
//     @include column-rule(1px solid #c00)
@mixin column-rule($width, $style: false, $color: false) {
  $full : -compass-space-list(compact($width, $style, $color));
  @include experimental(column-rule, $full,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
}


/////////////////////
// compass/css3/_box-sizing.scss
//

// Change the box model for Mozilla, Webkit, IE8 and the future
//
// @param $bs
//   [ content-box | border-box ]

@mixin box-sizing($bs) {
  $bs: unquote($bs);
  @include experimental(box-sizing, $bs,
    -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}


/////////////////////
// compass/css3/_box.scss
//

// display:box; must be used for any of the other flexbox mixins to work properly
@mixin display-box {
  @include experimental-value(display, box,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// Default box orientation, assuming that the user wants something less block-like
$default-box-orient: horizontal !default;

// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
@mixin box-orient(
  $orientation: $default-box-orient
) {
  $orientation : unquote($orientation);
  @include experimental(box-orient, $orientation,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// Default box-align
$default-box-align: stretch !default;

// Box align [ start | end | center | baseline | stretch ]
@mixin box-align(
  $alignment: $default-box-align
) {
  $alignment : unquote($alignment);
  @include experimental(box-align, $alignment,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// Default box flex
$default-box-flex: 0 !default;

// mixin which takes an int argument for box flex. Apply this to the children inside the box.
//
// For example: "div.display-box > div.child-box" would get the box flex mixin.
@mixin box-flex(
  $flex: $default-box-flex
) {
  @include experimental(box-flex, $flex,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// Default flex group
$default-box-flex-group: 1 !default;

// mixin which takes an int argument for flexible grouping
@mixin box-flex-group(
  $group: $default-box-flex-group
) {
  @include experimental(box-flex-group, $group,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// default for ordinal group
$default-box-ordinal-group: 1 !default;

// mixin which takes an int argument for ordinal grouping and rearranging the order
@mixin box-ordinal-group(
  $group: $default-ordinal-flex-group
) {
  @include experimental(box-ordinal-group, $group,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// Box direction default value
$default-box-direction: normal !default;

// mixin for box-direction [ normal | reverse | inherit ]
@mixin box-direction(
  $direction: $default-box-direction
) {
  $direction: unquote($direction);
  @include experimental(box-direction, $direction,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// default for box lines
$default-box-lines: single !default;

// mixin for box lines [ single | multiple ]
@mixin box-lines(
  $lines: $default-box-lines
) {
  $lines: unquote($lines);
  @include experimental(box-lines, $lines,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}

// default for box pack
$default-box-pack: start !default;

// mixin for box pack [ start | end | center | justify ]
@mixin box-pack(
  $pack: $default-box-pack
) {
  $pack: unquote($pack);
  @include experimental(box-pack, $pack,
    -moz, -webkit, not -o, -ms, not -khtml, official
  );
}


/////////////////////
// compass/css3/_gradient.scss
//

// The linear gradient mixin works best across browsers if you use percentage-based color stops.
//
// Examples:
//
//     // This yields a linear gradient spanning from top to bottom
//     +linear-gradient(color-stops(white, black))
//
//     // This yields a linear gradient spanning from bottom to top
//     +linear-gradient(color-stops(white, black), bottom)
//
//     // This yields a linear gradient spanning from left to right
//     +linear-gradient(color-stops(white, black), left)
//
//     // This yields a linear gradient starting at white passing
//     // thru blue at 33% down and then to black
//     +linear-gradient(color-stops(white, blue 33%, black))
//
//     // This yields a linear gradient starting at white passing
//     // thru blue at 33% down and then to black at 67% until the end
//     +linear-gradient(color-stops(white, blue 33%, black 67%))
//
//     // This yields a background image on top of the gradient; requires an image
//     // with an alpha-layer.
//     +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
// - Opera
//
// @deprecated Use the linear-gradient() function in conjunction with a
//             property mixin like `background-image`.
@mixin linear-gradient($color-stops, $start: false, $image: false) {
  @if $image {
    @if $start {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
    } @else {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
    }
  } @else {
    @if $start {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))";
    } @else {
      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))";
    }
  }
  @if not $start { $start: top; }
  @include background-image($image, linear-gradient($start, $color-stops));
}

// Because of webkit's limitations, the radial gradient mixin works best if you use
// pixel-based color stops.
//
// Examples:
//
//     // Defaults to a centered, 100px radius gradient
//     +radial-gradient(color-stops(#c00, #00c))
//
//     // 100px radius gradient in the top left corner
//     +radial-gradient(color-stops(#c00, #00c), top left)
//
//     // Three colors, ending at 50px and passing thru #fff at 25px
//     +radial-gradient(color-stops(#c00, #fff, #00c 50px))
//
//     // A background image on top of a 100px radius gradient; requires an image
//     // with an alpha-layer.
//     +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
// - Opera
//
// @deprecated Use the radial-gradient() function in conjunction with a
//             property mixin like `background-image`.
@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
  @if $image {
    @if $center-position {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
    } @else {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
    }
  } @else {
    @if $center-position {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))";
    } @else {
      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))";
    }
  }
  @if not $center-position { $center-position: center center; }
  @include background-image($image, radial-gradient($center-position, $color-stops));
}


/////////////////////
// compass/css3/_background-clip.scss
//

// The default value is `padding-box` -- the box model used by modern browsers.
//
// If you wish to do so, you can override the default constant with `border-box`
//
// To override to the default border-box model, use this code:
//     $default-background-clip: border-box

$default-background-clip: padding-box !default;

// Clip the background (image and color) at the edge of the padding or border.
//
// Legal Values:
//
//   * padding-box
//   * border-box
//   * text

@mixin background-clip($clip: $default-background-clip) {
  // webkit and mozilla use the deprecated short [border | padding]
  $clip: unquote($clip);
  $deprecated: $clip;
  @if $clip == padding-box { $deprecated: padding; }
  @if $clip == border-box { $deprecated: border; }
  // Support for webkit and mozilla's use of the deprecated short form
  @include experimental(background-clip, $deprecated,
    -moz,
    -webkit,
    not -o,
    not -ms,
    not -khtml,
    not official
  );
  @include experimental(background-clip, $clip,
    not -moz,
    not -webkit,
    not -o,
    not -ms,
    -khtml,
    official
  );
}


/////////////////////
// compass/css3/_background-origin.scss
//

$default-background-origin: content-box !default;

// Position the background off the edge of the padding, border or content
//
// * Possible values:
//   * `padding-box`
//   * `border-box`
//   * `content-box`
// * browser defaults to `padding-box`
// * mixin defaults to `content-box`


@mixin background-origin($origin: $default-background-origin) {
  $origin: unquote($origin);
  // webkit and mozilla use the deprecated short [border | padding | content]
  $deprecated: $origin;
  @if $origin == padding-box { $deprecated: padding; }
  @if $origin == border-box  { $deprecated: border;  }
  @if $origin == content-box { $deprecated: content; }

  // Support for webkit and mozilla's use of the deprecated short form
  @include experimental(background-origin, $deprecated,
    -moz,
    -webkit,
    not -o,
    not -ms,
    not -khtml,
    not official
  );
  @include experimental(background-origin, $origin,
    not -moz,
    not -webkit,
    -o,
    -ms,
    -khtml,
    official
  );
}


/////////////////////
// compass/css3/_background-size.scss
//

//  override to change the default
$default-background-size: 100% auto !default;

// Set the size of background images using px, width and height, or percentages.
// Currently supported in: Opera, Gecko, Webkit.
//
// * percentages are relative to the background-origin (default = padding-box)
// * mixin defaults to: `$default-background-size`
@mixin background-size(
  $size-1: $default-background-size,
  $size-2: false,
  $size-3: false,
  $size-4: false,
  $size-5: false,
  $size-6: false,
  $size-7: false,
  $size-8: false,
  $size-9: false,
  $size-10: false
) {
  $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
  $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
  @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
}


/////////////////////
// compass/css3/_font-face.scss
//

// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
//
// * $name is required, arbitrary, and what you will use in font stacks.
// * $font-files is required using font-files('relative/location', 'format').
//   for best results use this order: woff, opentype/truetype, svg
// * $eot is required by IE, and is a relative location of the eot file.
// * $weight shows if the font is bold, defaults to normal
// * $style defaults to normal, might be also italic
// * For android 2.2 Compatiblity, please ensure that your web page has
//   a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided
//
// If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator)
//

// In order to refer to a specific style of the font in your stylesheets as
// e.g. "font-style: italic;",  you may add a couple of @font-face includes
// containing the respective font files for each style and specying
// respective the $style parameter.

// Order of the includes matters, and it is: normal, bold, italic, bold+italic.

@mixin font-face(
  $name,
  $font-files,
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files;
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}


/////////////////////
// compass/css3/_transform.scss
//

// @doc off
// Note ----------------------------------------------------------------------
// Safari is the only browser that currently supports 3D transforms.
// Because of that it can be important to control whether a given 2D transform
// uses the full range of experimental browser prefixes, or only the 3D list.
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
// to switch between the two support lists. The toggle defaults to 'false' (2D),
// and also accepts 'true' (3D). Currently the lists are as follows:
// 2D: Mozilla, Webkit, Opera, Official
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**

// Available Transforms ------------------------------------------------------
// - Scale (2d and 3d)
// - Rotate (2d and 3d)
// - Translate (2d and 3d)
// - Skew (2d only)

// Transform Parameters ------------------------------------------------------
// - Transform Origin (2d and 3d)
// - Perspective (3d)
// - Perspective Origin (3d)
// - Transform Style (3d)
// - Backface Visibility (3d)

// Mixins --------------------------------------------------------------------
// transform-origin
//  - shortcuts:  transform-origin2d, transform-origin3d
//  - helpers:    apply-origin
// transform
//  - shortcuts:  transform2d, transform3d
//  - helpers:    simple-transform, create-transform
// perspective
//  - helpers:    perspective-origin
// transform-style
// backface-visibility
// scale
//  - shortcuts:  scaleX, scaleY, scaleZ, scale3d
// rotate
//  - shortcuts:  rotateX, rotateY, rotate3d
// translate
//  - shortcuts:  translateX, translateY, translateZ, translate3d
// skew
//  - shortcuts:  skewX, skewY

// Defaults ------------------------------------------------------------------
// @doc on

// The default x-origin for transforms
$default-origin-x    : 50%                   !default;
// The default y-origin for transforms
$default-origin-y    : 50%                   !default;
// The default z-origin for transforms
$default-origin-z    : 50%                   !default;


// The default x-multiplier for scaling
$default-scale-x     : 1.25                  !default;
// The default y-multiplier for scaling
$default-scale-y     : $default-scale-x      !default;
// The default z-multiplier for scaling
$default-scale-z     : $default-scale-x      !default;


// The default angle for rotations
$default-rotate      : 45deg                 !default;


// The default x-vector for the axis of 3d rotations
$default-vector-x    : 1                     !default;
// The default y-vector for the axis of 3d rotations
$default-vector-y    : 1                     !default;
// The default z-vector for the axis of 3d rotations
$default-vector-z    : 1                     !default;


// The default x-length for translations
$default-translate-x : 1em                   !default;
// The default y-length for translations
$default-translate-y : $default-translate-x  !default;
// The default z-length for translations
$default-translate-z : $default-translate-x  !default;


// The default x-angle for skewing
$default-skew-x      : 5deg                  !default;
// The default y-angle for skewing
$default-skew-y      : 5deg                  !default;


// **Transform-origin**
// Transform-origin sent as a complete string
//
//     @include apply-origin( origin [, 3D-only ] )
//
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
// in percentages, absolute (px, cm, in, em etc..) or relative
// (left, top, right, bottom, center) units
//
// @param only3d Set this to true to only apply this
// mixin where browsers have 3D support.
@mixin apply-origin($origin, $only3d) {
  $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
  @if $only3d {
    @include experimental(transform-origin, $origin,
      not -moz, -webkit, not -o, not -ms, not -khtml, official
    );
  } @else {
    @include experimental(transform-origin, $origin,
      -moz, -webkit, -o, -ms, not -khtml, official
    );
  }
}

// Transform-origin sent as individual arguments:
//
//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
//
// where the 3 'origin-' arguments represent x/y/z coordinates.
//
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
@mixin transform-origin(
  $origin-x: $default-origin-x,
  $origin-y: $default-origin-y,
  $origin-z: false,
  $only3d:   if($origin-z, true, false)
) {
  $origin: unquote('');
  @if $origin-x or $origin-y or $origin-z {
    @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
    @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
    @if $origin-z { $origin: $origin $origin-z; }
    @include apply-origin($origin, $only3d);
  }
}


// Transform sent as a complete string:
//
//     @include transform( transforms [, 3D-only ] )
//
// where 'transforms' is a space separated list of all the transforms to be applied
@mixin transform(
  $transform,
  $only3d: false
) {
  @if $only3d {
    @include experimental(transform, $transform,
      not -moz, -webkit, not -o, not -ms, not -khtml, official
    );
  } @else {
    @include experimental(transform, $transform,
      -moz, -webkit, -o, -ms, not -khtml, official
    );
  }
}

// Shortcut to target all browsers with 2D transform support
@mixin transform2d($trans) {
  @include transform($trans, false);
}

// Shortcut to target only browsers with 3D transform support
@mixin transform3d($trans) {
  @include transform($trans, true);
}

// @doc off
// 3D Parameters -------------------------------------------------------------
// @doc on

// Set the perspective of 3D transforms on the children of an element:
//
//      @include perspective( perspective )
//
// where 'perspective' is a uniless number representing the depth of the z-axis
// the higher the perspective, the more exagerated the foreshortening.
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
@mixin perspective($p) {
  @include experimental(perspective, $p,
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// Set the origin position for the perspective
//
//      @include perspective-origin(origin-x [origin-y])
//
// where the two arguments represent x/y coordinates
@mixin perspective-origin($origin: 50%) {
  @include experimental(perspective-origin, $origin,
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// Determine whether a 3D objects children also live in the given 3D space
//
//      @include transform-style( [ style ] )
//
// where `style` can be either `flat` or `preserve-3d`
// browsers default to `flat`, mixin defaults to `preserve-3d`
@mixin transform-style($style: preserve-3d) {
  @include experimental(transform-style, $style,
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// Determine the visibility of an element when it's back is turned
//
//     @include backface-visibility( [ visibility ] )
//
// where `visibility` can be either `visible` or `hidden`
// browsers default to visible, mixin defaults to hidden
@mixin backface-visibility($visibility: hidden) {
  @include experimental(backface-visibility, $visibility,
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// @doc off
// Transform Partials --------------------------------------------------------
// These work well on their own, but they don't add to each other, they override.
// Use along with transform parameter mixins to adjust origin, perspective and style
// ---------------------------------------------------------------------------


// Scale ---------------------------------------------------------------------
// @doc on

// Scale an object along the x and y axis:
//
//      @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
//
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
// and perspective, which works the same as the stand-alone perspective property/mixin
// but applies to the individual element (multiplied with any parent perspective)
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scale(
  $scale-x:     $default-scale-x,
  $scale-y:     $scale-x,
  $perspective: false,
  $only3d:      false
) {
  $trans: scale($scale-x, $scale-y);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Scale an object along the x axis
// @include scaleX( [ scale-x, perspective, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleX(
  $scale:       $default-scale-x,
  $perspective: false,
  $only3d:      false
) {
  $trans: scaleX($scale);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Scale an object along the y axis
// @include scaleY( [ scale-y, perspective, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleY(
  $scale:       $default-scale-y,
  $perspective: false,
  $only3d:      false
) {
  $trans: scaleY($scale);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Scale an object along the z axis
// @include scaleZ( [ scale-z, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scaleZ(
  $scale: $default-scale-z,
  $perspective: false
) {
  $trans: scaleZ($scale);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// Scale and object along all three axis
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin scale3d(
  $scale-x:     $default-scale-x,
  $scale-y:     $default-scale-y,
  $scale-z:     $default-scale-z,
  $perspective: false
) {
  $trans: scale3d($scale-x, $scale-y, $scale-z);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// @doc off
// Rotate --------------------------------------------------------------------
// @doc on

// Rotate an object around the z axis  (2D)
// @include rotate( [ rotation, perspective, 3D-only ] )
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotate(
  $rotate:      $default-rotate,
  $perspective: false,
  $only3d:      false
) {
  $trans: rotate($rotate);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// A longcut for 'rotate' in case you forget that 'z' is implied
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotateZ(
  $rotate:      $default-rotate,
  $perspective: false,
  $only3d:      false
) {
  @include rotate($rotate, $perspective, $only3d);
}

// Rotate an object around the x axis (3D)
// @include rotateX( [ rotation, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotateX(
  $rotate: $default-rotate,
  $perspective: false
) {
  $trans: rotateX($rotate);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// Rotate an object around the y axis (3D)
// @include rotate( [ rotation, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotateY(
  $rotate: $default-rotate,
  $perspective: false
) {
  $trans: rotateY($rotate);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// Rotate an object around an arbitrary axis (3D)
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
// where the 'vector-' arguments accept unitless numbers
// these numbers are not important on their own, but in relation to one another
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin rotate3d(
  $vector-x: $default-vector-x,
  $vector-y: $default-vector-y,
  $vector-z: $default-vector-z,
  $rotate: $default-rotate,
  $perspective: false
) {
  $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// @doc off
// Translate -----------------------------------------------------------------
// @doc on

// Move an object along the x or y axis (2D)
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translate(
  $translate-x: $default-translate-x,
  $translate-y: $default-translate-y,
  $perspective: false,
  $only3d:      false
) {
  $trans: translate($translate-x, $translate-y);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Move an object along the x axis (2D)
// @include translate( [ translate-x, perspective, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateX(
  $trans-x:     $default-translate-x,
  $perspective: false,
  $only3d:      false
) {
  $trans: translateX($trans-x);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Move an object along the y axis (2D)
// @include translate( [ translate-y, perspective, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateY(
  $trans-y:     $default-translate-y,
  $perspective: false,
  $only3d:      false
) {
  $trans: translateY($trans-y);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform($trans, $only3d);
}

// Move an object along the z axis (3D)
// @include translate( [ translate-z, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translateZ(
  $trans-z:     $default-translate-z,
  $perspective: false
) {
  $trans: translateZ($trans-z);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// Move an object along the x, y and z axis (3D)
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin translate3d(
  $translate-x: $default-translate-x,
  $translate-y: $default-translate-y,
  $translate-z: $default-translate-z,
  $perspective: false
) {
  $trans: translate3d($translate-x, $translate-y, $translate-z);
  @if $perspective { $trans: perspective($perspective) $trans; }
  @include transform3d($trans);
}

// @doc off
// Skew ----------------------------------------------------------------------
// @doc on

// Skew an element:
//
//     @include skew( [ skew-x, skew-y, 3D-only ] )
//
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin skew(
  $skew-x: $default-skew-x,
  $skew-y: $default-skew-y,
  $only3d: false
) {
  $trans: skew($skew-x, $skew-y);
  @include transform($trans, $only3d);
}

// Skew an element along the x axiz
//
//     @include skew( [ skew-x, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin skewX(
  $skew-x: $default-skew-x,
  $only3d: false
) {
  $trans: skewX($skew-x);
  @include transform($trans, $only3d);
}

// Skew an element along the y axis
//
//     @include skew( [ skew-y, 3D-only ] )
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin skewY(
  $skew-y: $default-skew-y,
  $only3d: false
) {
  $trans: skewY($skew-y);
  @include transform($trans, $only3d);
}


// Full transform mixins
// For settings any combination of transforms as arguments
// These are complex and not highly recommended for daily use
// They are mainly here for backwards-compatability purposes
//
// * they include origin adjustments
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
//
// **Note** This mixin cannot be combined with other transform mixins.
@mixin create-transform(
  $perspective: false,
  $scale-x:     false,
  $scale-y:     false,
  $scale-z:     false,
  $rotate-x:    false,
  $rotate-y:    false,
  $rotate-z:    false,
  $rotate3d:    false,
  $trans-x:     false,
  $trans-y:     false,
  $trans-z:     false,
  $skew-x:      false,
  $skew-y:      false,
  $origin-x:    false,
  $origin-y:    false,
  $origin-z:    false,
  $only3d:      false
) {
  $trans: unquote("");

  // perspective
  @if $perspective { $trans: perspective($perspective) ; }

  // scale
  @if $scale-x and $scale-y {
    @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
    @else { $trans: $trans scale($scale-x, $scale-y); }
  } @else {
    @if $scale-x { $trans: $trans scaleX($scale-x); }
    @if $scale-y { $trans: $trans scaleY($scale-y); }
    @if $scale-z { $trans: $trans scaleZ($scale-z); }
  }

  // rotate
  @if $rotate-x { $trans: $trans rotateX($rotate-x); }
  @if $rotate-y { $trans: $trans rotateY($rotate-y); }
  @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
  @if $rotate3d { $trans: $trans rotate3d($rotate3d); }

  // translate
  @if $trans-x and $trans-y {
    @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
    @else { $trans: $trans translate($trans-x, $trans-y); }
  } @else {
    @if $trans-x { $trans: $trans translateX($trans-x); }
    @if $trans-y { $trans: $trans translateY($trans-y); }
    @if $trans-z { $trans: $trans translateZ($trans-z); }
  }

  // skew
  @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
  @else {
    @if $skew-x { $trans: $trans skewX($skew-x); }
    @if $skew-y { $trans: $trans skewY($skew-y); }
  }

  // apply it!
  @include transform($trans, $only3d);
  @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
}


// A simplified set of options
// backwards-compatible with the previous version of the 'transform' mixin
@mixin simple-transform(
  $scale:    false,
  $rotate:   false,
  $trans-x:  false,
  $trans-y:  false,
  $skew-x:   false,
  $skew-y:   false,
  $origin-x: false,
  $origin-y: false
) {
  @include create-transform(
    false,
    $scale, $scale, false,
    false, false, $rotate, false,
    $trans-x, $trans-y, false,
    $skew-x, $skew-y,
    $origin-x, $origin-y, false,
    false
  );
}


/////////////////////
// compass/css3/_transition.scss
//

// CSS Transitions
// Currently only works in Webkit.
//
// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
// * We'll be prepared.
//
// Including this submodule sets following defaults for the mixins:
//
//     $default-transition-property : all
//     $default-transition-duration : 1s
//     $default-transition-function : false
//     $default-transition-delay    : false
//
// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).

$default-transition-property: all !default;

$default-transition-duration: 1s !default;

$default-transition-function: false !default;

$default-transition-delay: false !default;

// One or more properties to transition
//
// * for multiple, use a comma-delimited list
// * also accepts "all" or "none"

@mixin transition-property($properties: $default-transition-property) {
  @include experimental(transition-property, unquote($properties),
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}

// One or more durations in seconds
//
// * for multiple, use a comma-delimited list
// * these durations will affect the properties in the same list position

@mixin transition-duration($duration: $default-transition-duration) {
  @if type-of($duration) == string { $duration: unquote($duration); }
  @include experimental(transition-duration, $duration,
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}

// One or more timing functions
//
// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
// * For multiple, use a comma-delimited list
// * These functions will effect the properties in the same list position

@mixin transition-timing-function($function: $default-transition-function) {
  @include experimental(transition-timing-function, unquote($function),
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}

// One or more transition-delays in seconds
//
// * for multiple, use a comma-delimited list
// * these delays will effect the properties in the same list position

@mixin transition-delay($delay: $default-transition-delay) {
  @if type-of($delay) == string { $delay: unquote($delay); }
  @include experimental(transition-delay, $delay,
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}

// Transition all-in-one shorthand

@mixin single-transition(
  $property: $default-transition-property,
  $duration: $default-transition-duration,
  $function: $default-transition-function,
  $delay: $default-transition-delay
) {
  @if $property and $duration and $function {
    // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
    @if $delay {
      -webkit-transition: $property $duration $function;
      -webkit-transition-delay: $delay;
      @include experimental(transition, $property $duration $function $delay,
        -moz,
        not -webkit,
        -o,
        -ms,
        not -khtml,
        official
      );
    }
    @else {
      @include experimental(transition, $property $duration $function,
        -moz,
        -webkit,
        -o,
        -ms,
        not -khtml,
        official
      );
    }
  }
  @else {
    @include transition-property($property);
    @include transition-duration($duration);
    @if $function { @include transition-timing-function($function); }
    @if $delay { @include transition-delay($delay); }
  }
}

@mixin transition(
  $transition-1 : default,
  $transition-2 : false,
  $transition-3 : false,
  $transition-4 : false,
  $transition-5 : false,
  $transition-6 : false,
  $transition-7 : false,
  $transition-8 : false,
  $transition-9 : false,
  $transition-10: false
) {
  @if $transition-1 == default {
    $transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
  }
  $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
  @include experimental(transition, $transition,
    -moz, -webkit, -o, -ms, not -khtml, official
  );
}


/////////////////////
// compass/css3/_appearance.scss
//

// Change the appearance for Mozilla, Webkit and the future
//
// @param $ap
//   [ none | normal | icon | window | button | menu | field ]

@mixin appearance($ap) {
  $ap: unquote($ap);
  @include experimental(appearance, $ap,
    -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}