.main-header h1 a, .main-header h1 a:visited, .main-header h1 a:link { color: #333; } .back-link { display: inline-block; margin-bottom: 30px; } html { min-height: 100%; } body { background-image: url("img/background_main_489.jpg"); background-repeat: no-repeat; background-position: 50% 55px; background-size: 100%; position: relative; min-height: 1500px; padding-bottom: 200px; } body > .jumbotron { background-color: transparent; padding: 3.5em 0; } body > section { background-color: #eee; background-color: rgba(250,250,250,0.7); padding-bottom: 2em; } body.form > section, body.home > section { background-color: transparent; } body.form section header { margin-top: 365px; } body.form section header, body.home section header { margin-bottom: 70px; background-color: rgba(250,250,250,0.5); } body.home section header { margin-top: 0px; } body > footer { /* See jumbotron */ margin-top: 30px; padding: 48px 0; background-color: #eee; text-align: center; position: absolute; bottom: 0;left: 0;right: 0;top: auto; } /** Form **/ #map { min-height: 300px; } #search-results { margin-top: 1em; } form > h2 { border-top: 1px solid #eee; padding-top: 1em; margin-top: 1em; } form > h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } /** Form errors **/ #errors, .errorlist { padding: 1em; border: 1px solid #a94442; border-radius: 4px; } /* non-field errorfields */ #errors ul.errorlist { border: 0; } #errors ul { margin: 0 0 0 1em; padding: 0; } .errorlist { list-style-type: none; } /** Results **/ #map.results { min-height: 500px; margin-bottom: 1em; } .results .leaflet-popup-content { margin: 1em; } .results .leaflet-popup-content h2 { font-size: 20px; } .results .leaflet-popup-content ul { margin: 0.5em 0; padding-left: 1.5em; } /** Media-queries ** * * Focused on readability (where background and text overlap) and avoiding * big vertical empty spaces. */ @media (min-width: 0px) { h1 { max-width: 500px; background-color: rgba(250, 250, 250, 0.5); } body.form section header, body.home section header,{ margin-top: 0px } body { background-image: url("img/background_main_767.jpg"); } } @media (min-width: 480px) { h1 { max-width: 400px } } @media (min-width: 768px) { h1 { max-width: 500px } body { background-image: url("img/background_main_991.jpg"); } } @media (min-width: 992px) { h1 { max-width: 650px; } body.form section header, body.home section header { margin-top: 265px } body { background-image: url("img/background_main.jpg"); } } @media (min-width: 1200px) { h1 { max-width: none; background-color: transparent; } body.form section header, body.home section header { margin-top: 250px } }