#canvas_container {
    position:relative;
    left:800px;
    top:100px;
    z-index:1500;
    height:0px;
    width:0px;
}

/* Opacity for the legend / scale svg elements */
#canvas_container svg rect, #canvas_container svg image {
    opacity: 1;
}

#map_wrapper {
    position: relative;
}

/* Main map panel */
#map {
    border:1px solid #BBBBBB;
    width: 948px;
    height: 600px;
    background-color: #d8e7e8;
}

#map img { max-width: none; }
#map-small img { max-width: none; }

/* Override the default OpenLayers button style */
#OpenLayers_Control_Zoom_3 {
    padding: 0;
}

#OpenLayers_Control_Zoom_3 a {
    width: 26px;
    height: 26px;
    line-height: 1.4;
    background-color: #303E36;
    font-family: 'Merriweather Sans', sans-serif;
}

/* Positioning for the pop-in panel on top of the map */
#right_panel {
    color: #F6F7F6;
    position: absolute;
    width: 100% ;
    left: 600px;
    background-color: rgba(49, 62, 55, 0.7);
    padding: 10px;
    z-index: 900;
}

#right_panel h2, #right_panel h3 {
    color: #F6F7F6;
}

/* Entries for the right-hand map panel */
#collapse_controls {
    position: absolute;
    border-radius: 4px 0 0 4px;
    height: 24px;
    width: 100%;
    left: 918px;
    top: 11px;
    z-index: 999;
    background-color: #303E36;
    color: white;
    font-size: 25px;
}

/* Centre the signs in the collapse controls span. */
#collapse_controls span {
    cursor: pointer;
    position: relative;
    top: 2px;
    left: 4px;
}

#collapse_legend { background-color: #303e36; border-radius: 4px 4px 4px 4px; color: white; font-size: 25px; height: 24px; left: 925px; position: absolute; top: 102px; width: 28px; z-index: 1600; cursor:pointer; }
#timeseries_legend { background-color: #303e36; border-radius: 4px 4px 4px 4px; color: white; font-size: 25px; height: 24px; left: 925px; position: relative; top: 102px; width: 28px; z-index: 1600; cursor:pointer; }

/* Style for the layer switcher */
#layer_switcher {
    padding: 0px 5px 0px 5px;
}

.heading {
    font-size: 12pt;
    font-weight: bold;
    padding: 0px 0px 4px 0px;
}

.dataLbl {
    font-size: 12pt;
    font-weight: bold;
    padding: 0px 0px 4px 0px;
}

.layersDiv { padding: 0 5px; }

/* Style for the download popup */
.ui-widget-header {
    background: #3b3b39;
    border: 1px solid #3b3b39;
}


/* http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/ */
/* CC0 1.0 Universal */

.dataLayersDiv input[type=checkbox]:not(old), .dataLayersDiv input[type=radio ]:not(old){ width : 2em; margin : 0; padding : 0; font-size : 1em; opacity : 0; }
.dataLayersDiv input[type=checkbox]:not(old) + label, .dataLayersDiv input[type=radio ]:not(old) + label{ display : inline-block; margin-left : -2em; line-height : 1.5em; }
.dataLayersDiv input[type=checkbox]:not(old) + label > span, .dataLayersDiv input[type=radio ]:not(old) + label > span{
 display : inline-block;
 width : 0.875em;
 height : 0.875em;
 margin : 0.25em 0.5em 0.25em 0.25em;
 border : 0.0625em solid rgb(192,192,192);
 border-radius : 0.25em;
 background : rgb(224,224,224);
 background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
 background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
 background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
 background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
 background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
 vertical-align : bottom;
}
.dataLayersDiv input[type=checkbox]:not(old):checked + label > span, .dataLayersDiv input[type=radio ]:not(old):checked + label > span{
 background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
 background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
 background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
 background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
 background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
.dataLayersDiv input[type=checkbox]:not(old):checked + label > span:before {
 content : '';
 display : block;
 width : 0.5em;
 height : 0.5em;
 margin : 0.125em;
 border : 0.0625em solid rgb(115,153,77);
 border-radius : 0.125em;
 background : rgb(48,62,54);
 background-image : -moz-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -ms-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -o-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -webkit-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : linear-gradient(rgb(127,139,128),rgb(48,62,54));
}
.dataLayersDiv input[type=radio]:not(old):checked + label > span > span {
 display : block;
 width : 0.5em;
 height : 0.5em;
 margin : 0.125em;
 border : 0.0625em solid rgb(115,153,77);
 border-radius : 0.125em;
 background : rgb(48,62,54);
 background-image : -moz-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -ms-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -o-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : -webkit-linear-gradient(rgb(127,139,128),rgb(48,62,54));
 background-image : linear-gradient(rgb(127,139,128),rgb(48,62,54));
}