#progressline>p {
  background-color:rgba(255,255,255,0.2);
  
}
  #progressline sup, #progressline sub {
    color:#FFFFFF;
  }
  #progressline s, #progressline u {
    background-color:#D21216;
  }
  #progressline s:after {
    border-top-color:#FFFFFF;
  }
  #progressline u:before {
    border-bottom-color:#D21216;
  }
  #progressline i:before {
    border-bottom-color:#D21216;
  }
  #progressline i:after {
    border-top-color:#D21216;
  }

  #progressline i.fleet {
    background-color:#9A9DAF;
  }
    #progressline i.fleet:before {
      border-bottom-color:#9A9DAF;
    }
    #progressline i.fleet:after {
      border-top-color:#9A9DAF;
    }
  /*record holder*/
  #progressline i.boat {
    background-color:#215076;
  }
  /*selected boat*/
  #progressline b {
    background-color:#FFFFFF;
  }
    #progressline b:before {
      border-bottom-color:#FFFFFF;
    }
    #progressline b:after {
      border-top-color:#FFFFFF;
    }
  #progressline b#fixed {
    background-color:#FFFFFF !important;
  }
    #progressline b#fixed:before {
      border-bottom-color:#FFFFFF;
    }
    #progressline b#fixed:after {
      border-top-color:#FFFFFF;
    }
    #progressline b>svg {
      fill:#FFFFFF;
    }


#buttons {
  background-color:#020A36;
  border:1px solid #020A36;  
}
  #buttons a {
    background-color:transparent;
  }
  #buttons a img.off {
    color:#FFFFFF;
    opacity:1.0;
  }
  #buttons a img.over {
    color:#FFFFFF;
    opacity:1.0;
  }
  #buttons a img.on {
    color:#FFFFFF;
    opacity:1.0;
  }
  #buttons a.off {
    border-bottom:0px solid transparent;
  }
  #buttons a.over,
  #buttons a.on.alt:hover,
  #buttons a.on {
    background-color:#D21216 !important;
  }
  #buttons a.on.alt {
    background-color:rgba(210,18,22,0.6) !important;
  }


#sig {
  background-color:#020A36;
}

#navionicsOption .wait path {
  stroke:#020A36;
}


#boatsLayer path {
  stroke:#000000;
}
#boatsLayer text {
  fill:#FFFFFF;
  opacity:0.4;
}
#tracksLayer g {
  stroke-opacity:0.15;
}
#groundLayer path {
  fill:#E8EAEA;
}
#bathyLayer rect {
  fill:#020A36;
}
#bathyLayer image {
  mix-blend-mode:screen;
  opacity:0.2;
}

#orthoLayer {
  stroke-dasharray:6,2;
  stroke-width:1;
  stroke:rgba(200,232,247,1);
}
#areasLayer path {
  fill:rgba(210,18,22,0.3);
  stroke:rgba(210,18,22,1);
}
#gatesLayer path {
  stroke:rgba(255,255,255,1);
}
#gatesLayer circle {
  fill:rgba(255,255,255,1);
}
  #daynightLayer {
    fill:#000000;
  }
#referencesLayer {
  stroke-dasharray:8,3;
  stroke-width:1;
}
    #referencesLayer path {
      opacity:0.5;
      stroke:#FFFFFF;
    }
    #referencesLayer circle {
      opacity:0.5;
      fill:#FFFFFF;
    }
    #referencesLayer g.currentPosition circle {
      fill:#FFFFFF;
      opacity:1;
    }

#ruleLayer {
  stroke-dasharray:8,3;
}
  #ruleLayer>g>circle {
    stroke:#C8E8F7;
    fill:#C8E8F7;
  }
  #ruleLayer>g>path {
    stroke:#C8E8F7;
  }
  #ruleLayer>path {
    stroke:#C8E8F7;
  }

  #poiLayer g.arrv circle,
  #poiLayer g.start circle {
    fill:#D21216;
  }
  #poiLayer g.isle circle {
    fill:#D21216;
  }
  #poiLayer g.isle text {
    fill:#D21216;
  }
  
  
