/* rshc archive: early Mac OS X ("Aqua") look.

   Built for browsers from the 2010s onward. Layout uses only block flow,
   floats, table display and inline-blocks, so nothing depends on flexbox,
   grid, custom properties, calc(), min(), max() or clamp(). Gradients,
   rounded corners and shadows are declared after flat fallback colours, so an
   engine that lacks them shows the same layout with plainer surfaces.

   Colours are literal values rather than custom properties for that reason.
   The default theme is "blue"; data-theme="graphite" switches the accent
   surfaces to a graphite grey (see the theme section near the end). */


/* ---------- base ---------- */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: #5f8fcb;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9cc0ec), color-stop(1, #3561a6));
    background-image: -webkit-linear-gradient(top, #9cc0ec, #3561a6);
    background-image: -moz-linear-gradient(top, #9cc0ec, #3561a6);
    background-image: -o-linear-gradient(top, #9cc0ec, #3561a6);
    background-image: linear-gradient(to bottom, #9cc0ec, #3561a6);
    background-repeat: no-repeat;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    color: #000;
    font: 13px/1.45 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

header,
footer,
nav,
section,
article,
aside,
main,
figure,
figcaption,
details,
summary {
    display: block;
}

[hidden] {
    display: none !important;
}

::selection {
    color: #fff;
    background: #3d6fcf;
}

::-moz-selection {
    color: #fff;
    background: #3d6fcf;
}

a {
    color: #1b4f9c;
    text-decoration: underline;
}

a:hover {
    color: #0d3a80;
}

/* focus rings show only when the keyboard moves focus (:focus-visible). Clicks,
   autofocus and focus moved by scripts leave the element unringed. Engines that
   predate :focus-visible keep their own default ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #4b8cf0;
    outline-offset: 1px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: 0;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 8px;
    color: #000;
    font-weight: bold;
    line-height: 1.25;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

h4 {
    font-size: 13px;
}

p {
    margin: 0 0 9px;
}

small {
    font-size: 11px;
}

strong {
    font-weight: bold;
}

/* long names, links and identifiers wrap inside their boxes instead of running past them */
h1,
h2,
h3,
h4,
p,
li,
dt,
dd,
label,
code,
kbd,
pre,
.label,
.chip,
.icon-view__name,
.icon-view__kind,
.source-list a,
.pane-toolbar,
.inspector,
.comment,
.review,
.flash,
.author-notice,
.download-pool-status,
.post-byline,
.file-inspector__name,
.existing-file-row__heading {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

th,
td {
    overflow-wrap: anywhere;
}

/* anything not listed above wraps too, so an unbroken identifier cannot widen the page */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid #c9c9c9;
}

ul,
ol {
    margin: 0 0 10px 22px;
    padding: 0;
}

dl,
dd {
    margin: 0;
}

dt {
    font-weight: bold;
}

blockquote {
    margin: 0 0 10px;
    padding: 4px 12px;
    color: #333;
    border-left: 3px solid #9ab8e8;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

iframe,
video,
audio {
    max-width: 100%;
}

code,
kbd,
pre,
samp {
    font-family: Monaco, "Lucida Console", Consolas, "Courier New", monospace;
    font-size: 11px;
}

code,
kbd {
    padding: 0 3px;
    color: #000;
    background-color: #f1f1f1;
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    word-wrap: break-word;
}

kbd {
    padding: 0 4px;
    background-color: #fbfbfb;
    -webkit-box-shadow: 0 1px 0 #a8a8a8;
    -moz-box-shadow: 0 1px 0 #a8a8a8;
    box-shadow: 0 1px 0 #a8a8a8;
}

pre {
    overflow: auto;
    margin: 0 0 10px;
    padding: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #d0d0d0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
}

caption {
    padding: 0 0 6px;
    text-align: left;
}

th,
td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
    word-wrap: break-word;
}

th {
    font-weight: bold;
    color: #222;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #dcdcdc));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #dcdcdc);
    background-image: -moz-linear-gradient(top, #fbfbfb, #dcdcdc);
    background-image: -o-linear-gradient(top, #fbfbfb, #dcdcdc);
    background-image: linear-gradient(to bottom, #fbfbfb, #dcdcdc);
    border-bottom: 1px solid #b7b7b7;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
}

.skip-link:focus {
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    color: #000;
    background-color: #fff;
    border: 1px solid #4b8cf0;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.muted {
    color: #5c5c5c;
}

.lead {
    font-size: 15px;
    line-height: 1.5;
    color: #222;
}

.category {
    font-size: 11px;
    color: #555;
}


/* ---------- custom cursors ----------
   El Capitan style: a white arrow with a black keyline, a pointing hand over
   anything clickable, and an I-beam in text fields. The SVGs live in
   static/cursors/; the plain keywords are the fallback for engines without
   SVG cursors. */

html,
body {
    cursor: url("../cursors/arrow.svg") 1 1, default;
}

a,
button,
summary,
label[for],
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="color"],
input[type="file"],
input[type="range"],
[role="button"],
.button,
.chip,
.source-list a,
.footer-nav a,
.icon-view__item > a,
.prefs-item > a,
.css-toggle,
.theme-switch,
.flash-dismiss,
.download-menu > summary {
    cursor: url("../cursors/hand.svg") 9 3, pointer;
}

button:disabled,
input:disabled,
.button--disabled {
    cursor: url("../cursors/arrow.svg") 1 1, default;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input:not([type]),
textarea,
[contenteditable="true"] {
    cursor: url("../cursors/ibeam.svg") 7 11, text;
}

/* ---------- desktop and footer navigation ---------- */

.footer-nav {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 16px;
}

.footer-nav a,
.footer-nav .nav-button {
    display: inline-block;
    height: auto;
    min-height: 0;
    margin: 0 12px 0 0;
    padding: 0;
    color: #1b4f9c;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    background: none;
    background-image: none;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.footer-nav a:hover,
.footer-nav a:focus,
.footer-nav .nav-button:hover,
.footer-nav .nav-button:focus {
    text-decoration: underline;
}

.footer-nav a.active {
    font-weight: bold;
    color: #000;
}

.footer-nav form {
    display: inline;
    margin: 0;
}

.footer-tools {
    display: inline-block;
    margin-left: 12px;
    font-size: 11px;
    line-height: 20px;
}

.footer-tools > * {
    display: inline-block;
    vertical-align: middle;
}

.language-switcher a {
    display: inline-block;
    padding: 0 4px;
    color: #000;
    text-decoration: none;
}

.language-switcher a.active {
    font-weight: bold;
    text-decoration: underline;
}

.desktop {
    padding: 16px 16px 26px;
}

.site-shell {
    max-width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #4d4d4d;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}

.site-header {
    margin: 0;
}


/* ---------- window chrome ---------- */

.window-titlebar {
    position: relative;
    height: 22px;
    overflow: hidden;
    padding: 0 84px;
    text-align: center;
    font-size: 12px;
    line-height: 21px;
    font-weight: bold;
    color: #3d3d3d;
    text-shadow: 0 1px 0 #fff;
    background-color: #d6d6d6;
    background-image: -webkit-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -moz-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -o-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: repeating-linear-gradient(to bottom, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    border-bottom: 1px solid #6a6a6a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.window-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.window-controls {
    position: absolute;
    top: 5px;
    left: 8px;
    line-height: 0;
}

.window-controls i {
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 6px 0 0;
    border: 1px solid #c5423e;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: #fc5a54;
}

.window-controls i:nth-child(2) {
    border-color: #c48d25;
    background-color: #fdbb3c;
}

.window-controls i:nth-child(3) {
    border-color: #23962f;
    background-color: #33c748;
}

.masthead {
    overflow: hidden;
    padding: 9px 12px 8px;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f3f3f3), color-stop(1, #cdcdcd));
    background-image: -webkit-linear-gradient(top, #f3f3f3, #cdcdcd);
    background-image: -moz-linear-gradient(top, #f3f3f3, #cdcdcd);
    background-image: -o-linear-gradient(top, #f3f3f3, #cdcdcd);
    background-image: linear-gradient(to bottom, #f3f3f3, #cdcdcd);
    border-bottom: 1px solid #9d9d9d;
}

.brand {
    float: left;
    display: block;
    padding: 2px 0 0;
    color: #000;
    text-decoration: none;
}

.brand-copy strong {
    display: block;
    font-size: 17px;
    line-height: 20px;
}

.brand-copy small {
    display: block;
    font-size: 11px;
    line-height: 14px;
    color: #4f4f4f;
}

.header-search {
    position: relative;
    float: right;
    width: 300px;
    margin: 4px 0 0;
    padding-right: 74px;
}

.header-search input[type="search"] {
    width: 100%;
}

.header-search button {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px;
}

.sub-line {
    overflow: hidden;
    padding: 4px 12px;
    font-size: 11px;
    line-height: 16px;
    color: #4f4f4f;
    background-color: #efefef;
    border-bottom: 1px solid #c3c3c3;
}

.sub-line > span:first-child {
    float: left;
}

.sub-links {
    float: right;
}

.sub-links a {
    margin-left: 12px;
}

.site-main {
    padding: 18px 22px 24px;
    background-color: #fff;
}

.site-main:after {
    content: "";
    display: table;
    clear: both;
}

.site-footer {
    overflow: hidden;
    padding: 5px 12px;
    font-size: 11px;
    line-height: 16px;
    color: #3b3b3b;
    background-color: #e0e0e0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f3f3f3), color-stop(1, #d2d2d2));
    background-image: -webkit-linear-gradient(top, #f3f3f3, #d2d2d2);
    background-image: -moz-linear-gradient(top, #f3f3f3, #d2d2d2);
    background-image: -o-linear-gradient(top, #f3f3f3, #d2d2d2);
    background-image: linear-gradient(to bottom, #f3f3f3, #d2d2d2);
    border-top: 1px solid #9d9d9d;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.footer-left {
    float: left;
}

.footer-meta {
    float: right;
}

.footer-meta a {
    margin-left: 12px;
}

.css-toggle {
    height: auto;
    margin: 0;
    padding: 0;
    color: #1b4f9c;
    font-size: 11px;
    line-height: inherit;
    text-decoration: underline;
    background: none;
    background-image: none;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}


/* ---------- buttons ---------- */

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-block;
    height: auto;
    min-height: 24px;
    max-width: 100%;
    margin: 0;
    padding: 1px 12px;
    color: #000;
    font-family: inherit;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    vertical-align: middle;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.48, #efefef), color-stop(0.52, #dadada), color-stop(1, #e8e8e8));
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .15);
}

a.button {
    color: #000;
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: #000;
    border-color: #4b7fd0;
}

button:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d7d7d7), color-stop(1, #efefef));
    background-image: -webkit-linear-gradient(top, #d7d7d7, #efefef);
    background-image: -moz-linear-gradient(top, #d7d7d7, #efefef);
    background-image: -o-linear-gradient(top, #d7d7d7, #efefef);
    background-image: linear-gradient(to bottom, #d7d7d7, #efefef);
}

button:disabled,
input:disabled,
.button--disabled {
    opacity: .5;
    cursor: default;
}

.button-primary {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.48, #7eb1f0), color-stop(0.52, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    border-color: #2d5ba6;
}

a.button-primary,
a.button-primary:hover {
    color: #fff;
}

.button-primary:hover {
    border-color: #1f4a94;
}

.button-danger {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    background-color: #d9574d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f3aaa4), color-stop(0.48, #e27067), color-stop(0.52, #c93d33), color-stop(1, #e0605a));
    background-image: -webkit-linear-gradient(top, #f3aaa4 0%, #e27067 48%, #c93d33 52%, #e0605a 100%);
    background-image: -moz-linear-gradient(top, #f3aaa4 0%, #e27067 48%, #c93d33 52%, #e0605a 100%);
    background-image: -o-linear-gradient(top, #f3aaa4 0%, #e27067 48%, #c93d33 52%, #e0605a 100%);
    background-image: linear-gradient(to bottom, #f3aaa4 0%, #e27067 48%, #c93d33 52%, #e0605a 100%);
    border-color: #a5322b;
}

.button-danger:hover,
a.button-danger:hover {
    color: #fff;
    border-color: #7e231e;
}

.theme-switch__label {
    margin: 2px 4px 0 0;
    font-size: 11px;
    line-height: 16px;
    vertical-align: top;
    white-space: nowrap;
}

.theme-switch {
    width: 104px;
    height: 18px;
    margin: 2px 0 0 0;
    padding: 0 20px 0 8px;
    font-family: inherit;
    font-size: 11px;
    line-height: 16px;
    color: #000;
    vertical-align: top;
    border: 1px solid #7d7d7d;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    background-color: #f2f2f2;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23222'/%3E%3C/svg%3E");
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23222'/%3E%3C/svg%3E"), linear-gradient(to bottom, #ffffff, #d9d9d9);
    background-position: right 7px center, 0 0;
    background-repeat: no-repeat, no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.theme-switch::-ms-expand {
    display: none;
}

.nav-button {
    height: 22px;
    min-height: 0;
    margin: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 22px;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.flash-dismiss {
    float: right;
    width: 20px;
    height: 20px;
    min-width: 0;
    margin: 0 0 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 18px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.cross-page-upload-status__actions button {
    height: auto;
    margin: 0;
    padding: 0;
    color: #1b4f9c;
    font-size: 12px;
    line-height: inherit;
    text-decoration: underline;
    background: none;
    background-image: none;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.download-menu > summary {
    display: inline-block;
    height: 24px;
    padding: 0 12px;
    color: #000;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.48, #efefef), color-stop(0.52, #dadada), color-stop(1, #e8e8e8));
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #efefef 48%, #dadada 52%, #e8e8e8 100%);
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(0, 0, 0, .15);
}

.download-menu > summary::-webkit-details-marker {
    display: none;
}


/* ---------- forms ---------- */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input:not([type]),
select,
textarea {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 4px 6px;
    color: #000;
    font-family: inherit;
    font-size: 13px;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #8d8d8d;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}

input[type="search"] {
    padding-left: 9px;
    padding-right: 9px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

select {
    padding: 2px 4px;
}

textarea {
    min-height: 60px;
    resize: vertical;
}

input[type="file"] {
    max-width: 100%;
    font-size: 12px;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin: 0 5px 0 0;
    vertical-align: -2px;
}

input[type="color"] {
    width: 46px;
    height: 26px;
    margin: 0;
    padding: 2px;
    background-color: #fff;
    border: 1px solid #8d8d8d;
}

input[type="range"] {
    width: 100%;
}

input[type="hidden"] {
    display: none;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: #4b8cf0;
    -webkit-box-shadow: 0 0 0 3px rgba(75, 140, 240, .35);
    -moz-box-shadow: 0 0 0 3px rgba(75, 140, 240, .35);
    box-shadow: 0 0 0 3px rgba(75, 140, 240, .35);
}

label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    color: #222;
    cursor: default;
}

.check-row label,
.policy-consent__item,
.search-label-row label,
.inline-label {
    display: inline;
    margin: 0;
}

fieldset {
    margin: 0 0 12px;
    padding: 8px 12px 6px;
    background-color: #f5f5f5;
    border: 1px solid #bcbcbc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

legend {
    padding: 0 4px;
    font-size: 12px;
    font-weight: bold;
    color: #222;
}

.form-note {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    color: #555;
}

.field-count {
    display: block;
    margin: -2px 0 8px;
    font-size: 11px;
    color: #666;
    text-align: right;
}

.form-grid {
    overflow: hidden;
    margin: 0 0 6px;
}

.form-grid > label,
.form-grid > div {
    float: left;
    width: 48%;
    margin: 0 1% 10px;
}

.compact-grid > label {
    width: 31.33%;
}

.form-actions,
.hero-actions,
.post-detail__tools {
    margin: 10px 0 0;
    font-size: 12px;
}

.form-actions > *,
.hero-actions > *,
.post-detail__tools > * {
    margin: 0 8px 6px 0;
    vertical-align: middle;
}

.check-row {
    margin: 0 0 6px;
    font-size: 12px;
}

.check-grid {
    overflow: hidden;
    margin: 0 0 8px;
}

.check-grid > * {
    float: left;
    width: 48%;
    margin: 0 1% 6px;
}

.metadata-fieldset {
    margin: 0 0 12px;
}

.metadata-repeatable {
    margin: 0 0 8px;
}

.metadata-row {
    overflow: hidden;
    margin: 0 0 8px;
}

.metadata-row > * {
    float: left;
    width: 48%;
    margin: 0 1% 0 0;
}

.metadata-row > *:last-child {
    margin-right: 0;
}

.search-form {
    margin: 0 0 10px;
}

.search-label-row {
    overflow: hidden;
    margin: 0 0 4px;
}

.search-label-row label {
    float: left;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
}

.shortcut-hint {
    float: right;
    font-size: 11px;
    color: #555;
}

/* the search row reserves room on the right for the button, which sits in that
   space, so the field fills the rest without calc(). Inputs cannot be table
   cells in every engine, so this avoids display: table-cell. */
.search-row {
    position: relative;
    margin: 0 0 10px;
    padding-right: 86px;
}

.search-row > input {
    width: 100%;
}

.search-row > input[type="hidden"] {
    display: none;
}

.search-row > button {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
}

.advanced-filters {
    margin: 8px 0 0;
    font-size: 12px;
}

.advanced-filters > summary {
    margin: 0 0 6px;
    font-weight: bold;
    color: #1b4f9c;
    cursor: pointer;
}

.filter-fields {
    overflow: hidden;
    padding: 4px 0 0;
}

.filter-fields > label {
    float: left;
    width: 31.33%;
    margin: 0 1% 10px 0;
}

.filter-fields > label:nth-child(3n) {
    margin-right: 0;
}

.header-search input[type="search"],
.header-search button {
    vertical-align: middle;
}

.report-box {
    margin: 0 0 14px;
    padding: 8px 12px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.report-box > summary {
    font-weight: bold;
    color: #1b4f9c;
    cursor: pointer;
}

.report-box form {
    margin: 8px 0 0;
}

.policy-consent {
    margin: 0 0 12px;
}

.policy-consent__item {
    display: block;
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.5;
}

.policy-consent__item input {
    margin-right: 6px;
}


/* ---------- flash, notices and page headings ---------- */

.flash-stack {
    margin: 0 0 14px;
}

.flash {
    overflow: hidden;
    margin: 0 0 8px;
    padding: 7px 10px;
    font-size: 12px;
    background-color: #eaf2fd;
    border: 1px solid #8db2e3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.flash {
    position: relative;
}

.flash span {
    display: block;
    margin-right: 28px;
}

.flash .flash-dismiss {
    position: absolute;
    top: 5px;
    right: 6px;
    float: none;
    margin: 0;
}

.flash-success {
    background-color: #e8f6ea;
    border-color: #7dbb8b;
}

.flash-error {
    background-color: #fbe7e7;
    border-color: #d18585;
}

.author-notice {
    margin: 0 0 14px;
    padding: 8px 12px;
    font-size: 12px;
    background-color: #fff6c8;
    border: 1px solid #d9c35e;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.notice-warning {
    background-color: #ffe9c2;
    border-color: #d99a38;
}

/* the metal strip at the top of each pane: title on the left, tools on the right */
.pane-toolbar:after {
    content: "";
    display: table;
    clear: both;
}

.pane-toolbar {
    overflow: visible;
    margin: 0 0 16px;
    padding: 10px 14px 11px;
    background-color: #e4e4e4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #d0d0d0));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #d0d0d0);
    background-image: -moz-linear-gradient(top, #f7f7f7, #d0d0d0);
    background-image: -o-linear-gradient(top, #f7f7f7, #d0d0d0);
    background-image: linear-gradient(to bottom, #f7f7f7, #d0d0d0);
    border: 1px solid #a9a9a9;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}

.pane-toolbar h1 {
    margin: 0 0 2px;
    font-size: 22px;
    line-height: 1.2;
}

.pane-toolbar p {
    margin: 0 0 2px;
    color: #4f4f4f;
}

.pane-toolbar__title {
    overflow: hidden;
}

.pane-toolbar > .hero-actions {
    float: right;
    margin: 4px 0 0 12px;
}

.pane-toolbar__search {
    float: right;
    width: 420px;
    max-width: 62%;
    margin: 2px 0 0;
}

.pane-toolbar__search .search-row {
    margin: 0;
}

.pane-toolbar__search .search-row > input[type="search"] {
    height: 28px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.pane-note {
    margin: 0 0 14px;
    font-size: 12px;
}

.pane-note a {
    margin-right: 14px;
}

/* path bar above a page's toolbar */
.page-context {
    margin: 0 0 12px;
    font-size: 11px;
    color: #555;
}

.page-context a {
    margin-right: 2px;
}

.page-context span[aria-hidden="true"] {
    margin: 0 4px;
    color: #888;
}

.section-block {
    margin: 0 0 24px;
}

.section-heading {
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0 0 4px;
    border-bottom: 1px solid #c3c3c3;
}

.section-heading > div {
    float: left;
}

.section-heading > a,
.section-heading > span {
    float: right;
    margin: 6px 0 0 14px;
    font-size: 12px;
}

.section-heading h2 {
    margin: 6px 0 2px;
    font-size: 15px;
}

.section-heading.compact {
    margin: 0 0 8px;
}

.section-heading.compact h2 {
    font-size: 14px;
}

.text-link {
    font-size: 12px;
    color: #1b4f9c;
}

/* titlebar for dialogs (login, feedback, sheets) */
.sheet-titlebar {
    margin: -12px -14px 12px;
    padding: 4px 12px;
    background-color: #d6d6d6;
    background-image: -webkit-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -moz-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -o-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: repeating-linear-gradient(to bottom, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    border-bottom: 1px solid #6a6a6a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.sheet-titlebar h1 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #3d3d3d;
    text-shadow: 0 1px 0 #fff;
}

.sheet-intro {
    margin: 0 0 12px;
    color: #444;
}


/* ---------- window body and source pane ---------- */

/* with a sidebar the body becomes two table cells, so the source list runs the
   full height of the window content (no calc, no flex) */
.window-body.has-source {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.window-body.has-source > .source-pane {
    display: table-cell;
    width: 200px;
    vertical-align: top;
    background-color: #dfe6f1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ebf0f8), color-stop(1, #d0d9e8));
    background-image: -webkit-linear-gradient(top, #ebf0f8, #d0d9e8);
    background-image: -moz-linear-gradient(top, #ebf0f8, #d0d9e8);
    background-image: -o-linear-gradient(top, #ebf0f8, #d0d9e8);
    background-image: linear-gradient(to bottom, #ebf0f8, #d0d9e8);
    border-right: 1px solid #a9b5c8;
}

.window-body.has-source > .site-main {
    display: table-cell;
    vertical-align: top;
}

.source-list {
    padding: 8px 0 14px;
}

.source-list__heading {
    margin: 10px 12px 3px;
    font-size: 11px;
    line-height: 16px;
    color: #4f5d75;
}

.source-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.source-list a {
    display: block;
    margin: 0 6px 1px;
    padding: 2px 8px 2px 6px;
    font-size: 12px;
    line-height: 18px;
    color: #000;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.source-list a.source-plain {
    padding-left: 28px;
}

.source-list a:hover,
.source-list a:focus,
.source-list a.is-active {
    color: #fff;
    background-color: #3d6fcf;
}

/* glossy icon discs: source list rows, prefs grid, folder and tile icons */
.orb {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 1px 6px 0 0;
    font-size: 10px;
    line-height: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
    background-color: #4d86d9;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.5, #6fa3ec), color-stop(0.5, #4a80d6), color-stop(1, #7aaef0));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #6fa3ec 50%, #4a80d6 50%, #7aaef0 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #6fa3ec 50%, #4a80d6 50%, #7aaef0 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #6fa3ec 50%, #4a80d6 50%, #7aaef0 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #6fa3ec 50%, #4a80d6 50%, #7aaef0 100%);
    border: 1px solid #2d5ba6;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.orb-green {
    border-color: #2f7a3a;
    background-color: #46a955;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d3f5d9), color-stop(0.5, #7fd08f), color-stop(0.5, #46a955), color-stop(1, #6cc27b));
    background-image: -webkit-linear-gradient(top, #d3f5d9 0%, #7fd08f 50%, #46a955 50%, #6cc27b 100%);
    background-image: -moz-linear-gradient(top, #d3f5d9 0%, #7fd08f 50%, #46a955 50%, #6cc27b 100%);
    background-image: -o-linear-gradient(top, #d3f5d9 0%, #7fd08f 50%, #46a955 50%, #6cc27b 100%);
    background-image: linear-gradient(to bottom, #d3f5d9 0%, #7fd08f 50%, #46a955 50%, #6cc27b 100%);
}

.orb-orange {
    border-color: #a05c12;
    background-color: #e08a2c;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe7c2), color-stop(0.5, #f7b766), color-stop(0.5, #e08a2c), color-stop(1, #f2a64f));
    background-image: -webkit-linear-gradient(top, #ffe7c2 0%, #f7b766 50%, #e08a2c 50%, #f2a64f 100%);
    background-image: -moz-linear-gradient(top, #ffe7c2 0%, #f7b766 50%, #e08a2c 50%, #f2a64f 100%);
    background-image: -o-linear-gradient(top, #ffe7c2 0%, #f7b766 50%, #e08a2c 50%, #f2a64f 100%);
    background-image: linear-gradient(to bottom, #ffe7c2 0%, #f7b766 50%, #e08a2c 50%, #f2a64f 100%);
}

.orb-gray {
    border-color: #5a5a5a;
    background-color: #8a8a8a;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f0f0), color-stop(0.5, #b8b8b8), color-stop(0.5, #8a8a8a), color-stop(1, #a4a4a4));
    background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #b8b8b8 50%, #8a8a8a 50%, #a4a4a4 100%);
    background-image: -moz-linear-gradient(top, #f0f0f0 0%, #b8b8b8 50%, #8a8a8a 50%, #a4a4a4 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0%, #b8b8b8 50%, #8a8a8a 50%, #a4a4a4 100%);
    background-image: linear-gradient(to bottom, #f0f0f0 0%, #b8b8b8 50%, #8a8a8a 50%, #a4a4a4 100%);
}

.orb-graphite {
    border-color: #3d3d3d;
    background-color: #5c5c5c;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bdbdbd), color-stop(0.5, #6a6a6a), color-stop(0.5, #4f4f4f), color-stop(1, #5f5f5f));
    background-image: -webkit-linear-gradient(top, #bdbdbd 0%, #6a6a6a 50%, #4f4f4f 50%, #5f5f5f 100%);
    background-image: -moz-linear-gradient(top, #bdbdbd 0%, #6a6a6a 50%, #4f4f4f 50%, #5f5f5f 100%);
    background-image: -o-linear-gradient(top, #bdbdbd 0%, #6a6a6a 50%, #4f4f4f 50%, #5f5f5f 100%);
    background-image: linear-gradient(to bottom, #bdbdbd 0%, #6a6a6a 50%, #4f4f4f 50%, #5f5f5f 100%);
}

.orb-violet {
    border-color: #5b3f8c;
    background-color: #8a6bc4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9defa), color-stop(0.5, #b396e2), color-stop(0.5, #8a6bc4), color-stop(1, #a68bd6));
    background-image: -webkit-linear-gradient(top, #e9defa 0%, #b396e2 50%, #8a6bc4 50%, #a68bd6 100%);
    background-image: -moz-linear-gradient(top, #e9defa 0%, #b396e2 50%, #8a6bc4 50%, #a68bd6 100%);
    background-image: -o-linear-gradient(top, #e9defa 0%, #b396e2 50%, #8a6bc4 50%, #a68bd6 100%);
    background-image: linear-gradient(to bottom, #e9defa 0%, #b396e2 50%, #8a6bc4 50%, #a68bd6 100%);
}

/* folders are pale and untinted, like the collection icons in the finder */
.orb-folder {
    width: 16px;
    height: 13px;
    margin-top: 2px;
    border-color: #7f9cc4;
    background-color: #e4ecf8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #c7d6ee));
    background-image: -webkit-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: -moz-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: -o-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: linear-gradient(to bottom, #ffffff, #c7d6ee);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* ---------- labels, chips and tags ---------- */

.label {
    display: inline-block;
    margin: 0 2px 0 0;
    padding: 0 6px;
    font-size: 10px;
    line-height: 16px;
    font-weight: bold;
    color: #333;
    vertical-align: middle;
    background-color: #e6e6e6;
    border: 1px solid #a5a5a5;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.label-category {
    color: #17499a;
    background-color: #dce9fc;
    border-color: #88aee0;
}

.label-draft {
    color: #6b5a14;
    background-color: #fbf1c4;
    border-color: #d0b555;
}

.label-star {
    color: #6b4e00;
    background-color: #ffe9a6;
    border-color: #d9b04e;
}

.label-primary {
    color: #fff;
    background-color: #3d6fcf;
    border-color: #2b5aae;
}

.chip {
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 1px 9px;
    font-size: 12px;
    line-height: 18px;
    color: #000;
    text-decoration: none;
    vertical-align: middle;
    background-color: #f4f4f4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dcdcdc));
    background-image: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: -moz-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: -o-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: linear-gradient(to bottom, #ffffff, #dcdcdc);
    border: 1px solid #8a8a8a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.chip:hover {
    border-color: #4b7fd0;
}

.chip small {
    font-size: 10px;
    color: #555;
}

.chip.selected {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.48, #7eb1f0), color-stop(0.52, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #7eb1f0 48%, #5b93e0 52%, #7aa9ec 100%);
    border-color: #2d5ba6;
}

.chip.selected small {
    color: #fff;
}

.filter-row {
    margin: 0 0 4px;
}

.filter-row:after {
    content: "";
    display: table;
    clear: both;
}

.filter-label {
    display: inline-block;
    margin: 0 8px 6px 0;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    vertical-align: middle;
}

.active-filters {
    margin: 8px 0 0;
    font-size: 12px;
}

.active-filters > span {
    margin-right: 6px;
    font-weight: bold;
    color: #555;
}

.active-filters > strong {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 0 8px;
    font-weight: normal;
    background-color: #eaf2fd;
    border: 1px solid #9ab5e0;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.tag-row,
.post-tags {
    margin: 0 0 6px;
}

.tag-row a,
.post-tags a {
    display: inline-block;
    margin: 0 4px 4px 0;
}

.card-signal {
    display: inline-block;
    margin: 0 10px 2px 0;
    color: #555;
}


/* ---------- browse views: list view, icon view, archive tools ---------- */

/* list view: Finder-style rows with a blue highlight on hover */
.file-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 16px;
    background-color: #fff;
    border: 1px solid #bdbdbd;
}

.file-table {
    margin: 0;
}

.file-table th,
.file-table td {
    white-space: normal;
}

.file-table tbody tr:nth-child(even) {
    background-color: #f6f9fd;
}

.list-view thead th {
    white-space: nowrap;
}

.list-view tbody th {
    font-weight: normal;
}

.list-view tbody th a {
    color: #000;
    text-decoration: none;
}

.list-view tbody th a:hover {
    color: #1b4f9c;
    text-decoration: underline;
}

.list-view__icon {
    float: left;
    width: 26px;
    height: 26px;
    margin: 0 8px 0 0;
    overflow: hidden;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #d9d9d9));
    background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: -o-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: linear-gradient(to bottom, #ffffff, #d9d9d9);
    border: 1px solid #a7a7a7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


.list-view__icon--fallback {
    display: block;
    font-size: 13px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    color: #5c5c5c;
}

.list-view tbody th small {
    display: block;
    margin: 1px 0 0;
    font-size: 10px;
    color: #666;
    word-wrap: break-word;
}

.list-view td:nth-child(2) {
    width: 16%;
}

.list-view td:nth-child(3) {
    width: 26%;
}

.list-view td:nth-child(4) {
    width: 9%;
    text-align: right;
}

.list-view td:nth-child(5) {
    width: 17%;
    white-space: nowrap;
    color: #444;
}

.file-table.list-view tbody tr:hover {
    background-color: #d9e7fb;
}

/* icon view: thumbnails with labels underneath, like the finder's icon view */
.icon-view {
    overflow: hidden;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.icon-view:after {
    content: "";
    display: table;
    clear: both;
}

.icon-view__item {
    float: left;
    width: 25%;
    margin: 0;
    padding: 0;
}

.icon-view__item > a {
    display: block;
    margin: 0 4px 6px;
    padding: 8px 6px 9px;
    color: #000;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.icon-view__item > a:hover,
.icon-view__item > a:focus {
    color: #fff;
    background-color: #3d6fcf;
}

.icon-view__item > a:hover .icon-view__kind,
.icon-view__item > a:focus .icon-view__kind {
    color: #e8f0ff;
}

.icon-view__thumb {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 7px;
    overflow: hidden;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dcdcdc));
    background-image: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: -moz-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: -o-linear-gradient(top, #ffffff, #dcdcdc);
    background-image: linear-gradient(to bottom, #ffffff, #dcdcdc);
    border: 1px solid #9c9c9c;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

/* square cover frames: the image fills its frame and is cropped from the centre
   (object-fit: cover). Engines without object-fit fit the whole image inside the
   frame instead, so covers are never stretched out of shape. */
.cover-frame {
    position: relative;
    overflow: hidden;
}

.cover-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

@supports (object-fit: cover) {
    .cover-frame img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }
}

.icon-view__thumb--fallback {
    font-size: 36px;
    line-height: 94px;
    font-weight: bold;
    text-align: center;
    color: #5c5c5c;
}

.icon-view__thumb--folder {
    border-color: #7f9cc4;
    background-color: #e4ecf8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #c7d6ee));
    background-image: -webkit-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: -moz-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: -o-linear-gradient(top, #ffffff, #c7d6ee);
    background-image: linear-gradient(to bottom, #ffffff, #c7d6ee);
}

.icon-view__thumb--avatar {
    width: 64px;
    height: 64px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.icon-view__thumb--avatar.icon-view__thumb--fallback {
    font-size: 26px;
    line-height: 62px;
}

.icon-view__name {
    display: block;
    max-height: 34px;
    overflow: hidden;
    font-size: 12px;
    line-height: 17px;
    font-weight: bold;
    word-wrap: break-word;
}

.icon-view__kind {
    display: block;
    font-size: 11px;
    line-height: 15px;
    color: #555;
    word-wrap: break-word;
}

/* archive search and filters */
.archive-tools {
    margin: 0 0 16px;
    padding: 12px 14px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.archive-tools .search-form {
    margin: 0 0 6px;
}

.facet-grid {
    overflow: hidden;
    margin: 0 0 10px;
}

.facet-group {
    float: left;
    width: 48%;
    margin: 0 1% 10px;
}

.facet-group h2 {
    margin: 0 0 4px;
    font-size: 12px;
}

.pagination {
    overflow: hidden;
    margin: 16px 0 0;
    font-size: 12px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    margin: 0 4px;
    padding: 2px 12px;
    color: #000;
    text-decoration: none;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dadada));
    background-image: -webkit-linear-gradient(top, #ffffff, #dadada);
    background-image: -moz-linear-gradient(top, #ffffff, #dadada);
    background-image: -o-linear-gradient(top, #ffffff, #dadada);
    background-image: linear-gradient(to bottom, #ffffff, #dadada);
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
}

.pagination span {
    display: inline-block;
    margin: 0 8px;
    color: #555;
}

.empty-state {
    margin: 18px 0 22px;
    padding: 22px 14px;
    text-align: center;
    color: #555;
}

.empty-state h2,
.empty-state h3 {
    margin: 0 0 6px;
    color: #000;
}

.empty-state p {
    margin: 0;
}

.empty-state__mark {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    font-size: 14px;
    line-height: 50px;
    font-weight: bold;
    text-align: center;
    color: #666;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #d9d9d9));
    background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: -o-linear-gradient(top, #ffffff, #d9d9d9);
    background-image: linear-gradient(to bottom, #ffffff, #d9d9d9);
    border: 1px solid #aaaaaa;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}

.compact-empty {
    margin: 8px 0 12px;
    padding: 14px;
}

/* ---------- item pages: toolbar, two panes, inspector, media ---------- */

.item-window {
    margin: 0 0 22px;
}

.item-toolbar {
    margin-bottom: 14px;
}

.item-toolbar h1 {
    margin: 4px 0 4px;
    font-size: 24px;
    line-height: 1.2;
}

.item-toolbar .pane-toolbar__title {
    float: left;
    width: 60%;
    padding-right: 12px;
}

.item-toolbar .post-detail__tools {
    float: right;
    width: 38%;
    margin: 0;
    text-align: right;
}

.post-card__top {
    overflow: hidden;
    margin: 0 0 4px;
    font-size: 11px;
    color: #555;
}

.post-card__top > * {
    float: left;
    margin: 0 6px 0 0;
}

.post-byline {
    margin: 0 0 4px;
    font-size: 12px;
    color: #555;
}

/* tool buttons share one top line; the favorite form uses zero line-height so its
   button is not pushed down by the text strut that sits under inline content */
.post-detail__tools > * {
    display: inline-block;
    margin: 0 0 6px 6px;
    vertical-align: top;
}

.post-detail__tools form {
    display: inline-block;
    margin: 0 0 6px 6px;
    line-height: 0;
    vertical-align: top;
}

.post-detail__tools form button,
.post-detail__tools .button,
.post-detail__tools summary {
    vertical-align: top;
}

.post-detail__tools .download-menu {
    position: relative;
    display: inline-block;
    text-align: left;
}

/* the main pane and the inspector sit side by side; the inspector is the
   finder's info window: a pinstriped title per section */
.item-layout {
    overflow: hidden;
}

.item-layout:after {
    content: "";
    display: table;
    clear: both;
}

.item-layout__main {
    float: left;
    width: 64%;
    padding-right: 16px;
}

.inspector {
    float: right;
    width: 34%;
    margin: 0 0 16px;
    padding: 0 0 4px;
    overflow: hidden;
    background-color: #f1f5fb;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f9fc), color-stop(1, #e3e9f2));
    background-image: -webkit-linear-gradient(top, #f7f9fc, #e3e9f2);
    background-image: -moz-linear-gradient(top, #f7f9fc, #e3e9f2);
    background-image: -o-linear-gradient(top, #f7f9fc, #e3e9f2);
    background-image: linear-gradient(to bottom, #f7f9fc, #e3e9f2);
    border: 1px solid #aeb8c8;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.inspector--block {
    float: none;
    width: auto;
    margin: 0 0 16px;
}

.inspector__titlebar {
    margin: 0 0 8px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 18px;
    color: #3d3d3d;
    text-shadow: 0 1px 0 #fff;
    background-color: #d6d6d6;
    background-image: -webkit-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -moz-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -o-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: repeating-linear-gradient(to bottom, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    border-bottom: 1px solid #6a6a6a;
}

.inspector__section {
    margin: 0 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px solid #d3dbe7;
}

.inspector__section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.inspector__section > .inspector__titlebar {
    margin-bottom: 6px;
}

.inspector__section > dl,
.inspector__section > .post-tags {
    margin: 0 10px;
}

.inspector > div,
.inspector > p,
.inspector > dl {
    margin-left: 10px;
    margin-right: 10px;
}

.inspector .post-tags a {
    margin-bottom: 4px;
}

.archive-metadata,
.entry-details {
    margin: 0;
    font-size: 12px;
}

.archive-metadata > div,
.entry-details > div {
    overflow: hidden;
    padding: 5px 0;
    border-bottom: 1px solid #dadada;
}

.archive-metadata dt,
.entry-details dt {
    float: left;
    width: 36%;
    font-weight: normal;
    color: #555;
}

.archive-metadata dd,
.entry-details dd {
    margin: 0 0 0 38%;
    word-wrap: break-word;
}

.item-panel {
    margin: 0 0 16px;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.item-panel h2 {
    margin: 0 0 6px;
    font-size: 14px;
}

.item-empty-state {
    color: #555;
}

.post-body {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
}

.post-body img {
    display: block;
    margin: 0 0 10px;
}

.post-body h2,
.post-body h3 {
    margin: 14px 0 6px;
}

.post-body blockquote {
    margin: 0 0 10px;
}

.smart-link {
    margin: 0 0 12px;
    padding: 8px 10px;
    background-color: #f2f7ff;
    border: 1px solid #bcd1ef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.smart-link-label {
    font-weight: bold;
    color: #1b4f9c;
}

.smart-embed {
    margin: 0 0 14px;
}

.smart-embed__label {
    margin: 0 0 4px;
    font-size: 11px;
    color: #555;
}

.smart-embed iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 1px solid #b5b5b5;
}

.smart-embed--compact iframe {
    height: 120px;
}

.smart-embed--tall iframe {
    height: 460px;
}

.site-card {
    display: block;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 8px;
    background-color: #f2f7ff;
    border: 1px solid #bcd1ef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #000;
    text-decoration: none;
}

.site-card:hover .site-card__title,
.site-card:focus .site-card__title {
    text-decoration: underline;
}

.site-card__cover {
    display: block;
    float: left;
    width: 96px;
    height: 96px;
    margin: 0 10px 0 0;
    overflow: hidden;
    background-color: #dfe8f5;
}

.site-card__cover img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.site-card__body {
    display: block;
    overflow: hidden;
}

.site-card__title {
    display: block;
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 20px;
    color: #1b4f9c;
}

.site-card__text {
    display: block;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 17px;
    color: #333;
}

.media-shelf {
    margin: 0 0 16px;
}

.media-grid {
    margin: 0 0 12px;
}

.media-grid:after {
    content: "";
    display: table;
    clear: both;
}

.media-item {
    float: left;
    width: 48%;
    margin: 0 1% 12px;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.media-item img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #b5b5b5;
}

.media-item audio,
.media-item video {
    display: block;
    width: 100%;
}

.media-item iframe {
    display: block;
    width: 100%;
    height: 320px;
    background-color: #fff;
    border: 1px solid #b5b5b5;
}

.media-pdf iframe {
    height: 460px;
}

/* images, videos and pdfs span the panel so they stay legible; other files keep the two-column grid */
@media (min-width: 641px) {
    .media-item.media-image,
    .media-item.media-video,
    .media-item.media-pdf {
        width: 98%;
    }

    .media-pdf iframe {
        height: 640px;
    }
}

/* custom media controls: site.js replaces the native audio and video controls with these; their blues are themed like the rest */
.media-player {
    margin: 0 0 4px;
}

.media-player audio {
    display: none;
}

.media-player video {
    display: block;
    width: 100%;
    background-color: #000;
}

.media-player__bar {
    padding: 5px 6px;
    font-size: 11px;
    line-height: 20px;
    color: #000;
    background-color: #e4e4e4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8f8f8), color-stop(1, #d6d6d6));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #d6d6d6);
    background-image: -moz-linear-gradient(top, #f8f8f8, #d6d6d6);
    background-image: -o-linear-gradient(top, #f8f8f8, #d6d6d6);
    background-image: linear-gradient(to bottom, #f8f8f8, #d6d6d6);
    border: 1px solid #9a9a9a;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.media-player__bar > * {
    display: inline-block;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

.media-player__button {
    height: 22px;
    padding: 0 9px;
    font-size: 11px;
    line-height: 18px;
}

.media-player__play {
    width: 30px;
    padding: 0;
}

/* the icon box is centred in the button; the offsets move each glyph's own bounds to the centre */
.media-player__icon {
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    position: relative;
    left: 1px;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #222;
}

.media-player.is-playing .media-player__icon {
    width: 3px;
    height: 10px;
    left: -2.5px;
    border-style: none;
    border-width: 0;
    background-color: #222;
    -webkit-box-shadow: 5px 0 0 #222;
    box-shadow: 5px 0 0 #222;
}

.media-player__time {
    padding: 0 2px;
    white-space: nowrap;
}

.media-player__track {
    position: relative;
    width: 36%;
    min-width: 90px;
    height: 18px;
}

.media-player__volume {
    width: 80px;
    min-width: 60px;
}

.media-player__rail {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    height: 4px;
    overflow: hidden;
    border: 1px solid #8a8a8a;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #dadada;
}

.media-player__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #5b93e0;
    background-image: -webkit-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: -moz-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: -o-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

.media-player__range {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.media-player__range:focus {
    box-shadow: none;
    border-color: transparent;
}

.media-player__range::-webkit-slider-runnable-track {
    height: 18px;
    background: transparent;
    border: 0;
}

.media-player__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border: 1px solid #2d5ba6;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background-color: #5b93e0;
    background-image: -webkit-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

.media-player__range::-moz-range-track {
    height: 18px;
    background: transparent;
    border: 0;
}

.media-player__range::-moz-range-thumb {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #2d5ba6;
    border-radius: 7px;
    background-color: #5b93e0;
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

.media-player__range::-ms-track {
    height: 18px;
    border-color: transparent;
    background: transparent;
    color: transparent;
}

.media-player__range::-ms-fill-lower,
.media-player__range::-ms-fill-upper {
    background: transparent;
}

.media-player__range::-ms-thumb {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #2d5ba6;
    border-radius: 7px;
    background-color: #5b93e0;
}

@media (max-width: 480px) {
    .media-player__volume {
        display: none;
    }
}

.media-item figcaption {
    margin: 6px 0 0;
    font-size: 12px;
}

.media-caption strong {
    display: block;
    word-wrap: break-word;
}

.media-caption span {
    font-size: 11px;
    color: #555;
}

.media-item small {
    display: block;
    margin: 2px 0 0;
    color: #555;
}

.media-actions {
    margin: 4px 0 0;
    font-size: 12px;
}

.media-actions a {
    margin-right: 6px;
}

.media-pdf__fallback {
    margin: 4px 0 0;
    font-size: 12px;
}

.file-icon {
    height: 90px;
    line-height: 90px;
    font-weight: bold;
    text-align: center;
    color: #5c5c5c;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #d4d4d4));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #d4d4d4);
    background-image: -moz-linear-gradient(top, #f7f7f7, #d4d4d4);
    background-image: -o-linear-gradient(top, #f7f7f7, #d4d4d4);
    background-image: linear-gradient(to bottom, #f7f7f7, #d4d4d4);
    border: 1px solid #b5b5b5;
}

.collection-heading__thumb {
    float: right;
    width: 120px;
    height: 120px;
    margin: 0 0 8px 14px;
    background-color: #ececec;
    border: 1px solid #a7a7a7;
}

.collection-identifier {
    display: inline-block;
    margin: 0 0 6px;
}

.related-items {
    margin: 0 0 24px;
}

.community-section {
    margin: 0 0 24px;
}

.comments-section {
    margin: 0 0 16px;
    padding: 12px 14px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.comments-section .section-heading {
    margin-bottom: 8px;
}

/* ---------- comments and reviews ---------- */

.comment-list,
.review-list {
    margin: 0 0 12px;
}

.comment,
.review {
    overflow: hidden;
    margin: 0 0 8px;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.comment p,
.review p {
    margin: 0;
}

.comment__meta,
.review__meta {
    overflow: hidden;
    margin: 0 0 4px;
    font-size: 12px;
    color: #555;
}

.comment__meta > *,
.review__meta > * {
    float: left;
    margin: 0 10px 0 0;
}

.comment__meta time,
.review__meta time {
    float: right;
    margin: 0;
}

.review h3 {
    margin: 0 0 4px;
    font-size: 14px;
}

.comment__author {
    display: inline-block;
}

.comment__author-link {
    display: inline-block;
    color: #000;
    text-decoration: none;
    vertical-align: middle;
}

.comment__author-link strong {
    color: #000;
}

.comment__avatar {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: cover;
    margin: 0 6px 0 0;
    vertical-align: middle;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    border: 1px solid #a0a0a0;
}

.comment__avatar--fallback {
    text-align: center;
    font-size: 11px;
    line-height: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.5, #7eb1f0), color-stop(0.5, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    border-color: #2d5ba6;
}

.report-box form .button {
    margin-top: 4px;
}


/* ---------- contributors: profile header and avatars ---------- */

.profile-hero {
    overflow: hidden;
    margin: 0 0 18px;
    padding: 16px 18px 14px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    border-top: 6px solid #3d6fcf;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.profile-hero__copy {
    overflow: hidden;
    float: left;
    width: 64%;
}

.profile-hero__copy > .avatar {
    float: left;
    margin: 0 16px 0 0;
}

.profile-hero__copy > div {
    overflow: hidden;
}

.profile-hero h1 {
    margin: 0 0 2px;
    font-size: 24px;
}

.profile-handle {
    margin: 0 0 6px;
    color: #555;
}

.profile-bio {
    margin: 0 0 8px;
}

.profile-links a {
    display: inline-block;
    margin: 0 10px 4px 0;
}

.profile-hero__actions {
    float: right;
    width: 32%;
    text-align: right;
}

.profile-hero__actions .button {
    margin: 0 0 10px;
}

.profile-counts {
    overflow: hidden;
    font-size: 11px;
    color: #555;
}

.profile-counts strong {
    display: block;
    float: left;
    margin: 0 4px 0 0;
    font-size: 20px;
    line-height: 22px;
    color: #000;
}

.profile-counts span {
    display: block;
    float: left;
    margin: 4px 14px 0 0;
}

.profile-card__meta {
    display: block;
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 14px;
    color: #666;
}

.profile-avatar {
    object-fit: cover;
}

.avatar {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0;
    vertical-align: middle;
    object-fit: cover;
    background-color: #fff;
    border: 1px solid #9b9b9b;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.avatar-large {
    width: 84px;
    height: 84px;
}

.avatar-placeholder {
    font-size: 20px;
    line-height: 42px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.5, #7eb1f0), color-stop(0.5, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    border-color: #2d5ba6;
}

.avatar-large.avatar-placeholder {
    font-size: 34px;
    line-height: 82px;
}

/* ---------- sheets, dialogs, inspectors and manage pages ---------- */

/* panels and sheets: grey dialog surfaces; form actions sit at the bottom right */
.panel,
.form-card,
.wide-form,
.sheet {
    margin: 0 0 16px;
    padding: 12px 14px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.wide-form {
    max-width: none;
}

.sheet .form-actions,
.form-card .form-actions {
    margin-top: 12px;
    padding-top: 10px;
    text-align: right;
    border-top: 1px solid #d6d6d6;
}

.inline-form {
    display: inline-block;
    margin: 0 6px 4px 0;
}

/* feedback challenge: the code sheet appears inside the form after the first send */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.captcha-sheet {
    margin: 0 0 14px;
    padding: 10px 12px 12px;
    background-color: #fdfbf0;
    border: 1px solid #c9b25e;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.captcha-sheet legend {
    font-weight: bold;
}

.captcha-row {
    overflow: hidden;
}

.captcha-image {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 0 8px;
    background-color: #f4f4f4;
    border: 1px solid #a9a9a9;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.auth-layout {
    max-width: 440px;
    margin: 0 auto;
}

.auth-layout .form-card {
    margin-top: 12px;
}

.stat-strip {
    overflow: hidden;
    margin: 0 0 18px;
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #e1e1e1));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
    background-image: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
    background-image: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
    background-image: linear-gradient(to bottom, #fbfbfb, #e1e1e1);
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.stat-strip > div {
    float: left;
    width: 25%;
    padding: 10px 14px;
    border-left: 1px solid #cbcbcb;
}

.stat-strip > div:first-child {
    border-left: 0;
}

.stat-strip strong {
    display: block;
    font-size: 22px;
    line-height: 26px;
    color: #1b4f9c;
}

.stat-strip span {
    display: block;
    font-size: 11px;
    color: #555;
}

.stat-grid {
    overflow: hidden;
    margin: 0 0 18px;
}

.stat-grid > div {
    float: left;
    width: 31.33%;
    margin: 0 1% 12px;
    padding: 12px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.stat-grid strong {
    display: block;
    font-size: 22px;
    line-height: 26px;
    color: #1b4f9c;
}

.stat-grid span {
    display: block;
    font-size: 11px;
    color: #555;
}

.stat-list > a {
    display: block;
    overflow: hidden;
    padding: 6px 0;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
}

.stat-list > a:hover {
    color: #1b4f9c;
}

.stat-list > a span {
    float: left;
}

.stat-list > a strong {
    float: right;
}

.status-card > div {
    overflow: hidden;
    padding: 7px 0;
    border-bottom: 1px solid #e0e0e0;
}

.status-card > div > span {
    float: left;
    width: 30%;
    color: #555;
}

.status-card > div > strong {
    display: block;
    margin-left: 30%;
}

.diagnostics-card {
    margin: 0 0 16px;
}

.diagnostics-paths {
    font-size: 11px;
    word-wrap: break-word;
}

.diagnostics-paths dl {
    margin: 0;
}

.diagnostics-paths code {
    word-wrap: break-word;
}

/* prefs grid: the manage overview as a row of glossy icons with labels */
.prefs-grid {
    overflow: hidden;
    margin: 0 0 18px;
    padding: 10px 6px 4px;
    list-style: none;
    background-color: #fbfbfb;
    border: 1px solid #c7ced9;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.prefs-grid:after {
    content: "";
    display: table;
    clear: both;
}

.prefs-item {
    float: left;
    width: 16.66%;
    margin: 0;
    padding: 0;
}

.prefs-item > a {
    display: block;
    margin: 0 3px 6px;
    padding: 8px 4px 6px;
    color: #000;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.prefs-item > a:hover,
.prefs-item > a:focus {
    background-color: #dbe7fb;
}

.prefs-item .orb {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 6px;
    font-size: 22px;
    line-height: 42px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}

.prefs-label {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

/* alert sheet: the error page as a classic caution dialog */
.alert-sheet {
    overflow: hidden;
    max-width: 520px;
    margin: 40px auto 30px;
    padding: 16px 18px;
    background-color: #f4f4f4;
    border: 1px solid #8f8f8f;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.alert-sheet__icon {
    float: left;
    width: 48px;
    height: 48px;
    margin: 2px 16px 0 0;
    font-size: 30px;
    line-height: 46px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
    background-color: #e9a13b;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe2a6), color-stop(0.5, #f5b544), color-stop(0.5, #e08a1e), color-stop(1, #f2a33c));
    background-image: -webkit-linear-gradient(top, #ffe2a6 0%, #f5b544 50%, #e08a1e 50%, #f2a33c 100%);
    background-image: -moz-linear-gradient(top, #ffe2a6 0%, #f5b544 50%, #e08a1e 50%, #f2a33c 100%);
    background-image: -o-linear-gradient(top, #ffe2a6 0%, #f5b544 50%, #e08a1e 50%, #f2a33c 100%);
    background-image: linear-gradient(to bottom, #ffe2a6 0%, #f5b544 50%, #e08a1e 50%, #f2a33c 100%);
    border: 1px solid #a05c12;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
}

.alert-sheet__body {
    overflow: hidden;
}

.alert-sheet h1 {
    margin: 0 0 12px;
    font-size: 18px;
}

.error-code {
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    color: #666;
}

/* manage lists: rows with the item details on the left and actions on the right */
.manage-list,
.collaborator-list,
.existing-files,
.revision-list,
.feedback-list,
.manage-comment-list {
    margin: 0 0 16px;
    border-top: 1px solid #cfcfcf;
}

.manage-row,
.collaborator-row,
.existing-file-row,
.revision-row,
.feedback-row,
.comment-manage-row {
    overflow: hidden;
    padding: 8px 6px;
    border-bottom: 1px solid #e3e3e3;
}

.manage-row:hover,
.collaborator-row:hover,
.comment-manage-row:hover {
    background-color: #f3f7fd;
}

.manage-row__meta {
    float: left;
    width: 64%;
    padding-right: 10px;
}

.manage-row__meta h3 {
    margin: 0 0 2px;
}

.manage-row__meta small,
.manage-row__meta span {
    color: #555;
}

.manage-row__actions {
    float: right;
    width: 36%;
    text-align: right;
}

.manage-row__actions > * {
    display: inline-block;
    margin: 0 0 4px 6px;
    vertical-align: middle;
}

.existing-file-row {
    margin: 0 0 8px;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.existing-file-row__heading {
    overflow: hidden;
    margin: 0 0 6px;
    font-size: 12px;
}

.existing-file-row__heading strong {
    float: left;
    max-width: 75%;
    word-wrap: break-word;
}

.existing-file-row__heading span {
    float: right;
    color: #555;
    font-size: 11px;
}

.revision-row__heading {
    margin: 0 0 4px;
    font-size: 13px;
}

.collaborator-picker,
.collection-picker,
.collection-preset-picker {
    margin: 0 0 12px;
}

.preset-row {
    margin: 0 0 8px;
}

.preset-groups {
    overflow: hidden;
    margin: 0 0 8px;
}

.preset-group {
    float: left;
    width: 48%;
    margin: 0 1% 10px;
}

.preset-grid {
    overflow: hidden;
}

.preset-grid button,
.preset-grid .button {
    margin: 0 4px 6px 0;
}

.danger-zone {
    margin: 0 0 16px;
    padding: 12px 14px;
    background-color: #fbf1f1;
    border: 1px solid #d19a9a;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.danger-zone h2 {
    color: #8e2222;
}

.transfer-sources {
    margin: 0 0 14px;
}

.transfer-client {
    margin: 0;
}

.transfer-client-details {
    margin: 0;
    font-size: 11px;
    color: #555;
}

.transfer-client-details small {
    display: block;
    color: #555;
}

.transfer-filters {
    margin: 0 0 12px;
}

.upload-box {
    margin: 0 0 14px;
    padding: 12px;
    background-color: #fbfbfb;
    border: 1px dashed #9a9a9a;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.metadata-row .field-count {
    margin: 0 0 6px;
}

/* feedback and comment forms read as sheets inside their pane */
.feedback-message {
    margin: 0;
    word-wrap: break-word;
}

/* legal documents and cards */
.legal-document {
    max-width: 760px;
}

.legal-meta {
    margin: 0 0 14px;
    font-size: 12px;
    color: #555;
}

.legal-card-grid {
    overflow: hidden;
    margin: 0 0 14px;
}

.legal-card {
    float: left;
    width: 48%;
    margin: 0 1% 14px;
    padding: 10px 12px;
    background-color: #f6f6f6;
    border: 1px solid #b5b5b5;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.legal-card h2 {
    margin: 4px 0 4px;
    font-size: 15px;
}

.legal-contact {
    margin: 0 0 14px;
}

/* ---------- upload progress, file inspector and page status ---------- */

.upload-progress {
    margin: 0 0 10px;
    font-size: 12px;
}

.upload-progress progress {
    display: block;
    width: 100%;
}

.upload-file-status,
.multipart-file-status {
    margin: 0 0 12px;
    border-top: 1px solid #d0d0d0;
}

.upload-file-status > *,
.multipart-file-status > * {
    overflow: hidden;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.upload-file-status progress,
.multipart-file-status progress {
    width: 40%;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.upload-file-status__actions,
.multipart-file-status__actions {
    float: right;
}

.upload-file-status__actions .button,
.multipart-file-status__actions .button {
    margin: 0 0 0 4px;
}

.upload-file-status > .is-success,
.multipart-file-status > .is-success {
    background-color: #f1faf3;
}

.upload-file-status > .is-error,
.multipart-file-status > .is-error {
    background-color: #fbf1f1;
}

.upload-file-status > .is-canceled,
.multipart-file-status > .is-canceled {
    background-color: #f5f5f5;
}

.file-inspector {
    margin: 0 0 12px;
}

.file-inspector__row {
    overflow: hidden;
    margin: 0 0 8px;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.file-inspector__name {
    overflow: hidden;
    margin: 0 0 6px;
    font-size: 12px;
}

.file-inspector__name strong {
    float: left;
    max-width: 78%;
    word-wrap: break-word;
}

.file-inspector__name span {
    float: right;
    font-size: 11px;
    color: #555;
}

.file-inspector__row > label {
    float: left;
    width: 31.33%;
    margin: 0 1% 6px 0;
}

.cross-page-upload-status {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 50;
    width: 300px;
    max-width: 90%;
    padding: 0 0 10px;
    background-color: #f1f1f1;
    border: 1px solid #6a6a6a;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.cross-page-upload-status > strong {
    display: block;
    margin: 0 0 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
    text-shadow: 0 1px 0 #fff;
    background-color: #d6d6d6;
    background-image: -webkit-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -moz-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: -o-repeating-linear-gradient(top, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    background-image: repeating-linear-gradient(to bottom, #f4f4f4 0px, #f4f4f4 2px, #b9b9b9 2px, #b9b9b9 3px);
    border-bottom: 1px solid #6a6a6a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.cross-page-upload-status > span {
    display: block;
    margin: 0 10px 6px;
    font-size: 12px;
    color: #444;
}

.cross-page-upload-status__progress {
    height: 10px;
    margin: 0 10px 8px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #7b7b7b;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.cross-page-upload-status__progress i {
    display: block;
    width: 0;
    height: 100%;
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.5, #7eb1f0), color-stop(0.5, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: -o-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    background-image: linear-gradient(to bottom, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
}

.cross-page-upload-status__actions {
    overflow: hidden;
    margin: 0 10px;
    font-size: 12px;
}

.cross-page-upload-status__actions a {
    float: left;
    margin-right: 14px;
    font-weight: bold;
}

.cross-page-upload-status__actions button {
    float: right;
}

.cross-page-upload-status.is-success {
    border-color: #3f8f55;
}

.cross-page-upload-status.is-error {
    border-color: #b34a4a;
}

/* progress bars: prefixed pseudo-elements sit in their own rules so an engine
   that rejects one of them keeps the rest */
progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #7b7b7b;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

progress::-webkit-progress-bar {
    background-color: #fff;
    border-radius: 6px;
}

progress::-webkit-progress-value {
    background-color: #5b8fe0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfe2fd), color-stop(0.5, #7eb1f0), color-stop(0.5, #5b93e0), color-stop(1, #7aa9ec));
    background-image: -webkit-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    border-radius: 6px;
}

progress::-moz-progress-bar {
    background-color: #5b8fe0;
    background-image: -moz-linear-gradient(top, #cfe2fd 0%, #7eb1f0 50%, #5b93e0 50%, #7aa9ec 100%);
    border-radius: 6px;
}

progress::-ms-fill {
    background-color: #5b8fe0;
    border-radius: 6px;
}


/* ---------- download menus ---------- */

.download-menu {
    position: relative;
    display: inline-block;
    margin: 0 8px 6px 0;
    vertical-align: middle;
}

.download-menu[open] > summary {
    background-color: #dadada;
}

.download-menu[open] > .download-menu__body {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    min-width: 170px;
    margin: 4px 0 0;
}

.download-menu--inline {
    margin: 0 6px 0 0;
}

.download-menu--inline[open] > .download-menu__body {
    right: auto;
    left: 0;
}

.file-table-wrap .download-menu--inline[open] > .download-menu__body {
    position: static;
    left: auto;
    min-width: 0;
}

.download-menu__body {
    margin: 4px 0 0;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.download-menu__body a {
    display: block;
    padding: 3px 14px;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

.download-menu__body a:hover,
.download-menu__body a:focus {
    color: #fff;
    background-color: #3d6fcf;
}

.download-pool-status {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    word-wrap: break-word;
}


/* ---------- custom controls: no browser-drawn dialogs, menus, pickers, tooltips or form widgets ---------- */

.dialog-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background-color: rgba(0, 0, 0, .22);
}

.dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    margin-left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #f4f4f4;
    border: 1px solid #3f3f3f;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.dialog .window-titlebar {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.dialog__message {
    margin: 14px 16px 16px;
    font-size: 13px;
    line-height: 18px;
    color: #000;
}

.dialog__actions {
    padding: 10px 12px;
    text-align: right;
    background-color: #e4e4e4;
    border-top: 1px solid #b5b5b5;
}

.dialog__actions .button {
    margin-left: 8px;
}

@media (max-width: 420px) {
    .dialog {
        left: 4%;
        right: 4%;
        width: auto;
        margin-left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

.select-popup,
.calendar-popup,
.colour-popup {
    position: absolute;
    z-index: 1050;
    padding: 4px;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    background-color: #fff;
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.select-popup {
    min-width: 120px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    white-space: nowrap;
}

.select-popup__item {
    padding: 3px 14px;
    cursor: default;
}

.select-popup__item.is-active,
.select-popup__item:hover {
    color: #fff;
    background-color: #3d6fcf;
}

.select-popup__item.is-disabled {
    color: #999;
}

.calendar-popup {
    width: 224px;
    padding: 8px;
}

.calendar-popup__head {
    margin-bottom: 4px;
    text-align: center;
}

.calendar-popup__month {
    display: inline-block;
    width: 110px;
    font-weight: bold;
}

.calendar-popup__weekdays span,
.calendar-popup__day,
.calendar-popup__blank {
    display: inline-block;
    width: 28px;
    text-align: center;
}

.calendar-popup__weekdays span {
    color: #555;
}

.calendar-popup__day {
    height: 22px;
    margin: 1px 0;
    padding: 0;
    font-size: 12px;
    color: #000;
    background: none;
    border: 0;
    cursor: pointer;
}

.calendar-popup__day:hover,
.calendar-popup__day:focus {
    color: #fff;
    background-color: #3d6fcf;
    outline: 0;
}

.calendar-popup__day.is-selected {
    color: #fff;
    background-color: #5b93e0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.calendar-popup__footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #c7c7c7;
}

.calendar-popup__footer input {
    width: 56px;
    margin-right: 4px;
    padding: 2px 4px;
    vertical-align: middle;
}

.colour-popup {
    width: 176px;
    padding: 8px;
}

.colour-popup__swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 3px;
    padding: 0;
    background-image: none;
    border: 1px solid #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}

.colour-popup__hex {
    margin-top: 6px;
}

.colour-popup__hex input {
    width: 100%;
    padding: 2px 4px;
}

.tooltip {
    position: absolute;
    z-index: 1200;
    display: none;
    max-width: 260px;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 16px;
    color: #000;
    background-color: #fffbe0;
    border: 1px solid #8a8a8a;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.picker-field {
    display: inline-block;
    white-space: nowrap;
}

.picker-field > input {
    width: 150px;
    vertical-align: middle;
}

.picker-button {
    height: 22px;
    min-height: 0;
    margin: 0 0 0 4px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 18px;
    vertical-align: middle;
}

.colour-button {
    padding: 0 6px;
}

.colour-button__swatch {
    display: inline-block;
    width: 22px;
    height: 12px;
    border: 1px solid #555;
    vertical-align: middle;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 22px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23222'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
}

select::-ms-expand {
    display: none;
}

select[multiple] {
    -webkit-appearance: menulist;
    -moz-appearance: listbox;
    appearance: auto;
    background-image: none;
    padding-right: 4px;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    padding: 0;
    vertical-align: -2px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
    cursor: pointer;
}

input[type="radio"] {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

input[type="checkbox"]:checked {
    border-color: #2d5ba6;
    background-color: #cfe2fd;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2L4 7.6 8.6 2.4' fill='none' stroke='%231b4f9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
    border-color: #2d5ba6;
    background-color: #cfe2fd;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%231b4f9c'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: .5;
    cursor: default;
}

input[type="file"]::-webkit-file-upload-button {
    margin: 0 8px 0 0;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    cursor: pointer;
    background-color: #e4e4e4;
    background-image: -webkit-linear-gradient(top, #f7f7f7, #d0d0d0);
    background-image: linear-gradient(to bottom, #f7f7f7, #d0d0d0);
    border: 1px solid #5a6f96;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

input[type="file"]::file-selector-button {
    margin: 0 8px 0 0;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    cursor: pointer;
    background-color: #e4e4e4;
    background-image: linear-gradient(to bottom, #f7f7f7, #d0d0d0);
    border: 1px solid #5a6f96;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

input[type="range"]:not(.media-player__range) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

input[type="range"]:not(.media-player__range)::-webkit-slider-runnable-track {
    height: 6px;
    background-color: #dadada;
    border: 1px solid #8a8a8a;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

input[type="range"]:not(.media-player__range)::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 1px solid #2d5ba6;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background-color: #5b93e0;
    background-image: -webkit-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

input[type="range"]:not(.media-player__range)::-moz-range-track {
    height: 6px;
    background-color: #dadada;
    border: 1px solid #8a8a8a;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input[type="range"]:not(.media-player__range)::-moz-range-thumb {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #2d5ba6;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #5b93e0;
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    cursor: pointer;
    background-color: #9a9a9a;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #000;
}

details:not(.download-menu) > summary {
    list-style: none;
    cursor: pointer;
}

details:not(.download-menu) > summary::-webkit-details-marker {
    display: none;
}

details:not(.download-menu) > summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 6px 1px 0;
    vertical-align: middle;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #222;
}

details[open]:not(.download-menu) > summary::before {
    border-width: 6px 4px 0 4px;
    border-color: #222 transparent transparent transparent;
}

/* ---------- scrollbars ----------

   themed like the rest of the site: the blues here recolour with the palette */
* {
    scrollbar-color: #7aa9ec #e4e4e4;
}

*::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

*::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border: 1px solid #a9a9a9;
}

*::-webkit-scrollbar-thumb {
    border: 1px solid #2d5ba6;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #5b93e0;
    background-image: -webkit-linear-gradient(top, #cfe2fd, #5b93e0);
    background-image: linear-gradient(to bottom, #cfe2fd, #5b93e0);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #7eb1f0;
}

*::-webkit-scrollbar-corner {
    background-color: #e4e4e4;
}

/* ---------- graphite theme ---------- */

html[data-theme="graphite"] {
    background-color: #6d6d6d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a9a9a9), color-stop(1, #4a4a4a));
    background-image: -webkit-linear-gradient(top, #a9a9a9, #4a4a4a);
    background-image: -moz-linear-gradient(top, #a9a9a9, #4a4a4a);
    background-image: -o-linear-gradient(top, #a9a9a9, #4a4a4a);
    background-image: linear-gradient(to bottom, #a9a9a9, #4a4a4a);
}

html[data-theme="graphite"] .button-primary,
html[data-theme="graphite"] .chip.selected {
    color: #fff;
    background-color: #7a7a7a;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4c4c4), color-stop(0.48, #8e8e8e), color-stop(0.52, #6a6a6a), color-stop(1, #8a8a8a));
    background-image: -webkit-linear-gradient(top, #c4c4c4 0%, #8e8e8e 48%, #6a6a6a 52%, #8a8a8a 100%);
    background-image: -moz-linear-gradient(top, #c4c4c4 0%, #8e8e8e 48%, #6a6a6a 52%, #8a8a8a 100%);
    background-image: -o-linear-gradient(top, #c4c4c4 0%, #8e8e8e 48%, #6a6a6a 52%, #8a8a8a 100%);
    background-image: linear-gradient(to bottom, #c4c4c4 0%, #8e8e8e 48%, #6a6a6a 52%, #8a8a8a 100%);
    border-color: #4d4d4d;
}

html[data-theme="graphite"] .label-category {
    color: #3a3a3a;
    background-color: #e4e4e4;
    border-color: #9a9a9a;
}

html[data-theme="graphite"] .chip.selected small {
    color: #fff;
}

html[data-theme="graphite"] ::selection {
    background: #5c5c5c;
}

html[data-theme="graphite"] ::-moz-selection {
    background: #5c5c5c;
}

html[data-theme="graphite"] a:focus-visible,
html[data-theme="graphite"] button:focus-visible,
html[data-theme="graphite"] summary:focus-visible {
    outline-color: #6a6a6a;
}

html[data-theme="graphite"] input:focus,
html[data-theme="graphite"] select:focus,
html[data-theme="graphite"] textarea:focus {
    border-color: #6a6a6a;
    -webkit-box-shadow: 0 0 0 3px rgba(106, 106, 106, .35);
    -moz-box-shadow: 0 0 0 3px rgba(106, 106, 106, .35);
    box-shadow: 0 0 0 3px rgba(106, 106, 106, .35);
}

html[data-theme="graphite"] .cross-page-upload-status__progress i {
    background-color: #7a7a7a;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4c4c4), color-stop(0.5, #8e8e8e), color-stop(0.5, #6a6a6a), color-stop(1, #8a8a8a));
    background-image: -webkit-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: -moz-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: -o-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: linear-gradient(to bottom, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
}

html[data-theme="graphite"] progress::-webkit-progress-value {
    background-color: #7a7a7a;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4c4c4), color-stop(0.5, #8e8e8e), color-stop(0.5, #6a6a6a), color-stop(1, #8a8a8a));
    background-image: -webkit-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: -moz-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: -o-linear-gradient(top, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
    background-image: linear-gradient(to bottom, #c4c4c4 0%, #8e8e8e 50%, #6a6a6a 50%, #8a8a8a 100%);
}

html[data-theme="graphite"] progress::-moz-progress-bar {
    background-color: #7a7a7a;
}

html[data-theme="graphite"] .profile-hero {
    border-top-color: #6a6a6a;
}

html[data-theme="graphite"] .download-menu__body a:hover,
html[data-theme="graphite"] .download-menu__body a:focus {
    background-color: #5c5c5c;
}


/* ---------- layout at narrower widths ---------- */

@media (max-width: 900px) {
    .window-body.has-source {
        display: block;
    }

    .window-body.has-source > .source-pane,
    .window-body.has-source > .site-main {
        display: block;
    }

    .window-body.has-source > .source-pane {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #a9b5c8;
    }

    .source-list {
        padding: 4px 8px 8px;
    }

    .source-list__heading {
        display: block;
        margin: 8px 6px 2px;
    }

    .source-list ul {
        overflow: hidden;
    }

    .source-list li {
        float: left;
    }

    .source-list a,
    .source-list a.source-plain {
        margin: 0 2px 2px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .icon-view__item {
        width: 33.33%;
    }

    .item-layout__main,
    .inspector {
        float: none;
        width: auto;
        padding-right: 0;
    }

    .item-toolbar .pane-toolbar__title,
    .item-toolbar .post-detail__tools {
        float: none;
        width: auto;
        text-align: left;
    }

    .profile-hero__copy,
    .profile-hero__actions {
        float: none;
        width: auto;
        text-align: left;
    }

    .pane-toolbar__search {
        float: none;
        width: auto;
        max-width: none;
        margin: 8px 0 0;
    }

    .prefs-item {
        width: 25%;
    }

    .stat-strip > div {
        width: 50%;
    }

    .stat-strip > div:nth-child(3) {
        border-left: 0;
    }

    .stat-grid > div {
        width: 48%;
    }

    .manage-row__meta,
    .manage-row__actions {
        float: none;
        width: auto;
        text-align: left;
    }

    .legal-card {
        width: 98%;
    }

    .media-item {
        width: 48%;
    }

    .smart-embed iframe {
        height: 240px;
    }

    .preset-group {
        width: 98%;
    }
}

@media (max-width: 640px) {
    .desktop {
        padding: 0;
    }

    .site-shell {
        max-width: none;
        border-left: 0;
        border-right: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .window-titlebar {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        padding: 0 60px;
    }

    .site-footer {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .footer-nav a,
    .footer-nav .nav-button {
        margin: 0 10px 4px 0;
    }

    .masthead .brand,
    .header-search {
        float: none;
        width: 100%;
    }

    .masthead .brand {
        margin: 0 0 8px;
    }

    .header-search {
        margin: 0;
        padding-right: 0;
    }

    .header-search input[type="search"] {
        width: 100%;
    }

    .header-search button {
        position: static;
        display: block;
        width: 100%;
        margin: 6px 0 0;
    }

    .site-main {
        padding: 14px 12px 20px;
    }

    .sub-line > span:first-child,
    .sub-links {
        float: none;
    }

    .sub-links a {
        margin: 0 10px 0 0;
    }

    .footer-left,
    .footer-meta {
        float: none;
    }

    .footer-meta a {
        display: inline-block;
        margin: 0 10px 4px 0;
    }

    .icon-view__item {
        width: 50%;
    }

    .prefs-item {
        width: 33.33%;
    }

    .file-table.list-view td:nth-child(3),
    .file-table.list-view th:nth-child(3) {
        display: none;
    }

    .pane-toolbar {
        padding: 9px 10px 10px;
    }

    .pane-toolbar h1,
    .item-toolbar h1,
    .profile-hero h1 {
        font-size: 20px;
    }

    .search-row {
        padding-right: 0;
    }

    .search-row > button {
        position: static;
        display: block;
        width: 100%;
        margin: 0 0 6px;
    }

    .section-heading > a,
    .section-heading > span {
        float: none;
        margin: 4px 0 0;
    }

    .section-heading > div {
        float: none;
    }

    .comment__meta time,
    .review__meta time {
        float: none;
    }

    .facet-group,
    .filter-fields > label,
    .form-grid > label,
    .form-grid > div,
    .check-grid > *,
    .metadata-row > *,
    .file-inspector__row > label,
    .preset-group,
    .media-item,
    .legal-card,
    .stat-grid > div {
        float: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .stat-strip > div {
        width: 50%;
    }

    .cross-page-upload-status {
        right: 8px;
        bottom: 8px;
    }

    .alert-sheet {
        margin: 16px 10px;
    }
}

@media (max-width: 480px) {
    .file-table.list-view td:nth-child(4),
    .file-table.list-view th:nth-child(4) {
        display: none;
    }

    .file-table.list-view td:nth-child(5) {
        white-space: normal;
    }
}

@media print {
    html,
    body {
        background: #fff;
    }

    .cross-player,
    .sub-line,
    .site-footer,
    .window-titlebar,
    .masthead,
    .source-pane,
    .cross-page-upload-status,
    .download-menu,
    .skip-link,
    .flash-stack,
    .pane-toolbar__search {
        display: none;
    }

    .desktop {
        padding: 0;
    }

    .site-shell {
        max-width: none;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .site-main {
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}

/* ---------- cross-page audio player ---------- */

.window-body.is-loading {
    opacity: .6;
    cursor: progress;
}

.cross-player {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1040;
    width: 264px;
    font-size: 11px;
    line-height: 15px;
    color: #000;
    background-color: #f2f2f2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbfbfb), color-stop(1, #d6d6d6));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #d6d6d6);
    background-image: -moz-linear-gradient(top, #fbfbfb, #d6d6d6);
    background-image: -o-linear-gradient(top, #fbfbfb, #d6d6d6);
    background-image: linear-gradient(to bottom, #fbfbfb, #d6d6d6);
    border: 1px solid #6b6b6b;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.cross-player[hidden],
.cross-player [hidden] {
    display: none;
}

.cross-player__handle {
    overflow: hidden;
    padding: 4px 6px 4px 8px;
    color: #3b3b3b;
    background-color: #dcdcdc;
    background-image: linear-gradient(to bottom, #ececec, #cfcfcf);
    border-bottom: 1px solid #9d9d9d;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    cursor: move;
    touch-action: none;
    -ms-touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cross-player__grip {
    float: left;
    font-weight: bold;
}

.cross-player__handle .cross-player__close {
    float: right;
    width: 18px;
    height: 18px;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 16px;
}

.cross-player__body {
    overflow: hidden;
    padding: 6px 8px 0;
}

.cross-player__cover {
    float: left;
    width: 48px;
    height: 48px;
    margin: 0 8px 0 0;
    overflow: hidden;
    background-color: #dfe8f5;
    border: 1px solid #9a9a9a;
}

.cross-player__cover img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.cross-player__info {
    overflow: hidden;
}

.cross-player__title {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    color: #1b4f9c;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cross-player__title:hover {
    text-decoration: underline;
}

.cross-player__subtitle {
    display: block;
    overflow: hidden;
    color: #444;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cross-player__controls {
    overflow: hidden;
    padding: 6px 8px 0;
}

.cross-player__play {
    float: left;
    height: 22px;
    min-width: 52px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 18px;
}

.cross-player input.cross-player__seek {
    float: left;
    width: 110px;
    margin: 4px 6px 0;
}

.cross-player__time {
    float: right;
    margin-top: 4px;
    color: #444;
    white-space: nowrap;
}

.cross-player__auto {
    display: block;
    padding: 6px 8px 6px;
    color: #333;
}

.cross-player__auto input {
    margin: 0 4px 0 0;
    vertical-align: middle;
}

/* ---------- masthead theme, sidebar account links, simple mode toggle ---------- */

.masthead-theme {
    float: left;
    margin: 10px 0 0 16px;
    font-size: 11px;
    line-height: 20px;
    white-space: nowrap;
}

.masthead-theme > * {
    display: inline-block;
    vertical-align: middle;
}

.source-form {
    margin: 0;
}

.source-list .source-button {
    display: block;
    width: 100%;
    margin: 0 6px 1px;
    padding: 2px 8px 2px 28px;
    font: inherit;
    font-size: 12px;
    line-height: 18px;
    color: #000;
    text-align: left;
    background: none;
    background-image: none;
    border: 0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.source-list .source-button:hover,
.source-list .source-button:focus {
    color: #fff;
    background-color: #3d6fcf;
}

.css-toggle[aria-pressed="true"] {
    font-weight: bold;
    text-decoration: none;
}