#main { font-family: Arial; position: relative; text-align: center; }

.wallets { position: relative; width: 600px; margin: auto; }

.right { text-align: right; }

.keyarea {
    font-family: Courier New;
    height: 100px;
    text-align: left;
    position: relative;
    padding: 5px;
}

.keyarea .public { float: left; }
.keyarea .pubaddress { float: left; }
.keyarea .privwif { float: left; }

.keyarea .label { text-decoration: underline; }

.keyarea .output { display: block; }

#brainarea {
    display: block;
    border: 2px solid var(--color-primary);
    min-height: 100px;
}

/* Local color modifier for the global .btn-device base. Hover handled by global .btn-device:hover. */
.btn-device-generate { background: var(--color-primary) }

#brainarea .keyarea { display: none; }

@media screen {
    .menu {
        text-align: left;
        margin: auto;
        width: 596px;
        position: relative;
        left: -2px;
    }

    .menu .tab {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: inline-block;
        background-color: #6C8C6C;
        border: 2px solid var(--color-primary);
        padding: 5px;
        margin: 0 2px 0 0;
        position: relative;
        top: 2px;
        z-index: 100;
        cursor: pointer;
    }

    .menu .tab:hover { color: #FFF; }

    .menu .tab.selected {
        background-color: #FFF;
        border-bottom: 2px solid #FFF;
        cursor: default;
    }

    .menu .tab.selected:hover { color: #000; }

    .commands {
        width: 596px;
        margin: auto;
        padding: 10px 0;
        border-top: 2px solid var(--color-primary);
        border-left: 2px solid var(--color-primary);
        border-right: 2px solid var(--color-primary);
    }

    .commands span { padding: 0 10px; }

    #braincommands .row.notes {
        font-size: 80%;
        padding: 6px 0 0 0;
    }

    #brainpassphrase { width: 220px; }
}