/* Grid layout for the main body so we can position the sidebar without
 * breaking stuff when tiny spacing changes occur */
#ds-content {
  display: grid;
  grid-template-columns: 675px 249px;
  column-gap: 26px;
  padding-top: 10px;
}

/* Header fix - <h1> should be the header visually and non-visually */
h1.page-header {
  font-size: 46px;
  height: auto;
}

/* Accessible focus indicators */
a {
  outline: none;
}
a:focus {
  box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset; border-radius: 2px;
}
input:focus,select:focus {
  box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset; border-radius: 2px;
}

/* Hidden elements that become visible when focused - basically the skip link */
#skip-link a {
  padding: 6px;
  font-weight: normal;
  position: absolute;
  top: -40px;
  left: 0px;
  color: white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-right-radius: 8px;
  background: transparent;
  -webkit-transition: top 1s ease-out, background 1s linear;
  transition: top 1s ease-out, background 1s linear;
  z-index: 100;
  color: white;
}
#skip-link a:focus {
  top:0px;
  background:#333333;
  outline:0;
  -webkit-transition: top .1s ease-in, background .5s linear;
  transition: top .1s ease-in, background .5s linear;
}

/* Metadata lists */
dl.metadata {
  display: grid;
  grid-template-columns: 80px auto;
  grid-column-gap: 7px;
}

dl.metadata > dt {
  grid-column: 1;
  font-weight: bold;
  justify-self: end;
}
dl.metadata > dt:after {
  content: ":";
}

dl.metadata > dd {
  grid-column: 2;
  display: inline-flex;
}

/* No centering in the full metadata view */
.full-item-metadata th {
  text-align: left;
}
/* No coloring of row-scoped table headers in the full metadata view */
.full-item-metadata th[scope=row] {
  background-color: white;
}

/* labeled fields need to have buttons able to show up on their row - the most
 * common use case for these fields will be "one line" forms, since the tall
 * forms tend to use the "list" form approach in DSpace. */
.labeled-field {
  display: inline;
}

.labeled-field label, .labeled-field div {
  display: inline;
}