@charset "UTF-8";
 body {
            padding: 0;
            overflow: hidden;
			margin:0px;
        }
#mapHolder {
            -webkit-transform: translate3d(0,0,0);
            overflow: hidden;
			 position:absolute;
			 left:0px;
			 right:0px;
			 top:0px;
			 bottom:0px;
			 visibility:hidden;
        }
		#map{
			position:relative;
			/*background-image:url(../img/BG/map%202.jpg);*/
			width:4800px;
			height:3400px;
			left:0px;
			top:0px;
		}
		#map00{
			pointer-events:none;
		position:absolute;
		width:2400px;
		height:1700px;
		background-image:url(../img/map/n-map00.jpg);
	}
	#map01{
		pointer-events:none;
		position:absolute;
		left:2400px;
		width:2400px;
		height:1700px;
		background-image:url(../img/map/n-map01.jpg);
	}
	#map10{
		pointer-events:none;
		position:absolute;
		top:1700px;
		width:2400px;
		height:1700px;
		background-image:url(../img/map/n-map10.jpg);
	}
	#map11{
		pointer-events:none;
		position:absolute;
		top:1700px;
		left:2400px;
		width:2400px;
		height:1700px;
		background-image:url(../img/map/n-map11.jpg);
	}
		#zoomBtn{
			position:absolute;
			font-size:30px;
			width:200px;
			height:60px;
			margin:auto;
			left:0px;
			right:0px;
			bottom:0px;
			z-index:3;
			
		}
		#zoomBtnIn{
			position:absolute;
			left:20px;
			background-image:url(../img/interface/zoomButtons.png);
			background-position:0px -10px;
			width:50px;
			
			height:50px;
		}
		#zoomBtnOut{
			position:absolute;
			right:20px;
			background-image:url(../img/interface/zoomButtons.png);
			background-position:-152px -10px;
			width:50px;
			height:50px;
			
		}
		#zoomPos{
			position:absolute;
			left:0px;
			right:0px;
			margin:auto;
			background-image:url(../img/interface/zoomButtons.png);
			width:60px;
			background-position:-72px 0px;
			height:60px;
			
		}
		.portPreviewPic{
			position: absolute;
			background-image:url(../img/help/help-screen.png);
			pointer-events:auto;
			width: 560px;
			height: 370px;
			top:0px;
			bottom:0px;
			left:0px;
			right:0px;
			margin:auto;
			visibility:hidden;
			z-index:30;
		}
		.simplePanel{
			font-family:stoke;
			position: absolute;
			padding: 80px;
			font-size: 16px;
			color: #333;
			width: 400px;
			height: 290px;
			top:0px;
			bottom:0px;
			left:0px;
			right:0px;
			margin:auto;
			background-image:url(../img/help/help-screen.png);
			pointer-events:auto;
			visibility:hidden;
			z-index:30;
		}
		.simplePanelTitle{
			text-align:left;
			position: absolute;
			text-align: center;
			width: 400px;
			left: 0px;
			right: 0px;
			top: 42px;
			margin: auto;
			font-size: 18px;
		}
		.pathSelect{
			margin-top: 0px;
			margin-bottom: 13px;
			width:50px;
			height:50px;
			position:relative;
			background-image:url(../img/interface/buttons/pathBtns.png);
		}
		#pathSelect0{background-position:0px 0px;}
		#pathSelect0.selected{background-position:-50px 0px;}
		#pathSelect1{background-position:0px -50px;}
		#pathSelect1.selected{background-position:-50px -50px;}
		#pathSelect2{background-position:0px -100px;}
		#pathSelect2.selected{background-position:-50px -100px;}
		#pathSelect3{background-position:0px -150px;}
		#pathSelect3.selected{background-position:-50px -150px;}
		.pathDot0{position:absolute;background-color:rgba(198, 163, 0, 1);border-radius:50%;
		text-indent:12px;font-size:10px;display:none;color:rgba(0,0,0, 0);}
		.pathDot1{position:absolute;background-color:rgba(128, 24, 24, 1);border-radius:50%;
		text-indent:12px;font-size:10px;display:none;color:rgba(0,0,0, 0);}
		.pathDot2{position:absolute;background-color:rgba(184, 84, 25, 1);border-radius:50%;
		text-indent:12px;font-size:10px;display:none;color:rgba(0,0,0, 0);}
		.pathDot3{position:absolute;background-color:rgba(0, 105, 42, 1);border-radius:50%;
		text-indent:12px;font-size:10px;display:none;color:rgba(0,0,0, 0);}
		
		
				
		.pathDetails{
			width: 360px;
			margin-left: 60px;
			padding-top: 7px;
		}
		.pathSelectHeading{
			text-align:left;
			position: absolute;
			text-align: center;
			width: 400px;
			left: 0px;
			right: 0px;
			top: 42px;
			margin: auto;
			font-size: 18px;
		}
		
		
		
		.gageFill{
			position:absolute;
			top:26px;
			left:26px;
			width:115px;
			height:115px;
			background-image:url(../img/interface/Gages-Fill.png);
			background-repeat:no-repeat;
			z-index:3;
			pointer-events:none;
		}
		#suppliesWater{
			background-image:url(../img/interface/Gages-FillL.png);
			pointer-events:none;
			
		}
		#convictHealth{
			background-image:url(../img/interface/Gages-Fill.png);
			left:auto;
			right:26px;
			pointer-events:none;
		}
		#convictMood{
			left:auto;
			right:26px;
			background-image:url(../img/interface/Gages-FillL.png);
			pointer-events:none;
		}
		#supplies{
			position:absolute;
			top:26px;
			left:26px;
			width:115px;
			height:115px;
			background-image:url(../img/interface/Supplies-N4.png);
			background-repeat:no-repeat;
			pointer-events:auto;
			z-index:3;
		}
		#goldMain{
			color: #333;
			text-align: center;
			width: 100%;
			top: 73px;
			font-size: 20px;
			font-weight: 500;
			position: absolute;
			pointer-events:none;
		}
		#convictsMain{
			color: #333;
			text-align: center;
			width: 100%;
			top: 73px;
			font-size: 20px;
			font-weight: 500;
			position: absolute;
			pointer-events:none;
		}
		
		#healthMoralle{
			position:absolute;
			top:26px;
			right:26px;
			width:115px;
			height:115px;
			background-image:url(../img/interface/convicts-N4.png);
			background-repeat:no-repeat;
			z-index:3;
			pointer-events:auto;
		}
		#journal{
			pointer-events:auto;
			position:absolute;
			bottom:20px;
			right:20px;
			width:115px;
			height:115px;
			background-image:url(../img/interface/buttons/journalN.png);
			background-repeat:no-repeat;
			cursor:pointer;	
			z-index:3;
		}
		#shipIcon{
			pointer-events:auto;
			position:absolute;
			bottom:20px;
			left:20px;
			width:115px;
			height:115px;
			background-image:url(../img/interface/buttons/ship-buttonN.png);
			cursor:pointer;	
		}
		#compass{
			pointer-events:none;
			position:absolute;
			left:-250px;
			top:-250px;
			width:500px;
			height:500px;
			background-image:url(../img/interface/compass2.png);
		}
		.inspect{
			position:absolute;
			top:124px;
			right:18px;
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/eyecon2.png);
			pointer-events:auto;
			cursor:pointer;		
		}
		.details{
			position:absolute;
			top:20px;
			right:122px;
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/listcon.png);
			pointer-events:auto;	
			cursor:pointer;		
		}
		.infoBtn{
			position:absolute;
			top:123px;
			right:20px;
			
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/infoIcon.png);
			pointer-events:auto;	
			cursor:pointer;		
		}
		.pathsBtn{
			position:absolute;
			top:121px;
			left:20px;
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/pathIcon.png);
			pointer-events:auto;	
			cursor:pointer;	
		}
		.helpBtn{
			position:absolute;
			bottom:18px;
			right:124px;
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/helpIcon.png);	
			pointer-events:auto;
			cursor:pointer;	
		}
		.settingsBtn{
			position:absolute;
			bottom:20px;
			left:122px;
			width:45px;
			height:45px;
			background-image:url(../img/interface/buttons/settingsIcon.png);	
			pointer-events:auto;
			cursor:pointer;	
			
		}
		#frameTL .inspect{
			left:21px;
		}
		#frameTL .details{
			left:124px;
		}
		.shipHit{
			position:absolute;
			left:0px;
			right:0px;
			background-color:#fff;
			width:1px;
			height:1px;
			z-index:3;
		}
		.shipCol{
			position:absolute;
			left:0px;
			right:0px;
			/*background-color:#f00;
			width:5px;
			height:5px;
			z-index:100;*/
		}
		#ship{
			position:absolute;
			width:100px;
			height:100px;
			left:-50px;
			top:-50px;
			background-image:url(../img/sprites/ship4.png);
			z-index:3;
		}
		
		.mainShip{
			position:absolute;
			width:100px;
			height:100px;
			left:-50px;
			top:-50px;
			background-image:url(../img/sprites/ship4.png);
			background-color:#f00;
			z-index:3;
		}
		.node{
		position:absolute;
		/*pointer-events:none;*/
		/*background-image:url(../img/interface/glow.png);*/
		background-color:#00f;
		opacity:0;
		text-align:center;
		width:50px;
		height:35px;
		padding-top:15px;
		left:0px;
		top:0px;
		color:#fff;
		font-size:20px;
		border-radius:25px;
		background-color:#ff0;
		cursor:pointer;
		}
		.nodePath{
		position:absolute;
		text-align:center;
		left:-5px;
		top:-5px;
		color:#fff;
		background-color:#fff;
		border-radius:10px;
		width:10px;
		height:10px;
		font-size:20px;
		opacity:.7;
		}
		.eventNode{
		pointer-events:none;
		padding-top:0px;
		position:absolute;
		width:50px;
		height:50px;
		background-image:none;
		color:rgba(255,255,255,0.00);
		font-size:20px;
		opacity:1;
		text-align:center;
		}
		.eventNode.shown{
			color:#fff;
			/*background-image:url(../img/interface/glow.png);*/
			background-color:rgba(0,88,255,0.50);
			border-radius:50%;
			opacity:.5;
		}
	.greenCross{
		position:relative;
		display:inline-block;
		background-image:url(../img/game/leaving/marker5.png);
		width:20px;
		height:20px;
	}
	.treatCross{
		position: relative;
		display: block;
		margin-right: 10px;
		float: left;
		background-image: url(../img/game/illness/illness-icons-states.png);
		width: 40px;
		height: 42px;
		background-position: -203px -4px;
	}
	.wIcon{
		position: relative;
		display: inline-block;
		top:-10px; 
		float: left;
		margin: 10px;
		width: 50px;
		height: 50px;
		background-image:url(../img/interface/buttons/warningIcons.png);
	}
	.popupDead{
		position: relative;
		display: block;
		margin-right: 10px;
		float: left;
		background-image: url(../img/game/illness/illness-icons-states.png);
		width: 40px;
		height: 42px;
		background-position: -107px -4px;
	}
	.nodeTarget{
		position:absolute;
		
		background-image:url(../img/game/leaving/marker5.png);
		width:20px;
		height:20px;
		z-index:2;
		/*
		top:23px;
		left:23px;width:10px;
		height:10px;
		
		background-color:#F00;*/
	}
	
	.placeName{
		font-family: 'Playfair Display SC', serif;
		position:absolute;
		text-align:left;
		padding-left:50px;
		height:50px;
		background-image:url(../img/map/icons/place.png);
		background-repeat:no-repeat;
		z-index:2;
		color:#675533;
		font-size:30px;
		pointer-events:none;
		width:400px;
		/*
		top:23px;
		left:23px;width:10px;
		height:10px;
		
		background-color:#F00;*/
	}
	.whale{
		position:absolute;
		pointer-events:none;
		top:-40px;
		left:-70px;
		/*background-image:url(../img/map/icons/whale.png);*/
		background-position:-200px 0px;
		width:200px;
		height:100px;
		
	}
	.cloud{
		position:absolute;
		top:0px;
		left:0px;
		width:250px;
		height:250px;
		background-image:url(../img/map/icons/cloud.png);
	}
	
	#stormCloud{
		position:absolute;
		top:0px;
		left:0px;
		opacity:.5;
		z-index:4;
	}
	.roundWave{
		position:absolute;
		top:0px;
		left:0px;
		width:150px;
		height:150px;
		background-image:url(../img/map/icons/waterSplash.png);
		visibility:hidden;
	}
	#whaleSplash{
		position:absolute;
		bottom:0px;
		left:0px;
		width:700px;
		height:100px;
		overflow:hidden;
	}
	#whaleLeap{
		position:absolute;
		bottom:0px;
		left:0px;
		background-image:url(../img/map/icons/whale2.png);
		width:280px;
		height:150px;
		visibility:hidden;
	}
	#whalePatch{
		position:absolute;
		top:0px;
		left:0px;
		overflow:hidden;
		visibility:hidden;
		width:700px;
		height:400px;
	}
	.infoPanel{
	font-family: 'Stoke', serif;
	font-size:14px;
	padding:30px;
	padding-top:15px;
	color:#790000;
	font-weight:normal;
	position:absolute;
	width:240px;
	height:197px;
	top:400px;
	left:40px;
	background-image:url(../img/ships/popupBox_300.png);
	background-repeat:no-repeat;
	z-index:5;
	opacity:.9;
}
.infoPanelOption{
	position:relative;
	left:-3px;
	border-color:#f00;
	border-style:solid;
	border-width:1px;
	padding:4px;
	width:240px;
	height:14px;
	margin-top:7px;
	margin-bottom:7px;
	cursor:pointer;
}
.infoPanelOption2{
	position: relative;
	top: 126px;
	border-radius: 30px;
	left: -73px;
	margin-bottom: -3px;
	padding: 4px;
	width: 260px;
	height: 90px;
	color: #000;
	font-size: 15px;
	cursor: pointer;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(../img/interface/buttons/circleActivityIcons.png);
}
#optJournal{background-position:0px 0px;}
#optMedical{background-position:0px -100px;} 
#optPatients{background-position:0px -200px;}
#optSymptom{background-position:0px -300px;}
#optTalk{background-position:-300px -300px;}
#optExercise{background-position:-300px -0px;}
#optFish{background-position:-300px -100px;}
#optShipStats{background-position:-300px -200px;}
#optHelpers{background-position:-600px 0px;}
#optInspect{background-position:-600px -100px;}
#optExercise{background-position:-600px -200px;} 
#optClean{background-position:-600px -300px;}
#optInventory{background-position:-900px 0px;}
#optExamine{background-position:-900px -100px;}
#optRats{background-position:-900px -200px;}