@charset "UTF-8";
/* CSS Document */

body {
  background-image: url("grid.jpg");
	background-size: 15px;
  background-repeat: repeat;

}
.cover {  background-image: url("grid.jpg");
	background-size: 15px;
  background-repeat: repeat;
width: 100%;
height: 100%;
	min-height:  100%;
	padding: 0%;}



.hiddensound {
		position: absolute; /* Stay fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	
	z-index: -200;
}
.opener {
	height: 100%;
	width: 100%;
background-image: url("grid.jpg");
	background-size: 15px;
  background-repeat: repeat;

}
.openimg {
	position: absolute; /* Stay fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 20;

}
.swaptable {
  border-collapse: collapse;
	width: 100%;
	background-color: white;
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 1.2vw;
	color: #0099FF;
	z-index: 400;
	padding: 0px 60px;
}

.swaptable td,.swaptable th{
  border: 2px solid #0099FF;
	
}
.tableheading {
	font-size: 2.5vw;
	text-align: center;
}

.swaptableinfo {
  border-collapse: collapse;
	width: 100%;
	height: 99.8%;
	background-color: white;
	font-family: Helvetica, Arial, "sans-serif";
	text-align: justify;
	font-size: 1.2vw;
	color: #000;
	z-index: 400;
	padding: 0px 0px;
}

.swaptableinfo td,.swaptableinfo th{
  border: 2px solid #0099FF;
	padding: 20px 40px 20px 40px;
	
}
.tableheadinginfo {
	font-size: 2.5vw;
	text-align: center;
}
.island1 {
	position: absolute;
	left: 5660px;
	top:13550px;
	
	margin: -150px;
}
.island2 {
	position: absolute;
	left: 5750px;
	top:14530px;
	
	margin: -210px;
}
.island3 {
	position: absolute;
	left: 3940px;
	top:14940px;
	
	margin: -210px;
}
.island4 {
	position: absolute;
	left: 2600px;
	top:10100px;
	
	margin: -210px;
}
.island5 {
	position: absolute;
	left: 6870px;
	top:560px;
	
	margin: -210px;
}
.island6 {
	position: absolute;
	left: 7330px;
	top:12930px;
	
	margin: -210px;
}
.island7 {
	position: absolute;
	left: 6440px;
	top:12870px;
	
	margin: -210px;
}
.island8 {
	position: absolute;
	left: 5390px;
	top:12450px;
	
	margin: -210px;
}
.island9 {
	position: absolute;
	left: 5370px;
	top:13150px;
	
	margin: -250px -150px;
}
.island10 {
	position: absolute;
	left: 5210px;
	top:13480px;
	
	margin: -210px;
}


.islandswap {
	position: absolute;
	left: 8060px;
	top:8510px;
	
	margin: -210px;
}
#myCanvas {
	margin: 0px;
	position: absolute;
	left: 0;
	top: 0;
	
}
#myCanvas2 {
	margin: 0px;
	position: absolute;
	left: 0;
	top: 0;
}
#starthere {
	position: absolute;
	left: 6000px;
	top: 9000px;
}

.tooltip1 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip2 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip3 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip4 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip5 {
   position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip6 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip7 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip8 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip9 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
}

.tooltip10 {
  position: absolute;  
  background-color: none;
  color: #000;
	z-index: 10;
	
}





.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 120px;
   background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 120px;
    background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip3 .tooltiptext3 {
  visibility: hidden;
  width: 120px;
    background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip4 .tooltiptext4 {
  visibility: hidden;
  width: 120px;
  background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip5 .tooltiptext5 {
  visibility: hidden;
  width: 120px;
  background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip6 .tooltiptext6 {
  visibility: hidden;
  width: 120px;
    background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip7 .tooltiptext7 {
  visibility: hidden;
  width: 120px;
   background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip8 .tooltiptext8 {
  visibility: hidden;
  width: 120px;
    background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip9 .tooltiptext9 {
  visibility: hidden;
  width: 120px;
   background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}
.tooltip10 .tooltiptext10 {
  visibility: hidden;
  width: 120px;
   background-color: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 10;
}


.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}
.tooltip3:hover .tooltiptext3 {
  visibility: visible;
}
.tooltip4:hover .tooltiptext4 {
  visibility: visible;
}
.tooltip5:hover .tooltiptext5 {
  visibility: visible;
}
.tooltip6:hover .tooltiptext6 {
  visibility: visible;
}
.tooltip7:hover .tooltiptext7 {
  visibility: visible;
}
.tooltip8:hover .tooltiptext8 {
  visibility: visible;
}
.tooltip9:hover .tooltiptext9 {
  visibility: visible;
}
.tooltip10:hover .tooltiptext10 {
  visibility: visible;
}



/* Popup container - can be anything you want */
.popup1 {
    
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}
.popup2 {
  
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;

}

.popup3 {
 
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}
.popup4 {
 
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 z-index: 100;
}
.popup5 {
  
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}
.popup6 {
  
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}
.popup7 {
  
  display: inline-block;
	
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 z-index: 100;
}

.popup8 {

  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}
.popup9 {

  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 z-index: 100;
}
.popup10 {
  
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}

.popup13 {
  
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	 z-index: 100;
}


/* The actual popup */
.popup1 .popuptext1 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup2 .popuptext2 {
 visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup3 .popuptext3 {
 visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
/* The actual popup */
.popup4 .popuptext4 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup5 .popuptext5 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup6 .popuptext6 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup7 .popuptext7 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup8 .popuptext8 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
/* The actual popup */
.popup9 .popuptext9 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}
.popup10 .popuptext10 {
visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
}

.popup13 .popuptext13 {
 visibility: hidden;
    width: 90%;
	height: 90%;
	overflow-x: scroll;
  background-color: rgba(355, 355, 355, 0.95);
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 0px 0px;
  position: fixed;
  z-index: 100;
  top: 5%;
  left: 5%;
	font-family: Avenir;
	
}



/* Toggle this class - hide and show the popup */
.popup1 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup3 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup4 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup5 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup6 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup7 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup8 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup9 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}
.popup10 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}



.popup13 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
	z-index: 100;
}




/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.infoimage {
width: "100%";
	vertical-align: middle;

}
.infotext {
	text-align: justify;
}