a {
    text-decoration:none;
}

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

.collapsed .collapsible {
    display:none;
}

.geolocation {
    position:absolute;
    bottom:0px;
    right:0px;
    background:#000;
    color:#eee;
}

.overlay {
    background: #111;
    position:absolute;
    top:12px;
    left:45px;
    z-index:13;
}

.legend {
    margin-top:20px;
}

a.layer {
    float:left;
    text-align:center;
    padding:10px;
    opacity:0.5;
    width:90px;
    transition:opacity 100ms ease-in;
}

a.layer:first-child {
    border-radius:5px 0 0 5px;
}

a.layer:last-child {
    border-radius:0 5px 5px 0;
}

a.layer.selected {
    opacity:1;
}

a.layer.selected .label {
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
}

a.layer .label {
    background:rgba(0, 0, 0, 0.4);
    padding:2px 5px;
    border-radius:3px;
    color:#fff;
}

.toggle {
    display:inline-block;
    padding:5px;
    color:#eee;
    background:#444;
    border-radius:2px;
    padding: 5px 10px;
    box-shadow:
        0 0 4px #000;
}

.toggle.off {
    background:#222;
    color:#ccc;
}

.toggle:hover {
    box-shadow:
        0 0 4px #eee;
}

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

.logo {
    background-size: 50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
}

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

#geocoder .leaflet-control {
    clear:none;
}

.geolocate {
    float:left;
    background:#333;
    border:1px solid #444;
    border-radius:0;
    border-left:0;
    margin:0;
    vertical-align:middle;
    width:30px;
    height:30px;
    text-indent:-1000px;
    overflow:hidden;
    background-image:url(sprite.png);
    background-repeat:no-repeat;
    background-size:45px 15px;
    background-position:-24px 7px !important;
}

.geolocate:hover {
    background-color:#000;
}

/* geocoder control */
.leaflet-control-mapbox-geocoder-form input[type=text] {
    width:300px;
    height:30px;
    background:#222;
    color:#eee;
    border:1px solid #444;
    vertical-align:middle;
    margin:0;
}

.leaflet-control-mapbox-geocoder-form input[type=submit] {
    background:#333;
    border:1px solid #444;
    border-radius:0;
    border-left:0;
    margin:0;
    vertical-align:middle;
    width:30px;
    height:30px;
    text-indent:-1000px;
    overflow:hidden;
    background-image:url(sprite.png) !important;
    background-repeat:no-repeat !important;
    background-size:45px 15px;
    background-position:7px 7px;
}

.leaflet-control-mapbox-geocoder-form input[type=submit]:hover {
    background-color:#000 !important;
    background-size:45px 15px;
    background-position:7px 7px;
}

/* intro */
.intro {
    padding:50px;
    width:460px;
    color:#eee;
    z-index:20;
    position:absolute;
    top:0px;
    left:0px;
}

.intro p, .intro h1 {
    text-shadow:
        0px 0px 5px #000,
        0px 0px 5px #000,
        0px 0px 5px #000;
}

h1 {
    font-size:20px;
    line-height:40px;
}

em {
    font-style:normal;
    color:#CFF;
}


.page1 .leaflet-control-attribution {
    background:transparent;
    box-shadow:none;
}

.page1 .leaflet-control-attribution a {
    color:#777;
}

.label {
    display:block;
    font-size:13px;
    color:#88a;
}

.toggling .toggleable {
    display:none;
}

.toggling .intro-toggle {
    border-color:#aaa;
}

.intro-toggle {
    position:absolute;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    padding:5px;
    margin-right:10px;
    line-height:5px;
    text-align:center;
    border:1px solid #555;
    border-left:none;
    border-top:none;
    background:#000;
    color:#eef;
}

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

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

.attributions a:hover {
    opacity:1;
}

a.gnip {
    background:url(gnip.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.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:770px) {
    .intro {
        padding:10px 20px;
        width:100%;
    }
    .intro h1 {
        font-size:14px;
    }
    .leaflet-control-mapbox-geocoder-form input[type=text] {
        width:180px;
    }
    .legend {
        margin-top:5px;
    }
    a.layer {
        padding:2px;
        width:25%;
    }
    a.layer .label {
        background:rgba(0, 0, 0, 0.4);
        padding:2px 5px;
        border-radius:2px;
        color:#fff;
    }
}