.tip {
  color:#ffffff;
}


#coords {
  color:#FFFFFF;
  mix-blend-mode:difference;
  opacity:0.8;
}

#zoom>b {
}
  #zoom>p {
    background-color:rgba(255,255,255,0.05);
  }
  #zoom svg {
    fill:#444444;
    opacity:0.6;
  }
  #zoom b>sub {
    background:         linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background:    -moz-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background: -webkit-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
    background:      -o-linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
  }
  #zoom b>sup {
    background:         linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background:    -moz-linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background: -webkit-linear-gradient(135deg, #FFFFFF 35%, #E4E4E4 75%);
    background:      -o-linear-gradient(-45deg, #FFFFFF 35%, #E4E4E4 75%);
  }
  #zoom b:hover svg {
    fill:#020A36;
    opacity:1;
  }
  #zoom b.on>sub {
    background:         linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background:    -moz-linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background: -webkit-linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background:      -o-linear-gradient(135deg, #D21216 35%, #900006 75%);
  }
  #zoom b.on>sup {
    background:         linear-gradient(135deg, #D21216 35%, #900006 75%);
    background:    -moz-linear-gradient(135deg, #D21216 35%, #900006 75%);
    background: -webkit-linear-gradient(135deg, #D21216 35%, #900006 75%);
    background:      -o-linear-gradient(-45deg, #D21216 35%, #900006 75%);
  }
  #zoom b.on svg {
    fill:#FFFFFF;
    opacity:1;
  }
  

#time {
  background-color:#020A36;
}

#refresh {
  background-color:#D21216;
  color:#ffffff;
}
  #refresh circle {
    stroke: #FFFFFF;
    stroke-opacity:0.5;
  }

#datetime {
  background-color:#D21216;
  color:#ffffff;
}
  #datetime:after {
    border-top-color:#D21216;
  }

#chrono {
  background-color:#D21216;
  color:rgba(255,255,255,0.7);
}
  #chrono:after {
    border-top-color:#D21216;
  }

#replay path {
  fill:#FFFFFF;
}

#timeline {
}
  #timeline span i {
    background-color:rgba(255,255,255,0.5);
  }
  #timeline span u {
    background-color:rgba(255,255,255,1);
  }
  #timeline b>svg>path {
   fill:#215076
  }
  #timeline b>sub {
    background:         linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background:    -moz-linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background: -webkit-linear-gradient(-45deg, #D21216 35%, #900006 75%);
    background:      -o-linear-gradient(135deg, #D21216 35%, #900006 75%);
  }
  #timeline b>sup {
    background:         linear-gradient(135deg, #D21216 35%, #900006 75%);
    background:    -moz-linear-gradient(135deg, #D21216 35%, #900006 75%);
    background: -webkit-linear-gradient(135deg, #D21216 35%, #900006 75%);
    background:      -o-linear-gradient(-45deg, #D21216 35%, #900006 75%);
  }
  
#gridlines path {
  stroke:#FFFFFF;
}
#gridlines text {
  fill:#FFFFFF;
  opacity:1;
}


    
#boatclassesList {
}
    #boatclassesList span {
  background-color:#FFFFFF;
  border:1px solid #EBEDED;  
      color:#FFFFFF;
    }
    #boatclassesList path {
      fill:#FFFFFF;
    }
    #boatclassesList.open path {
      fill:#FFFFFF;
    }
    #boatclassesList option {
      color:#FFFFFF !important;
    }
    #boatclassesList option.on {
      background-color:#FFFFFF !important;
      color:#FFFFFF !important;
    }

