/* || CSS Reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* || Pages */
#preload {
    display:block;
}

#main-menu {
    display: none;
}

/* || Typography */

.ocr-a {
    font-family: "OCR-A";
}

.fx300 {
    font-family: "FX300 Angular";
}

/* || Full doc */

body {
    background-color: #efefef;
    text-rendering:geometricPrecision;
}

a {
    text-decoration: none;
}

a:visited {
    color: inherit;
}

/* This defines the virtual viewframe. Applied on the body element since we
   never want content to fall outside of this frame. */
.virtual-screen {
    /* Define size to be strictly the size of the PSP. */
    width: 480px;
    max-width: 480px;
    height: 272px;
    max-height: 272px;

    /* Use soft bg color to frame content. */
    background-color: #ffffff;

    /* Center virtual screen. */
    margin: auto;
}

/* This section defines our margin options. Most content will use the
   menu-frame class. */
.menu-frame {
    position: relative;
    margin-left: 21px;
    /* margin-right: 25; */
    background-color: #ffffff;
}

.preload-frame {
    position: relative;
    margin-left: 15px;
    margin-right: 30px;
    min-height: 100%;
}

/* || Header */

/* Preload */

.preload-top-bar {
    content: " ";
    min-width: 480px;
    border-bottom: 1px #127AA1 solid;
    position: absolute;
    top: 10px;
    left: -15px;
}

/* Main */

.header-image {
    position: absolute;
    top: 0px;
    left: 1px;
    display: block;
    background-image: url("../img/header-bg.png");
    width: 300px;
    height: 17px;
}

h1.header-text {
    position: absolute;
    top: 21px;
    font-size: 11px;
    letter-spacing: 1px;
    color: #EE569E;
    display: block;
}

h1.header-text::before {
    content: " ";
    min-width: 448px;
    border-bottom: 2px #5FDBF6 solid;
    position: absolute;
    top: 17px;
    left: -1px;
}

/* || Body */

/* Basic text elements */
div.body-frame {
    position: absolute;
    top: 51px;
}

p.preload-text {
    position: absolute;
    color: #0AB1EF;
    top: 99px;
    font-size: 9px;
    line-height: 16px;
    letter-spacing: 1px;
    font-weight:normal;
}

ul {
    color: #17AED1;
    list-style-type: none;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 17px;
}

ul li {
    opacity: 0.5;
}

ul li:hover {
    opacity: 1.0;
    list-style-image: url(../img/link-list-arrow.png);
}

ul li a {
    display: block;
}

/* || Footer */

/* Preload */

.preload-bottom-bar {
    content: " ";
    min-width: 480px;
    border-bottom: 1px #127AA1 solid;
    position: absolute;
    top: 240px;
    left: -15px;
}

a.preload-confirm {
    position: absolute;
    color: #127AA1;
    top: 245px;
    font-size: 9px;
    /* line-height: 8px; */
    letter-spacing: 1px;
    font-weight:normal;
}

/* Main */

.footer-header-arrow {
    position: absolute;
    top: 215px;
}

div.footer-top-border {
    background: repeating-linear-gradient(to right, #5FDBF6 0px, #5FDBF6 6px, transparent 6px, transparent 8px);
    width: 440px;
    height: 1px;
    position: absolute;
    top: 218px;
    left: 7px;
}

div.footer-top-border::before {
    content: " ";
    width: 1px;
    height: 1px;
    background-color: #5FDBF6;
    position: absolute;
    display: block;
    top: -2px;
}

.footer-text {
    position: absolute;
    top: 220px;
    max-width: 443px;
    font-size: 10px;
    font-family: "OCR-A", serif;
    letter-spacing: 2px;
    line-height: 10px;
    font-optical-sizing: auto;
    text-transform: uppercase;
    color: #FAB929;
}

.footer-bottom-border {
    position: absolute;
    display: block;
    top: 251px;
    background-image: url("../img/footer-bottom.png");
    width: 444px;
    height: 21px;
}