body {
    margin: 0; 
    padding: 0.3vw; 
    padding-top:0; 
    padding-bottom: 0;
}

@media only screen and (max-width: 480px)  {
   #simpolator #scalefct {
       display: none;    
       z-index: 10;
       top: 29.3vw; 
       width: 13vw; 
       border: 1.5px solid black;
   }
   #simpolator canvas#colorscale {
       width: 13.3vw; 
       height: 34.9125vw;
       left: calc(78.7vw + 6px);
       z-index: 10;
       top: 0.4vw; 
       overflow: hidden; 
       padding: 0;
   }
   #simpolator #helppanel {
       font-size: 2.8vw;
   }
}

@media only screen and (min-width: 480px)  {
   #simpolator #scalefct {
       display: block;    
       left: 79.8vw; /* for the case that calc(..) is not supported */
       left: calc(78.5vw + 7.5px); 
       z-index: 10;
       top: 29.3vw; 
       width: 13vw; 
       border: 1.5px solid black;
   }
   #simpolator canvas#colorscale {
       width: 10.8vw; 
       height: 28.35vw;
       left: 79.8vw; /* for the case that calc(..) is not supported */
       left: calc(78.5vw + 7.5px);
       z-index: 10;
       top: 0.4vw; 
       overflow: hidden; 
       padding: 0;
   }
   #simpolator #helppanel {
       font-size: 2.1vw;
   }
}

@media only screen and (min-width: 800px)  {
   #simpolator #helppanel {
       font-size: 1.7vw;
   }
}

#simpolator {
    position: relative; 
    padding: 0; 
    margin-left: 0.1vw; 
    border: 0px solid #ccc; 
    overflow: hidden; 
    width: 100%;
    width: 99vw;
    height: 100%; 
    height: 55.5vw; 
    background: linear-gradient(to bottom, #f2efaf, #afcccc);    
    z-index: 0;
}

#transparentlayer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -9999;
    background: black;
    opacity: 0;
    pointer-events:auto;
}

#simpolator div, #simpolator canvas, #simpolator img {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
}


#simpolator input {
    position: absolute;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 0; 
}


#simpolator #plotarea {
    background: black;
    top: 1%;
    top: 1vw; 
    left: 0; 
    overflow: hidden; 
    width: 73%;
    width: 72vw;
    height: auto;
    padding-bottom: 50%; 
    padding-bottom: 0vw; 
    height: 36vw; 
    z-index: 10;
}

#simpolator canvas { 
    border: 0; 
}

#simpolator #c1 {
    top: 0; 
    left: 0; 
    width: 100%;
    width: 72vw; 
    z-index: 1000;
}

#simpolator canvas#fieldzoom {
    left: -20vw; 
    top: 10vw; 
    height: 18vw; 
    width: 120vw; 
    cursor: pointer; 
    z-index: -20;
    visibility: hidden; 
}

#simpolator canvas#field {
    left: 0; 
    bottom: 0; 
    height: 9vw; 
    width: 60vw; 
    cursor: pointer; 
    z-index: 1000; 
    -webkit-tap-highlight-color: transparent;
}

#simpolator div#fieldwrapper {
    left: 0.25vw; 
    bottom: 0.9vw; 
    height: 9vw; 
    width: 60vw; 
    z-index: 10; 
    overflow: hidden;
    box-shadow: 0px 0px 2px 0px #112;
}

#simpolator .fieldtransition {
    transition: height 120ms linear, width 120ms linear,
                bottom 120ms linear, left 120ms linear;
}

#simpolator div.markers {
    z-index: -10;
    visibility: hidden;
    overflow: visible;
    margin: 0;
    padding: 0;
    width: 0.4vw;
    height: 0;  
    border-right: none;
    border-top: 1.5vw solid rgba(100,100,100,0.15);
    border-left: 2.2vw solid rgba(40,120,40,0.7);
    border-bottom: 1.5vw solid rgba(100,100,100,0.15);
    left: 0.25vw; 
    cursor: pointer;
    display: none;
}

#simpolator div.markers div{
    border: 0;
    margin: 0;
    padding: 0;
    border-left: 0.1vw solid rgba(40,120,40,0.7);
    left: -550%;
    top: -18vw;
    height: 36vw;
}

