/* washny 2020 refresh - one overlay on top of the 2009 stylesheet (styles.css).
   Same layout, logo, colours and wording; flat shapes and the home page's Raleway
   instead of the gif gradients and Trebuchet. To roll back, remove the <link> to this
   file in cust_top.php. 2026-10-22 */
@import url("https://fonts.googleapis.com/css?family=Raleway:400,500,600,700&display=swap");

:root {
    --wd-navy: #07346f;   /* home page navy */
    --wd-blue: #2a4b97;   /* the old #364f9e page blue, a little deeper */
    --wd-red: #ed082a;    /* home page "Make A Reservation" red */
    --wd-ink: #1e2a3a;
    --wd-mist: #edf2f9;
    --wd-line: #cfd8e5;
}

html body {
    background-color: var(--wd-blue);
    font-family: "Raleway", "Trebuchet MS", Helvetica, Arial, sans-serif;
    color: var(--wd-ink);
    -webkit-font-smoothing: antialiased;
}
html body input,
html body select,
html body textarea {
    font-family: "Raleway", "Trebuchet MS", Helvetica, Arial, sans-serif;
}
html body a { color: var(--wd-navy); }

/* header: a flat light band in place of the striped gif; the logo artwork stays */
html body div.header_wrapper {
    background: #f3f5f8 none;
    border-bottom: 3px solid var(--wd-red);
}
html body div.call_box {
    background: var(--wd-red) none;
    border-radius: 0 0 10px 10px;
}
html body div.slogan { color: var(--wd-navy); }

/* tabs: same tabs, drawn flat */
html body ul.nav_tab li,
html body ul.nav_tab li.nav_tab_active {
    background: none;
    padding-left: 0;
    margin-right: 4px;
}
html body div.nav_tab_wrapper,
html body ul.nav_tab li.nav_tab_active div.nav_tab_wrapper {
    background: none;
    padding-right: 0;
}
html body ul.nav_tab a,
html body ul.nav_tab li.nav_tab_active a {
    background: var(--wd-red) none;
    border-radius: 9px 9px 0 0;
    padding: 0 15px;
    font-family: "Raleway", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}
