body {
    width:960px;
    margin:0 auto 4em;
    color:#f8f8f8;
    background-color: #1b2632;
    font-family: 'Courier', sans;
    font-size:1em;
}

.v1 h1 {
    background: url('../img/online_logo.png') no-repeat center bottom;
    width: 617px;
    height: 214px;
    margin:24px auto;
    font-size: 1.2em;
    cursor: pointer;
}

.v2 h1 {
    background: url('../img/online_logo_v2.png') no-repeat center;
    width: 617px;
    height: 214px;
    margin:24px auto;
    font-size: 1.2em;
    cursor: pointer;
}

h1, h2 {
    text-align: center;
}

.listing {}
.template {
    display: none;
}
.map {
    width:440px;
    min-height: 460px;
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
    border:1px solid #732930;
}

.map:nth-child(2n){
    margin-left: 40px;
}

.map h3 {
    margin:0 0 4px 0;
    padding: 4px 8px;
    background-color: #732930;
}
.map span {
    padding:4px 0;
}
.map strong {
    padding:4px 8px;
    font-size: 1.1em;
    color:#000;
    background-color: #fff;
}

.map .created,
.map .downloads,
.map .code {
    display: block;
}

.map .created,
.map .downloads {
    padding-left:8px;
    font-size: 0.8em;
}

.map .code {
    margin-top:2em;
    text-align: center;
}

.v1 .map .map_image {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
    width: 300px;
    height: 300px;
    margin:12px auto;
    display: block;
    border: 8px solid #005784;
    padding: 4px;
    background-color: #15c2a5;
}

.v2 .map .map_image {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
    width: 300px;
    height: 300px;
    margin:12px auto;
    display: block;
    border: 8px solid #524f40;
    padding: 4px;
    background-color: #493c2b;
}

.moreAuthor {
    display:block;
    padding: 8px;
    background-color: #732930;
    color: #fff;
    text-align: center;
}

#load_more {
    display: block;
    text-align: center;
    border-top:8px dashed #732930;
    padding-top: 2em;
    margin-top:2em;
}


button {
    display: inline-block;
    border: 8px solid #005784;
    padding: 4px;
    background-color: #15c2a5;
    color:#fff;
    font-weight: bold;
    font-size: 1.2em;
}

a {
    color: #ffffff;
}

#load_more button {
    width:256px;
}

#load_more button:hover {
    background-color: #005784;
     cursor: pointer;
}

#spinner {
    width:44px;
    height:44px;
    margin:24px auto;
    background: url('../img/spinner.gif') no-repeat center center;
}

/* smartphones */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    body {
        width:100%;
        font-size:2em;
    }
    h1, .v1 h1, .v2 h1 {
        font-size:2em;
        background:none;
    }
    h2 {
        font-size:1.2em;
    }
    .map {
        width:100%;
        margin: 0 auto 2em;
        display: block;
    }
    .map:nth-child(2n){
        margin-left: 0;
    }
    .map .map_image {
        width:90%;
        height:auto;
    }
}