#simpolator div.markere {
    z-index: -10;
    visibility: hidden;
    overflow: visible;
    margin: 0;
    padding: 0;
    width: 0.4vw;
    height: 0;  
    border-left: none;
    border-top: 1.5vw solid rgba(200,40,40,0.15);
    border-right: 2.2vw solid rgba(120,40,40,0.7);
    border-bottom: 1.5vw solid rgba(200,40,40,0.15);
    right: 0.25vw; 
    cursor: pointer;
    display: none;
}

#simpolator div.markere div{
    border: 0;
    margin: 0;
    padding: 0;
    border-right: 0.1vw solid rgba(120,40,40,0.7);
    right: -550%;
    top: -18vw;
    height: 36vw;
}

#simpolator div.markerpos1 {
    top: 0; 
}

#simpolator div.markerpos2 {
    bottom: calc(50% - 1.5vw); 
}

#simpolator div.markerpos3 {
    bottom: 0;
}

#simpolator div.markerpos4 {
    bottom: calc(50% - 1.5vw); 
}


#simpolator input[type=range]  {  
    background: transparent;
}


#simpolator input[type=range]::-moz-range-thumb {
  border: 1px solid #aaa; 
  border-radius: .8vw;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  height: 60%;
  width: 1.3vw;
}

#simpolator input[type=range]::-moz-range-track {
  border: 1px solid #555;
  background: #aaa;
}

 
#simpolator div.deco {
    left: 0; 
    width: 100%;
    width: 99vw;
    height: 1px; 
    height: 0.15vw; 
    z-index: 10;
}

#simpolator #sliderz {
    right: 0; 
    margin-right: 4px; 
    margin-bottom: 1px; 
    bottom: 0; 
    z-index: 2000; 
    width: 20.8%;
    width: 15vw; 
    height: 7%;
    height: 7vw; 
    max-height: 30px; 
    transform: rotate(0deg); 
    transform-origin: right bottom;
}
#simpolator #sliderzlegenddiv {
    right: 0; 
    margin-right: 4px; 
    margin-bottom: 1px; 
    bottom: 0; 
    z-index: 1900; 
    width: 20.8%;
    width: 15vw; 
    height: 7%;
    height: 7vw; 
    max-height: 30px; 
    transform: rotate(0deg); 
    transform-origin: right bottom;
}

#simpolator #sliderzlegendplus {
    position: absolute;
    display: block;
    right: -2%; 
    margin: 0;
    padding: 0;
    border: 0;
    bottom: -.5vw;
    bottom: calc(-.47vw + 3%); 
    z-index: 1901; 
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 1.85vw;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator #sliderzlegendminus {
    position: absolute;
    display: block;
    left: -2%; 
    margin: 0;
    padding: 0;
    border: 0;
    bottom: -.5vw; 
    bottom: calc(-.47vw + 3%); 
    z-index: 1901; 
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 1.85vw;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator div#veil {
    top: 0; 
    left: 0; 
    width: 100%; 
    width: 72vw;
    height: 100%;
    height: 36vw; 
    z-index: 1500; 
    background: rgb(0,0,0); 
    opacity: 1; color: blue;
}

#simpolator #intensity {
    top: 0vw;
    color: black;
    font-family: Arial,sans-serif;
    font-size: 2.25vw;
}

#simpolator #sliderintdiv {
    top: 3.4vw; 
    left: 2vw; 
    width: 20vw; 
    height: 5.5vw; 
/*    max-height: 34.5px; */
/*    max-height: calc(30px + 1vw); */
    background: #237;
}

#simpolator #wavelength {
    top: 9.7vw;
    left: 0; 
    right: 0;
    color: black;
    font-family: Arial,sans-serif;
    font-size: 2.25vw;
    padding-top: 0.5vw;
    border-top: 0.1vw solid #ccc;
}

#simpolator #sliderlambdadiv {
    top: 13.1vw; 
    left: 2vw; 
    width: 20vw; 
    height: 5.5vw; 
/*    max-height: 34.5px; */
/*    max-height: calc(30px + 1vw); */
    background: #237;
}
#simpolator #recoll {
    top: 19.4vw;
    left: 0; 
    right: 0;
    color: black;
    font-family: Arial,sans-serif;
    font-size: 2.25vw;
    padding-top: 0.5vw;
    border-top: 0.1vw solid #ccc;
}