html body ul.nav_tab li.nav_tab_active a {
    background-color: #fff;
    color: var(--wd-navy);
}
html body ul.nav_tab a:hover { background-color: #c80623; }
html body ul.nav_tab li.nav_tab_active a:hover { background-color: #fff; }

/* the white page card: rounded corners instead of the cap/footer gifs */
html body div.content_top_cap {
    background: #fff none;
    border-radius: 14px 14px 0 0;
}
html body div.footer_wrapper {
    background: #fff none;
    border-radius: 0 0 14px 14px;
}
html body div.footer_left { color: var(--wd-ink); }
html body div.footer_info { color: #e8eef8; }
html body div.footer_info a { color: #fff; }

/* headings */
html body div.headline8 {
    font-family: "Raleway", "Trebuchet MS", sans-serif;
    font-weight: 700;
    color: var(--wd-navy);
    letter-spacing: -.01em;
}

/* booking box: flat panel and rows */
html body div.home_reserv_box_wrapper,
html body div.reserv_box_wrapper {
    background: var(--wd-mist) none;
    border-radius: 12px;
}
html body div.home_reserv_box_slot {
    background: #fff none;
    border: 1px solid var(--wd-line);
    border-radius: 8px;
    font-weight: 600;
}
html body div.home_reserv_box_wrapper input[type=text],
html body div.home_reserv_box_wrapper select {
    border: 1px solid #aebbd0;
    border-radius: 6px;
    background-color: #fff;
    padding: 0 6px;
    font-size: 14px;
    color: var(--wd-ink);
}
html body input[type=text]:focus,
html body select:focus {
    outline: 2px solid var(--wd-navy);
    outline-offset: 1px;
}

/* price panel */
html body div.reservation_notice_header { color: var(--wd-red); font-weight: 700; }

/* footer icons were white-on-blue; the footer bar is white now */
html body div.footer_left input[type=image] { filter: invert(1) brightness(.45); }

/* invisible tracking pixels (their broken-image alt text showed beside the tabs) */
html body img[alt^="track"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* footer links were white on the blue (phone layout); the footer bar is white now */
html body div.footer_wrapper,
html body div.footer_wrapper a,
html body div.footer_right,
html body div.footer_right a { color: var(--wd-ink); }

/* desktop login dropdown: flat card instead of the login_back.png frame */
html body #innerwrap {
    background: #fff none;
    border: 1px solid var(--wd-line);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px rgba(7, 52, 111, .18);
}
html body .login_input,
html body .pass_input {
    border: 1px solid #aebbd0;
    border-radius: 6px;
    padding: 3px 6px;
}

/* phones */
@media only screen and (max-width: 640px) {
    /* login: a full-width panel under the button instead of a 163px box over the logo,
       with 16px fields so iPhones don't zoom the page when one is tapped */
    html body #login_box {
        position: fixed;
        top: 42px;
        left: 12px;
        right: 12px;
        width: auto;
    }
    html body #innerwrap {
        width: auto;
        height: auto;
        padding: 14px 18px 18px;
        border-radius: 12px;
        font-size: 15px;
        box-shadow: 0 16px 40px rgba(7, 52, 111, .3);
    }
    html body #innerwrap .login_input,
    html body #innerwrap .pass_input {
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        margin-top: 10px;
        padding: 0 12px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
    }
    html body #innerwrap .link { margin-top: 2px; }
    html body #innerwrap .button { margin: 12px 0; }
    html body #innerwrap .button input[type=image] { width: 150px; height: 43px; }

    /* the page heading was 11px wider than the screen (sideways scrolling) */
    html body div.headline8 {
        width: auto;
        margin-right: 4px;
    }
}

/* stop pages, "map on tap" (2026-10-22): the map box shows the stop, a Show map button and a
   link to Google Maps; the map itself (about 1 MB of Google script) loads on the tap */
html body #map_canvas .map_tap {
    box-sizing: border-box;
    height: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    text-align: center;
    background: var(--wd-mist);
    border: 1px solid var(--wd-line);
    border-radius: 8px;
    color: var(--wd-ink);
}
html body #map_canvas .map_tap:before {   /* map pin */
    content: "";
    width: 26px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath fill='%23ed082a' d='M13 0C5.8 0 0 5.6 0 12.6 0 22 13 32 13 32s13-10 13-19.4C26 5.6 20.2 0 13 0z'/%3E%3Ccircle cx='13' cy='12.5' r='4.6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
html body #map_canvas .map_tap_name {
    font-size: 16px;
    font-weight: 700;
    color: var(--wd-navy);
}
html body #map_canvas .map_tap_addr { font-size: 14px; }
html body #map_canvas .map_tap_btn {
    min-height: 40px;
    padding: 0 24px;
    border: 0;
    border-radius: 20px;
    background: var(--wd-red);
    color: #fff;
    font: 700 14px "Raleway", Arial, sans-serif;
    cursor: pointer;
}
html body #map_canvas .map_tap_btn:hover { background-color: #c80623; }
html body #map_canvas .map_tap_btn:disabled { opacity: .7; cursor: default; }
html body #map_canvas .map_tap_link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

/* phones: no text under 12px (Google's mobile check flags it as too small to read). Only the
   font sizes change. Same device-width test as the 2009 phone layout in styles.css. 2026-10-22 */
@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
    html body div.footer_wrapper,                       /* copyright, footer links, | (10px) */
    html body div.footer_right a,
    html body div.footer_transportation_info,           /* operator / USDOT line (11px) */
    html body div.nav_wrapper:before,                   /* NAVIGATION label (11px) */
    html body div.errors,                               /* short error notice (9px) */
    html body #map_box .top,                            /* bus stop map pop-up titles (11px) */
    html body .reserv_table_heading_td,                 /* step 2 timetable headings (9px) */
    html body td.reserv_table_sched1,                   /* step 2 timetable (11px) */
    html body tr.passenger_details_form td,             /* step 3 passenger form (10-11px) */
    html body tr.comments td,
    html body div.reservations_book_payment_topright tr td,  /* step 3 card form (11px) */
    html body .mobile_itinerary h4,                     /* step 3 Departing / Returning (10px) */
    html body div#termspop {                            /* terms pop-up (11px) */
        font-size: 12px;
    }
    html body .reserv_table_heading_td { line-height: 14px; }  /* was 9px, set for 9px text */
}