views/hidden.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="theme-color" content="#fff">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
                                 maximum-scale=1.0, user-scalable=no">
    <title>Hidden</title>
    <style>
        /* Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

        a {
            color: var(--link-color);
        }

        body {
            --background-color: #fff;
            --error-code-color: var(--google-gray-700);
            --google-blue-100: rgb(210, 227, 252);
            --google-blue-300: rgb(138, 180, 248);
            --google-blue-600: rgb(26, 115, 232);
            --google-blue-700: rgb(25, 103, 210);
            --google-gray-100: rgb(241, 243, 244);
            --google-gray-300: rgb(218, 220, 224);
            --google-gray-500: rgb(154, 160, 166);
            --google-gray-50: rgb(248, 249, 250);
            --google-gray-600: rgb(128, 134, 139);
            --google-gray-700: rgb(95, 99, 104);
            --google-gray-800: rgb(60, 64, 67);
            --google-gray-900: rgb(32, 33, 36);
            --heading-color: var(--google-gray-900);
            --link-color: rgb(88, 88, 88);
            --popup-container-background-color: rgba(0, 0, 0, .65);
            --primary-button-fill-color-active: var(--google-blue-700);
            --primary-button-fill-color: var(--google-blue-600);
            --primary-button-text-color: #fff;
            --quiet-background-color: rgb(247, 247, 247);
            --secondary-button-border-color: var(--google-gray-500);
            --secondary-button-fill-color: #fff;
            --secondary-button-hover-border-color: var(--google-gray-600);
            --secondary-button-hover-fill-color: var(--google-gray-50);
            --secondary-button-text-color: var(--google-gray-700);
            --small-link-color: var(--google-gray-700);
            --text-color: var(--google-gray-700);
            background: var(--background-color);
            color: var(--text-color);
            word-wrap: break-word;
        }

        .nav-wrapper .secondary-button {
            background: var(--secondary-button-fill-color);
            border: 1px solid var(--secondary-button-border-color);
            color: var(--secondary-button-text-color);
            float: none;
            margin: 0;
            padding: 8px 16px;
        }

        .hidden {
            display: none;
        }

        html {
            -webkit-text-size-adjust: 100%;
            font-size: 125%;
        }

        .icon {
            background-repeat: no-repeat;
            background-size: 100%;
            display: inline-block;
            user-select: none;
        }

        @media (prefers-color-scheme: dark) {
            body {
                --background-color: var(--google-gray-900);
                --error-code-color: var(--google-gray-500);
                --heading-color: var(--google-gray-500);
                --link-color: var(--google-blue-300);
                --primary-button-fill-color-active: rgb(129, 162, 208);
                --primary-button-fill-color: var(--google-blue-300);
                --primary-button-text-color: var(--google-gray-900);
                --quiet-background-color: var(--background-color);
                --secondary-button-border-color: var(--google-gray-700);
                --secondary-button-fill-color: var(--google-gray-900);
                --secondary-button-hover-fill-color: rgb(48, 51, 57);
                --secondary-button-text-color: var(--google-blue-300);
                --small-link-color: var(--google-blue-300);
                --text-color: var(--google-gray-500);
            }
        }
    </style>
    <style>
        /* Copyright 2014 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file. */

        button {
            border: 0;
            border-radius: 4px;
            box-sizing: border-box;
            color: var(--primary-button-text-color);
            cursor: pointer;
            float: right;
            font-size: .875em;
            margin: 0;
            padding: 8px 16px;
            transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }

        .neterror button {
            background: var(--primary-button-fill-color);
        }

        button:active {
            background: var(--primary-button-fill-color-active);
            outline: 0;
        }

        #details {
            margin: 0 0 50px;
        }

        .secondary-button:active {
            border-color: white;
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
        }

        .secondary-button:hover {
            background: var(--secondary-button-hover-fill-color);
            border-color: var(--secondary-button-hover-border-color);
            text-decoration: none;
        }

        .error-code {
            color: var(--error-code-color);
            font-size: .86667em;
            text-transform: uppercase;
            margin-top: 12px;
        }

        h1 {
            color: var(--heading-color);
            font-size: 1.6em;
            font-weight: normal;
            line-height: 1.25em;
            margin-bottom: 16px;
        }

        .icon {
            height: 72px;
            margin: 0 0 40px;
            width: 72px;
        }

        .interstitial-wrapper {
            box-sizing: border-box;
            font-size: 1em;
            line-height: 1.6em;
            margin: 14vh auto 0;
            max-width: 600px;
            width: 100%;
        }

        #main-message>p {
            display: inline;
        }

        .nav-wrapper {
            margin-top: 51px;
        }

        .nav-wrapper::after {
            clear: both;
            content: '';
            display: table;
            width: 100%;
        }

        .small-link {
            color: var(--small-link-color);
            font-size: .875em;
        }

        @media (max-width: 700px) {
            .interstitial-wrapper {
                padding: 0 10%;
            }
        }

        @media (max-width: 420px) {

            button,
            .small-link {
                float: none;
                font-size: .825em;
                font-weight: 500;
                margin: 0;
                width: 100%;
            }

            button {
                padding: 16px 24px;
            }

            #details {
                margin: 20px 0 20px 0;
            }

            .secondary-button:not(.hidden) {
                display: block;
                margin-top: 20px;
                text-align: center;
                width: 100%;
            }

            .interstitial-wrapper {
                padding: 0 5%;
            }

            .nav-wrapper {
                margin-top: 30px;
            }
        }

        /**
 * Mobile specific styling.
 * Navigation buttons are anchored to the bottom of the screen.
 * Details message replaces the top content in its own scrollable area.
 */

        @media (max-width: 420px) {
            .nav-wrapper .secondary-button {
                border: 0;
                margin: 16px 0 0;
                margin-inline-end: 0;
                padding-bottom: 16px;
                padding-top: 16px;
            }
        }

        /* Fixed nav. */

        @media (min-width: 240px) and (max-width: 420px) and (min-height: 401px),
        (min-width: 421px) and (min-height: 240px) and (max-height: 560px) {
            body .nav-wrapper {
                background: var(--background-color);
                bottom: 0;
                box-shadow: 0 -12px 24px var(--background-color);
                left: 0;
                margin: 0 auto;
                max-width: 736px;
                padding-left: 24px;
                padding-right: 24px;
                position: fixed;
                right: 0;
                width: 100%;
                z-index: 2;
            }

            .interstitial-wrapper {
                max-width: 736px;
            }

            #details,
            #main-content {
                padding-bottom: 40px;
            }

            #details {
                padding-top: 5.5vh;
            }

            button.small-link {
                color: var(--google-blue-600);
            }
        }

        @media (max-width: 420px) and (orientation: portrait),
        (max-height: 560px) {
            body {
                margin: 0 auto;
            }

            button,
            button.small-link,
            .nav-wrapper .secondary-button {
                font-family: Roboto-Regular, Helvetica;
                font-size: .933em;
                margin: 6px 0;
                transform: translatez(0);
            }

            .nav-wrapper {
                box-sizing: border-box;
                padding-bottom: 8px;
                width: 100%;
            }

            #details {
                box-sizing: border-box;
                height: auto;
                margin: 0;
                opacity: 1;
                transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
            }

            #details.hidden {
                display: block;
                height: 0;
                opacity: 0;
                overflow: hidden;
                padding-bottom: 0;
                transition: none;
            }

            h1 {
                font-size: 1.5em;
                margin-bottom: 8px;
            }

            .icon {
                margin-bottom: 5.69vh;
            }

            .interstitial-wrapper {
                box-sizing: border-box;
                margin: 7vh auto 12px;
                padding: 0 24px;
                position: relative;
            }

            .interstitial-wrapper p {
                font-size: .95em;
                line-height: 1.61em;
                margin-top: 8px;
            }

            #main-content {
                margin: 0;
                transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
            }

            .small-link {
                border: 0;
            }

            .suggested-left>#control-buttons {
                float: none;
                margin: 0;
            }
        }

        @media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
            .interstitial-wrapper {
                margin-top: 10vh;
            }
        }

        @media (min-height: 400px) and (orientation:portrait) {
            .interstitial-wrapper {
                margin-bottom: 145px;
            }
        }

        @media (min-height: 299px) {
            .nav-wrapper {
                padding-bottom: 16px;
            }
        }

        @media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and (orientation: portrait) {
            .interstitial-wrapper {
                margin-top: 7vh;
            }
        }

        @media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
            .interstitial-wrapper {
                margin-top: 10vh;
            }
        }

        /* Small mobile screens. No fixed nav. */

        @media (max-height: 400px) and (orientation: portrait),
        (max-height: 239px) and (orientation: landscape),
        (max-width: 419px) and (max-height: 399px) {
            .interstitial-wrapper {
                display: flex;
                flex-direction: column;
                margin-bottom: 0;
            }

            #details {
                flex: 1 1 auto;
                order: 0;
            }

            #main-content {
                flex: 1 1 auto;
                order: 0;
            }

            .nav-wrapper {
                flex: 0 1 auto;
                margin-top: 8px;
                order: 1;
                padding-left: 0;
                padding-right: 0;
                position: relative;
                width: 100%;
            }

            button,
            .nav-wrapper .secondary-button {
                padding: 16px 24px;
            }

            button.small-link {
                color: var(--google-blue-600);
            }
        }

        @media (max-width: 239px) and (orientation: portrait) {
            .nav-wrapper {
                padding-left: 0;
                padding-right: 0;
            }
        }
    </style>
    <style>
        /* Copyright 2013 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */
        /* Don't use the main frame div when the error is in a subframe. */

        html[subframe] #main-frame-error {
            display: none;
        }

        /* Don't use the subframe error div when the error is in a main frame. */

        html:not([subframe]) #sub-frame-error {
            display: none;
        }

        h1 {
            margin-top: 0;
            word-wrap: break-word;
        }

        h1 span {
            font-weight: 500;
        }

        a {
            text-decoration: none;
        }

        .icon {
            -webkit-user-select: none;
        }

        .icon-generic {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAFJJREFUeF7t0cENgDAMQ9FwYgxG6WjpaIzCCAxQxVggFuDiCvlLOeRdHR9yzjncHVoq3npu+wQUrUuJHylSTmBaespJyJQoObUeyxDQb3bEm5Au81c0pSCD8HYAAAAASUVORK5CYII=");
        }

        .error-code {
            display: block;
            font-size: .8em;
        }

        .hidden {
            display: none;
        }

        #suggestions-list a {
            color: var(--google-blue-600);
        }

        #suggestions-list p {
            margin-block-end: 0;
        }

        #suggestions-list ul {
            margin-top: 0;
        }

        .single-suggestion {
            list-style-type: none;
            padding-left: 0;
        }

        #error-information-button {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTExIDE4aDJ2LTJoLTJ2MnptMS0xNkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTAtMTRjLTIuMjEgMC00IDEuNzktNCA0aDJjMC0xLjEuOS0yIDItMnMyIC45IDIgMmMwIDItMyAxLjc1LTMgNWgyYzAtMi4yNSAzLTIuNSAzLTUgMC0yLjIxLTEuNzktNC00LTR6Ii8+PC9zdmc+);
            height: 24px;
            vertical-align: -.15em;
            width: 24px;
        }

        :not(.use-popup-container)#error-information-popup-container #error-information-popup-close {
            display: none;
        }

        #error-information-popup-close {
            margin-bottom: 0px;
            margin-inline-end: 35px;
            margin-top: 15px;
            text-align: end;
        }

        .link-button {
            color: rgb(66, 133, 244);
            display: inline-block;
            font-weight: bold;
            text-transform: uppercase;
        }

        #sub-frame-error-details {
            color: #8F8F8F;
            /* Not done on mobile for performance reasons. */
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        [jscontent=hostName] {
            overflow-wrap: break-word;
        }

        .secondary-button {
            background: #d9d9d9;
            color: #696969;
            margin-inline-end: 16px;
        }

        .suggestions {
            margin-top: 18px;
        }

        .suggestion-header {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .suggestion-body {
            color: #777;
        }

        /* Increase line height at higher resolutions. */
        /* Decrease padding at low sizes. */

        @media (max-width: 640px),
        (max-height: 640px) {
            h1 {
                margin: 0 0 15px;
            }

            .suggestions {
                margin-top: 10px;
            }

            .suggestion-header {
                margin-bottom: 0;
            }
        }

        #download-link,
        #download-link-clicked {
            margin-bottom: 30px;
            margin-top: 30px;
        }

        #download-link-clicked {
            color: #BBB;
        }

        #download-link:before,
        #download-link-clicked:before {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxLjJlbSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAyMGgxNHYtMkg1bTE0LTloLTRWM0g5djZINWw3IDcgNy03eiIgZmlsbD0iIzQyODVGNCIvPjwvc3ZnPg==);
            display: inline-block;
            margin-inline-end: 4px;
            vertical-align: -webkit-baseline-middle;
        }

        #download-link-clicked:before {
            width: 0px;
            opacity: 0;
        }

        #offline-content-list-visibility-card {
            border: 1px solid white;
            border-radius: 8px;
            display: flex;
            font-size: .8em;
            justify-content: space-between;
            line-height: 1;
        }

        #offline-content-list.list-hidden #offline-content-list-visibility-card {
            border-color: rgb(218, 220, 224);
        }

        #offline-content-list-visibility-card>div {
            padding: 1em;
        }

        #offline-content-list-title {
            color: var(--google-gray-700);
        }

        #offline-content-list-show-text,
        #offline-content-list-hide-text {
            color: rgb(66, 133, 244);
        }

        /* Hides the "hide" text div when the offline content list is collapsed/hidden
 * and, alternatively, hides the "show" text div when the offline content list
 * is expanded/shown.
 */

        #offline-content-list.list-hidden #offline-content-list-hide-text {
            display: none;
        }

        /* Controls the animation of the offline content list when it is expanded/shown.
 */

        #offline-content-suggestions {
            /* Max-height has to be set for the height animation to work. The chosen value
   * is a little greater than the maximum height the list will have, when all
   * suggestions have images, so that it is never clamped. This makes so that
   * when the actual height is smaller then the animation is not as smooth.
   */
            max-height: 27em;
            transition: max-height 0.2s ease-in, visibility 0s 0.2s, opacity 0.2s 0.2s linear;
        }

        /* Controls the animation of the offline content list when it is
 * collapsed/hidden.
 */

        #offline-content-list.list-hidden #offline-content-suggestions {
            max-height: 0;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s linear, visibility 0s 0.2s, max-height 0.2s 0.2s ease-out;
        }

        #offline-content-list {
            margin-inline-start: -5%;
            width: 110%;
        }

        /* The selectors below adjust the "overflow" of the suggestion cards contents
 * based on the same screen size based strategy used for the main frame, which
 * is applied by the `interstitial-wrapper` class. */

        @media (max-width: 420px) {
            #offline-content-list {
                margin-inline-start: -2.5%;
                width: 105%;
            }
        }

        @media (max-width: 420px) and (orientation: portrait),
        (max-height: 560px) {
            #offline-content-list {
                margin-inline-start: -12px;
                width: calc(100% + 24px);
            }
        }

        /* Controls the animation (and a bit more) of the launch-downloads-home action
 * button when the offline content list is expanded/shown.
 */

        #offline-content-list-action {
            text-align: center;
            transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;
        }

        /* Controls the animation of the launch-downloads-home action button when the
 * offline content list is collapsed/hidden.
 */

        #offline-content-list.list-hidden #offline-content-list-action {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s linear, visibility 0s 0.2s;
        }

        #cancel-save-page-button {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48Y2xpcFBhdGggaWQ9Im1hc2siPjxwYXRoIGQ9Ik0xMiAyQzYuNSAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwIDEwLTQuNSAxMC0xMFMxNy41IDIgMTIgMnptNSAxNkg3di0yaDEwdjJ6bS02LjctNEw3IDEwLjdsMS40LTEuNCAxLjkgMS45IDUuMy01LjNMMTcgNy4zIDEwLjMgMTR6IiBmaWxsPSIjOUFBMEE2Ii8+PC9jbGlwUGF0aD48cGF0aCBjbGlwLXBhdGg9InVybCgjbWFzaykiIGZpbGw9IiM5QUEwQTYiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjbWFzaykiIGZpbGw9IiMxQTczRTgiIHN0eWxlPSJhbmltYXRpb246b2ZmbGluZUFuaW1hdGlvbiA0cyBpbmZpbml0ZSIgZD0iTTAgMGgyNHYyNEgweiIvPjxzdHlsZT5Aa2V5ZnJhbWVzIG9mZmxpbmVBbmltYXRpb257MCUsMzUle2hlaWdodDowfTYwJXtoZWlnaHQ6MTAwJX05MCV7ZmlsbC1vcGFjaXR5OjF9dG97ZmlsbC1vcGFjaXR5OjB9fTwvc3R5bGU+PC9zdmc+);
            background-position: right 27px center;
            background-repeat: no-repeat;
            border: 1px solid var(--google-gray-300);
            border-radius: 5px;
            color: var(--google-gray-700);
            margin-bottom: 26px;
            padding-bottom: 16px;
            padding-inline-end: 88px;
            padding-inline-start: 16px;
            padding-top: 16px;
            text-align: start;
        }

        #save-page-for-later-button {
            display: flex;
            justify-content: start;
        }

        #save-page-for-later-button a:before {
            content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxLjJlbSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAyMGgxNHYtMkg1bTE0LTloLTRWM0g5djZINWw3IDcgNy03eiIgZmlsbD0iIzQyODVGNCIvPjwvc3ZnPg==);
            display: inline-block;
            margin-inline-end: 4px;
            vertical-align: -webkit-baseline-middle;
        }

        .hidden#save-page-for-later-button {
            display: none;
        }

        /* Don't allow overflow when in a subframe. */

        #sub-frame-error {
            -webkit-align-items: center;
            background-color: #DDD;
            display: -webkit-flex;
            -webkit-flex-flow: column;
            height: 100%;
            -webkit-justify-content: center;
            left: 0;
            position: absolute;
            text-align: center;
            top: 0;
            transition: background-color .2s ease-in-out;
            width: 100%;
        }

        #sub-frame-error:hover {
            background-color: #EEE;
        }

        #sub-frame-error .icon-generic {
            margin: 0 0 16px;
        }

        #sub-frame-error-details {
            margin: 0 10px;
            text-align: center;
            visibility: hidden;
        }

        /* Show details only when hovering. */

        #sub-frame-error:hover #sub-frame-error-details {
            visibility: visible;
        }

        /* If the iframe is too small, always hide the error code. */
        /* TODO(mmenke): See if overflow: no-display works better, once supported. */

        @media (max-width: 200px),
        (max-height: 95px) {
            #sub-frame-error-details {
                display: none;
            }
        }

        /* Adjust icon for small embedded frames in apps. */

        @media (max-height: 100px) {
            #sub-frame-error .icon-generic {
                height: auto;
                margin: 0;
                padding-top: 0;
                width: 25px;
            }
        }

        /* details-button is special; it's a <button> element that looks like a link. */

        #details-button {
            box-shadow: none;
            min-width: 0;
        }

        /* Styles for platform dependent separation of controls and details button. */

        .suggested-left>#control-buttons {
            float: left;
        }

        .suggested-left>#details-button {
            float: right;
        }

        .suggested-left .secondary-button {
            margin-inline-end: 0px;
            margin-inline-start: 16px;
        }

        /* download-button shows both icon and text. */

        #download-button {
            padding-bottom: 4px;
            padding-top: 4px;
            position: relative;
        }

        #download-button:before {
            background: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAO0lEQVQ4y2NgGArgPxIY1YChsOE/LtBAmpYG0mxpIOSDBpKUo2lpIDZxNJCkHKqlYZAla3RAHQ1DFgAARRroHyLNTwwAAAAASUVORK5CYII=) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAZElEQVRYw+3Ruw3AMAwDUY3OzZUmRRD4E9iim9wNwAdbEURHyk4AAAAATiCVK8lLyPsKeT9K3lsownnunfkPxO78hKiYHxBV8x2icr5BVM+/CMf8g3DN34Rzns6ViwHUAUQ/6wIAd5Km7l6c8AAAAABJRU5ErkJggg==) 2x) no-repeat;
            content: '';
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-inline-end: 4px;
            margin-inline-start: -4px;
            vertical-align: middle;
        }

        #download-button:disabled {
            background: rgb(180, 206, 249);
            color: rgb(255, 255, 255);
        }

        /*
TODO(https://crbug.com/852872): UI for offline suggested content is incomplete.
*/
        /* Alternate dino page button styles */

        #buttons::after {
            clear: both;
            content: '';
            display: block;
            width: 100%;
        }

        /* Offline page */
        /* iOS WKWebView inverts the background color set at the HTML level
whereas Blink does not. */

        #offline-resources {
            display: none;
        }

        @media (max-width: 420px) {
            #download-button {
                padding-bottom: 12px;
                padding-top: 12px;
            }

            .suggested-left>#control-buttons {
                float: none;
            }
        }

        @media (max-height: 350px) {
            h1 {
                margin: 0 0 15px;
            }

            .interstitial-wrapper {
                margin-top: 5%;
            }

            .nav-wrapper {
                margin-top: 30px;
            }
        }

        @media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
            .interstitial-wrapper {
                margin-bottom: 100px;
            }
        }

        @media (max-width: 240px) {
            button {
                padding-left: 12px;
                padding-right: 12px;
            }

            .interstitial-wrapper {
                overflow: inherit;
                padding: 0 8px;
            }
        }

        @media (max-width: 120px) {
            button {
                width: auto;
            }
        }

        @media (prefers-color-scheme: dark) {
            .icon {
                filter: invert(1);
            }

            #suggestions-list a {
                color: var(--link-color);
            }

            #error-information-button {
                filter: invert(0.6);
            }
        }
    </style>
