body.FINISH #refresh {
    display:table-cell !important;
}
#bt_daynight {
  visibility:visible !important;
}

#progressline {
  display:none;
}
#sig {
  left:0;
  right:0;
  top:0;
}

#graphics {
  top:65%;
  bottom:3px;
  left:275px;
  right:0px;
  z-index:600;
}
        #graphics .variables td {
          padding-right:15px;
          font-size:14px;
        }
        #graphics .variables td:last-of-type {
          width:100%;
        }

#time {
  z-index:102;
  height:65px;
  left:0px;
  right:0px;
  padding:0 100px 0 70px;
}

  #time table {
    margin-top:19px;
  }
  #timeline b {
    top:7px;
    left:0;
    width:12px;
    height:12px;
    cursor:pointer;
    margin-left:-6px;
  }
  #timeline b>sub {
    top:0;
    left:0;
    width:12px;
    height:12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;    
    border-radius:50%;
  }
  #timeline b>sup {
    display:none;
  }
  #refresh svg {
  margin-left:20px;
  margin-right:20px;
  }
  #datetime {
    font-weight:normal;  
  }
  
  #replay svg {
    opacity:1;
    transform:scale(1.5, 1.5);
    margin-left:20px;
    margin-right:20px;
  }
      #replay.on svg {
        opacity:1;
      }
  #chrono {
    display:none;
  }

#buttons {
  z-index:101;
  right:auto;
  left:10px;
  top:5px;
  bottom:auto;
  background:transparent;
  overflow:visible;
}
.iconbutton {
    width:39px;
    height:39px;
    border:2px solid #FFFFFF !important;
    border-radius:50%;
    margin-bottom:3px;
  }
    .iconbutton img {
      left:0px;
      height:40px;
      width:40px;
    }
    .iconbutton.off img.off,
    .iconbutton.over img.over,
    .iconbutton.on img.on {
      top:0px;
    }
    .iconbutton.off img.over,
    .iconbutton.off img.on,
    .iconbutton.over img.off,
    .iconbutton.over img.on,
    .iconbutton.on img.off {
      top:40px;
    }
    #buttons span + span {
      padding-top: 10px;
    }
    
#bt_fullscreen,
#bt_refresh {
  position:absolute !important;
  top:17px;
  right:50px;
  width:32px;
  height:32px;
  overflow:hidden;
	z-index:1000;
  border:0 !important;
	
}
    #bt_fullscreen,
    #bt_refresh {
      background-color:transparent !important;
      margin:0px !important;
    }
    #bt_fullscreen.touch {
      visibility:hidden !important;
    }
    #bt_refresh.desktop {
      visibility:hidden !important;
    }
    #bt_fullscreen img,
    #bt_refresh img {
      width:26px;
      height:26px;
      left:6px;
      top:35px;
    }
    #bt_fullscreen.off img.off,
    #bt_fullscreen.over img.over,
    #bt_fullscreen.on img.on,
    #bt_refresh.off img.off,
    #bt_refresh.over img.over,
    #bt_refresh.on img.on {
      top:3px;
      left:3px;
    }
    #bt_fullscreen.off img.over,
    #bt_fullscreen.off img.on,
    #bt_fullscreen.over img.off,
    #bt_fullscreen.over img.on,
    #bt_fullscreen.on img.off,
    #bt_refresh.off img.over,
    #bt_refresh.off img.on,
    #bt_refresh.over img.off,
    #bt_refresh.over img.on,
    #bt_refresh.on img.off {
      top:35px;
    }
    #bt_fullscreen.on.alt:hover,
    #bt_fullscreen.on,
    #bt_fullscreen.on.alt,
    #bt_refresh.on.alt:hover,
    #bt_refresh.on,
    #bt_refresh.on.alt {
      background-color:transparent !important;
    }

    #bt_refresh.rotate {
      animation-name: refresh_rotate;
      animation-duration: 1000ms;
    }
    @-moz-keyframes     refresh_rotate { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes  refresh_rotate { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes          refresh_rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#bt_navionics {
  position:absolute;
  top:10px;
  left:50px;
  z-index:10000;
  visibility:hidden !important;
}
body.LEAFLET #bt_navionics {
  visibility:visible !important;
}

#zoom {
  right:auto;
  left:10px;
  height:90px;
  width:38px;
  z-index:150;
}
    #zoom b {
      width:38px;
      height:38px;
      border-radius:50%;
      border:2px solid #FFFFFF !important;
    }
    #zoom b>sub,
    #zoom b>sup {
      display:none;
    }

    #zoom svg {
      position:absolute;
      top:6px;
      left:6px;
      width:26px;
      height:26px;
    }


#coords {
  right:130px;
  left:auto;
  opacity:0.4;
}

#reportlistlabel {
  position:absolute;
  box-sizing:border-box;
  z-index:201;
  height:30px;
}
    #reportlistlabel table {
      width:100%;
      height:100%;
    }
    #reportlistlabel table td {
      width:8.33%;
      vertical-align:middle;
      text-align:center;
    }
    body.autoupdate #reportlistlabel table td {
      width:9.09%;
    }
    body.autoupdate #reportlistlabel table tr>td:first-child+td {
      display:none;
    }
      #reportlistlabel table td big {
        display:block;
      }
      #reportlistlabel table td small {
        display:none;
      }


