style.css

* {
    margin: 0;
    font-family: 'Zurich';
}

:root {
    font-size: 16px;
    --font-colour: white;
    --main-colour: rgb(0, 37, 201);
    --sub-colour: rgb(0, 26, 143);
    --listnum-colour: rgb(126, 126, 255);
    --main-colour-hover: #FCDA25;
    --sub-colour-hover: #fec200;
    --listnum-colour-hover: rgb(0, 0, 179);
    --font-colour-hover: rgb(0, 0, 179);
    --background-image-blank: url('imgtv_guide.jpg');
    --background-image: url("img/tv_guide.jpg");
}

/* Backgrounds for pages */
.bground1 {
    background-image: url("img/tv_guide.jpg");
}

.bground2 {
    background-image: url('img/blank.jpg');
}

.boxoffice {
    background-image: url('img/box_office.jpg');
}

.services {
    background-image: url('img/services.jpg');
}

.interactive {
    background-image: url('img/interactive.jpg')
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #111;
}

a:link {
    text-decoration: none;
}

main {
    background: var(--background-image);
    background-position: top;
    background-size: 100%;
    width: 800px;
    height: 600px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.menulisting[id] {
    display: none;
}

.menulisting#main {
    display: flex;
}

.menulisting#fyi {
    width: 87%;
}

.menulisting#azent {
    width: 87%;
}
.menulisting#boffice {
    width: 87%;
}

.menulisting#systemtest {
    width: 87%;
}

.menulisting {
    width: 65%;
    height: 410px;
    margin-top: auto;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    position: relative;
}

button {
    background: transparent;
    border: none !important;
    font-size: 20;
    position: absolute;
    top: -13%;
    left: 30%;
    text-align: right;
}

    .menulisting li {
        width: 100%;
        height: 31.5px;
        margin: 2px 0px;
        background: var(--main-colour);
        list-style-type: none;
        color: var(--font-colour);
        display: inline-flex;
        align-items: center;
        font-size: 1.6rem;
    }

        .menulisting li:nth-of-type(1) {
            margin-top: 0px;
        }
    .menulisting a {
        color: var(--font-colour);
    }

li .num {
    background: var(--sub-colour);
    width: 80px;
    height: 100%;
    margin: 0px 10px 0px 5px;
    color: var(--listnum-colour);
    text-align: center;
}

li.nonum {
    padding-left: 5px;
}

li .tele {
    background: var(--sub-colour);
    width: 300px;
    height: 100%;
    margin: 0px 0px 0px auto;
    position: page;
    color: var(--listnum-colour);
    text-align: right;
    align-items: end;
    justify-content: right;
    align-self: end;
}

.menulisting .telelisting {
    width: 150%;
    height: 31.5px;
    margin: 2px 0px;
    background: var(--main-colour);
    list-style-type: none;
    color: var(--font-colour);
    display: inline-flex;
    align-items: center;
    font-size: 1.6rem;
}

.menulisting li:hover {
    background: var(--main-colour-hover);
    color: var(--font-colour-hover);
}

    .menulisting li:hover .num {
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
    }

    .menulisting li:hover .tele {
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
    }

    .menulisting li:hover a {
        color: var(--font-colour-hover);
    }

.menulisting li:focus {
    background: var(--main-colour-hover);
    color: var(--font-colour-hover);
}

    .menulisting li:focus .num {
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
    }

    .menulisting li:focus .tele {
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
    }

    .menulisting li:focus a {
        color: var(--font-colour-hover);
    }

.links {
    position: absolute;
    bottom: -4%;
    width: 100%;
    font-size: 1rem;
    text-align: right;
    color: var(--main-colour);
    display: inline;
    overflow: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}

.links a:hover {
    color: var(--font-colour-hover)
}

.back {
    position: absolute;
    bottom: -9%;
    width: 100%;
    font-size: 1rem;
    text-align: left;
    color: var(--font-colour-hover);
    display: inline;
    overflow: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}

.back a {
    color: var(--font-colour-hover);
}

.guidelisting {
    width: 140%;
    /* height: 410px; */
    margin-top: 1px;
    margin-bottom: 0px;
    display: inline-flex;
    flex-direction: row;
    user-select: none;
    position: relative;
    align-items: stretch;
    align-content: safe center;
}

    .guidelisting li {
        font-family: 'ZurichTV';
        margin: 4px;
        margin-top: 0px !important;
        align-self: auto;
        align-items: stretch;
        align-content: safe center;
    }

.detailslisting {
    width: 150%;
    height: 410px;
    margin-top: auto;
    margin-bottom: 5px;
    display: inline-flex;
    flex-direction: row;
    user-select: none;
    position: center;
    align-items: stretch;
    align-content: safe center;
}

    .detailslisting li {
        width: 130%;
        margin: 10px;
        margin-top: 0px !important;
        align-self: auto;
        align-items: stretch;
        align-content: safe center;
        text-align: center;
    }

        .detailslisting li:hover {
            background: var( --main-colour);
            color: var(--font-colour);
        }

.time {
    position: absolute;
    top: -23%;
    left: 5%;
    width: 100%;
    font-size: 1.5rem;
    text-align: left;
    color: white;
}

