/* orientation-specific */

/* portrait */
@media screen and (orientation:portrait) {
}
/* landscape */
@media screen and (orientation:landscape) {
}

/* disable text selection */
* {
/*    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;*/
    border-spacing: 0px;
    border-collapse: collapse;
}

/* break long words okay */
* {
    word-wrap: break-word;
}

/* default font-size */
@media (max-height: 200px) {
    * {
        font-size: 15px;
    }
}
@media (min-height: 201px) and (max-height: 220px) {
    * {
        font-size: 16px;
    }
}
@media (min-height: 221px) and (max-height: 240px) {
    * {
        font-size: 17px;
    }
}
@media (min-height: 241px) and (max-height: 260px) {
    * {
        font-size: 18px;
    }
}
@media (min-height: 261px) and (max-height: 280px) {
    * {
        font-size: 19px;
    }
}
@media (min-height: 281px) and (max-height: 300px) {
    * {
        font-size: 20px;
    }
}
@media (min-height: 301px) and (max-height: 320px) {
    * {
        font-size: 21px;
    }
}
@media (min-height: 321px) and (max-height: 340px) {
    * {
        font-size: 22px;
    }
}
@media (min-height: 341px) and (max-height: 360px) {
    * {
        font-size: 23px;
    }
}
@media (min-height: 361px) and (max-height: 380px) {
    * {
        font-size: 24px;
    }
}
@media (min-height: 381px) and (max-height: 400px) {
    * {
        font-size: 25px;
    }
}
@media (min-height: 401px) and (max-height: 420px) {
    * {
        font-size: 26px;
    }
}
@media (min-height: 421px) and (max-height: 440px) {
    * {
        font-size: 27px;
    }
}
@media (min-height: 441px) and (max-height: 460px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 461px) and (max-height: 480px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 481px) and (max-height: 500px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 501px) and (max-height: 600px) {
    * {
        font-size: 32px;
    }
}
@media (min-height: 601px) and (max-height: 700px) {
    * {
        font-size: 34px;
    }
}
@media (min-height: 701px) and (max-height: 800px) {
    * {
        font-size: 36px;
    }
}
@media (min-height: 801px) and (max-height: 900px) {
    * {
        font-size: 38px;
    }
}
@media (min-height: 901px) {
    * {
        font-size: 40px;
    }
}
/*	200	15		133	8	7.4	7.2		1.8	2.46666666666667
201	220	16		146	8	7.4	7.2		1.8	2.46666666666667
221	240	17		160	8	7.4	7.2		1.8	2.46666666666667
241	260	18		173	8	7.4	7.2		1.8	2.46666666666667
261	280	19		186	8	7.4	7.2		1.8	2.46666666666667
281	300	20		200	10	9.4	9.2		2.3	3.13333333333333
301	320	21		213	10	9.4	9.2		2.3	3.13333333333333
321	340	22		226	10	9.4	9.2		2.3	3.13333333333333
341	360	23		240	10	9.4	9.2		2.3	3.13333333333333
361	380	24		253	10	9.4	9.2		2.3	3.13333333333333
381	400	25		266	10	9.4	9.2		2.3	3.13333333333333
401	420	26		280	10	9.4	9.2		2.3	3.13333333333333
421	440	27		293	10	9.4	9.2		2.3	3.13333333333333
441	460	30		306	10	9.4	9.2		2.3	3.13333333333333
461	480	30		320	10	9.4	9.2		2.3	3.13333333333333
481	500	30		333	10	9.4	9.2		2.3	3.13333333333333
501	600	32		400	12	11.4	11.2		2.8	3.8
601	700	34		466	12	11.4	11.2		2.8	3.8
701	800	36		533	14	13.4	13.2		3.3	4.46666666666667
801	900	38		600	14	13.4	13.2		3.3	4.46666666666667
901		40		0						*/

html {
    -ms-touch-action: none;
}

body {
    overflow-x: hidden;
}

body > div {
    clear: both;
}

#location {
    margin: 0.5em;
}

#location > * {
    display: block;
}

#location > .type {
    font-size: 75%;
}

#positiveCount:after {
    content: " hits";
}

#negativeCount:after {
    content: " misses";
}

#history .location {
    display: table-row;
}

#history .positive.true {
    color: green;
}

#history .positive.false {
    color: red;
}

#history > .location > * {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    margin: 0.2em;
}

#history > .location > a {
    font-size: 75%;
}

#history > .location > img {
    height: 2em;
}

#results .count {
    padding: 0.5em;
    float: left;
}

#detail {
    width: 100%;
}

#detail > div {
    float: left;
    width: 30%;
}

#detail > div {
    margin: 1%;
    display: table;
}

.item {
    display: table-row;
}

#detail > div > div:nth-child(even) {
    background-color: #eeffff;
}

#detail > div > div:nth-child(odd) {
    background-color: #ffffee;
}

.item > div {
    display: table-cell;
    font-size: 75%;
}

.item > .key {
    text-align: left;
}

.item > .value {
    text-align: right;
}

#controls > div {
    display: inline-block;
    margin: 0.5em;
    padding: 0.25em;
}

#controls > div.button {
    border: 0.1em solid black;
    border-radius: 0.1em;
    cursor: pointer;
}