@import "bootstrap/type";

html, body {
  height: 100%;
  margin: 0;
}

.page {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -60px;
}
.page-foot,
.push {
  height: 60px;
}

.content-title {
  border-bottom: 1px solid $nav-tabs-border-color;
}

.container-centered {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
}

.container-centered-large {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

.container-focus {
  max-width: 600px;

  h2, .h2,
  h3, .h3 {
    margin-bottom: $padding-large-vertical * 4;
  }

  p, li, blockquote {
    line-height: 2em;
    font-size: 16px;
  }
}

.shadow {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.content-section {
  font-size: 16px;
  line-height: 1.8em;

  p,
  ol,
  ul,
  blockquote,
  table,
  h1,
  h2 {
    line-height: 1.8em;
    margin-bottom: 2em;
  }

  h3, h4, h5, h6 {
    margin-bottom: 1.5em;
  }

  h3, h4, h5, h6 {
    font-weight: bold;
  }

  ol li,
  ul li {
    margin-bottom: 1em;
  }

  .table > tbody > tr > td,
  .table > tbody > tr > th,
  .table > tfoot > tr > td,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > thead > tr > th {
    padding: 12px;
  }

  .table > tbody > tr > th,
  .table > thead > tr > th {
    font-size: 16px !important;
  }

}

.negative-margin {
  margin: -($padding-large-horizontal);
}

// Margin Helpers
.m-auto { margin: 0 !important; }
.mb-auto { margin-bottom: auto !important; }
.mt-auto { margin-top: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mlr-auto { margin-left: auto !important; margin-right: auto !important; }
.mbt-auto { margin-bottom: auto !important; margin-top: auto !important; }

.m-0 { margin: 0 !important; }
.m-1 { margin: $padding-large-vertical * 1 !important; }
.m-2 { margin: $padding-large-vertical * 2 !important; }
.m-3 { margin: $padding-large-vertical * 3 !important; }
.m-4 { margin: $padding-large-vertical * 4 !important; }
.m-5 { margin: $padding-large-vertical * 5 !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: $padding-large-vertical * 1 !important; }
.mt-2 { margin-top: $padding-large-vertical * 2 !important; }
.mt-3 { margin-top: $padding-large-vertical * 3 !important; }
.mt-4 { margin-top: $padding-large-vertical * 4 !important; }
.mt-5 { margin-top: $padding-large-vertical * 5 !important; }
.mt-6 { margin-top: $padding-large-vertical * 6 !important; }
.mt-7 { margin-top: $padding-large-vertical * 7 !important; }
.mt-8 { margin-top: $padding-large-vertical * 8 !important; }
.mt-9 { margin-top: $padding-large-vertical * 9 !important; }
.mt-10 { margin-top: $padding-large-vertical * 10 !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: $padding-large-vertical * 1 !important; }
.mb-2 { margin-bottom: $padding-large-vertical * 2 !important; }
.mb-3 { margin-bottom: $padding-large-vertical * 3 !important; }
.mb-4 { margin-bottom: $padding-large-vertical * 4 !important; }
.mb-5 { margin-bottom: $padding-large-vertical * 5 !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: $padding-large-vertical * 1 !important; }
.ml-2 { margin-left: $padding-large-vertical * 2 !important; }
.ml-3 { margin-left: $padding-large-vertical * 3 !important; }
.ml-4 { margin-left: $padding-large-vertical * 4 !important; }
.ml-5 { margin-left: $padding-large-vertical * 5 !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: $padding-large-vertical * 1 !important; }
.mr-2 { margin-right: $padding-large-vertical * 2 !important; }
.mr-3 { margin-right: $padding-large-vertical * 3 !important; }
.mr-4 { margin-right: $padding-large-vertical * 4 !important; }
.mr-5 { margin-right: $padding-large-vertical * 5 !important; }

// Padding Helpers
.p-auto { padding: 0 !important; }
.pb-auto { padding-bottom: auto !important; }
.pt-auto { padding-top: auto !important; }
.pl-auto { padding-left: auto !important; }
.pr-auto { padding-right: auto !important; }
.plr-auto { padding-left: auto !important; padding-right: auto !important; }
.pbt-auto { padding-bottom: auto !important; padding-top: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: $padding-large-vertical * 1 !important; }
.p-2 { padding: $padding-large-vertical * 2 !important; }
.p-3 { padding: $padding-large-vertical * 3 !important; }
.p-4 { padding: $padding-large-vertical * 4 !important; }
.p-5 { padding: $padding-large-vertical * 5 !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: $padding-large-vertical * 1 !important; }
.pt-2 { padding-top: $padding-large-vertical * 2 !important; }
.pt-3 { padding-top: $padding-large-vertical * 3 !important; }
.pt-4 { padding-top: $padding-large-vertical * 4 !important; }
.pt-5 { padding-top: $padding-large-vertical * 5 !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: $padding-large-vertical * 1 !important; }
.pb-2 { padding-bottom: $padding-large-vertical * 2 !important; }
.pb-3 { padding-bottom: $padding-large-vertical * 3 !important; }
.pb-4 { padding-bottom: $padding-large-vertical * 4 !important; }
.pb-5 { padding-bottom: $padding-large-vertical * 5 !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: $padding-large-vertical * 1 !important; }
.pl-2 { padding-left: $padding-large-vertical * 2 !important; }
.pl-3 { padding-left: $padding-large-vertical * 3 !important; }
.pl-4 { padding-left: $padding-large-vertical * 4 !important; }
.pl-5 { padding-left: $padding-large-vertical * 5 !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: $padding-large-vertical * 1 !important; }
.pr-2 { padding-right: $padding-large-vertical * 2 !important; }
.pr-3 { padding-right: $padding-large-vertical * 3 !important; }
.pr-4 { padding-right: $padding-large-vertical * 4 !important; }
.pr-5 { padding-right: $padding-large-vertical * 5 !important; }

// Typography
.lead {
  color: $gray;
  font-size: 18px;
  font-weight: 300;
  line-height: 2em;
}