/* Stylesheet for San Francisco Web Map - Reclaimed Project */
/* Contact: Gabriel Kaprielian */
/* email: tug86593@temple.edu */
/* version: 10.0.1 */

body {
    margin:0;
    padding:0;
    display:inline-block;
}

#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
}

/* Style upper menu bar */

#titlebar {
    position: fixed;
    z-index: 1000;
    top: 15px;
    height: 60px;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.9;

}

#maintitle{
    position: relative;
    display: inline;
    left: 26px;
    float: left;
    vertical-align: middle;
}

.titletext{
    color: #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    line-height: 60px;
}

/* Style upper menu titles */

#epochmenu{
    position: relative;
    float: right;
    right: 26px;
    width: 376px;
    height: 60px;
}

.titlemenutext{
    align-items: center;
    color: #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
}

.menutitlepastupperspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 19px;
    cursor: pointer;
}

.menutitlepresentupperspacer{
    display: inline;
    float: left;
    width: 126px;
    height: 19px;
    border-right: 1px transparent;
    border-left: 1px transparent;
    cursor: pointer;
}

.menutitlefutureupperspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 19px;
    cursor: pointer;
}

.menutitlepast{
    float: left;
    display: inline;
    width: 124px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.menutitlepresent{
    float: left;
    display: inline;
    width: 124px;
    height: 22px;
    text-align: center;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    line-height: 22px;
    cursor: pointer;
}

.menutitlefuture{
    float: left;
    display: inline;
    width: 124px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.menutitlepastlowerspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 19px;
    cursor: pointer;
}

.menutitlepresentlowerspacer{
    display: inline;
    float: left;
    width: 126px;
    height: 19px;
    border-left: 1px transparent;
    border-right: 1px transparent;
    cursor: pointer;
}

.menutitlefuturelowerspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 19px;
    cursor: pointer;
}

/* style down arrows for main menu */

#menutitlepastarrow{
    position: absolute;
    right:298px;
    top: 60px;
}

#menutitlepresentarrow{
    position: absolute;
    right:173px;
    top: 60px;
}

#menutitlefuturearrow{
    position: absolute;
    right:49px;
    top: 60px;
}

.downarrowdiv{
    height: 0px;
    width: 0px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-top: 13px solid #3b3b3b;
}

.menupasthover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menupasthoverpresentnoborder{
    border-left: 1px solid #ffffff;
}

.menufuturehover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menufuturehoverpresentnoborder{
    border-right: 1px solid #ffffff;
}

.menupresenthover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menupresenthoverpresentnoborder{
    color: #ffffff;
    background-color: #3b3b3b;
    border-left: 1px solid #3b3b3b;
    border-right: 1px solid #3b3b3b;
}

/* styles for menu click events */

.menupasthoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menupresenthoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menupresenthovernoborderclicked{
    color: #ffffff;
    background-color: #3b3b3b;
    border-left: 1px solid #3b3b3b;
    border-right: 1px solid #3b3b3b;
}

.mtp-border-past-conform{
    border-left: 1px solid #ffffff;
}

.mtp-border-future-conform{
    border-right: 1px solid #ffffff;
}

.menufuturehoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

/* style fly container */

#flytitlebutton{
    position: fixed;
    top: 88px;
    left: 13px;
    height: 22px;
    width: 128px;
    padding-top: 4px;
    background-color: #ffffff;
    opacity: 0.9;
    border: 1px solid #000000;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 750;
    z-index: 1;
    text-align: center;
}

#flytitlebutton:hover{
    cursor: pointer;
    color: #ffffff;
    background-color: #3b3b3b;
}

#flycontainer{
    position: fixed;
    top: 120px;
    left: 13px;
    height: auto;
    width: 120px;
    padding-top: 12px;
    padding-left: 8px;
    background-color: #ffffff;
    opacity: 0.9;
    border: 1px solid #000000;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

#citiesflytitle{
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    font-size: 16px;
    font-weight: 750;
}

.flycities_op_button {
    position: relative;
    width: 0;
    height: 0;
    left: -8px;
    top: 0px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

.flyto_city_container {
    position: relative;
    display: inline-block;
    height: 16px;
    left: 10px;
    padding-bottom: 4px;
}

.flyto_city_container:hover {
    cursor: pointer;
}

.flyto_city {
    position: relative;
    display: inline-block;
    top: -14px;
    height: 16px;
    line-height: 16px;
    padding-left: 5px;
    padding-bottom: 4px;
}

/* style main drop down menus */

/* style past menu */

#pastmenu{
    position: absolute;
    top: 73px;
    right: 0px;
    height: 400px;
    width: 373px;
    background-color: #ffffff;
    opacity: 0.9;
    border: 1px solid #000000;
    border-radius: 13px;
    /* font-family: 'Roboto Condensed', sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 22px; */
}

