/*######################################################*/
/* general */
/*######################################################*/
h1{
     font-family: helvetica, sans-serif;
     font-size: 3.2vmin;
     font-weight: bold;
     color: #446;
     padding-top:0px;
 }

h2{
     font-family: helvetica, sans-serif;
     font-size: 2.8vmin;
     font-weight: bold;
     color: #446;
     padding-top:0px;
 }

body{
  margin: 2px;
  padding: 0;
  font-family: 'helvetica', sans-serif;
  font-size: 2.5vmin;

                 /*font-size: 14px;*/
 /* font-size: calc(12px + 1vmin);*/
/*  font-size: 16px;*/ /*DOS*/

  /*text-align: center;*/
  color: #404050;   /* text color */
  background-color: #FFFFFF;
}

button,select{
     font-size: 1.8vmin; 
}


/* text layout of sliders: tables override general text spec) */

th{                    /* only used in infotext */
  font-size: 2.5vmin;
  font-weight: bold; 
  color: #404060;      /* text color */

}

td{
  font-size:2.2vmin; 
  font-weight: bold; 
  color: #404060;   /* only WITHOUT quotes here, not "#404060" etc */
}

.important {  color: #F50;
  font-weight:bold;
}

.red{color:#C00;}

.orange{color:#E60;}

.lila{color:#70A;}

.green{color:#090;}

.lightgreen{color:#0F0;}

.blue{color:#00A;}


.button {  background-image:linear-gradient(#EEE, #CCC);
  font-weight:bold;
}

.bggraysimple {  background-color:#CCC;
  font-weight:bold;
}

.italic {
  font-style: italic;
}


/*######################################################*/
/* links */
/*######################################################*/

a {
        color: #07A;
        font-weight: normal;
 }

a:link {
        color: #07A;
        text-decoration: none;
}

a:visited {
        color: #957;
        text-decoration: none;
}

a:active {
        text-decoration: underline;
        background-color: #F80;
}

a:hover {
        text-decoration: underline;
        color: #07A;
}




#logDiv{ /* sadly does not log system generated errors as expected */
  position: absolute;
  top:   70vh; 
  left:   20vw;
  width:  78vw;
  height:  30vh;
  overflow: scroll;
  background-color: rgb(255,235,235);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 4;  # the higher the more on top
}

 /* print warnings and errors in other color: console.warn, console.error
 see corona.js->debugApple */

.warnClass{
  color: #f90;
}

.errClass{
  color: #c00;
}


/* ################################################### */
/* main elements default=landscape */
/* ################################################### */


#header{ /*title */
  position: absolute;
  top: 0vmin;
  left: 10vw;
  font-weight:bold;
  z-index: 3;  /* above simulation canvas in rare chances of overlapping */
}

#headerValid{ /*title if validating*/
  position: absolute;
  top: 3vmin;
  left: 10vw;
  font-weight:bold;
  z-index: 3;  /* above simulation canvas in rare chances of overlapping */
}

#sliders{ 
  position: absolute;
  top:   9vh; 
  left:   20vw;
  width:  60vw;
  height:  13vh;
  background-color: rgb(222,255,222);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 3;  # the higher the more on top
  /* display: none; DOS; same with property hidden and with "none" */
}

#sliders2{ /* normal landscape */
  position: absolute;
  top:   9vh; 
  left:   20vw;
  width:  60vw;
  height:  10vmin;
  background-color: rgb(222,255,222);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 3;  # the higher the more on top
}

#contents{ /* contains the canvas */
  position: absolute;
  top:   21vh;  
  left:   2vw;
  width:  85vw;
  height: 78vh;
  background-color: rgb(255,255,255);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1; # the higher the more on top
}


/* ################################################### */
/* secondary elements default */
/* ################################################### */


#video{ 
  position: absolute;
  top:     0.0vh; 
  right:   44vmin;
  z-index: 4; /* the higher, the more on top */
}

#info{ 
  position: absolute;
  top:     0.0vh; 
  right:   32vmin;
  z-index: 4; /* the higher, the more on top */
}


#startStopDiv{
  position: absolute;
  top:     0.0vh; 
  right:   24vmin;
  height:  7vmin;
  width:   7vmin;
  z-index: 3; 
}

#restartDiv{
  position: absolute;
  top:     0.5vh; 
  right:   18vmin;
  height:  6vmin;
  width:   6vmin;
  z-index: 3; /* the higher the integer, the more on top */
}

#resetDiv{
  position: absolute;
  top:     0.5vh; 
  right:   12vmin;
  height:  6vmin;
  width:   6vmin;
  z-index: 3; /* the higher the integer, the more on top */
}

