/*
 * GENERAL PAGE LAYOUT / HEADER
 * Tips:
 * - the height of #map
 *      uses calc() to achieve 100% minus the height of #header
 *      the height of #header is set explicitly below
 * - #header_lhs may need the font-size adjusted depending on the length of your title
 * - the opacity sliders #legend_panel .legend_slider have their width hardcoded here in CSS, presuming a known width for #legend_panel
 *      if you change that width you may want to check out the widths of the sliders
 */

body {
    padding: 0;
    margin: 0;
    overflow:hidden;
}
html, body {
    height: 100%;
    font-family: Arial, sans-serif;
}

#pleasewait { position:absolute; top:50%; left:50%; margin-left:-30px; margin-top:-30px; padding: 5px 5px 0 5px; border-radius: 5px; background-color:white; z-index:1000000; }

#mainwrapper {
    height:calc(100% - 67px); /* #header height plus #header borders */
    width:100%;
}

#map {
    /*width:calc(100% - 300px);*/
    width:100%;
    height:100%;

    top:0;
    /*right:0;*/
    left:0;
    /*float:right;*/
}

#header {
    height:65px;
    background-color:black;
    border-top:2px solid black;
}
#header a.client_logo {
    line-height:65px;
    margin-left:15px;
}
#header a.mapcollab_logo {
    float:right;
    margin:2px 15px 0 0;

    font-weight:700;
    font-size:20px;
    line-height:65px;
    text-decoration:none;
    color:white;
}


/*
 * LEFT SIDEBAR STYLES  (beyond the positioning defined above)
 */
 #leftbar {
    background-color:#f2f2f2;

    width:350px;
    height:calc(100% - 67px); /* header height */
    position: fixed;
    top:67px;
    bottom:0;
    left:0;
    float:left;

    z-index:1001;

    box-shadow:rgba(0, 0, 0, 0.25) 1px 0px 2px 1px;
 }

/* animation settings */
#leftbar, .push, #legend_panel, .leaflet-control-scale {
    -webkit-transition: left 300ms ease;
    -moz-transition: left 300ms ease;
    -ms-transition: left 300ms ease;
    -o-transition: left 300ms ease;
    transition: left 300ms ease;
}

/*
 * LOGOUT BAR (yeah, a misnomer)
 */
#loginbar {
    width:100%;
    margin:0 auto;
    position:absolute;
    bottom:0;
    padding:0.6em 0;

    background-color:#fff;
    border-top:1px solid #d2d2d2;

}

#loginbar a {
    margin: 0 7px;
    float:left;
    text-decoration: none;
    color: #555;
    font-size: 80%;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    opacity: 0.6;
    transition: opacity ease 0.5s;
}

#loginbar a:hover {
    opacity: 1;
}


/* MAP CONTROL TOP LEFT BAR
 * we want the bar to stretch to the right, not downward
 */

.leaflet-left.leaflet-top .leaflet-control {
    display:inline-block;
    clear:none;
}
/*
.leaflet-top .leaflet-control {  tighten up top margin a bit
    margin-top: 5px;
}*/


/* have the +- zoomer show sideways, then fix what this breaks */
.leaflet-control-zoom a {
    display: inline-block;
}

.leaflet-bar a, .leaflet-bar a:hover {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.75);
}


/* MAP AND BUSY CURSOR   less obtrusive than the Please Wait box but still indicates to chill out a moment */

#map {
    /*cursor:crosshair;*/
    cursor: default;
    box-shadow: 0 1px 2px 3px rgba(0,0,0,0.25);
}
#map.busy {
    cursor: wait;
}



/* THE SETTINGS / CONTROLS ACCORDION */
#dialog_accordion {
    padding:0;
}

#dialog_accordion h1 {
    font-size: 12pt;
    font-weight: bold;
    cursor: pointer;
    background-color: rgb(200,200,200);
    color: #ffffff;
    color: #3D3D3D;
    padding: 0.25em 0 0.25em 0.5em;
    margin: 0;
}
#dialog_accordion h1 {
    border-top: 5px solid #FFFFFF;
}
#dialog_accordion h1:first-of-type {
    border-top: 0 none transparent;
}

#dialog_accordion h1 i {
    float:right;
    margin-right:0.5em;
    margin-top: 1px;
    line-height:1.35; /* vertical-align i.fa doesn't appear to work on floated elements */
}

#dialog_accordion > div {
    display:none; /* displayed via code; see accordionOpen() et al */

    font-size:12px;
    color:#444;

    padding:0 1em;
}

#dialog_accordion input[type="button"], #dialog_accordion input[type="submit"] {
    display: block;
    margin-bottom: 8px;
    position: relative;
    text-align: center;
    font-size: 12px;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    height: 31px;
    padding: 0 6px;

    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0,0,0,0.1);
    background-color: #4d90fe;

    width: 100%;

    cursor:pointer;
}
#dialog_accordion input[type="button"]:hover, #dialog_accordion input[type="submit"]:hover {
    text-shadow: 0 1px rgba(0,0,0,0.3);
    background-color: #357ae8;
}

#dialog_accordion input[type="button"]:disabled, #dialog_accordion input[type="submit"]:disabled {
    opacity:0.5;
    cursor:not-allowed;
}

#dialog_accordion textarea {
    resize: none;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding:4px;
}

#dialog_accordion input[type="text"] {
    height: 31px;
    width: 100%;
    margin-bottom: 8px;

    background: #fff;
    font-size: 12px;

    -webkit-appearance: none;
    border: 1px solid #d9d9d9;
    border-top: 1px solid #c0c0c0;
    padding: 0 6px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#dialog_accordion input[type="text"]:hover {
    border: 1px solid #b9b9b9;
    border-top: 1px solid #a0a0a0;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

