css/map.css
/* ===
Search Form
=== */
#form-container form {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
float: left;
}
#form-container fieldset,
#form-container div.Actions {
float: left;
margin: 0;
padding: 0;
}
#form-container fieldset { width: 80%;}
#form-container div.Actions { width: 20%;}
#form-container div.field {
width: 45%;
margin-right: 5%;
float: left;
vertical-align: middle;
}
#form-container input,
#form-container select {
width: 100%;
}
/* ===
Map
=== */
#map-container {
clear: left;
margin-top: 27px;
height: 530px;
}
#map-container a {
color: #e76737;
text-decoration: none;
}
#map-container a:hover, #map-container a:active {
text-decoration: underline;
}
#map-container .custom-marker {
width: 32px;
height: 37px;
color: #fff;
background: url(../images/custom-marker.png) no-repeat;
padding: 3px;
cursor: pointer;
}
#map {
float: right;
width: 74%;
height: 530px;
}
/* ===
Results List
=== */
.loc-list
{
float: left;
height: 530px;
width: 25%;
overflow: auto;
}
.loc-list ul
{
display: block;
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.loc-list .list-label
{
float: left;
margin: 10px 0 0 6px;
padding: 2px 3px;
width: 27px;
text-align: center;
background: #451400;
color: #fff;
font-weight: bold;
}
.loc-list .list-details
{
float: left;
margin-left: 6px;
width: 165px;
}
.loc-list .list-content
{
padding: 10px;
}
.loc-list .loc-dist
{
font-weight: bold;
font-style: italic;
color: #8e8e8e;
}
.loc-list li
{
display: block;
clear: left;
float: left;
margin: 6px 0;
cursor: pointer;
width: 99%;
border: 1px solid #fff; /* Adding this to prevent moving li elements when adding the list-focus class*/
}
.loc-list li:first-child {margin-top: 0px;}
.loc-list .list-focus
{
border: 1px solid rgba(82,168,236,0.9);
-moz-box-shadow: 0 0 8px rgba(82,168,236,0.7);
-webkit-box-shadow: 0 0 8px rgba(82,168,236,0.7);
box-shadow: 0 0 8px rgba(82,168,236,0.7);
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
#map-container .loc-name
{
color: #AD2118;
font-weight: bold;
}
/* ===
Loading
=== */
.typography img.loading {
border: none;
}
/* ===
Modal window
=== */
#overlay
{
position: fixed;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 10000;
background: url(../images/overlay-bg.png) repeat;
}
#modal-window
{
position: absolute;
left: 50%;
margin-left: -460px; /* width divided by 2 */
margin-top: 60px;
width: 920px;
height: 590px;
z-index: 10010;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px #656565;
}
#modal-content
{
padding: 0 22px; /* there's already a margin on the top of the map-container div */
}
#close-icon
{
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
cursor: pointer;
background: #2c2c2c url(../images/close-icon.png) 3px 3px no-repeat;
border: 1px solid #000;
border-radius: 3px;
box-shadow: 0 0 3px #656565;
}
/* ===
responsive for Simple theme
=== */
/* BREAKPOINT 960px */
@media only screen and (max-width: 960px) {
.loc-list {
}
#map {
}
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 641px) and (max-width: 959px) {
.loc-list .list-label{
margin-left: 0px;
}
.loc-list .list-content {
padding: 10px 0px;
}
.loc-list .list-details {
width: 140px;
}
}
/* BREAKPOINT 640px */
@media only screen and (max-width: 640px) {
.loc-list {
width: 100%;
height: auto;
}
#map {
width: 100%;
float: left;
}
#form-container fieldset { width: 100%;}
#form-container div.field {
width: 100%;
margin-right: 0;
float: none;
}
#form-container div.Actions {
width: 100%;
max-width: 400px;
float: none;
}
}