@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

$font--light: 300;
$font--normal: 400;
$font--bold: 700;

$padding--default: 2rem;
$margin--default: 1.25rem;

$grey--default: #aaa;
$color--accent: #2196F3;
$color--contrast: #4CAF50;
$color--contrast-light: lighten($color--contrast, 15%);
/*
 * Defaults
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 1rem/1 'Roboto Condensed', sans-serif;
  font-weight: $font--light;
  color: #333;
  background: #f1f1f1;
  border-top: .5rem solid $color--accent;
}

a {
  color: $color--contrast;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-weight: $font--normal;
  transition: color linear .25s;
    &:hover {
      color: $color--contrast-light;
    }
}

.site-header {
  width: 100%;
  height: auto;
  background: #fff;
  border-bottom: 1px solid $grey--default;
}

h1,h2,h3,h4,h5,h6 {
  line-heigt: 1.56;
  margin-bottom: .25em;
}

h1 {
  
}

h2 {
  
}

h3 {
  font-weight: $font--bold;
}

h4 {
  font-size: 1.15rem;
  margin-bottom: $margin--default/2;
  font-weight: $font--light;
}

pre {
  overflow: scroll;
  border: 1px solid $grey--default;
  padding: .25rem;
  background: #fff;
}

.block {
  padding: $padding--default;
  border: 1px solid $grey--default;
  background: #fff;
  margin-top: $margin--default;
}

.wrap.wrap {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
}

// Used to determine max value, should be approximately 1px (if not exactly 1px)
$smallest-unit: .0625em;

// List of all breakpoints, and their minimum width
// Human names can be changed, they will be used for $breakpoint param on breakpoint mixin
$all-breakpoints: (
  ('enormous-', 110em),
  ('huge-', 75em),
  ('large-', 60em),
  ('medium-', 45em),
  ('small-', 30em),
  ('tiny-') // Last value should not have a value, it's min value will essentially be 0
);

// Default resolution, this should only change if the CSS Spec for pixel-ratio changes
$res-base: 96;
$res-units: dpi;

@mixin breakpoint($breakpoint, $up-or-down: null, $px-ratio: null){
  // Set min res if px-ratio is set
  $min-resolution: null;
  @if ($px-ratio != null) {
    $min-resolution: #{round($res-base * $px-ratio) + $res-units};
  }

  // Variable to track if the breakpoint the user asked for exists
  $breakpoint_exists: false;

  // Iterate through list of breakpoints
  // Using for instead of each to get the index which is useful
  @for $i from 1 through length($all-breakpoints) {
    // Are we on the largest or smallest breakpoint
    $largest-breakpoint: if($i == 1, true, false);
    $smallest-breakpoint: if($i == length($all-breakpoints), true, false);

    // Get the breakpoint from the index we're on
    $current-breakpoint: nth($all-breakpoints, $i);
    $current-breakpoint-name : nth($current-breakpoint, 1);

    // Support for '-major' and '-minor' breakpoints
    $is-major: false;
    $is-minor: false;
    $is-minor-or-major: false;
    @if ($current-breakpoint-name  + '-major') == $breakpoint {
      $is-major: true;
      $is-minor-or-major: true;
      $breakpoint: $current_breakpoint-name;
    } @else if ($current-breakpoint-name  + '-minor') == $breakpoint {
      $is-minor: true;
      $is-minor-or-major: true;
      $breakpoint: $current_breakpoint-name;
    }

    @if $current-breakpoint-name == $breakpoint {
      $breakpoint_exists: true;

      // Get minimum value
      $breakpoint-min: null;
      @if ($smallest-breakpoint == false){
        $breakpoint-min: nth($current-breakpoint, 2);
      }

      // Get Maximum value
      $previous-breakpoint-min: null;
      $breakpoint-max: null;
      @if ($largest-breakpoint == false){
        $previous-breakpoint: nth($all-breakpoints, $i - 1);
        $previous-breakpoint-min: nth($previous-breakpoint, 2);
        $breakpoint-max: $previous-breakpoint-min - $smallest-unit;
      }

      // Get the halfway point for the breakpoint if it's a major or minor breakpoint
      $breakpoint-halfway: null;
      @if ($is-minor-or-major) {
        $breakpoint-halfway: floor(($previous-breakpoint-min - $breakpoint-min) / 2) + $breakpoint-min;
      }

      // Unset breakpoint-min if the breakpoint is to be and down
      @if ($up-or-down == 'and down') {
        $breakpoint-min: null;
      }

      // Unset breakpoint-max if the breakpoint is to be and up
      @if ($up-or-down == 'and up') {
        $breakpoint-max: null;
      }

      // Evaluate if both min and max values have been set
      $breakpoint-min-and-max: false;
      @if ($breakpoint-min != null) {
        @if ($breakpoint-max != null) {
          $breakpoint-min-and-max: true;
        }
      }

      // If smallest breakpoint and up
      $smallest-and-up: false;
      @if ($smallest-breakpoint){
        @if ($up-or-down == 'and up') {
          $smallest-and-up: true;
        }
      }

      // If largest breakpoint and up
      $largest-and-down: false;
      @if ($largest-breakpoint){
        @if ($up-or-down == 'and down') {
          $largest-and-down: true;
        }
      }

      // Catch a boo boo
      @if ($smallest-and-up) {
        @warn "Called the smallest breakpoint and up (which is everything)";
        @content;
      }
      // Catch a boo boo
      @else if ($largest-and-down) {
        @warn "Called the largest breakpoint and down (which is everything)";
        @content;
      }
      // Just this breakpoint
      @else if ($breakpoint-min-and-max){
        // No pixel ratio
        @if($px-ratio == null){
          @media
          only screen
          and (min-width: $breakpoint-min)
          and (max-width: $breakpoint-max) {
            @content;
          }
        }

        // Pixel ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (min-width: $breakpoint-min)
            and (max-width: $breakpoint-max) {
            @content;
          }
        }
      }

      // This breakpoint and up
      @else if ($breakpoint-min != null){
        // No pixel ratio
        @if ($px-ratio == null){
          @media
          only screen
          and (min-width: $breakpoint-min) {
            @content;
          }
        }

        // Pixel ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (min-width: $breakpoint-min) {
            @content;
          }
        }
      }

      // This breakpoint and down
      @else if ($breakpoint-max != null){
        // No pixel ratio
        @if ($px-ratio == null){
          @media
          only screen
          and (max-width: $breakpoint-max) {
            @content;
          }
        }

        // Pixel Ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (max-width: $breakpoint-max) {
            @content;
          }
        }
      }
    }
  }
  @if ($breakpoint_exists == false) {
    @warn 'Breakpoint \"' + $breakpoint + '\" does not seem to exist, please check your spelling.';
  }
}

/**
 * bullgrid
 *
 * A grid based on the ideas of inuit.css gridsystem. 
 * https://github.com/synoa/bullgrid
 *
 */

 /**
  * Default spacing 
  */
