*
{
	@include box-sizing(border-box);
}

$screen: "only screen";
$small: "only screen and (max-width: 767px)";

html
{
  height: 100%;
}

html, body
{
	font-size: 100%;
}

body
{
  line-height: 1.3;
  color: $textColor;
  height: 100%;
  width: 100%;
  position: relative;
	 font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  background: $darkColor image-url('stripe.png') repeat-x top;
	

  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

// Get rid of gap under images by making them display: inline-block; by default
img
{
  display: inline-block;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

// Grid Defaults to get images and embeds to work properly
img, object, embed
{
  max-width: 100%;
  height: auto;
}

object, embed
{
  height: 100%;
}

.center
{
	text-align: center;
}

.article
{
  color: darken($midColor, 10%);
  padding-bottom: 50px;
}

div[data-part]
{
  display: none;
}
div[data-part="gettingstarted"]
{
  display: block;
}


// app area
.app
{
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
  padding: 100px 20px 0;
  position: relative;

  @extend %clearfix;

  @media #{$small}
  {
    padding-top: 40px;
  }
}

.app-main
{
  width: 500px;
  max-width: 100%;
  float: right;

  @media #{$small}
  {
    float: none;
  }
}

.app-nav
{
  $height: 50px;
  @extend %clearfix;

  margin-bottom: 40px;
  
  a
  {
    background: darken($darkColor, 2%);
    display: inline-block;
    height: $height + 3;
    line-height: $height;
    padding: 0 15px;
    color: white;
    float: left;
    cursor: pointer;
    outline-color: transparent !important;

    &.is-active
    {
      background: darken($darkColor, 4%);
      border-bottom: 3px solid $primaryColor;
    }
    &:first-child { border-radius: 4px 0 0 4px; }
    &:last-child { border-radius: 0 4px 4px 0; }

    @media #{$small}
    {
      display: block;
      float: none;
    }
  }
}