#main {
  overflow:hidden !important;
}
  #main>div {
    position:absolute;
  }

#progressline {
  top:5px;
  left:18px;
  right:18px;
}
  /*axis*/
  #progressline>p {
    position:relative;
    height:6px;
  }
  /*start, arrival city*/
  #progressline sup, #progressline sub {
    position:absolute;
    bottom:-20px;
  }
  #progressline sub {
    left:-18px;
  }
  #progressline sup {
    right:-18px;
  }
  /*start, arrival point*/
  #progressline s, #progressline u {
    position:absolute;
    width:18px;
    height:6px;
  }
  #progressline s {
    left:-18px;
  }
  #progressline u {
    right:-18px;
  }
  #progressline s:after,
  #progressline u:before {
    content:'';
    position:absolute;
    display:block;
    top:0;
    width:0;
    height:0;
  }
  #progressline s:after {
    right:-2px;
    border-top: 6px solid transparent; 
    border-right: 2px solid transparent;
  }
  #progressline u:before {
    left:-2px;
    border-bottom: 6px solid transparent; 
    border-left: 2px solid transparent;
  }

  /*fleet extend*/
  #progressline i.fleet {
    position:absolute;
    top:0;
    display:block;
    left:0;
    right:100%;
    height:6px;
    margin-left:-2px;
  }
  /*record holder*/
  #progressline i.boat {
    position:absolute;
    top:0;
    width:4px;
    height:6px;
    left:0;
    margin-left:-2px;
    cursor:pointer;
  }
  /*selected boat*/
  #progressline b {
    position:absolute;
    top:0;
    width:4px;
    height:6px;
    left:0;
    margin-left:-2px;
    cursor:pointer;
  }
    #progressline b:before,
    #progressline b:after,
    #progressline i:before,
    #progressline i:after {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
    }
    #progressline b:before,
    #progressline i:before {
      left:-2px;
      border-bottom: 6px solid transparent; 
      border-left: 2px solid transparent;
    }
    #progressline b:after,
    #progressline i:after {
      right:-2px;
      border-top: 6px solid transparent; 
      border-right: 2px solid transparent;
    }
    #progressline b>svg {
      display:none;
      position:absolute;
      top:-9px;
      left:-2px;
      width:8px;
      height:20px;
    }
    body.TRACKING #progressline {
      display:none;
    }


#buttons {
  right:0;
  top:34px;
  bottom:5px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:auto;
}
    #buttons span {
      display:block;
    }
    #buttons span+span {
      padding-top:14px;
    }

    #buttons a {
        display:block;
        width:38px;
        height:32px;
        overflow:hidden;
        position:relative;
        visibility:hidden;
      }
    #buttons a img {
      position:absolute;
      width:26px;
      height:26px;
      left:6px;
      top:35px;
      pointer-events:none;
    }
    #buttons a.off img.off,
    #buttons a.over img.over,
    #buttons a.on img.on {
      top:3px;
    }
    #buttons a.off img.over,
    #buttons a.off img.on,
    #buttons a.over img.off,
    #buttons a.over img.on,
    #buttons a.on img.off {
      top:35px;
    }

    #buttons a.disabled {
      opacity:0.3;
      cursor:default;
    }
    body.TRACKING #buttons {
      top:5px;
    }
    body.EARTH #bt_home,
    body.EARTH #bt_zoomfleet,
    body.EARTH #bt_zoomtop3,
    body.EARTH #bt_weather,
    body.EARTH #bt_gridlines,
    body.EARTH #bt_distance {
      display:none;
    }


#sig {
  left:340px;
  top:35px;
  right:45px;
  bottom:33px;
  overflow:hidden;
  box-sizing:border-box;
}
/*
  #sig:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -moz-box-shadow: inset 1px 1px 3px 0px #656565;
    -webkit-box-shadow: inset 1px 1px 3px 0px #656565;
    -o-box-shadow: inset 1px 1px 3px 0px #656565;
    box-shadow: inset 1px 1px 3px 0px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=3);
    pointer-events:none;
  }
*/
body.TRACKING #sig {
  left:0px;
  top:6px; 
}

#earth {
  position:absolute;
  display:none;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
#earth.locked {
  pointer-events:none;
}
body.EARTH #earth {
  display:block;
}


#map {
  position:relative!important;
}
body.EARTH #map {
  display:none;
}

#groundLayer,
#bathyLayer {
  pointer-events:none !important;
  touch-action:none !important;
}

#boatsLayer g {
  cursor:pointer;
  stroke-opacity:0.5;
  display:none;
}
#boatsLayer g.ghost {
  opacity:0.2;
}
body.RECORD #boatsLayer g.ghost {
  opacity:1 !important;
}
#boatsLayer circle {
  opacity:0;
}
body.RACE #layout.noclass #boatsLayer g.ghost {
  display:none !important;
}

