//////////////////////////////////////////////////////////////////////////////////////////////////
// FRAMEWORK: CORE VARIABLES & SASS RESET
//////////////////////////////////////////////////////////////////////////////////////////////////
//@import "compass/reset";
@import "common/variables";

//////////////////////////////////////////////////////////////////////////////////////////////////
// FRAMEWORK: SASS LIBRARY
//////////////////////////////////////////////////////////////////////////////////////////////////
@import "compass/css3";
@import "compass/layout/sticky-footer";
@import "compass/utilities";

//////////////////////////////////////////////////////////////////////////////////////////////////
// FRAMEWORK: COMMON FILES
//////////////////////////////////////////////////////////////////////////////////////////////////
@import "common/mixins";
@import "common/tags";

//////////////////////////////////////////////////////////////////////////////////////////////////
// FRAMEWORK: MODULE ACTIVATION
//////////////////////////////////////////////////////////////////////////////////////////////////
body { background-color:#292a2e; @include ff-gradient(#26262a,#2b2d31); text-align:center; margin:0;
  $content-width:content-width('engage');
  @include sticky-footer(40px, ".lyt-root", ".lyt-root-footer", ".lyt-footer");

  .lyt-root { @include ff-gradient(#26262a,#2b2d31); }
  .lyt-header { min-height:80px;
    .hello { background: #2d2d31; height:40px; line-height: 44px; text-align: right; border-bottom:1px solid #000000; @include box-shadow(#343438 0 1px 0);
      .hello-wrapper { max-width: 960px; margin:0 auto; }
      .greeting { color: #858789; font-style: italic; padding-right:10px; font-weight: 100; }
      a { font-weight: bold; color: #aeb2b4; }
    }
    .logo { border-bottom:1px solid #000000; @include box-shadow(#343438 0 1px 0); background-position: center center; background-repeat:no-repeat;
      img { margin-top:18px; }
    }
  }
  .lyt-footer { color:#565d65; font-size:10px; line-height:40px;  border-top:1px solid #343438; @include box-shadow(#000000 0 -1px 0);
    a { color:#565d65;
      &:hover { color:#747d88; }
    }
  }

  // layout-specific components
  .widget { display:inline-block; @include box-shadow(#000000 2px 2px 2px); border:10px solid #ffffff; @include border-radius(3px); margin:50px 0 50px; }
}