.titles {
    position: absolute;
    top: -15%;
    left: 5%;
    width: 100%;
    font-size: 2rem;
    text-align: left;
    color: white;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* FYI Box */

.fyi {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .fyi header {
        width: 100%;
        height: 31.5px;
        background: var(--main-colour-hover);
        list-style-type: none;
        color: var(--font-colour-hover);
        text-align: center;
        font-size: 1.6rem;
    }

    .fyi main {
        min-height: 150px;
        height: auto;
        background: var(--main-colour);
        color: var(--font-colour);
        font-size: 1.6rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/*Search and Scan Bar*/
.sas {
    width: 150%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

    .sas header {
        width: 100%;
        height: 31.5px;
        background-color: white;
        list-style-type: none;
        color: var(--font-colour-hover);
        text-align: center;
        font-size: 1.6rem;
    }

    .sas footer {
        width: 100%;
        height: 31.5px;
        background-color: white;
        list-style-type: none;
        color: var(--font-colour-hover);
        text-align: center;
        font-size: 1.6rem;
    }

    .sas main {
        min-height: 150px;
        height: auto;
        background: var(--main-colour);
        color: var(--font-colour);
        font-size: 1.6rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Large Text Box */

.ltb {
    width: 150%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .ltb header {
        width: 100%;
        height: 31.5px;
        background: var(--main-colour-hover);
        list-style-type: none;
        color: var(--font-colour-hover);
        text-align: left;
        font-size: 1.6rem;
    }

    .ltb main {
        min-height: 150px;
        height: auto;
        background: var(--main-colour);
        color: var(--font-colour);
        font-size: 1.6rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


#planner li {
    font-family: 'ZurichTV';
    width: 150%;
}

#planner li .prgm {
    font-family: inherit;
    width: 270px;
}    

#planner li .rating {
    background: #5887FF;
    width: 40px;
    height: 100%;
    text-align: center;
    color: lightgrey;
    font-family: inherit;
}

#planner li .ch {
    width: 180px;
    background: #5887FF;
    color: lightgrey;
    font-family: inherit;
    padding: 0px 5px;
    height: 100%;
}

#planner li:hover .rating {
    background: var(--sub-colour-hover);
    width: 40px;
    height: 100%;
    text-align: center;
    color: var(--listnum-colour-hover);
    font-family: inherit;
}

#planner li .status {
    width: 180px;
    text-align: center;
    font-family: inherit;
    height: 100%;
}    

#planner li:hover .ch {
    width: 180px;
    background: var(--sub-colour-hover);
    color: var(--listnum-colour-hover);
    font-family: inherit;
    padding: 0px 5px;
    height: 100%;
}

#pantiesoffmateinnit li {
    font-family: 'ZurichTV';
    width: 150%;
}

#pantiesoffmateinnit li .prgm {
    font-family: inherit;
    width: 270px;
}

#pantiesoffmateinnit li .rating {
    background: #5887FF;
    width: 40px;
    height: 100%;
    text-align: center;
    color: lightgrey;
    font-family: inherit;
}

#pantiesoffmateinnit li .ch {
    width: 180px;
    background: #5887FF;
    color: lightgrey;
    font-family: inherit;
    padding: 0px 5px;
    height: 100%;
}

#pantiesoffmateinnit li:hover .rating {
    background: var(--sub-colour-hover);
    width: 40px;
    height: 100%;
    text-align: center;
    color: var(--listnum-colour-hover);
    font-family: inherit;
}

#pantiesoffmateinnit li .status {
    width: 180px;
    text-align: center;
    font-family: inherit;
    height: 100%;
}

    #pantiesoffmateinnit li:hover .ch {
        width: 180px;
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
        font-family: inherit;
        padding: 0px 5px;
        height: 100%;
    }

#azprog li {
    font-family: 'ZurichTV';
    width: 150%;
}

    #azprog li .prgm {
        font-family: inherit;
        width: 270px;
    }

    #azprog li .rating {
        background: #5887FF;
        width: 40px;
        height: 100%;
        text-align: center;
        color: lightgrey;
        font-family: inherit;
    }

    #azprog li .ch {
        width: 180px;
        background: #5887FF;
        color: lightgrey;
        font-family: inherit;
        padding: 0px 5px;
        height: 100%;
    }

    #azprog li:hover .rating {
        background: var(--sub-colour-hover);
        width: 40px;
        height: 100%;
        text-align: center;
        color: var(--listnum-colour-hover);
        font-family: inherit;
    }

    #azprog li .status {
        width: 180px;
        text-align: center;
        font-family: inherit;
        height: 100%;
    }

    #azprog li:hover .ch {
        width: 180px;
        background: var(--sub-colour-hover);
        color: var(--listnum-colour-hover);
        font-family: inherit;
        padding: 0px 5px;
        height: 100%;
    }

.player {
    background: black;
    height: 600px;
    width: 800px;
    position: absolute;
}

#sastest {
    position: absolute; bottom: 0;
    height: auto;
}

#ps,#pl {
    font-family: 'ZurichTV';
}

/* Font Families */
@font-face {
    font-family: 'Zurich';
    src: url('Zurich Bold Extended.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ZurichTV';
    src: url('Zurich Bold Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica 65 Medium Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Helvetica 65 Medium Regular'), url('Helvetica65Medium_22443.woff') format('woff');
}