/* Styles for the names index pages.

   developer:   marionm
   requires:    /nks/css/shared.en.css
   ========================================================================== */

/* ==========================================================================
   shared styles
   ========================================================================== */

#names-nav {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

#names-nav a {
    color: #535353;
    margin-right: .5rem;
    position: relative;
}

#names-nav a:focus,
#names-nav a:hover { color: #ff002f; }

html.a-e #names-nav .a-e,
html.f-j #names-nav .f-j,
html.k-o #names-nav .k-o,
html.p-s #names-nav .p-s,
html.t-z #names-nav .t-z {
    background: url('/https/www.wolframscience.com/nks/img/icon-down.png') no-repeat center bottom;
    background-size: 6px 5px;
    color: #c94e1a;
    padding-bottom: .25rem;
}

#names-content {
    column-count: 3;
    column-gap: 2rem;
}

#names-content a { color: #c94e1a; }

#names-content a:active,
#names-content a:hover { color: #000; }

#names-content p {
    padding: .25rem 0;
    word-wrap: break-word;
}

#names-content .term {
    line-height: 1.5;
    position: relative;
}

#names-content .term.highlight {
    background: #ffe0a3;
    color: #000;
    padding: .125rem;
}

#names-content .indent {
    font-size: .875rem;
    display: inline-block;
    padding-left: 1rem;
}

.tooltip_bubble { display: none; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #names-content { column-count: 2; }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
    #names-content {
        column-count: 1;
        column-gap: 0;
    }
}

/* printer styles
   ========================================================================== */

@media print {}