body {
    margin: 0px;
    font-family: Calibri;
}

#site-navbar {
    margin-bottom: 5px;

    & .banner {
        background: url("../img/navbar-banner-left.png") left top no-repeat, url("../img/navbar-banner-right.png") left top repeat-x;
        height: 55px;
        display: flex;
        vertical-align: middle;
        align-items: center;
        padding-left: 20px;
    }

    & .navbar {
        background: url("../img/navbar-navbar-background.png") left top repeat-x;
        height: 27px;

        display: flex;
        align-content: center;
        justify-content: center;
        
        & a {
            color: white;
            font-weight: bold;
            font-size: 14px;
            padding-top: 2px;

            text-shadow: #333333 0px 2px 1px;

            padding-left: 10px;
            padding-right: 10px;

            min-width: 70px;

            text-align: center;

            background: url("../img/navbar-button-left.png") left top no-repeat, url("../img/navbar-button-middle.png") left top repeat-x;

            &:hover {
                cursor: pointer;
                background: url("../img/navbar-button-left-hover.png") left top no-repeat, url("../img/navbar-button-middle-hover.png") left top repeat-x;
                color: black;
                text-shadow: white 0px 1px 1px;
            }

            &::before {
                width: 11px;
                height: 11px;
                margin-right: 1px;
                display: inline-block;
                content: "";
                background: url("../img/text-white-arrow.png");
            }
        }
    }

    & .junk {
        background: url("../img/navbar-junk-background.png") left top repeat-x;
        height: 28px;

        display: flex;

        & .button {
            background: url("../img/navbar-junk-signup-button.png") left top no-repeat;
            width: 213px;
            height: 28px;
        }

        & .search {
            background: url("../img/navbar-junk-search.png") left top no-repeat;
            width: 687px;
            height: 28px;
        }
    }
}

#site-main {
    width: 1200px;

    margin-left: auto;
    margin-right: auto;

    display: flex;


    & article {
        background: url("../img/tab-container-top-rounded.png") left top no-repeat, url("../img/tab-container-bottom.png") left bottom no-repeat, url("../img/tab-container-middle.png") left top repeat-y;
        padding: 0px 17px 10px 17px;
        
        margin-bottom: 12px;

        line-height: 16px;

        & p {
            margin-left: 20px;
            margin-right: 14px;
        }

        & h1 {
            height: 62px;
            line-height: 62px;
            padding-left: 25px;
            vertical-align: middle;
            background: url("../img/article-title-left.png") left top no-repeat, url("../img/article-title-right.png") right top no-repeat, url("../img/article-title-middle.png") left top repeat-x;
            
            color: white;
            text-shadow: black 0px 1px 2px;

            margin-bottom: 0px;
            margin-top: 7px;
        }

        & blockquote {
            background-color: #000099;
            padding: 10px 5px 10px 10px;
            border: rgb(10, 6, 31) 1px solid;
            border-radius: 10px;

            color: white;
            text-shadow: rgb(6, 3, 35) 0px 1px 2px;

            box-shadow: #7392f8 0px 2px 4px inset, #000000 0px -2px 4px inset;

            font-weight: bold;
        }

        & .footer {
            background: url("../img/tab-footer.png") no-repeat;
            height: 33px;
        }

        & #tabs {
            display: flex;
            flex-direction: row;
            padding-left: 17px;

            a {
                width: 168px;
                height: 36px;
                border: none;

                font-size: 16px;
                font-weight: bold;

                line-height: 36px;

                display: flex;

                font-weight: bold;
                
                & span{
                    margin-right: 20px;
                    width: 100%;
                    text-align: center;
                    display: inline-block;
                }
            }
            .inactive {
                background: url("../img/tab-button-inactive.png") no-repeat;
                color: white;
                &:hover {
                    cursor: pointer;
                }
                text-shadow: #424242 0px 1px 0px;
            }
            .selected {
                background: url("../img/tab-button-active.png") no-repeat;
                text-shadow: gray 0px 1px 0px;
            }
        }
    }

    & #tab-container {
        background: url("../img/tab-container-top.png") left top no-repeat, url("../img/tab-container-bottom.png") left bottom no-repeat, url("../img/tab-container-middle.png") left top repeat-y;
        margin-bottom: 12px;

        & #tabs {
            display: flex;
            flex-direction: row;
            padding-left: 17px;

            button {
                width: 168px;
                height: 36px;
                border: none;

                font-size: 15px;
                font-weight: bold;
                padding-right: 17px;
                padding-left: 0px;
            }
            .inactive {
                background: url("../img/tab-button-inactive.png") no-repeat;
                color: white;
                &:hover {
                    cursor: pointer;
                }
                text-shadow: #424242 0px 1px 0px;
            }
            .selected {
                background: url("../img/tab-button-active.png") no-repeat;
                text-shadow: gray 0px 1px 0px;
            }
            .explore {
                background: url("../img/tab-button-explore.png") no-repeat;
            }
        }

        & #tab-content {
            padding-left: 17px;
            padding-right: 17px;
            padding-bottom: 10px;
            
            .hidden {
                display: none;
            }

            .footer {
                background: url("../img/tab-footer.png") no-repeat;
                height: 33px;
            }
            
            & a {
                text-decoration:underline;
                color: #000099;
                font-weight: bold;

                &:hover {
                    color: black;
                    cursor: pointer;
                }
            }

            table {
                width: 758px;
                border-collapse: collapse;
                table-layout: fixed;

                & col {
                    width: 11%;
                }

                & td {
                    padding: 12px;
                    box-sizing: border-box;
                    vertical-align: top;

                    & img {
                        height: auto;
                        width: 100%;
                    }

                    & p {
                        margin: 0px;
                        line-height: 16px;
                    }
                }
            }  
        }
    }
}