#simpolator #sliderrecolldiv {
    top: 22.8vw; 
    left: 2vw; 
    width: 20vw; 
    height: 5.5vw; 
/*    max-height: 34.5px; */
/*    max-height: calc(30px + 1vw); */
    background: #237;
}

#simpolator input.slidersettings {
    top: 0.25vw;
    bottom: 0.25vw;
    left: auto;
    right: auto;
    width: 19.7vw; 
    height: 5vw; 
/*    max-height: 30px; */
}

#simpolator div#quantclass {
    top: 29.1vw;
    left: 0; 
    right: 0;
    font-size: 1.9vw; 
    font-family: sans-serif;
    border: 0;
    border-top: 0.1vw solid #ccc;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator input#quantum {
    position: absolute;
    left: 9vw;
    top: 0.75vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator label#forq {
    position: absolute;
    left: 0.2vw;
    top: 0.75vw;
    cursor: pointer;
}

#simpolator input#classical {
    position: absolute;
    left: 8.4vw;
    top: 0.75vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator label#forc{
    position: absolute;
    left: 14vw;
    top: 0.75vw;
    cursor: pointer;
}



#sliderydiv {
    top: 38%;
    top: 37vw;
    left: 73.5%;
    left: 72.3vw; 
    transform: rotate(270deg); 
    transform-origin: left top; 
    width: 36%;
    width: 36vw;
    height: 7.5%; 
    height: 7.5vw; 
    max-height: 32.2px;
    max-height: calc(30px + 0.5vw); 
    background: #237;
    z-index: 10;
}

#slidery {
    top: 37vw; 
    left: 72.55vw; 
    transform: rotate(270deg); 
    transform-origin: left top; 
    width: 36vw; 
    height: 7vw; 
    max-height: 30px;
    z-index: 20;
}

#sliderxdiv {
    top: 37.3vw; 
    left: 0; 
    width: 72vw; 
    height: 8vw; 
    max-height: 34.5px; 
    max-height: calc(30px + 1vw); 
    background: #237;
    z-index: 10;
}

#sliderx {
    top: 0.5vw; 
    left: 0; 
    width: 72vw; 
    height: 7vw; 
    max-height: 30px;
    z-index: 20;
}

#tweakscalediv {
    top: 37.3vw; 
    left: 72.3vw; 
    width: 21vw; 
    height: 8vw; 
    max-height: 34.5px; 
    max-height: calc(30px + 1vw); 
    background: #596; 
    font-family: sans-serif
}

#tweakscale {
    left: 1vw; 
    top: 0.5vw; 
    height: 7vw; 
    max-height: 30px; 
    width: 19vw;
}


#simpolator a#runbutton {
    display: block;
    cursor: pointer;
    color: #333;
}

#simpolator a#runbutton > div {
    background: linear-gradient(to bottom, #aa4444, #ab5555); 
    background: linear-gradient(to bottom, #77d7bb, #88e0cc); 
    box-shadow: 0px 0px 1.5vw 0.5vw #777; 
    border: 0; 
    padding: 2vw; 
    font-size: 2.9vw; 
    border-radius: 1.5vw;  
    font-family: Arial,sans-serif;
    left: 60%;
    left: 60vw;
    top: 20px;
    top: 1.5vw;
    z-index: 2000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator a#runbutton:active > div {
    background: linear-gradient(to bottom, #b55, #b77); 
    background: linear-gradient(to bottom, #8fc, #afd); ;
    box-shadow: 0px 0px 1vw -0.5vw; 
}

#simpolator a#revertbutton {
    display: block;
}

/*#simpolator a#exportbutton {
    display: none;
}
*/

#simpolator a#exportdatabutton {
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#simpolator a.revertinactive {
    cursor: auto;
    color: #888;
}

#simpolator a.revertactive {
    cursor: pointer;
    color: #333;
}

#simpolator a.exportinactive {
    cursor: auto;
    color: #888;
    z-index: -2000;
}

#simpolator a.exportactive {
    cursor: pointer;
    color: #333;
    z-index: 1900;
}

