/***********************************************
	Resource: runs.css
***********************************************/



body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #666;
  margin: 0;
}
.sliderBarCont {
  background: none;
  position: relative;
  width: 30em;
  height: 1em;
  margin:  .2em 0 .3em 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.sliderBar {
  width: 100%;
  height: .4em;
  background: linear-gradient(#B2B2B2, #888888);
  position: absolute;
  left:0;
  top:.3em;
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.slider {
  background: #B2B2B2;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1em;
  -webkit-border-radius: 1em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  background: radial-gradient(#B2B2B2, #888888);
  border: solid .1em #888888;
  cursor:default;
}


#sliderR .sliderBar {
  background: linear-gradient(red, #990000);
}
#sliderR .slider {
  background: radial-gradient(red, #990000);
  border-color: #990000;
}
#sliderG .sliderBar {
  background: linear-gradient(green, #004700);
}
#sliderG .slider {
  background: radial-gradient(green, #004700);
  border-color: #004700;
}
#sliderB .sliderBar {
  background: linear-gradient(blue, #000080);
}
#sliderB .slider {
  background: radial-gradient(blue, #000080);
  border-color: #000080;
}


polyline {
    fill:none;
    pointer-events:stroke;
}
polyline:hover {
  stroke-opacity: 1;
}
.color-swab {
  position: relative;
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  margin-right: .5em;
  border: solid white 0.1em;
  border-radius: 1em;
  top: 0.15em;
  position: absolute;
}
.ui-frame {
  z-index: 9999999;
  position: absolute;
  background-color: rgba(100, 100, 100, 0.5);
  top: 2em;
  right: 2em;
  border: solid white .1em;
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}
#settings.state0 {
  width: 4em;
  height: 4em;
  border-radius: 2em;
}
#settings.state1 {
  width: 30em;
  /*height: 30em;*/
  border-radius: .5em;
  padding: 2em;
}
#settings.state0 .frame-main {
  visibility: hidden;
}
.label {
  margin-top: 1em;
  color: white;
}

#color-node {
  width: 10em;
  height: 10em;
}
.rainbowColorSwatches {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.rainbowColorSwatches div {
  display: table-cell;
  height: 2em;
}

.frame-top {
  font-size: 4em;
  color: white;
  position: absolute;
  left: .2em;
  top: -0.05em;
}

#downloadKML {
  text-decoration: none;
  color: inherit;
}
.colorizable-item {
  position: relative;
  padding: .3em .2em .3em .2em;
  margin: .2em 0 0 0;
  color: white;
  /*padding: 0 .5em 0 .5em;*/
}
.colorizable-text {
  margin-left: 2em;
}
.colorizable-item:hover {
  background-color: rgb(200,200,200);
  color: rgb(50,50,50);
  border-radius: 0.2em;
  font-weight: bold;
}
.colorizable-selected {
  background-color: rgb(150,150,150);
  border-radius: 0.2em;
}
#colorizables {
  margin-bottom: 1.5em;
}
#RgbColorSelector {
  margin-bottom: 1em;
}
.runs-button {
  border: solid rgb(200,200,200) .1em;
  border-radius: .3em;
  padding:.2em .3em .2em .3em ;
  display: inline-block;
  background-color: rgb(150,150,150);
  margin: .1em;
}
.runs-button:hover{
  background-color: white;
  color: black;
}
#full-screen {
  position: absolute;
  top: 1em;
  right: 1em;
}
#svgMap {
  visibility: hidden;
}
#presets {
  margin-bottom: 2em;
  display: block;
  /*float: right;*/
}
label {
  float: left;
  margin-right: .5em;
}
select {
  font-size: 1em;
  background-color: rgb(200,200,200);
  top: -.2em;
  position: relative;
}
#latLon {
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: black;
  width: 20em;
  height: 2em;
  padding-top: 1em;
  text-align: center;
  border-radius: 0 .5em 0 0;
  font-family: Andale Mono;
  color:white;
}


.ContMenu {
  z-index: 99999999;
  list-style-type: none;
  margin:0;
  padding:.5em 0 .5em 0;
  border-style:solid;
  border-width:0 .1em .1em .1em;
  border-radius: .5em;
  -webkit-border-radius: .5em;
  box-shadow: .2em .2em 2em rgb(20,20,20);
  cursor:default;
  position:absolute;
  display:none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ContMenu {
  border-color:#CBCBCB;
  background-color:#F2F2F2;
}
.ContMenu li {
  padding: .1em 1em .1em 1em;
  font-family:Arial, Helvetica, sans-serif;
  width: 16em;
}
.ContMenu li:hover {
  background: #005CE6;
  color:#F2F2F2;
}

.settings {
  width: 2em;
  height: 2em;
  position: absolute;
  right: 1em;
  top: 1em;
}

polyline {
stroke-linejoin:round;
stroke-opacity:0.1;
stroke-width:0.7291666666666666px;
stroke-linecap:round;
}
.user4 {stroke: rgb(61,82,128);
}
.user7 {stroke: rgb(196,0,185);
}