#report {
  z-index:500;
}

    #reportList>div {
      position:relative;
      box-sizing:border-box;
      height:14.25%;
      min-height:30px !important;
      padding:0 5px 0 0px;
      border-style:solid;
      border-width:0 1px 1px 1px;
      cursor:pointer;
      overflow:hidden;
    }
    #reportList>div * {
      line-height:100%;
    }
      #reportList>div.nophoto {
        padding-left:0px;
      }
      #reportList>div table {
        width:100%;
        height:100%;
      }
      #reportList>div table td {
        vertical-align:middle;
        white-space:nowrap;
      }
    #reportList .pos *,
    #reportList .neg * {
      color:#FFFFFF;
    }
    #reportList>div>sup {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      width:270px;
    }
    #reportList>div>sup td.name {
      width:100%;
    }
      #reportList>div.nophoto>sup u {
        display:inline-block;
        position:relative;
        width:10px;
        height:10px;
        margin:0 15px;
        border-radius:50%;
        top:0px;
      }
      #reportList>div>sup q {
        width:auto;
      }
      #reportList>div>sup q:after {
        display:none !important;
      }
      #reportList>div>sup h1 {
        font-size:12px;
        line-height:16px;
        padding:2px 0 0 0;
        font-weight:normal;
        white-space:nowrap;
      }
      #reportList>div>sup q {
        position:relative;
        display:inline-block;
        font-size:12px;
        line-height:16px;
        font-weight:bold;
        text-align:right;
        top:auto;
      }

    #reportList>div>sub {
      position:absolute;
      top:0;
      bottom:0;
      left:275px;
      right:0;
      margin:0 10px 0 0;
    }
      #reportList>div>sub td {
        text-align:center;
        width:8.33%;
      }
      body.autoupdate #reportList>div>sub td {
        width:9.09%;
      }
      body.autoupdate #reportList>div>sub table tr>td:first-child+td {
        display:none;
      }
      #reportList>div>sub td.progress:before {
        content:'► ';
        color:rgba(255,255,255,0.3);
        font-size:12px;
      }
      #reportList>div>sub td.progress.pos:before {
        content:'▲ ';
        color:#26E712;
      }
      #reportList>div>sub td.progress.neg:before {
        content:'▼ ';
        color:#FF0000;
      }

    #reportList>div>input {
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      left:250px;
    }



#boatcard article * {
  line-height:100%;
}
  #boatcard article {
    width:200px;
  }
  #boatcard table {
    width:100%;
    height:100%;
  }

    #boatcard article sup {
      height:30px;
      padding-left:7px !important;
    }
    #boatcard article sup .rank {
      display:none;
    }
    #boatcard article sup .color,
    #boatcard article sup .name {
      vertical-align: middle;
    }
    #boatcard article sup .color u {
      display:inline-block;
      position:relative;
      width:10px;
      height:10px;
      border-radius:50%;
      top:0px;
      margin:auto 5px;
    }
    
    #boatcard article sub {
    }
    #boatcard article sub table th {
      font-weight: normal;
      text-align: center;
      width:auto;
      color:#FFFFFF;
      padding:0.3ex;
    }
    #boatcard article sub table td {
      font-weight: normal;
      text-align: center;
      width:auto;
      padding:0.3ex;
      padding-bottom:1ex;
    }
    #boatcard article sub table tbody th:after {
      display:none;
    }

#weather {
  top:0;
  left:50%;
  right:auto;
  transform:translateX(-50%);
}  

    #refresh.on svg {
      display:none;
    }
    #refresh.on:before {
      content:'LIVE';
      display:block;
      left:75px;
      top:0;
      margin-right:15px;
      background-color:#F50202;
      color:#ffffff;
      font-weight:bold;
      font-size:18px;
      padding:0.3ex 0.7ex;
    }

