/*
    Macroscope overview page (macroscope_overview.html)
    Styles that follow the look of the macroscope white paper.
    Everything is scoped to .page_macroscope_overview, the class make_basic_page()
    derives from the file name, so other pages are not affected.
    Load after common.css and products.css (or append to products.css).
*/

.page_macroscope_overview
{
    --wp_blue:        #4472c4;   /* headings and macroscope rows in the white paper */
    --wp_border:      #3a3a3a;   /* thin dark table rules */
    --wp_header_bg:   #f2f2f2;   /* light grey table header */
}

/* ---------- hero ---------- */

.page_macroscope_overview.product .backdrop
{
    background-color: #e9ecf2;
}

.page_macroscope_overview.product .backdrop .image
{
    background-image: url("./images/macroscope/macroscope_product.png");
}

/* ---------- layout ---------- */

/* products.css limits .product .description to 600px; use the full column width here */
.page_macroscope_overview.product .description
{
    max-width: none;
}

/* lets the main column shrink below the width of a wide table or image */
.page_macroscope_overview.product .main_col
{
    min-width: 0;
}

/* the site resets paragraph margins; this page has several paragraphs per section */
.page_macroscope_overview.product .main_col P + P,
.page_macroscope_overview.product .main_col P + .figure,
.page_macroscope_overview.product .main_col .figure + P,
.page_macroscope_overview.product .main_col .table_wrapper + P,
.page_macroscope_overview.product .main_col P + .table_wrapper,
.page_macroscope_overview.product .main_col .figure + .table_wrapper,
.page_macroscope_overview.product .main_col .table_wrapper + .figure
{
    margin-top: 1em;
}

/* ---------- headings (white paper: light blue, slightly spaced section titles) ---------- */

.page_macroscope_overview.product H3
{
    color: var(--wp_blue);
    font-family: helvetica_neue_roman;
    font-weight: normal;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.page_macroscope_overview.product H4
{
    color: var(--wp_blue);
    font-family: helvetica_neue_medium;
    font-weight: normal;
    margin-top: 28px;
    margin-bottom: 8px;
}

.page_macroscope_overview.product P B,
.page_macroscope_overview.product LI B
{
    font-family: helvetica_neue_bold;
    font-weight: normal;
}

/* small print, e.g. the stereo microscope example and footnotes */
.page_macroscope_overview.product P.note
{
    font-size: 15px;
    line-height: 150%;
    color: var(--steel);
    margin-top: 1em;
}

/* the indented stereo/compound paragraphs of the "problem" section */
.page_macroscope_overview.product P.indented
{
    padding-left: 36px;
}

/* ---------- figures ---------- */

.page_macroscope_overview.product .figure
{
    margin-top: 24px;
    margin-bottom: 24px;
}

.page_macroscope_overview.product .figure P.caption
{
    font-size: 15px;
    line-height: 150%;
    color: var(--steel);
    margin-top: 8px;
}

/* ---------- tables ---------- */

.page_macroscope_overview .table_wrapper
{
    max-width: 100%;
    overflow-x: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page_macroscope_overview TABLE.spec_table
{
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 140%;
    color: var(--dark);
}

.page_macroscope_overview TABLE.spec_table TH,
.page_macroscope_overview TABLE.spec_table TD
{
    border: 1px solid var(--wp_border);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.page_macroscope_overview TABLE.spec_table TH
{
    background-color: var(--wp_header_bg);
    font-family: helvetica_neue_medium;
    font-weight: normal;
    vertical-align: bottom;
}

/* macroscope rows in blue, as in the white paper */
.page_macroscope_overview TABLE.spec_table TR.highlight TD
{
    color: var(--wp_blue);
}

/* subsystem table: narrow first column */
.page_macroscope_overview TABLE.spec_table.subsystems TD:first-child
{
    width: 28%;
}

/* light collection: numbers centred */
.page_macroscope_overview TABLE.spec_table.light_collection TD:nth-child(n+4),
.page_macroscope_overview TABLE.spec_table.light_collection TH:nth-child(n+4)
{
    text-align: center;
}

/* resolution: numbers centred */
.page_macroscope_overview TABLE.spec_table.resolution TD:nth-child(2),
.page_macroscope_overview TABLE.spec_table.resolution TD:nth-child(3),
.page_macroscope_overview TABLE.spec_table.resolution TH:nth-child(2),
.page_macroscope_overview TABLE.spec_table.resolution TH:nth-child(3)
{
    text-align: center;
}

/* pricing: prices right-aligned, item and price columns fixed */
.page_macroscope_overview TABLE.spec_table.pricing TD:first-child
{
    width: 26%;
}

.page_macroscope_overview TABLE.spec_table.pricing TD:nth-child(2),
.page_macroscope_overview TABLE.spec_table.pricing TH:nth-child(2)
{
    width: 14%;
    text-align: right;
    white-space: nowrap;
}

/* ---------- application lists ---------- */

.page_macroscope_overview OL.applications
{
    margin-top: 16px;
    margin-bottom: 0px;
    padding-left: 2.2em;
}

.page_macroscope_overview OL.applications LI
{
    margin-bottom: 0.8em;
    padding-left: 0.3em;
}

/* ---------- narrow screens ---------- */

@media (max-width: 800px)
{
    .page_macroscope_overview TABLE.spec_table
    {
        font-size: 13px;
    }

    .page_macroscope_overview TABLE.spec_table TH,
    .page_macroscope_overview TABLE.spec_table TD
    {
        padding: 5px 6px;
    }

    .page_macroscope_overview.product P.indented
    {
        padding-left: 0px;
    }
}