#simpolator a#revertbutton > div {
    border: 0; 
    padding: 1.7vw; 
    border-radius: 1.5vw;  
    font-size: 2.3vw;
    font-family: Arial,sans-serif;
    left: 64.5vw;
    bottom: 2.3vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/*#simpolator a#exportbutton > div {
    box-shadow: 0px 0px 1.5vw -0.5vw; 
    border: 0; 
    padding: .9vw; 
    padding-left: 1.95vw;
    padding-right: 1.95vw;
    border-radius: 1vw;  
    font-size: 2.2vw;
    font-family: Arial,sans-serif;
    left: 83.5vw;
    bottom: 5.3vw;
}
*/

#simpolator a#exportdatabutton > div {
    border: 0; 
    padding: .6vw; 
    padding-left: 1.3vw;
    padding-right: 1.3vw;
    border-radius: 1.5vw;  
    font-size: 2.2vw;
    font-family: Arial,sans-serif;
    left: 62.4vw;
    top: 20px;
    top: .65vw;
    text-align: center;
}

#simpolator a.revertactive > div {
    background: linear-gradient(to bottom, #e7a865, #efe588); 
    box-shadow: 0 0 0.4vw 0.3vw #999;
}

#simpolator a.revertinactive > div {
    background: linear-gradient(to bottom, #bbb, #ccc); 
    box-shadow: 0px 0px 1vw -0.5vw; 
}

#simpolator a.revertactive:active > div {
    background: linear-gradient(to bottom, #f0bb99, #f2eaa7);
    box-shadow: 0px 0px 1vw -0.5vw; 
}

#simpolator a.exportactive > div {
    background: linear-gradient(to bottom, #aa4444, #ab5555); 
    background: linear-gradient(to bottom, #f0d277, #f2e588); 
    background: linear-gradient(to bottom, #e5a875, #ede588); 
    box-shadow: 0px 0px 1.5vw 0.5vw #777; 
    z-index: 1901;
}

#simpolator a.exportinactive > div {
    z-index: -2001;
    color: transparent;
}

#simpolator a.exportactive:active > div {
    background: linear-gradient(to bottom, #f7e799, #faf3a7);
    background: linear-gradient(to bottom, #efbb99, #f0eaa7);
    box-shadow: 0px 0px 1vw -0.5vw #0f0; 
}

#simpolator div#veil {
    transition: opacity 250ms linear;
}

#simpolator #settingsbutton {
    position: absolute; 
    left: 76vw; 
    bottom: 1.75vw; 
    color: #00007a; 
    border: 2px solid transparent; 
    margin: 0;
    padding: .25vw; 
    border-radius: 5vw;
    cursor: pointer;
    width: 6.3vw;
    height: 6.3vw;
    -webkit-tap-highlight-color: transparent;
}

#simpolator #settingsbutton img {
    position: static;
    width: 6.3vw;
    height: 6.3vw;
    border: 0;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator #settingsbutton:active {
    border: 2px solid #aaa;   
    background: #b2c3c3;
}

#simpolator #settingsbutton:active img {
    height: 6.1vw;
    width: 6.1vw;
    margin: 0.1vw;
}

#simpolator div#threaddisplay {
    left: 83.8vw; 
    bottom: 6.1vw; 
    font-size: 2vw;
    border: 1px solid black;
    padding: 1px;
    color: #ddd;
    font-family: Arial,sans-serif;
    z-index: 2000;
    display: none;
    background: #237;
}

#simpolator #settingspanel {
    background: #999;
    background: linear-gradient(to left, #889988, #8a9);
    position: absolute;
    left: 100vw;
    top: 0.6vw;
    right: -27.1vw;
    height: auto;
    bottom: 10.5vw;
    z-index: -10;
    pointer-events: none;
/*    display: none; */
    box-shadow: 0px 0px 4px 3px #5f6f7f;
    visibility: hidden;
}

#simpolator #settingspanel:target {
    z-index: 1000;
    pointer-events: auto;
    display: block;
}

#simpolator a#toggleintervals,a#toggleexport {
    display: block;
    cursor: pointer;
    color: #333;
}

