/**
 * -------------------------------------------------------------------------
 *
 * Styles for some elements of the web page's user interface.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / Static Pages only
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    .topmenu {
        background: #263238;
        display: block;
        margin: 0 auto 1rem;
        padding: 0;
        text-align: center;
    }

        .topmenu .tools,
        .footnote .tools {
            display: inline-block;
        }

            .topmenu .tools summary,
            .footnote .tools summary {
                background: transparent;
                color: #48f;
                outline: none;
                cursor: pointer;
                margin: 0;
                padding: 0.5rem 1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-decoration: none;
                vertical-align: bottom;
            }

            .topmenu .tools summary:hover,
            .topmenu .tools summary:active,
            .topmenu .tools summary:focus {
                background: #e91e63;
                color: #eceff1;
            }

            .topmenu .tools summary + div,
            .footnote .tools summary + div {
                background: #263238;
                border: #eceff1 1px solid;
                display: block;
                max-width: 33vw;
                position: absolute;
                top: 2.5rem;
                left: 0;
                z-index: 1;
            }
            .footnote .tools summary + div {
                top: auto;
                bottom: 2.5rem;
            }

                .topmenu .tools summary + div a,
                .footnote .tools summary + div a {
                    display: block;
                    margin: 0;
                    padding: 0.5rem 1rem;
                }

        .topmenu a {
            background: transparent;
            color: #eceff1 !important;
            outline: none;
            cursor: pointer;
            display: inline-block;
            margin: 0;
            padding: 0.5rem 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none !important;
            vertical-align: bottom !important;
        }

        .topmenu a.tool {
            color: #48f !important;
        }

        .topmenu a:hover,
        .topmenu a:active,
        .topmenu a:focus,
        .topmenu a.tool:hover,
        .topmenu a.tool:active,
        .topmenu a.tool:focus {
            background: #e91e63 !important;
            color: #eceff1 !important;
        }
