main.css

.ui-btn, label.ui-btn {
  font-weight: normal;
}

.ui-mobile label, div.ui-controlgroup-label {
  font-size: 12px;
}

.ui-btn {
  padding: 0.2em 0.2em 0.2em 2.5em;
}

.ui-slider-track {
  height: 5px;
  margin: 0px;
}

.ui-slider-track .ui-btn.ui-slider-handle {
  height: 15px;
  width: 15px;
  top: 300%;
  margin-left: -8px;
}

.ui-checkbox {
  margin: 3px 0px;
}

input.ui-slider-input {
  display: none !important;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
}

input[type="radio"] {
  margin: 2px;
  vertical-align: middle;
  font-size: 12px;
}

label {
  text-shadow: none;
}

p {
  text-shadow: none;
  font-size: 12px;
  font-weight: bold;
}

hr {
  height: 1px;
  border: none;
  background-color: rgba(80,80,80,1);
  margin: 10px;
}

img {
  vertical-align: middle;
}

#map {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#runoff-legend {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}

#logo {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}

#layer-name-hist-1, #layer-name-hist-2 {
  padding-top: 5px;
  position: absolute;
  text-shadow: none;
  font-size: 12px;
}

#div-slider-trans-1 {
  left: 230px;
}

#div-slider-trans-2 {
  left: 510px;
}

#div-slider-leg-trans-1, #div-slider-leg-trans-2, #div-slider-leg-trans-3, #div-slider-leg-trans-4, #div-slider-leg-trans-5, #div-slider-leg-trans-6 {
  width: 60px;
  margin-left: 218px;
  margin-top: -30px;
  position: absolute;
  z-index: 10;
}

#legend-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 101;
  cursor: pointer;
}

#legend {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  top: 0px;
  right: 0px;
  font-size: 12px;
  width: 300px;
  z-index: 100;
  padding: 5px;
}

#close-trans {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 1000;
  cursor: pointer;
}

.div-slider-layer {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  width: 270px;
  height: 100px;
  padding: 10px;
  z-index: 100;
}

#div-slider-layer-1 {
  top: 10px;
  left: 50px;
}

.div-slider-trans {
  width: 80px;
  position: absolute;
  background: rgba(255,255,255,.0);
  height: 30px;
  top: 15px;
  z-index: 100;
}

.legend-div {
  background: rgba(255, 255, 255, 0.6);
  right: 10px;
  width: 290px;
  padding: 2px 5px;
}

.legend-div .ui-slider {
  margin: 0.5em !important;
}

.icon {
  display: inline-block;
  margin: 2px;
  height: 16px;
  width: 16px;
  background-color: #ccc;
}

.label-radio {
  display: inline !important;
}

.legend-text {
  display: inline;
  padding-left: 8px;
  vertical-align: middle;
  font-weight: normal;
}

.slider-ticks {
  position: relative;
  height: 8px;
  margin-top: -20px;
}
.slider-ticks .tick {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 2px solid white;
}
.slider-ticks .tick-1 {
  left: 0%;
}
.slider-ticks .tick-2 {
  left: 6.6%;
}
.slider-ticks .tick-3 {
  left: 13.2%;
}
.slider-ticks .tick-4 {
  left: 19.8%;
}
.slider-ticks .tick-5 {
  left: 26.4%;
}
.slider-ticks .tick-6 {
  left: 33%;
}
.slider-ticks .tick-7 {
  left: 39.6%;
}
.slider-ticks .tick-8 {
  left: 46.2%;
}
.slider-ticks .tick-9 {
  left: 52.8%;
}
.slider-ticks .tick-10 {
  left: 59.4%;
}
.slider-ticks .tick-11 {
  left: 66%;
}
.slider-ticks .tick-12 {
  left: 72.6%;
}
.slider-ticks .tick-13 {
  left: 79.2%;
}
.slider-ticks .tick-14 {
  left: 85.8%;
}
.slider-ticks .tick-15 {
  left: 92.4%;
}
.slider-ticks .tick-16 {
  left: 99%;
}

.slider-labels {
  position: relative;
  text-shadow: none;
  height: 25px;
}
.slider-labels .label {
  position: absolute;
  top: 6px;
  font-size: 9px;
  margin-left: -4%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}
.slider-labels .label-1 {
  left: 0%;
}
.slider-labels .label-2 {
  left: 6.6%;
}
.slider-labels .label-3 {
  left: 13.2%;
}
.slider-labels .label-4 {
  left: 19.8%;
}
.slider-labels .label-5 {
  left: 26.4%;
}
.slider-labels .label-6 {
  left: 33%;
}
.slider-labels .label-7 {
  left: 39.6%;
}
.slider-labels .label-8 {
  left: 46.2%;
}
.slider-labels .label-9 {
  left: 52.8%;
}
.slider-labels .label-10 {
  left: 59.4%;
}
.slider-labels .label-11 {
  left: 66%;
}
.slider-labels .label-12 {
  left: 72.6%;
}
.slider-labels .label-13 {
  left: 79.2%;
}
.slider-labels .label-14 {
  left: 85.8%;
}
.slider-labels .label-15 {
  left: 92.4%;
}
.slider-labels .label-16 {
  left: 99%;
}

@media screen and (max-width: 960px) {
  #legend {
    display: none;
  }
}
@media screen and (min-width: 961px) {
  #legend {
    display: block;
  }
}
@media screen and (max-width: 960px) {
  #legend-icon {
    display: block;
  }
}
@media screen and (min-width: 961px) {
  #legend-icon {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  #close-trans {
    display: block;
  }
}
@media screen and (min-width: 961px) {
  #close-trans {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  #slider-trans-layer {
    display: block;
  }
}
@media screen and (min-width: 961px) {
  #slider-trans-layer {
    display: block;
  }
}