/*
!! check/make consistent with ../js/media.js

media queries: 
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

background : full HD =1080p (1920×1080 px), aspect ratio 5/3; 

reality check what works: http://cssmediaqueries.com/overview.html
=> ~/versionedProjects/traffic-simulation-de/README_mediaqueries
*/






/*#############################################################*/
/* basic settings for all aspect ratios */
/*#############################################################*/


body{
  margin: 0;
  padding: 0;
  font-family: 'helvetica', sans-serif;
                 /*font-size: 14px;*/
  font-size: 2vmin;
  text-align: center;
  color: #404050;   /* text color */
  background-color: #FFFFFF;
}

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

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

}

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

td.important{
  font-size:1.8vmin; 
  font-weight: bold; 
  color: #dd0033;
}


/* <h2>, <h3> not used in the main sim page but in some help pages */

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

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

 h3{ 
     font-family: sans-serif;
     font-size: 2.2vmin; 
     font-weight: bold;
     font-style: italic;
     color: #446;
     padding-top:0px;
 }

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

 #gameSliderTitle{
     font-size: 2.5vmin; 
     font-weight: bold; 
     color: #dd0033;
 }
 
/* standard: white */

#container{
    margin: 0em auto;
    width: 98vw;
    text-align: left;
    background-color: #FFFFFF;
}

/* suppresses borders on images used as links */

img {
    border-width: 0;
}


/* general 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;
}

table.infoTable {
   border: 0px ridge rgb(130,130,130); /* spacing, padding DOS with border-collapse */
   border-collapse: collapse; 
   background-color: rgba(255,255,255,0.7);
}
table.infoTable td {
   border: 2px ridge rgb(130,130,130);
}



/*#############################################################*/
/* basic settings for landscape formats !! check with ../js/media.js */
/* to have default formatting, not any restriction here (cascading...)
/*#############################################################*/

@media all /* and  (min-aspect-ratio: 4/3) */ {  /* 1/1 or 6/5 oder 4/3*/


/* (1) landscape: the title */

#header{
  position: absolute;
  top: 0.5vmin;
  height: 5vmin;
  left: calc( 1vw + 35vmin);
  width: 40vmin; /* needed for reference of width: */
  font-size: 4vmin;
  font-weight:bold;
  z-index: 0;  /* above simulation canvas in rare chances of overlapping */
}




/* (2) landscape: the main simCanvas */

#contents{
  position: absolute;
  left:   0vw;
  top:   0vmin;
  width:  112vmin; 
  height: 99vmin;
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1;
}


/* (3a) landscape: position of the top elements inside simCanvas */

#laneMinusDiv{ /* landscape: add/subtract one lane */
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 66vmin;
  width: 7vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#lanePlusDiv{
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 75vmin;
  width: 7vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#startStopDiv{ /* landscape */
  position: absolute;
  top: 1vmin;
  height: 8vmin;
  left: 84vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#restartDiv{
  position: absolute;
  top: 1vmin;
  height: 8vmin;
  left: 93vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#infoDiv{ /* landscape */
  position: absolute;
  top: 1vmin;
  height: 8vmin;
  left: 102vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}



/* (3b) landscape: special buttons/elements for only some simulations */

#priorityDiv{  /* roundabout */
  position: absolute;
  top: 12vmin;
  left: 75vmin;
  z-index: 2; 
}

#ODDiv{  /* roundabout */
  position: absolute;
  top: 18vmin;
  left: 75vmin;
  z-index: 2;
}

#gameDiv{ /* landscape: "Play Routing Game" label */
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 35vmin;
  width: 28vmin;
  font-size: 2.2vmin; 
  z-index: 2;
}

#debugDiv{
  position: absolute;
  top: 25vmin;
  height: 15vmin;
  left: 92vmin;
  width: 15vmin;
  z-index: 2;
}

#truckBan{ /* landscape: "Enforce Truck Overtaking Ban" label */
  position: absolute;
  top: 4vmin;
  left: 28vmin;
  z-index: 2;
}


/* (3c) landscape: position of the bottom elements inside simCanvas*/
        
#impressum{ 
  position: absolute;
  top: 95.5vmin;
  height: 2vmin;
  left: 0.5vw;
  width: 10vw;
  background-color: rgba(255,255,255,0.7);
  font-size: 1.5vmin;
  z-index: 2; /* the higher the integer, the more on top landscape */
}

#linkDiv{   /*=table.infoTable top-level  */
  position: absolute;
  top:   94.5vmin; /* bottom attribute error in Safari */
  left:   20vmin;
  width:  80vmin; /* no height */
  z-index: 2;
} 

