/*
    The initial/default theme is Midnight Blue, (.theme-midnight,) which should not
    have any styling here, since the default styling, without applying any specific
    theme styles, is Midnight Blue.

    The only entries here should be for anything that differs from the default theme.
*/

.theme-library
{
    #overlay
    {
        background: #111 url(/images/themes/peabody-library.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #overlay .glass
    {
        &::after
        {
          /*background: rgba(26, 24, 17, 0.5);  - lighter alternative with touch of cream */
            background: rgba(0, 0, 0, 0.5);
        }
        padding: 8px 15px 1px 10px;
    }

    .overlay-list-title
    {
        color: #fff;
        text-shadow: 2px 2px #000;
    }

    #listWelcome p,
    .overlay-list-note
    {
        color: #bbb;
        text-shadow: 2px 2px #000;
    }
    .overlay-list-note.glass
    {
        margin-top: 5px;
    }

    #overlay .triangle-in-circle,
    #listWelcome a,
    #listWelcome a:hover,
    #listWelcome a:visited
    {
        border-color:   #e2d99c;
        color:          #e2d99c;
        text-shadow: 1px 1px 20px #111;
    }

    .overlay-tile
    {
        opacity: 1;
        &:hover
        {
            border-color: #b28f65;
            -webkit-box-shadow: 3px 3px 10px #dedea2;
            -moz-box-shadow:    3px 3px 10px #dedea2;
            box-shadow:         3px 3px 10px #dedea2;
        }
    }

    #themePicker
    {
        background: #b28f65;
        color: #000;
        opacity: 0.6;
    }

    footer
    {
        background-color: #353023;
        border-color: #2a2519;
    }
}

.theme-linen
{
    #overlay
    {
        background: #d1bfa7 url(/images/themes/linen.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .overlay-list-title
    {
        color: #684b45;
        text-shadow: 1px 1px 1px #907975;
        border-bottom-color: #907975;
    }

    .overlay-list-note,
    .overlay-list-note.small
    {
        color: #543737;
    }

    #listWelcome
    {
        p
        {
            font-size: 16px;
            line-height: 20px;
            color: #270d0f;
        }
        a
        {
            margin-bottom:  0.5em;
            letter-spacing: 1px;
        }
    }

    #overlay .triangle-in-circle
    {
        position:           relative;
        top:                0.15em;
        margin:             0 0.15em 0 0.15em;
        box-shadow:         -1px 1px 1px #4f3831;
        background-color:   #e8cd9e;
        &:hover
        {
            background-color: #fce4ba;
        }
    }

    #overlay .triangle-in-circle,
    #listWelcome a,
    #listWelcome a:hover,
    #listWelcome a:visited
    {
        border-color:   #a52600;
        color:          #a52600;
        color:          #ca360a;
        text-shadow:    1px 1px 1px #93373a;
    }

    #themePicker
    {
        background: #d1bfa7;
        color:      #684b45;
        opacity:    0.8;
        select
        {
            background-color: #4f3135;
        }
    }
    
    footer
    {
        background-color: #2d1d20;
        border-color: #1f1617;
    }
}

.theme-parchment
{
    #overlay
    {
        background: #c7b283 url(/images/themes/parchment.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .overlay-list-title
    {
        color: #684b45;
        border-bottom-color: #684b45;
    }

    .overlay-list-note,
    .overlay-list-note.small
    {
        color: #543737;
    }

    #listWelcome
    {
        p
        {
            font-family:    'Arizonia', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, 'Trebuchet MS', sans-serif;
            font-size:      1.4em;
            line-height:    0.9em;
            margin-bottom:  0.5em;
            padding-top:    0.2em;
            color:          #270d0f;
            text-align:     left;
            &:first-letter
            {
                font-family:    'Edwardian Script ITC', 'Brush Script MT', 'Arizonia', cursive;
                font-size:      2em;
                font-weight:    bold;
                margin:         0 0.15em 0 -0.15em;
            }
            &:first-line
            {
                line-height:    100%;
            }
        }
        a
        {
            margin-bottom:  0.5em;
            letter-spacing: 1px;
        }
    }

    #overlay .triangle-in-circle
    {
        position:       relative;
        top:            0.15em;
        margin:         0 0.15em 0 0.15em;
        box-shadow:     -1px 1px 1px #4f3831;
        background-color: #cfb072;
        &:hover
        {
            background-color: ##efcb82;
        }
    }

    #overlay .triangle-in-circle,
    #listWelcome a,
    #listWelcome a:hover,
    #listWelcome a:visited
    {
        border-color:   #a52600;
        color:          #a52600;
        text-shadow:    1px 1px 1px #93373a;
    }

    #themePicker
    {
        background: #c7b283;
        color:      #684b45;
        opacity:    0.8;
        select
        {
            background-color: #4f3135;
        }
    }
    
    footer
    {
        background-color: #2d1d20;
        border-color: #1f1617;
    }
}

.theme-rosette
{
    #overlay
    {
        background: #120305 url(/images/themes/rosette-nebula.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .overlay-list-note
    {
        color: #ddd;
        text-shadow: 2px 2px #000;
    }
    .overlay-list-note.glass
    {
        margin-top: 5px;
        &::after
        {
            background: rgba(32, 12, 15, 0.8);
        }
        padding: 8px 15px 1px 10px;
        color: #bbb;
    }

    #overlay .triangle-in-circle,
    #listWelcome a,
    #listWelcome a:hover,
    #listWelcome a:visited
    {
        border-color:   #f80;
        color:          #f80;
        text-shadow: 1px 1px 20px #f90;
    }

    #themePicker
    {
        background: #3a1218;
        opacity: 0.8;
        select
        {
            background-color: #4f3135;
        }
    }

    footer
    {
        background-color: #200c0f;
        border-color: #170306;
    }
}
