* {
    line-height: 125%;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
}

#map:-webkit-full-screen { width: 100% !important; height: 100% !important; }
#map:-moz-full-screen { width: 100% !important; height: 100% !important; }
#map:full-screen { width: 100% !important; height: 100% !important; }

#map {
    width: 100%;
    height: auto;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}        

#map.listOpen {
    width: 80%;
    left: 20%;
}

/* For alpha list */

#alphaList {
    width: 20%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: none;
}

#alphaListInner {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    top: 52px;
    bottom: 0;
    position: absolute;
    font-size: 18px;
}

#alphaListInner a {
    color: #444;
    display: block;
    text-decoration: none;
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;    
}

#alphaListInner a.notTheme {
    color: #ababab;
    display: none;
}

#alphaListInner a:not(.current):hover {
    color: #0078A8;
}

#alphaListInner a.current {
    color: #F46D43;
}

#alphaListInner a:last-of-type {
    border: 0;
}

#filtering {
    font-size: 16px;
    height: 44px;
    text-align: center;
    padding: 4px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
}

span#filterCurrent {
    font-style: italic;
    white-space: nowrap;
}

span#clearFilter {
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

span#clearFilter:hover {
    text-decoration: underline;
}

/* Override grab cursor? */

.leaflet-container {
    cursor: pointer;
    }

.leaflet-dragging,
.leaflet-dragging .leaflet-clickable,
.leaflet-dragging .leaflet-container {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    }

a.external-link {
    background: transparent url('external-link.gif') no-repeat right center;
    padding-right: 14px;
}


.leaflet-control-zoom-fullscreen { background-image: url(icon-fullscreen.png); }

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.clear {
    clear: both;
}

div.controlWhite {
    font-size: 12px;
    background: white;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);    
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #000;
    border: 1px solid #888;
}


div.listToggle {
    padding: 4px 8px;
    font-size: 14px;   
    white-space: nowrap;           
    font-weight: bold;
    color:#0078A8;    
    cursor: pointer;
}

div.listToggle:hover {
    text-decoration: underline;
}

div.streetName {
    position: fixed;
    display: none;        
    padding: 4px 8px;
    font-size: 18px;
    background: white;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);    
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;          
    border: 1px solid #444;
    white-space: nowrap;           
    font-weight: bold;
    color:#444;
}

div.filter {
    padding: 0px;
    width: 254px;
}

div.filter input, div.filter select {
    font-size: 12px;
}

div.filterRow {
    padding: 4px 12px;
}

div#filterSearch {
    padding-top: 12px;
}

div#filterSearch input {            
    width: 120px;
    border: 1px solid #999;    
    margin-left: 2px;    
    padding: 2px 16px 2px 4px;
    background-color: #fff;
}

div.filter label {            
    float: left;
    width: 66px;            
    margin-right: 6px;
    text-align: right;
    font-weight: bold;
}

div.filterRow label {
    padding: 4px 0px;
}

div#filterSearch input.loading {
    background: transparent url('loading-circle-small.gif') no-repeat right center;
}

div#filterContents {
    border-top: 1px solid #999;
    position: relative;
    margin-top: 8px;
}

div#filterLocation {
}

div#filterBrowse {    
    text-align: center;
    font-weight: bold;
    font-size: 14px;    
    margin: 8px 4px;
}

a#browseBefore {
    margin-left: 10px;    
    position: absolute;
    left: 0;
}

a#browseAfter {    
    margin-right: 10px;    
    position: absolute;
    right: 0;
}

div#filterAbout {
    padding: 12px;
    border-top: 1px solid #999;
    position: relative;  
}

div.hide {
    position: absolute;
    right: 0;
    top: 0;    
    width: 16px;
    height: 16px;  
}

div#aboutHide {
    display: none;
}

div.hide a {
    display: block;
    /*background: transparent url; */
    text-align: center;
    color: black;
    height: 16px;
    width: 16px;
    text-decoration: none;
}

div#filterToggle {
    display: none;
    border-top: 1px solid #999;
    text-align: center;
    padding: 8px 0px;    
}

div#aboutToggle {
    text-align: center;    
}

div#about {
    display: none;
    padding-top: 12px;
    font-size: 11px;
    margin-left: auto;    
    margin-right: auto;
    width: 160px;
}

div#about label {
    font-weight: normal;
    width: 34px;            
}

div#about div {
    padding-bottom: 6px;
}

div#about div:last-of-type {
    padding-bottom: 0px;
}

div#loadingScreen {
    position:absolute;
    display: table;
    left:0;
    top:0;
    width:100%;
    height:100%;
    text-align:center;
    z-index:1000;    
    vertical-align: middle;
    background-color: #fff;        
    background-color: rgba(255,255,255,0.85);
}

div#loadingScreen div.splash {
    display: table-cell;
    vertical-align: middle;
}

div.splashLoading {
    height: 170px;
    background: transparent url('sutro-loading.gif') no-repeat center center;
}