#tracksLayer g {
  fill:none;
  display:none;
  stroke-opacity:0.3;
}
#tracksLayer g.ghost {
  opacity:0.2;
}
#layout.noclass #tracksLayer g.ghost {
  display:none !important;
}
#referencesLayer {
}
    #referencesLayer path {
      opacity:0.3;
      fill:none;
    }
    #referencesLayer g {
      cursor:pointer;
    }
    #referencesLayer g circle:last-of-type {
      fill-opacity:0;
    }
    #referencesLayer g:hover {
      opacity:1;
    }
    #referencesLayer g:hover circle:last-of-type {
      fill-opacity:1;
    }
    #referencesLayer g:hover text {
      display:inherit;
      fill:#FFFFFF;
      text-shadow: black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em,  black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em;
    }

#windLayer {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;
}
    #windLayer.scale path {
      pointer-events:none;
    }
#orthoLayer path {
  fill:none;
  stroke-opacity:0.7;
}
#gatesLayer path {
  fill:none;
}
    #gatesLayer circle {
      stroke:none;
    }
#daynightLayer {
  opacity:0.2;
  display:none;
  pointer-events:none;
  animation-name: daynight;
  animation-duration: 1.5s;
  animation-iteration-count:1;
}
@keyframes daynight {
  from {opacity: 0;}
  to {opacity: 0.2;}
}    
#ruleLayer {
}
  #ruleLayer g {
  stroke-dasharray:none !important;
  cursor:pointer;
  }
  #ruleLayer>g>circle {
    stroke-opacity:1;
    fill-opacity:0.2;
  }
  #ruleLayer>g>path {
    stroke-opacity:1;
    fill:none;
  }
  #ruleLayer>path {
    stroke-opacity:1;
    fill:none;
  }
  #ruleLayer>g.virtual>circle {
    stroke:transparent;
    fill:transparent;
  }
  #ruleLayer>g.virtual>path {
    stroke-opacity:0.7;
  }
  #poiLayer g text {
    fill:#FFFFFF;
    text-shadow: 1px 1px 1px #1E1E1E,  -1px -1px 1px #1E1E1E,  1px -1px 1px #1E1E1E,  -1px 1px 1px #1E1E1E;
    cursor:default;
  }
  #poiLayer g.arrv text,
  #poiLayer g.start text {
    font-weight:bold;
  }
  #poiLayer g.area {
    mix-blend-mode:soft-light;
    opacity:0.6;
  }
  #poiLayer g.area circle {
    fill:transparent;
  }
  #poiLayer g.area text {
    font-weight:bold;
    fill:#FFFFFF;
    text-shadow: 1px 1px 1px #000000,  -1px -1px 1px #000000,  1px -1px 1px #000000,  -1px 1px 1px #000000;
    font-size:16px;
  }
  #poiLayer g[rel="100000"] g {
    opacity:0.2;
  }
  #poiLayer g[rel="100000"] g:hover {
    opacity:1;
  }
  #mediaLayer {
    display:none;
  }
  #mediaLayer g {
    display:none;
    cursor:pointer;
  }
  #mediaLayer g path {
    transform: translate(-28px,-24px) scale(0.8);
  }
  #mediaLayer g:hover path {
    transform: translate(-35px,-30px) scale(1);
  }

.tip {
    position:absolute;
    display:none;
    padding:3px 5px;
    font-family:monospace;
    font-size:11px;
    white-space:nowrap;
    pointer-events:none;
    text-shadow: black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em,  black 0.1em 0.1em 0.1em, black 0.1em 0.1em 0.1em;
}




