﻿nav {
	display:none;
}
#progressline {
	display:none;
}
#report {
	bottom:0;
	left:0;
	right:0;
	width:auto;
	top:calc(65% + 30px);
}
		#reportList {
			top:0;
		}
				#reportList .row {
					position:relative;
					height:14.25%;
					font-size:14px !important;
				}
						#reportList .row table {
							width:100%;
							height:100%;
						}
								#reportList .row table td {
									vertical-align:middle;
									white-space:nowrap;
								}
						#reportList .rank {
							position:absolute;
							top:0;
							bottom:0;
							left:0;
							width:25px;
							font-size:18px !important;
						}
								#reportList .rank  .val {
									position:absolute;
									right:0;
									top:50%;
									transform:translateY(-50%);
								}
						#reportList .identity {
							position:absolute;
							top:0;
							bottom:0;
							left:40px;
							width:295px;
						}
								#reportList .identity .color {
									position:absolute;
									top:50%;
									left:5px;
									width:14px;
									height:14px;
									border-radius:50%;
									transform:translateY(-50%);
								}
								#reportList .identity .name {
									position:absolute;
									top:50%;
									left:30px;
									transform:translateY(-50%);
								}
						#reportList .infos  {
							position:absolute;
							top:0;
							bottom:0;
							left:295px;
							right:10px;
							margin: 0 0 0 0;
						}
								#reportList .row .infos table td {
									text-align:right;
									width:14.28%;
								}

						#reportList .row > input {
							left:290px;
							top:50%;
							transform:translateY(-50%);
						}

		#reportlistlabels {
			position: absolute;
			left:295px;
			right:10px;
			top:65%;
			height:30px;
			box-sizing: border-box;
			z-index:500;
		}
				#reportlistlabels table {
					width:100%;
					height:100%;
				}
						#reportlistlabels table td {
							width:14.28%;
							vertical-align:middle;
							text-align:right;
							font-size:16px;
							background-color:#000000;
						}

				#reportlistlabels .arrow {
					position:absolute;
					top:-7px;
					left:-285px;
					width:26px;
					height:26px;
					border-radius:50%;
					cursor:pointer;
					background-color:#FFFFFF;
					stroke:#000000;
				}
				#reportlistlabels .arrow:hover {
					background-color:#FFCC00;
					stroke:#FFFFFF;
				}
						#reportlistlabels .arrow svg {
							width:100%;
							height:100%;
							stroke-width:2px;
							fill:none;
						}
#boatclasseslist {
	top:-30px;
	left:0;
	right:auto;
	width:295px;
	background-color:#000000;
}

#sig {
	top:0;
	left:0;
	right:0;
	bottom:35%;
}
#graphics {
	bottom:0;
	left:320px;
	right:0;
	width:auto;
	top:65%;
	z-index:1000;
}
	#graphics .variables {
		position: relative;
		margin-left:auto;
		margin-right:auto;
	}
	#graphics .variables::before, 
	#graphics .variables::after {
		/*display:none;*/
	}

  #zoomwindow {
	  left:70px;
	  top:120px;
	  right:70px;
	  bottom:80px;
  }

#buttons {
	z-index:101;
	right:auto;
	left:10px;
	top:10px;
	bottom:auto;
	background:transparent;
	border:none;
	overflow:visible;
}
		#buttons .group + .group {
			padding-top:0 !important;
		}
		.iconbutton {
			width: 36px;
			height: 36px;
			border: 2px solid #FFFFFF !important;
			border-radius:50%;
			margin-bottom:7px;
		}
		#buttons .group svg {
			margin: 5px 5px;
		}
		
#bt_classes {
		display:none;
}


#forecasts {
	top:0px;
	left:50%;
	transform:translateX(-50%);
	right:auto;
}
		#forecasts section {
			width:345px;
		}
		#forecasts .list {
			width:205px;
		}

#time {
	top: calc(65% - 65px);
	bottom: auto;
	z-index: 102;
	height: 65px;
	left: 0px;
	right: 0px;
	padding: 0 0 0 20px;
	background: -webkit-linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.7) 100%);
}
		#timeline .button {
			top:33px;
			left:5px;
			width:12px;
			height:12px;
		}
		#timeline .button .face {
			display:none;
		}
		#datetime,
		#refresh,
		#chrono {
			background-color: transparent;
		}
		#datetime::after, #chrono::after {
			display:none;
		}
