.navbar-brand > img {
    max-height:100%;
}
.navbar-brand {
    height:auto;
}
.navbar-nav > li {
    margin-top:10px;
    height:auto;
}

button {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.btn {
    padding:5px;
}
label {
    font-weight:normal;
    border:thin solid #eee;
    border-radius:0.5em;
    padding:0 0.25em;
}
label + label { margin-left:0.5em; }

select { min-height:2em;/* For Chrome. */ }

svg {
    /* From http://stackoverflow.com/a/4407335/291462 */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;
}

.controls {
    display:inline-block;
    vertical-align:top;
    background:#fff;
    margin:3px;
}
table.controls {
    display:inline-table;
    border:thin solid #aaa;
}
table.controls th, table.controls td {
    padding:0.5em;
}
th { font-weight:normal; }
td { font-weight:bold; }
.selected {
    outline:3px solid red;
    position:relative;/* Put outline in front of other buttons. */
    font-weight:bold;
}
.number   { text-align:right;  }
td.number { text-align:center; }
input[size] { width:5em }
.separator, table.controls .separator { padding:0; }
.separator > hr, hr.separator { margin:0; width:90%; margin:auto; }

.colour-button {
    margin:0 0.25em 0.25em 0;
    padding:10px 2px;
    border-radius:10px;
    border:1px solid #ccc;
    min-width:8em;
}
.colour-button > span {
    background:rgba(255,255,255,0.8);
    color:#000;
    padding:0 0.25em;
    border-radius:5px;
}

.tabs {
    text-align:right;
    display:block;
    margin:-20px 3px 10px 3px;
}
.controls > button, .controls > select, .controls > .separator {
    float:right;
    clear:right;
    width:100%;
}
.controls > .separator {
    margin:8px 0;
}

#display {
    width:100%;
    padding:8px;
    text-align:center;
}

.media { text-align:end; margin:3px; }
.media-item {
    display:block;
    margin:8px auto 8px auto;
    max-width:100%;
    text-align:center;
}

@media print {
    .tabs { margin-top:0; float:right; }
    svg { max-width:100%; max-height:100%; }
    /* .noprint and .onlyprint are available in Bootstrap as
       .hidden-print and .visible-print-(block|inline|inline-block) */
    .noprint { display:none !important; }
    .onlyprint { visibility:visible !important; }
    button {
        width:auto !important;
        overflow:visible;
        white-space:initial;
        border:none;
    }
    input, select, option {
        width:auto;
        display:inline;
        padding:0; margin:0;
        border:none;
        -moz-appearance:textfield;
        -webkit-appearance:none;
    }
    .selected { outline:none; }
}
.onlyprint { visibility:hidden; }