#report {
  left:0px;
  top:35px;
  bottom:5px;
  width:335px;
  visibility:hidden;
}
  #boatclassesList {
    width:100%;
    border:0px;
    height:30px;
    position:relative;
  }
      #boatclassesList select {
        width:100%;
        height:30px;
        -webkit-appearance: none; 
      }
      #boatclassesList option {
        font-size:21px;
        text-align:center !important;
      }
      #boatclassesList span {
        position:absolute;
        display:block;
        top:0;
        bottom:0;
        left:0;
        right:0;
        font-size:21px;
        text-align:center !important;
        pointer-events:none;
      }
      #boatclassesList svg {
        position:absolute;
        top:12px;
        right:5px;
        width:14px;
        height:10px;
        pointer-events:none;
      }
      #boatclassesList.open svg {
        transform:rotate(180deg);
      }
      
  #reportList {
    position:absolute;
    overflow:auto;
    top:35px;
    left:0;
    right:0;
    bottom:0px;
  }
  body.RACE.monoclass #reportList {
    top:0px;
  }
  body.RACE.monoclass #boatclassesList {
    display:none;
  }
  #reportList>div {
    *display:none;
    position:relative;
    box-sizing:border-box;
    height:75px;
    padding:0 5px 0 95px;
    border-style:solid;
    border-width:0 1px 1px 1px;
    cursor:pointer;
    overflow:hidden;
  }
  #reportList>div.nophoto {
    padding-left:35px;
  }
  #reportList>div>sup {
    display:block;
  }
  #reportList>div>sup u {
    position:absolute;
    display:block;
    top:37px;
    left:5px;
    width:60px;
    height:30px;
    box-sizing:border-box;
    z-index:100;
  }
  #reportList>div.nophoto>sup u {
    position:absolute;
    display:block;
    top:2px;
    left:2px;
    bottom:2px;
    width:4px;
    height:auto;
  }
  #reportList>div>sup img {
    position:absolute;
    left:5px;
    top:7px;
    border-radius:0 0% 50% 0;
    z-index:101;
  }
  #geoblog>header>sup q,
  #boatcard article sup q,
  #reportList>div>sup q {
    position:absolute;
    display:block;
    font-size:22px;
    line-height:20px;
    width:2.4ex;
    font-weight:bold;
    text-align:right;
  }
  #reportList>div>sup q {
    top:3px;
    left:65px;
  }
  #reportList>div.nophoto sup q {
    left:5px;
  }
  #reportList>div>sup q:after,
  #reportList>div>sup q.up:after,
  #reportList>div>sup q.down:after {
    position:absolute;
    top:18px;
    right:0;
    display:inline-block;
    font-size:12px;
  }
  #reportList>div>sup q:after {
    content:'●';
  }
  #reportList>div>sup q.eq:after {
    content:'►';
    opacity:0.5;
  }
  #reportList>div>sup q.up:after {
    content:'▲';
  }
  #reportList>div>sup q.down:after {
    content:'▼';
  }
  #geoblog>header>sup h1,
  #boatcard article sup h1,
  #reportList>div>sup h1 {
    display:block;
    font-size:20px;
    line-height:20px;
    padding:2px 0 0 0;
    font-weight:normal;
    
  }
  #geoblog>header>sup h2,
  #boatcard article sup h2,
  #reportList>div>sup h2 {
    display:block;
    font-weight:normal;
    font-size:16px;
    line-height:16px;
  }

  #reportList>div>sub {
    display:block;
    font-size:13px;
    line-height:14px;
    margin-top:4px;
  }
  #reportList>div>sub tt {
    float:right;
  }
  #reportList>div>sub fieldset.discrete {
    opacity:0.6;
  }
  #reportList>div>sup.STM q,
  #reportList>div>sup.NL q,
  #reportList>div>sup.SUS q,
  #reportList>div>sup.DNF q,
  #reportList>div>sup.RET q {
    visibility:hidden;
  }
  
  
  body.RECORD #report #boatclassesList,
  body.RECORD #report #reportList {
   display:none;
  }
  body.TRACKING #report {
    display:none;
  }

#coords {
  position:absolute;
  left:345px;
  bottom:28px;
  height:25px;
  line-height:25px;
  font-size:12px;
  padding-left:5px;
  font-family:monospace;
}
  #coords>sup,
  #coords>sub {
    display:inline-block;
  }
  #coords>sub:after {
    content:'•';
    display:inline-block;
    margin:0 3px 0 5px;
  }
  body.TRACKING #coords {
    left:5px;
  }
  
  
#zoom {
  position:absolute;
  right:52px;
  bottom:42px;
  height:53px;
  width:22px;
}
    #zoom>b {
      position:absolute;
      display:block;
      width:22px;
      height:22px;
      cursor:pointer;
      border-radius:50%;
      -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      -o-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=2);
    }
    #zoom>b>sub {
      position:absolute;
      top:0;
      left:0;
      width:22px;
      height:22px;
      -moz-border-radius: 22px;
      -webkit-border-radius: 22px;    
      border-radius: 22px;
    }
    #zoom>b>sup {
      position:absolute;
      top:3px;
      left:3px;
      width:16px;
      height:16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;    
      border-radius: 16px;
    }
    #zoom>b:first-child {
      top:0;
    }
    #zoom>b:last-child {
      bottom:0;
    }
    #zoom svg {
      position:absolute;
      top:3px;
      left:3px;
      width:17px;
      height:17px;
    }
  
#time {
  position:absolute;
  left:340px;
  bottom:5px;
  height:28px;
  right:45px;
}
    #time td {
      position:relative;
      vertical-align:middle;
      white-space:nowrap;
    }
#refresh {
  padding:4px 4px;
  display:none;
}
    #refresh svg {
      display:block;
      width:20px;
      height:20px;
      transform:rotate(-90deg);
      border-radius:50%;
    }
    #refresh circle {
      fill: transparent;
      stroke: #655;
      stroke-width:32;
      stroke-dasharray: 0 100; /* for 38% */
    }
    body.STANDBY #refresh,
    body.FINISH #refresh {
      display:none;
    }
  #datetime,
  #chrono {
    font-size:18px;
    text-align:left;
    font-weight:bold;
    padding:0 5px;
  }
  #datetime:after,
  #chrono:after {
    content:'';
    position:absolute;
    display:block;
    top:0;
    right:-10px;
    width:0;
    height:0;
    border-top: 28px solid transparent; 
    border-right: 10px solid transparent;
  }
  #chrono+td {
    padding:0 12px;
  }
  #chrono b {
    color:rgba(0,0,0,0);
  }
  body.RECORD.STANDBY #chrono,
  body.RECORD.FINISH #chrono,
  body.TRACKING #chrono {
    display:none;
  }
  #datetime small {
    display:none;
  }
  
