﻿.navbar-brand:hover, a:active, a:link, a:visited, div#by, div#by a {
    text-decoration: none
}

    div#by, div#by a, ul.sentences li {
        margin-bottom: 10px
    }

body {
    background-color: #FFF !important
}

shadow {
    width: 100%;
    max-width: 100vw;
    box-shadow: 0 .125rem .375rem rgba(0,0,0,.15);
    z-index: 90
}

a {
    color: #1967d2
}

    .footer li a:hover, .nav-link a:hover, a:hover, ul.nav.nav-tabs a:hover {
        text-decoration: underline
    }

.card, .navbar-toggler, .table-borderless td, .table-borderless th {
    border: 0
}

    .navbar-toggler:hover {
        background-color: rgba(0,0,0,.1);
        border-radius: 24px
    }

    .navbar-toggler:focus {
        box-shadow: none
    }

.nav-bottom-border, .navbar-bottom-border {
    border-bottom: 1px solid #e5e6e7
}

.navbar-brand {
    font-size: 1.4em;
    padding: 0
}

    .navbar-brand sup {
        font-size: .4em;
        top: -1em
    }

.letter i:hover, .nav-link.small a:visited, .navbar-light .navbar-nav .nav-link, a.nav-link.small {
    color: #000
}

.btn-primary {
    background-color: #0f396b;
    border-color: #0f396b
}

@media all and (min-width:768px) {
    .main {
        order: 1
    }

    .aside-right {
        order: 2
    }

    .footer {
        order: 3
    }
}

@media all and (min-width:992px) {
    .aside-left {
        order: 1
    }

    .main {
        order: 2
    }

    .aside-right {
        order: 3
    }

    .footer {
        order: 4
    }
}

.aside-left {
    flex: 0 0 auto
}

    .aside-left .nav > li > a {
        display: inline-block;
        padding: .25rem .75rem;
        font-size: 90%
    }

.aside-right {
    padding: 0
}

.letter, .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: #fff
}

#letter-categories div {
    background-color: #fff;
    border-color: #ddd;
    border-bottom: 1px solid #e6e6e6;
    padding: .6rem !important;
    width: 9.3em
}

.letter {
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    padding: 1em
}

    .letter p:last-child {
        margin-bottom: 0
    }

    .letter i {
        position: absolute;
        top: 0;
        right: 2px;
        color: #b0bec5;
        cursor: copy;
        font-size: 24px
    }

    .letter:hover {
        box-shadow: rgba(0,0,0,.2) 0 10px 16px 0,rgba(0,0,0,.19) 0 6px 20px 0
    }

    .letter .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #28a745;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 2px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        right: 110%
    }

        .letter .tooltiptext::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #ca8fdb
        }

@media (max-width:767px) {
    button.navbar-toggle {
        float: left;
        margin-left: 20px;
        background-color: transparent;
        border: 1px solid transparent
    }

    .icon-bar {
        background-color: red
    }

    ul.nav.navbar-nav {
        clear: left
    }

    a:link {
        text-decoration: none
    }
}

.adMiddle, .center, .footer table {
    margin: 0 auto
}

div#by, div#by a {
    color: #989898;
    font-size: 14px;
    line-height: 17px
}

    div#by img {
        margin: 5px 5px 5px 0
    }

.table-hover > tbody > tr > td:hover {
    background-color: #f8f9fa
}

.footer {
    background-color: #0f396b;
    color: #fff
}

    .footer ul {
        padding-left: 20px
    }

    .footer li {
        padding-left: 0
    }

        .footer li a {
            color: #fffef6
        }

    .footer table {
        width: 60%
    }

    .footer .table-condensed th {
        font-size: 16px;
        border: 0
    }

    .footer .table-condensed td {
        border: 0;
        vertical-align: top
    }

.adLeft, .adRight {
    display: none
}

ul.sentences {
    margin: 0
}

ul.phrases {
    list-style-type: circle
}

.adHoriz {
    width: 100%;
    height: auto;
    clear: both
}

@media (min-width:576px) {
    .adHoriz {
        min-height: 60px
    }
}

@media (min-width:400px) {
    .adHoriz {
        max-height: 100px
    }
}

@media (min-width:768) {
    .adRight {
        text-align: center;
        display: inline-block;
        width: 160px;
        min-height: 600px
    }

    .aside-right {
        -webkit-flex: 0 0 160px;
        flex: 0 0 160px;
        min-height: 600px
    }
}

@media (min-width:992px) {
    .adLeft {
        display: block;
        width: 160px;
        min-height: 600px;
        text-align: center
    }

    .aside-left {
        -webkit-flex: 0 0 160px;
        flex: 0 0 160px
    }

    .adHoriz {
        min-height: 90px
    }
}

@media (min-width:1200px) {
    .adRight {
        width: 336px
    }
}

.adBottom, .adMiddle {
    display: inline-block
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

@media (min-width:1400px) {
    .adLeft {
        display: block;
        width: 300px;
        min-height: 250px;
        text-align: center
    }
}

@media (min-width:768px) {
    .adBottom {
        display: none
    }
}

a.list-group-item.list-group-item-action:hover {
    cursor: pointer;
    color: #1967d2;
    text-decoration: underline
}

.adTop {
    width: 320px;
    height: 100px
}

@media(min-width:500px) {
    .adTop {
        width: 468px;
        height: 60px
    }
}

@media(min-width:800px) {
    .adTop {
        width: 728px;
        height: 90px
    }
}

.leaderboard {
    min-height: calc(5.625rem + 1.5rem);
    background-color: #F2F2FD;
    display: block;
    overflow: hidden;
    padding: 0.75rem 0;
    text-align: center;
    max-width: none;
    transform: translate(0,0);
    transition: max-height .1s linear,min-height .1s linear,transform .2s ease-out;
}

.wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.leaderboard .wrapper:before, .leaderboard .wrapper:after {
    display: block;
    visibility: visible;
    content: "Advertisement";
    height: 20px;
    margin: 0 -2.5em;
    transform: rotate(270deg);
    transform-origin: center center 0;
    color: rgba(0,0,0,.65);
    font-family: Arial,sans-serif;
    font-size: .75rem;
    line-height: 1rem;
    text-underline-offset: 0.125rem;
    text-align: center;
}