div.ready div.splashLoading {    
    background: transparent url('sutro-ready.gif') no-repeat center center;
}

div.splashStatus {
    padding-top: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 100%;
}

div.splashTop {
    font-size: 36px;
    font-weight: bold;    
    padding-top: 18px;
    padding-bottom: 4px;
    line-height: 100%;
}

div.splashBottom {
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 210px;    
}

div.splashBottom div {
    margin-top: 12px;
}

div.ready {
    cursor: pointer;
}

div.info {
    padding: 18px;
    width: 420px;                           
}

div.info div.historyOuter {
    overflow-y: auto;
}

div.info div.header {
    margin: 0 0 5px 0;            
    font-weight: bold;
    font-size: 28px;          
}

div.info div.historyOuter {         
    font-size: 14px;
}  

div.info div.empty div.instructions div {
    margin-top: 4px;
    font-size: 14px;
    line-height: 135%;
}  

div.info div.entity {
    margin: 10px 0 0 0;
    border: 1px solid #666;
    font-size: 14px;
    padding: 6px 8px;      
    border-radius: 4px;      
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}      

div.info div.entity div.name {
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 4px;
}

div.info div.entity div.description img {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}        

div.info div.link {
    margin-top: 8px;
    overflow: hidden;
    text-align: right;
}

@media screen and (max-height: 721px) {

    div.info div.historyOuter {
        max-height: 240px;
    }    
}


@media screen and (max-height: 641px) {

    div.info div.historyOuter {
        max-height: 220px;
    }    
}

@media screen and (max-height: 541px) {

    div.info div.historyOuter {
        max-height: 180px;
    }    
}

@media screen and (max-height: 481px) {  

    div.info div.historyOuter {
        max-height: 160px;
    }    
}

@media screen and (max-height: 461px) {  

    div.info div.historyOuter {
        max-height: 120px;
    }    
}

@media screen and (max-height: 401px) {  

    div.info div.historyOuter {
        max-height: 100px;
    }    
}


@media screen and (max-width:1100px) {
    div#alphaListInner {
        font-size: 16px;
        top: 44px;
    }

    div#filtering {
        font-size: 14px;
        height: 36px;
    }    
}

@media screen and (max-width:960px) {
    div.info {
        width: 320px;
    }

    div#alphaListInner {
        font-size: 14px;
        top: 40px;
    }

    div#filtering {
        font-size: 12px;
        height: 32px;
    }

}

@media screen and (max-width:840px) {
    div.splashStatus {
        font-size: 18px;
    }   

    div.splashTop {
        font-size: 32px;
    } 

    div.splashBottom {
        font-size: 16px;
    }

    div#alphaListInner {
        font-size: 12px;
        top: 36px;
    }

    div#filtering {
        font-size: 10px;
        height: 28px;
    }       
}

@media screen and (max-width:600px) {
    div.info {
        width: 280px;
    }

    div.info div.header {
        font-size: 20px;
    }

    div.info div.entity {
        font-size: 12px;
    }

    div.info div.history {
        font-size: 12px;
    }

    div.info div.entity div.name {
        font-weight: bold;
        font-size: 15px;
        padding-bottom: 4px;
    }    

}

@media screen and (max-width:640px) {
    div.listToggle {
        display: none;
    }

    div#alphaList {
        display: none;
    }

    div.splashStatus {
        font-size: 14px;
    }   

    div.splashTop {
        font-size: 22px;
    } 

    div.splashBottom {
        font-size: 12px;
    }
}

@media screen and (max-width:480px) {
    div.info {
        width: 240px;
    }

    div.splashTop {
        font-size: 18px;
    }     
}

@media screen and (max-width:360px) {
    div.info {
        width: 200px;
    }
}

@media screen and (max-width:300px) {
    div.info {
        width: 140px;
    }

    div.info div.header {
        font-size: 15px;
    }

    div.info div.entity {
        font-size: 10px;
    }

    div.info div.history {
        font-size: 10px;
    }

    div.info div.entity div.name {
        font-weight: bold;
        font-size: 12px;
        padding-bottom: 4px;
    }        
}

@media screen and (max-width:240px) {
    div.info {
        width: 110px;
    }
}

@media screen and (max-width: 401px), screen and (max-height: 599px) {  

    div.streetName {        
        font-size: 14px;
        padding: 2px 4px;
    }    
}


@media screen and (max-width: 480px)  {  

    div#filterContents {
        display: none;
    }

    div.filter {
        width: 190px;
    }

    div#filterToggle,div#aboutToggle {
        display: block;
    }

    div#about {
        display: none;
    }

    div.info div.entity div.description img {
        display: none;
    }

}

@media screen and (max-device-width: 640px) and (orientation:portrait) {

    div#filterLocation {
        display: block;
    }    
}

@media screen and (max-device-height: 640px) and (orientation:landscape) {

    div#filterLocation {
        display: block;
    }    
}

div.filter.widen {
    width: 254px;
}

#alphaListInner.allStreets {
    top: 0;
}