#reportList {
  background-color:#020A36;
  border:1px solid #020A36;  
}

  #reportList>div {
    border-color:transparent #353B5E #353B5E #353B5E;
    background:         linear-gradient(#020A36 0%, #020A36 55%, #0F1640 100%);
    background:    -moz-linear-gradient(#020A36 0%, #020A36 55%, #0F1640 100%);
    background: -webkit-linear-gradient(#020A36 0%, #020A36 55%, #0F1640 100%);
    background:      -o-linear-gradient(#020A36 0%, #020A36 55%, #0F1640 100%);
  }
  #reportList>div:hover {
    background:         linear-gradient(#0F1640 0%, #0F1640 55%, #0F1640 100%);
    background:    -moz-linear-gradient(#0F1640 0%, #0F1640 55%, #0F1640 100%);
    background: -webkit-linear-gradient(#0F1640 0%, #0F1640 55%, #0F1640 100%);
    background:      -o-linear-gradient(#0F1640 0%, #0F1640 55%, #0F1640 100%);
  }
  #reportList>div.on {
    background:         linear-gradient(#D21216 0%, #D21216 55%, #E9141A 100%);
    background:    -moz-linear-gradient(#D21216 0%, #D21216 55%, #E9141A 100%);
    background: -webkit-linear-gradient(#D21216 0%, #D21216 55%, #E9141A 100%);
    background:      -o-linear-gradient(#D21216 0%, #D21216 55%, #E9141A 100%);
    color:#FFFFFF;
  }
  #reportList>div.ARV+div.RAC_1 {
    border-top:3px solid #B9BDBD;
  }
  
  #reportList>div>sup img,
  #reportList>div.on>sup img,
  #reportList>div:hover>sup img {
    *-webkit-filter:sepia(0%) hue-rotate(0deg) saturate(100%);
	  *filter:sepia(0%) hue-rotate(0deg) saturate(100%);
  }
  #reportList>div>sup h1 {
    color:#FFFFFF !important;
  }
  #reportList>div>sup h2 {
    color:#79879B !important;
  }
  #reportList>div.on>sup h1 {
    color:#FFFFFF !important;
  }
  #reportList>div.on>sup h2 {
    color:rgba(255,255,255,0.7) !important;
  }
  #reportList>div>sup q {
   color:#FFFFFF;
  }
  #reportList>div>sup q.up:after {
    color:#5EBB00;
  }
  #reportList>div>sup q.eq:after {
    color:#7E7E7E;
  }
  #reportList>div>sup q.down:after {
    color:#D54500;
  }
  #reportList>div>sub .latedate {
    color:#F48487;
  }
  #reportList>div.on>sup q {
    color:#FFFFFF;
  }
  #reportList>div.on>sup q.up:after {
    color:#DDFFBB;
  }
  #reportList>div.on>sup q.eq:after {
    color:#FFFFFF;
  }
  #reportList>div.on>sup q.down:after {
    color:#FFD9C6;
  }
  #reportList>div.on>sub .latedate {
    color:#F48487;
  }



#dashboard {
  background-color:#020A36;
}
    #dashboard>div {
      background-color:inherit;
    }
    #dashboard section>* {
      border:1px solid rgba(0,0,0,0.1);
    }
    #dashboard h1 {
      background-color:#264264;
      color:#ffffff;
    }
    #dashboard header,
    #dashboard footer,
    #dashboard section>div {
      background-color:#FFFFFF;
    }

#dashboardsummary {
  border:1px solid rgba(0,0,0,0.1);
  background-color:#FFFFFF;
}

