body {
  background-image: radial-gradient(#CCCCCC 9%, #ffffff 11%);
  background-position: 0 0;
  background-size: 60px 60px;
  font-family:'helvetica';
  font-size:12px;
  width:100%; height:100%; 
}
  
 #nav { position:fixed; left:0px; bottom:0px; padding:20px; font-size:16px; font-weight:bold; visibility: hidden; z-index:1000000;  } 
  
.lineRules {  stroke-linecap:  round;  }
.tempSVGSignature { fill:none;}
  
.guideColor { fill:#FFFF33; }  
  
#doAnimation, #doUpdate , #toggleSpeed { cursor:pointer; font-weight:bold; font-size:14px; color:#33333; line-height:20px;  border-bottom: 2px solid transparent; display:inline-block; }
 #doAnimation:hover, #doUpdate:hover , #toggleSpeed:hover {  border-bottom: 2px solid #333333; }
   
#headOutput { position:absolute; left:50%; top:50%; width:1000px; height:1000px; z-index:1; margin-left:-500px; margin-top:-500px; overflow:hidden; overflow:hidden;  }
#headOutputInside { position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:auto; z-index:20; overflow:hidden; }

#signature { position: absolute; right:0px; bottom:0px; width:1000px; z-index:3;  }

#canvasBackground { position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#80bcbc; z-index:1; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

:root {
  --controls-fg: #ffffff;
  --controls-bg: #00ffff;
  --accent: #ff0000;
  --swatch-bg:#ffffff;
}

#controls {  z-index:1000001;  position:fixed; left:0px; top:20px; padding:20px; padding-left:0px; width:200px; background-color:rgba(255,238,238,0.5);  border-top-right-radius: 20px; border-bottom-right-radius: 20px; display:none; }

.mimeartistSwatch { position:relative; float:left; width:10px; height:10px;   margin-left:5px; margin-bottom:10px; cursor:pointer; border-radius:10px; border:4px solid rgba(0,0,0,1); background-color:none; }

.rangeslider { box-shadow:none; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }

.rangeslider__handle { width:20px; height:20px; border:0px; box-shadow:none; background-color:var(--controls-bg); }
.rangeslider--horizontal .rangeslider__handle { top:0px;   }
.rangeslider__fill { background-color:var(--controls-bg); box-shadow:none; border-radius:0px;   }


 .controlLabels { font-weight:bold; padding-left:5px; padding-bottom:10px; color:var(--controls-fg); font-size:10px; line-height:12px;}
  
  .outputText { font-weight:bold;  position: relative; text-align:right; width:40px; color:var(--controls-fg); font-size:8px; top:-30px; left:160px; pointer-events: none; border:0px solid #ff00ff; }
    
  .swatchClass { position:relative; float:left; width:10px; height:10px; margin-left:5px; margin-bottom:10px; cursor:pointer; border-radius:10px; border:4px solid rgba(0,0,0,255); background-color: var(--controls-bg);}
  
  .controlsClass { position:absolute; width:120px; top:20px; padding:0px; border:0px solid #ff00ff; z-index:2; }
  
  
  .numberGuides { background-color:#ff00ff; border:1px solid #ff0000; }
    
  .faceSVG { stroke-width:1; stroke:#F7CEB5; stroke-dasharray:8,3,7,3,7,3,6,3,5,1,3,6,2,1,1,2,3,4,5,3,5,3,2,1,2,3,4,3,2; stroke-linecap: round; z-index:10;}
  
.leftEarSVG, .rightEarSVG { stroke-width:1; stroke:#F7CEB5; stroke-dasharray:8,3,7,3,7,3,6,3,5,1,3,6,2,1,1,2,3,4,5,3,5,3,2,1,2,3,4,3,2; stroke-linecap: round; z-index:10;}
  
.tuftSVG { stroke-linecap:  round; z-index:11; }  
  
.hairSVG { stroke-linecap:  round; z-index:11; }
.hairBSVG {  stroke-linecap:  round; z-index:10; }  
.noseSVG { stroke-linecap:  round;  z-index:21; }
  
.leftEye { stroke-linecap:  round;  z-index:11;}
.rightEye { stroke-linecap:  round; z-index:11; }
  
.leftPupil {  stroke-linecap:  round;  z-index:12;}
.rightPupil {   stroke-linecap:  round; z-index:12; }
  
  #mouthPath { stroke-width:8; stroke:#ff0000;  stroke-linecap: round; fill:none; opacity:.2;   }
  
  #face { position:absolute; left:400px; top:100px; border:0px solid #ff00ff; }

  #faceOutput { position:absolute; left:0px; top:0px; right:430px;  bottom:0px; text-align:center; z-index:1;}
  #faceOutputInside { position:absolute; left:0px; top:0px; border:0px dashed #ff0000; overflow:visible;}
  
  #reference { position:absolute; left:0; top:0; width:1000px; height:1000px; z-index:10; }
  
  #dashStyle {  }
  
  .dashArrayClass { background-color:#e6e6e6; border:0; color:#000000; padding:10px; width:200px; height:30px; font-weight:bold; }
  
  .dottedStyle { display:none; }