#replay {
  position:relative;
  display:none;
  padding:0 5px 3px 0;
  white-space:nowrap;
}
    #replay svg {
      display:inline-block;
      opacity:0.4;
      cursor:pointer;
      vertical-align:middle;
    }
    #replay svg.buttons {
      width:18px;
      height:18px;
      margin:0 7px;
    }
    #replay svg.slow,
    #replay svg.fast {
      width:12px;
      height:11px;
    }
    #replay p {
      position:absolute;
      height:12px;
      top:-14px;
      left:0;
      right:0;
      text-align:center;
      color: #ffffff;
      mix-blend-mode: difference;
      opacity: 0.7;
      font-size:11px;
      font-family:monospace;
    }
    #replay.off .pause,
    #replay.off p {
      display:none;
    }
    #replay.off svg.slow,
    #replay.off svg.fast {
      cursor:default;
      pointer-events:none;
    }
    #replay.on svg {
      opacity:0.7;
    }
    #replay.on svg.buttons {
      opacity:1;
    }
    #replay svg.active {
      opacity:1;
    }
    
#timeline {
  width:100%;
  box-sizing:border-box;
  padding:0 18px;
}
#timeline.off {
  visibility:hidden;
}
  #timeline span {
    display:inline-block;
    position:relative;
    height:24px;
    width:100%;
    box-sizing:border-box;
    cursor:pointer;
  }
  #timeline span u,
  #timeline span i {
    position:absolute;
    left:0;
    top:13px;
    bottom:9px;
    width:100%;
  }

  #timeline b {
    position:absolute;
    top:3px;
    left:0;
    width:24px;
    height:24px;
    cursor:pointer;
    margin-left:-11px;
  }
  #timeline b>sub {
    position:absolute;
    top:0;
    left:0;
    width:22px;
    height:22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;    
    border-radius: 22px;
  }
  #timeline b>sup {
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;    
    border-radius: 16px;
  }
body.TRACKING #time {
  left:0px;
}

#gridlines {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
}
    #gridlines svg {
      width:100%;
      height:100%;
    }
    #gridlines path {
      stroke-width:0.5;
      stroke-opacity:0.2;
      mix-blend-mode:difference;
    }
    #gridlines text {
      fill:#FFFFFF;
      mix-blend-mode:difference;
      font-size:11px;
      font-family:monospace;
      opacity:1;
    }


