/* PerchBar help.
 *
 * The HTML Help viewer is Internet Explorer's engine, so this stays deliberately old: no flex,
 * no custom properties, no web fonts. Segoe UI is present on every Windows the product runs on.
 *
 * Every topic declares a doctype, which is what gets that engine out of quirks mode. It matters for
 * exactly one rule - max-width, which quirks mode ignores - and without it a screenshot wider than
 * the topic pane pushed the page sideways instead of shrinking to fit.
 */

/* The vertical scrollbar, always, whether the page needs it or not.
 *
 * Not cosmetic: without it a full-width screenshot is laid out against the pane's whole width, the
 * scrollbar then appears because the page is long, and the image is left about 17px too wide - so a
 * topic with a picture on it got a horizontal scrollbar as well. Measured on The Groups dialog.
 * Nearly every topic here is long enough to need the scrollbar anyway. */
html {
    overflow-y: scroll;
}

body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    margin: 0;
    padding: 18px 26px 32px 26px;
}

h1 {
    font-size: 17pt;
    font-weight: normal;
    color: #0067c0;
    margin: 0 0 14px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #d8d8d8;
}

h2 {
    font-size: 11.5pt;
    font-weight: 600;
    color: #1a1a1a;
    margin: 22px 0 6px 0;
}

p {
    margin: 0 0 10px 0;
}

/* The one-sentence summary at the top of the welcome page. */
p.lead {
    font-size: 12pt;
    color: #333333;
    margin-bottom: 16px;
}

/* An aside: true, worth knowing, not needed to follow the steps. */
p.note {
    background: #f2f7fb;
    border-left: 3px solid #0067c0;
    padding: 8px 12px;
    margin: 14px 0;
}

ul, ol {
    margin: 0 0 10px 0;
    padding-left: 24px;
}

li {
    margin-bottom: 5px;
}

/* Every table here is a two-column "what it is / what it does" list, so the first column is
 * the term and is not a heading row. */
table {
    border-collapse: collapse;
    margin: 10px 0 14px 0;
    width: 100%;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 6px 10px;
    border-bottom: 1px solid #e6e6e6;
}

th {
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
    color: #1a1a1a;
}

code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 9.5pt;
    background: #f4f4f4;
    padding: 1px 4px;
}

/* The name of something on screen - a button, a field, a menu item - as the user sees it. */
.ui {
    font-weight: 600;
    white-space: nowrap;
}

/* Screenshots.
 *
 * max-width keeps a wide one inside a narrow help window instead of forcing the page to scroll
 * sideways, and -ms-interpolation-mode is what makes IE's engine resample it smoothly when it does
 * have to shrink - without it a scaled screenshot's text turns to gravel.
 *
 * 98% rather than 100%: max-width bounds the picture, and the border is then drawn outside it, so at
 * 100% a full-width screenshot is two pixels too wide and the topic gets a horizontal scrollbar for
 * those two pixels. Measured; box-sizing would be the tidy answer but this engine is too old. */
img {
    max-width: 98%;
    -ms-interpolation-mode: bicubic;
    border: 1px solid #d0d0d0;
    margin: 4px 0 2px 0;
}

/* A close-up of something on the taskbar. No border: these are cropped out of the taskbar itself,
 * so they arrive with a dark edge of their own and a grey line around it only looks like a mistake. */
img.closeup {
    border: none;
}

/* One line under a screenshot saying what is being pointed at. */
p.caption {
    font-size: 9pt;
    color: #666666;
    margin: 0 0 16px 0;
}

a {
    color: #0067c0;
}

a:hover {
    color: #004a8c;
}