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

media queries: 
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
INFO: full HD =1080p (1920×1080 px), aspect ratio 5/3; 
*/






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


body{
    /*overflow: hidden;*/  /* Hide scrollbars */

  margin: 0;
  padding: 0;
  /*overflow-x: hidden;*/ /* remove horizontal scrollbar */
  font-family: 'helvetica', sans-serif;
                 /*font-size: 14px;*/
  font-size: 1.3vw;
  /*text-align: center;*/
  color: #000000;   /* text color */
  background-color: #FFFFFF;
}

button,select{    /* see also toggle control; select=combobox,choice */
    font-size: 1.5vw;
    width: 19vw;
    height: 4vw;
}




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

th{                    /* only used in infotext */
  font-size: 1.5vw;
  /*font-weight: bold; */

}

td{
  font-size:1.2vw; 
  /*font-weight: bold; */
}

td.important{
  font-size:1.2vw; 
  font-weight: bold; 
  color: #dd0033;
}


table.infoTable {
   border-collapse: collapse;
   color: rgb(205,0,0);
   background-color: rgba(255,255,255,0.7);
}
table.infoTable td {
   border: 1px ridge rgb(0,0,0);
   color: rgb(205,0,0);
}

table.mainTable {
    border: 0px;
    border-collapse: collapse;
    cellspacing: 3vmin; /* DOS */
    cellpadding: 10vmin; /* DOS */
}
table.mainTable td,th {
   padding: 3;
}

table.infoGenTable {
   border-collapse: collapse;
   border: 1px ridge rgb(0,0,0);
   color: rgb(0,0,0);
}
table.infoGenTable td,th {
   padding: 4;
   border: 1px ridge rgb(0,0,0);
}


table.impressumTable {
   border-collapse: collapse;
   background-color: rgba(255,255,255,0.7);
}
table.impressumTable td {
   border: 1px ridge rgb(0,0,0);
   font-size:1.2vw; 
}




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

 h1{
     font-family: helvetica, sans-serif;
     font-size: 2.3vw;
     font-weight: bold;
     color: #448;
     padding-top:0px;
 }

 h2{
     font-family: helvetica, sans-serif;
     font-size: 1.7vw;
     font-weight: bold;
     color: #448;
     margin-top:1.5vw;
     margin-bottom: 1vw;
 }
 
 h3{
     font-family: helvetica, sans-serif;
     font-size: 1.5vw;
     font-weight: bold;
     font-style: italic;
     color: #448;
     padding-top:0.3vw;
     margin-bottom: 0px;
 }



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



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

/* @media all and  (min-aspect-ratio: 6/5){*/
@media all{




/* (1) landscape: the title / header */

 
#header{
  position: absolute;
  top: -0.5vw;
  left: 10vw;
  /*width:  60vw; */
  height: 3vw;
  /* font-size: 2.9vmin; size and weight overridden by h1*/
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  /*background-color: rgba(255,255,255,0.7);*/
  z-index: 4; /* the higher the integer, the more on top */
}

/* (1a) landscape: position of the info button */

#infoDiv{
  position: absolute;
  top: 1vh;
  height: 4vw;
  left: 3vw;
  width: 3vw;
  z-index: 2; /* the higher the integer, the more on top */
}


/* (2) landscape: control panels with button */
/* Notice: table elements relevant for font size */

#toggleControlDiv{
  position: absolute;
  top: 5vw;
  left: 1vw;
  /* width, height DOS, control at button,select{ */
  z-index: 4; /* the higher the integer, the more on top */
}

#toggleGraphicsDiv{
  position: absolute;
  top: 5vw;
  left: 22vw;
  /*width: 14vmin;*/ /* width DOS, control at button */
  /*height: 8vmin;*/
  z-index: 4; /* the higher the integer, the more on top */
}


/* ################################################################## */
/* landscape: first control panel layer: Supply/demand and energy mix */
/* ################################################################## */

#controlSupplyDemandDiv{ 
  position: absolute;
  top: 7vw;
  left: 1vw;
  width: 38.5vw;
  /*background-color: rgb(230,230,255);*/
  display: block;
  z-index: 1; /* the higher the integer, the more on top */
}

#controlPlantsDiv{ 
  position: absolute;
  top: 19vw;
  /*height: 88vmin;*/
  left: 1vw;
  width: 38.5vw;
  /*background-color: rgb(230,230,255);*/
  display: block;
  z-index: 1; /* the higher the integer, the more on top */
}

/* landscape: Merkelsmileys */

