@import "compass/css3";

#gradient {
  width: 200px;
  height: 100px;
  border: 1px solid #777777; }

thead th {
  min-height: 50px;
  min-width: 100px;
  @include text-shadow(white); }

th.linear {
  @include background-image(linear-gradient(white, red 50%, yellow 75%, lime)); }

th.radial {
  @include background-image(radial-gradient(white, red 20px, yellow 30px, lime 40px)); }

tr.default {
  td.linear {
    @include background-image(linear-gradient(#cc0000, #0000cc)); }
  td.radial {
    @include background-image(radial-gradient(#cc0000, #0000cc)); }
  td.linear-code:before {
    content: "+background-image(linear-gradient(#c00, #00c))"; }
  td.radial-code:before {
    content: "+background-image(radial-gradient(#c00, #00c))"; } }

tr.top-left {
  td.linear {
    @include background-image(linear-gradient(top left, #cc0000, #0000cc)); }
  td.radial {
    @include background-image(radial-gradient(top left, #cc0000, #0000cc)); }
  td.linear-code:before {
    content: '+background-image(linear-gradient(top left, #c00, #00c))'; }
  td.radial-code:before {
    content: '+background-image(radial-gradient(top left, #c00, #00c))'; } }

tr.bottom-right {
  td.linear {
    @include background-image(linear-gradient(bottom right, #cc0000, #0000cc)); }
  td.radial {
    @include background-image(radial-gradient(bottom right, #cc0000, #0000cc)); }
  td.linear-code:before {
    content: '+background-image(linear-gradient(bottom right, #c00, #00c))'; }
  td.radial-code:before {
    content: '+background-image(radial-gradient(bottom right, #c00, #00c))'; } }

tr.three-color {
  td.linear {
    @include background-image(linear-gradient(#cc0000, white, #0000cc)); }
  td.radial {
    @include background-image(radial-gradient(#cc0000, white, #0000cc 50px)); }
  td.linear-code:before {
    content: "+background-image(linear-gradient(#c00, #fff, #00c))"; }
  td.radial-code:before {
    content: "+background-image(radial-gradient(#c00, #fff, #00c 50px))"; } }

tr.four-color {
  td.linear {
    @include background-image(linear-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
  td.radial {
    @include background-image(radial-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
  td.linear-code:before {
    content: "+background-image(linear-gradient(#c00, #0c0 25%, #0cc 75%, #00c))"; }
  td.radial-code:before {
    content: "+background-image(radial-gradient(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }

tr.filled-in {
  td.linear {
    @include background-image(linear-gradient(#cc0000 33%, #0000cc 66%)); }
  td.radial {
    @include background-image(radial-gradient(#cc0000 25px, #0000cc 75px)); }
  td.linear-code:before {
    content: "+background-image(linear-gradient(#c00 33%, #00c 66%))"; }
  td.radial-code:before {
    content: "+background-image(radial-gradient(#c00 25px, #00c 75px))"; } }
tr.with-bg {
  td.linear {
    @include background-image(image-url("button_bg.png"), linear-gradient(top, #c00 33%, #00c 66%)); }
  td.radial {
    @include background-image(image-url("button_bg.png"), radial-gradient(center center, #c00 25px, #00c 75px)); }
  td.linear-code:before {
    content: "+background-image(image-url(\"button_bg.png\"), linear-gradient(top, #c00 33%, #00c 66%))"; }
  td.radial-code:before {
    content: "+background-image(image-url(\"button_bg.png\"), radial-gradient(center center, #c00 25px, #00c 75px))"; } }