/* One stylesheet for all four applications (production summary, coal-bed methane, Trenton and Martinsburg wells).
   Styles from the classic ogsum.css (invalid "font-face" rules written as font-family), the results table header
   colors that go2.asp set in BGCOLOR attributes, and the WVGES site banner from PipelineWeb. */

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

:root {
    /* WVGES logo colors, sampled from WVGES-logo.png (the same values as PipelineWeb). */
    --accent-red: #c00000;    /* 6.5:1 on white */
    --wvges-navy: #005288;    /* "Geology underlies it all" band; white on navy 8.2:1 */
    --wvges-navy-dark: #003a61;
    --wvges-sky: #4db3d0;     /* sky layer (decorative only) */
    --wvges-sand: #e0c298;    /* sand layer */
    --wvges-green: #649043;   /* thin green layer */
    --wvges-brown: #945403;   /* earth layer */
    --panel-bg: #f3eadb;      /* light sand; black text 17.6:1, navy text 6.9:1 */
}

body {
    margin: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000;
    background-color: #fff;
}

p { color: #000; }

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    padding: 0.25rem 0.5rem;
    background: #fff;
}

/* Site banner, copied from PipelineWeb (pipeline.css), matching the WVGES site banner (www.wvgs.wvnet.edu):
   a gray top bar, the logo and agency name over a geologic cross-section, a blue rule,
   then a bottom row with the breadcrumb on the left and the page links on the right. */
.site-banner {
    --banner-bar: #e0e8ea;       /* top bar gray, from the WVGES site */
    --banner-bar-link: #0000ab;  /* 10.6:1 on the bar */
    --banner-rule: #43649d;      /* blue rule under the banner; 5.9:1 on white */
    --banner-crumb: #595959;     /* 7.0:1; the WVGES site uses #808080 (3.95:1) */
    --banner-current: #800000;   /* maroon current-page crumb, 10.9:1 */
    margin-bottom: 0.5rem;
}

.utility-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.75rem;
    background: var(--banner-bar);
    font-weight: bold;
}
.utility-bar a { color: var(--banner-bar-link); text-decoration: none; }
.utility-bar a:hover, .utility-bar a:focus-visible { text-decoration: underline; }

.banner-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 60px;
    margin-top: 0.4rem;
    border-bottom: 5px solid var(--banner-rule);
}
.banner-logo img { display: block; width: 200px; height: auto; }
.banner-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    line-height: 1.05;
    color: #000;
    white-space: nowrap;
}
.banner-state { display: block; font-size: 1.1rem; }
.banner-agency { display: block; font-size: 1.65rem; }
/* The cross-section image fades to white at its left edge, so it starts right after the title. */
.banner-map {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 121px;
}

/* Application navigation: the four summary data applications, under the banner's blue rule. The current one is
   maroon on white, like the current breadcrumb, with a navy bar along its top edge joining it to the rule. */
.app-nav {
    background: var(--banner-bar);
    border-bottom: 1px solid #c5d2d6;
}
.app-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0 0.25rem;
}
.app-nav a {
    display: block;
    padding: 0.3rem 0.75rem 0.35rem;
    border-top: 3px solid transparent;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--wvges-navy);
    text-decoration: none;
}
.app-nav a:hover, .app-nav a:focus-visible { text-decoration: underline; }
.app-nav a[aria-current] {
    background: #fff;
    border-top-color: var(--wvges-navy);
    color: var(--banner-current);
}

.banner-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1.5rem;
    padding: 0.3rem 0.25rem 0;
}
.breadcrumb ol, nav.links ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb { font-size: 0.75rem; font-weight: bold; }
.breadcrumb li + li::before {
    content: ">>";
    padding: 0 0.4rem;
    color: #000;
    font-weight: normal;
}
.breadcrumb a { color: var(--banner-crumb); }
.breadcrumb [aria-current="page"] { color: var(--banner-current); }
/* Spacing rather than divider lines, so links that wrap onto a second line stay tidy. */
nav.links ul { justify-content: flex-end; gap: 0.15rem 1.1rem; }

h1.page-title {
    margin: 0.4rem 0 0.6rem;
    font-size: 1.05rem;
    color: #43649d;   /* same blue as the banner rule; 5.9:1 on white */
}

/* County-map title images of the classic well pages (cbmmapt.gif ...), shown as the page heading in place of the text.
   They shrink with the window on narrow screens. */
h1.title-image { margin: 0.2rem 0 0.4rem; line-height: 0; }
.title-image img { display: block; max-width: 100%; height: auto; }

