@media screen and (max-width:550px) {
  h1{text-align:left;width:auto;font-size:18px;padding:5px;}
  #reportDate{top:20px;width:auto;text-align:left;left:5px;right:auto;font-size:12px;}
  #chrono{top:20px;font-size:12px;}
  #boatClassesList{top:55px;width:100%;}
  #map{top:50px;bottom:65px;left:0;right:0;}
  #buttons{left:auto;right:10px;top:75px;width:26px;margin:0px;white-space:normal;z-index:60;}
    #buttons li{margin-bottom:5px;}
  #reportlist{left:0;top:50px;right:0;width:auto;visibility:hidden;bottom:65px;margin:0;z-index:70;}
  #datetime{display:none;}
  #progressline{bottom:35px;left:10px;z-index:1100;}
  #credits{left:7px;bottom:90px;right:auto;width:5px;white-space:nowrap;transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);text-shadow:1px 1px 1px #000000;}
   #credits>a{color:#FFFFFF;}
  #tabs{display:block;}
}

@media screen and (max-width:550px) and (max-height:360px) {
  #map{left:0;bottom:50px;}
  #reportlist{bottom:50px;}
  #progressline{bottom:33px;left:3px;right:3px;}
    #progressline sup, #progressline sub{display:none;}
  #databoard{visibility:hidden;}
}