EDIT

// this file is based on the pie.scss file which 

// 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.

// =================== CSS3 PIE =================== //

//

// Note: Each element that has PIE enabled on it will add about 10ms to your page load.

@import "compass/css3/pie";

@import "compass/css3";

// Set this to wherever you end up putting your behavior file.

//

// **Note:** this file must be served as a root-relative resource or

// else IE will interpret it as relative to the current webpage

// instead of the stylesheet.

//

// **Also Note:** this file must be delivered with a mime-type of:

//

//    text/x-component

// 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 it. 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);

}

// use z-indexing. In this case

// an ancestor element before or having the first

// opaque background should be marked as a pie-container

// which gives it a z-index of 0 (actually any z-index

// can be provided to the pie-container mixin).

// And then the pie element itself should be given

// a z-index of -1.

.pie-container {

  @include pie-container;

}

.z-pie-element {

  // this will get a z-index of 0, you can pass a z-index value if you want

  @include pie-element(z-index);

}

// =================== IE legacy styles fixes =================== //

$gutter-width: 40px; // needds to be set to the same value as defined in responsive-sidebars.scss

// all browsers < IE 9 

.lt-ie9 {

  #page {

    @include pie(z-pie-element);

    @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.

  }

  #header {

    /* 

     * reset right padding to zero and use margin-right instead,

     * this avoids the need for background-clip: content-box

     * which is not suppoorted in IE < 9

     */

    padding-right: 0;

    margin-right: $gutter-width / 2;

  }