/* ####################### legalnotice ################################*/
.legalnotice {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1920px;
	height: 1080px;
	background-color: rgba(10,42,89,0.9);
	display: none;
	z-index: 9;
}
.rotate90 .legalnotice {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 1920px;
	width: 1080px;
	background-color: rgba(10,42,89,0.9);
}
/*Dialog*/
.legalnotice .block_dialog {
	position: absolute;
	top: 200px;
	left: 450px;
	width: 1000px;
	height: 800px;
	border-radius: 20px;
	background-color: #40a5dc;
}
.rotate90 .legalnotice .block_dialog {
	left: 100px;
	width: 880px;
	height: 1200px;
}
/*Titel*/
.legalnotice .block_dialog .title {
	position: absolute;
	transform-origin: 0 0;
	transform: rotate(-90deg);
	top: 800px;
	left: 0px;
	width: 800px;
	height: 40px;
	border-radius: 20px 20px 0px 0px;
	background-color: #fff;
	color: #40a5dc;
	text-align: center;
}
.rotate90 .legalnotice .block_dialog .title {
	top: 1200px;
	width: 1200px;
}
.legalnotice .block_dialog .title span.i18n {
	position: absolute;
	top:6px;
	font-size: 20px;
	font-family: metabold2;
}

/*Content*/
.legalnotice .block_dialog .content {
	position: absolute;
	top: 120px;
	left: 100px;
	width: 785px;
	height: 610px;
	font-size: 24px;
	line-height: 1.3;
    text-align: justify;
	padding-right: 50px;
}
.rotate90 .legalnotice .block_dialog .content  {
	width: 670px;
	height: 990px;
}
.legalnotice .block_dialog .content li {
	font-size: 0.7em;
	padding-bottom: 10px;
	padding-top: 10px;
}
.legalnotice .block_dialog .content img {
	display:block;
	padding: 0px 10px 10px 10px;
}
.legalnotice .block_dialog .content img.float.right {
	float:right;
	margin:0px 0px 20px 20px;
}
.legalnotice .block_dialog .content img.float.left {
	float:left;
	margin:0px 20px 20px 0px;
}
.legalnotice .block_dialog .content p {
	clear: both;
}

/*CloseButton*/
.legalnotice .block_dialog .button_legalnotice_close {
	position: absolute;
	right: 0px;
	background-color: #ffffff;
	color: #40a5dc;
	width:60px;
	height: 60px;
	border-radius: 0px 20px 0px 0px;
	font-weight: bold;
	font-size: 40px;
	text-align: center;
	line-height: 55px;	
}


/* ####################### disclaimer ################################*/
.disclaimer {
	margin-top:80px;
	font-size: 0.7em;
	border-top: 1px solid #fff;
	padding: 0px 20px 30px 20px;
}
.disclaimer div{
	margin-top: 20px;
}
.disclaimer img.logo_igd {
	float:right;
	margin-left:30px;
}
.disclaimer ul li {
	margin-bottom: 10px;
}
.help .block_dialog .help_content .disclaimer li {
	padding-bottom: 0px;
	padding-top: 0px;
}


/* ####################### tooltips ################################*/
.tooltips {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.tooltips .tooltip {
	position: absolute;
	display: none;
	background-color: rgba(10,42,89, 0.9);
	padding: 5px 10px;
	border-radius: 5px;
	margin-top: -30px;
	margin-left: -30px;
	font-size: 1.3em;
	max-width: 250px;
	box-shadow: 0px 0px 20px #000;
}
.tooltips .tooltip .more {
	position:absolute;
	background-color: #73E30D;
	border-radius: 5px;
	padding: 5px;
	display: block;
	width: 80px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	right: 0px;
	pointer-events: auto;
}

/* ####################### landscape vs portrait ################################*/
#portrait {
	display: none;
}
.rotate90 #landscape {
	display: none;
}
.rotate90 #portrait {
	display: inherit;
}


/* ####################### map ################################*/
.map {
	position: absolute;
}
#landscape .map {
	top: 0px;
	left: 0px;
	width: 1455px;
	height: 1080px;
}

.rotate180 #landscape .map {
	left: 465px;
}

#portrait .map {
	top: 0px;
	left: 0px;
	width: 1080px;
	height: 1200px;
}

.map svg > .text {
	fill: rgba(255,255,255, 0.7);
	font-size: 16px;
}
.map .filter {
	fill: rgba(18,50,112, 0.7);
}
.map .coastlines {
	fill: none;
	stroke: rgba(255,255,255, 0.5);
}
.map .route .full {
	fill: none;
	stroke: rgba(18,50,112, 0.8);
	stroke-width: 2;
	stroke-dasharray: 3, 3
}
.map .route .animated {
	fill: none;
	stroke: rgb(18,50,112);
	stroke-width: 2;
}
.map .cities .city .circle {
	fill: rgba(115, 227, 13, 0.55);
}
.map .cities .city .name .text {
	fill: #fff;
	font-size: 16px;
}
.map .cities .city .name {
	display: none;
}
.map .cities .city .name .background {
	fill: rgba(10,42,89, 0.8);
}
.map .cities .city .touch {
	opacity: 0;
}

