// Root
//
// The HTML root component contains the doctype, HTML element, HEAD element and
// BODY element. It also contains the CSS for those elements and the `*`
// universal selector.
//
// weight: 1
//
// Style guide: base.root


// Use the saner border-box model for all elements.
*, *:before, *:after {
  box-sizing: border-box;
}


//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
//    without disabling user zoom.
//

html {
  font-size: 16px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: sans-serif; // 1
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; // 2
}

body {
  margin: 0;
  font-size: $font-size-small;
  line-height: $line-height-base;
	word-wrap: break-word;
  -webkit-font-smoothing: antialiased;

  @include for-tablet-portrait-up {
    font-size: $font-size-base;
    line-height: 1.625rem;
  }

}

// Provide accessible positioning for skip links.
// The visibility will be handled by the links themselves.
#skip-link {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 15000;

  a {
    background: $gray-darker;
    @include z-depth-3;
    color: $gray-lightest;
    padding: 3px 20px 8px;
    text-decoration: none;
    border-radius: 0 0 10px 10px;
  }
}
