// Welcome! 
//** 3D CSS Ribbon **//

// Imports ------------------------------------------------------------------
@import "compass/reset";
@import "compass/css3/text-shadow";

//First, remember import the extension!
@import "3d-ribbon";


/* Ribbons --------------------------------------------------------------*/
// Based on the 3d-ribbon-examples.html template provided:

#ribbon-example-1{
  //One ribbon with the default options (only need the width of the ribbon content, in px)
  @include ribbon($front-width: 400px);
}

#ribbon-example-2{
  //You can configure the sides of the ribbon (left / right) and position (top / bottom). Options availables: left-top, left-bottom, right-top, right-bottom
  @include ribbon($front-width: 450px, $sides: left-top right-bottom); //Asimetric ribbon!
}

#ribbon-example-3{
  //You can configure the height (in px) & color of the ribbon...
  @include ribbon($front-width: 550px, $ribbon-height: 40px, $front-color: #8C46C3);
}

#ribbon-example-4{
  //You can also configure the color of the edges and back sides of the ribbon...
  @include ribbon($front-width: 600px, $front-color: #8C46C3, $edges-color: darken(#9F4BBA, 10%), $back-color: #B952AE);
}

#ribbon-example-5{
  //Other options like the width of the back part or the overlap width/height:
  @include ribbon($front-width: 650px, $back-width: 20px, $overlap-width: 25px, $overlap-height: 10px);
}

#ribbon-example-6{
  //You can hide the back part...
  @include ribbon($front-width: 650px, $back-width: 0);
}

#ribbon-example-7{
  //Or set some border-radius...
  @include ribbon($front-width: 700px, $border-radius: 5px);
}

#ribbon-example-8{
  //All options in one ribbon!
  @include ribbon(
          $front-width: 750px,
          $sides: left-bottom,
          $ribbon-height: 40px,
          $front-color: #80B5AD, 
          $edges-color: darken(#8ABD9A, 30%), 
          $back-color: #8DBF96,
          $back-width: 30px, 
          $overlap-width: 35px, 
          $overlap-height: 15px,
          $border-radius: 7px);
}


//One more thing...
//Support for CSS3 PIE (AKA: border-radius, box-shadow and others CSS3 styles for IE8/7/6)
//More info: http://compass-style.org/reference/compass/css3/pie/
//First, remember set $pie-behavior with the path of the PIE.htc and deliver the file with the mime-type "Content-Type: text/x-component" (more info: http://css3pie.com/documentation/known-issues/#content-type).
//Then just set $include-pie : true in the @include:

//#ribbon-example{
  //@include ribbon($front-width: 400px, $include-pie: true);
//}




/* Other styles for the demo --------------------------------------------------------------*/

body{
  background: #F8F8F8;
}

#content{
  margin: 20px auto;
  text-align: center;
  width: 750px;
  color: #FFF;
  font-family: sans-serif;
  
  h2{
    font: {
      size: 28px;
    }
    line-height: 40px;
  }
  
}

#ribbon-example-1, #ribbon-example-2, #ribbon-example-3, #ribbon-example-4, #ribbon-example-5, #ribbon-example-6, #ribbon-example-7, #ribbon-example-8, #ribbon-example-9{
  margin: 80px 0;
  
  .ribbon-wrapper{
    margin: 0 auto;
  }
  
}

//Some nice example
#ribbon-example-9{
  @include ribbon(
          $front-width: 300px,
          $front-color: #CB261B,
          $border-radius: 10px);
          
  h2{
    font: {
      style: italyc;
      family: Georgia, Verdana,sans-serif;
    }
    @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);
  }
}

#example-9-content{
  padding: 80px 20px 20px 20px;
  width: 260px; //Note: 260px + 20px (padding-right) + 20px (padding-left): 300px (the same width of the ribbon :D)
  position: relative;
  top: -80px;
  background: #E7E7E7;
  color: #000;
  line-height: 1.2;
  @include border-radius(15px);
  @include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
  margin: 0 auto;
}