@import "compass/reset";
@import "compass/utilities";
@import "yui/modules/base";
@import "blueprint/grid";
@import "blueprint/scaffolding";
@import "compass/utilities/text/ellipsis";

html {
  @include yui-base; }

h2 {
  margin-top: 0;
  border-bottom: 2px solid #777777; }

#utilities {
  @include container; }

.example {
  border: 2px solid #cccccc;
  padding: 4px; }

#links {
  @include column(8);
  .hover a {
    @include hover-link; }
  .colored a {
    @include link-colors(#cc0000, #cc00cc, #770000, #770077, #777777); }
  .unstyled {
    color: #333333;
    a {
      @include unstyled-link; } } }

.mixin {
  font-family: monospace;
  border: {
    width: 1px;
    style: solid; };
  border-color: #cccccc;
  border-color: -moz-use-text-color;
  padding: 2px;
  line-height: 22px;
  white-space: nowrap; }

#tag-cloud {
  @include column(8);
  ol {
    margin: 0;
    @include inline-list;
    @include tag-cloud(1em);
    li {
      @include no-bullets; } } }

#lists {
  @include column(8, true);
  ul.inline {
    @include inline-list; }
  ul.comma-delimited {
    @include comma-delimited-list; }
  ol.pretty {
    @include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } }

#tables {
  @include column(16);
  table.alternating {
    width: 100%;
    @include alternating-rows-and-columns(#f9e5a7, #cefbb3, #222222);
    @include table-scaffolding;
    @include outer-table-borders(2px, #151a99);
    @include inner-table-borders(1px, #151a99); } }

#ellipsis {
  @include column(8, true);
  td {
    width: 50%;
    @include ellipsis; } }

#floats {
  @include column(16);
  .clearfix-example {
    background: #dddddd;
    border: 2px solid black;
    text-align: center;
    @include clearfix; }
  .float-left-example, .float-right-example {
    border: 1px solid black;
    padding: 10px;
    margin: 0 20px;
    width: 25%;
    background: #f9e5a7; }
  .float-left-example {
    @include float-left; }
  .float-right-example {
    @include float-right; }
  .pie-clearfix-example {
    background: #dddddd;
    border: 2px solid black;
    text-align: center;
    position: relative;
    @include pie-clearfix;
    .positioned-example {
      display: block;
      position: absolute;
      left: -10px;
      top: -10px;
      font-size: 10px;
      width: 10em;
      background: #ccccff;
      border: 1px solid black; } } }