#pastmenucontainer{
    position: relative;
    top: 13px;
    left: 13px;
    width: 337px;
}

.pastmenusectiontitle{
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 750;
    font-size: 16px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-top: 2px;
}

.layer-toggle-on {
  background-color: #3b3b3b;
  color: #fff;
}
/* style 1859 USCS map control elements */

#map1859_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#map1859_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#map1859_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#map1859_name_holder:hover {
    cursor: pointer;
}

input#slider_map1859{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-map1859 {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-map1859 label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 1861 CCSF map control elements */

#CCSF1861_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#CCSF1861map_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#CCSF1861map_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#CCSF1861map_name_holder:hover {
    cursor: pointer;
}

input#slider_CCSF1861{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-CCSF1861 {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-CCSF1861 label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style langley map control elements */

#langley_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#langleymap_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#langleymap_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#langleymap_name_holder:hover {
    cursor: pointer;
}

input#slider_langley{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-langley {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-langley label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 1884 USCS map control elements */

#USCS1884_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#USCS1884map_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#USCS1884map_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#USCS1884map_name_holder:hover {
    cursor: pointer;
}

input#slider_USCS1884{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-USCS1884 {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-USCS1884 label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 1908 geological map control elements */

#geologicalmap_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#geologicalmap_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99;
}

#geologicalmap_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#geologicalmap_name_holder:hover {
    cursor: pointer;
}

input#slider_1908Geo{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-1908Geo {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-1908Geo label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 1914 SP map control elements */

#map1914SP_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#map1914SP_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99;
}

#map1914SP_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#map1914SP_name_holder:hover {
    cursor: pointer;
}

input#slider_1914SP{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-1914SP {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-1914SP label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 1926 USCGS map control elements */

#USCS1926_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#USCS1926map_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#USCS1926map_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#USCS1926map_name_holder:hover {
    cursor: pointer;
}

input#slider_USCS1926{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-USCS1926 {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-USCS1926 label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style historic baylands control elements */

#historicbaylands_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#historicbaylands_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#historicbaylands_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#historicbaylands_name_holder:hover {
    cursor: pointer;
}

input#slider_histbay{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-historicbaylands {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-historicbaylands label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style historic wetlands control elements */

#historicwetlands_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#historicwetlands_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#historicwetlands_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#historicwetlands_name_holder:hover {
    cursor: pointer;
}

input#slider_histwet{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-historicwetlands {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-historicwetlands label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.pastmenucontainer-spacer{
    position: relative;
    height: 8px;
    width: 337px;
}

/* STYLES FOR PRESENT MENU */

#presentmenu{
    position: absolute;
    top: 73px;
    right: 0px;
    height: 400px;
    width: 373px;
    background-color: #ffffff;
    opacity: 0.9;
    border: 1px solid #000000;
    border-radius: 13px;
    /* font-family: 'Roboto Condensed', sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 22px; */
}

#presentmenucontainer{
    position: relative;
    top: 13px;
    left: 13px;
    width: 337px;
}

.presentmenusectiontitle{
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 750;
    font-size: 16px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-top: 2px;
}

/* style 3D buildings control elements */

#buildings_3d_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#buildings_3d_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#buildings_3d_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#buildings_3d_name_holder:hover {
    cursor: pointer;
}

input#slider_buildings_3d{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-buildings_3d {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-buildings_3d label{
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.presentmenucontainer-spacer{
    position: relative;
    height: 8px;
    width: 337px;
}

/* style local streets at risk control elements */

#ten_ft_streets_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#ten_ft_streets_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#ten_ft_streets_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#ten_ft_streets_name_holder:hover {
    cursor: pointer;
}

input#slider_ten_ft_streets{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-ten_ft_streets {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-ten_ft_streets label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style street names control elements */

#street_names_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#street_names_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#street_names_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#street_names_name_holder:hover {
    cursor: pointer;
}

input#street_names_streets{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-street_names {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-street_names label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style current protection structures control elements */