#simpolator a#toggleintervals > div {
    box-shadow: 0px 0px .6vw 0.2vw #777; 
    border: 0; 
    padding: 1.15vw; 
    padding-left: 0; 
    padding-right: 0; 
    font-size: 1.9vw; 
    border-radius: 1.5vw;  
    font-family: Arial,sans-serif;
    text-align: center;
    width: auto;
    left: .8vw;
    right: 12.5vw;
    top: 39.25vw;
    z-index: 2000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator a#toggleexport > div {
    box-shadow: 0px 0px .6vw 0.2vw #777; 
    border: 0; 
    padding: 1.15vw; 
    padding-left: 0; 
    padding-right: 0; 
    font-size: 1.9vw; 
    border-radius: 1.5vw;  
    font-family: Arial,sans-serif;
    text-align: center;
    width: auto;
    left: .8vw;
    right: 12.5vw;
    top: 34vw;
    z-index: 2000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator a.toggleactive > div  {
    background: linear-gradient(to bottom, #e7a865, #efe588); 
}

#simpolator a.toggleinactive > div {
    background: linear-gradient(to bottom, #d7d7bb, #d8e0cc); 
}

#simpolator a#toggleintervals:active > div, #simpolator a#toggleexport:active > div {
    background: linear-gradient(to bottom, #dfc, #dfd); ;
    box-shadow: 0px 0px .4vw -0.5vw; 
}


#simpolator a#donebutton {
    display: block;
    cursor: pointer;
    color: #333;
}

#simpolator a#donebutton > div {
    background: linear-gradient(to bottom, #77d7bb, #88e0cc); 
    box-shadow: 0px 0px 1.5vw 0.5vw #777; 
    border: 0; 
    padding: 1.8vw; 
    font-size: 2.9vw; 
    border-radius: 1.5vw;  
    font-family: Arial,sans-serif;
    left: 14.95vw;
    top: 36.8vw;
    z-index: 2000;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator a#donebutton:active > div {
    background: linear-gradient(to bottom, #8fc, #afd); ;
    box-shadow: 0px 0px 1vw -0.5vw; 
}


#simpolator div#blowupbutton {
    bottom: 6vw; 
    left: 56vw; 
    box-shadow: 0px 0px 4px 1px #336; 
    padding: 1.3vw;  
    cursor: pointer; 
    z-index: 2000; 
    font-size:4vw; 
    color: #444; 
    background: transparent; 
    background: rgba(220,220,240,0.6); 
    border-radius: 5vw;
    width: 4.4vw;
    height: 4.4vw;
    -webkit-tap-highlight-color: transparent;
}

#simpolator #blowupbutton img {
    position: static; 
    width: 4.4vw;
    height: 4.4vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator img#logo1, #simpolator img#logo2 {
    right: 1.3vw; 
    bottom: 1vw; 
    width: 13vw; 
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#simpolator #helpbutton {
    right: 0vw;
    top: 0.2vw;
    padding: 1.7vw;
    padding-left: 2.7vw;
    padding-bottom: 2.2vw;
    font-family: Arial,sans-serif;
    font-size: 2.6vw;
    background: #bbe2bb;
    border-top-right-radius: 0vw;
    border-bottom-left-radius: 20vw;
    border-top-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    border: 0vw solid #555;
    box-shadow: 0 0 0.4vw 0.3vw #999;
    cursor: pointer;
    z-index: 14;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#simpolator #helpbutton:active {
    background: linear-gradient(to bottom, #8fc, #afd); ;
    box-shadow: 0px 0px 1vw -0.5vw; 
}


#simpolator #helppanel {
    z-index: 3000;
    display: none;
    top: 0;
    left: 0;
    width: 72vw;
    bottom: 0;
    font-family: mono;
    background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,1));
    color: #d2f7ff;
    overflow-y: scroll;
    overflow-x: hidden;
}

#simpolator #helppanel span {
    color: white;
    border-radius: 2vw;
    padding: 0vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;

    background: rgba(100,100,100,0.5);
}

#simpolator #closebutton {
    z-index: 4000;
    display: none;
    top: 0.5vw;
    right: 1.2vw;
    padding: 1.8vw;
    padding-top: 2vw;
    padding-left: 2.3vw;
    padding-right: 2.3vw;
    font-size: 3vw;
    font-family: Arial, sans-serif;
    border-radius: 4vw;
    background: rgba(180,226,180,0.82);
    box-shadow: 0px 0px 1.5vw 0.5vw #777; 
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#simpolator #closebutton:active {
    background: linear-gradient(to bottom, #8fc, #afd); ;
    box-shadow: 0px 0px 1.5vw -0.5vw; 
}