.map .ship .topview {
	fill: rgba(256, 256, 256, 0.95);
	transform: scale(0.10);
	stroke: none;	
}
.map .ship .measuremarker {
	fill: rgba(10, 42, 89, 0.2);
	transform: scale(0.25);
	stroke: none;	
}
/* ####################### plot ################################*/
.plot {
	position: absolute;
	background-color: rgba(64,165,220, 0.2);
	height: 160px;
}
#landscape .plot {
	top: 920px;
	left: 0px;
	width:1455px;
}
.rotate180 #landscape .plot {
	left: 465px;
}
#portrait .plot {
	top: 1040px;
	left: 0px;
	width: 1080px;
}

.plot_header {
	position: absolute;
	height: 15px;
	background-color: rgba(10,42,89, 0.95);
}
#landscape .plot_header {
	top: 905px;
	left: 0px;
	width: 1455px;
}
.rotate180 #landscape .plot_header {
	left: 465px;
}
#portrait .plot_header {
	top: 1025px;
	left: 0px;
	width: 1080px;
}

.plot .bottom {
	stroke: rgba(0,0,0, 0.3);
	stroke-width: 1.5;
	fill: none;	
}
.plot .seaarea rect {
	opacity: 0;
	fill: rgba(64, 165, 220, 0.3);	
}
/* ####################### plot_ship ################################*/
.plot_ship {
	position: absolute;
	height: 58px;
}
#landscape .plot_ship {
	top: 861px;
	left: 0px;
	width: 1455px;
}
.rotate180 #landscape .plot_ship {
	left: 465px;
}
#portrait .plot_ship {
	top: 981px;
	left: 0px;
	width: 1080px;
}


/* ####################### logbook ################################*/
.logbook {
	position: absolute;
	width: 200px;
	height: 230px;
	background-color: #40a5dc;
	opacity:0.9;
	border-radius: 20px;
	box-shadow: 0px 0px 20px #000;
	top: 760px;
	left: 140px;
	font-size:16px;
}
.rotate180 .logbook {
	left: 605px;
}
.rotate90 .logbook {
	top: 890px;
	left: 60px;
}

.logbook_header {
	position: absolute;
	width: 170px;
	height: 20px;
	background-color: #fff;
	border-radius: 20px 20px 0px 0px;
	color: #40a5dc;
	padding: 10px 15px;
}
.logbook_header span {
	font-size: 20px;
	font-family: metabold2;
}
.logbook ul {
	margin-top: 55px;
	margin-left:-5px;
}
.logbook ul li {
	padding-bottom: 5px;
	opacity:0.4;
	transition:opacity 400ms ease-out;
	transition:color 400ms ease-out;
}
.logbook ul li.inspected {
	opacity:1.0;
}

.logbook ul li.check {
	opacity:1.0;
	color: #0a2d52;
}

/* ####################### apps ################################*/
.apps {
	position: absolute;
	left:1455px;
	height: 1080px;
	c_olor: #123270;
	font-size: 16px;

}
.rotate180 .apps {
	left:0px;
}
.rotate90 .apps {
	left:600px;
	top:700px;
}


.apps > section, .apps > div {
	position: absolute;
}

.apps > *.square {
	width: 110px; 
	height:110px;
}
.apps > *.portrait {
	width: 110px; 
	height:235px;	
}
.apps > *.landscape {
	width: 235px; 
	height:110px;
}

.apps > div {
	background-color: rgba(3,227,13,0.2);
	border-radius: 15px;
}

.apps > ._0 {
	top: 585px;
	left:55px;
}
.apps > ._1 {
	top: 835px;
	left:180px;
}
.apps > ._2 {
	top: 585px;
	left:305px;
}	
.apps > ._3 {
	top: 710px;
	left:55px;
}	
.apps > ._4 {
	top: 835px;
	left:55px;
}

.apps > section > div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #73e30d;
	border-radius: 15px;
	transform-style: preserve-3d;
}

.apps > section > div > figure {
	display: block;
	position: absolute;
	top:-5px;
	left:-25px;
	right:-25px;
	bottom:-5px;
	opacity:0;
}
.apps > section > div > figure.view {
	opacity:1;
}


.apps > section > div > figure._0 span {
	position: absolute;
	display: block;
	bottom:0px;
	font: 1.4em metabold1;
}
.apps > section.portrait > div > figure._0 span {
	font: 1.1em metabold1;
}
.apps > section > div > figure._1 span {
	position: absolute;
	display: block;
	left:0px;
	right:0px;
	top: 30px;
	text-align: center;
	font: 1.0em metabold1;
}
.apps > section > div > figure._2 img {
	position: absolute;
	display: block;
	left:10px;
	top: 10px;
	width:60px;
	height:60px;
}
.apps > section > div > figure._2 span {
	position: absolute;
	display: block;
	top: 20px;
	bottom: 20px;
	left: 90px;
	right: 10px;
	font: 1.0em metabold1;
}
.apps > section.portrait > div > figure._2 span {
	top: 100px;
	bottom: 10px;
	left: 0px;
	right: 0px;
	text-align: center;
}

/* ####################### help ################################*/

.help .block_dialog .help_content.content img {
	height: 270px;
	margin: 10px;
}

.rotate90 .help .block_dialog .help_content.content img {
	height: 240px;
}