@import "compass";
@import "_settings";
@import "compass/reset";
@import "inc/layout/_sticky_footer";

/**
 * Functions
 */
@function font-size($size) {
  @return $size / $font-size-default * 100%
}

/**
 * Mixins
 */

@mixin font-awesome {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin fa-text-replacement($height, $width) {
  height: $height;
  width: $width;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

@mixin centered-960 {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/**
 * Hide invisible elements
 */
.invisible {
  border:0;
  clip:rect(0 0 0 0);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
}

/**
 * Flexible images (videos see #4896)
 *
 * @see http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
 */
img {
  max-width:100%;
  height:auto;
}
.ie7 img {
  -ms-interpolation-mode:bicubic;
}
.ie8 img {
  width:auto; /* see #5789 */
}

/**
 * Clear floats
 */

.cf,
.block,
#container,
.inside {
  &:before,
  &:after {
	content: " "; /* 1 */
	display: table; /* 2 */
  }

  &:after {
	clear: both;
  }

  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  & {
	*zoom: 1;
  }
}

@if $load-holy-grail-layout {
  @include holy-grail-layout;
}

/**
 * Basic positioning
 */

#header,
#main, #left, #right,
#footer {
  position: relative;
}

/**
 * Standards
 */

body {
  font: $font-size-default/$line-height-default $font-family;
  font-weight: $font-weight-default;
  color: $color-text;
}

a {
  text-decoration: none;
  color: $color-link;
}