form { width: 100%; padding: 1em 15px; } form #q { min-width: 500px; } @media (max-width: 850px) { form #q { min-width: 400px; } } form .checkbox-inline { margin-left: 10px; } form label { font-weight: normal; } .search-type-link { display: inline; margin-right: 2em; position: absolute; right: 0 } #switch-coords { font-size: 0.8em; font-weight: bold; cursor: pointer; } .sidebar { width: 25%; padding: 15px; 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 { display: none; position: absolute; top: 0; right: 20px; padding: 0 5px; color: #333; font-size: 11px; background-color: rgba(255, 255, 255, 0.7); z-index: 500; } #map-position-close { text-align: right; } .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%; } .search-button-group { display: inline } }