html{
  font-family: 'Actor';
  line-height:1.5em;
  margin:5vh 10vw 0vh 5vw;
}

h2{
  margin-top:5em;

}
.code{
  font-family: monospace;
  background-color:silver;
  border:1px solid black;
  border-radius: 1vw;
  padding:2em;
  font-size:90%;
  font-weight:700;
  max-width:70%;

}

#epicycle-intro {
  z-index:100;
  position:absolute;
  top:10vh;
  left:10vw;
  height:55vh;
  width:55vw;
  background-color:silver;
  opacity:100%;
  border:2px solid silver;
  border-radius: 1vw;
  padding: 1vw;
  font-size:110%;
  font-style:italic;
  color:tomato;

}
#epicycle-intro-img{
  height:30vh;
  width:30vw;
}
.epicycle-help {
  font-size:80%;
  font-style:italic;

}
.epicycle-help-intro {
  font-size:90%;
  font-style:italic;

}

.epicycle {
  left:0px;
  right:0px;
  z-index:22;
  /* width and height position and overflow set in epicycle -program. NOT HERE */
}

.epicycle-left{
  float:left;
}
.epicycle-right{
  float:right;
}
.epicycle-center{
  text-align: center;
}
.epicycle-clear{
  clear:both;
}
.epicycle-tab2{
  margin-left:2em;
}
.epicycle-tab1-right{
  margin-right:1em;
}

.epicycle-tab1{
  margin-left:1em;
}
.epicycle-width5{
  min-width:5em;
}
.epicycle-width6{
  min-width:6em;
  max-width:6em;
 overflow:hidden;
}

.epicycle-top-margin1{
  margin-top:1em;
}
.epicycle-bottom-margin1{
  margin-bottom:1em;
}
.epicycle-top-margin2{
  margin-top:2em;
}
.scaledFont80{
  font-size:80%;
}
.scaledFont60{
  font-size:60%;
}

.image-small{
  width:1em;
  margin:auto;
}
.image-small:hover{
  width:1.2em;
  margin:0.1em;
}
.image-large-box{
  width:2.5em;
  margin:0.2em;
  overflow:hidden;
}
.image-large{
  width:2.2em;
  padding:0.1em;
}
.image-large:hover{
  width:2.2em;
  padding:0.0em;
}
.btn-width{
  width:6em;
  max-width:6em;
  min-width:6em;
  overflow:hidden
}
.epicycle-blueborder{
  border:1px solid blue;
}
.epicycle-blackborder{
  border:1px solid black;
}
.epicycle-redborder{
  border:1px solid red;
}
.epicycle-control-column-left{
  min-width:60%; max-width:60%;
}
.epicycle-control-column-right{
  min-width:30%; max-width:30%;
}
.epicycle-hidden{
  height:0px;
  visibility:hidden;
}
.epicycle-visible{
  height:auto;
  visibility:visible;
}
.epicycle-height-changeable{
  position:relative;
/* height changeble elemnts   */
}



#epicycle-leverarms-div, #epicycle-common-div{
  height:auto;
/*   min-height:40vh; */
}

/*  leverarm control panel begin*/

/* Tämän korkeus määrää canvaasin neliön sivun pituuden.
 * Pituus saadaan kertomalla tämä pituus vakiolla
 */
#leverarm-frame{
  text-align: center;
  width:100%;
  height:80vh;
  overflow:auto;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */

}
.epicycle-action{
  font-size:90%;
  width:20vw;

}
.epicycle-help-1{
  width:5vw;
}
.epicycle-action::after{
  content: " \f0d7";
  border: none;
  font-family: 'FontAwesome';
  font-size:120%
}

.la-canvas-div-center{
  border:1px solid yellow;
  display: inline-block;  /* Muuten ei ole horisontaalisesti keskitetty */
}

.la-canvas{
  /* width and height set in .js */
}
#leverarm-JSON-div{
  font-size:80%;
  font-family:monospace, monospace;
  position:absolute;
  text-align:left;
  z-index:100;
  background-color:white;
  border:2px solid black;
  padding:2em;
  border-radius:2em;
  overflow:auto;

}
#leverarm-frame-div-left{
  margin:1em;
}
#leverarm-frame-div-right{
  margin:1em;
  max-width:15vw;
  max-height:15em;
  overflow:auto;

    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

#leverarm-frame-div-right::-webkit-scrollbar, #leverarm-frame::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.la-buttons-div{
  position:relative;
  width:100%;
  height:40%;
}

.arm-point{
  width:5em;
  height:5em;
  overflow:visible;
  border:1px solid black;
  border-radius: 10%;
  z-index:20;
}
.arm-remove-image{
  margin-top:0.5em;
  text-align:right;
}

.arm-point-title{
  z-index:19;
  background-color: silver;
}

.arm-point-cell{
  width:5em;
  z-index:21;
}
.arm-point-sight{
  background-color:CadetBlue;
  padding-top:0.15em;
  text-align:center;
  width:2em;
  height:2em;
  overflow:hidden;
  border:1px solid black;
  border-radius:40%;
}

.movable{
  position:absolute;
}


.button-box{
  width:auto;
  max-height:15vh;
}


/*  leverarm control panel end */

/*  common values panel start */
#epicycle-common-text, #epicycle-par-text{
  font-size:80%;
  font-family:Courier;
  font-weight:700;
  min-height:30em;
  max-height:30em;
  min-width:14em;
  width:15em;

}
code{
  font-size:80%;
  font-family:monospace, monospace;
  font-weight:700;
  min-height:30em;
  max-height:30em;
  min-width:20em;
  width:12em;

}
.tomato-background{
  background-color:tomato
}
.freeze-background{
  background-color:LightBlue;
  color:silver
}
/*  common values panel end */

/*library begin*/

#library-frame{
}
#epicycle-library-div{
/*  border:1px solid orange; */
}
#library-collection{
/*   border:1px solid red; */
  height:60vh;
  min-height:60vh;
  max-height:60vh;
  overflow:auto;

}

/*library end*/

/*save to database begin*/
.epic-info-row-key{
  width:10em;
  max-width:10em;
  min-width:10em;
  height: 1.5em;
}

.epic-info-row-value{
  width:10em;
  max-width:10em;
  min-width:10em;
  border:1px solid black;
  height: 1.5em;
}

#epicycle-darkcanvas{
}

/*save to database end*/

/*load from database begin*/

.epicycle-collection-cell{
  margin:1em;
}
.epicycle-collection-img-div{
  min-width:8.2em;
  width:8.2em;
  height:8.2em;
  max-width:8.2em;
  overflow:visible;
}
.epicycle-collection-img{
  width:7.8em;
  padding:0.2em;
}
.epicycle-collection-img:hover{
  width:8.2em;
  padding:0.0em;
}
.epicycle-collection-description{
  text-align:center;
  font-size:80%;
  font-style:italic;

}
.epicycle-collection-nick {
  text-align:center;
  font-size:60%;
  font-style:italic;

}
#find-div {
  display: inline-block;
  min-width:6em;
  width:6em;
  height:1.2em;
}
.epicycle-description{
  display:inline-block;
  border:none;
  max-width:8em;
  max-height:1.2em;
  overflow:hidden;
}
.epicycle-more {
  border:1px solid blue;
}
/*load from database end*/