/*
Copyright (C) 2015 Sam Parkinson

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

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

body {
  padding: 0;
  margin: 0;
  font-family: sans;
  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;
  pointer-events: none;
}

#canvas {
  /*
  overwrite the definition in sugar-web/graphics/css/sugar.css
  to workaroud a bug affecting webkit on android 4.1/4.2
  https://code.google.com/p/android/issues/detail?id=41312
  */
  overflow-y: visible;
}

.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;

}

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

nav {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;

  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 ul img:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

nav ul img:active {
  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);
}

/*THREE.js Containers */

#scriptingOutput{
  position: absolute;
  z-index: 20;
}

#turtleOutput{
  position: absolute;
  z-index: 0;
}

#mousePositionIndicator{
  position: absolute;
  z-index: 100;
  right: 100px;
  top: 100px;
  color: #fff;
  background-color: #222;
  padding: 10px;
}

#mousePositionIndicator span{
  color: #ff9999;
}