html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} /*body{line-height:1;}*/ ol,ul{list-style:none;} blockquote,q{quotes:none;} u,s{text-decoration:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} a,a:link,a:active,a:visited,a:hover{text-decoration:none;} strong{font-weight:bold;} .nosel{-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;} .dnone{display:none !important;} @font-face {font-family: 'ptsans';font-style: normal;font-weight: 400;src: url('pt_sans_narrow_400.woff') format('woff');} @font-face {font-family: 'ptsans';font-style: normal;font-weight: 700;src: url('pt_sans_narrow_700.woff') format('woff');} html, body {height:100%; width:100%; box-sizing:border-box; } body, * {font-family:ptsans; font-size:14px; } select,option {font-family:ptsans; } strong {font-weight:bold; } #body {display:table; height:100%; width:100%; } #body>* {display:table-row; } #body>*>* {display:table-cell; } #body>*>*>div {height:100%; width:100%; position:relative; box-sizing:border-box; } #body>main>section {height:100%; } #main {position:relative; } #footer {padding:5px; } #credits {text-align:center; font-size:15px; line-height:20px; } #credits a {opacity:0.6; } #credits a:hover {opacity:1; } @keyframes uwait {0% {transform:rotate(0deg);} 25% {transform:rotate(90deg);} 50% {transform:rotate(180deg);} 75% {transform:rotate(270deg);} 100% {transform:rotate(360deg);}} .wait {display:none; width:20px; height:20px; } .wait svg {width:20px; height:20px; animation-name: uwait; animation-duration: 1s; animation-iteration-count: infinite; transform-origin:10px 10px; animation-timing-function: steps(2, end); } .wait path {stroke-width:2px; stroke-linejoin:round; fill:none; } .waiting .wait {display:inline-block; } #main {overflow:hidden !important; } #main>div {position:absolute; } #buttons {right:5px; top:34px; bottom:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:auto; z-index:500; } .iconbutton {position:relative; display:block; width:38px; height:32px; overflow:hidden; *visibility:hidden; z-index:1; } .iconbutton.disabled {opacity:0.3; cursor:default; } .iconbutton svg {width:26px; height:26px; margin:3px 6px; pointer-events:none; } #sig {left:270px; top:35px; right:50px; bottom:33px; overflow:hidden; box-sizing:border-box; z-index:100; } #zoomwindow { position:absolute; left:5vmin; top:5vmin; right:5vmin; bottom:5vmin; z-index:1000; background-color:transparent; border:none; pointer-events:none; } body.DEBUG #zoomwindow { background-color:rgba(255,0,255,0.2); border-color:#ff00ff; } #leaflet {display:none; position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; box-sizing:border-box; z-index:101; } body.LEAFLET #sig {background:transparent !important; } body.LEAFLET #leaflet {display:block; } body.LEAFLET #bathyLayer, body.LEAFLET #groundLayer, body.LEAFLET #poiLayer {display:none; } body.LEAFLET #navionicsOption {*display:block; } #svgmodels {display:none; } #map {position:relative!important; z-index:102; } #tracksLayer g {fill:none; display:none; } #tracksLayer.on g.visible {display:inherit; } #tracksLayer g.on {display:inherit; } #tracksLayer g path.n1 {*display:none; } #tracksLayer g path.n2 {stroke-opacity:0.2; } #tracksLayer g path.n3 {stroke-opacity:0.2; } #tracksLayer g.on path.n1 {display:inherit; stroke-opacity:1; } #tracksLayer g.on path.n2, #tracksLayer g.on path.n3 {display:none; } #tracksLayer g.ghost {opacity:0.2; } #layout.noclass #tracksLayer g.ghost {display:none !important; } #windLayer {position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none; } #windLayer.scale path {pointer-events: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 {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; text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000; font-size:16px; } #poiLayer g.ctry circle {fill:transparent; } #poiLayer g.ctry text {font-family:haettenschweiler; font-weight:bold; text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000; font-size:32px; } #poiLayer g[rel="100000"] g {opacity:0.2; } #poiLayer g[rel="100000"] g:hover {opacity: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; z-index:20000; } .tip.on {display:block; } #coords {position:absolute; left:5px; bottom:0px; height:25px; line-height:25px; font-size:12px; padding-left:5px; font-family:monospace; opacity:0.7; z-index:200; cursor:pointer; } body.TRACKING #coords {left:5px; } #coords .lat, #coords .lng {display:inline-block; } #coords .lat:after {content:'•'; display:inline-block; margin:0 3px 0 5px; } #zoom {position:absolute; right:5px; bottom:7px; width:22px; top:auto; z-index:220 !important; } #zoom .button {position:absolute; display:block; 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 .button.plus {bottom:45px; } #zoom .button.minus {bottom:0; } #zoom .button .back {position:absolute; top:0; left:0; width:22px; height:22px; -moz-border-radius:22px; -webkit-border-radius:22px; border-radius:22px; } #zoom .button .face {position:absolute; top:3px; left:3px; width:16px; height:16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; } #zoom .bar {display:none; position:absolute; top:11px; bottom:11px; left:0px; right:0px; padding:11px 0; border-radius:16px; } #zoom .bar .button {margin-top:-10px; top:100%; } #zoom .axis {display:inline-block; position:relative; width:100%; height:100%; box-sizing:border-box; cursor:pointer; } #zoom svg {position:absolute; top:3px; left:3px; width:17px; height:17px; } #zoom .text {display:none; position:absolute; bottom:0; right:30px; text-align:right; font-size:11px; font-family:monospace; cursor:default; mix-blend-mode:difference; } #time {position:absolute; left:270px; bottom:5px; height:28px; right:50px; overflow:hidden; z-index:102; } #time td {position:relative; vertical-align:middle; white-space:nowrap; } #datetime {font-size:18px; text-align:left; font-weight:bold; padding:0 5px; } #datetime:after {content:''; position:absolute; display:block; top:0; right:-10px; width:0; height:0; border-top: 28px solid transparent; border-right: 10px solid transparent; } #datetime small {display:none; } #replay {position:relative; display:none; padding:0 5px 3px 0; white-space:nowrap; } #replay svg {display:inline-block; cursor:pointer; vertical-align:middle; } #replay .buttons {width:18px; height:18px; margin:0 7px; } #replay .slow, #replay .fast {width:12px; height:11px; } #replay .text {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 .text {display:none; } #replay.off .slow, #replay.off .fast {cursor:default; pointer-events:none; } #replay.on svg {opacity:0.7; } #replay.on .buttons {opacity:1; } #replay .active {opacity:1; } #timeline {width:100%; box-sizing:border-box; padding:0 18px; } #timeline.off {visibility:hidden; } #timeline .axis {display:inline-block; position:relative; height:24px; width:100%; box-sizing:border-box; cursor:pointer; } #timeline .bar, #timeline .backbar {position:absolute; left:0; top:13px; bottom:9px; width:100%; } #timeline .button {position:absolute; top:3px; left:0; width:24px; height:24px; cursor:pointer; margin-left:-11px; } #timeline .button .back {position: absolute; top: 0; left: 0; width: 22px; height: 22px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #timeline .button .face {position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #gridlines {position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:103; } #gridlines svg {width:100%; height:100%; } #gridlines path {stroke-width:0.5; stroke-opacity:0.2; } #gridlines text {font-size:11px; font-family:monospace; text-align:right; } #streamlines {position:absolute; top:0; left:0; pointer-events:none; } #weather {position:absolute; top:35px; left:340px; right:43px; overflow:visible; display:none; z-index:250 !important; } #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 .button {display:inline-block; width:18px; height:20px; box-sizing:border-box; padding:3px 3px; cursor:pointer; } #weather .play {visibility:hidden; } #weather .button>svg {width:10px; height:14px; } #weather .list {position:relative; display:inline-block; overflow:hidden; width:165px; height:20px; margin:0 7px 0 0; } #weather .date {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 .wait {position:absolute; top:4px; left:54px; } #weather .list>svg {position:absolute; top:8px; right:3px; width:14px; height:10px; pointer-events:none; } #weather .list.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 .button {cursor:not-allowed; opacity:0.4; } #weather.past select, #weather.past .list svg {visibility:hidden; } #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; } #weather legend {width:100%; position:absolute; display:block; left:0; right:0; bottom:-10px; height:10px; } #weather legend div {display:inline-block; height:10px; font-size:9px; text-align:center; } #weather legend div sup {display:block; width:100%; } #weather legend div sub {display:block; height:5px; width:100%; } #inReducedMode {display:none; } @media screen and (max-width:900px) {#datetime big {display:none; } #datetime small {display:inline; }} @media screen and (max-width:800px) {#inReducedMode {display:inline; } #sig {left:5px; } #zoom {right:0; top:35px; bottom:-5px; height:auto; } #zoom .bar {display:block; } #zoom>.button {display:none; } #zoom .text {display:none; } #time {left:5px; } #datetime {padding:0 2px; font-size:14px; *font-weight:normal; } #timeline {*display:none; padding-left:4px; padding-right:12px; } #timeline span {*width:calc(100% - 20px); } #timeline b {*display:none; } #coords {display:none; } #replay {display:none !important; } #replay {padding:0 10px; } #replay svg.buttons {width:26px; height:25px; } #replay svg.slow, #replay svg.fast {width:18px; height:18px; } #weather {left:0px; right:50px; top:78px; } #weather legend {display:none; } #weather section {text-align:right; padding-right:15px; } #weather .wait {left:auto; right:220px; } #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; } } html, body {background-color:#F5F7F7; color:#063151; } .bkgweft {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTYtMDQtMDhUMTI6NTY6MDUrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE2LTA0LTA4VDE2OjA1OjQyKzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE2LTA0LTA4VDE2OjA1OjQyKzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGQUZFMkFENkZEOTIxMUU1QUE1NzlENUY5NkE1RkE0MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGQUZFMkFEN0ZEOTIxMUU1QUE1NzlENUY5NkE1RkE0MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZBRkUyQUQ0RkQ5MjExRTVBQTU3OUQ1Rjk2QTVGQTQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZBRkUyQUQ1RkQ5MjExRTVBQTU3OUQ1Rjk2QTVGQTQwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6TcwpQAAAIlJREFUeNrsk8EOwCAIQwW9+v9fq06W1HTZbT0tgYvGRwOKtbVWN7Pi7mXOWTg2u1eFOzYBa60HhiCEKre96WOM0wmLkCjxqNxaO4cACJXfTxQdRCecxNdVuD+qURKLFO4AqMzXxa9Q+J6J9de70eAg/sy5Cx4cfoPK0wfpg/RB+iB98AsfXAIMAFX/H/GlpWSMAAAAAElFTkSuQmCC); background-repeat:repeat; } main a, main a:link, main a:active, main a:visited, main a:hover {color:#063151; } #header {background-color:#F5F7F7; } #main {background-color:#F5F7F7; } #footer {background-color:#F5F7F7; } #credits, #credits *, #credits a, #credits a:link, #credits a:active, #credits a:visited, #credits a:hover {color:#556173; } .wait path {stroke:#063151; } #buttons {background-color:#FFFFFF; border:1px solid; border-color:rgba(6,49,81,0.07); ; } /* */ .iconbutton {background-color:rgba(255,255,255,0.00); } .iconbutton svg {fill:#063151; stroke:#063151; } .iconbutton.over {background-color:#5CC0CD; } .iconbutton.over svg {fill:#FFFFFF; stroke:#FFFFFF; } .iconbutton.on.alt:hover, .iconbutton.on {background-color:#5CC0CD; } .iconbutton.on.alt:hover svg, .iconbutton.on svg {fill:#FFFFFF; stroke:#FFFFFF; } .iconbutton.on.alt {background-color:rgba(92,192,205,0.6); } #sig {background-color:#223B59; } #bathyLayer rect {fill:#223B59; } #bathyLayer image {mix-blend-mode:overlay; /*normal;multiply;screen;overlay;darken;lighten;color-dodge;color-burn;hard-light;soft-light;difference;exclusion;hue;saturation;color;luminosity*/ opacity:0.2; } #groundLayer path {fill:#E8EAEA; } #tracksLayer g {stroke-opacity:0.3; } #tracksLayer g path.n1 {*display:none; } #daynightLayer {fill:#000000; } #ruleLayer {stroke-dasharray:8,3; } #ruleLayer>g>circle {stroke:#5CC0CD; fill:#5CC0CD; } #ruleLayer>g>path {stroke:#5CC0CD; } #ruleLayer>path {stroke:#5CC0CD; } #poiLayer g circle {fill:#FFFFFF; } #poiLayer g text {fill:#FFFFFF; } #poiLayer g.city circle {fill:#5CC0CD; } #poiLayer g.city text {fill:#FFFFFF; } #poiLayer g.start circle {fill:#5CC0CD; } #poiLayer g.start text {fill:#FFFFFF; } #poiLayer g.arrv circle {fill:#5CC0CD; } #poiLayer g.arrv text {fill:#FFFFFF; } #poiLayer g.isle circle {fill:#162538; } #poiLayer g.isle text {fill:#E8EAEA; } #poiLayer g.ctry {mix-blend-mode:soft-light; opacity:0.9; } #poiLayer g.ctry text {fill:#E8EAEA; } #poiLayer g.buoy circle {fill:#5CC0CD; } #poiLayer g.buoy text {fill:#5CC0CD; } .tip {color:#ffffff; } #coords {color:#FFFFFF; mix-blend-mode:normal; opacity:1; } #coords .lat, #coords .lng {text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E; } #zoom .axis {background-color:rgba(255,255,255,0.1); } #zoom .button svg {fill:rgba(6,49,81,0.6); } #zoom .button .back {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 .button .face {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 .button:hover svg {fill:rgba(6,49,81,1); } #zoom .button:hover .back {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 .button:hover .face {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 .button.on svg {fill:rgba(255,255,255,0.6); } #zoom .button.on .back {background:linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-moz-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-webkit-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-o-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); } #zoom .button.on .face {background:linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-moz-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-webkit-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-o-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); } #time {background-color:#063151; } #datetime {background-color:#5CC0CD; color:#ffffff; } #datetime:after {border-top-color:#5CC0CD; } #replay path {fill:rgba(255,255,255,0.5); } #timeline {} #timeline .backbar {background-color:rgba(255,255,255,0.5); } #timeline .bar {background-color:rgba(255,255,255,1); } #timeline .button .back {background:linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-moz-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-webkit-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); background:-o-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); } #timeline .button .face {background:linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-moz-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-webkit-linear-gradient(135deg, #5CC0CD 35%, #246C77 75%); background:-o-linear-gradient(-45deg, #5CC0CD 35%, #246C77 75%); } #gridlines {mix-blend-mode:normal; text-align:right; vertical-align:top; } #gridlines path {stroke:#FFFFFF; } #gridlines text {fill:#FFFFFF; opacity:1; text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E; } #weather {} #weather section:before, #weather section:after {border-top-color:#F5F7F7; } #weather section, #weather select, #weather option, #weather .date, #weather .list:hover option {background-color:#F5F7F7; color:#063151; } #weather.waiting .date {color:rgba(6,49,81,0.3); } #weather .button, #weather .list {fill:#063151; } #weather .wait {stroke:#063151; } #weather .button:hover, #weather .list:hover, #weather .list.open {fill:#5CC0CD; } #weather .list:hover .date, #weather .list.open .date, #weather .list:hover select {color:#5CC0CD; } #weather option.on {background-color:#5CC0CD; color:#ffffff; font-weight:bold; } #weather legend div {color:#FFFFFF; text-shadow:1px 1px 1px #1E1E1E, -1px -1px 1px #1E1E1E, 1px -1px 1px #1E1E1E, -1px 1px 1px #1E1E1E; } .onoff {position:relative; display:inline-block; height:24px; line-height:24px; padding-right:36px; margin-right:20px; } .onoff:before {content:''; position:absolute; display:block; top:3px; right:0; width:32px; height:18px; border-radius:9px; transition:0.2s; } .onoff:after {content:''; position:absolute; display:block; top:5px; right:16px; width:14px; height:14px; border-radius:50%; transition:0.2s; } .onoff.on:before {transition:0.2s; } .onoff.on:after {right:2px; transition:0.2s; } #oao {position:absolute; top:35px; bottom:0; left:0; width:270px; z-index:1000; } #oao>table {height:100%; width:100%; } #search {width:100%; padding:0 5px 5px 5px; } #search>div {padding:5px; } #search.off {display:none; } #text {} #text th {position:relative; text-align:right; width:100%; } #text input {width:100%; box-sizing:border-box; padding-left:30px; height:25px; } #text .magnifyglass {position:absolute; top:2px; left:4px; width:20px; height:20px; } #text td {padding-left:5px; } #text button {white-space:nowrap; height:25px; } #text button sub { display:none; } #search.on #text button sup { display:none; } #search.on #text button sub { display:block; } #filtersandparams {display:none; text-align:right; margin-top:20px; } #search.on #filtersandparams {display:block; } #filtersandparams table {margin-bottom:10px; } #filtersandparams table th {padding-right:5px; text-align:right; } #filtersandparams table td {width:100%; padding:3px 0; } #filtersandparams table td select { width:100%; } #timespan {display:none; position:relative; margin:10px 10px 30px 10px; user-select: none; } #search.on #timespan {display:block; } #timespan p {line-height:20px; padding-bottom:10px; text-align:center; } #timespan p:before {content:''; position:absolute; bottom:3px; left:0px; right:0px; height:3px; } #timespan .range {position:absolute; left:0; right:0; bottom:3px; height:3px; } #timespan .start, #timespan .end {position:absolute; bottom:-3px; } #timespan .start:after, #timespan .end:after {content:''; position:absolute; width:14px; height:14px; left:-7px; top:-14px; border-radius:50%; cursor:pointer; } #timespan .start {left:0; } #timespan .end {left:100%; } #timespan .datestart, #timespan .dateend {position:absolute; bottom:-20px; } #timespan .datestart {left:-5px; } #timespan .dateend {right:-5px; } #results {display:none; margin-top:20px; } #search.on #results {display:block; } #results table th {position:relative; text-align:right; width:100%; } #results table th input { width:100%; box-sizing:border-box; padding-left:30px; height:25px; } #results .icon { position:absolute; top:1px; left:1px; width:24px; height:24px; cursor:pointer; } #results table td {padding-left:5px; } #results table td button { white-space:nowrap; height:25px; } #platforms {width:100%; padding:0 5px 5px 5px; height:100%; box-sizing:border-box; } #platforms>div {padding:5px; height:100%; box-sizing:border-box; position:relative; } #list {position:absolute; top:0; left:0; bottom:0; right:0; overflow:auto; } #list .line {cursor:pointer; line-height:22px; padding:0 5px; } #list .line.hidden {display:none; } #details {display:none; width:100%; padding:0 5px 5px 5px; display:none; } #details.on {display:table-cell; } #details>div {position:relative; margin-top:18px; height:20vh; } #details>div>.handle { position:absolute; top:-18px; left:-1px; width:100%; height:15px; line-height:15px; text-align:center; cursor:n-resize; } #details iframe { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; } #oao.largedetails #details>div {height:50vh; } #oao.largedetails #details>div>.handle {transform:rotate(180deg); } #layers {position:absolute; top:5px; right:50px; } #mobilesLayer path {fill-opacity:0.5; } #mobilesLayer circle {fill-opacity:1; opacity:0; } #outputsLayer g {cursor:pointer; opacity:0.6; } #outputsLayer g.active {opacity:1; } #focus {position:absolute; top:5px; left:270px; } #showtracks {position:absolute; top:5px; left:370px; } #outputDescription {display:none; position:absolute; left:360px; top:50px; overflow:hidden; z-index:2000; } #outputDescription.on {display:block; } #outputDescription>header {position:relative; padding:18px 5px 5px 5px; white-space:nowrap; user-select:none; } #outputDescription>header .title { display:block; font-size:16px; font-weight:bold; line-height:18px; } #outputDescription>header .title a { display:inline-block; position:relative; padding-left:15px; } #outputDescription>header a:after { content:'○'; position:absolute; top:2px; left:0; } #outputDescription>header a:before { content:'○'; position:absolute; top:-1px; left:3px; } #outputDescription>header .hat {display:block; font-size:14px; font-weight:normal; } #outputDescription>header .handle {position:absolute; display:block; top:3px; left:2px; right:25px; height:15px; opacity:0.2; background: url('data:image/svg+xml;utf8,'); cursor:grab; } #outputDescription>header .handle.grabbing {cursor:grabbing; } #outputDescription>header .cross {position:absolute; display:block; top:3px; right:3px; opacity:0.6; cursor:pointer; } #outputDescription>header .cross:hover {opacity:1; } #outputDescription>header .cross>svg { width:16px; height:16px; stroke:#FFFFFF; stroke-width:4px; } #outputDescription>article {padding:0 25px; width:500px; height:375px; text-align:center; } #outputDescription>article>a { display:block; width:100%; height:100%; } #outputDescription img {display:block; margin:5px auto; width:auto; max-width:100%; max-height:100%; } #outputDescription .previous, #outputDescription .next {position:absolute; top:50%; width:15px; height:60px; transform:translateY(-50%); cursor:pointer; } #outputDescription .previous.off, #outputDescription .next.off {display:none; } #outputDescription .previous {left:5px; } #outputDescription .next {right:5px; } #outputDescription>footer {display:block; padding:5px; font-weight:bold; white-space:nowrap; } #outputDescription>footer a {display:block; } #outputDescription>.corner {position:absolute; display:block; bottom:0; right:0; width:15px; height:15px; cursor:nwse-resize; } #outputDescription>.corner:before {position:absolute; bottom:0; right:0; content:''; width: 0; height: 0; border-bottom: 20px solid; border-left: 20px solid transparent; } #outputDescription>.corner:after {position:absolute; bottom:3px; right:3px; content:''; width: 0; height: 0; border-bottom: 7px solid; border-left: 7px solid transparent; } #tabs {display:none; text-align:center; padding:5px; } .tab {display:inline-block; width:100px; cursor:pointer; font-weight:bold; line-height:25px; font-size:16px; } #loadwait {display:none; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,0.7); z-index:10000; } #loadwait.waiting {display:block; } #loadwait .wait {position:absolute; top:50%; left:50%; width:70px; height:70px; transform:translate(-50%, -50%); } #loadwait .wait svg {width:70px; height:70px; transform-origin: 35px 35px; } nav {position:absolute; display:block; top:0; left:0; width:35px; height:35px; z-index:999999; } nav.on {position:absolute; display:block; width:100%; height:100%; } nav section {position:relative; display:none; width:100%; height:100%; background-color:rgba(255,255,255,0.8); } nav.on section {display:block; } nav section article {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } nav section article a {display:block; vert-align:middle; line-height:3vh; font-size:2vh; color:#000000; } nav .burger {position:absolute; top:0; left:7px; width:30px; height:30px; cursor:pointer; } nav .line, nav .line:before, nav .line:after {position:absolute; width:20px; left:0; height:3px; background-color:rgba(0,0,0,0.7); } nav .line {top:50%; transform:translateY(-50%); } nav .line:before, nav .line:after {content:''; } nav .line:before {top:-7px; } nav .line:after {bottom:-7px; } nav.on .line {height:0; } nav.on .line:before {top:0; left:-3px; width:26px; transform:rotate(45deg); } nav.on .line:after {top:0; left:-3px; width:26px; transform:rotate(-45deg); } #projectlogo {position:absolute; top:10px; left:10px; z-index:105; pointer-events:none; } #projectlogo.off {display:none; } @media screen and (max-width:1000px) {#outputDescription img {width:300px; }} @media screen and (max-width:800px) {#outputDescription {left:auto; right:80px; top:90px; } #focus {left:5px; } #showtracks {left:75px; } #layers {right:5px; } #layers label {display:none; } #tabs {display:block; } #oao {top:5px; right:0px; width:auto; } body.tabmap #oao {display:none; } body.tablist #oao {display:block; } nav {display:none; }} .onoff:after {background-color:#FFFFFF; } .onoff:before {background-color:rgba(0,0,0,0.2); } .onoff.on:before {background-color:#5CC0CD; } #oao {background-color:#F5F7F7; } #search>div {border:1px solid rgba(0,0,0,0.2); background-color:rgba(0,0,0,0.05); } #text input {border:1px solid rgba(0,0,0,0.2); } #text .magnifyglass path {stroke:rgba(0,0,0,0.5); } #filtersandparams select {border:1px solid rgba(0,0,0,0.2); } #timespan p:before {background-color:rgba(0,0,0,0.1); } #timespan .range {background-color:rgba(0,0,0,0.6); } #timespan .start:after, #timespan .end:after {background-color:rgba(0,0,0,1); } #results input {border:1px solid rgba(0,0,0,0.2); } #results .icon path {stroke:rgba(0,0,0,0.5); } #platforms>div {border:1px solid rgba(0,0,0,0.2); } #platforms .line {border-bottom:1px solid rgba(0,0,0,0.2); } #platforms .line.over {background-color:rgba(0,0,0,0.1); } #platforms .line.on {background-color:#223C5A; color:#FFFFFF; } #details>div {border:1px solid rgba(0,0,0,0.2); background-color:rgba(0,0,0,0.05); } #details>div>.handle { border:1px solid rgba(0,0,0,0.6); background:#223C5A; color:#FFFFFF; } #details>div>.handle:hover { background:#5CC0CD; color:#FFFFFF; } #mobilesLayer text {fill:#FFFFFF; opacity:0.4; user-select:none; } #mobilesLayer .text rect {display:none; fill:#467AB9; } #mobilesLayer g.on text {opacity:1; } #mobilesLayer g.hidden {display:none; } #outputDescription {box-shadow: 2px 2px 5px #0B2037; border:1px solid #FFFFFF; background:#FFFFFF; } #outputDescription>header a:link, #outputDescription>header a:active, #outputDescription>header a:visited, #outputDescription>header a:hover { color:#5CC0CD; } #outputDescription>header a:after { color:#5CC0CD; } #outputDescription>header a:before { color:#5CC0CD; } #outputDescription>header {color:#FFFFFF; background: linear-gradient(to bottom,#1B4E8B,#102E54); } #outputDescription>footer {background: linear-gradient(to bottom,#CFE3EF,#A1C9E3); } #outputDescription>footer a {color:#0B2037; text-decoration:underline; } #outputDescription>.corner:before {border-bottom-color:#102E54; } #outputDescription>.corner:hover:before {border-bottom-color:#1B4E8B; } #outputDescription>.corner:after {border-bottom-color:rgba(255,255,255,0.7); } #outputDescription>.corner:hover:after {border-bottom-color:rgba(255,255,255,1); } #outputDescription .previous, #outputDescription .next {fill:#063151; } #outputDescription .previous:hover, #outputDescription .next:hover {fill:#5CC0CD; } #tabs {background-color:rgba(1,1,1,0.05); border:1px solid rgba(0,0,0,0.15); margin-top:-5px; } .tab {color:rgba(0,0,0,0.4); border:1px solid rgba(0,0,0,0.1); background-color:rgba(0,0,0,0.05); } .tab:hover {color:#063151; } body.tabmap #tabmap {color:#FFFFFF; background-color:#063151; } body.tablist #tablist {color:#FFFFFF; background-color:#063151; }