#flagDiv{
  position: absolute;
  top:     1vh; 
  right:   4vmin;
  height:  5vmin;
  width:   6vmin;
  z-index: 3; /* the higher the integer, the more on top */
}


/* vertical array of elements; with width: attribute left aligned,
   without right */

#countryData{ /* normal landscape */
  position: absolute;
  top:     8vh; 
  right:   1vw;
  z-index: 4; # the higher the more on top
}

#dataTypeDiv{  /*normal, landscape */
  position: absolute;
  top:     12vh; 
  right:   1vw;
  z-index: 4; 
}


#calibrateDiv{ /* normal landscape */
  position: absolute;
  top:     16vh; 
  right:   1vw;
  z-index: 3; 
}

#validateDiv{ /* normal landscape */
  position: absolute;
  top:     20vh; 
  right:   1vw;
  z-index: 3; 
}

#compareCountry{ /* normal landscape */
  position: absolute;
  top:     24vh; 
  right:   1vw;
  z-index: 3; 
}

#mutation{ /* normal landscape */
  position: absolute;
  top:     28vh; 
  right:   1vw;
  z-index: 3;
  color: #F00;
}

#testnumberDiv{
  position: absolute;
  top:     50vh; /*10vh*/
  right:   1vw;
  z-index: 3; /* the higher the integer, the more on top */
}

#vaccinationView{  /*normal, landscape */
  position: absolute;
  top:     60vh; 
  right:   1vw;
  z-index: 3; 
}

#impressum{ 
  position: absolute;
  top:     90vh; 
  right:   1vw;
  z-index: 3; 
}

#home{ 
  position: absolute;
  top:     95vh; 
  right:   1vw;
  z-index: 3; 
}








/*#########################################################*/
/* normalscreen portrait overrides (geht nicht nested!)
/*#########################################################*/

@media screen and (max-aspect-ratio: 7/5){  /* w/h */


/* ################################################### */
/* main elements rect or portrait */
/* ################################################### */

#header{
  position: absolute;
  top:   -1.5vmin;
  left:  10vmin;
  width: 50vmin;
}

#headerValid{ /*title if validating regular portrait*/
  position: absolute;
  top: auto;
  bottom: 45vh;
  left: 27vw;
  font-weight:bold;
  z-index: 3;  /* above simulation canvas in rare chances of overlapping */
}


#sliders{      /* normal portrait */
  left:   12vw;
}

#sliders2{      /* normal portrait */
  left:   12vw;
  width:  65vw;
}

#contents{ /* contains the canvas */
  position: absolute;
  top:   21vh; 
  left:   2vw;
  width:  96vw;
  height: 72vh;
}


/* ################################################### */
/* secondary elements rect/portrait                    */
/* ################################################### */

#countryData{ /* normal rect/portrait */
  top:     7vh; 
}

#dataTypeDiv{  /*normal, rect/portrait */
  top:     10vh; 
}

#calibrateDiv{ /* normal rect/portrait */
  top:     13vh; 
}

#validateDiv{ /* normal rect/portrait */
  top:     16vh; 
}

#compareCountry{ /* normal rect/portrait */
  top:     19vh; 
}

#mutation{ /* normal rect/portrait */
  top:     22vh; 
}

#vaccinationView{  /*normal rect/portrait */
  position: absolute;
  top:     auto;   /* need auto because otherwise dependency bug */ 
  bottom:  1vh; 
  right:   auto;
  left:    2vw;
}



#testnumberDiv{
  top:     auto; 
  bottom:  1vh; 
  right:   auto;
  left:    20vw;
}



#impressum{ 
  top:     auto; 
  bottom:  1vh; 
  right:   15vw;
}

#home{              /*normal rect/portrait */
  top:     auto; 
  bottom:  1vh; 
  right:   1vw;
}

}



/*#########################################################*/
/* addtl smartphone general settings 
/* dppx=dot per pixel (1: noteooks, >1: smartphones,tablets)
/*#########################################################*/


@media screen and (max-height: 600px),
screen and (max-width: 600px),
screen and (min-resolution: 1.5dppx){ 


h1{
  font-size: 4vmin;
}

h2{
  font-size: 3.5vmin;
}


body{ /*mobile, landscape */
  font-size: 3vmin;
}

td{
  font-size:2.8vmin; 
}

button,select{ /*mobile, landscape */
     font-size: 3vmin; 
}

input[type=range]{ /*mobile, landscape, orig in sliders.css */ 
  width: 16vw;
  height: 2.5vmin;
}

input[type=range]::-moz-range-track{
  width: 16vw;
  height: 2.5vmin;
}

input[type=range]::-moz-range-thumb {
  height: 3vmin;
  width: 1.5vmin;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2vmin;
}

input[type=range]::-webkit-slider-thumb {
  height: 3.0vmin;
  width:  2.0vmin;
}

}