$bullgrid-default-spacing: 1em;





/**
 * Micro clearfix. 
 */
.cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  // IE <= 7 support
  *zoom: 1;
}





/**
 * Grid wrapper
 */
.gw {
  @extend .cf;

  /**
   * Negative margin to negate the padding on the first grid child.
   */
  margin-left: -$bullgrid-default-spacing;
    
  /**
   * The following declarations allow us to use the `.gw` class on lists.
   */
  list-style: none;
  margin-bottom: 0;
}





/**
 * Reverse grid order
 *
   <div class="gw gw--rev">

     <div class="g one-third">
       <p>Appears on the right</p>
     </div>

     <div class="g two-thirds">
       <p>Appears on the left</p>
     </div>

   </div>
 *
 */
.gw--rev > .g {
  float: right;
}





/**
 * Very infrequently occuring grid wrappers as children of grid wrappers.
 */
.gw > .gw {
  margin-left: 0;
}





/**
 * Remove the spacing of the grid-wrapper. 
 */
.gw--no-spacing {
  margin-left: 0;
}





/**
 * Grid
 *
 */
.g {
  float: left;
  padding-left: $bullgrid-default-spacing;
}





/**
 * Remove the spacing of the grid. 
 */
.g--no-spacing {
  padding-left: 0;
}





/**
 *
 * Sizes in human readable format.
 *
 */
