/*
ERS - Media Queries
A.Tshubrik, 21 July 2020
*/

/* NOT DESKTOPS */
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.2),
  only screen and (min-resolution: 1.2dppx)
{
  body {
    font-family:arial;
  }
  a, .divtocitem, .pseudolink {
    font-weight:normal;
  }
  td.time {
    width:8em;
  }
  .txt {
    text-indent:1em;
  }
  
  #divtitle {
    font-size:1em;
  }
} 

/* LANDSCAPE */
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: landscape),
  only screen and (min-resolution: 1.2dppx) and (orientation: landscape)
{

}

/* PORTRAIT */
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: portrait),
  only screen and (min-resolution: 1.2dppx) and (orientation: portrait)
{
  body {
    margin-left:0;
  }
  body, .divroerichs {
    margin-top:calc(var(--header-height) + var(--ctrls-height));
  }
  #divcontrols {
    width:100%;
    height:var(--ctrls-height);
    border-right:0;
    border-bottom:1px solid gray;
  }
  #divcmd {
    top:0;
    right:0;
    width:var(--cmd-width);
    bottom:0;
    height:auto;
  }
  #divmenu {
    left:0;
    top:0;
    padding:0 0.5em 0.5em 0;
    width:var(--menu-width);
  }
  .command {
    margin-top:1em; 
  }
  #copyright {
    display:none;
  }
  #divtoc {
    left:0;
    width:calc(100% - var(--cmd-width));
    height:100%;
    padding-bottom:0;
/*    display:flex;*/
    flex-flow:column wrap;
    border-bottom:0;
    border-right:1px solid gray;
  }
  .divtocitem {
    width:15em;
  }

  #divview {
    left:0;
    top:calc(var(--header-height) + var(--ctrls-height));
  }

}

/*  Large screen Tablet PC (iPad Pro) */
@media
  only screen and (max-height:1024px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: landscape),
  only screen and (max-height:1024px) and (min-resolution: 1.2dppx) and (orientation: landscape),
  only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: portrait),
  only screen and (max-width:1024px) and (min-resolution: 1.2dppx) and (orientation: portrait)
{
  body {
    font-size:18px;
  }

  @media (orientation:landscape) {    /* Large Tablet LANDSCAPE */

  }

  @media (orientation:portrait) {     /* Large Tablet PORTRAiT */

  }
}

/* Mid screen Tablet (iPad) */
@media
  only screen and (max-height:768px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: landscape),
  only screen and (max-height:768px) and (min-resolution: 1.2dppx) and (orientation: landscape),
  only screen and (max-width:768px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: portrait),
  only screen and (max-width:768px) and (min-resolution: 1.2dppx) and (orientation: portrait)
{
  :root {
    --header-height: 36px;
    --header-padding: 3px;
    --ctrls-width: 15.5em;
/*    --cmd-width:*/
  }

  body {
    font-size:18px;
  }
  #ahome {
    margin-top:0;
  }
  .imglogo {
    height:calc(var(--header-height) - 8px);
  }
  .imgtitle {
    width:340px;
    height:30px;
  }


  @media (orientation:landscape) {    /* Mid Tablet LANDSCAPE */

  }

  @media (orientation:portrait) {     /* Mid Tablet PORTRAiT */

  }

}

/*  Small screen phone */
@media
  only screen and (max-height:500px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: landscape),
  only screen and (max-height:500px) and (min-resolution: 1.2dppx) and (orientation: landscape),
  only screen and (max-width:500px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: portrait),
  only screen and (max-width:500px) and (min-resolution: 1.2dppx) and (orientation: portrait)
{
  :root {
    --header-height: 30px;
    --header-padding: 2px;
    --ctrls-width: 15em;
    --cmd-height:2em;
    --cmd-width:30px;
  }

  body {
    font-size:16px;
  }
  .imglogo {
    height:calc(var(--header-height) - 6px);
  }
  .imgtitle {
    width:294px;
    height:26px;
  }
  #subtitle {
    display:none;
  }
  #copyright {
    display:none;
  }
  .fldname {
    font-weight:normal;
  }
  .imgthumb {
    max-width:120px;
    height:auto;
  }
  .divthumb {
    width:180px;
    height:200px;
  }
  .divpvpic {
    width:180px;
    height:180px;
  }
  #divpictitle {
    font-weight:normal;
  }
  .divpicture {
    right:30px;
  }
  .imgbtnview {
    width:24px;
    height:24px;
    margin:3px;
  }
  .imgembed, .imgembedrgt {
    max-width:95%;
    height:auto;
    float:none;
  }
  .divembed, .divembedrgt {
    float:none;
  }
  .mobsml {
    font-size:0.9em;
  }

  @media (orientation:landscape) {    /* Small screen LANDSCAPE */
    #divmenu {
      top:0.3em;
    }
    .command {
      margin-left:0.2em;
    }
  }

  @media (orientation:portrait) {     /* Small screen PORTRAIT */
    #azone, #spanhome {
      display:none;
    }
    #imgmenu {
      display:inline-block;
    }
    #divmenu {
      left:auto;
/*      width:auto;*/
      right:0.5em;
      top:2.5em;
      background:#fff;
      border:1px solid gray;
      visibility:hidden;
    }

  }

}

/*  Tiny screen phone */
@media
  only screen and (max-height:320px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: landscape),
  only screen and (max-height:320px) and (min-resolution: 1.2dppx) and (orientation: landscape),
  only screen and (max-width:320px) and (-webkit-min-device-pixel-ratio: 1.2) and (orientation: portrait),
  only screen and (max-width:320px) and (min-resolution: 1.2dppx) and (orientation: portrait)
{
  :root {
    --header-height: 26px;
    --header-padding: 2px;
    --ctrls-width: 13.5em;
  }
  body {
    font-size:13px;
  }
  .imglogo {
    height:calc(var(--header-height) - 6px);
  }
  .imgtitle {
    width:250px;
    height:22px;
  }
  .imgthumb {
    max-width:90px;
    height:auto;
  }
  .divthumb {
    width:140px;
    height:160px;
  }
  .divpvpic {
    width:140px;
    height:140px;
  }
  .divpicture {
    right:26px;
  }
  .imgbtnview {
    width:20px;
    height:20px;
    margin:3px;
  }

  @media (orientation:landscape) {    /* Tiny screen LANDSCAPE */

  }

  @media (orientation:portrait) {     /* Tiny screen PORTRAIT */


  }

}