* {
  box-sizing: border-box;
}

body {
  background-color: #1A1A1A; //from nyt kepler
  overflow: hidden;
  height: 100%;
  color: #FFF;
  -webkit-transition:color 0.2s, background-color 0.2s, fill 0.2s, -webkit-transform 0.2s;
  transition:color 0.2s, background-color 0.2s, fill 0.2s;
}

.onlight,
.onlight .asteroid-rings,
.onlight .moon,
.onlight .small,
.onlight .asteroid,
.onlight .moon-orbit,
.onlight .label-line,
.onlight .ruler-label,
.onlight .x.axis,
.onlight .tick,
.onlight .ruler {
  stroke: #111;
  background-color: #fff;
  color: #222;
}

.onlight .asteroid,
.onlight .big {
  fill: #222;
}

.onlight .huge {
  fill: darkred;
  stroke: darkred;
}

.onlight.show-rings-new .new {
  fill: #FF7200;
  stroke: #FF7200;
  color: #FF7200;
}

.x.axis {
  fill: #AAA;
  font-size: 10px;
}

.x.axis .domain {
  display: none;
}

.x.axis .tick {
  stroke: #AAA;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

circle.earth {
  fill: #4118DC;
  stroke: #00D100;
  stroke-width: 2px;
}

.moon {
  fill: #DFDFDF;
  stroke-width: 2px;
  stroke: #FFF;
}

.asteroid {
  fill: #CCC;
  stroke: #CCC;
  stroke-width: 1px;
}

.asteroid-rings, .asteroid-rings-huge {
  fill: #fff;
  fill-opacity: 0.1;
  stroke: #FFF;
  stroke-width: 1px;
  display: none;
}

.controls {
  list-style-type: none;
}

.controls li {
  margin-bottom: 0px;
  line-height: 10px;
}

.controls em {
  font-size: 12px;
}

/* !important needed since hover hides/shows rings as well, needs to be overriden 
   in case of rings being shown and hover at same time */
.show-rings-big .asteroid-rings-big, .show-rings-big .asteroid-rings-huge {
  display: block !important;
}

.show-rings-huge .asteroid-rings-huge {
  display: block !important;
}

.show-rings-new .asteroid-rings-new {
  /*display: block !important;*/
}

.show-rings-big .asteroid:not(.huge), .show-rings-huge .asteroid:not(.huge) {
  opacity: 0.5;
}

.huge {
  fill: #AD2929;
  stroke: #AD2929;
}

.big {
  fill: #CCC;
  stroke: #BBB;
}

.show-rings-new .new {
  fill: #79A226;
  color: #79A226;
  stroke: #79A226;
}

.small {
  stroke: #555;
  fill: #999;
}

.selected {
  stroke-width: 5px;
}

.moon-orbit {
  fill: none;
  stroke-width: 1px;
  stroke: #AAA;
  stroke-dasharray: 1,3;
}

#sky {
  border: 1px dotted #AAA;
  /*height: 70%;*/
  width: 100%;
  /*margin-top: 50px;*/
  bottom: 0;
  left: 0;
  right: 0;
}

.label-line {
  stroke: #AAA;
  stroke-width: 1px;
  stroke-dasharray: 1,1;
  fill: none;
}

line.guide {
  stroke: #AAA;
  stroke-dasharray: 2, 1;
}

line.guide-light {
  stroke: #444;
  stroke-dasharray: 2, 1;
}

line.ruler {
  stroke: #AAA;
  stroke-dasharray: 1,1,3,1;
}

text.ruler-label {
  fill: #AAA;
  font-size: 12px;
  stroke: none;
  font-family: "source-code-pro", monospace;
}

.center {
  text-align: center;
}

.description {
  text-align: justify;
}

#metadata {
  padding: 0 20px;
  font-size: 0.85em;
}

/* Larger than tablet */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
  #metadata {
    font-size: 0.85em;
  }

  .ticks {
    font-size: 11px;
  }

  .legend {
    transform: scale(0.68);
    margin-left: -20px;
  }

  .controls, .controls em {
    font-size: 0.88em;
  }

}

@media (min-width: 550px) and (max-device-width : 1024px)  {
  h2 {
    font-size: 3.5rem;
  }
  .legend {
    transform: scaleX(0.7)scaleY(0.8);
    margin-left: -60px;
  }
  .center {
    width: 60% !important;
  }
  .key {
    position: absolute;
    top: 160px;
    /*text-align: left !important;*/
    right: 20px;
  }
  #viz {
    min-height: 500px;
  }
}



.right {
  text-align: right;
}

.voronoi {
  fill: transparent;
  stroke-width: 1px;
  stroke: none;
}

.links {
  position: absolute;
  bottom: 5px;
  right: 10px;
  left: 0;
}

.links ul {
  list-style-type: none;
}
.links ul li {
  float: right;
  margin-left: 20px;
  font-size: 11px;
}

.links .control input {
  display: none;
}

.links .right {
  float: right;
}

.links .help {
  font-size: 11px;
}
.sources {
  z-index: 1010101;
}

.popover {
  position: absolute;
  pointer-events: none;
  font-size: 12px;
  z-index:101011101;
  padding: 10px;
  display: none;
  background-color: white;
  color: #111;
  box-shadow: #333 1px 1px 7px;
  border-radius: 2px;
}

.popover strong {
  font-size: 1.1em;
}

.popover .name {
  padding: 4px 2px;
  border-bottom: 1px dashed #999;
  margin-bottom: 5px;
}

.warning {
  display: block;
}

#sky {
  display: none;
}

@media (min-width: 550px) {
  .warning {
    display: none;
  }

  #sky {
    display: block;
  }

  body {
    line-height: 1em;
  }
}

.widget {
  border: none;
  z-index: 1010212;
  position: absolute;
  width: 400px;
  font-size: 1.1rem;
  top: 200px;
  height: 500px;
  display: none;
}

.show-widget .widget {
  display: block;
  visibility: visible;
}

.legend {

}

.asteroid-labels {
  fill: #FFF;
  font-size: 10px;
}

.legend text {
  fill: #FFF;
}

#ticks {
  position: relative;
  margin-top: 25px;
  width: 100%;
  height: 30px;
  border: 1px dotted #AAA;
  border-bottom-width: 0;
}

.ticks {
  position: absolute;
  bottom: 0px;
}