#infoFlags{ /*landscape*/
  position: absolute;
  top:   93vmin;
  left:   95vmin;
  width:  16vmin; /* no height */
  z-index: 2;
}



/* (4) landscape: the field for selecting the scenarios */

#scenarios{
  position: absolute;
  top:     -1vmin;
  height:  22vmin;
  left: 115vmin;
  width: 40vmin;
  z-index: 2;  /*top-always focussed! */
}


/* (5) landscape: sliders: top-div for all three slider fields */
/* Notice: table elements relevant for font size */


#sliders{ 
  position: absolute;
  top: 16vmin;
  height: 20vmin;
  left: 110vmin;
  width: 55vmin;
  background-color: rgba(0,40,255,0);
  z-index: 3; /* the higher the integer, the more on top */
}



/* (5a-c) nested div's single slider-areas. In landscape, just let them flow
(no spec), in portrait,  unfortunately DOS  => position by brute force  */

#slidersGen,#slidersIDM,#slidersLC{

}


/* (6) landscape: infotext div-box landscape (sub-div! no pos info, just below the sliders*/

ul { margin-left: 2vmin; padding: 0vmin; }

ul.noindent {   /* then in html <ul class="noindent">...</ul>*/
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

#infotext{  /*landscape*/
  border:0px solid black; /* 1px with frame */
  width: 49vmin; /* DOS with calc(98.0vw-121.0vmin);*/
  height: 31vmin; /* no positional info! */
  text-align: left;
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(0,40,255,0.0);
  overflow:auto;
}

#infotextGame{
  border:1px solid black;
  width: 49vmin; /* DOS with calc(98.0vw-121.0vmin);*/
  height: 50vmin;
  text-align: left;
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(0,40,255,0.0);
  overflow:auto;
}

/* (7) landscape: position/size of the colorbox */

#colorBox{
  position: absolute;
  top:   45vmin;
  left: 95vmin;
  width:  15vmin; /* no height */
  z-index: 2;
}


} /* end @media filter landscape normal */




/*#############################################################*/
/* basic settings for square/portrait formats !! check with ../js/media.js */
/*#############################################################*/

@media all and  (max-aspect-ratio: 4/3){

/* (1) portrait:  the title */

#header{
  position: absolute;
  top: 0.5vmin;
  height: 5vmin;
  left: calc( 1vw + 35vmin);
  width: 40vmin; /* needed for reference of width: */
  font-size: 4vmin;
  font-weight:bold;
  z-index: 0; 
}




/* (2) portrait: the main simCanvas */

#contents{
  position: absolute;
  left:   0vw;
  top:   0vmin;
  width:  99vmin;  /* same ratio as above for landscape */
  height: 87vmin;
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1;
}


/* (3a) portrait: position of the top elements inside simCanvas */

#laneMinusDiv{ /* portrait: add/subtract one lane */
  position: absolute;
  top: 1vmin;
  height: 6vmin;
  left: 54vmin;
  width: 7vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#lanePlusDiv{
  position: absolute;
  top: 1vmin;
  height: 6vmin;
  left: 63vmin;
  width: 7vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#startStopDiv{ /* portrait */
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 72vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#restartDiv{
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 81vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#infoDiv{ /* portrait */
  position: absolute;
  top: 1vmin;
  height: 7vmin;
  left: 90vmin;
  width: 8vmin;
  z-index: 2; /* the higher the integer, the more on top */
}



/* (3b) portrait: special buttons/elements for only some simulations */

#priorityDiv{  /* roundabout */
  position: absolute;
  top: 12vmin;
  left: 60vmin;
  z-index: 2;  /* again needed!*/
}

#ODDiv{  /* roundabout */
  position: absolute;
  top: 17.5vmin;
  left: 60vmin;
  z-index: 2;  /* again needed!*/
}

#gameDiv{ /* portrait: "Play Routing Game" label */
  position: absolute;
  top: 1vmin;
  height: 6vmin;
  left: 40vmin;
  width: 24vmin;
  font-size: 2.2vmin; 
  z-index: 2;
}

#debugDiv{
  position: absolute;
  top: 25vmin;
  height: 15vmin;
  left: 84vmin;
  width: 15vmin;
  z-index: 2; /* the higher the integer, the more on top */
}

#truckBan{ /* portrait: "Enforce Truck Overtaking Ban" label */
  position: absolute;
  top: 4vmin;
  left: 19vmin;
  z-index: 2;
}