form.searchform select {
    width:95%;
}

#searchform_agency input[type="submit"] {
    width:47px; /* to match other input buttons */
    margin:5px auto;
}

#dialog_accordion span.locationsearch_link {
    cursor:pointer;

    padding-right:1em;
    padding-left:1em;

    border-right:1px solid #CCCCCC;
}
#dialog_accordion span.locationsearch_link:last-child {
    border-right:0 none transparent;
}
#dialog_accordion span.locationsearch_link_active {
    font-weight:bold;
}

#dialog_accordion span.geocode_zoomto_link {
    cursor:pointer;

    padding-right:1em;
    padding-left:1em;

    border-right:1px solid #CCCCCC;
}
#dialog_accordion span.geocode_zoomto_link:last-child {
    border-right:0 none transparent;
}
#dialog_accordion span.geocode_zoomto_link_active {
    font-weight:bold;
}
#dialog_accordion select {
    height:29px;
    margin-top:5px;
    margin-bottom: 8px;
}
#dialog_accordion select.geocode_zoomto {
    width:99%;
    display:none; /* shown in code when .geocode_zoomto_link is clicked; see initAccordion() */
}

#dialog_accordion form.drawtool_form {
    display:none; /* made visible in code, see the startTool() family of functions */
    margin-top:8px;
}
#dialog_accordion form.drawtool_button {
}


/* LEGEND RECREATED AS A PLAIN OLD DIV */
#legend_panel {
    display:none; /* shown with code, see mapconstants.js */
    background:#fff;
    z-index:1050;

    position:absolute;
    margin:20px 20px 20px 30px;
    padding:10px 20px 10px 10px;
    left:350px;
    top:22px;

    width:auto;
    height:auto;

    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);

    max-height:calc(100% - 100px); /* force max height to screen height, enable scrolling */
    overflow:auto;
}

#legend_panel div.legend_content {
    display:none; /* shown when layer is toggled, notably layerOn() and layerOff() */
}

#legend_panel div.legend_content {
    margin-left:25px;
}

#legend_panel div.legend_slider {
    width:200px;
    height:5px;

    margin-top:5px;
    margin-bottom:5px;
}
#legend_panel div.legend_slider .ui-slider-handle {
    width:10px;
    height:10px;
}

#legend_panel div.legend_block label {
    white-space:nowrap;
}

#legend_panel .legend-swatch {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
}
#legend_panel .legend-swatch img {
    width: 1.25em;
    height: 1.25em;
}

#legend_panel p.context_category_title {
    cursor:pointer;

    font-weight:bold;
    font-size:125%;

    margin-top:1em;
    margin-bottom:0;

    white-space:nowrap;
}
#legend_panel p.context_category_title i {
    font-size:80%;
    padding-right:0.5em;
}

#legend_panel p.context_category_title.expanded {
}
#legend_panel p.context_category_title.expanded i {
    vertical-align:baseline;
}
#legend_panel p.context_category_title.collapsed {
}
#legend_panel p.context_category_title.collapsed i {
}

#legend_panel div.context_category_section {
    margin-left:1.5em;
}

#shim {
    z-index: 1055;
    background: #fff;
    width: 88px;
    height: 5px;
    border: none;
    position: absolute;
    left: 0;
    top: -5px;
}


/* THE DRAW TOOLS used for editing text for submitting edits or comments on edits */

form.drawtool_form input[type="text"], form.drawtool_form select, #upload_send select {
    width:95%;
}
form.drawtool_form textarea, #upload_send textarea {
    width:95%;
    height:1.5in;
}

form.drawtool_form div.photo-gallery ul {
    list-style-type:none;
    margin-left:-2em;
}


/* SEARCH RESULTS listing, toolbar images, etc. */

#search_results {

}

#search_results div[data-role="resultcount"] {
    text-align:center;
    font-weight:bold;
}

#search_results div[data-role="toolbar"] {
    text-align:center;
    padding: 15px 0 3px 0;
}
#search_results div[data-role="toolbar"] img {
    margin-right:10px;
    cursor:pointer;

    /* these are SVGs, not PNGs, and they're loaded dynamically so colors can besent with the SVG content */
    border-radius:4px;
    width:26px; height:26px;

    opacity:0.5;
}

#search_results div[data-role="toolbar"] img:hover {
    opacity:0.85;
}

#search_results div[data-role="toolbar"] img:last-child {
    margin-right:0;
    opacity:1 !important; /* the Reset button is known to be the last one, and has visibility issues if we use opacity on it */
}

#search_results div[data-role="listing"] {
    margin-bottom:3em;
}
#search_results div[data-role="listing"] > div {
    margin-top:1em;
    border-bottom:1px solid #CCCCCC;

    position:relative; /* hack for the .zoom links to be positioned top-right */
}
#search_results div[data-role="listing"] > div div.title {
    font-weight:bold;
}
#search_results div[data-role="listing"] > div div.zoom {
    cursor:pointer;
    text-decoration:underline;

    display:inline-block;
    float:right;
}


/*
 * AGENCY INDEX POPUP
 */
#dialog_agency_index table {
    width:95%;
    border-collapse: collapse;
}
#dialog_agency_index table td {
    padding:0.1em 2em 0.1em 1em;
}
#dialog_agency_index table thead td {
    font-weight:bold;
}
#dialog_agency_index table tbody td {
    white-space: nowrap;
}
#dialog_agency_index table tbody tr:nth-child(odd) td {
    background-color:#F0F0F0;
}