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

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

/**
 * Mixins
 */

@mixin iconfont {
  display: inline-block;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin icon-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;
}

@mixin cf {
  &: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;
  }
}

/**
 * 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 {
  @include cf;
}

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

@if $load-equalize {
  @include equalize;
}

/**
 * Basic positioning
 */

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

/**
 * Standards
 */

html, body {
  font: $font-size-default/$line-height-default $font-family;
}

body {
  font-weight: $font-weight-default;
  color: $color-text;
}

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