@import url("_variables.css");
@import url("_base.css");
@import url("components/_buttons.css");
@import url("components/_progress.css");
@import url("components/_timer.css");
@import url("_lrn-overrides.css");
@import url("_oup.css");
@import url("_ttd.css");

.oup-wrapper {
  .navbar {
    color: var(--color-headertext);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border-heavy);

    .navbar-brand {
      padding-right: 0;

      .header-logo {
        width: 60px;
        position: relative;
        top: 10px;
      }
    }

    .oup-logo {
      display: inline-flex;
      vertical-align: bottom;
    }

    .oup-titles {
      display: inline-flex;
      align-items: baseline;
      font-size: 1.6em;

      * {
        margin-bottom: 0;
      }

      .oup-subtitle {
        font-weight: 400;
        padding-left: 0.5em;
      }
    }

    .oup-user {
      color: var(--color-subtext);
      font-weight: bold;
      font-size: var(--font-size-small);
      text-align: right;

      .oup-user-id {
        padding-left: 0.8em;
      }
    }
  }

  .border-top {
    border-top: 1px solid var(--color-border-heavy);
  }

  main.container {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 75vh;
  }

  footer {
    background-color: var(--color-background);
  }
}