body,button.flat span {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    max-height:100%;
    padding:0;
    margin:0;
    background:#fff;
}
body > div {
    top:-7ex;
    position:relative;
}

button.flat {
    margin: 0;
    font-size: 130%;
    background-color: #000;
    color:#fff;
    border: none;
    padding-bottom: 0;
    display: inline-flex;
    align-items: flex-start;
}
button.flat span {
    margin:-3px 0 0;
    font-weight:bold;
}
img {
    margin:2.25ex 0 0;
    float:left;
}

.age {
    width: 50%;
    max-width: 500px;
}

.age img {
    margin-top:-0.5em;
}

select {
    font-size:120%;
    z-index:100;
}

#modal {
    max-width:none;
    max-height:none;
    z-index:50;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.4;
    margin:0;
}

header {
    height: 3ex;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    position: fixed;
    top: 0;
}

@media not print {
    header div button.flat span::after{
        content:"⇩";
    }
}

button:not(.flat) { 
    height:3.5ex;
}

h1 {
    cursor: pointer;
}

header div {
    text-align: center;
    background: #000;
    color: #fff;
    vertical-align: bottom;
    max-width: 850px;
    margin: 0 auto;
    min-width: 20em;
}

header div * {
    vertical-align: top;
}

header div span {
    vertical-align: middle;
    margin: 0 0 0 -18%;
}

@media print {
    header div { width:100%;margin: 0 auto; }
    header div span { display:none; }
    table, header { width: 90%; }
    th,td { border-bottom: thin #000 solid;}
    tr, th, header div, caption { background: #fff !important; color: #000 !important; }
    a { display:none; }
}

th, td {
    text-align:left;
    padding: 0 0 0 0.75em;
    margin:0;
    vertical-align:top;
}

.crimetype th:nth-of-type(2n+0), .crimetype td:nth-of-type(2n+0), .age th:not(:nth-of-type(1)), .age td:not(:nth-of-type(1)) {
    width: 15%;
    min-width: 5em;
    text-align: right;
    padding: 0 0.75em 0 0;
}

table {
    min-width:20em;
    width:80%;
    border-spacing:0;
    max-width:950px;
}

article {
    padding: 0 0 0 5%;
    margin: 4em auto;
    vertical-align:top;
    width:95%;
}

article div {
    margin: 0 auto;
    max-width: 1000px;
    min-width: 22em;
    width: 85%;
}

.age table {
    width:40%;
}

.crimetype caption:nth-of-type(1) {
    margin: 3ex 0 0;
}

.crimetype article:nth-of-type(1) {
    margin: 0 auto 4em;
}

th {
    font-weight: normal;
}

th[scope="col"] {
    font-size: smaller;
    font-style: italic;
    background: #bbb;
}

tr:nth-of-type(2n+0) {
    background: #bbb;
}

caption {
    text-align:left;
    background: #666;
    color:#fff;
    padding:0 0 0 0.5em;
}

@keyframes show {
    from {
        height: 0px;
        border: none;
    }
    to {
        height: var(--select-height, 250px);
    }
}

@keyframes hide {
    to {
        height: 0px;
        border: none;
    }
    from {
        height: var(--select-height, 250px);
    }
}
.hide,.show {
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.hide {
    animation-name: hide;
}
.show {
    animation-name: show;
}
.init {
    position: absolute;
    left: -999em;
    right: auto;
}