// this file demonstrates how to use the CSS PIE extension for
// legacy versions of Internet Explorer. In many cases, PIE will allow
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
@import "compass/css3";
@import "compass/css3/pie";

$pie-behavior: url("/stylesheets/PIE.htc");

// It is suggested that you use Sass's @extend directive to apply the PIE
// behavior to your elements. Setting this variable will tell the `pie` mixin
// to extend. Or you can just extend the base class yourself.
$pie-base-class: pie-element;

// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
.pie-element {
  // relative is the default, so passing relative
  // is redundant, but we do it here for clarity.
  @include pie-element(relative);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 16px;
    background: #EEE;
}

.section {
    border: 1px solid #CCC;
    padding: 1em 2em 2em;
    margin: 3em;
    background: #FFF;
}

.section h2 {
    border: 1px solid #CCC;
    position: relative;
    left: -3em;
    top: -2em;
    background: #FFF;
    font-size: 1em;
    padding: .25em 1em;
    margin: 0;
}

.section code {
    display: block;
    white-space: pre;
    margin-left: 250px;
    min-height: 100px;
    color: #999;
    overflow: auto;
}
.section code strong {
    color: #000;
}

.test {
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 2px solid;
    background: #FFF;
    float: left;
    @include pie;
}

#test1 {
    border-color: #c00;
    @include border-radius(1em);
}

#test2 {
    border-color: #090;
    @include border-radius(1em);
    @include box-shadow(#999 0 .25em .5em);
}

#test3 {
    border-color: #00c;
    @include border-radius(1em);
    @include box-shadow(#999 0 .25em .5em);
    @include background(linear-gradient(#9CF, #03C));
}

#test4 {
    border-color: #F99;
    @include border-radius(1em);
    @include box-shadow(#999 0 .25em .5em);
    background: #FFF image-url("icon-ie.png") no-repeat 50% 0;
    @include background(
      image-url("icon-ie.png") no-repeat 50% 0,
      image-url("icon-firefox.png") no-repeat 0 0,
      image-url("icon-chrome.png") no-repeat 100% 0,
      image-url("icon-safari.png") no-repeat 0 100%,
      image-url("icon-opera.png") no-repeat 100% 100% #FFF
    );
}

#test5 {
    @include border-image(image-url("border2.png") 15 stretch);
    border: 15px solid transparent;
    width: 180px;
}