.search_bar { background: none repeat scroll 0 0 #F5F5F5; border: 1px solid #EEEEEE; padding: 10px 20px; margin-bottom: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; } #store_map { border: 1px solid #DDDDDD; height: 400px; font-size: 12px; width: 67%; float: right; } #store_map .name { font-weight:bold; } #store_map .custom_field_value { margin-left:5px; } #store_map label { width: auto; display:inline; } #store_map img { max-width: none; } .addresses { display: block; height: 400px; overflow-y: auto; padding-right: 10px; width: 31%; } .addresses ul { display: block; margin: 0; padding: 0; list-style:none; } .addresses li { background: url("markers/map-pin-lightblue.png") no-repeat scroll 12px 17px transparent; border-top: 1px dotted #DDDDDD; clear: both; font-size: 12px; line-height: 16px; padding: 15px 5px; min-height: 30px; list-style: none; display: grid; grid-template-columns: 52px auto; grid-row-gap: 1.5em; } .addresses li a { outline: medium none; text-decoration: none; grid-column: 2; grid-row:1; } .addresses li .store_website{ grid-column: 2; grid-row:2; } .addresses li .directions{ grid-column: 2; grid-row:3 } .addresses li a:hover { text-decoration: none; } .addresses li a .name { color:#069; font-weight:bold; font-size: 1.1em; margin:0.2em 0em; } .addresses li a span { color:#333; } .custom_searches { display: block; } .custom_searches .custom_search_label { width: 200px; display: inline-block; } .custom_searches select, .main_search_bar input { width:45%; } .main_search_label { display: inline-block; width: 48%; vertical-align: middle; } .search_filters .search_filter { float: left; margin-right: 20px; width: 154px; padding:2px 0; } .search_bar button { -moz-box-shadow:inset 0px 1px 0px 0px #aba9ab; -webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab; box-shadow:inset 0px 1px 0px 0px #aba9ab; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6b6b6b), color-stop(1, #080808) ); background:-moz-linear-gradient( center top, #6b6b6b 5%, #080808 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b', endColorstr='#080808'); background-color:#6b6b6b; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #030303; display:inline-block; color:#f5f5f5; font-family:arial; font-size:12px; font-weight:bold; padding:4px 5px; text-decoration:none; text-shadow:1px 1px 0px #524f52; margin-left:10px; } .search_bar button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #080808), color-stop(1, #6b6b6b) ); background:-moz-linear-gradient( center top, #080808 5%, #6b6b6b 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#080808', endColorstr='#6b6b6b'); background-color:#080808; } .search_bar button:active { position:relative; top:1px; } .search_bar .main_search_bar { width:52%; float:left; } .search_bar .search_within_distance { float: left; text-align: right; } .search_bar .search_limit { float: left; text-align: right; min-width:22%; } .search_limit_label, .main_search_label, .distance_label { display: inline-block; } .search_bar .main_search_bar input, .search_bar .search_within_distance select, .search_bar .search_limit select { margin-bottom:0; outline:none; } .distance { color: #999999; float: left; font-size: 11px; width: 52px; height: 35px; margin-top:30px; } .search_filters { border-top: 1px solid #E5E5E5; clear: both; margin: 10px 0 0; padding-top: 10px; } .header_html { margin-bottom:10px; } .footer_html { margin-top:15px; } .no_stores_found { margin: 5px 0 0 40px; } .applicable_filter { background: url("markers/checkmark.png") no-repeat scroll 0 1px transparent; padding:2px 10px 0 16px; float:left; } .addresses .store_website li, .addresses .directions li { width: auto; } #submitBtn { display: inline-block; float: right; padding: 7.5px; margin-top: 2px; } .gm_popup .store_website_container { margin: 0; } .website_text_span { font-weight: bold; } .store_website_container a { margin: 0 !important; } .store_website_container a:hover { text-decoration: underline !important; color: #0AA5DF; } .directions a:hover{ text-decoration:underline; } /* ============== DIRECTIONS ============== */ #directions_text a.return_to_results { margin-bottom:15px; } #directions_text #direction_destination { background: url("markers/map-pin-black.png") no-repeat scroll 7px 13px transparent; border-bottom: 1px dotted #DDDDDD; color: #333333; font-size: 12px; padding: 10px 0 10px 40px; } #directions_text #direction_destination .name { font-weight:bold; font-size: 1.1em; margin:0.2em 0em; } #directions_text .directions_step { border-bottom: 1px dotted #DDDDDD; color: #333333; font-size: 11px; padding: 10px 10px 10px 0px; } #directions_steps .directions_step_distance { float:right; color:#999; } #directions_text { display: block; height: 400px; overflow: hidden; padding-right: 7px; width: 31%; } #directions_steps { height: 72%; overflow-y: auto; display: flex; flex-direction: column; } #directions_steps .directions_instructions { float:left; width:175px; } #directions_steps .directions_step_id { width:20px; float:left; } /*Responsive Maps*/ @media (max-width: 800px) { .search_bar .main_search_bar { width: 100%; margin-bottom: 15px; } .main_search_label { width: auto; margin-right: 10px; padding-top: 7px; } .main_search_bar input { width: 200px; } .search_bar .search_within_distance, .search_bar .search_limit { text-align: left; margin-right: 15px; } .search_within_distance { min-width: 25%; } #directions_steps .directions_instructions { width: auto; float: none; } .addresses li a { width: 120px; float: none; } .addresses .directions { float: none; margin-top: 0; width: auto; } #directions_steps .directions_step_distance { display: block; float: none; } .directions_instructions { display: inline; float: none; width: auto; } .store_website a { word-break:break-all; } } @media (max-width: 650px) { #store_map { width: 100%; float: none; } .addresses { width: 100%; height: auto !important; } .addresses li a { width: auto; display: inline-block; } .addresses .directions { float: none; } .addresses .directions a { margin-bottom: 0; } #directions_text { width: 100%; margin-top: 20px; } #directions_steps .directions_instructions { float: left; width: 80%; } #directions_steps .directions_step_distance { float: right; } } @media (max-width: 510px) { .search_bar .main_search_bar { width: auto; float: none; } .main_search_label { margin-bottom: 5px; } .search_bar button { height: 34px; width: 80px; display: block; margin: 0; clear: both; } .search_bar .search_within_distance, .search_bar .search_limit { margin-bottom: 10px; } .search_filters .search_filter { width: 50%; margin: 0; } #store_map { height: 250px !important; } }