/* z-index values:
 * 100: below map
 * 400: above map, below map controls
 * 1000: above map controls
 */
body {
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16px;
}

/* Button styling. */
input.hud,
button.hud {
    border: 1px solid #ddd;
    background: rgba(66,93,170,0.5);
    padding: 0.2em 0.5em;
    margin: 0.3em 0 0 0.3em;
    height: 2.5em;
    font-size: 16px;
    float: left;
    z-index: 400;
    color: #fff;
    position: relative;
    border-radius: 0.6em;
    text-shadow: 0 1px 0 #f3f3f3;
}

    button.hud:hover,
    button.hud.opaque {
        background: rgba(66,93,170,1);
    }

    button.hud:disabled {
        border: 1px solid #ccc;
        color: #ccc;
        background: rgba(255,255,255,0.5);
    }

button.square {
    width: 2.5em;
}

button.close {
    float: right;
    border: none;
    height: 2em;
    width: 2em;
    background: none;
    padding: 0;
    margin: -0.2em -0.2em 0 0;
    font-size: 1.5em;
    color: #ccc;
    text-shadow: none;
}

    button.close:hover {
        color: #fff;
        background: none;
    }
/*button.menu {
  border: 1px solid #ddd;
  border-radius: 0.6em;
  color: #ccc;
  background: none;
  padding: 0.2em 0.5em;
  margin: 4px;
  height: 36px;
  font-size: 16px;
  float: right;
  z-index: 400;
}*/

button.menu {
    border: 1px solid #d5d5d5;
    border-radius: 0.6em;
    color: #333;
    background: none;
    padding: 0.2em 0.5em;
    margin: 4px;
    height: 36px;
    font-size: 16px;
    float: right;
    z-index: 400;
}


    button.menu:hover, button.active {
        color: #fff;
        border: 1px solid #fff;
        background-color: black;
    }

button.abbr {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}
/* Give some styling to the google translate input. */
div.menu {
    background: none;
    padding: 0 0.5em;
    margin: 4px;
    height: 36px;
    font-size: 16px;
    float: right;
    z-index: 400;
    overflow: hidden;
}

    div.menu div.goog-te-gadget-simple {
        background: rgb(35,31,32);
        border: none;
        margin-top: 5px;
    }

    div.menu img.goog-te-gadget-icon {
        background-repeat: no-repeat;
        margin: 0 !important;
    }

    div.menu span {
        font-size: 14px !important;
        color: #ccc !important;
        margin: 0 !important;
    }

    div.menu a.goog-te-menu-value span {
        margin: 5px 0 0 !important;
    }

#info-open {
    margin: 0.3em 0.3em 0 0;
    position: absolute;
    top: 45px;
    right: 0;
}

button.active {
    background: rgba(66,93,170,1);
    color: #fff;
}

/* Open/close container toggling. */
.container {
    position: relative;
    z-index: 400;
}

    .container .content {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        min-height: 2.5em; /* mirror .square height */
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0.6em;
        margin: 0.3em 0 0 0.3em;
        padding: 0;
    }

        .container .content.enabled {
            display: block;
        }

#info-container {
    display: none;
}

    #info-container.enabled {
        display: block;
    }

        #info-container.enabled .content {
            display: block;
        }
/* Force specific width for the different content sections. */
#legend-content {
    width: 50%;
    min-width: 20em;
    max-width: 100%;
}

#info-content {
    right: 0;
    margin: 0.3em 0.3em 0 0;
    bottom: 0;
}

    #info-content .content-body {
        overflow: scroll;
        position: absolute;
        top: 3em;
        bottom: 0;
        left: 0;
        right: 0;
    }

/* Absolute hud positioning. */
#map {
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
}

#logo {
    width: 100%;
    height: 44px;
    /*background: rgb(35,31,32);*/
    border-bottom: 1px solid #fff;
    overflow: hidden;
}

    #logo img {
        height: 26px;
        margin: 9px 0 0 9px;
    }

    #logo span {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        vertical-align: top;
        font-size: 22px;
        margin: 9px 0 0 7px;
    }

input.hud {
    padding: 0 0.5em;
    ;
    background: rgba(255,255,255,0.5);
    color: #999;
}

    input.hud:hover,
    input.hud:focus {
        background: #fff;
        color: rgba(66,93,170,1);
    }

#search-address {
    clear: left;
    width: 18em;
}

#search-bbl {
    clear: left;
    width: 8em;
}

#zoom-in {
    clear: left;
}

#legend-container {
    clear: left;
    z-index: 401;
}

#legend-content {
    z-index: 401;
}

#welcome-container,
#info-container {
    position: absolute;
    width: 50%;
    min-width: 20em;
    max-width: 100%;
    top: 45px;
    right: 0;
    bottom: 1em;
}

#welcome-container {
    left: 0;
    bottom: 0;
    /* Update, make the help-text boxes also 50% (auto would make them 100%).
  width: auto;
  */
    z-index: 401;
}

    #welcome-container .content {
        margin: 0.3em;
        right: 0;
        min-height: 98%;
    }

#welcome-content {
    right: 0;
    margin: 0.3em 0.3em 0 0;
    bottom: 0;
}

    #welcome-content .content-body {
        overflow: scroll;
        position: absolute;
        top: 3em;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
    }

        #welcome-content .content-body.enabled {
            display: block;
        }

    #welcome-content .content-header span {
        display: none;
    }

        #welcome-content .content-header span.enabled {
            display: inline;
        }

    #welcome-content dd {
        margin-bottom: 1em;
    }

    #welcome-content dt dfn {
        font-style: normal;
        font-weight: bold;
    }

    #welcome-content img {
        max-width: 100%;
    }

.leaflet-popup-content {
    font-size: 16px;
}

.content .text {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16px;
}

.content-header {
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
    background: rgb(35,31,32);
}

.content-body {
    padding: 0.5em;
}

.content h2 {
    padding: 0.7em 0.5em 0 0.5em;
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    height: 2em;
}

.content h3 {
    font-weight: normal;
    font-size: 1em;
    margin: 1em 0 0.5em;
    padding: 0 0 0.2em;
    border-bottom: 1px solid rgba(66,93,170,1);
}

.content h4 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
}

#assumptions-content h3,
#assumptions-content h4 {
    margin-top: 2em;
}

.content label {
    display: block;
}

.leaflet-popup-content-wrapper {
    border-radius: 0;
}

/* Visibility toggling of the different elements in the info box. */
#calculation {
    display: none;
}

    #calculation table {
        width: 100%;
        border-collapse: collapse;
    }

    #calculation td,
    #calculation td {
        border-bottom: 1px dashed #ddd;
        height: 1.4em;
    }

    #calculation th {
        border-bottom: 1px solid rgba(66,93,170,1);
        padding-top: 1em;
        text-align: left;
    }

    #calculation tr:first-child th {
        padding-top: 0;
    }

    #calculation td.input {
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #ddd;
    }

        #calculation td.input input,
        #calculation td.input select {
            height: 1.2em;
            width: 100%;
            border: none;
            margin: 0;
            padding: 0;
            font-size: 16px;
            color: #999;
        }

        #calculation td.input select {
            height: 1.4em;
        }

            #calculation td.input input:hover,
            #calculation td.input input:focus,
            #calculation td.input select:hover,
            #calculation td.input select:focus {
                color: rgba(66,93,170,1);
            }

#info-content.calculation #calculation {
    display: block;
}

span.info {
    color: #999;
}

#map-image-preview {
    width: 100%;
    color: #999;
}