/*#########################################################*/
/* addtl smartphone portrait settings (geht NICHT nested!)
/*#########################################################*/

@media screen and (max-height: 600px) and (max-aspect-ratio: 1/1), /*6/5*/
screen and (max-width: 600px) and (max-aspect-ratio: 1/1),
screen and (min-resolution: 1.5dppx) and (max-aspect-ratio: 1/1){

input[type=range]{ /*mobile, portrait, orig in sliders.css */ 
  width: 27vmin;
  height: 1.6vmin;
}

input[type=range]::-moz-range-track{
  width: 27vmin;
  height: 1.6vmin;
}

input[type=range]::-webkit-slider-runnable-track{ /*mobile portrait*/
  width: 27vmin;
  height: 1.6vmin;
}

input[type=range]::-moz-range-thumb {
  height: 3.5vmin;
  width:  2.5vmin;
}


input[type=range]::-webkit-slider-thumb {
  height: 3.5vmin;
  width:  2.5vmin;
}




/* ################################################### */
/* main elements smartphone portrait */
/* ################################################### */

#header{ /*title*/
  position: absolute;
  top:   -1.5vmin;
  left:  10vmin;
  width: 50vmin;
}

#headerValid{ /*title if validating smartphone portrait*/
  position: absolute;
  top: auto;
  bottom: 32vh;
  left: 25vw;
  font-weight:bold;
  z-index: 3;  /* above simulation canvas in rare chances of overlapping */
}

#sliders{      /* smartphone portrait */
  top:   10vh;
  left:   -1vw;
  width:  70vw;
  background-color: rgb(255,255,255);
}

#sliders2{      /* smartphone portrait */
  top:   10vh;
  left:   -1vw;
  width:  74vw;
  background-color: rgb(255,255,255);
}

#contents{ /* contains the canvas */
  position: absolute;
  top:   24vh; 
  left:   2vw;
  width:  96vw;
  height: 68vh;
}


/* ################################################### */
/* secondary elements smartphone portrait
/* ################################################### */

#video{ 
  position: absolute;
  top:     8vmin; 
  right:   32vmin;
  z-index: 4; /* the higher, the more on top */
}


#info{ /* smartphone portrait */
  position: absolute;
  top:     8vmin; 
  right:   18vmin;
  z-index: 4; 
}

#countryData{ /* smartphone portrait */
  position: absolute;
  top:     15vmin; 
  right:   1vw;
  z-index: 4; 
}

#dataTypeDiv{  /*smartphone, portrait */
  position: absolute;
  top:     20vmin; 
  right:   1vw;
  z-index: 4; 
}


#calibrateDiv{ /* smartphone portrait */
  position: absolute;
  top:     25vmin; 
  right:   1vw;
  z-index: 3; 
}

#mutation{ /* smartphone portrait */
  position: absolute;
  top:     30vmin; 
  right:   1vw;
  z-index: 3; 
}

#vaccinationView{  /*smartphone portrait */
  position: absolute;
  top:     auto;   /* need auto because otherwise dependency bug */ 
  bottom:  1vh; 
  right:   auto;
  left:    2vw;
}


#compareCountry{ /* smartphone portrait */
  position: absolute;
  top:     auto;   /* need auto because otherwise dependency bug */ 
  bottom:  7vh; 
  right:   auto;
  left:    26vw;
}


#testnumberDiv{
  position: absolute;
  top:     auto; 
  bottom:  1vh; 
  right:   auto;
  left:    26vw;
}



#validateDiv{ 
  top:     auto; 
  bottom:  5vh; 
  right:   auto;
  left:    60vw;
}

#impressum{ 
  top:     auto; 
  bottom:  1vh; 
  right:   auto;
  left:    60vw;
}

#home{              /*smartphone rect/portrait */
  top:     auto; 
  bottom:  1vh; 
  right:   1vw;
}

}




  /*smartphone portrait (max-aspect-ratio: 1/1) */


/*#########################################################*/
/* addtl smartphone landscape settings (geht nicht nested!)
/*#########################################################*/