#protect_structures_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#protect_structures_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#protect_structures_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#protect_structures_name_holder:hover {
    cursor: pointer;
}

input#slider_protect_structures{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-protect_structures {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-protect_structures label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style current wetlands control elements */

#current_wetlands_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#current_wetlands_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#current_wetlands_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#current_wetlands_name_holder:hover {
    cursor: pointer;
}

input#slider_current_wetlands{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-current_wetlands {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-current_wetlands label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style bay fill control elements */

#bayfill_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#bayfill_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#bayfill_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#bayfill_name_holder:hover {
    cursor: pointer;
}

input#slider_bayfill{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-bayfill {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-bayfill label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style waste water facility control elements */

#wastewater_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#wastewater_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#wastewater_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#wastewater_name_holder:hover {
    cursor: pointer;
}

input#slider_wastewater{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-wastewater {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-wastewater label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* STYLES FOR FUTURE MENU */

#futuremenu{
    position: absolute;
    top: 73px;
    right: 0px;
    height: 400px;
    width: 373px;
    background-color: #ffffff;
    opacity: 0.9;
    border: 1px solid #000000;
    border-radius: 13px;
    /* font-family: 'Roboto Condensed', sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 22px; */
}

#futuremenucontainer{
    position: relative;
    top: 13px;
    left: 13px;
    width: 337px;
}

.futuremenusectiontitle{
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 750;
    font-size: 16px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-top: 2px;
}

.futuremenucontainer-spacer{
    position: relative;
    height: 8px;
    width: 337px;
}

/* style 10ft sea level rise control elements */

#SLR_ten_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#SLR_ten_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#SLR_ten_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#SLR_ten_name_holder:hover {
    cursor: pointer;
}

input#slider_SLR_ten{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-SLR_ten {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-SLR_ten label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 8ft sea level rise control elements */

#SLR_eight_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#SLR_eight_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#SLR_eight_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#SLR_eight_name_holder:hover {
    cursor: pointer;
}

input#slider_SLR_eight{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-SLR_eight {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-SLR_eight label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 6ft sea level rise control elements */

#SLR_six_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#SLR_six_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#SLR_six_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#SLR_six_name_holder:hover {
    cursor: pointer;
}

input#slider_SLR_six{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-SLR_six {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-SLR_six label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 4ft sea level rise control elements */

#SLR_four_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#SLR_four_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#SLR_four_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#SLR_four_name_holder:hover {
    cursor: pointer;
}

input#slider_SLR_four{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-SLR_four {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-SLR_four label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style 2ft sea level rise control elements */

#SLR_two_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#SLR_two_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#SLR_two_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#SLR_two_name_holder:hover {
    cursor: pointer;
}

input#slider_SLR_two{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-SLR_two {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-SLR_two label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* style tidal wetlands migration control elements */

#futuretide_ctrl_container{
    height: 22px;
    left: 0px;
    width: 337px;
    z-index: 999999;
    border: 1px transparent #3b3b3b;
    padding-bottom: 1px;
}

#futuretide_op_button {
    position: relative;
    width: 0;
    height: 0;
    top: 5px;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    opacity: 1;
    z-index:99; 
}

#futuretide_name_holder {
    position: relative;
    display: inline-block;
    top: -10px;
    left: 15px;
    height: 22px;
    z-index: 1;
    border: 1px transparent #3b3b3b;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#futuretide_name_holder:hover {
    cursor: pointer;
}

input#slider_futuretide{
    position: relative;
    top: 5px;
    line-height: 16px;
    height: 22px;
    width: 174px;
    z-index: 999;
}

#map-slider-overlay-futuretide {
    position: relative;
    width: 322px;
    height: 22px;
    left: 15px;
    line-height: 22px;
    z-index: 999;
}

#map-slider-overlay-futuretide label {
    position: relative;
    top: -5px;
    padding-bottom: 8px;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* Style lower menu */

#lowermenubar {
    position: fixed;
    z-index: 1000;
    left: 0px;
    padding-left: 26px;
    bottom: 30px;
    height: 48px;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.9;
    line-height: 48px;
}

#lowertitle{
    display: inline;
    float: left;
    vertical-align: middle;
    font-style: bold;
}

.lowertitletext{
    align-items: center;
    color: #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: bold;
    font-size: 22px;
}

.titlelowermenutext{
    align-items: center;
    color: #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 20px;
}

#strategymenu{
    position: relative;
    float: left;
    left: 30px;
    width: 376px;
    height: 48px;
    line-height: 20px;
}

.menutitleuplandupperspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 14px;
    cursor: pointer;
}

.menutitleshorelineupperspacer{
    display: inline;
    float: left;
    width: 126px;
    height: 14px;
    border-right: 1px transparent;
    border-left: 1px transparent;
    cursor: pointer;
}

.menutitleinwaterupperspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 14px;
    cursor: pointer;
}

.menutitleupland{
    float: left;
    display: inline;
    width: 124px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.menutitleshoreline{
    float: left;
    display: inline;
    width: 124px;
    height: 20px;
    text-align: center;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    line-height: 20px;
    cursor: pointer;
}

.menutitleinwater{
    float: left;
    display: inline;
    width: 124px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.menutitleuplandlowerspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 14px;
    cursor: pointer;
}

.menutitleshorelinelowerspacer{
    display: inline;
    float: left;
    width: 126px;
    height: 14px;
    border-left: 1px transparent;
    border-right: 1px transparent;
    cursor: pointer;
}

.menutitleinwaterlowerspacer{
    display: inline;
    float: left;
    width: 124px;
    height: 14px;
    cursor: pointer;
}

/* style down arrows for lower menu */

#menutitleuplandarrow{
    position: absolute;
    right:298px;
    bottom: 48px;
}

#menutitleshorelinearrow{
    position: absolute;
    right:173px;
    bottom: 48px;
}

#menutitleinwaterarrow{
    position: absolute;
    right:49px;
    bottom: 48px;
}

.uparrowdiv{
    height: 0px;
    width: 0px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid #3b3b3b;
    border-top: 13px solid transparent;
}

.menuuplandhover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menuuplandhovershorelinenoborder{
    border-left: 1px solid #ffffff;
}

.menuinwaterhover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menuinwaterhovershorelinenoborder{
    border-right: 1px solid #ffffff;
}

.menushorelinehover{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menushorelinehovershorelinenoborder{
    color: #ffffff;
    background-color: #3b3b3b;
    border-left: 1px solid #3b3b3b;
    border-right: 1px solid #3b3b3b;
}

/* styles for menu click events */

.menuuplandhoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menushorelinehoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

.menushorelinehovernoborderclicked{
    color: #ffffff;
    background-color: #3b3b3b;
    border-left: 1px solid #3b3b3b;
    border-right: 1px solid #3b3b3b;
}

.mtp-border-upland-conform{
    border-left: 1px solid #ffffff;
}

.mtp-border-inwater-conform{
    border-right: 1px solid #ffffff;
}

.menuinwaterhoverclicked{
    color: #ffffff;
    background-color: #3b3b3b;
}

#aboutwebinfo{
    position: relative;
    float: right;
    right: 60px;
    width: 28px;
    height: 48px;
}

#webinfosvgupperspacer{
    position: absolute;
    display: inline;
    width: 28px;
    height: 9px;
    top: 0px;
}

#webinfosvgload{
    position: absolute;
    display: inline;
    width: 28px;
    height: 30px;
    top: 9px;
    background-image: url('Info_icon_reduced.svg');
    background-repeat: no-repeat;
}

#webinfosvgload:hover {
    background-image: url('Info_icon_hover_reduced.svg');
    background-repeat: no-repeat;
    cursor: pointer;
}

#webinfosvglowerspacer{
    position: absolute;
    display: inline;
    width: 28px;
    height: 9px;
    top: 30px;
}

/* style strategy pop up menus */

#uplandmenu{
    position: absolute;
    bottom: 91px;
    left:   274px;
    width: 346px;
    height: 310px;
    padding: 13px;
    background-color: #ffffff;
    opacity: 0.9;
    text-align: left;
    border-radius: 13px;
    border: 1px solid #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: bold;
    font-size: 16px;
}

#shorelinemenu{
    position: absolute;
    bottom: 91px;
    left:   274px;
    width: 346px;
    height: 310px;
    padding: 13px;
    background-color: #ffffff;
    opacity: 0.9;
    text-align: left;
    border-radius: 13px;
    border: 1px solid #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: bold;
    font-size: 16px;
}

#inwatermenu{
    position: absolute;
    bottom: 91px;
    left:   274px;
    width: 346px;
    height: 310px;
    padding: 13px;
    background-color: #ffffff;
    opacity: 0.9;
    text-align: left;
    border-radius: 13px;
    border: 1px solid #000000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-style: bold;
    font-size: 16px;
}