@mixin grid-setup($namespace: "") {

  /*
   * Float
   */
  .#{$namespace}float-left { 
    float: left; 
  }

  .#{$namespace}float-right { 
    float: left; 
  }

  .#{$namespace}clear { 
    clear: both; 
  }




  
  /*
   * Hidden
   */
  .#{$namespace}hidden { 
    display: none; 
  }





  /**
   * Whole
   */
  .#{$namespace}one-whole { 
    width: 100%; 
  }





  /**
   * Halves
   */
  .#{$namespace}one-half { 
    width: 50%; 
  }





  /**
   * Thirds
   */
  .#{$namespace}one-third { 
    width: 33.333%; 
  }
  .#{$namespace}two-thirds { 
    width: 66.666%; 
  }





  /**
   * Quarters
   */
  .#{$namespace}one-quarter { 
    width: 25%; 
  }
  .#{$namespace}two-quarters { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}three-quarters { 
    width: 75%; 
  }





  /**
   * Fifths
   */
  .#{$namespace}one-fifth { 
    width: 20%; 
  }
  .#{$namespace}two-fifths { 
    width: 40%; 
  }
  .#{$namespace}three-fifths { 
    width: 60%; 
  }
  .#{$namespace}four-fifths { 
    width: 80%; 
  }





  /**
   * Sixths
   */
  .#{$namespace}one-sixth { 
    width: 16.666%; 
  }
  .#{$namespace}two-sixths { 
    @extend .#{$namespace}one-third; 
  }
  .#{$namespace}three-sixths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}four-sixths { 
    @extend .#{$namespace}two-thirds; 
  }
  .#{$namespace}five-sixths { 
    width: 83.333%; 
  }





  /**
   * Eighths
   */
  .#{$namespace}one-eighth { 
    width: 12.5%; 
  }
  .#{$namespace}two-eighths {
     @extend .#{$namespace}one-quarter; 
   }
  .#{$namespace}three-eighths { 
    width: 37.5%; 
  }
  .#{$namespace}four-eighths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}five-eighths { 
    width: 62.5%; 
  }
  .#{$namespace}six-eighths { 
    @extend .#{$namespace}three-quarters; 
  }
  .#{$namespace}seven-eighths { 
    width: 87.5%; 
  }





  /**
   * Tenths
   */
  .#{$namespace}one-tenth { 
    width: 10%; 
  }
  .#{$namespace}two-tenths { 
    @extend .#{$namespace}one-fifth; 
  }
  .#{$namespace}three-tenths { 
    width: 30%; 
  }
  .#{$namespace}four-tenths { 
    @extend .#{$namespace}two-fifths; 
  }
  .#{$namespace}five-tenths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}six-tenths { 
    @extend .#{$namespace}three-fifths; 
  }
  .#{$namespace}seven-tenths { 
    width: 70%; 
  }
  .#{$namespace}eight-tenths { 
    @extend .#{$namespace}four-fifths; 
  }
  .#{$namespace}nine-tenths { 
    width: 90%; 
  }





  /**
   * Twelfths
   */
  .#{$namespace}one-twelfth { 
    width: 8.333%; 
  }
  .#{$namespace}two-twelfths { 
    @extend .#{$namespace}one-sixth; 
  }
  .#{$namespace}three-twelfths { 
    @extend .#{$namespace}one-quarter; 
  }
  .#{$namespace}four-twelfths { 
    @extend .#{$namespace}one-third; 
  }
  .#{$namespace}five-twelfths { 
    width: 41.666%;
  }
  .#{$namespace}six-twelfths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}seven-twelfths { 
    width: 58.333%; 
  }
  .#{$namespace}eight-twelfths { 
    @extend .#{$namespace}two-thirds; 
  }
  .#{$namespace}nine-twelfths { 
    @extend .#{$namespace}three-quarters; 
  }
  .#{$namespace}ten-twelfths { 
    @extend .#{$namespace}five-sixths; 
  }
  .#{$namespace}eleven-twelfths { 
    width: 91.666%; 
  }
}





/**
 * Create the grids for the default view. 
 */
@include grid-setup();





/**
 * Create the grids for different viewport sizes. 
 *
 * Use this with the breakpoint mixin provided or you your own
 */

//
// Auto generate the code based on the list of breakpoints
//
 @for $i from 1 through length($all-breakpoints) {
   $current-breakpoint: nth($all-breakpoints, $i);
   $current-breakpoint-name: nth($current-breakpoint, 1);

     @include breakpoint($current-breakpoint-name, "and down") {
     @include grid-setup(#{$current-breakpoint-name});
   }
 }

//
// Declared manually
//
// @include breakpoint(large) {
//   @include grid-setup("large-");
// }
//
// @include breakpoint(medium) {
//   @include grid-setup("medium-");
// }