#boatcard {
  position:absolute;
  display:none;
  top:0;
  left:0;
  pointer-events:none;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));      
}
    #boatcard section {
      position:absolute;
      background-image:url(../img/compas.png);
      width:112px;
      height:112px;
      top:-56px;
      left:-56px;
    }
        #boatcard section img {
          width:112px;
          height:112px;
          border-radius:50%;
        }
        #boatcard section b svg {
          position:absolute;
          left:0;
          top:0; 
          width:112px;
          height:112px;
        }
        #boatcard section b path {
          stroke:#000000;
          stroke-opacity:0.5;
          stroke-width:0.5;
        }
        #boatcard section sub,
        #boatcard section sup {
          position:absolute;
          top:-20px;
          left:-20px;
          display:block;
          width:152px;
          height:152px;
        }
        #boatcard section sup:after,
        #boatcard section sub:after {
          position:absolute;
          bottom:0px;
          left:72px;
          content:'';
          width:0;
          height:0;
          border-left:4px solid transparent; 
          border-right:4px solid transparent;
          border-bottom:8px solid transparent;
        }
        #boatcard section sub:after {
          bottom:10px;
        }
        #boatcard section sup:after {
          bottom:6px;
        }
        #boatcard section sub svg,
        #boatcard section sup svg {
          width:152px;
          height:152px;
        }

        #boatcard section sub path,
        #boatcard section sup path {
          stroke-width:3px;
          fill:transparent;
        }

    #boatcard article {
      position:absolute;
      width:315px;
    }
        #boatcard article.qd0 {
          display:none;
        }
        #boatcard article.qd1 {
          left:1px;
          bottom:-2px;
        }
        #boatcard article.qd2 {
          left:1px;
          top:1px;
        }
        #boatcard article.qd3 {
          right:-2px;
          top:1px;
        }
        #boatcard article.qd4 {
          right:-2px;
          bottom:-2px;
        }
        #boatcard article.qd5 {
          left:-150px;
          bottom:58px;
        }
        #boatcard article.qd6 {
          left:-150px;
          top:65px;
        }
        #boatcard article>tt {
          position:absolute;
          display:block;
          width:57px;
          height:57px;
        }
        #boatcard article.qd0>tt,
        #boatcard article.qd5>tt,
        #boatcard article.qd6>tt {
          display:none;
        }
        #boatcard article.qd1>tt {
          bottom:-2px;
          left:-2px;
          border-radius:0 100% 0 0;
        }
        #boatcard article.qd2>tt {
          top:-2px;
          left:-2px;
          border-radius:0 0 100% 0;
        }
        #boatcard article.qd3>tt {
          top:-2px;
          right:-2px;
          border-radius:0 0 0 100%;
        }
        #boatcard article.qd4>tt {
          bottom:-2px;
          right:-2px;
          border-radius:100% 0 0 0;
        }
    #boatcard article sup {
      height:60px;
      padding:0 5px 0 95px;
    }
    #boatcard.noPhoto article sup {
      padding-left:35px;
    }
    #boatcard article sup q {
      top:2px;
      left:63px;
    }
    #boatcard.noPhoto article sup q {
      left:3px;
    }
    #boatcard article sup img {
      position:absolute;
      left:0px;
      top:0px;
    }
    #boatcard article.qd2 sup {
      padding:0 65px 0 75px;
    }
    #boatcard article.qd3 sup {
      padding-right:55px;
    }
    #boatcard article.qd2 sup q {
      left:47px;
    }
    #boatcard article.qd2 sup img {
      right:0px;
      left:auto;
      background-color:rgba(0,0,0,0.1);
    }
    #boatcard article sub {
      display:block;
      min-height:100px;
      padding:3px 5px 7px 5px;
      box-sizing:border-box;
    }
    #boatcard article sub fieldset {
      margin-bottom:7px;
    }
    #boatcard article sub p {
    }
    #boatcard article sub p.pos.neg {
      display:none;
    }
    #boatcard article sub p.neg.pos {
      display:none;
    }
    #boatcard article sub span {
      display:inline-block;
      width:100px;
      text-align:right;
      font-weight:bold;
    }
    #boatcard article sub dfn {
      display:inline-block;
      text-align:right;
    }
    #boatcard article sub fieldset.dist dfn {
      width:45px;
    }
    #boatcard article sub fieldset.compas dfn {
      width:25px;
    }
    #boatcard.noCompass section {
      visibility:hidden;
    }
    #boatcard.noCompass article>tt {
      display:none;
    }
    #boatcard.noCompass article.qd1 {
      left:15px;
      bottom:15px;
    }
    #boatcard.noCompass article.qd2 {
      left:15px;
      top:15px;
    }
    #boatcard.noCompass article.qd3 {
      right:15px;
      top:15px;
    }
    #boatcard.noCompass article.qd4 {
      right:15px;
      bottom:15px;
    }
    #boatcard.noCompass article.qd5 {
      left:-150px;
      bottom:58px;
    }
    #boatcard.noCompass article.qd6 {
      left:-150px;
      top:65px;
    }
    #boatcard.noCompass article.qd2 sup {
      padding:0 5px 0 95px;
    }
    #boatcard.noCompass article.qd2 sup q {
      left:63px;
    }
    #boatcard.noCompass article.qd2 sup img {
      left:0px;
      right:auto;
    }
    body.RECORD #boatcard article sup,
    body.RECORD #boatcard.noCompass article.qd2 sup {
      padding:0 5px 0 65px;
    }

#geoblog {
  display:none;
  position:absolute;
  left:20px;
  top:20px;
  min-width:300px;
  max-width:500px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.5));      
  border:1px solid #000000;
}
    #geoblog>* {
      position:relative;
      display:block;
    }
    #geoblog>header>sup,
    #geoblog>header>sub {
      display:block;
    }
    #geoblog>header>sup {
      height:60px;
    }
    #geoblog>header>sup img {
      float:left;
      margin-right:10px;
    }
    #geoblog>header>sup>q {
      display:none;
    }
    #geoblog>header>sub {
      padding:5px;
    }
    #geoblog>header>sub>* {
      display:block;
    }
    #geoblog>header>sub>p {
      font-size:12px;
      line-height:14px;
      opacity:0.5;
    }
    #geoblog>header>sub>big {
      font-size:16px;
      line-height:18px;
      font-weight:bold;
    }
    #geoblog>header>sub>small {
      white-space:normal;
      line-height:14px;
    }
    #geoblog>article {
      min-height:15px;
      padding:5px;
      box-sizing:border-box;
    }
    #geoblog>footer {
      padding:5px;
    }
    #geoblog u.wait {
      margin-left:calc(50% - 10px);
    }
    #geoblog>article>div {
      display:block;
      position:relative;
      width:100%;
      height:100%;
      white-space:nowrap;
    }
    #geoblog>article>div#mediaPhoto {
    }
    #geoblog>article>div#mediaPhoto img {
      width:100%;
      height:auto;
      margin-right:5px;
    }
    #geoblog>article>div#mediaPhoto.mediaPhotos {
      overflow:auto;
    }
    #geoblog>article>div#mediaPhoto.mediaPhotos img {
      width:95%;
    }
    #geoblog>article>div#mediaVideo {
      width:490px;
      height:276px;
    }
    #geoblog>header>tt {
      display:block;
      position:absolute;
      right:0;
      top:0;
      bottom:0;
      cursor:pointer;
    }
    #geoblog>header>tt.bkgweft {
      background-image:none !important;
    }
    #geoblog>header>tt>svg {
      width:20px;
      height:20px;
    }
    #geoblog>svg {
      position:absolute;
      top:0;
      left:0;
      pointer-events:none;
    }

