/*  Typography
    The font sizes and line heights have been calculated assuming a body font
    size of 14sp and a subhead font size of 16sp, which are the MD values for
    devices. The desktop sizes are 13sp and 15sp respectively.
    Letter spacing (tracking) values in the spec are assumed to be in units of
    1/1000 em. They are commented out as the results don't match the image in
    the spec.
 */
html > body {
    font-family: Roboto, 'Helvetica','Arial', sans-serif;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

/* Improve layout of navigation elements. */
.mdl-layout-title > img {
    height: 48px;
    margin-right: 8px;
}
.mdl-navigation__link--icon > .material-icons {
    margin-right: 32px;
}

/* Misc */
a {
    text-decoration:none;
}
.mdl-layout__content {
    padding: 16px;
    background: #FAFAFA;
}

/* Progress indication for search and contributor listing. */
#progress {
    margin: 16px;
}
#progress.hidden {
    display: none;
}

/* For MD subheaders suitable for lists, menus and grids. */
.subheader {
    color: rgba(0, 0, 0, 0.54);
    padding-left: 16px;
    height: 48px;
    line-height: 48px;
}
/* For MD navigation drawer subheaders. */
nav > .subheader {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin-top: 8px;
}

/* For MD generic dividers. */
.divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}
/* For MD navigation drawer dividers. */
nav > .divider {
    margin: 8px 0;
}

/* Custom two-line Material Design item with avatar. */
.loot-contributor {
    display: inline-block;
    height: 40px;
    width: 192px;
    padding: 16px;
    margin: 4px;
    background: white;
    color: inherit;
    white-space: nowrap;
}
.loot-contributor__avatar,
.loot-contributor__text {
    display: inline-block;
}
.loot-contributor__avatar > * {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}
.loot-contributor__avatar {
    vertical-align: top;
}
.loot-contributor__avatar > .material-icons {
    font-size: 40px;
    text-align: center;
    color: rgba(0, 0, 0, 0.54);
}
.loot-contributor__text {
    width: calc(100% - 56px);
}
.loot-contributor__name {
    overflow: hidden;
    text-overflow: ellipses;
}
.loot-contributor__contributions {
    font-size: 0.857rem;
    color: rgba(0, 0, 0, 0.54);
}
.loot-admin .loot-contributor__contributions,
.loot-member .loot-contributor__contributions {
    color: rgba(255, 255, 255, 0.7);
}

/* For masterlist search results. */
code.loot-search-result {
    background: white;
    white-space:pre;
    display:block;
    overflow-x:auto;
    font-family: monospace;
    font-size: 1rem;
    padding: 16px;
    border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
code.loot-search-result:first-of-type {
    border-top: none;
}

/* Scale headings */
h3 {
    font-size: 20px;
    line-height: 30px;
    margin: 30px 0 20px;
}
h4 {
    font-size: 16px;
    line-height: 24px;
    margin: 24px 0 16px;
}
h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    margin: 21px 0 14px;
}

/* Position readme version selector */
#versionSelect {
  position: relative;
  left: 5px;
}

/* Improve code styling. */
pre {
  border: 1px solid #e1e4e5;
  background-color: white;
  padding: 8px;
  overflow: auto;
}
pre code:not(.loot-search-result) {
  padding: 0;
  color: black;
  border: none;
}
code:not(.loot-search-result) {
  background-color: white;
  padding: 2px 5px;
  color: #E74C3C;
  border: 1px solid #e1e4e5;
}

/* Remove extra margin above the first heading of a page. */
h3:first-child {
  margin-top: 0;
}

/* Space out definition list items. */
dt:not(:first-child) {
  margin-top: 16px;
}

/* Convert settings page styling. */
section {
    display: inline-block;
    width: 45%;
    padding: 8px;
}
#input, #output {
    width: 100%;
    min-height: 400px;
}