#popdown-palette {
  display: none;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  overflow-y: scroll;
  background: rgba(255, 255, 255, 0.85); }
  #popdown-palette:last-child {
    margin-bottom: 2.5em; }
  #popdown-palette.show {
    display: block; }
  #popdown-palette.show ~ .canvasHolder {
    filter: blur(10px);
    -webkit-filter: blur(10px); }
  #popdown-palette ul {
    display: none; }
  #popdown-palette .palette.show ul {
    display: block; }
  #popdown-palette li {
    list-style: none; }
  #popdown-palette h2 {
    border-bottom: 1px solid #444;
    width: 80%;
    padding: 0 10%; }
    #popdown-palette h2 span {
      vertical-align: 60%; }
    #popdown-palette h2 img {
      display: block;
      float: right; }
  #popdown-palette .palette.show .show-button {
    display: none; }
  #popdown-palette .palette:not(.show) .hide-button, #popdown-palette .palette:not(.show) .popout-button {
    display: none; }

div.back {
  display: block;
  position: fixed;
  height: 2.5em;
  width: 100%;
  top: calc(100% - 2.5em);
  background-color: #999; }
  div.back h2 {
    margin-top: 0.25em;
    border-bottom: none !important;
    color: white; }
  div.back:active {
    background-color: black; }

.canvasHolder {
  transition: 0.75s ease all;
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0; }

.canvasHolder.hide {
  transform: scale(0.24);
  top: 117px;
  left: 1%;
  width: 100vw;
  height: 75vw;
  overflow: hidden;
  z-index: 10;
  background: #99CCFF; }

.canvasHolder.hide canvas {
  width: 100%;
  height: 100%; }

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  background-color: #8bc34a;
  height: 64px;
  width: 100%;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
  font: 32px sans;
  vertical-align: middle;
  line-height: 64px;
  color: white; }
  nav .nav-container {
    padding: 0 12px; }
  nav .logo {
    padding-left: 12px; }
  nav h1 {
    font-size: 32px;
    position: relative;
    top: -12px;
    display: inline; }
  nav img {
    height: 48px;
    width: 48px;
    margin-top: 6px;
    border-radius: 100%; }
    nav imghover {
      background-color: rgba(255, 255, 255, 0.3); }
    nav imgactive {
      background-color: rgba(255, 255, 255, 0.8); }
  nav ul {
    list-style: none;
    text-align: right;
    display: inline; }
    nav ul li {
      dispalay: inline;
      padding-right: 12px;
      float: right; }

.nav-spacer {
  height: 48px; }

.content {
  padding: 0px;
  margin: 0px; }
  .content li {
    display: block;
    list-style: none;
    width: 24%;
    float: left;
    padding-left: 1%; }
  .content li[current=true] img.thumbnail {
    opacity: 0; }

@media (max-width: 500px) {
  .content li {
    width: 49%;
    padding-left: 1%; }

  .canvasHolder.hide {
    transform: scale(0.49); }

  nav h1 {
    display: none; } }
@media (max-width: 800px) and (min-width: 501px) {
  .content li {
    width: 32%;
    padding-left: 1%; }

  .canvasHolder.hide {
    transform: scale(0.32); } }
.content li img.thumbnail {
  background: #96D3F3;
  width: 100%;
  padding: 0; }

.content li .options, .content li .options input {
  text-align: center; }

.planet-content {
  color: #727272; }

.planet-content h2 {
  color: #212121;
  clear: both; }

img.icon {
  border-radius: 100%;
  width: 30px; }

img.icon:hover {
  background-color: rgba(139, 195, 74, 0.3); }

img.icon:hover {
  background-color: rgba(139, 195, 74, 0.8); }

#loading-image-container {
  z-index: 99999; }

body {
  background-color: #99CCFF;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden; }
  body.samples-shown {
    overflow-y: scroll;
    background: white !important; }

input.text {
  background-color: #987aff;
  text-align: center;
  font-weight: bold !important;
  resize: none !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100px; }

input.number {
  background-color: #ff00ff !important;
  text-align: center;
  font-weight: bold !important;
  resize: none !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100px; }

.helpDiv {
  float: right;
  position: absolute;
  margin-top: 57px;
  z-index: -1; }

#canvas {
  overflow-y: visible; }

/*# sourceMappingURL=activity.css.map */