@media screen and (max-height: 600px) and (min-aspect-ratio: 1/1), 
screen and (max-width: 600px) and (min-aspect-ratio: 1/1),
screen and (min-resolution: 1.5dppx) and (min-aspect-ratio: 1/1){


/*#########################################################*/
/* sliders smartphone landscape
/*#########################################################*/

h1{
  font-size: 4vmin;
}
h2{
  font-size: 3.5vmin;
}

input[type=range]{ /*mobile, landscape, orig in sliders.css */ 
  width: 16vw;
  height: 2.5vmin;
}

input[type=range]::-moz-range-track{
  width: 16vw;
  height: 2.5vmin;
}

/* ################################################### */
/* main elements smartphone landscape
/* ################################################### */

#header{ /*title*/
  position: absolute;
  top: -1vh;
  left: 10vw;
  font-weight:bold;
  z-index: 3;  
}

#sliders{    /* smartphone landscape */
  position: absolute;
  top:   10vh; 
  left:   15vw;
  width:  60vw;
  height:  12vh;
  background-color: rgb(255,255,255);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 3;  # the higher the more on top
  /* display: none; DOS; same with property hidden and with "none" */
}

#sliders2{ /* smartphone landscape */
  position: absolute;
  top:   10vh; 
  left:   22vw;
  width:  50vw;
  height:  12vh;
  background-color: rgb(255,255,255);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 3;  # the higher the more on top
}

#contents{ /* contains the canvas */
  position: absolute;
  top:   28vh;  
  left:   2vw;
  width:  82vw;
  height: 73vh;
  background-color: rgb(255,255,255);
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1; # the higher the more on top
}


/* ################################################### */
/* secondary elements smartphone landscape
/* ################################################### */


#info{ /* smartphone landscape */
  position: absolute;
  top:     1vh; 
  right:   36vmin;
  z-index: 4; 
}

#video{ 
  position: absolute;
  top:     0.0vh; 
  right:   50vmin;
  z-index: 4; /* the higher, the more on top */
}

#startStopDiv{
  position: absolute;
  top:     0.0vh; 
  right:   24vmin;
  height:  7vmin;
  width:   7vmin;
  z-index: 3; 
}

#restartDiv{ /* smartphone landscape */
  position: absolute;
  top:     0.5vh; 
  right:   18vmin;
  height:  6vmin;
  width:   6vmin;
  z-index: 3;
}

#resetDiv{
  position: absolute;
  top:     0.5vh; 
  right:   12vmin;
  height:  6vmin;
  width:   6vmin;
  z-index: 3; 
}

#flagDiv{  /* smartphone landscape */
  position: absolute;
  top:     1vh; 
  right:   4vmin;
  height:  5vmin;
  width:   6vmin;
  z-index: 3; 
}


/* vertical array of elements; with width: attribute left aligned,
   without right */

#countryData{ /* smartphone landscape */
  position: absolute;
  top:     10vh; 
  right:   1vw;
  z-index: 4; 
}

#dataTypeDiv{  /*smartphone, landscape */
  position: absolute;
  top:     16vh; 
  right:   1vw;
  z-index: 4; 
}


#calibrateDiv{ /* smartphone landscape */
  position: absolute;
  top:     22vh; 
  right:   1vw;
  z-index: 3; 
}

#validateDiv{ 
  top:     28vh; 
  bottom:  auto; 
  right:   1vw;
  left:    auto;
}

#compareCountry{ /* smartphone landscape */
  top:     34vh; 
  right:   1vw;
  z-index: 3; 
}

#mutation{ /* smartphone landscape */
  top:     40vh; 
  right:   1vw;
  z-index: 3; 
}

#testnumberDiv{
  position: absolute;
  bottom:  auto;
  top:     48vh;
  left:    auto;
  right:   1vw;
  z-index: 3;
}

#vaccinationView{  /*smartphone landscape */
  position: absolute;
  bottom:  auto;
  top:     60vh; 
  left:    auto;
  right:   1vw;
  z-index: 3; 
}

#impressum{ 
  position: absolute;
  top:     86vh; 
  right:   1vw;
  z-index: 3; 
}

#home{ 
  position: absolute;
  top:     92vh; 
  right:   1vw;
  z-index: 3; 
}



}

/*#########################################################*/
/* addtl smartphone very landscape settings (Samsung etc)
/*#########################################################*/

/*
@media screen and (max-height: 600px) and (min-aspect-ratio: 5/3), 
screen and (max-width: 600px) and (min-aspect-ratio: 5/3),
screen and (min-resolution: 1.5dppx) and (min-aspect-ratio: 5/3){



#countryData{ 
  position: absolute;
  top:     14vh; 
  right:   35vmin;
  z-index: 4; # the higher the more on top
}

#dataTypeDiv{ 
  position: absolute;
  top:     14vh; 
  right:   2vmin;
  z-index: 4;   
}
*/

}