@import "compass";

$font-family: "Roboto", Arial, Helvetica, FreeSans, sans-serif;

$main-color: #082054;
$text-color: #000000;
$alt-color: #ffffff;
$link-color: #878787;

$font-size-default: 16px;
$font-size-mainnav: 18px / $font-size-default * 100%;

$line-height-default: 1.5;


/**
 * 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;
}


/**
 * 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;
  }
}

/**
 * Holy grail CSS layout
 *
 * @see http://www.alistapart.com/articles/holygrail
 */
#main,#left,#right {
  float:left;
}
#main {
  width:100%;

  .inside {
    min-height:1px; /* see #4893 */
  }
}
#left {
  margin-left:-100%;
}
#right {
  margin-right:-100%;
}
#footer {
  clear:both;
}

/**
 * Basic positioning
 */

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

/**
 * Standards
 */

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

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

h1, h2 {
  font-weight: 400;
}

h1 {
  font-size: font-size(26px);
}

h2 {
  font-size: font-size(22px);
}

/**
 * Sticky footer
 */
html {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%;
}
#wrapper {
  padding-bottom: 200px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  .inside {
    height: 170px;
  }
}

/**
 * Custom
 */

.inside {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

#header {
  background-color: $main-color;
  border-bottom: $alt-color 2px solid;

  .inside {
    height: 178px;
  }
}

#container {
  padding: 40px 0;
}

#footer {
  background-color: $main-color;
  border-top: $alt-color 2px solid;
  padding: 30px 0 0;
  color: $alt-color;
  font-size: font-size(14px);
  font-weight: 300;
}

#logo {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

#main-nav {
  text-transform: uppercase;
  font-size: $font-size-mainnav;
  font-weight: 300;
  position: absolute;
  top: 50%;
  right: 0;

  a {
    color: $alt-color;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;

    &:hover {
      color: $link-color;
    }
  }

  span {

    &.active,
    &.trail {
      color: $link-color;
    }
  }

  a,
  span {

    display: block;

    &.home {
      @include fa-text-replacement($font-size-mainnav * $line-height-default / 100% * $font-size-default,$font-size-mainnav / 100% * $font-size-default);

      &:before {
        @include font-awesome;
        content: '\f015';
      }
    }
  }

  li {
    float: left;
    padding: 0 13px;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }
}