@import "global";
*
{
  @include box-sizing(border-box);
}
html
{
    height: 100%;
    font-size: $font-size;
}
body
{
    font-family: $font-body;
    line-height: 1.3333;
    min-height: 100%;
    position: relative;
}
.bg-image-full
{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  @include background-size(cover);
}
iframe, img { max-width: 100%; }
iframe { margin: 0 auto; display: block; }
code { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif; }

h1, h2, h3, h4, h5, h6
{
  font-family: $font-header;
}
h1, h2, h3, h4
{
  margin-bottom: $spacing-vertical / 2;
  margin-top: $spacing-vertical / 2;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.4em; }
nav
{
  font-size: 1.1em;
  font-family: $font-header;
}
sup, sub {
 vertical-align: baseline;
 position: relative;
 top: -0.4em;
}
sub { top: 0.4em; }
section
{
  margin-bottom: $spacing-vertical;
  &:last-child
  {
    margin-bottom: 0;
  }
}

.hide { display: none; }
.spacer-half { margin-bottom: $spacing-vertical / 2; }
.spacer1 { margin-bottom: $spacing-vertical; }
.spacer2 { margin-bottom: $spacing-vertical * 2; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.meta { font-size: 0.8em; }
.meta-large { font-size: 1.2em; }
.clear { clear: both; }

.link-primary
{
  @include anchor($color-primary);
}
a:hover img
{
  opacity: 0.75;
}

.control-group
{
}
.control-item
{
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
  &:first-child
  {
    margin-left: 0;
  }
  &:last-child
  {
    margin-right: 0;
  }
  &.no-label-desktop
  {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.btn-primary, .btn-alt
{
  cursor: pointer;
  display: inline-block;
  height: $spacing-vertical * 1.5;
  line-height: $spacing-vertical * 1.5;
  padding: 0 15px;
  text-decoration: none;
  border: 0 none;
  text-align: center;

}
.btn-primary
{
  color: white;
  @include linear-gradient(lighten($color-primary, 5), darken($color-primary, 5));
  background-color: $color-primary;
  border: 1px solid black;
}
.btn-alt
{
  @include linear-gradient(lighten($color-light-alt, 5), darken($color-light-alt, 5));
  color: hsl(hue($color-primary), 85, 15);
  border: 1px solid darken($color-primary, 10);
}
.btn-full-width
{
  width: 100%;
}
.no-label .btn-label
{
  @include offscreen();
}

.tiles
{
    > .tile
    {
        float: left;
        margin-right: 20px;
        margin-bottom: $spacing-vertical;
    }
    @include clearfix();
}

.clearfix
{
  @include clearfix();
}

.table-layout
{
  td 
  {
    padding: 3px 5px $spacing-vertical - 3px;
    vertical-align: middle;
  }
}

@media (max-width: $mobile-width-threshold)
{
  .fullscreen
  {
    display: none;
  }
}
@media (min-width: $mobile-width-threshold)
{
  .mobile
  {
    display: none;
  }
  .no-label-desktop .btn-label
  {
    @include offscreen();
  }
}


body
{
  @include display-flex();
  @include flex-flow(column);
  min-height: 100vh;
  main
  {
    @include flex(2);
  }
}