/* The FAQ (/faq, /en/faq, sub/faq.php): the look it had as glig-widget-faq in css/glig/widgets.css, now that the page is
   drawn by the server and js/faq/taaltaal-faq.js only adds the editing for an admin. The editor opens in a <dialog> */

taaltaal-faq
{
    display: block;
}

taaltaal-faq.formal
{
    overflow: hidden;
}

    taaltaal-faq .navigation
    {
        margin-bottom: 10px;
    }

    taaltaal-faq.formal .navigation a
    {
        background: linear-gradient(#fff, #eee);
        border-radius: 5px;
    }

    taaltaal-faq.formal .navigation a.selected
    {
        background: linear-gradient(#336699, #223366);
        border: 1px solid navy;
        color: white;
    }

    taaltaal-faq.formal .navigation a:hover
    {
        background: linear-gradient(#336699, #223366);
        border: 1px solid navy;
        color: white;
    }

    taaltaal-faq.formal .navigation
    {
        max-width: 460px;
    }

    taaltaal-faq .navigation a
    {
        display: inline-block;
        background: #f0f0f0;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 4px 8px;
        margin-right: 5px;
        margin-bottom: 8px;
        font-weight: bold;
        white-space: nowrap;
        font-size: 1.1em;
        box-shadow: 0 0px 3px rgba(50,50,60,0.25);
        text-decoration: none;
    }

    taaltaal-faq .navigation a:hover
    {
        background: gold;
        color: #333;
        color: brown;
    }

    taaltaal-faq .navigation a.selected
    {
        border: 1px solid #993;
        color: brown;
        background: linear-gradient(#ee3399, #cd1269);
        color: white;
        border-color: purple;
    }

    taaltaal-faq .index
    {
        margin-bottom: 20px;
        /*
        padding-bottom: 10px;
        border-bottom: 1px dashed #99a;
        */
    }

    taaltaal-faq .index ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    taaltaal-faq .index ul li
    {
        position: relative;
        padding-left: 15px;
        margin-bottom: 3px;
    }

    taaltaal-faq .index ul li:hover .up,
    taaltaal-faq .index ul li:hover .down
    {
        visibility: visible;
        opacity: 1;
    }

    taaltaal-faq .index ul li .up,
    taaltaal-faq .index ul li .down
    {
        visibility: hidden;
        opacity: 0;
        background: #99c;
        background: linear-gradient(#ee3399, #cd1269);
        color: white;
        border-radius: 5px;
        padding: 1px 5px 3px 5px;
        cursor: pointer;
        margin-right: 3px;
        font-size: 0.8em;
        transition: opacity 0.5s;
    }

    taaltaal-faq .index ul li .up:hover,
    taaltaal-faq .index ul li .down:hover
    {
        background: gold;
    }

    taaltaal-faq .index ul li:before
    {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5em;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: url("/images/icons/bstone2.gif") no-repeat;
        background-size: contain;
    }

    taaltaal-faq.formal .item
    {
        /*
        background: linear-gradient(#e9f3f9, #fff 120%);
        border-radius: 10px;
        border: 1px solid #c4e1f6;
        */
    }

    taaltaal-faq .item
    {
        margin-top: 15px;
        /* border-top: 1px dashed #ddd; */
        /* padding-top: 10px; */
        padding: 3px 10px 0px 5px;
        /* background: linear-gradient(#e5f1f4, #f3f9fc, #fff); */
        /*
        background: linear-gradient(#e5f1f4, #fff 120%);
        border-radius: 15px;
        border: 1px solid #c4e1f6;
        */
    }

    taaltaal-faq .item h2
    {
        margin-bottom: 2px;
        font-size: 1.1em;
        /* border-bottom: 1px dashed #4583a0; */
    }

    taaltaal-faq .item p
    {
        margin-top: 5px;
    }

    taaltaal-faq .item h2 .q
    {
        display: inline-block;
        transform: translateX(-4px) translateY(-3px) rotate(-10deg) scale(1.2);
        padding: 5px;
        margin-right: 1px;
        background: linear-gradient(#ee3399, #cd1269);
        color: white;
        border-radius: 8px;
        font-size: 0.9em;
    }

    taaltaal-faq .item p
    {
        margin-bottom: 2px;
    }

    taaltaal-faq a.back-to-top
    {
        font-size: 0.8em;
        margin-left: 6px;
    }

    taaltaal-faq h1
    {
        font-size: 1.9em;
        color: #2b3f93;
        margin-top: 0px;
        margin-bottom: 10px;
        font-weight: normal;
    }

    taaltaal-faq.formal h1
    {
        padding: 8px 8px 8px 12px;
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        background: repeating-linear-gradient(#f3f6f9, #d0d3d6 4px);
        text-shadow: 1px 1px 3px #abc;
        font-size: 1.5em;
    }

    taaltaal-faq .edit
    {
        padding: 2px 10px;
        border-radius: 50px;
        border: 1px solid #999;
        background: linear-gradient(#fff, #eee);
        display: inline-block;
        cursor: pointer;
        color: navy;
        font-weight: bold;
    }

    taaltaal-faq .item .edit
    {
        visibility: hidden;
        font-size: 0.9em;
    }

    taaltaal-faq .item:hover .edit
    {
        visibility: visible;
    }

    taaltaal-faq .edit:hover
    {
        background: gold;
    }

taaltaal-faq-editor
{
    display: block;
    min-width: 500px;
    min-height: 100px;
    width: min-content;
}

    taaltaal-faq-editor h1
    {
        padding: 8px 10px 5px 8px;
        margin-bottom: 0;
        color: white;
        font-size: 1.3em;
        text-shadow: 1px 1px 3px #333;
        border-radius: 8px 8px 0 0;
        /* background: linear-gradient(#88aadd, #4477aa 40%, #225566 150%); */
        background: linear-gradient(#88aadd 40%, #3366cc 120%);
        text-align: center;
    }

    taaltaal-faq-editor .body
    {
        background: #f3f3f3;
        padding: 8px 15px;
    }

    taaltaal-faq-editor img
    {
        transform: rotate(-10deg) scale(1.5);
        box-shadow: 0 0 3px rgba(0,0,0,0.5);
        margin-top: 6px;
        margin-right: 8px;
        font-weight: bold;
        border: 1px solid rgba(255,255,255,0.7);
    }

    taaltaal-faq-editor .body .dutch
    {
        margin-bottom: 10px;
    }

    taaltaal-faq-editor p
    {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    taaltaal-faq-editor textarea
    {
        font-weight: bold;
        border-radius: 8px;
        padding: 5px 8px;
        width: 100%;
        box-sizing: border-box;
        height: min-contents;
        height: 2em;
        font-weight: normal;
    }

    taaltaal-faq-editor textarea.answer
    {
        height: 8.8em;
    }

    taaltaal-faq-editor input[type=submit]
    {
        margin-left: auto;
        margin-top: 5px;
        display: block;
    }

    taaltaal-faq-editor select
    {
        background: linear-gradient(#fff, #ddd);
    }

/* the editor in its dialog: the dialog itself is only the frame, as glig's popup was */
dialog.taaltaal-faq-dialog { padding: 0; border: 0; border-radius: 8px; box-shadow: 0 6px 30px rgba(0, 0, 0, .35); background: transparent; }
dialog.taaltaal-faq-dialog::backdrop { background: rgba(20, 30, 50, .35); }
taaltaal-faq-editor .close { float: right; margin: -2px -4px 0 0; border: 0; background: none; color: white; font-size: 1.3em; cursor: pointer; }
taaltaal-faq .missing { color: red; }