// For styles applied to all media regardless of width, which can be overriden for other media.

body {
  background: darken(@colorBaseDark, 10%);
}

#page {
  background: @colorWhite;
}

h3 {
  border-bottom: 1px dotted darken(@bodyColor, 66.66%);
}

fieldset {
  border: 1px solid darken(@bodyColor, 20%);
}

thead th {
  background: darken(@bodyColor, 4%);
  border-bottom: 1px solid darken(@bodyColor, 20%);
  border-top: darken(@bodyColor, 20%);
}

tr.odd {
  background: @bodyColor;
}

tr.even {
  background: darken(@bodyColor, 4%);
}

.sticky-header th, .sticky-table th {
  border-bottom: @size4 solid lighten(@colorBase, 40%);
}

abbr[title] {
  border-bottom: 1px dotted lighten(@textColor, 50%);
}

blockquote {
  color: lighten(@textColor, 20%);
  border-left: @size4 solid lighten(@textColor, 20%);
}

hr {
  background: @textColor;
}

mark {
  background: lighten(@colorBase, 50%);
  color: darken(@colorBase, 100%);
}

// buttons
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
button,
input.form-submit,
a.button {
  .button();
  margin-right: @size3;
  text-transform: uppercase;
}

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  .vertical-gradient(@colorWhite, darken(@colorWhite, 5%));
  color: darken(@colorWhite, 100%);
}

#header-wrapper {
  background: @colorBase;
}

#billboard-wrapper {
  background: lighten(@colorGrey, 45%);
}

#appendix-wrapper {
  background: @colorBase;
}
#navigation-wrapper,
#rider-wrapper {
  background: @colorBaseDark;
  border-bottom: 2px solid darken(@colorBaseDark, 10%);
}
#footer-wrapper,
#secondary-menu-wrapper,
#theme-attribution-wrapper {
  background: darken(@colorBaseDark, 10%);
}

#footer-wrapper {
  border-top: 1px solid @colorBaseDark;
}

#billboard,
#placard,
#supplement,
#appendix,
#rider,
#main-container {
  padding-top: @size1;
}

#footer {
  padding-top: @size2;
}

#branding {
  padding: @size3 0;
}

#site-name {
  .font-size(24);
  margin: 0;
  a {
  color:@colorWhite;
  }
}

#site-slogan {
  color: lighten(@colorGrey, 30%);
  .font-size();
}

// SEARCH
.search-results  {
  .search-url {
    color: @colorGreen;
  }
  .search-info {
    color: darken(@colorGreen, 50%);
  }
}

// VERTICAL TABS
.vertical-tab-button-error a {
  border: 1px solid @colorRed;
}

// BLOCKS
.block {
  #header-annex & {
    color: lighten(@colorGrey, 30%);
    text-align: center;
    &.block-last {
      margin-bottom: @size2;
    }
    .block-title {
      .visually-hidden();
    }
    a {
      color: @colorWhite;
      &:hover {
        color: darken(@colorWhite, 5%);
      }
    }
    ul.menu {
      .inline-list();
      text-align: center;
      padding-top: @size3;
      padding-bottom: @size3;
      margin: 0 auto;
    }
  }
  #navigation & {
    &.block-last {
      margin-bottom: 0;
    }
  }
  #sidebar-first &,
  #supplement &,
  #appendix &,
  #rider & {
    .padding();
  }
  #sidebar-first &,
  #supplement &,
  #appendix & {
    background: lighten(@colorGrey, 45%);
  }
  #rider & {
    background: lighten(@colorGrey, 25%);
    color: darken(@textColor, 25%);
    a {
      color: lighten(@linkColor, 10%);
      &:hover {
        color: lighten(@linkColor, 20%);
      }
    }
  }
  #sidebar-second & {
    .block-title {
      border-bottom: 1px dashed @textColor;
      clear: right;
      display: inline-block;
      .font-size();
      padding-bottom: @size4;
    }
  }
  #footer & {
    color: lighten(@colorGrey, 20%);
    .font-size(@msSmaller1);
    a {
      color: lighten(@linkColor, 20%);
      &:hover {
        color: lighten(@linkColor, 30%);
      }
    }
    .block-title {
      .font-size();
    }
  }
}

#block-system-main {
  background: transparent;
}

// Search Block
#search-block-form {
  .form-submit {
    font-family: "Noceda Font Pro";
  }
  input[type="search"] {
    width: 70%;
  }
}

// NAVIGATION LINKS
#main-menu,
#navigation {
  margin-bottom: 0;
}

ul.menu {
  #main-menu &,
  #navigation & {
  a {
    color: @colorWhite;
    padding-top: @size3;
    padding-bottom: @size3;
    &:hover {
      background: darken(@colorGrey, 20%);
    }
  }
  }
}

#block-system-main-menu ul ul.menu {
    .hidden();
}
