#signin_button {
    display: inline-block;
    background: white;
    color: #444;
    width: 200px;
    border-radius: 5px;
    border: thin solid #888;
    box-shadow: 1px 1px 1px grey;
    white-space: nowrap;
}
#signin_button:hover {
    cursor: pointer;
}
#signin_button img {
    vertical-align: middle;
}
#signin_button span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    user-select: none;
}

#caches_map, .page-content {height: 100%}
#map {width: 100%; height: 100%; overflow: hidden; position: fixed}
.ol-attribution img {max-height: 48px}
.ol-control button {cursor: pointer}
.ol-touch #layers {top: 80px}
.ol-touch #filter {top: 120px}
#layers {left: 8px; top: 64px}
#filter {left: 8px; top: 96px}
#checkboxes {display: none; background: rgba(0,60,136,.5); border-radius: 4px; color: #eee; font-family: 'Droid Sans',Arial,sans-serif; font-size: 12px; padding: 10px; user-select: none}
#checkboxes label {display: inline-block; position: relative; padding-left: 30px; margin-bottom: 10px; cursor: pointer; width: 40px}
#checkboxes input {position: absolute; width: 0; height: 0}
#checkboxes span {position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: 2px}
#checkboxes label:hover {color: #ccc}
#checkboxes label:hover span {background-color: #ccc}
#checkboxes span:after {position: absolute; display: none; content: ''; left: 6px; top: 2px; width: 5px; height: 10px; border: solid green; border-width: 0 3px 3px 0; transform: rotate(45deg)}
#checkboxes input:checked ~ span:after {display: block}
#popup {display: none; position: absolute; text-align: center; cursor: pointer; min-height: 48px; background: rgba(0,60,136,.5); border-radius: 4px; color: #eee; font-family: 'Droid Sans',Arial,sans-serif; font-size: 12px; height: auto; padding: 2px; width: auto}