header { width: 100%; padding: 15px; z-index: 5; } header .brand { white-space: nowrap; } header .brand a:hover{ text-decoration: none; } header .brand h1 { display: inline; font-size: 1.5em; color: #333; } header .brand > img { display: inline-block; margin-right: 5px; margin-top: -5px; } header #last-updated { font-size: 0.7em; white-space: nowrap; text-align: center; } form { width: 100%; padding: 1em 15px; } form #q { min-width: 500px; } form .checkbox-inline { margin-left: 10px; } form label { font-weight: normal; } .sidebar { width: 25%; padding: 10px; padding-top: 0; display: inline-block; float: left; } #map-wrapper { position: relative; min-height: 700px; width: 75%; padding-right: 20px; display: inline-block; float: left; } #map { height: 100%; min-height: 700px; background:#eee; } #map-position { position: absolute; top: 0; right: 20px; padding: 0 5px; color: #333; font-size: 11px; background-color: rgba(255, 255, 255, 0.7); z-index: 100; } .result { font-size: 0.8em; margin: 5px; margin-top:0px; padding: 4px 8px; border-radius: 2px; background:#F0F7FF; border: 2px solid #D7E7FF; cursor:pointer; min-height: 5em; } .result.highlight { background-color: #D9E7F7; border-color: #9DB9E4; } .result.highlight .details { margin: 10px auto; display: block; max-width: 10em; } .result img{ float: right; } .result .type{ color: gray; font-size: 0.8em; } .result .details { display: none; } .noresults{ text-align: center; padding: 1em; } .more{ text-align:center; margin-top: 1em; } footer { text-align: center; padding: 2em 0; font-size: 0.8em; clear: both; color: #333; } footer p { margin: 1em; } @media (max-width: 768px) { #content { top: 0; position: relative; } #map-wrapper { width: 100%; max-height: 300px; padding: 20px; } #map-position { top: 20px; right: 20px; } #map { height: 300px; } .sidebar { width: 100%; } }