/* (3c) portrait: position of the bottom elements inside simCanvas*/
 
#impressum{ /*copyright*/
  position: absolute;
  top: 84.5vmin;
  height: 2vmin;
  left: 0.5vw;
  width: 12vw;
  background-color: rgba(255,255,255,0.7);
  font-size: 1.5vmin;
  z-index: 2; /* the higher the integer, the more on top portrait */
}

#linkDiv{ /*=table.infoTable top-level  */
  position: absolute;
  top:   83.0vmin; /* bottom attribute error in Safari */
  left:   30vmin;
  width:  80vmin; /* no height */
  z-index: 2;
} 


#infoFlags{ /*portrait*/
  position: absolute;
  position: absolute;
  top:   78vmin;
  left:   84vmin;
  width:  14vmin; /* no height */
  z-index: 2;
}


/* (4) portrait: the field for selecting the scenarios; */

#scenarios{
  position: absolute;
  top:     86vmin;
  height:  50vmin;
  left: 58vmin;
  width: 40vmin;
  z-index: 2;
}





/* (5) portrait: sliders: top-div for all three slider fields */
/* Notice: table elements relevant for font size */

#sliders{ 
  position: absolute;
  top: 88vmin;
  left: 0vmin;
  width: 54vmin;
  background-color: rgba(0,40,255,0);
  z-index: 3; /* the higher the integer, the more on top */
}

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

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

}

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

td.important{
  font-size:1.8vmin; 
  font-weight: bold; 
  color: #dd0033;
}


/* (5a-c) portrait: nested div's single slider-areas. In landscape, just let them flow
(no spec), in portrait,  unfortunately DOS  => position by brute force  */

#slidersGen{ 
  position: absolute;   /* w/respect to outer div */
  left: 0;
  width: 50vmin;
  top: 0;
  background-color: rgba(0,40,255,0);
  z-index: 2; /* the higher the integer, the more on top */
}

#slidersIDM{ 
  position: absolute;   /* w/respect to outer div */
  left: 49vmin;
  width: 50vmin;
  top: 0;
  background-color: rgba(0,40,255,0);
  z-index: 2; /* the higher the integer, the more on top */
}

#slidersLC{ 
  position: absolute;   /* w/respect to outer div */
  left: 0;
  width: 46vmin;
  top: 18vmin;
  background-color: rgba(0,40,255,0);
  z-index: 2; /* the higher the integer, the more on top */
}


/* (6) portrait: infotext div-box portrait (sub-div!, in contrast to landscape pos info*/

#infotext{
  border:1px solid black;
  position: absolute;   /* w/respect to outer div */
  left: 51vmin;
  width: 43vmin; /* DOS with calc(98.0vw-121.0vmin);*/
  top: 18vmin; /* relative to simCanvas bottom */
  height: 36vmin;
  text-align: left;
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(0,40,255,0.0);
  overflow:auto;
}


ul { margin-left: 2vmin; padding: 0vmin; }

ul.noindent {   /* then in html <ul class="noindent">...</ul>*/
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}


/* (7) portrait: position/size of the colorbox */

#colorBox{
  position: absolute;
  top:   45vmin;
  left: 83vmin;
  width:  14vmin; /* no height */
  z-index: 2;
}


} /* end @media filter portrait */





/*#########################################################
general settings smartphone  !! check with ../js/media.js

* my smartphone has huge pixel size between 1200 and 1400 height
it seems that max-height_{webTutorials}=max-height_{me} /pixel-ratio
BUT  filter for min-device-pixel-ratio etc fails/not supported;

*test unit "em" instead of pixel (but how defined if font can be changed?) 
BUT also this fails with my Smartphone test: between 70 and 100 em


* WORKING: min-resolution e.g.: 180dpi 
 (my notebook has 96 dpi, Smartphone 192 dpi)
 OR small viewpoert size (to check Smartphone layout on notebook)
(a "comma" is the keyword for OR in css media queries)
NOTE: parantheses cannot be used for clustering: C and (A, B) does not work

* height [px]/resolution[dpi] gives height in inches: That is what I want 
#########################################################*/


@media screen and (max-height: 420px),
screen and (max-width: 420px),
screen and (min-resolution: 144dpi){/* my screen TUD has 96 dpi */


body{
  font-size: 3vmin;
}

button{
  font-size: 3vmin; 
}

select{
  font-size: 3vmin; 
}

h3{ 
  font-size: 3vmin; 
}

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

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

}

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