#weather {
  position:absolute;
  top:35px;
  left:340px;
  right:43px;
  overflow:visible;
  display:none;
}  
    #weather section {
      position:relative;
      width:315px;
      margin-left:auto;
      margin-right:auto;
      height:28px;
      padding:1px 0 0 15px;
      box-sizing:border-box;
      white-space:nowrap;
      vertical-align:bottom;
    }
    #weather section:after,
    #weather section:before {
      content:'';
      position:absolute;
      display:block;
      top:0;
      width:0;
      height:0;
      border-top: 28px solid transparent; 
    }
    #weather section:after {
      right:-10px;
      border-right: 10px solid transparent;
    }
    #weather section:before {
      left:-10px;
      border-left: 10px solid transparent;
    }

    #weather b {
      display:inline-block;
      width:18px;
      height:20px;
      box-sizing:border-box;
      padding:3px 3px;
      cursor:pointer;
    }
    #weather b[rel="play"] {
      visibility:hidden;
    }
    #weather b>svg {
      width:10px;
      height:14px;
    }
    #weather span {
      position:relative;
      display:inline-block;
      overflow:hidden; 
      width:165px;
      height:20px;
      margin:0 7px 0 0;
    }
    #weather span pre {
      position:absolute;
      display:block;
      top:3px;
      bottom:-5px;
      left:0;
      right:18px;
      pointer-events:none;
      font-family:ptsans;
      font-size:15px;
      font-weight:bold;
      text-align:right;
      padding-right:6px;
    }
    #weather u.wait {
      display:none;
      position:absolute;
      top:4px;
      left:54px;
    }

    #weather span>svg {
      position:absolute;
      top:8px;
      right:3px;
      width:14px;
      height:10px;
      pointer-events:none;
    }
    #weather span.open>svg {
      transform:rotate(180deg);
    }
    #weather select { 
      border:0 !important;
      width:185px;
      height:25px;
      line-height:25px;
      -webkit-appearance: none; 
      font-size:15px;
      font-weight:bold;
      cursor:pointer;
    }
    #weather option {
      border:0 !important;
      *padding-right:40px;
      box-sizing:border-box;
      *margin-left:-50px;
      font-size:15px;
      font-weight:normal;
    }
    #weather.past b {
      cursor:not-allowed;
      opacity:0.4;
    }
    #weather.past select,
    #weather.past span svg {
      visibility:hidden;
    }
    #weather.wait u {
      display:block;
    }

    #weather.squid section {
      width:385px;
    }
    #weather.squid section a {
      display:block;
      position:absolute;
      bottom:8px;
      right:15px;
      width:67px;
      height:35px;
      background-image:url(../img/weather_squid.png);
      background-size:100% auto;
    }
body.TRACKING #weather {
  left:0px;
  top:6px; 
}



  .thumbcontrol,
  .thumbhelp {
    display:none;
  }





#dashboard {
  visibility:hidden;
  left:0px;
  top:35px;
  bottom:5px;
  width:320px;
  overflow:auto;
}
    #dashboard>div {
      padding-bottom:2px;
    }
    #dashboard>div * {
    }
    #dashboard section>* {
      display:block;
      box-sizing: border-box;
      margin-bottom:5px;
      text-align:center;
    }
    #dashboard h1 {
      font-size:1.55rem;
      height:2.4rem;
      line-height:2.3rem;
    }
    #dashboard header,
    #dashboard footer {
      padding:5px;
    }
    #dashboard aside {
      display:none;
    }
    #dashboard big {
      display:block;
      font-size:1.9rem;
      line-height:1.9rem; 
      margin-bottom:0.4rem;
    }
    #dashboard  big b:after,
    #dashboard  small b:after {
      content:' : ';
    }
    #dashboard  big b:empty:after,
    #dashboard  small b:empty:after {
      content:'';
    }
    #dashboard  .clock b:after {
      content:'';
    }
    #dashboard small {
      display:block;
      font-size:1rem;  
      line-height:1rem; 
    }
    #dashboard big sup,
    #dashboard small sup {
      font-size:50%;
      line-height:50%; 
      vertical-align:super;
    }
    #dashboard small sup {
      font-size:70%;
      line-height:70%; 
    }
    #dashboard big b,
    #dashboard small b,
    #dashboard big span,
    #dashboard small span {
      opacity:0.6;
    }
    #dashboard #performances>header>small:first-of-type,
    #dashboard #performances>header>small:last-of-type>span,
    #dashboard #performances path.record {
      display:none !important;
    }
    #dashboard #record header small.clock {
      margin-top:7px;
    }
    #dashboard #legend div {
      padding:3px;
    }
    #dashboard #legend div>span {
      display:block;
    }
    #dashboard #legend span {
      font-size:0.8rem;  
      line-height:0.8rem; 
    }
    #dashboard #legend span b {
      opacity:0.6;
      white-space:normal;
    }
    #dashboard #legend span sup {
      opacity:0.8;
      vertical-align:super;
    }
    #dashboard #legend div>i {
      display:none;
    }
