a {
    text-decoration:none;
}

.collapse-toggle {
    text-transform:uppercase;
}

.geolocation {
    position:absolute;
    bottom:0px;
    left:0px;
    background:#fff;
}

.overlay {
    background: #f8f8f8;
    width:700px;
    position:absolute;
    top:20px;
    left:50%;
    margin-left:-350px;
    border-radius:3px;
    border:1px solid #ccc;
    z-index:9999;
}

.overlay.collapsed {
    width:400px;
    margin-left:-200px;
}

.overlay .head {
    background:#f2f2f2;
    border-bottom:1px solid #eee;
}

.overlay .foot {
    background:#f2f2f2;
    border-top:1px solid #eee;
}

.biglink {
    font-weight:bold;
    text-transform:uppercase;
    font-size:15px;
    background:blue;
    color:#fff;
    border-radius:2px;
    border:1px solid #fff;
    padding:10px 15px;
}

.collapse-toggle {
    background:#af0000;
}

.collapse-foot {
    display:block;
    font-size:11px;
    color:#223;
}

.subtitle {
    font-size:small;
    text-transform:uppercase;
    font-weight:normal;
}

.collapsed .collapsible {
    display:none;
}

.uncollapsible {
    display:none;
}

.collapsed .uncollapsible {
    display:inline-block;
}

.small-browse {
    background:#0000ff;
    width:20px;
    margin-right:10px;
    vertical-align:middle;
    height:20px;
}

.color-bar {
    height:10px;
    text-indent:-100px;
    overflow:hidden;
    color:#fff;
    transition:height, text-indent 200ms linear;
}

.collapsed .color-bar {
    text-indent:0;
    height:auto;
    padding:5px;
    text-transform:uppercase;
    text-align:center;
}

.color-bar.red {
    background:#AF0000;
}

.color-bar.blue {
    background:blue;
}

/* the city list */
.city-list {
    position:absolute;
    overflow:scroll;
    background:#fff;
    right:0;
    bottom:0;
    top:0;
    left:0;
    display:none;
    z-index:1000;
}

.close-city-list {
    display:block;
    border:1px solid #aaa;
    border-radius:2px;
    padding:2px;
    position:absolute;
    top:10px;
    right:10px;
    line-height:0;
    transition:background 100ms ease-in;
}

.close-city-list:hover {
    background:#ccc;
}

.city {
    display:block;
    width:33.33%;
    border:5px solid #fff;
    float:left;
    height:200px;
    text-align:center;
    line-height:200px;
}

.city span {
    color:#000;
    padding:5px;
    font-size:11px;
    text-transform:uppercase;
    font-weight:bold;
    background:#fff;
}

.city:hover span {
    background:#fff;
}

.sprite {
    background-image:url(sprite.png);
    background-size:250px 100px;
    overflow:hidden;
    text-indent:-200px;
    display:inline-block;
}

.sprite.close {
    width:20px;
    height:25px;
    background-position:-50px 0;
}

.sprite.browse {
    vertical-align:middle;
    width:20px;
    height:20px;
    margin-top:-5px;
    margin-right:5px;
    background-position:-75px -3px;
}


/* the map */

#map {
    border-top:1px solid #aaa;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:#fff;
}

.map-container {
    width:20%;
    overflow:hidden;
    padding:10px;
}

.selected-map .map-small {
    border:1px solid #222;
    background:#fff;
}

.map-small {
    height:150px;
    border:1px solid #ccc;
}

.thumb {
    display:inline-block;
    background-size:200px 200px;
    height:200px;
    width:200px;
}

.attributions {
    position:absolute;
    bottom:5px;
    right:10px;
}

.attributions a {
    opacity:0.4;
    transition:opacity 100ms ease-in;
}

.attributions a:hover {
    opacity:1;
}

a.gnip {
    background:url(gnip-b.png);
    background-size:50px 50px;
    width:50px;
    height:50px;
    text-indent:-1000px;
    overflow:hidden;
    vertical-align:middle;
    display:inline-block;
}

a.mapbox {
    background:url(mapbox-logo-reversed-128-b.png);
    background-size:64px 64px;
    width:64px;
    height:64px;
    margin-left:10px;
    vertical-align:middle;
    text-indent:-1000px;
    overflow:hidden;
    display:inline-block;
}



@media only screen and (max-width:640px) {
    .overlay {
        background: #f8f8f8;
        width:100%;
        top:0;
        left:0;
        margin-left:0;
        border-radius:0;
        border:none;
    }
    .overlay.collapsed {
        width:100%;
        margin:0;
    }
    .overlay.collapsed .col6 {
        width:50%;
    }
    .overlay.collapsed .pad2 {
        padding:5px;
    }
    .overlay.collapsed .pad1 {
        padding:2px;
    }
    .overlay.collapsed .color-bar {
        padding:2px;
    }
}

@media only screen and (max-width:770px) {
    .city {
        width:100%;
    }
}