/* Home page: one card per application, in the search panel's colors. */
.intro { max-width: 60rem; }
.app-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}
.app-card {
    position: relative;
    padding: calc(6px + 0.5rem) 0.75rem 0.5rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
/* The same strata stripe as the search panel. */
.app-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to bottom,
        var(--wvges-sky) 0 2px,
        var(--wvges-sand) 2px 4px,
        var(--wvges-green) 4px 5px,
        var(--wvges-brown) 5px 6px);
}
.app-heading { margin: 0 0 0.35rem; font-size: 1.05rem; }
.app-heading a { color: #43649d; }
.app-heading.title-image { line-height: 0; }
.app-heading.title-image a { display: inline-block; }
.app-links { margin: 0.35rem 0 0.2rem; padding-left: 1.25rem; }
.app-links li { margin: 0.2rem 0; }
.app-links a, .file-list a { color: var(--wvges-navy); font-weight: bold; }
.app-links .sep { padding: 0 0.3rem; color: #808080; }

/* Coal-bed methane download page (dtcmdn90.htm). */
.file-list { margin: 0.75rem 0; padding-left: 1.25rem; }
.file-list li { margin: 0.4rem 0; }
.conversion { font-size: 1.1em; margin-top: 1rem; }

/* Martinsburg description and map files pages. */
.description p { max-width: 60rem; }
h2.section-heading { font-size: 1rem; color: var(--wvges-navy); margin: 1rem 0 0.3rem; }
.map-file { margin: 0.75rem 0; }
.map-file p { margin: 0.4rem 0; }
.zip-contents { margin: 0.3rem 0 0.75rem 1.25rem; }
.zip-contents dt { font-weight: bold; margin-top: 0.4rem; }
.zip-contents dd { margin: 0; }
/* The files in each set, one per line, slightly indented under the set's name. */
.zip-files { list-style: none; margin: 0.15rem 0 0.4rem; padding-left: 1.5rem; }
.zip-files li { margin: 0.05rem 0; }
.footnote { max-width: 60rem; font-size: 9pt; }

/* Narrower windows: drop the cross-section image, then stack the bottom row. */
@media (max-width: 52rem) {
    .banner-map { display: none; }
}
@media (max-width: 36rem) {
    .banner-main { flex-wrap: wrap; gap: 0.4rem 0.75rem; padding-bottom: 0.3rem; }
    .banner-logo img { width: 150px; }
    .banner-title { white-space: normal; }
    .banner-state { font-size: 0.95rem; }
    .banner-agency { font-size: 1.2rem; }
    .banner-bottom { flex-direction: column; align-items: flex-start; }
    nav.links ul { justify-content: flex-start; }
    .app-nav a { padding: 0.25rem 0.5rem 0.3rem; }
}

a:focus, button:focus, select:focus, input:focus {
    outline: 2px solid #005288;
    outline-offset: 1px;
}

/* Search form: one compact panel in the WVGES logo colors, the same scheme as PipelineWeb's search form
   (light sand panel, navy border, labels and button, and a thin strata stripe across the top). */
.notices li.notice-highlight { color: var(--accent-red); }

form.search {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    padding: calc(6px + 0.35rem) 0.6rem 0.4rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: var(--panel-bg);
    overflow: hidden;
}

/* Signature: a thin strata stripe across the top, the logo's layers from sky down to earth. */
form.search::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to bottom,
        var(--wvges-sky) 0 2px,
        var(--wvges-sand) 2px 4px,
        var(--wvges-green) 4px 5px,
        var(--wvges-brown) 5px 6px);
}

.choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.5rem;
}

.field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.35rem;
}

form.search label {
    font-weight: bold;
    color: var(--wvges-navy);
}

/* Well-list forms (coal-bed methane, Trenton, Martinsburg): one row per list, labels right-aligned as on the classic forms. */
.filters {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    align-items: center;
    gap: 0.3rem 0.5rem;
}
.filters label { text-align: right; }
form.search select { max-width: 100%; }

