body{
  font-family: sans-serif;
  font-size: 10px;
  margin: 0;
  background-color: #222;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
  cursor: default;
  min-width: 1000px;
}

.clear{
  clear: both;
}

.modules{
  font-size: 0;
  padding:5px;
}

.module{
  float: left;
  font-size: 10px;
  margin: 5px;
  color: white;
  border-radius: 5px;
  overflow: hidden;
}

.module .title{
  background-color: #333;
  color: #999;
  padding: 10px;
  text-align: center;
}

.module .content{
  padding: 10px;
  background-color: #555;
}

.colorPreviewHolder{
  height: 50px;
  background-color: white;
  margin-top: 5px;
  width: 100%;
  background-image: url(alpha.png);
  background-position: center;
}

#colorPreview{
  width: 100%;
  height: 100%;
}

.module input[type=number]{
  color: white;
  background-color: #444;
  border: 0;
  padding: 5px;
  font-size: inherit;
}

.module input[type=range]{
  cursor: ew-resize;
}

.module label{
  display: block;
}

.presets:link, .presets:visited, .layerFunctions a:link, .layerFunctions a:visited{
  display: inline-block;
  color: #DDD;
  text-decoration: none;
  background-color: #666;
  padding: 5px 7px;
  margin-bottom: 3px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.presets:hover, .layerFunctions a:hover{
  color: white;
  background-color: #777;
}

#layers{
  padding-top: 5px;
  height: 200px;
  overflow: auto;
}

.layer{
  background-color: #444;
  margin-bottom: 1px;
}

.layer.selected{
  background-color: rgb(100, 200, 100);
}

.visibilityToggle{
  background-image: url(eye.png);
  background-size: 25px auto;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  opacity: 0.1;
  float: left;
  transition: opacity 0.2s;
  cursor: pointer;
}

.visibilityToggle:hover, .visibilityToggle.visible:hover{
  opacity: 0.5;
}

.visibilityToggle.visible{
  opacity: 1;
}

.layerName{
  float: left;
  box-sizing: border-box;
  width: calc(100% - 40px);
  height: 100%;
  padding: 14px 10px;
  background-color: transparent;
  color: white;
  border: 0;
  font-size: inherit;
  cursor: pointer;
  outline: none;
}

#canvases{
  margin: 50px auto;
  margin-bottom: 200px;
  background-color: white;
  cursor: crosshair;
  box-shadow: 0 0 20px black;
  position: relative;
  height: 800px;
  width: 800px;
}

canvas{
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s;
}

canvas.guides{
  z-index: 100;
}

td{
  vertical-align: top;
}

.colorPresets{
  padding-top: 10px;
}

.colorPresets a:link, .colorPresets a:visited{
  display: inline-block;
  width: 20%;
  height: 30px;
  float: left;
}

input.action, .action:link, .action:visited{
  display: block;
  border: 0;
  margin: 0;
  text-decoration: none;
  color: white;
  padding: 0;
  padding: 10px;
  background-color: #444;
  color: #DDD;
  margin-bottom: 1px;
}

.action:hover{
  background-color: #333;
  color: white;
}