#vormenu {
  display:none;
  position:absolute;
  right:60px;
  top:20px;
  width:250px;
  height:70px;
  z-index:400;
  color:#FFFFFF;
  white-space:nowrap;
}
    #vormenu.open {
      width:400px;
      animation-name: vormenu_open;
      animation-duration: 300ms;
    }
        @keyframes vormenu_open {
          from {width: 250px;}
          to {width: 400px;}
        }
    #vormenu.close {
      width:250px;
      animation-name: vormenu_close;
      animation-duration: 300ms;
    }
        @keyframes vormenu_close {
          from {width:400px;}
          to {width:250px;}
        }

    #vormenu header {
      background-color:rgba(0,0,0,1);
      padding:5px 25px 10px 30px;
    }
        #vormenu header h1 {
          font-size:28px;
          margin-bottom:0.3ex;
        }
        #vormenu header h2 {
          position:relative;
          font-size:14px;
        }
        #vormenu header tt {
          position:absolute;
          font-size:12px;
          left:5px;
          bottom:10px;
          cursor:pointer;
          opacity:0.5;
        }
        #vormenu header tt:hover,
        #vormenu header tt.active {
          opacity:1;
        }
        #vormenu header svg {
          display:none;
        }
        #vormenu header span {
          display:none;
        }

    #vormenu main {
      position:absolute;
      display:none;
      top:0;
      transform:translateX(-100%);
      background-color:rgba(0,0,0,1);
      box-sizing:border-box;
      padding:15px 0 14px 0;
      overflow:hidden;
    }
        #vormenu main.open {
          display:block;
          width:250px;
          animation-name: leglinks_open;
          animation-duration: 300ms;
        }
            @keyframes leglinks_open {
              from {width: 0px;}
              to {width: 250px}
            }
        #vormenu main.close {
          display:block;
          width:0px;
          animation-name: leglinks_close;
          animation-duration: 300ms;
        }
            @keyframes leglinks_close {
              from {width: 250px;}
              to {width: 0px;}
            }
    
        #vormenu main tr {
          color:rgba(255,255,255,0.4);
          cursor:auto;
          pointer-events:none;
        }
        #vormenu main tr.active {
          color:rgba(255,255,255,1);
          cursor:pointer;
          pointer-events:auto;
        }
        #vormenu main tr.active:hover {
          color:rgba(255,255,255,0.8);
        }
        #vormenu main td {
          padding:6px 5px;
        }

    #vormenu footer {
      display:none;
      position:absolute;
      top:100px;
      height:250px;
      background-color:rgba(0,0,0,0.6);
      overflow:hidden;
    }
    #vormenu footer.open {
      display:block;
      width:200px;
      left:-201px;
      animation-name: boatdata_open;
      animation-duration: 300ms;
    }
        @keyframes boatdata_open {
          from {width: 0px;left:0px}
          to {width: 200px;left:-201px}
        }
    #vormenu footer.close {
      display:block;
      width:0px;
      left:0;
      animation-name: boatdata_close;
      animation-duration: 300ms;
    }
        @keyframes boatdata_close {
          from {width: 200px;left:-201px}
          to {width: 0px;left:0px}
        }
    #vormenu footer table {
      width:200px;
    }
        #vormenu footer table th {
          font-weight: normal;
          text-align: center;
          width:auto;
          color:#FFFFFF;
          padding:0.3ex;
        }
        #vormenu footer table tr:first-of-type>th {
          padding:0.5ex;
          border-bottom:1px solid rgba(255,255,255,0.1);
        }
        #vormenu footer table td {
          font-weight: normal;
          text-align: center;
          width:auto;
          padding:0.3ex;
          padding-bottom:1ex;
          color: rgba(255, 255, 255, 0.7);
        }





body.fullscreen #buttons {
  top:5px;
}
body.fullscreen #sig {
  top:0;
}
body.fullscreen #weather {
  top:0;
}

#leafletcredits {
  bottom:60px !important;
  top:auto !important;
}
#navionicscredits {
  top:auto !important;
  bottom:105px !important;
  left:60px !important;
}

#nextreportchrono {
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  opacity:1;
  z-index:200;
  font-size:16px;
}
#nextreportchrono.weather {
  top:50px;
}
body.STANDBY #nextreportchrono,
body.FINISH #nextreportchrono,
body.autoupdate #nextreportchrono {
  display:none;
}



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


#areasLayer #antarcticices {
  fill:#BBBCBC;
  stroke:none;
}
#main[rel="LEG3"] #groundLayer path[rel="5"] {
  fill:#FFFFFF;
}

#notices {
  display:none;
  z-index:400;
  width:250px;
}
    #notices label {
      display:block;
      position:relative;
      line-height:25px;
      padding:0 5px;
      background-color:#000000;
    }
        #notices label svg {
	        display:block;
	        position:absolute;
	        top:50%;
	        transform:translateY(-50%);
	        right:5px;
	        width:22px;
	        height:12px;
	        stroke:#FFFFFF;
	        fill:none;
	        stroke-width:2;
	        cursor:pointer;
	        opacity:0.5;
        }
        #notices.open label svg {
	        transform:translateY(-50%) rotate(180deg);
        }
        
    #notices .content {
      display:none; 
   	  background-color: rgba(0,0,0,0.6);
	  }
    #notices a {
      display:block;
      padding:5px 10px 5px 10px;
      border-top:1px solid rgba(255,255,255,0.2);
    }
        #notices a.alert {
          background-color:#FC050F;
        }  
        #notices a .date {
          color:rgba(255,255,255,0.7);
        }
        #notices a .text {
          color:rgba(255,255,255,1);
          font-size:90%;
        }      

#threedbutton {
  position:absolute;
	bottom: calc(35% + 114px);
	left:10px;
  display:block;
  z-index:800;
	width: 38px;
	height: 38px;
	text-align:center;
	line-height:38px;
	font-size:20px;
	color:#ffffff;
	border-radius: 50%;
	border: 2px solid #FFFFFF !important;
}  

#areasLayer path#AEZ {
	fill: rgba(226,0,26,0.2);
	stroke:none;
}

#main[rel="LEG11"] #bt_predpos {
  display:none;
  visibility:hidden;
}