#dashboardsummary {
  visibility:hidden;
  display:none;
}

#clipboard {
  display:block;
  position:absolute;
  top:10%;
  left:10%;
  width:80%;
  height:80%;
  background-color:#FFFFFF;
  color:#000000;
  font-family:monospace;
  font-size:12px;
  z-index:10000;
  box-shadow: 1px 1px 3px 0px #656565;
  padding:7px;
}






body.debugsig #sig {
  top:200px;
  right:400px;
  bottom:200px;
  overflow:visible !important;
}
body.debugsig #sig:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  outline:1px solid #FF00FF;
  pointer-events:none;
}
body.debugsig #reportList {
  width:0;
}

body.debugsig #buttons {
  z-index:10000;
}


body.debugearth #map {
  right:50%;
}

body.debugearth #earth {
  display:block !important;
  left:50%;
  outline:2px solid #FF00FF;
}




@media screen and (max-width:900px) {
  #progressline sub,
  #progressline sup {
    display:none;
  }
    #bt_fullscreen,
    #bt_zoommanual {
      display:none !important;
    }
    #sig {
      left:0px;
      top:85px;
    }
    body.RACE.multiclass #sig {
      top:110px;
    }
  #buttons {
    top:84px;
    bottom:40px;
  }
    body.RACE.multiclass #buttons {
      top:109px;
    }
  #time {
    left:0px;
  }
    #refresh {
      padding:0px 2px;
    }
    #datetime,
    #chrono {
      padding:0 2px;
      font-size:14px;
      *font-weight:normal;
    }
    #chrono+td {
      padding:0 8px;
    }
    #datetime big {
      display:none;
    }
    #datetime small {
      display:inline;
    }
      #timeline span {
        width:calc(100% - 20px);
      }
      #timeline b {
        display:none;
      }
    #coords {
      display:none; 
    }
    #zoom {
      display:none; 
    }
    #replay {
      padding:0 10px;
    }
    #replay svg.buttons {
      width:26px;
      height:25px;
    }
    #replay svg.slow,
    #replay svg.fast {
      width:18px;
      height:18px;
    }


  #boatcard article sup {
    display:none !important;
  }

  #weather {
    left:0px;
    right:45px;
    top:85px;
  }  
    body.RACE.multiclass #weather {
      top:110px;
    }
    #weather section:after,
    #weather section:before {
      display:none;
    }
    #weather section,
    #weather.squid section {
      width:100% !important;
    }
    #weather.squid section a {
      display:block;
      position:absolute;
      top:16px;
      left:50%;
      margin-left:-22px;
      right:auto;
      width:44px;
      height:24px;
    }

  #report {
    top:20px;
    right:45px;
    width:auto;  
    height:60px;
    overflow:hidden; 
  }
    body.RACE.multiclass #report {
      top:15px;
      height:90px;
      right:0;
    }
  #boatclassesList {
    height:24px;
  }
      #boatclassesList select {
        height:24px;
      }
      #boatclassesList option {
        font-size:16px;
      }
      #boatclassesList span {
        font-size:16px;
        font-weight:bold;
      }
    #boatclassesList svg {
      top:8px;
    }
    #reportList {
      overflow:hidden; 
      top:34px;
    }
    body.RACE.multiclass #reportList {
      top:29px;
      margin-right:45px;
    }
    
      #reportList>div {
        height:60px;
        padding-left:85px;
        border-left-width:0;
      }
      #reportList>div>sup u {
        top:30px;
        left:0px;
      }
      #reportList>div>sup img {
        left:0px;
        top:0px;
      }
      #boatcard article sup q,
      #reportList>div>sup q {
        font-size:16px;
        line-height:14px;
        width:2.4ex;
      }
      #reportList>div>sup q {
        top:2px;
        left:60px;
      }
      #reportList>div>sup q:after,
      #reportList>div>sup q.up:after,
      #reportList>div>sup q.down:after {
        top:14px;
        font-size:11px;
      }
      #reportList>div>sup h1 {
        font-size:16px;
        line-height:14px;
        font-weight:bold;
    
      }
      #reportList>div>sup h2 {
        font-size:13px;
        line-height:13px;
      }

      #reportList>div>sub {
        font-size:12px;
        line-height:12px;
        margin-top:2px;
      }
        
      #reportList>div>sub tt {
        margin-right:15px;
      }