@media (max-width: 36rem) {
    .filters { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .filters label { text-align: left; }
    .filters select { margin-bottom: 0.3rem; }
}

form.search select,
form.search input[type="text"] {
    font: inherit;
    color: #000;
    background: #fff;
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0 0.25rem;
    min-height: 1.4rem;
}

form.search input[type="text"] { font-variant-numeric: tabular-nums; }

table.minimums {
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

table.minimums td {
    padding: 0.1rem 0.4rem 0.1rem 0;
    text-align: right;
}

table.minimums td.input { text-align: left; white-space: nowrap; }

.actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}
.actions button {
    font: inherit;
    font-weight: bold;
    color: #fff;
    background: var(--wvges-navy);
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0.1rem 0.8rem;
    cursor: pointer;
}
.actions button:hover { background: var(--wvges-navy-dark); }
.actions a { color: var(--wvges-navy); }

/* Disclaimer, startup page only (from PipelineWeb). */
.disclaimer { max-width: 75rem; margin-top: 1rem; }
.disclaimer h2 { font-size: 1rem; text-transform: uppercase; }

/* Results table */
table.summary {
    border: 1px solid #000;
    border-collapse: collapse;
    background-color: #fff;
}

table.summary caption {
    text-align: left;
    font-size: 9pt;
    padding: 0 0 4px 0;
}

table.summary th, table.summary td {
    border: 1px solid #808080;
    font-size: 8pt;
    padding: 0 5px 0 2px;
    text-align: right;
}

table.summary thead th {
    font-size: 8pt;
    font-weight: bold;
    text-align: center;
    padding: 1px 2px;
}

/* Keep the column headings in view while scrolling a long table. */
table.summary thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

table.summary tbody th { font-weight: normal; }

table.summary tfoot th, table.summary tfoot td { font-weight: bold; }

table.summary tbody tr:hover td, table.summary tbody tr:hover th { background-color: #f3f3f3; }

.h-key     { background-color: #f0d302; }
.h-gas     { background-color: #ff0000; }
.h-gas-sub { background-color: #ff8080; }
.h-oil     { background-color: #48b000; }
.h-oil-sub { background-color: #00bf40; }
.h-ngl, .h-ngl-sub { background-color: #ffa500; }
.h-all     { background-color: #0080ff; }
.h-well    { background-color: var(--panel-bg); }   /* well details in the well lists: the search panel's sand */

.table-note { font-size: 8pt; max-width: 60em; }

/* Well lists: numbers and dates right-aligned, text left-aligned. Cells stay on one line (as on mrbg_results.asp),
   except comments and zone lists, which wrap in a wider column. */
table.wells tbody td, table.wells tbody th { white-space: nowrap; }
table.wells td.t, table.wells th.t { text-align: left; }
table.wells td.wide { white-space: normal; min-width: 22em; }
table.wells td, table.wells tbody th { vertical-align: top; }
table.wells thead th { vertical-align: top; }
table.wells thead em { font-weight: normal; }
.key-ref { color: inherit; text-decoration: none; }
.key-ref:hover, .key-ref:focus-visible { text-decoration: underline; }

.data-note { margin: 0.25rem 0 0.5rem; }
.see-also { margin-top: 0.75rem; }

/* Keys under a well list (county codes, formation and operator names, field definitions). */
.keys {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 2.5rem;
    margin-top: 1rem;
    font-size: 8pt;
}
.key { max-width: 42rem; }
.key h2 {
    margin: 0 0 0.3rem;
    font-size: 9pt;
    color: var(--wvges-navy);
}
.key dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.05rem 0.6rem;
    margin: 0;
}
.key dt { font-weight: bold; }
.key dd { margin: 0; }
.credit { margin-top: 1rem; }

/* Excel and PDF download links above the results table. */
.downloads { margin: 0.25rem 0 0.5rem; }
.downloads a { margin-left: 0.6rem; color: var(--wvges-navy); font-weight: bold; }

.errors {
    color: #b00000;
    font-weight: bold;
}

@media print {
    form.search, .utility-bar, .app-nav, .banner-bottom, .banner-map, .skip-link, .downloads, .see-also { display: none; }
    table.summary thead { position: static; }
}

/* Site footer, copied from PipelineWeb (pipeline.css), matching the WVGES site footer: webmaster line, a blue rule, address / logo / Facebook,
   a second blue rule, then the site Disclaimer and Privacy Statement links and the permission line. */
.site-footer {
    margin-top: 2rem;
    text-align: center;
}
.site-footer .webmaster { margin: 0 0 0.6rem; }
.footer-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 5px solid #43649d;
    border-bottom: 5px solid #43649d;
}
.footer-address {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-style: normal;
    line-height: 1.3;
}
.footer-org { display: inline-flex; align-items: flex-end; gap: 0.4rem; }
.footer-org img { display: block; }
.footer-logo a { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.footer-logo img { display: block; }
.footer-social { justify-self: end; margin-right: 3.5rem; }
.footer-social img { display: block; }
.footer-links { margin: 0.5rem 0 0.4rem; }
.footer-links .sep {
    padding: 0 0.35rem;
    color: #43649d;
    font-size: 0.7em;
    vertical-align: 0.15em;
}
.site-footer .permission {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: bold;
    color: #595959;   /* 7.0:1 on white; the WVGES site uses #808080 (3.95:1) */
}

@media (max-width: 36rem) {
    .footer-main { grid-template-columns: 1fr; }
    .footer-social { justify-self: center; margin-right: 0; }
}

@media print {
    .footer-social { display: none; }
}