/* style present map menu elements */

#menu_var_present {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 80%;
    border: 1px transparent #3b3b3b;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#menu_var_present div {
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    text-align: left;
}

#menu_var_present div:last-child {
    border: none;
}

#menu_var_present div:hover {
    background-color: #ffffff;
    color: #3b3b3b;
}

#menu_var_present div.active {
    background-color: #ffffff;
    color: #000000;
}

#menu_var_present div.active:hover {
    background: #3b3b3b;
}

/* style future map menu elements */

#menu_var_future {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 80%;
    border: 1px transparent #3b3b3b;
    line-height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#menu_var_future a {
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    text-align: left;
}

#menu_var_future a:last-child {
    border: none;
}

#menu_var_future a:hover {
    background-color: #ffffff;
    color: #3b3b3b;
}

#menu_var_future a.active {
    background-color: #ffffff;
    color: #000000;
}

#menu_var_future a.active:hover {
    background: #3b3b3b;
}

/* set map slider style */

.map-overlay-1908Geological {
    position: relative;
    display: inline;
    width: 75%;
    top: 107px;
    left: 0;
    padding: 10px;
    z-index: 9999;
}

.map-overlay-1908Geological .map-overlay-1908Geological-inner {
    font:bold 14px/20px 'Roboto Condensed', sans-serif;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay-1908Geological label {
    display: block;
    margin: 0 0 10px;
}

.map-overlay-1908Geological input {
    background-color: transparent;
    display: inline-block;
    width: 150px;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

.map-overlay-SP1914 {
    position: relative;
    display: inline;
    width: 75%;
    top: 214px;
    left: 0;
    padding: 10px;
    z-index: 9999;
}

.map-overlay-SP1914 .map-overlay-SP1914-inner {
    font:bold 14px/20px 'Roboto Condensed', sans-serif;
    padding: 10px;
    margin-bottom: 10px;
    background-color: yellow;
}

.map-overlay-SP1914 label {
    display: block;
    margin: 0 0 10px;
}

.map-overlay-SP1914 input {
    background-color: transparent;
    display: inline-block;
    width: 150px;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

.map-overlay-3D_Buildings {
    position: absolute;
    width: 75%;
    top: 321px;
    left: 0;
    padding: 10px;
}

.map-overlay-3D_Buildings .map-overlay-3D_Buildings-inner {
    font:bold 14px/20px 'Roboto Condensed', sans-serif;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay-3D_Buildings label {
    display: block;
    margin: 0 0 10px;
}

.map-overlay-3D_Buildings input {
    background-color: transparent;
    display: inline-block;
    width: 80%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

/* build and style main menu close buttons */

.pastmenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.pastmenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.pastmenuclose:before, .pastmenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.pastmenuclose:before {
    transform: rotate(45deg);
}
.pastmenuclose:after {
    transform: rotate(-45deg);
}

.presentmenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.presentmenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.presentmenuclose:before, .presentmenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.presentmenuclose:before {
    transform: rotate(45deg);
}
.presentmenuclose:after {
    transform: rotate(-45deg);
}

.futuremenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.futuremenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.futuremenuclose:before, .futuremenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.futuremenuclose:before {
    transform: rotate(45deg);
}
.futuremenuclose:after {
    transform: rotate(-45deg);
}

/* build and style lower menu close buttons */

.uplandmenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.uplandmenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.uplandmenuclose:before, .uplandmenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.uplandmenuclose:before {
    transform: rotate(45deg);
}
.uplandmenuclose:after {
    transform: rotate(-45deg);
}

.shorelinemenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.shorelinemenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.shorelinemenuclose:before, .shorelinemenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.shorelinemenuclose:before {
    transform: rotate(45deg);
}
.shorelinemenuclose:after {
    transform: rotate(-45deg);
}

.inwatermenuclose {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    opacity: 0.3;
}
.inwatermenuclose:hover {
    opacity: 1;
    cursor: pointer;
}
.inwatermenuclose:before, .inwatermenuclose:after {
    position: absolute;
    left: 15px;
    top: -5px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #333;
}
.inwatermenuclose:before {
    transform: rotate(45deg);
}
.inwatermenuclose:after {
    transform: rotate(-45deg);
}

/* .mapboxgl-popup { */
/* max-width: 340px; */
/* font: font:bold 12px/16px 'Roboto Condensed', sans-serif !important; */
/* } */