.left-side {
    width: 14%;
    margin-right: 1%;
    padding-top: 16px;

    & .panel {

        background-color: #cccccc;
        background: url("../img/panel-top.png") left top no-repeat, url("../img/panel-bottom.png") left bottom no-repeat, url("../img/panel-middle.png") left top repeat-y;
        background-size: 100% 24px;


        padding-bottom: 18px;        
        margin-bottom: 7px;

        display: flex;
        flex-direction: column;

        line-height: 18px;

        & ul {
            margin: 0px;
            list-style-type: "- ";
            padding-left: 20px;
            line-height: 16px;
        }

        & br {
            margin-top: 12px;
        }

        & p, a {
            color: black;
            font-weight: bold;
            margin: 0px;
            padding-left: 10px;
        }

        & a:hover {
            color: #000099;
            cursor: pointer;
        }

        & label, input {
            margin-left: 12px;
            margin-right: 10px;
        }

        & input {
            border: 1px solid #666666;
        }

        & p:first-child {
            background-color: navy;
            background: url("../img/panel-title.png") left top no-repeat;
            background-size: 100% 24px;
            color: white;

            margin: 12px 0px 0px 0px;
            padding-left: 16px;
            font-size: 14px;
            padding-bottom: 5px;
        }
    }
}

.middle {

    width: 66%;
    margin-right: 2%;
    padding-top: 8px;

    & .new-digital-store {
        height: 90px;

        background-color: rgb(10, 3, 53);
        background: url("../img/new-toystore.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 5px;
    }

    & .insider-news {
        background: url("../img/insider-news-top.png") left top no-repeat, url("../img/insider-news-bottom.png") left bottom no-repeat, url("../img/insider-news-middle.png") left top repeat-y;
        
        padding: 33px 20px 20px 20px;
        display: flex;

        margin-bottom: 10px;

        img {
            width: 330px;
            height: auto;

            margin-top: auto;
            margin-bottom: auto;
        }

        & .logo {
            align-items: center;
            display: grid;
        }

        & .content {
            color: white;
            text-shadow: #333333 0px 1px 2px;

            & a {
                text-decoration: underline;
                font-weight: bold;
            }
            & p {
                margin: 0px;
            }
            & a:hover {
                color: #cccccc;
                cursor: pointer;
            }
        }
    }

    & .news {
        background-color: #e5e5e5;
        border: 1px solid #979798;
        border-radius: 13px;
        min-height: 100px;

        display: flex;

        & .left {
            padding: 10px 10px 5px 10px;
            width: 65%;

            display: flex;
            flex-direction: column;
            align-items: center;

            & p {
                margin: 0px;
            }

            & section {
                background-color: white;
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 10px;

                & p:first-child {
                    background: url("../img/news-section-title-leftt.png") left top no-repeat, url("../img/news-section-title-right.png") right top no-repeat, url("../img/news-section-title-middle.png") left top repeat-x;
                    color: white;
                    padding-left: 20px;
                    font-size: 14px;
                    padding-bottom: 5px;
                    font-weight: bold;
                    line-height: 18px;
                }

                & p {
                    line-height: 13px;
                }

                & a {
                    font-weight: bold;
                    text-decoration: underline;
                    color: #000099;
                }

                & a:hover {
                    cursor: pointer;
                    color: black;
                }
            }

            & .highlighted {
                background-color: #e5e5e5;
                border: 1px solid #979798;
                border-top: 1px solid lightgray;
                border-bottom: 1px solid lightgray;

                margin-bottom: 5px;
                padding: 5px;
                border-radius: 5px;

                box-shadow: white 0px 6px 3px inset, white 0px -6px 3px inset, #bbbbbb 0px 1px 3px;

                display: flex;
                gap: 10px;

                line-height: 15px;
            }
        }

        & .right {
            width: 35%;
            padding: 20px 10px 5px 0px;

            & section {
                display: grid;


                & p {
                    margin: 0px;
                }

                & p:first-child {
                    background: url("../img/news-section-title-leftt.png") left top no-repeat, url("../img/news-section-title-right.png") right top no-repeat, url("../img/news-section-title-middle.png") left top repeat-x;
                    color: white;
                    padding-left: 20px;
                    font-size: 14px;
                    padding-bottom: 5px;
                    font-weight: bold;
                    line-height: 18px;
                }

                & img {
                    align-self: center;
                    width: 100%;
                    border-radius: 15px;
                    box-shadow:#bbbbbb 0px 2px 3px;
                }
            }
            
            & .daily-poll {
                display: block;
                padding: 7px;
                padding-left: 8px;
                padding-bottom: 13px;

                border: 1px solid black;
                border-radius: 15px;

                color: white;

                & .centered {
                    margin-right: auto;
                    margin-left: auto;
                    width: 120px;
                    height: 60px;

                    background: url("../img/poll-vote-button.png") no-repeat;
                    border: none;

                    font-weight: bold;
                    font-size: 20px;
                    text-shadow: white 0px 2px 2px;

                    &:hover {
                        cursor: pointer;
                    }
                }

                & p {
                    font-weight: bold;
                }

                & br {
                    margin-top: 4px;
                }  

                & label {
                    margin-left: 3px;
                }

                & p:first-child::before {
                    content: "";
                    display: inline-block;
                    width: 11px;
                    height: 11px;
                    margin-right: 5px;
                    background: url("../img/poll-title-arrow.png") no-repeat;
                }
                
                & p:first-child {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    background: none;
                    color: #fefc92;
                    text-shadow: black 0px 1px 1px;
                    font-weight: 1000;
                    font-size: 20px;
                    margin-bottom: 10px;
                    padding-left: 0px;
                }

                background-color: #00009a;
                box-shadow: #0101cb 0px 6px 4px 2px inset, #0101cb 0px -6px 4px 2px inset, #585858 1px 2px 4px 0px;
            }

            & .grayparagraph {
                line-height: 18px;
                & p {
                    color:#333333;
                    font-weight: bold;
                }

                & a {
                    text-decoration: underline;
                    color: #000099;
                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            & .centered {
                display:flex;
                flex-direction: column;
            }
        }
    }

    & .share-page, .insider-brag, .copyright {
        text-align: center;
        line-height: 16px;
        & a {
            text-decoration: underline;
            color: #000099;
            &:hover {
                cursor: pointer;
            }
        }
    }
    & .share-page {
        background-color: #efefef;
        padding: 8px;
    }
}

.locked::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 1px;
    display: inline-block;
    background: url("../img/insider-lock.png") no-repeat;
}

.right-side {
    width: 17%;

    & .new-africa-tour {
        height: 800px;

        background-color: rgb(10, 3, 53);
        background: url("../img/africa-tour.png") no-repeat;
        background-size: 100% 100%;
    }
}
article {
    & blockquote {
        background-color: wheat;
        padding: 5px 5px 5px 10px;
        border: burlywood 1px solid;
        border-radius: 3px;
    }
}