#merkelsmileys{
  position: absolute;
  top: 21vw;
  left: 32.5vw;
  /* DOS here; width controlled by image in javascript: */
  z-index: 0; /* the higher the integer, the more on top */
}

#raute{
  position: absolute;
  top: 26vw;
  left: 31vw;
  width: 7vw; /* works with "%" size in <img ...> in html */
  height: 5vw; /* DOS *?
  z-index: 0; /* the higher the integer, the more on top */
}


#generalInfo {
      position: absolute;
      border: 0px solid #ccc;
      padding: 8px;
      display: block;
      left: 2vw;
      top: 47vw;
      font-size: 1.3vw; /* body font 1.5vw */
      /*width:  15vw; 
      height: 12vh;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);*/
      z-index: 0;
}
#infoImportExport {
      position: absolute;
      border: 0px solid #ccc;
      padding: 8px;
      display: block;
      left: 20vw;
      top: 47vw;
      font-size: 1.3vw;
      z-index: 0;
}

#CO2Info {
      position: absolute;
      border: 0px solid #ccc;
      padding: 8px;
      display: block;
      left: 20vw;
      top: 54.5vw;
      color: rgb(200,0,0);
      font-size: 1.5vw;
      font-weight: bold;
      z-index: 0;
}

#impressum{ 
  position: absolute;
  top: 59vw;  /* % takes care of scrollbars, vmin/vh not*/
  left: 10vw;
  width: 24vw;
  z-index: 1; /* the higher the integer, the more on top landscape */
}

/* ################################################################## */
/* landscape: second control panel layer: strategy, buffer, import/export */
/* ################################################################## */


#controlStrategyDiv{ /* Also contains info text for non-BaWue simulations!*/
  position: absolute;
  top: 7vw;
  left: 1vw;
  width: 38.5vw;
  /* background-color: rgb(230,230,255);*/
  display: none;  z-index: 3; /* the higher the integer, the more on top */
}



/* (3) landscape: the semi-transparent zoon region over areaGraphics1 */



#zoomInRegion{
  position: absolute;
  left:   40vw;     /* same as#areaGraphics1 */
  top:   0vh;
  width:  59vw; 
  height: 47vh;     /* reaches down to #areaGraphics2 */
  margin-right: 0vw;
  margin-left: 0vw;
  /*z-index: 0; */  /* DOS  falls andere Werte als =0 gesetzt! */
  
}


/* (3) landscape: the container of the charts canvas */

#areaGraphics1{
  position: absolute;
  left:   40vw;
  top:   3vh;
  width:  59vw; /* canvas inside area no drawing limit but define pixel */
  height: 47vh; /* range by embedding graphics region zoomInRegion */
  margin-right: 0vw;
  margin-left: 0vw;
  /*background-color: rgb(235,235,255);*/
  z-index: 0;
}

#areaGraphics2{
  position: absolute;
  left:   40vw;
  top:   50vh;
  width:  59vw; 
  height: 47vh;
  margin-right: 0vw;
  margin-left: 0vw;
  /*background-color: rgb(235,235,255);*/
  z-index: 0;
}

#areaGraphics3{
  position: absolute;
  left:   40vw;
  top:   3vh;
  width:  59vw; 
  height: 47vh;
  margin-right: 0vw;
  margin-left: 0vw;
  /*background-color: rgb(235,235,255);*/
  z-index: 0;
}

#areaGraphics4{
  position: absolute;
  left:   40vw;
  top:   50vh;
  width:  59vw; 
  height: 47vh;
  margin-right: 0vw;
  margin-left: 0vw;
  /*background-color: rgb(235,235,255);*/
  z-index: 0;
}


#clickInfo{
      position: absolute;
      border: 1px solid #ccc;
      padding: 8px;
      display: none;
      background: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      z-index: 0;
}

#standaloneInfo {
      position: absolute;
      border: 0px solid #ccc;
      padding: 30px;
      display: block;
      overflow-y: auto;
      width:  50vw; 
      z-index: 0;
}
















/* (3) landscape: position of the flags for language selection: 
right top of simCanvas */

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




/* (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{ /* inside #sliders, hence no positional info*/
  border:0px solid black; /* 1px with frame */
  width: 44vmin; /* DOS with calc(98.0vw-121.0vmin);*/
  /*height: 27vmin;*/
  text-align: left;
  padding-top: 0vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
  background-color: rgba(0,40,255,0.0);
  overflow:auto;
  z-index: 2;
}


} /* end @media filter landscape normal */