//////////////////////////////////////////////////////////////////////////////////////////////////
// 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/variables";

//////////////////////////////////////////////////////////////////////////////////////////////////
// COMMON TAGS
//////////////////////////////////////////////////////////////////////////////////////////////////

h1, .h1 { font-size: 30px; font-weight:bold; margin:10px 0; line-height:1em; }
h2, .h2 { font-size: 20px; font-weight:bold; margin:8px 0; line-height:1em; }
h3, .h3 { font-size: 17px; font-weight:bold; margin:6px 0; line-height:1em; }
h4, .h4 { font-size: 14px; font-weight:bold; margin:4px 0; line-height:1em; }
h5, .h5 { font-size: $font-size-large; font-weight: bold; margin:2px 0; line-height:1em; }
h6, .h6 { font-size: $font-size-normal; font-weight: bold; margin:2px 0; line-height:1em; }
h7, .h7 { font-size: $font-size-small; font-weight: bold; margin:2px 0; line-height:1em; }

p, .p { line-height:$line-height; margin-bottom:10px; }
a { text-decoration:none; color:$link-color;
  &:hover { text-decoration:underline; }
}
strong, .strong { font-weight:bold; }
emphasis, .emphasis { font-style:italic; }

ul { list-style-type: square; list-style-position:outside; padding:0; margin-left:0; line-height:$line-height;
  li { margin-top:5px; margin-left:1em; }
}

ol { list-style-type:decimal; list-style-position:outside; padding:0; margin-left:0; line-height:$line-height;
  li { margin-top:5px; margin-left:1.5em; }
}

pre { font-family:"Courier New", Courier, monospace, sans-serif; color: #555; line-height: 1.6em; }

.hide { display:none !important; }

//////////////////////////////////////////////////////////////////////////////////////////////////
// FRAMEWORK: MODULE ACTIVATION
//////////////////////////////////////////////////////////////////////////////////////////////////
html { height:100%; }
body { height: 100%; background-color:#292a2e; @include ff-gradient(#26262a,#2b2d31); text-align:center; margin:0; font-family:$font-family; font-size:$font-size-normal; line-height:$line-height;
  $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
  .ff-widget { display:inline-block; @include box-shadow(#000000 2px 2px 2px); border:10px solid #ffffff; @include border-radius(3px); margin:50px 0 50px; color: #444444;
    .loading { line-height: 100px; }
  }
}