</head>

<body id="t" style="font-family: &#39;Segoe UI&#39;, Tahoma, sans-serif; font-size: 75%" jstcache="0" class="neterror">
    <div id="main-frame-error" class="interstitial-wrapper" jstcache="0">
        <div id="main-content" jstcache="0">
            <div class="icon icon-generic" jseval="updateIconClass(this.classList, iconClass)" alt="" jstcache="1"></div>
            <div id="main-message" jstcache="0">
                <h1 jstcache="0">
                    <span jsselect="heading" jsvalues=".innerHTML:msg" jstcache="10">This site can’t be reached</span>
                    <a id="error-information-button" class="hidden" onclick="toggleErrorInformationPopup();" jstcache="0"></a>
                </h1>
                <p jsselect="summary" jsvalues=".innerHTML:msg" jstcache="2"><strong jscontent="hostName" jstcache="23">18.20.231.36</strong>’s server IP address could not be found.</p>
                <!--The suggestion list and error code are normally presented inline,
          in which case error-information-popup-* divs have no effect. When
          error-information-popup-container has the use-popup-container class, this
          information is provided in a popup instead.-->
                <div id="error-information-popup-container" jstcache="0">
                    <div id="error-information-popup" jstcache="0">
                        <div id="error-information-popup-box" jstcache="0">
                            <div id="error-information-popup-content" jstcache="0">
                                <div id="suggestions-list" style="" jsdisplay="(suggestionsSummaryList &amp;&amp; suggestionsSummaryList.length)" jstcache="17">
                                    <p jsvalues=".innerHTML:suggestionsSummaryListHeader" jstcache="19"></p>
                                    <ul jsvalues=".className:suggestionsSummaryList.length == 1 ? &#39;single-suggestion&#39; : &#39;&#39;" jstcache="20" class="single-suggestion">
                                        <li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary" jstcache="22" jsinstance="*0"><a href="javascript:diagnoseErrors()" id="diagnose-link" jstcache="0">Try running Connectivity Diagnostics</a>.</li>
                                    </ul>
                                </div>
                                <div class="error-code" jscontent="errorCode" jstcache="18">DNS_PROBE_FINISHED_NXDOMAIN</div>
                                <p id="error-information-popup-close" jstcache="0">
                                    <a class="link-button" jscontent="closeDescriptionPopup" onclick="toggleErrorInformationPopup();" jstcache="21">null</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="diagnose-frame" class="hidden" jstcache="0"></div>
                <div id="download-links-wrapper" class="hidden" jstcache="0">
                    <div id="download-link-wrapper" jstcache="0">
                        <a id="download-link" class="link-button" onclick="downloadButtonClick()" jsselect="downloadButton" jscontent="msg" jsvalues=".disabledText:disabledMsg" jstcache="7" style="display: none;">
                        </a>
                    </div>
                    <div id="download-link-clicked-wrapper" class="hidden" jstcache="0">
                        <div id="download-link-clicked" class="link-button" jsselect="downloadButton" jscontent="disabledMsg" jstcache="12" style="display: none;">
                        </div>
                    </div>
                </div>
                <div id="save-page-for-later-button" class="hidden" jstcache="0">
                    <a class="link-button" onclick="savePageLaterClick()" jsselect="savePageLater" jscontent="savePageMsg" jstcache="11" style="display: none;">
                    </a>
                </div>
                <div id="cancel-save-page-button" class="hidden" onclick="cancelSavePageClick()" jsselect="savePageLater" jsvalues=".innerHTML:cancelMsg" jstcache="5" style="display: none;">
                </div>
                <div id="offline-content-list" class="list-hidden" hidden="" jstcache="0">
                    <div id="offline-content-list-visibility-card" onclick="toggleOfflineContentListVisibility(true)" jstcache="0">
                        <div id="offline-content-list-title" jsselect="offlineContentList" jscontent="title" jstcache="13" style="display: none;">
                        </div>
                        <div jstcache="0">
                            <div id="offline-content-list-show-text" jsselect="offlineContentList" jscontent="showText" jstcache="15" style="display: none;">
                            </div>
                            <div id="offline-content-list-hide-text" jsselect="offlineContentList" jscontent="hideText" jstcache="16" style="display: none;">
                            </div>
                        </div>
                    </div>
                    <div id="offline-content-suggestions" jstcache="0"></div>
                    <div id="offline-content-list-action" jstcache="0">
                        <a class="link-button" onclick="launchDownloadsPage()" jsselect="offlineContentList" jscontent="actionText" jstcache="14" style="display: none;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="buttons" class="nav-wrapper suggested-left" jstcache="0">
            <div id="control-buttons" jstcache="0">
                <button id="reload-button" class="blue-button text-button" onclick="location.reload();" jsselect="reloadButton" jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId" jscontent="msg" jstcache="6">Reload</button>
                <button id="download-button" class="blue-button text-button" onclick="downloadButtonClick()" jsselect="downloadButton" jscontent="msg" jsvalues=".disabledText:disabledMsg" jstcache="7" style="display: none;">
                </button>
            </div>
            <button id="details-button" class="secondary-button text-button small-link" onclick="detailsButtonClick(); toggleHelpBox()" jscontent="details" jsdisplay="(suggestionsDetails &amp;&amp; suggestionsDetails.length &gt; 0) || diagnose" jsvalues=".detailsText:details; .hideDetailsText:hideDetails;" jstcache="3" style="display: none;"></button>
        </div>
        <div id="details" class="hidden" jstcache="0">
            <div class="suggestions" jsselect="suggestionsDetails" jstcache="4" jsinstance="*0" style="display: none;">
                <div class="suggestion-header" jsvalues=".innerHTML:header" jstcache="8"></div>
                <div class="suggestion-body" jsvalues=".innerHTML:body" jstcache="9"></div>
            </div>
        </div>
    </div>
    <div id="sub-frame-error" jstcache="0">
        <!-- Show details when hovering over the icon, in case the details are
         hidden because they're too large. -->
        <div class="icon icon-generic" jseval="updateIconClass(this.classList, iconClass)" jstcache="1"></div>
        <div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg" jstcache="2"><strong jscontent="hostName" jstcache="23">cordbloodblog.org</strong>’s server IP address could not be found.</div>
    </div>

    <div id="offline-resources" jstcache="0">
        <img id="offline-resources-1x" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNEAAABEBAMAAABdZr6uAAAAGFBMVEUAAAD////a2tr/9/e6urpTU1P39/e5ubkY2m5RAAAAAXRSTlMAQObYZgAACRdJREFUeAHt3cFuo0gQBuDCvWiu1IG7lSdAQtxzmAcAWbVvkJzntq+/cfPDFHGB29gdcNK/Zj3tKgIJ+bYBJ2boeyUlJSUl40kKCsnh5UiBYWuTGHARUkDquhrHrq7pagOxGy8vL8ujqwvQkFciyqU9P7ZEItKSfMQXc/80l34kJIJFcqFcsNxt4TExqxFSyiQdXQl2czA1tjZZ9J6kCyggTuREQxqR6moDsRv4/NdKo8NUGkB5VAJB8OXhQVquRj9NWiafUlzd+uHo9zoFhYWNTXYD8iKoACqjFSfQtdRwNSHTBsgcL0bnQNEQ1UBHj7Q0grReENE4k1H/xDe8r3YcCVHe3g5NEI5bRQR54JSGdNe2fsC3I560AoVsrTTUqwVphjmtCLE6n9fxz2+iiRvBSFppMYmRz3nUhktL0m46VWMRtqQVgJUR8adC1kFaWfjCOmkOI0savBhTGkYBkxph9Psjr8pN/vfA2epj5nDapmrrpMkYjl8lGRNNmr11JQ27ep20rAOsssiEp4XSF/xJWl9YAFVXq6Qd6T5pGBtzmkcGadRfJkCa7/rBvdL4Bj18S5UtacwPlfbvnDRCmT8fNI5AhyWZrDCz+lglrZTCb5vPw25a0NJ8YV6ak1OANFejgUDXJbQjRirgZVE7YPSqpMHS4EswGhegXNX2Jq3sLGmoPkzaW6C0w9F8sSOCtOKKNBSrJWkOH1pFl9bCDaa0QVoupjQ0tjt6bijtPeToiR2ucpw9RqJ8Sa2AtGwqTRVwOH2AtKbCCA2DF0aQhpEKdC1cHrz2J/stpLWkLkAvpOnG1tI2OHq+f+QN2hakYT7TeTneKi3rIK0slLRpgX2B75bm5GRKO9Ld0tSk9oeI8un5l4i0HhSJ4AHEziM8w+tpP+iK4IPYOR9/vV2RRpc5YjlLGguk6ebUEaShcF1aXf0F5SpIQ2Mbab/oz69AaUna+zCnvS9JOxxfDGuHL5XW0wGo5lRBGhqKoC3N1RfQjhhBGkY6kKZe1tXUMKdFyLeUhiPnv4vSXojsbwQWY3uf4PE+aXgxw8sariQdnk8aIDgjrZHq8dJ+/Uc3JEl7uyptLvdLk2vSnFcyyqpsabphSjsPHi7tv4/8oclxUKTFKBf/H8Z6mbG0uCTGxl71ub+6gTSZl8Y+16AJ97ko4697pGlQtXJT2Y1FaXBivrBxxGgaOpgveeADMacFSkvSZDtp2ZNLw7Wn9pPLOJT8rxmaBrrM8cUy7+/WDwiZY1R1lLMI0uytL0DT4cUypImazajU0jDEo6yV5qqvkuavPS0bkCZJ2rbSugywCsoGWCiM0sr10hrPqv6qOS26tHfx0jJWhxkiFo5SJSFEK/MtK1hDcas0e+vz4T4yBM/JLI/SCkjrxt+R46EwSCv6+hpptf8j8hXSxp97SvAZl20yN5bEmncqLeMhhSGNx2worWPqpXExSOvGwiiNGLPeemkVVfGlLemiNr8+pxlXB6TKLUEacznuTCI4iVAl9aUoaX2bFS81LDvmQtljU9oYSDO3jtx7EMXJGSayggjDYigoaYRZb0lavSTtRO7kpdXxpL2+vv5QaeOHScespSGCMOufRvm8xZeGCQxbHqV1PBQAb5TGxbI0H1vaqa4IL7JJPGn//O5xzJ1xBUojkdaURiJnaYLvHQIncaokYrzCwaIWBq/JsFP2xJQm70iPwNx6ODXgnC2rszMlTRdKLa2gBWluWRpRfGn+d26JRMTWFfB6GgJoekkQlp1KK2UcG9JkDKRNE19axj0s4nIqDQWQkxBp1ARIoyb+nBZf2uR7x3ASqUoioqDRKO0iXamkXYSXpVlbD5eGsF3n4PdG+dJ1aW5ZmvNzGhaKeJ4WOzGlJWlFiDRqFqU1H43q/CBRrz2/Rhqiz+cjVUkmoT4wYaZjk1qANBXmYGn2R7AqB0vrWBWGS8waoGrpHyoih4YpzcmpkVpOrq6j/YQ9SXt2aTSRhgDTMCZCEw0QvJBG5AabEaTRBtLIhyNVLWnL1Loi4/JuaRQWnn2ZlxGi+6VVTo0hTTegzpAGm1tIS9LsuyXsThqcgEqjxl4anrhGc7SlVRHeRxA9BgmOXCVTmk0N0miBGs/dAYbXSQtYdp00aAIVB2d1BWmqgRaGWhoa30Max66SCW29NPOuVsbWt5cGRHWtJzGkUQ0QxFBLQyPCu/A2oMbRq2RKM6l1cGNTYx+aC6+UxhRJGtX13zfb4UqSENUAQQyVtKjvYU/S9iYt/l2tFMHm+0gzru3jV0lDs6jh5VoMCqLP1JjHQdhX9XhpxFwMB+6wwop7DblaSwu7AwyGGhpILdwBZhtpSVq8rLqrFa4Wot3VahNqzHGriAHNa5q+tNGnQFdTY2Ik9KsKDQvTzqThdC3anfp+sDTmsuM5aR2z8I+S5pt1Ffnuo/GjjlwswhxaZRzYdJWD1gBqdCmtxC8IeWkGG2w1WI7aenCY9ifNNVKpRoQ7Kv8saRlDWpGVWLe51TA6OJ3D1gV5TmmkpUW6S3z86DNhFg6v4sA2pRa4hl7ZpTR/f4uC5qQxETM4r/uq4ie+tAj5YdIoG6VN1o1AWh9K0p5XGuMhrGqEmUPXQEKWNGYuu4LmpAHYTdKYkrTZJGmILS08Iknabo+ewqFVO4FrIBE8GAfQInDVK7+q7aU5DapabFjSKtp7krScto1zHlTjrVT972qfLhrk0DCkofHMGd8ZHlo1s7SGgOAMbWHV4RExtr5xmkbGqcudBDOUbvQE0XBamm7ET5L23HGu/khFAHXOpwYIwldFbnwXnmqEJCXFaStNpRuK4Lnh8M9+NpWrdSMoKSmaigtoqDGePFtSUlJSUlJSRIT2nFykNcbPlpS8Pf/ZcYSoNcZPlpRciEhov8E/eKvHz5gUweM+A1h4FFV5SOTrktJiZhuCZ/uJMtHe54NS9jaFCKWkxE4/d6TkcuvybeBJ5/pgI/ETvrm0r4I3JxK2IkKEwiJzK0Da0CPMRdqgb7C0K2jk2CIWCNxXaV/tMnnYEisiKz6DDfdS2lf53OckcuP/S0HTd4stYPE4EVqTNu2r4AQeOmXVYaLd3TkjPu/2wfu2Tfvqhn313ZOSkpLyPyeERVeEgd/fAAAAAElFTkSuQmCC" jstcache="0">
        <img id="offline-resources-2x" src="data:image/png;base64,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" jstcache="0">
        <template id="audio-resources" jstcache="0"></template>
    </div>


</body>

</html>