#openDetails sup {
  background:         linear-gradient(135deg, #D21216 35%, #D21216 75%);
  background:    -moz-linear-gradient(135deg, #D21216 35%, #D21216 75%);
  background: -webkit-linear-gradient(135deg, #D21216 35%, #D21216 75%);
  background:      -o-linear-gradient(-45deg, #D21216 35%, #D21216 75%);
}
#openDetails sub {
  background-color:#020A36;
}
#openDetails svg {
  fill:#FFFFFF;
}


#boatcard article {
  border:1px solid rgba(255,255,255,0.3);
}

    #boatcard article sup {
      display:block;
      color:#FFFFFF;
      background:         linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #E8E8E8 100%);
      background:    -moz-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #E8E8E8 100%);
      background: -webkit-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #E8E8E8 100%);
      background:      -o-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #E8E8E8 100%);
    }
        #boatcard article sup h1 {
          color:#0F1640 !important;
        }
        #boatcard article sup h2 {
          color:#79879B !important;
        }
        #boatcard article sup q {
         color:#FFFFFF;
        }
    #boatcard article sub {
      color:rgba(255,255,255,0.7);
      background-color:rgba(2,10,54,0.7);
    }
    #main.reduced #boatcard article sub {
      background-color:rgba(2,10,54,1);
    }
        #boatcard article sub.ARV {
          color:#FFFFFF;
        }
        #boatcard article sub .vmg {
          color:#FDDD00;
        }
        #boatcard article sub .vmg.neg {
          color:#FF4B17;
        }
        #boatcard article sub .speed {
          color:#FFFFFF;
        }
        #boatcard article sub .date {
          color:#FFFFFF;
        }
        #boatcard article sub .latedate {
          color:#FFC1C9;
        }
        #boatcard article sub .pos,
        #boatcard article sub .pos * {
          color:#9BED83;
        }
        #boatcard article sub .live,
        #boatcard article sub .live * {
          color:#CAFD00;
        }
        #boatcard article sub .neg,
        #boatcard article sub .neg * {
          color:#FDC0AC !important;
        }
        #boatcard article sub .off {
          font-weight:bold;
          color:#FFFFFF;
          padding-top:5px;
          padding-bottom:55px
        }
        #boatcard article sub table thead {
          color:#ffffff;
        }
        #boatcard tt svg {
          fill:#FFFFFF;
          opacity:0.6;
        }


#geoblog {
  border:1px solid rgba(255,255,255,0.3);
}
    #geoblog>header {
      
    }
    #geoblog>header>sup {
      background:         linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #AE0015 100%);
      background:    -moz-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #AE0015 100%);
      background: -webkit-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #AE0015 100%);
      background:      -o-linear-gradient(#FFFFFF 0%, #FFFFFF 55%, #AE0015 100%);
    }
    #geoblog>header>sup>p {
      color:#ffffff;
    }
    #geoblog>header>sup h1 {
      color:#FFFFFF !important;
    }
    #geoblog>header>sup h2 {
      color:rgba(255,255,255,0.7) !important;
    }
    
    #geoblog>header>sub {
      background-color:#E9EDEF;
      color:#FFFFFF;
    }
    #geoblog>article {
      background-color:#FFFFFF;
    }
    #geoblog>footer {
      background-color:#062C51;
      color:#ffffff;
    }
    #geoblog>header>tt svg path {
      fill:#FFFFFF;
      opacity:0.5;
    }
    #geoblog>header>tt svg:hover path {
      fill:#FFFFFF;
      opacity:1;
    }
    #geoblog>svg {
      fill:#FFFFFF;
    }

#weather {
}
    #weather section:before,
    #weather section:after {
      border-top-color:#020A36;
    }
    #weather section,
    #weather select,
    #weather option,
    #weather span pre,
    #weather span:hover option {
      background-color:#020A36;
      color:#FFFFFF;
    }
    #weather.waiting span pre {
      color:rgba(6,49,80,0.3);
    }
    #weather b path,
    #weather span>svg path {
      fill:#FFFFFF;
    }
    #weather u path {
      stroke:#FFFFFF;
    }
    #weather b:hover path, 
    #weather sub:hover path, 
    #weather sup:hover path,
    #weather span:hover path,
    #weather span.open path {
      fill:#FFFFFF;
    }
    #weather span:hover pre,
    #weather span.open pre,
    #weather span:hover select {
      color:#FFFFFF;
    }
    #weather option.on {
      background-color:#FFFFFF !important;
      color:#ffffff !important;
      font-weight:bold;
    }

@media screen and (max-width:900px) {
    #boatcard article sub {
      background-color:rgba(2,10,54,1);
    }
}

@media screen and (max-width:750px) {
    #reportList {
      border-width:0 !important;  
    }
}