﻿#sig {
  bottom:35%;
}
#time {
  top:calc(65% - 65px);
  bottom:auto;
}

#coords {
  top:calc(65% - 25px);
}

#reportlistlabel {
  left:270px;
  right:10px;
  top:65%;
}

#report {
  top:calc(65% + 30px);
  bottom:0;
  left:0;
  right:0;
  width:auto !important;
}
  #reportList>div sup .rank dd {
    display:none;
  }
  body.fullscreen #report {
    top:calc(65% + 30px);
  }
#zoom {
  bottom:calc(35% + 14px);
}

#notices {
  right:60px;
  top:90px;
}


@media screen and (max-height:915px) {
    #buttons {
      top:40px;
    }
    #buttons a,
    #buttons a img {
      width:28px;
      height:28px;
    }
    #bt_navionics {
      top:5px;
      left:38px;
    }
    #bt_navionics {
      left:47px;
    }
    #zoom {
      left:auto;
      right:18px;
      height:73px;
      width:28px;
      bottom:calc(35% + 60px);
    }
        #zoom b {
          width:28px;
          height:28px;
        }
        #zoom svg {
          top:3px;
          left:3px;
          width:22px;
          height:22px;
        }
    #time {
      padding-left:7px;
      padding-right:50px;
    }
    #bt_fullscreen,
    #bt_refresh {
      right: 15px !important;
    }
    
    #threedbutton {
      left:auto;
      right:14px;
      width:28px;
      height:28px;
    	line-height:28px;
    	font-size:14px;
      bottom:calc(35% + 145px);
    }
}

@media screen and (max-height:760px) {
    #sig {
      bottom:120px;
    }
    #time {
      top:auto;
      bottom:120px;
    }
    #reportlistlabel {
      top:auto;
      bottom:90px;
      height:30px;
    }
    #report {
      top:auto;
      height:90px;
    }
    #zoom {
      bottom:180px;
    }
    #threedbutton {
      bottom:265px;
    }
    
    #graphics {
      display:none !important;
    }
    #bt_graphics {
      display:none !important;
      visibility:hidden !important;
    }
    #reportList div input {
      display:none !important;
    }

    
}

@media screen and (max-height:575px) {
    #sig {
      bottom:60px;
    }
    #time {
      top:auto;
      bottom:60px;
    }
        #datetime {
          font-size:16px;
        }
            #datetime big {
              display:none;
            }
            #datetime small {
              display:inline-block;
            }
        #chrono + td {
          padding: 0 3px;
        }
        #replay svg {
          transform:scale(1, 1);
          margin-left:0px;
          margin-right:0px;
        }

    #reportlistlabel {
      top:auto;
      bottom:30px;
      height:30px;
    }
    #report {
      top:auto;
      height:30px;
    }
    #zoom {
      bottom:120px;
    }
    #threedbutton {
      bottom:205px;
    }
}

@media screen and (max-height:500px) {
    #sig {
      bottom:0px;
    }
    #time {
      top:auto;
      bottom:0px;
    }
    #reportlistlabel {
      display:none;
    }
    #report {
      display:none;
    }
    #zoom {
      bottom:60px;
    }
    #threedbutton {
      bottom:145px;
    }
}

@media screen and (max-height:450px) {
  #bt_route,
  #bt_gridlines,
  #bt_rules {
    display:none;
  }
  #buttons span + span {
    padding-top:0px;
  }
    #bt_navionics {
      top:0;
    }
  #notices {
    display:none !important;
  }
    
}


@media screen and (min-width:901px) {
  #bt_weather {
    visibility:visible !important;
  }
  #bt_route {
    visibility:visible !important;
  }
}

@media screen and (max-width:1100px) {
  #reportlistlabel table td {
    text-align:right !important;
  }
      #reportlistlabel table td big {
        display:none;
      }
      #reportlistlabel table td small {
        display:block;
      }
  #reportList>div>sub td {
    text-align:right !important;
  }
      #reportList>div table td i {
        display:none;
      }
}

@media screen and (max-width:1000px) {
  #weather {
    left:80px;
    transform:none;
  }
  #nextreportchrono {
    left: 165px;
    transform:none;
  }  
  #vormenu {
    top:10px;
    right:10px;
  }
  #notices {
    top:80px;
    right:10px;
  }
  
}

@media screen and (max-width:900px) {
  #reportlistlabel td.status,
  #reportlistlabel td.course,
  #reportlistlabel td.dog,
  #reportList td.status,
  #reportList td.course,
  #reportList td.dog {
    display:none;
  }
}

@media screen and (max-width:800px) {
  #reportlistlabel td.vmg,
  #reportlistlabel td.dtf,
  #reportList td.vmg,
  #reportList td.dtf {
    display:none;
  }
}


@media screen and (max-width:675px) {
  #sig {
    top:40px;
  }
  #vormenu {
    left:0;
    top:0;
    right:0;
    width:auto;
    height:auto;
  }
      #vormenu.open {
        width:auto;
        animation-name: none;
      }
      #vormenu.close {
        width:auto;
        animation-name: none;
      }
      #vormenu header {
        padding:0 0 0 25px;
        line-height:40px;
        height:40px;
      }
          #vormenu header tt {
            bottom:0px;
            transform:rotate(-90deg);
          }
          #vormenu header h1 {
            display:inline-block;
            font-size:18px;
          }
          #vormenu header h2 {
            display:inline-block;
            font-size:14px;
          }
  #vormenu main {
    font-size:12px;
    height:0;
    transform:none;
    top:40px;
    left:0;
    right:0;
  }
    #vormenu main.open {
      width:100%;
      height:370px;
    }
      @keyframes leglinks_open {
        from {height: 0px;}
        to {height: 370px}
      }
      @keyframes leglinks_close {
        from {height: 370px;}
        to {height: 0px;}
      }
      #vormenu main u {
        display:inline-block;
      }
      #vormenu main i {
        display:inline-block;
      }
      #vormenu main td {
        padding: 6px 5px;
        font-size:16px !important;
      }
  #weather {
    top:40px;
    left:50%;
    transform:translateX(-50%);
  }
  #nextreportchrono {
    top:0;
    left:auto;
    right:45px;
    transform:none;
    font-size:12px;
    line-height:45px;
    z-index:500 !important
  }
  #nextreportchrono.weather {
    top:0;
  }
      
  #notices {
    display:none !important;
  }
}


@media screen and (max-width:600px) {
  #reportlistlabel td.tws,
  #reportlistlabel td.twd,
  #reportlistlabel td.twa,
  #reportlistlabel td.eta,
  #reportList td.tws,
  #reportList td.twd,
  #reportList td.twa,
  #reportList td.eta {
    display:none;
  }
  #graphics {
    display:none !important;
  }
    #reportList div input {
      display:none !important;
    }

}

@media screen and (max-width:460px) {
  #reportlistlabel td.speed,
  #reportList td.speed {
    display:none;
  }
  
  #vormenu h2 {
    display:none !important;
  }

}

@media screen and (max-width:355px) {
  #reportlistlabel td.gain,
  #reportList td.gain {
    display:none;
  }

}





#reportlistlabel td.eta,
#reportList td.eta {
  *display:none;
}

