[
  {
    "path": ".gitignore",
    "content": ".sass-cache\n"
  },
  {
    "path": ".rvmrc",
    "content": "rvm ruby-1.9.2@sass-recipes --create\n"
  },
  {
    "path": "Gemfile",
    "content": "source \"http://rubygems.org\"\n\ngem \"rake\"\ngem \"haml\"\ngem \"compass\"\ngem \"git\"\n"
  },
  {
    "path": "README.markdown",
    "content": "This project is a collection of Sass snippets that you can use or learn from.\n\nAll contributions are entered into the **public domain** and the authors relinquish **all** copyrights.\n\n## Open to All\nAnyone who forks this project and submits a patch and pull request will be given commit access after the first patch is accepted.\n\n## Have Fun\n\nThink of this as a wiki that you can check out.\n\nGenerally useful recipes might be added to compass.\n\n## Building\nYou can (re-)build the recipes by running:\n\n  bundle install\n  bundle exec rake \n\n## Adding Recipes to the Live Demo\nAfter committing and pushing your changes to the master branch,\nall html and css files will be transferred to/updated on the\ngithub pages branch when you run:\n\n    bundle exec rake pages\n\nAfterwards, you'll be on the `gh-pages` branch where you can edit the index.html file to add links, etc and then push the update."
  },
  {
    "path": "Rakefile",
    "content": "task :default do\n  sh \"compass compile\"\n  FileList.new('**/*.haml').each do |file|\n    puts \"Compiling #{file} to html\"\n    sh \"haml #{file} #{file.sub(/haml/,'html')}\"\n  end\nend\n\ntask :pages do\n  require 'git'\n  require 'fileutils'\n  repo = Git.open('.')\n  FileUtils.rm_rf \"tmp\"\n  FileUtils.mkdir(\"tmp\")\n  (FileList.new('**/*.html')+FileList.new('**/*.css')).each do |file|\n    FileUtils.mkdir_p(File.dirname(\"tmp/#{file}\"))\n    FileUtils.cp(file, \"tmp/#{file}\")\n  end\n  repo.branch(\"gh-pages\").checkout\n  FileUtils.rm_rf \"recipes/*\"\n  (FileList.new('tmp/**/*.html')+FileList.new('tmp/**/*.css')).each do |file|\n    FileUtils.mkdir_p(File.dirname(\"recipes/#{file[4..-1]}\"))\n    FileUtils.cp(file, \"recipes/#{file[4..-1]}\")\n  end\n  FileUtils.rm_rf(\"tmp\")\n  Dir[\"recipes/**/*\"].each {|f| repo.add(f) }\n  repo.status.deleted.each {|f, s| repo.remove(f)}\n  message = ENV[\"MESSAGE\"] || \"Updated at #{Time.now.utc}\"\n  repo.commit(message)\nend\n"
  },
  {
    "path": "config.rb",
    "content": "css_dir = \".\"\nsass_dir = \".\"\n"
  },
  {
    "path": "css-arrow/_css-arrow.sass",
    "content": "// Based on [Nicolas Gallagher's Pure CSS speech bubbles][1]\n// I've only implemented a simple triangle with border that you can mix in and position.\n// Definitely can do with some optimization.\n// Works only on elements with relative positioning and overflow not hidden.\n//\n// [1]: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html\n//\n//\n\n=arrow($direction, $bg-color, $border-color, $border-width, $top, $left, $width: 10px)\n  position: relative\n  &:before\n    content: \"\\00a0\"\n    // reduce the damage in FF3.0:\n    display: block\n    position: absolute\n    width: 0\n    height: 0\n    top: $top\n    left: $left\n    bottom: auto\n    border-width: floor($width / 2)\n    border-style: solid\n    @if $direction == \"south\"\n      border-color: $border-color transparent transparent transparent\n    @if $direction == \"north\"\n      border-color: transparent transparent $border-color transparent\n    @if $direction == \"east\"\n      border-color: transparent transparent transparent $border-color\n    @if $direction == \"west\"\n      border-color: transparent $border-color transparent transparent\n  // creates the smaller  triangle\n  &:after\n    content: \"\\00a0\"\n    display: block\n    position: absolute\n    width: 0\n    height: 0\n    @if $direction == \"south\"\n      top: $top - $border-width\n    @else if $direction == \"north\"\n      top: $top + $border-width\n    @else\n      top: $top\n    @if $direction == \"east\"\n      left: $left - $border-width\n    @else if $direction == \"west\"\n      left: $left + $border-width\n    @else\n      left: $left\n    bottom: auto\n    border-width: floor($width / 2)\n    border-style: solid\n    @if $direction == \"south\"\n      border-color: $bg-color transparent transparent transparent\n    @if $direction == \"north\"\n      border-color: transparent transparent $bg-color transparent\n    @if $direction == \"east\"\n      border-color: transparent transparent transparent $bg-color\n    @if $direction == \"west\"\n      border-color: transparent $bg-color transparent transparent\n"
  },
  {
    "path": "css-arrow/css-arrow-example.css",
    "content": "/* line 3, css-arrow-example.sass */\nbody {\n  font-family: \"Helvetica Neue\", Arial, san-serif;\n  font-size: 12px;\n}\n\n/* line 7, css-arrow-example.sass */\n.arrow {\n  border: 1px solid #456eb9;\n  background: #e7eff4;\n  height: 100px;\n  width: 500px;\n  padding: 10px;\n  margin-bottom: 10px;\n}\n/* line 18, css-arrow-example.sass */\n.arrow.east {\n  margin-right: 50px;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\n.arrow.east:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: 520px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent transparent #456eb9;\n}\n/* line 33, _css-arrow.sass */\n.arrow.east:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: 519px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent transparent #e7eff4;\n}\n/* line 21, css-arrow-example.sass */\n.arrow.south {\n  margin-bottom: 50px;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\n.arrow.south:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 120px;\n  left: 0;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: #456eb9 transparent transparent transparent;\n}\n/* line 33, _css-arrow.sass */\n.arrow.south:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 119px;\n  left: 0;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: #e7eff4 transparent transparent transparent;\n}\n/* line 24, css-arrow-example.sass */\n.arrow.north {\n  margin-top: -15px;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\n.arrow.north:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -50px;\n  left: 400px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent #456eb9 transparent;\n}\n/* line 33, _css-arrow.sass */\n.arrow.north:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -49px;\n  left: 400px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent #e7eff4 transparent;\n}\n/* line 27, css-arrow-example.sass */\n.arrow.west {\n  margin-left: 50px;\n  width: 450px;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\n.arrow.west:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: -50px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent #456eb9 transparent transparent;\n}\n/* line 33, _css-arrow.sass */\n.arrow.west:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: -49px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent #e7eff4 transparent transparent;\n}\n/* line 31, css-arrow-example.sass */\n.arrow.borderless {\n  border: none;\n  margin-right: 50px;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\n.arrow.borderless:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: 520px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent transparent #456eb9;\n}\n/* line 33, _css-arrow.sass */\n.arrow.borderless:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0;\n  left: 520px;\n  bottom: auto;\n  border-width: 25px;\n  border-style: solid;\n  border-color: transparent transparent transparent #e7eff4;\n}\n\n/* line 37, css-arrow-example.sass */\nblockquote {\n  border: 5px solid #333333;\n  background: #cccccc;\n  height: 90px;\n  width: 490px;\n  padding: 10px;\n  margin-bottom: 30px;\n  margin-left: 0;\n  position: relative;\n}\n/* line 12, _css-arrow.sass */\nblockquote:before {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 110px;\n  left: 450px;\n  bottom: auto;\n  border-width: 15px;\n  border-style: solid;\n  border-color: #333333 transparent transparent transparent;\n}\n/* line 33, _css-arrow.sass */\nblockquote:after {\n  content: \"\\00a0\";\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 105px;\n  left: 450px;\n  bottom: auto;\n  border-width: 15px;\n  border-style: solid;\n  border-color: #cccccc transparent transparent transparent;\n}\n"
  },
  {
    "path": "css-arrow/css-arrow-example.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n  <title>CSS Arrow Sass Mixin Example</title>\n  <link rel=\"stylesheet\" href=\"css-arrow-example.css\" type=\"text/css\" media=\"screen\" title=\"no title\" charset=\"utf-8\">\n</head>\n<body>\n  <h1>CSS Arrow Sass Mixin Example</h1>\n  <div class=\"arrow east\">\n    <h2>East</h2>\n    <p>This box should have an arrow facing east.</p>\n  </div>\n  <div class=\"arrow west\">\n    <h2>West</h2>\n    <p>This box should have an arrow facing west.</p>\n  </div>\n  <div class=\"arrow south\">\n    <h2>South</h2>\n    <p>This box should have an arrow facing south.</p>\n  </div>\n  <div class=\"arrow north\">\n    <h2>North</h2>\n    <p>This box should have an arrow facing north.</p>\n  </div>\n  <div class=\"arrow borderless\">\n    <h2>Borderless</h2>\n    <p>This box should have an arrow facing east, without a border.</p>\n  </div>\n  \n  <blockquote>\n    <h2>This is a wider border</h2>\n    <p>This blockquote element should have a wider border and smaller arrow.</p>\n  </blockquote>\n  \n</body>\n</html>\n"
  },
  {
    "path": "css-arrow/css-arrow-example.sass",
    "content": "@import 'css-arrow'\n\nbody\n  font-family: 'Helvetica Neue', Arial, san-serif\n  font-size: 12px\n  \n.arrow\n  $bg-color: #e7eff4\n  $border-color: #456eb9\n  $border-width: 1px\n  $arrow-width: 50px\n  border: $border-width solid $border-color\n  background: $bg-color\n  height: 100px\n  width: 500px\n  padding: 10px\n  margin-bottom: 10px\n  &.east\n    margin-right: $arrow-width\n    +arrow( 'east', $bg-color, $border-color, $border-width, 0, 520px, $arrow-width )\n  &.south\n    margin-bottom: $arrow-width\n    +arrow( 'south', $bg-color, $border-color, $border-width, 120px, 0, $arrow-width )\n  &.north\n    margin-top: (($arrow-width/2) * -1) + 10px\n    +arrow( 'north', $bg-color, $border-color, $border-width, -50px, 400px, $arrow-width )\n  &.west\n    margin-left: $arrow-width\n    width: 500px - $arrow-width\n    +arrow( 'west', $bg-color, $border-color, $border-width, 0, -50px, $arrow-width )\n  &.borderless\n    $border-width: 0px\n    border: none\n    margin-right: $arrow-width\n    +arrow( 'east', $bg-color, $border-color, $border-width, 0, 520px, $arrow-width )\n  \nblockquote\n  $bg-color: #ccc\n  $border-color: #333\n  $border-width: 5px\n  $arrow-width: 30px\n  border: $border-width solid $border-color\n  background: $bg-color\n  height: 90px\n  width: 490px\n  padding: 10px\n  margin-bottom: $arrow-width\n  margin-left: 0\n  +arrow( 'south', $bg-color, $border-color, $border-width, 110px, 450px, $arrow-width )\n  "
  },
  {
    "path": "feedback-tab/_feedback_tab.sass",
    "content": "=feedback-tab($color: red, $side: left, $feedback-border-color: darken($color, 10), $y-position: 250px, $feedback-text-img: \"fbtxt.png\")\n  display: block\n  padding: 5px\n  background: $color\n  border: 2px solid $feedback-border-color\n  height: image-height($feedback-text-img)\n  width: image-width($feedback-text-img)\n  position: fixed\n  top: $y-position\n  #{$side}: 0px\n  border-#{$side}: 0px\n  span\n    display: block\n    +replace-text-with-dimensions($feedback-text-img)\n  &:hover, &:active\n    cursor: pointer\n    width: image-width($feedback-text-img)\n  &:hover\n    background: lighten($color, 10)\n    border-color: lighten($feedback-border-color, 10)\n  &:active\n    background: darken($color, 10)\n    border-color: darken($feedback-border-color, 10)"
  },
  {
    "path": "file-field-mask/file-field-mask.css",
    "content": "/*Author Nick Treadway\nLicense http://creativecommons.org/licenses/publicdomain/\nFollow me http://twitter.com/nicktea\nDate: Wed June 1 2011*/\nol { list-style-type: none; }\nol li.file { width: 100%; height: 50px; }\nol li.file label { float: left; line-height: 15px; margin: 10px; }\nol li.file input[type=file] { height: 35px; font-size: 20px; position: relative; text-align: left; -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; z-index: 2; }\nol li.file #fake-file-field { background: url(../images/file-field-mask.png) no-repeat; position: absolute; left: 95px; top: 50px; height: 50px; font-size: 12px; width: 390px; z-index: 1; }\nol li.file #fake-file-field .input { height: 50px; left: 10px; overflow: hidden; position: relative; top: 5px; width: 280px; }\n"
  },
  {
    "path": "file-field-mask/file-field-mask.haml",
    "content": "!!! 5\n%html\n  %head\n    %title File Field Mask\n    %link{:rel => \"stylesheet\", :href => \"file-field-mask.css\"}\n  %body\n    %section#container\n      %aside\n        %p File Field Mask Demo - kill that unwanted standard look.\n      %ol#demo\n        %li.file\n          %label File:\n          #fake-file-field\n            .input\n          %input{:type => 'file'}           "
  },
  {
    "path": "file-field-mask/file-field-mask.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>File Field Mask</title>\n    <link href='file-field-mask.css' rel='stylesheet' />\n  </head>\n  <body>\n    <section id='container'>\n      <aside>\n        <p>File Field Mask Demo - kill that unwanted standard look.</p>\n      </aside>\n      <ol id='demo'>\n        <li class='file'>\n          <label>File</label>\n          <div id='fake-file-field'>\n            <div class='input'></div>\n          </div>\n          <input type='file' />\n        </li>\n      </ol>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "file-field-mask/file-field-mask.scss",
    "content": "/*Author Nick Treadway\nLicense http://creativecommons.org/licenses/publicdomain/\nFollow me http://twitter.com/nicktea\nDate: Wed June 1 2011*/\n\nol {\n  list-style-type: none;\n  \n  li.file {\n   \n    width: 100%;\n    height: 50px;\n    \n    label {\n      float: left;\n      line-height: 15px;\n      margin: 10px;}\n    \n    input[type=file]{\n      height:35px;\n      font-size:20px;\n      position: relative;\n      text-align: left;\n      -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);\n      filter:alpha(opacity=0);\n      opacity: 0;\n      z-index: 2;}\n    \n    #fake-file-field {\n      background: url(../images/file-field-mask.png) no-repeat;\n      position: absolute;\n      left: 95px;\n      top: 50px;\n      height: 50px;\n      font-size: 12px;\n      width: 390px;\n      z-index: 1;\n      .input {\n        height: 50px;\n        left: 10px;\n        overflow: hidden;\n        position: relative;\n        top: 5px;\n        width: 280px;}\n    }\n  }\n}"
  },
  {
    "path": "hover-visibility/hover-example.html",
    "content": "<!DOCTYPE HTML>\n<html>\n  <head>\n    <title>Hover Visibility Example</title>\n    <link rel=\"stylesheet\" href=\"hover-visibility.css\" type=\"text/css\" media=\"screen\">\n  </head>\n  <body>\n    <div class=\"container\">\n      <h1>A Container</h1>\n      <p>This container has stuff that you can only see\n         when you hover over it.</p>\n      <div id=\"contained\" class=\"within-container\">\n        You must be hovering.\n        <a href=\"javascript:document.getElementById('contained').className = 'within-container sticky'\">Click to stick.</a>\n      </div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "hover-visibility/hover-visibility.css",
    "content": "/* line 14, hover-visibility.sass */\n.container {\n  width: 400px;\n  border: 10px solid #777777;\n  margin: 100px auto;\n  text-align: center;\n}\n\n/* line 20, hover-visibility.sass */\n.within-container {\n  visibility: hidden;\n  opacity: 0;\n  -moz-transition-property: opacity visibility;\n  -webkit-transition-property: opacity visibility;\n  -o-transition-property: opacity visibility;\n  transition-property: opacity visibility;\n  -moz-transition-duration: 0.333s;\n  -webkit-transition-duration: 0.333s;\n  -o-transition-duration: 0.333s;\n  transition-duration: 0.333s;\n  -moz-transition-timing-function: ease;\n  -webkit-transition-timing-function: ease;\n  -o-transition-timing-function: ease;\n  transition-timing-function: ease;\n}\n/* line 22, hover-visibility.sass */\n.container:hover .within-container, .within-container.sticky {\n  visibility: visible;\n  opacity: 1;\n}\n"
  },
  {
    "path": "hover-visibility/hover-visibility.sass",
    "content": "@import \"compass/css3\"\n\n// Provides a nice visibility transition for a nested element\n// with gracefull degradation.\n=hover-visiblity-hidden($duration: 0.333s)\n  visibility: hidden\n  opacity: 0\n  +transition(opacity visibility, $duration, ease)\n\n=hover-visibility-visible\n  visibility: visible\n  opacity: 1\n\n.container\n  width: 400px\n  border: 10px solid #777\n  margin: 100px auto\n  text-align: center\n\n.within-container\n  +hover-visiblity-hidden\n  .container:hover &,\n  &.sticky\n    +hover-visibility-visible  \n"
  },
  {
    "path": "multi-line-button/_multi-line-button.sass",
    "content": "=multi-line-button($base-color)\n  +background-clip('padding-box')\n  border-width: 1px\n  +border-radius(6px)\n  border-style: solid\n  color: white\n  display: block\n  margin: 0.2em auto\n  padding: 12px 15px\n  text-align: center\n  text-decoration: none\n  .title\n    font-size: 24px\n    font-weight: bold\n    display: block\n    +opacity(0.9)\n  .subtitle\n    font-size: 14px\n    display: block\n    margin-top: 4px\n    +opacity(0.7)\n  &:hover\n    .title\n      +opacity(1)\n    .subtitle\n      +opacity(0.8)\n  &:active\n    padding: 13px 15px 11px\n  @if $base-color != none\n    +color-multi-line-button($base-color)\n\n=color-multi-line-button($base-color)\n  $dark-color: darken($base-color, 10%)\n  $light-color: lighten($base-color, 10%)\n  $border-color: darken($base-color, 20%)\n  $light-border-color: lighten($base-color, 0%)\n  $highlight-color: transparentize(desaturate(lighten($base-color, 40%), 50%), 0.5)\n  $shadow-color: darken($base-color, 15%)\n  $text-shadow-color: darken($base-color, 15%)\n  background-color: $base-color\n  +linear-gradient(color-stops($light-color, $base-color, $dark-color))\n  border-color: $border-color\n  border-left-color: $light-border-color\n  border-top-color: $light-border-color\n  +box-shadow($highlight-color, 1px, 1px, 0, 0, inset)\n  color: white\n  +text-shadow($text-shadow-color, 0, 1px, 2px)\n  &:hover, &:focus\n    +linear-gradient(color-stops(lighten($light-color, 5%), lighten($base-color, 5%), $dark-color))\n  &:active, &.depressed\n    +linear-gradient(color-stops(desaturate(lighten($dark-color, 5%),10%), desaturate($base-color, 10%)))\n    +box-shadow(none)\n    border-color: $border-color\n    "
  },
  {
    "path": "multi-line-button/multi-line-button.css",
    "content": "/* line 14, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: 100%;\n  font-family: inherit;\n  vertical-align: baseline;\n}\n\n/* line 17, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\nbody {\n  line-height: 1;\n  color: black;\n  background: white;\n}\n\n/* line 19, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\nol, ul {\n  list-style: none;\n}\n\n/* line 21, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\ntable {\n  border-collapse: separate;\n  border-spacing: 0;\n  vertical-align: middle;\n}\n\n/* line 23, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\ncaption, th, td {\n  text-align: left;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\n/* line 25, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\nq, blockquote {\n  quotes: \"\" \"\";\n}\n/* line 96, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\nq:before, q:after, blockquote:before, blockquote:after {\n  content: \"\";\n}\n\n/* line 27, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */\na img {\n  border: none;\n}\n\n/* line 6, multi-line-button.sass */\nbody {\n  font-family: \"Trebuchet MS\", \"Lucida Grande\", Helvetica, Arial, sans-serif;\n  padding: 30px;\n  text-align: center;\n}\n\n/* line 11, multi-line-button.sass */\np {\n  margin: 1em 0;\n}\n\n/* line 14, multi-line-button.sass */\na.multi-line-button {\n  -moz-background-clip: padding;\n  -webkit-background-clip: padding;\n  -o-background-clip: padding-box;\n  -ms-background-clip: padding-box;\n  -khtml-background-clip: padding-box;\n  background-clip: padding-box;\n  border-width: 1px;\n  -moz-border-radius: 6px;\n  -webkit-border-radius: 6px;\n  -o-border-radius: 6px;\n  -ms-border-radius: 6px;\n  -khtml-border-radius: 6px;\n  border-radius: 6px;\n  border-style: solid;\n  color: white;\n  display: block;\n  margin: 0.2em auto;\n  padding: 12px 15px;\n  text-align: center;\n  text-decoration: none;\n  background-color: #60a3d8;\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89bbe2), color-stop(50%, #60a3d8), color-stop(100%, #378bce));\n  background-image: -moz-linear-gradient(top, #89bbe2 0%, #60a3d8 50%, #378bce 100%);\n  background-image: linear-gradient(top, #89bbe2 0%, #60a3d8 50%, #378bce 100%);\n  border-color: #2970a9;\n  border-left-color: #60a3d8;\n  border-top-color: #60a3d8;\n  -moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;\n  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;\n  -o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;\n  box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;\n  color: white;\n  text-shadow: #2e7ebd 0 1px 2px;\n}\n/* line 12, _multi-line-button.sass */\na.multi-line-button .title {\n  font-size: 24px;\n  font-weight: bold;\n  display: block;\n  opacity: 0.9;\n  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);\n  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);\n}\n/* line 17, _multi-line-button.sass */\na.multi-line-button .subtitle {\n  font-size: 14px;\n  display: block;\n  margin-top: 4px;\n  opacity: 0.7;\n  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);\n  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);\n}\n/* line 23, _multi-line-button.sass */\na.multi-line-button:hover .title {\n  opacity: 1;\n  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);\n  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);\n}\n/* line 25, _multi-line-button.sass */\na.multi-line-button:hover .subtitle {\n  opacity: 0.8;\n  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);\n  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);\n}\n/* line 27, _multi-line-button.sass */\na.multi-line-button:active {\n  padding: 13px 15px 11px;\n}\n/* line 48, _multi-line-button.sass */\na.multi-line-button:hover, a.multi-line-button:focus {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9dc7e7), color-stop(50%, #74afdd), color-stop(100%, #378bce));\n  background-image: -moz-linear-gradient(top, #9dc7e7 0%, #74afdd 50%, #378bce 100%);\n  background-image: linear-gradient(top, #9dc7e7 0%, #74afdd 50%, #378bce 100%);\n}\n/* line 50, _multi-line-button.sass */\na.multi-line-button:active, a.multi-line-button.depressed {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796c8), color-stop(100%, #6aa2ce));\n  background-image: -moz-linear-gradient(top, #5796c8 0%, #6aa2ce 100%);\n  background-image: linear-gradient(top, #5796c8 0%, #6aa2ce 100%);\n  -moz-box-shadow: none;\n  -webkit-box-shadow: none;\n  -o-box-shadow: none;\n  box-shadow: none;\n  border-color: #2970a9;\n}\n/* line 16, multi-line-button.sass */\na.multi-line-button.green {\n  background-color: #63bb4a;\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #83c96f), color-stop(50%, #63bb4a), color-stop(100%, #4e9939));\n  background-image: -moz-linear-gradient(top, #83c96f 0%, #63bb4a 50%, #4e9939 100%);\n  background-image: linear-gradient(top, #83c96f 0%, #63bb4a 50%, #4e9939 100%);\n  border-color: #3b742b;\n  border-left-color: #63bb4a;\n  border-top-color: #63bb4a;\n  -moz-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;\n  -webkit-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;\n  -o-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;\n  box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;\n  color: white;\n  text-shadow: #458632 0 1px 2px;\n}\n/* line 48, _multi-line-button.sass */\na.multi-line-button.green:hover, a.multi-line-button.green:focus {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #93d082), color-stop(50%, #73c25d), color-stop(100%, #4e9939));\n  background-image: -moz-linear-gradient(top, #93d082 0%, #73c25d 50%, #4e9939 100%);\n  background-image: linear-gradient(top, #93d082 0%, #73c25d 50%, #4e9939 100%);\n}\n/* line 50, _multi-line-button.sass */\na.multi-line-button.green:active, a.multi-line-button.green.depressed {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5f9f4c), color-stop(100%, #6aaf56));\n  background-image: -moz-linear-gradient(top, #5f9f4c 0%, #6aaf56 100%);\n  background-image: linear-gradient(top, #5f9f4c 0%, #6aaf56 100%);\n  -moz-box-shadow: none;\n  -webkit-box-shadow: none;\n  -o-box-shadow: none;\n  box-shadow: none;\n  border-color: #3b742b;\n}\n/* line 18, multi-line-button.sass */\na.multi-line-button.red {\n  background-color: #bf4040;\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #cc6666), color-stop(50%, #bf4040), color-stop(100%, #993333));\n  background-image: -moz-linear-gradient(top, #cc6666 0%, #bf4040 50%, #993333 100%);\n  background-image: linear-gradient(top, #cc6666 0%, #bf4040 50%, #993333 100%);\n  border-color: #732626;\n  border-left-color: #bf4040;\n  border-top-color: #bf4040;\n  -moz-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;\n  -webkit-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;\n  -o-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;\n  box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;\n  color: white;\n  text-shadow: #862d2d 0 1px 2px;\n}\n/* line 48, _multi-line-button.sass */\na.multi-line-button.red:hover, a.multi-line-button.red:focus {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #d27979), color-stop(50%, #c55353), color-stop(100%, #993333));\n  background-image: -moz-linear-gradient(top, #d27979 0%, #c55353 50%, #993333 100%);\n  background-image: linear-gradient(top, #d27979 0%, #c55353 50%, #993333 100%);\n}\n/* line 50, _multi-line-button.sass */\na.multi-line-button.red:active, a.multi-line-button.red.depressed {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a04545), color-stop(100%, #b24d4d));\n  background-image: -moz-linear-gradient(top, #a04545 0%, #b24d4d 100%);\n  background-image: linear-gradient(top, #a04545 0%, #b24d4d 100%);\n  -moz-box-shadow: none;\n  -webkit-box-shadow: none;\n  -o-box-shadow: none;\n  box-shadow: none;\n  border-color: #732626;\n}\n/* line 20, multi-line-button.sass */\na.multi-line-button.orange {\n  background-color: #d98026;\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e19951), color-stop(50%, #d98026), color-stop(100%, #ae661e));\n  background-image: -moz-linear-gradient(top, #e19951 0%, #d98026 50%, #ae661e 100%);\n  background-image: linear-gradient(top, #e19951 0%, #d98026 50%, #ae661e 100%);\n  border-color: #824d17;\n  border-left-color: #d98026;\n  border-top-color: #d98026;\n  -moz-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;\n  -webkit-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;\n  -o-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;\n  box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;\n  color: white;\n  text-shadow: #985a1b 0 1px 2px;\n}\n/* line 48, _multi-line-button.sass */\na.multi-line-button.orange:hover, a.multi-line-button.orange:focus {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e4a667), color-stop(50%, #dd8d3c), color-stop(100%, #ae661e));\n  background-image: -moz-linear-gradient(top, #e4a667 0%, #dd8d3c 50%, #ae661e 100%);\n  background-image: linear-gradient(top, #e4a667 0%, #dd8d3c 50%, #ae661e 100%);\n}\n/* line 50, _multi-line-button.sass */\na.multi-line-button.orange:active, a.multi-line-button.orange.depressed {\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b8732e), color-stop(100%, #cc8033));\n  background-image: -moz-linear-gradient(top, #b8732e 0%, #cc8033 100%);\n  background-image: linear-gradient(top, #b8732e 0%, #cc8033 100%);\n  -moz-box-shadow: none;\n  -webkit-box-shadow: none;\n  -o-box-shadow: none;\n  box-shadow: none;\n  border-color: #824d17;\n}\n"
  },
  {
    "path": "multi-line-button/multi-line-button.haml",
    "content": "!!! 5\n%html\n  %head\n    %title Multi-Line Button\n    %link(rel=\"stylesheet\" href=\"multi-line-button.css\")/\n  %body\n    %p\n      The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.\n    %p\n      %a.multi-line-button{:href=>\"#\", :style=>\"width:14em\"}\n        %span.title Start Free Trial\n        %span.subtitle 30-days free! Signup in 60 seconds\n    %p\n      %a.multi-line-button.green{:href=>\"#\", :style=>\"width:14em\"}\n        %span.title Start Free Trial\n        %span.subtitle 30-days free! Signup in 60 seconds\n    %p\n      %a.multi-line-button.red{:href=>\"#\", :style=>\"width:14em\"}\n        %span.title Start Free Trial\n        %span.subtitle 30-days free! Signup in 60 seconds\n    %p\n      %a.multi-line-button.orange{:href=>\"#\", :style=>\"width:14em\"}\n        %span.title Start Free Trial\n        %span.subtitle 30-days free! Signup in 60 seconds"
  },
  {
    "path": "multi-line-button/multi-line-button.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Multi-Line Button</title>\n    <link href='multi-line-button.css' rel='stylesheet' />\n  </head>\n  <body>\n    <p>\n      The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.\n    </p>\n    <p>\n      <a class='multi-line-button' href='#' style='width:14em'>\n        <span class='title'>Start Free Trial</span>\n        <span class='subtitle'>30-days free! Signup in 60 seconds</span>\n      </a>\n    </p>\n    <p>\n      <a class='multi-line-button green' href='#' style='width:14em'>\n        <span class='title'>Start Free Trial</span>\n        <span class='subtitle'>30-days free! Signup in 60 seconds</span>\n      </a>\n    </p>\n    <p>\n      <a class='multi-line-button red' href='#' style='width:14em'>\n        <span class='title'>Start Free Trial</span>\n        <span class='subtitle'>30-days free! Signup in 60 seconds</span>\n      </a>\n    </p>\n    <p>\n      <a class='multi-line-button orange' href='#' style='width:14em'>\n        <span class='title'>Start Free Trial</span>\n        <span class='subtitle'>30-days free! Signup in 60 seconds</span>\n      </a>\n    </p>\n  </body>\n</html>\n"
  },
  {
    "path": "multi-line-button/multi-line-button.sass",
    "content": "@import compass\n@import multi-line-button\n\n+global-reset\n\nbody\n  font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif\n  padding: 30px\n  text-align: center\n\np\n  margin: 1em 0\n\na.multi-line-button\n  +multi-line-button(#60a3d8)\n  &.green\n    +color-multi-line-button(#63bb4a)\n  &.red\n    +color-multi-line-button(#bf4040)\n  &.orange\n    +color-multi-line-button(#d98026)\n"
  },
  {
    "path": "progress-bar/simple_progress_bar.css",
    "content": "/* line 4, simple_progress_bar.sass */\n.bar {\n  border: 1px solid #666666;\n  margin-top: 0.25em;\n}\n\n/* line 7, simple_progress_bar.sass */\n.fill {\n  height: 1.333em;\n  background: #a9c13b;\n  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a9c13b), color-stop(100%, #535f1d));\n  background-image: -moz-linear-gradient(top, #a9c13b 0%, #535f1d 100%);\n  background-image: linear-gradient(top, #a9c13b 0%, #535f1d 100%);\n}\n\n/* line 11, simple_progress_bar.sass */\n.bar, .fill {\n  -moz-border-radius: 3px;\n  -webkit-border-radius: 3px;\n  -o-border-radius: 3px;\n  -ms-border-radius: 3px;\n  -khtml-border-radius: 3px;\n  border-radius: 3px;\n}\n"
  },
  {
    "path": "progress-bar/simple_progress_bar.haml",
    "content": "!!! 5\n%head\n  %link(rel=\"stylesheet\" href=\"simple_progress_bar.css\")\n%body\n  - percent_full = 0.55\n  .bar\n    .fill{:style => \"width: #{(percent_full*100).round}%\"}\n"
  },
  {
    "path": "progress-bar/simple_progress_bar.html",
    "content": "<!DOCTYPE html>\n<head>\n  <link href='simple_progress_bar.css' rel='stylesheet' />\n</head>\n<body>\n  <div class='bar'>\n    <div class='fill' style='width: 55%'></div>\n  </div>\n</body>\n"
  },
  {
    "path": "progress-bar/simple_progress_bar.sass",
    "content": "@import compass/css3\n$bar-fill-color: #A9C13B\n\n.bar\n  border: 1px solid #666\n  margin-top: 0.25em\n.fill\n  height: 1.333em\n  background: $bar-fill-color\n  +linear-gradient(color-stops($bar-fill-color, darken($bar-fill-color, 25%)))\n.bar, .fill\n  +border-radius(3px)\n"
  },
  {
    "path": "search-input/_search-input.sass",
    "content": "=search-input($font-size: 11px)\n  font-size: $font-size\n  +border-radius(100px)\n  border: 1px solid #ccc\n  border-top-color: #999\n  border-left-color: #b0b0b0\n  border-right-color: #bbb\n  background: white image-url('search.png') 4px center no-repeat\n  +box-shadow(rgba(black, 0.2), 0, 1px, 0, inset)\n  width: 180px\n  padding: 2px 8px 2px 20px"
  },
  {
    "path": "search-input/search-input.css",
    "content": "/* line 4, search-input.sass */\ninput[type=search], input.search {\n  font-size: 11px;\n  -moz-border-radius: 100px;\n  -webkit-border-radius: 100px;\n  -o-border-radius: 100px;\n  -ms-border-radius: 100px;\n  -khtml-border-radius: 100px;\n  border-radius: 100px;\n  border: 1px solid #cccccc;\n  border-top-color: #999999;\n  border-left-color: #b0b0b0;\n  border-right-color: #bbbbbb;\n  background: white url('/images/search.png?1287280523') 4px center no-repeat;\n  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;\n  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;\n  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;\n  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;\n  width: 180px;\n  padding: 2px 8px 2px 20px;\n}\n"
  },
  {
    "path": "search-input/search-input.haml",
    "content": "!!! 5\n%html\n  %head\n    %title Search Input\n    %link(rel=\"stylesheet\" href=\"search-input.css\")/\n  %body\n    %p\n      The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.\n    %form\n      %input(type=\"search\" name=\"q\" results=0)/"
  },
  {
    "path": "search-input/search-input.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Search Input</title>\n    <link href='search-input.css' rel='stylesheet' />\n  </head>\n  <body>\n    <p>\n      The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.\n    </p>\n    <form>\n      <input name='q' results='0' type='search' />\n    </form>\n  </body>\n</html>\n"
  },
  {
    "path": "search-input/search-input.sass",
    "content": "@import compass\n@import search-input\n\ninput[type=search], input.search\n  +search-input\n"
  },
  {
    "path": "timing-functions/_timing-functions.scss",
    "content": "@function linear() {\n  @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }\n\n@function ease() {\n  @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }\n\n@function ease-in() {\n  @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }\n@function ease-in-quad() {\n  @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }\n@function ease-in-cubic() {\n  @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }\n@function ease-in-quart() {\n  @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }\n@function ease-in-quint() {\n  @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }\n@function ease-in-sine() {\n  @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }\n@function ease-in-expo() {\n  @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }\n@function ease-in-circ() {\n  @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }\n\n@function ease-out() {\n  @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }\n@function ease-out-quad() {\n  @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }\n@function ease-out-cubic() {\n  @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }\n@function ease-out-quart() {\n  @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }\n@function ease-out-quint() {\n  @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }\n@function ease-out-sine() {\n  @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }\n@function ease-out-expo() {\n  @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }\n@function ease-out-circ() {\n  @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }\n\n@function ease-in-out() {\n  @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }\n@function ease-in-out-quad() {\n  @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }\n@function ease-in-out-cubic() {\n  @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }\n@function ease-in-out-quart() {\n  @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }\n@function ease-in-out-quint() {\n  @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }\n@function ease-in-out-sine() {\n  @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }\n@function ease-in-out-expo() {\n  @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }\n@function ease-in-out-circ() {\n  @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }"
  },
  {
    "path": "timing-functions/timing-functions.css",
    "content": "/* line 4, timing-functions.scss */\n.animatable, .ease-out-expo-animation, .ease-in-expo-animation {\n  width: 100px;\n  height: 100px;\n  -moz-transition-property: height, width;\n  -webkit-transition-property: height, width;\n  -o-transition-property: height, width;\n  transition-property: height, width;\n  -moz-transition-duration: 1s;\n  -webkit-transition-duration: 1s;\n  -o-transition-duration: 1s;\n  transition-duration: 1s;\n}\n/* line 9, timing-functions.scss */\n.active .animatable, .active .ease-out-expo-animation, .active .ease-in-expo-animation {\n  width: 200px;\n  height: 200px;\n}\n\n/* line 13, timing-functions.scss */\n.box {\n  position: absolute;\n  top: 200px;\n  background: red;\n}\n\n/* line 18, timing-functions.scss */\n.ease-out-expo-animation {\n  left: 0;\n  -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n/* line 23, timing-functions.scss */\n.ease-in-expo-animation {\n  left: 240px;\n  -moz-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  -o-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n}\n"
  },
  {
    "path": "timing-functions/timing-functions.haml",
    "content": "!!! 5\n%html\n  %head\n    %title Timing Functions\n    %link(rel=\"stylesheet\" href=\"timing-functions.css\")/\n    :javascript\n      var isOn = false;\n      setInterval(function() {\n        document.getElementById(\"container\").className = (isOn) ? \"\" : \"active\";\n        isOn = !isOn;\n      }, 2000);\n  %body\n    %p\n      The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions\n        \n    %img{ :src => \"expo-ease-out.jpg\" }\n    %img{ :src => \"expo-ease-in.jpg\" }\n    \n    #container\n      .box.ease-out-expo-animation\n      .box.ease-in-expo-animation"
  },
  {
    "path": "timing-functions/timing-functions.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Timing Functions</title>\n    <link href='timing-functions.css' rel='stylesheet' />\n    <script type='text/javascript'>\n      //<![CDATA[\n        var isOn = false;\n        setInterval(function() {\n          document.getElementById(\"container\").className = (isOn) ? \"\" : \"active\";\n          isOn = !isOn;\n        }, 2000);\n      //]]>\n    </script>\n  </head>\n  <body>\n    <p>\n      The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions\n    </p>\n    <img src='expo-ease-out.jpg' />\n    <img src='expo-ease-in.jpg' />\n    <div id='container'>\n      <div class='box ease-out-expo-animation'></div>\n      <div class='box ease-in-expo-animation'></div>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "timing-functions/timing-functions.scss",
    "content": "@import \"compass\";\n@import \"timing-functions\";\n\n.animatable {\n  width: 100px;\n  height: 100px;\n  @include transition-property(\"height, width\");\n  @include transition-duration(1s); \n  .active & {\n    width: 200px;\n    height: 200px; } }\n\n.box {\n  position: absolute;\n  top: 200px;\n  background: red; }\n  \n.ease-out-expo-animation {\n  @extend .animatable;\n  left: 0;\n  @include transition-timing-function(ease-out-expo()); }\n\n.ease-in-expo-animation {\n  @extend .animatable;\n  left: 240px;\n  @include transition-timing-function(ease-in-expo()); }\n"
  }
]