﻿@media screen and (max-width:1000px) {
	#zoomwindow {
		left:30px;
		top:150px;
		right:110px;
		bottom:270px;
	}

	#reportlistlabels table td big,
	#datetime big {
		display: none;
	}
	#reportlistlabels table td small,
	#datetime small {
		display:block;
	}
	#coords {
		display:none;
	}

	#report,
	#reportlistlabels {
		left:15px;
		right:15px;
	}
  #time {
		left:15px;
		width:calc(100% - 30px);
    height:65px;
    display:block;
  }
  #time>div {
    display:block;
  }
  #timekeeper,
  #timeplayer {
    display:block;
  }
  #timekeeper {
    height:30px !important;
    overflow:hidden;
    min-width:auto;
  }
  #timekeeper {
    text-align:center;
  }
  #timekeeper>div {
    width:auto;
    margin-left:auto;
    margin-right:auto;
  }
  #timeplayer {
    height:35px !important;
  }
  #datetime {
    width:auto;
  }
	#report {
		bottom: 85px;
	}
	#reportlistlabels {
		bottom:240px;
	}

	#keeperlogo a {
		height:25px;
		margin:0px;
	}
	#keeperlogo img {
		height:25px;
		margin:0px;
	}

	#report {
		bottom:85px;
	}
	#reportlistlabels {
		bottom:240px;
	}
		#main.leaderboardClosed #reportlistlabels .arrow {
			top:-30px;
		}

	#buttons,
	#zoom {
		top:auto;
		transform:none;
		bottom:275px;
	}
	#zoom {
		bottom:285px;
	}

	#zpcwindow {
		width:calc(100% - 110px - 10px);
		left:10px;
		bottom:250px;
	}

	#zpcwindow img {
		float:left;
		height:150px;
		width:auto;
		margin-right:10px;
	}
	#zpcwindow article {
		text-align:left;
	}
	#zpcwindow h1,
	#zpcwindow h4 {
		font-size:14px;
		line-height:20px;
	}
	#zpcwindow h2 {
		font-size:12px;
		line-height:20px;
	}
	#zpcwindow h5 {
		font-size:14px;
		line-height:22px;
	}

	#main.WEATHER #vr {
		display:none;
	}
	#forecasts {
		top:0px;
		left:auto;
		right:16px;
		transform:none;
	}
}

@media screen and (max-width:750px) {
	#zoomwindow {
		top:110px;
	}

	#reportList .row .infos table td.h24,
	#reportlistlabels table td.h24,
	#reportList .row .infos table td.speed u {
		display:none;
	}
		#reportList .row .infos table td.hour,
		#reportlistlabels table td.hour {
			width:16%;
		}
		#reportList .row .infos table td.dtl,
		#reportlistlabels table td.dtl {
			width:35%;
		}
		#reportList .row .infos table td.heading,
		#reportlistlabels table td.heading {
			width:13%;
		}
		#reportList .row .infos table td.speed,
		#reportlistlabels table td.speed {
			width:14%;
		}
		#reportList .row .infos table td.dtf,
		#reportlistlabels table td.dtf {
			width:22%;
		}

		#chrono {
			display:none;
		}
}

@media screen and (max-width:620px) {

	#reportList .row .infos table td.dtf,
	#reportlistlabels table td.dtf {
		display:none;
	}
		#reportList .row .infos table td.hour,
		#reportlistlabels table td.hour {
			width:20%;
		}
		#reportList .row .infos table td.dtl,
		#reportlistlabels table td.dtl {
			width:45%;
		}
		#reportList .row .infos table td.heading,
		#reportlistlabels table td.heading {
			width:16%;
		}
		#reportList .row .infos table td.speed,
		#reportlistlabels table td.speed {
			width:19%;
		}
}

@media screen and (max-width:600px) {
	#forecasts legend,
	#forecasts .advert {
		display:none;
	}

	#logos {
		transform: scale(0.4) translate(-300px, -100px);
	}
	a#vr {
		transform: scale(0.6) translate(29px, -30px);
	}

}

@media screen and (max-width:580px) {
 #forecasts .scroll {
    width:245px;
  }
  #forecasts .hours,
  #forecasts .cursor,
  #forecasts .wait {
    left:105px;
  }
}

@media screen and (max-width:535px) {
	#zoomwindow {
		bottom:240px;
	}

	#report,
	#time,
	#reportlistlabels {
		left:0;
		right:0;
	}
	#time {
		width:100%;
		bottom:0;
		border-radius:0;
	}
	#keeperlogo a {
		display:block;
		height:28px;
	}
	#keeperlogo img {
		height:20px;
		margin-top:4px;
	}

	#report {
		bottom:66px;
	}
	#reportlistlabels {
		bottom:220px;
	}
		#reportlistlabels .arrow {
			left:5px;
		}
		#main.leaderboardClosed #reportlistlabels .arrow {
			top:-20px;
		}


	#reportList .row .infos table td.hour,
	#reportlistlabels table td.hour {
		display:none;
	}
		#reportList .row .infos table td.dtl,
		#reportlistlabels table td.dtl {
			width:56%;
		}
		#reportList .row .infos table td.heading,
		#reportlistlabels table td.heading {
			width:20%;
		}
		#reportList .row .infos table td.speed,
		#reportlistlabels table td.speed {
			width:24%;
		}
	#buttons {
		bottom:255px;
		right:3px;
	}
	#zoom {
		bottom:260px;
		right:58px;
	}
}