#dashboard {
  display:none;
  left:0px;
  right:45px;
  width:auto;
  top:20px;
  overflow:hidden;
}
    #dashboard h1 {
      font-size:1.3rem;
      height:25px;
      line-height:25px;
      font-weight:bold;
    }
    #dashboard big {
      font-size:1.4rem;
      line-height:1.4rem; 
      margin-bottom:0.1rem;
    }
    #dashboard small {
      font-size:0.9rem;  
      line-height:0.9rem; 
    }
    #dashboard section>* {
      margin-bottom:3px;
    }
    #dashboard header,
    #dashboard footer {
      padding:2px;
    }
    
#dashboardsummary {
  display:block;
  position:absolute;
  left:0;
  top:20px;
  right:43px;
  width:auto;  
  height:60px;
  overflow:hidden; 
  font-size:1.1rem;
  line-height:1.2rem;
  box-sizing:border-box;
  padding:3px;
  text-align:center; 
  font-size:1rem;
  line-height:1rem;
}

.thumbcontrol {
  display:block;
  position:absolute;
  right:-5px;
  width:70px;
  height:70px;
  -moz-border-radius:70px;
  -webkit-border-radius:70px;    
  border-radius:70px;
  z-index:200;
  cursor:pointer;
}
  .thumbcontrol b {
    position:absolute;
    top:5px;
    left:5px;
    width:50px;
    height:50px;
    cursor:pointer;
  }
  .thumbcontrol b>sub {
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:60px;
    -moz-border-radius:60px;
    -webkit-border-radius:60px;    
    border-radius:60px;
  }
  .thumbcontrol b>sup {
    position:absolute;
    top:4px;
    left:4px;
    width:52px;
    height:52px;
    -moz-border-radius:52px;
    -webkit-border-radius:52px;    
    border-radius:52px;
  }
  .thumbcontrol svg {
    position:absolute;
  }
    #thumblist {
      top:14px;
    }
    body.RACE.multiclass #thumblist {
      top:39px;
    }
    body.TRACKING  #thumblist {
      display:none;
    }
      #thumblist svg {
      width:30px;
      height:30px;
      top:18px;
      left:15px;
      }
    #thumbsliders {
      bottom:0px;
    }
    #thumbsliders svg {
      bottom:5px;
      width:42px;
      height:42px;
      top:9px;
      left:9px;
    }

.thumbhelp {
  display:none;
  position:absolute;
  opacity:0; 
  }
    .thumbhelp b {
      display:block;
      font-size:24px;
      font-weight:bold;
      text-align:center;
      line-height:24px;
    }
    .thumbhelp i {
      display:block;
      font-size:16px;
      text-align:center;
      line-height:16px;
      margin:-130px 10px 0 10px;
      padding:7px;
      background-color:rgba(255,255,255,0.1);
      border:1px solid #FFFFFF;
    }
    .thumbhelp svg {
      position:absolute;
      height:65px;
      width:65px;
    }
    #thumbtimehelp {
      left:25px;
      right:87px;
      bottom:40px;
      height:24px;
    }
    #thumbzoomhelp,
    #thumblisthelp {
      right:55px;
      top:107px;
      bottom:75px;
      width:24px;
    }
        #thumbtimehelp svg:first-of-type {
          left:-20px;
          top:-4px;
          height:32px;
        }
        #thumbtimehelp svg:last-of-type {
          right:-20px;
          top:-4px;
          height:32px;
        }
        #thumbzoomhelp b,
        #thumblisthelp b {
          position:absolute;
          -webkit-transform: rotate(270deg);
          -moz-transform: rotate(270deg);
          -ms-transform: rotate(270deg);
          -o-transform: rotate(270deg);
          transform: rotate(270deg);
          transform-origin: left center 0;
          margin-left:10px;
          top:65%;
          white-space:nowrap;
        }
        #thumbzoomhelp svg:first-of-type,
        #thumblisthelp svg:first-of-type {
          top:-20px;
          left:-4px;
          width:32px;
        }
        body.RACE.multiclass #thumbzoomhelp svg:first-of-type,
        body.RACE.multiclass #thumblisthelp svg:first-of-type {
          top:15px;
        }
        #thumbzoomhelp svg:last-of-type,
        #thumblisthelp svg:last-of-type {
          bottom:-20px;
          left:-4px;
          width:32px;
        }
    
    .thumbhelp.on {
      display:block;
      animation-name: thumbhelp;
      animation-duration: 1.8s;
      animation-iteration-count:1;
      }
      @keyframes thumbhelp {
      0%    {opacity: 0;}
      40%   {opacity: 1;}
      60%   {opacity: 1;}
      100%  {opacity: 0;}
      }    
        
      body.RECORD #thumblisthelp {
        visibility:hidden;
      }
    
}

@media screen and (max-width:350px) {
  #chrono {
    display:none;
  }
  
}