td.important{
  font-size:2.4vmin; 
  font-weight: bold; 
  color: #dd0033;
}

/* from styleSliders.css */

input[type=range]{
    width: 20vmin;
    height: 3.0vmin;
}

input[type=range]::-moz-range-track{
  height: 3.0vmin;
}

input[type=range]::-moz-range-thumb {
  height: 3.5vmin;
  width: 1.5vmin;
}
} /*general smartphone */

/*#########################################################*/
/* addtl smartphone landscape settings  !! check with ../js/media.js
/*#########################################################*/

@media screen and (max-height: 420px) and (min-aspect-ratio: 4/3),
screen and (max-width: 420px) and (min-aspect-ratio: 4/3),
screen and (min-resolution: 144dpi) and (min-aspect-ratio: 4/3){



/* (3b) smartphone landscape: special buttons/elements for some simulations */

#priorityDiv{/* roundabout */
  position: absolute;
  top: 15vmin;
  left: 65vmin;
  z-index: 2; 
}

#ODDiv{  
  position: absolute; /* again needed!*/
  top: 22vmin;
  left: 65vmin;
  z-index: 2;
}

/* (3c) smartphone landscape: bottom elements inside simCanvas*/



#linkDiv{ /* hide link list */
  position: absolute;
  top:   50vmin; /* bottom attribute error in Safari */
  left:   20vmin;
  width:  50vmin; /* no height */
  z-index: 0;
} 


/* (4) smartphone landscape: the field for selecting the scenarios */
#scenarios{
  top:     -3vmin;
  height:  24vmin;
  left: 115vmin;
  width: 55vmin;
  z-index: 2;  /*top-always focussed! */
}

/* (5) smartphone landscape: sliders: top-div for all three slider fields */
/* Notice: table elements relevant for font size */


#sliders{ 
  top: 20vmin;
  height: 20vmin;
  left: 110vmin;
  width: 70vmin;
}


/* (6) smartphone landscape: infotext */
#infotext{
    width: 80vmin; /* DOS with calc(98.0vw-121.0vmin);*/
    height: 60vmin;
    padding-left: 7vmin;
    overflow:auto;
}

/* (7) smartphone landscape: hide the colorbox */

#colorBox{
  position: absolute;
  top:   45vmin;
  left: 45vmin;
  width:  15vmin; /* no height */
  z-index: 0;
}
} /* Smartphone landscape



/*#########################################################*/
/* addtl smartphone portrait settings  !! check with ../js/media.js
/*#########################################################*/


@media screen and (max-height: 420px) and (max-aspect-ratio: 4/3),
screen and (max-width: 420px) and (max-aspect-ratio: 4/3),
screen and (min-resolution: 144dpi) and (max-aspect-ratio: 4/3){


/* (3b) smartphone portrait: special buttons/elements for some simulations */

#priorityDiv{/* roundabout */
  position: absolute;
  top: 15vmin;
  left: 57vmin;
  z-index: 2; 
}

#ODDiv{  
  position: absolute; /* again needed!*/
  top: 22vmin;
  left: 57vmin;
  z-index: 2;
}

/* (3c) smartphone portrait: bottom elements inside simCanvas*/

#linkDiv{  /*hide link list */
  position: absolute;
  top:   50vmin; /* bottom attribute error in Safari */
  left:   20vmin;
  width:  50vmin; /* no height */
  z-index: 0;
} 

/* (4) smartphone portrait: the field for selecting the scenarios */

#scenarios{
  position: absolute;
  top:     86vmin;
  height:  50vmin;
  left: 53vmin;
  width: 45vmin;
  z-index: 2;
}


/* (5) smartphone portrait: sliders: top-div for all three slider fields */
/* Notice: table elements relevant for font size */

#sliders{ 
  position: absolute;
  top: 86vmin;
  left: 0vmin;
  width: 60vmin;
  background-color: rgba(0,40,255,0);
  z-index: 3; /* the higher the integer, the more on top */
}



/* (6) smartphone portrait: infotext */
#infotext{
  position: relative;
  top:     0vmin; /* relative to sliders etc */
  left:     2vmin;
    width: 80vmin; /* DOS with calc(98.0vw-121.0vmin);*/
    height: 60vmin;
    padding-left: 7vmin;
    overflow:auto;
}

/* (7) smartphone portrait: hide the colorbox */

#colorBox{
  position: absolute;
  top:   45vmin;
  left: 45vmin;
  width:  15vmin; /* no height */
  z-index: 0;
}

} /*Smartphone portrait */