/* MAIN MAP */ #mapContainer { width: 100%; height: 100%; } .gratLines{ stroke:#FFF6E5; } .gratBackground{ fill:#E3CDA4; /* #7ECEFD; */ } .bentities{ stroke: black; fill:#3E454C; opacity:0.6; stroke-width:0.5px; cursor: default; } .bentities:hover { stroke: white; } .water{ fill:blue; } /* LAYER CONTROL */ .layer-titles{ color:black; padding:0; font-size:16px; margin-top:0px; width:100px; display:inline; } /* ZOOM */ #zoom_control{ position: absolute; top:10px; left:10px; background-color: none; height:50px; width:90px; } #zoom-in{ position: absolute; top:0px; left:0px; background: url("../img/plus.png") no-repeat; width: 40px; height:40px; } #zoom-out{ position: absolute; top:0px; left:50px; background: url("../img/minus.png") no-repeat; width: 40px; height:40px; } #zoom-in:hover{ background:url("../img/plus2.png") no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; } #zoom-out:hover{ background:url("../img/minus2.png") no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; } /* INFOLABEL */ .infolabel{ position:absolute; top:80px; /* 40px at corner */ right:100px; width:300px; height:110px; z-index:10000; background-color:black; color:white; font-family: 'Dosis', sans-serif; text-align: center; pointer-events: none; } .infolabel h4{ font-size:20px; important } /* INFO PANEL (ON CLICK) */ .infopanel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0,0,0,0.3); } .infopanel{ position:absolute; width: 40%; min-width:350px; margin-left:35%; margin-right:25%; margin-top:150px; height:500px; background-color: #222; color:white; font-family: 'Dosis', sans-serif; text-align: center; z-index:9999; border-radius:10px; background:url("../img/ant_bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; } .close-info{ opacity:1; color:white; background-color:none; z-index:101; position:absolute; width:50px; height:50px; top:0; right:5px; padding:5px; font-size:30px; } .close-info:hover{ cursor:pointer; color:gray; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .infopanel-content { height: 100%; overflow: auto; } .infopanel-content ul{ margin-left:40%; } .infopanel-content li{ list-style: none; text-align: left; font-style: italic; } .infopanel-content li:hover{ cursor:pointer; opacity:0.7; } .infopanel-content h4{ text-align:center; padding-top:5px; padding-bottom:5px; margin-bottom:20px; text-transform: uppercase; } .total{ font-size:16px; text-transform: uppercase; } .map-this-bentity-link{ font-family: Antenna,Helvetica,sans-serif; text-align: center; padding-top: 16px; padding-bottom: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 1.5; text-transform: uppercase; height: 40px; width: 200px; background: #F05253; color: white; border: solid 1px black; border-radius: 40px; margin-bottom:10px; margin-top:10px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; transition: all 200ms ease; } .bentity-link-wrapper{ margin-top:20px; } .species-list{ margin-top:20px; } .species-list li{ margin-left:-20px; } .loading{ margin-bottom:10px; margin-top:20px; } .record-list{ margin-top:20px; } .record-list li{ margin-left:-200px; margin-right:80px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } #data-availability{ position: absolute; top: 40px; right: 10px; font-family: Antenna,Helvetica,sans-serif; padding-top: 10px; padding-bottom: 12px; padding-left: 6px; padding-right: 6px; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 1.5; text-transform: uppercase; height: 40px; width: 120px; background: none; color: #F05253; border: solid 1px #F05253; border-radius: 40px; margin-bottom: 10px; margin-top: 12px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; transition: all 200ms ease; } /* LEGEND */ /* #species-legend > .colorBox:nth-of-type(1){ color:red; } */ .legendTooltip{ width:200px; /* background-color:white; */ color:black; background: rgba(255,255,255,0.9); position:absolute; margin-left:60px; margin-top:-40px; z-index:9999999; border-radius:5px; padding-left:5px; padding-right:5px; text-align:center; } #species-legend{ position:absolute; margin-top:20px; margin-left:10px; left:10; top:100; background-color:none; width:200px; height:200px; } .colorbox{ width:50px; height:25px; margin-top:4px; border: 1px solid black; display: inline-block; margin-right: 20px; vertical-align: middle; } .legendRow { color: white; vertical-align: middle; } .legendRow:last-of-type{ margin-bottom:40px; } .categoryName{ color:white; margin-top:11px; margin-left:30px; float:right; } #diversity-subfamily-legend-title{ color:white; font-family: 'Dosis', sans-serif; text-align: center; width:200px; font-size:14px; padding-top:4px; margin-left:10px; margin-top:20px; position:absolute; } #diversity-subfamily-legend{ position:absolute; margin-top:50px; } #diversity-genus-legend-title{ color:white; font-family: 'Dosis', sans-serif; text-align: center; width:200px; font-size:14px; padding-top:10px; margin-left:10px; margin-top:4px; position:absolute; } #diversity-genus-legend{ position:absolute; margin-top:50px; } #diversity-bentity-legend-title{ color:white; font-family: 'Dosis', sans-serif; text-align: center; padding:10px; font-size:14px; margin-left:20px; margin-top:20px; position:absolute; } #diversity-bentity-legend{ position:absolute; margin-top:60px; } /* media query */ @media all and (max-width: 1300px) { .infopanel{ position:absolute; margin-top:100px; height:400px; } .infopanel-content ul{ margin-left:35%; } .record-list li{ margin-left:-100px; margin-right:80px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } } @media all and (max-width: 1100px) and (min-width: 801px) { .infopanel{ position:absolute; margin-top:100px; height:400px; } .infopanel-content ul{ margin-left:30%; } .infopanel-content{ font-size:12px; } } @media all and (max-width: 1000px) and (min-width: 801px) { .record-list li{ margin-left:-80px; margin-right:40px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } } @media all and (max-width: 800px) and (min-width: 621px) { .infopanel{ margin-left:20%; } .infopanel-content ul{ margin-left:30%; } .infopanel-content{ font-size:12px; } .record-list li{ margin-left:-80px; margin-right:40px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } } @media all and (max-width: 620px) and (min-width: 501px) { .infopanel{ margin-left:20%; } .infopanel-content{ font-size:12px; } .record-list li{ margin-left:-80px; margin-right:40px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } } @media all and (max-width: 500px) { .infopanel-content ul{ margin-left:30%; } .infopanel-content h4{ margin-top:20px; padding:10px; } .infopanel-content{ font-size:12px; } .infopanel{ margin-left:10%; } .infolabel{ top:450px; left:60px; } #species-legend{ margin-left:160px; margin-top:-380px; /* to be below selected species without covering too much of map */ } #species-legend span{ text-shadow: 1px 2px 3px black; } #diversity-genus-legend{ display:none; } #diversity-subfamily-legend{ display:none; } #diversity-bentity-legend{ display:none; } #diversity-subfamily-legend-title{ display:none; } #diversity-genus-legend-title{ display:none; } #diversity-bentity-legend-title{ display:none; opacity:0; } .categoryName{ display:none; } .record-list li{ margin-left:-100px; margin-right:20px; font-style: normal; } .record-list li:hover{ cursor:auto; color:white; opacity:1; important } ul li span:first-of-type { float: left; width: 90px; } .gabi_acc{ margin-left:-20px; font-weight:400; } .type_data{ } .short_citation{ margin-left:20px; width:200px; } }