#zoom {
	bottom:73px;
	right:9px;
}
#coords {
	right:30px;
	bottom:3px;
	left:auto;
}

#vormenu {
  position:absolute;
  right:60px;
  top:20px;
  width:220px;
  height:70px;
  z-index:400;
  color:#FFFFFF;
  white-space:nowrap;
  font-size:18px;
}
#vormenu * {
  font-size:18px;
}
#vormenu.off {
	display:none;
}
#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,  0.1);
      padding:5px 25px 10px 30px;
    }
        #vormenu header h1 {
          font-size:28px;
          margin-bottom:0.3ex;
        }
        #vormenu header h2 {
          position:relative;
        }
        #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 main {
      position:absolute;
      display:none;
      top:0;
      transform:translateX(-100%);
			background-color: rgba(0, 0, 0,  0.1);
      box-sizing:border-box;
      padding:15px 0 14px 0;
      overflow:hidden;
    }
        #vormenu main.open {
          display:block;
          width:230px;
          animation-name: leglinks_open;
          animation-duration: 300ms;
        }
            @keyframes leglinks_open {
              from {width: 0px;}
              to {width: 230px;}
            }
        #vormenu main.close {
          display:block;
          width:0px;
          animation-name: leglinks_close;
          animation-duration: 300ms;
        }
            @keyframes leglinks_close {
              from {width: 230px;}
              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.coastalrace {
	width:320px;
}
#vormenu.coastalrace header h1,
#vormenu.coastalrace header main,
#vormenu.coastalrace header i,
#vormenu.coastalrace header tt {
	display:none;
}

  #navionicscredits {
	  bottom:63px !important;
	  left:60px !important;
  }

body.RACE #layout.noclass #boatsLayer > g.ghost {
	display:block !important;
}
#boatsLayer > g.ghost {
	opacity: 0.4;
}

#boatcard article {
	width:400px;
}
#boatcard .identity {
	padding-left:5px;
	position:relative;
	height:40px;
	border-bottom:1px solid rgba(255,255,255,0.3);
}
		#boatcard .identity .tor {
			position:absolute;
			top:0;
			left:30px;
			right:0;
			bottom:0;
		}
		#boatcard .identity .tor .color {
			position:absolute;
			top:50%;
			left:5px;
			width:14px;
			height:14px;
			border-radius:50%;
			transform:translateY(-50%);
		}
		#boatcard .identity .tor .name {
			position:absolute;
			top:50%;
			left:30px;
			transform:translateY(-50%);
		}
		#boatcard .rank {
			position:absolute;
			top:0;
			height:40px;
			left:0;
			width:25px;
			font-size:18px !important;
		}
				#boatcard .rank  .val {
					position:absolute;
					right:0;
					top:50%;
					transform:translateY(-50%);
				}
		#boatcard .infos span {
			width:160px;
		}
		#boatcard .infos .latedate tt {
			display:none !important;
		}

		#boatcard .infos.ARV span {
			width: 156px;
		}

#reportList .row .infos table td.gain.pos:before {
	content:'+';
}
#reportList .row .infos table td.gain.neg:before {
	content:'-';
}
#reportList .row .infos table td.gain.pos, #reportList .row .infos table td.gain.pos * {
	color:#C0FE98 !important;
}
#reportList .row .infos table td.gain.neg, #reportList .row .infos table td.gain.neg * {
	color:#FF9997 !important;
}


#main.leaderboardClosed #reportlistlabels .arrow {
	transform:rotate(180deg);
}
#main.leaderboardClosed #report {
	top:calc(100% - 30px);
	min-height:30px;
}
#main.leaderboardClosed #reportList {
	display:none;
}
#main.leaderboardClosed #boatclassesList {
	top:0;
}
#main.leaderboardClosed #reportlistlabels {
	top:auto;
	bottom:0;
}
#main.leaderboardClosed #reportlistlabels td * {
	visibility:hidden;
}
#main.leaderboardClosed #time {
	top:auto;
	bottom:30px;
}
#main.leaderboardClosed #sig {
	bottom:30px;
}

