/*
//
//
//
*/


/* Color Bar -- Page Dividers */
.color_bar
{
    display: block;
    position: relative;
    float: left;
    clear: both;
}
    #color_bar-top, #color_bar-bottom
    {
        width: 100%;
        height: 25px;
        background: linear-gradient(to right, var(--sss-gold), var(--sss-red), var(--sss-blue));
    }
        #color_bar-top
        {
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            margin-bottom: 25px;
        }
        #color_bar-bottom
        {
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            clear: both;
        }
    #color_bar, #color_bar-middle
    {
        width: 100%;
        height: 10px;
        margin: 0 auto 0 auto;
        border-radius: 10px;
        background: var(--sss-medium-background);
    }
        #color_bar
        {
            margin-top: 25px;
        }
        #color_bar-middle
        {
            margin-top: 25px;
            margin-bottom: 25px;
        }


.fill_bar
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: pink;

}


/* Location */
#location
{
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}


/* Weather Page Container */

#weather
{
    width: 800px;
    height: auto;
    display: block;
    position: relative;
    clear: both;
    border-radius: 5px;
}

    #time, #now, #forecast, #map
    {
        width: 100%;
        display: block;
        position: relative;
        float: left;
    }

    /* Time */

    #time
    {
        color: white;
    }
        #current_date, #current_time, #daylight
        {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #current_date
            {
                color: black;
                font-size: 1.25em;
                height: 50px;
                font-weight: bold;
            }
            #current_time
            {
                color: black;
                height: auto;
                font-size: 3em;
            }
            #daylight
            {
                height: 25px;
                display: block;
                justify-content: flex-end;
                margin-top: 25px;
                text-align: center;
            }
                #earthphase_counter
                {
                    display: block;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 100;
                    margin-top: 2px;
                }
                #earthphase_remaining
                {
                    height: 25px;
                    display: block;
                    position: relative;
                    float: right;
                    border-radius: 3px;
                    /*background: var(--sss-blue);*/
                }


    /* Current Conditions */

    #now
    {
        height: 200px;
    }
        #summary, #temperature, #air
        {
            width: calc(100%/3);
            height: 200px;
            display: inline-block;
            position: relative;
            float: left;
        }
            #summary div
            {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }
                #summary i
                {
                    width: 100%;
                    display: block;
                    font-size: 5em;
                    color: white;
                    text-align: center;
                }
                #weather_summary
                {
                    font-size: 1em;
                    margin-right: 25px;
                }

            #temperature
            {
                border-radius: 3px;
            }
                #temperature > div
                {
                    width: 100%;
                    height: calc(100%/3);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                    #temperature span
                    {
                        font-size: 1em;
                    }
                    #current_temperature
                    {
                        font-size: 3em !important;
                    }
                    .color_box
                    {
                        color: white;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                        .color_box span
                        {
                            text-align: center;
                        }

            #air > div
            {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
                #air div div
                {
                    width: 125px;
                    height: auto;
                    display: block;
                    position: relative;
                    clear: both;
                }
                    #air span
                    {
                        height: 25px;
                        display: block;
                        margin-bottom: 5px;
                    }
                        #air b
                        {
                            float: left;
                        }
                        #air p
                        {
                            float: right;
                            font-size: .8em;
                        }
            #hourly
            {
                width: 100%;
                height: 200px;
                display: block;
                position: relative;
                float: left;
            }


        /* Forecast */

        #forecast
        {
            height: 225px;
            display: block;
            position: relative;
            float: left;
        }
            .forecast_column
            {
                width: calc(100%/7);
                height: 100%;
                display: inline-block;
                position: relative;
                float: left;
            }
                .forecast_column div
                {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .forecast_date
                {
                    height: 20%;
                    display: block;
                    text-align: center;
                }
                .forecast_icon
                {
                    height: 35%;
                    font-size: 3em;
                }
                .forecast_note
                {
                    height: 15%;
                    display: block;
                    text-align: center;
                }
                .forecast_temp
                {
                    height: 15%;
                }
                    .high
                    {
                        font-size: 2em;
                    }


        /* Radar Map */

        #map
        {
            height: 500px;
            border: none;
            display: block;
            position: relative;
            float: left;
            margin-bottom: -5px;
        }


        /* "Powered By" Statement */

        #powered_by
        {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        /* Interactive Elements */

        #now:hover, .forecast_column:hover
        {
            cursor: pointer;
        }