/* Banner removal */
#ct_catfish {
	display: none !important;
}


/* Map page only */

body {
  position: relative;
  background-color: rgba(228, 213, 175, 1);
	padding-top: .1em;
	font-size: 1.4vw;
  line-height: 2.5vw;
	cursor: url('../images/magnifying_glass_cursor_01.png') 32 18, auto;
  overflow: hidden;
}
::hover {
	cursor: url('../images/magnifying_glass_cursor_01.png') 32 18, auto;
}


#alert-box {
  position: fixed;
  top: .5em;
  left: 8.5em;
	font-size: 2vw;
  z-index: 10;
}


/* Map */
.map {
  padding-left: 0 !important; 
  padding-right: 0 !important;
}

/* Port locations */
#Antigua {
	position: absolute; top: 54.823%; left: 87.193%; width: 1.25%; height: auto;
}
#Barbados {
	position: absolute; top: 71.144%; left: 93.496%; width: 1.25%; height: auto;
}
#Bermuda {
	position: absolute; top: 3.074%; left: 78.539%; width: 1.25%; height: auto;
}
#Campeche {
	position: absolute; top: 43.841%; left: 15.557%; width: 1.25%; height: auto;
}
#Caracas {
	position: absolute; top: 83.893%; left: 74.837%; width: 1.25%; height: auto;
}
#Cartagena {
	position: absolute; top: 85.641%; left: 53.526%; width: 1.25%; height: auto;
}
#Coro {
	position: absolute; top: 79.504%; left: 67.583%; width: 1.25%; height: auto;
}
#Cumana {
	position: absolute; top: 83.337%; left: 82.041%; width: 1.25%; height: auto;
}
#Curacao {
	position: absolute; top: 76.824%; left: 69.284%; width: 1.25%; height: auto;
}
#Eluthera {
	position: absolute; top: 25.334%; left: 50.875%; width: 1.25%; height: auto;
}
#Florida_Keys {
	position: absolute; top: 24.322%; left: 38.819%; width: 1.25%; height: auto;
}
#Gibraltar {
	position: absolute; top: 88.341%; left: 64.632%; width: 1.25%; height: auto;
}
#Gran_Grenada {
	position: absolute; top: 76.506%; left: 26.213%; width: 1.25%; height: auto;
}
#Grand_Bahama {
	position: absolute; top: 17.115%; left: 44.872%; width: 1.25%; height: auto; 
}
#Guadeloupe {
	position: absolute; top: 58.317%; left: 87.643%; width: 1.25%; height: auto;
}
#Havana {
	position: absolute; top: 31.809%; left: 35.867%; width: 1.25%; height: auto;
}
#Leogane {
	position: absolute; top: 50.651%; left: 60.130%; width: 1.25%; height: auto;
}
#Maracaibo {
	position: absolute; top: 83.814%; left: 62.781%; width: 1.25%; height: auto;
}
#Margarita {
	position: absolute; top: 79.922%; left: 83.141%; width: 1.25%; height: auto;
}
#Martinique {
	position: absolute; top: 64.710%; left: 89.344%; width: 1.25%; height: auto;
}
#Montserrat {
	position: absolute; top: 56.808%; left: 86.343%; width: 1.25%; height: auto;
}
#Nassau {
	position: absolute; top: 23.687%; left: 47.873%; width: 1.25%; height: auto;
}
#Nevis {
	position: absolute; top: 55.379%; left: 85.192%; width: 1.25%; height: auto;
}
#Nombre_de_Dios {
	position: absolute; top: 87.765%; left: 43.371%; width: 1.25%; height: auto;
}
#Panama {
	position: absolute; top: 90.406%; left: 42.571%; width: 1.25%; height: auto;
}
#Petit_Goave {
	position: absolute; top: 51.645%; left: 59.079%; width: 1.25%; height: auto;
}
#Port-de-Paix {
	position: absolute; top: 45.768%; left: 59.529%; width: 1.25%; height: auto;
}
#Puerto_Bello {
	position: absolute; top: 88.103%; left: 41.820%; width: 1.25%; height: auto;
}
#Puerto_Cabello {
	position: absolute; top: 83.893%; left: 72.586%; width: 1.25%; height: auto;
}
#Puerto_Principe {
	position: absolute; top: 38.999%; left: 46.223%; width: 1.25%; height: auto;
}
#Rio_de_la_Hacha {
	position: absolute; top: 79.840%; left: 59.279%; width: 1.25%; height: auto;
}
#San_Juan {
	position: absolute; top: 50.375%; left: 75.887%; width: 1.25%; height: auto;
}
#Santa_Catalina {
	position: absolute; top: 72.017%; left: 37.668%; width: 1.25%; height: auto;
}
#Santa_Marta {
	position: absolute; top: 80.775%; left: 56.178%; width: 1.25%; height: auto;
}
#Santiago {
	position: absolute; top: 44.597%; left: 51.375%; width: 1.25%; height: auto;
}
#Santiago_de_La_Vega {
	position: absolute; top: 53.393%; left: 49.674%; width: 1.25%; height: auto;
}
#Santo_Domingo {
	position: absolute; top: 50.772%; left: 66.333%; width: 1.25%; height: auto;
}
#Sint_Maarten {
	position: absolute; top: 49.466%; left: 84.841%; width: 1.25%; height: auto;
}
#St_Augustine {
	position: absolute; top: 3.334%; left: 38.469%; width: 1.25%; height: auto; 
}
#St_Eustatius {
	position: absolute; top: 53.113%; left: 84.842%; width: 1.25%; height: auto;
}
#St_Kitts {
	position: absolute; top: 54.743%; left: 84.142%; width: 1.25%; height: auto;
}
#St_Martin {
	position: absolute; top: 51.566%; left: 83.841%; width: 1.25%; height: auto;
}
#Tortuga {
	position: absolute; top: 44.220%; left: 59.079%; width: 1.25%; height: auto;
}
#Trinidad {
	position: absolute; top: 83.217%; left: 89.094%; width: 1.25%; height: auto;
}
#Vera_Cruz {
	position: absolute; top: 44.676%; left: 2.351%; width: 1.25%; height: auto;
}
#Villa_Hermosa {
	position: absolute; top: 49.719%; left: 10.255%; width: 1.25%; height: auto;
}