@media screen and (max-width:475px) {
	#zoomwindow {
		top:80px;
		right:80px;
	}
	#reportList .row .infos table td.heading,
	#reportlistlabels table td.heading {
		display:none;
	}
		#reportList .row .infos table td.dtl,
		#reportlistlabels table td.dtl {
			width:70%;
		}
		#reportList .row .infos table td.speed,
		#reportlistlabels table td.speed {
			width:30%;
		}
	#zoom {
		display:none;
	}
	#zpcwindow {
		width:calc(100% - 80px - 10px);
		left:10px;
	}
	#boatcard article {
		min-width:auto;
	}
	
	#boatcard .infos table td.over4h {
		display:none;
	}
	#boatcard .infos .km {
		display:none !important;
	}
	#boatcard .infos .speed > *, 
	#boatcard .infos .distance > * {
		padding-top:0;
	}
	#forecasts .scroll {
    width:175px;
  }
  #forecasts .hours,
  #forecasts .cursor,
  #forecasts .wait {
    left:70px;
  }
}

@media screen and (max-width:400px) {
	#reportList .row .infos table td.speed,
	#reportlistlabels table td.speed {
		display:none;
	}
		#reportList .row .infos table td.dtl,
		#reportlistlabels table td.dtl {
			width:100%;
		}

	#reportList .row .infos table td.dtl .progress {
		display:none;
	}
	#forecasts .scroll {
    width:105px;
  }
  #forecasts .hours,
  #forecasts .cursor,
  #forecasts .wait {
    left:35px;
  }
	#chrono {
		display:none !important;
	}
}

@media screen and (max-width:350px) {
	#datetime big {
		display:none;
	}
	#datetime small {
		display:block;
	}
}


@media screen and (min-width:1001px) and (max-height:780px) {
	#zpcwindow {
		width:580px;
		height:auto;
	}
	#zpcwindow img {
		float:left;
		height:200px;
		width:auto;
		margin-right:10px;
	}
	#zpcwindow article {
		text-align:left;
	}
}

@media screen and (min-width:1001px) and (max-height:580px) {
	#time {
		height:35px;
		bottom:10px;
	}
	#report {
		height:75px !important;
		bottom:60px;
	}
	#reportlistlabels {
		height:20px;
		bottom:140px;
	}
	#reportlistlabels .arrow {
		width:20px;
		height:20px;
	}
	#coords {
		display:none;
	}
	a#vr {
		top:10px;
		left:auto;
		right:65px;
	}
	#keeperlogo img {
		height:25px;
		margin-top:5px;
	}
	.iconbutton {
		margin:0px;
	}
	#bt_gridlines,
	#bt_labels,
	#bt_graphics {
		display:none;
	}

	#zpcwindow {
		bottom:160px;
		right:170px;
	}
	#zpcwindow img {
		float:left;
		height:150px;
		width:auto;
	}
	#zpcwindow h1,
	#zpcwindow h4 {
		font-size:14px;
		line-height:20px;
	}
	#zpcwindow h2 {
		font-size:12px;
		line-height:20px;
	}
	#zpcwindow h5 {
		font-size:14px;
		line-height:22px;
	}

}

@media screen and (min-width:1001px) and (max-height:460px) {
	#bt_route,
	#bt_daynight {
		display:none;
	}
}

@media screen and (min-width:1001px) and (max-height:380px) {
	#report,
	#reportlistlabels {
		display:none;
	}
	#zpcwindow {
		bottom:55px;
	}

}



@media screen and (max-width:1000px) and (max-height:800px) {
	a#vr {
		right:65px;
		transform: scale(0.8) translate(10px, -5px); 
	}
	#bt_gridlines,
	#bt_gridlines,
	#bt_labels{
		display:none;
	}
}

@media screen and (max-width:1000px) and (max-height:730px) {
	#report {
		height:75px !important;
	}
	#reportlistlabels {
		bottom:165px;
	}
	#reportlistlabels .arrow {
		width:20px;
		height:20px;
	}
	#zpcwindow {
		bottom:160px;
	}
	#buttons {
		bottom:200px;
	}
	#zoom {
		bottom:205px;
	}

}

@media screen and (max-width:1000px) and (max-height:620px) {
	#report {
		height:25px !important;
	}
	#reportlistlabels {
		bottom:114px;
	}
	#bt_gridlines,
	#bt_graphics {
		display:none;
	}
	#zpcwindow {
		bottom:107px;
	}
	#buttons {
		bottom:145px;
	}
	#zoom {
		bottom:150px;
	}

}

@media screen and (max-width:1000px) and (max-height:570px) {
	#zpcwindow {
		bottom:52px;
	}
	#bt_target {
		display:none;
	}
	#bt_daynight {
		display:none;
	}
	#logos {
		transform: scale(0.4) translate(-300px, -100px);
	}
	a#vr {
		transform: scale(0.6) translate(29px, -30px);
	}
}



@media screen and (max-width:535px) and (max-height:680px) {
	#reportlistlabels {
		bottom:145px;
	}
	#buttons {
		bottom:180px;
	}
	#zoom {
		bottom:185px;
	}

}

@media screen and (max-width:535px) and (max-height:595px) {
	#reportlistlabels {
		bottom:95px;
	}
	#buttons {
		bottom:130px;
	}
	#zoom {
		bottom:135px;
	}

}



@media screen and (max-width:580px), (max-height:660px) {
	#geoblog {
		display: none;
		position: absolute;
		top:50%;
		bottom:auto !important;
		left:50%;
		transform:translate(-50%, -50%);
		width:calc(100% - 30px);
		z-index:999999;
		min-width:auto !important;
	}
	#geoblog article {
		overflow:auto;
		height:40vh;
	}
	#geoblog article .content {
		overflow:visible;
	}

	#geoblog #mediaVideo {
		min-width:auto;
	}
	#geoblog header {
		cursor:inherit;
	}

}