/* Ports/Ship | Tooltips */
/* Cities/Ships Lists */
.cities {
  line-height: 1em;
  height: 99.5vh;
  padding: 1px;
  margin-bottom: 1px;
  overflow: auto;
}
.cities-list li {
	padding-left: .2em;
	padding-bottom: .2em;
	font-size: 1em;
}
.cities-list li:hover {
	background: #abc;
	border-radius: .2em;
}

ul.cities-list li.Spanish::before {
  background-image: url('../images/factions/faction-yellow-icon.png');
  background-size: 20px 20px;
  display: inline-block; 
  width: 20px; 
  height: 20px;
  margin-right: 10px;
  content:"";
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
ul.cities-list li.English::before {
  background-image: url('../images/factions/faction-red-icon.png');
  background-size: 20px 20px;
  display: inline-block; 
  width: 20px; 
  height: 20px;
  margin-right: 10px;
  content:"";
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
ul.cities-list li.Dutch::before {
  background-image: url('../images/factions/faction-green-icon.png');
  background-size: 20px 20px;
  display: inline-block; 
  width: 20px; 
  height: 20px;
  content:"";
  margin-right: 10px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
ul.cities-list li.French::before {
  background-image: url('../images/factions/faction-blue-icon.png');
  background-size: 20px 20px;
  display: inline-block; 
  width: 20px; 
  height: 20px;
  content:"";
  margin-right: 10px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
ul.cities-list li.Independent::before {
  background-image: url('../images/factions/faction-black-icon.png');
  background-size: 20px 20px;
  display: inline-block; 
  width: 20px; 
  height: 20px;
  content:"";
  margin-right: 10px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

/* Duel Highlight */
.highlight {
	background: #abc;
	border-radius: .4em;
}

/* Map Icons & ToolTips */
/* Cities factions (on map) */
.English {
  background: url("../images/factions/faction-red-icon.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.Dutch {
  background: url("../images/factions/faction-green-icon.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.French {
  background: url("../images/factions/faction-blue-icon.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.Independent {
  background: url("../images/factions/faction-black-icon.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.Spanish {
  background: url("../images/factions/faction-yellow-icon.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}



/* Ports (cities) */
.port-loc {
  position: absolute;
  height: 9%;
  width: 6%;
	padding: 1.5%;
  margin-left: -.8%;
  margin-top: -.8%;
  z-index: 3;
}
	.port-loc:hover {
	  background: #abc;
	  border-radius: .4em;
	  -webkit-transition: all 0.2s ease;
	  -moz-transition: all 0.2s ease;
	  -ms-transition: all 0.2s ease;
	  -o-transition: all 0.2s ease;
	  transition: all 0.2s ease;
	  z-index: 5;
	}

  .port-loc:hover span {
    display: block;
    transform-origin: 100% 0%;
	  -webkit-transition: all 0.4s ease;
	  -moz-transition: all 0.4s ease;
	  -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
	  transition: all 0.4s ease;
    z-index: 5;
  }
  .port-loc span {
    display: none;
    position: fixed;
    top: .5em;
    right: .5em;
    text-align: left;
    background-color: #c6b28f;
    padding: 5px;
    width: 21em;
    border: 3px solid #995209;
    border-radius: 10px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #995209;
    z-index: 5;
  }
	.port-house {
	  position: absolute;
	  min-width: 60%;
	  height: 60%;
	  transform: translate(-50%, -50%);
	}
  .port-loc img {
    width: 1.3em;
  }
  .port-loc .title {
    font-weight: bold;
	  text-transform: uppercase;
    text-align: center;
	  border-bottom: .01em solid #995209;
    margin-bottom: .5em;
    font-size: 1.2em;
  }
  .port-loc .body {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.4em;
  }
  .port-loc .body img {
    float: left;
    margin-right: .5em;
    width: 25%;
  }

/* Ships */
.ship-loc {
  position: absolute;
  height: 8%;
  width: 5%;
  z-index: 3;
}
	.ship-loc:hover {
	  background: #abc;
	  border-radius: .4em;
	  -webkit-transition: all 0.2s ease;
	  -moz-transition: all 0.2s ease;
	  -ms-transition: all 0.2s ease;
	  -o-transition: all 0.2s ease;
	  transition: all 0.2s ease;
	  z-index: 5;
	}
  .ship-loc:hover span {
    display: block;
    transform-origin: 100% 0%;
	  -webkit-transition: all 0.4s ease;
	  -moz-transition: all 0.4s ease;
	  -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
	  transition: all 0.4s ease;
  }
  .ship-loc span {
    display: none;
    position: fixed;
    top: .5em;
    right: .5em;
    text-align: left;
    background-color: #c6b28f;
    padding: 5px;
    width: 21em;
    border: 3px solid #995209;
    border-radius: 10px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #995209;
    z-index: 5;
  }
  .ship-loc img {
    width: 85%;
    transform: translate(10%, -5%);
  }
  .ship-loc .title {
    font-weight: bold;
	  text-transform: uppercase;
    text-align: center;
	  border-bottom: .01em solid #995209;
    margin-bottom: .5em;
    font-size: 1.2em;
  }
  .ship-loc .body {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.3em;
  }
  .ship-loc .body img {
    float: left;
    margin-right: .5em;
    width: 20%;
  }