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

body {
	font-family:"Times New Roman", Times, serif;
	color:rgb(90,115,175); /* white 95aaca */
	background-color:white; /* light gray #f7f9fb  light brown: #fbfbfb fcfcfa  fbfaf5    */
	/* color:rgb(153,153,153);
	background-color: CCC; /* CCC gray */
	margin: 0;
}

/* ==================================================== */
/* Summary Page and Button */
.sumBtn {
	width: 150px;
	font-size: 12px;
	cursor: pointer;
	text-align: center;
	position: absolute;
	z-index: 70;
	top: 440px;
}
.sumBtn:hover, .closeBtn:hover, .sumCloseIcon:hover {
	font-weight: bold;
	color: rgba(255, 153, 0, 1);
} 
.sumPG {
	width: 600px;
	height: 400px;
	border: 2px solid rgba(0, 0, 0, 1);
	top: 140px;
	left: 174px;
	background-color: rgba(255, 255, 255, .95);
	opacity: .95;
	position: absolute;
	z-index: 999;	
}
.sumTitle, .sumBody {
	float: left;
	margin: 0 10px 0 10px;
}
.sumCloseIcon {
	float: right;
	font-size: 12px;
	margin: -5px 10px 0 0;
	cursor: pointer;
}
.clear {
	clear: both;
}

/* ==================================================== */
#wrapper {
	margin:0 auto;
	background:#dadada; /* light gray CCC e7e7e7 dadada */
	width:1160px;
	height:766px;
	padding-left: 20px;
	position: relative;
	overflow: hidden;
}

#header {
	width:1140px;
	height: 80px;
	position: relative;
	border-bottom: 1px solid rgb(153,153,153);	
	margin-bottom: 8px;
}

#title {
	font-family:"Times New Roman", Times, serif;
	float: left;
	font-size: 28px;
	margin-top: 22px; 
	margin-left: 2px;
	color: black;
}

#map {
	position: relative;
	float: left;
	border: 1px solid rgb(102,102,102);	
	background: rgb(0,45,100); /* background: rgb(0,153,255); */
	overflow: hidden;
}

#legend {
	position: absolute;
	right: 19px;
	top: 90px; 
	background: #FFF;
	z-index: 9999;
	padding: 6px 6px 6px 14px;
	/* border: 1px solid rgb(89,89,91); */
	border: solid 1px black; /* */
	opacity: .9;
	height: 638px;
	width: 170px;
	font-size: 12px;
	font-weight: bold;
	text-anchor: start;
}
#legendContent {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
}
#legendContent span {
	/* float: left; */
}
#legendImage {
	height: 16px;
	width: 16px;
	border: 0px solid rgb(89,89,91);
	padding-right: 0px;
	float: left;
}
.legendSameLine {
	height: 16px;
	border: 0px solid #9F3;	
	padding: 2px;
}
#legendNote {
	width: 150px;
	height: 20px;
	border: 0px solid #9F3;
	padding-top: 8px;
	font-size: 10px;	
}
#legendTitle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align: center;
	cursor: pointer; 
	width: 150px; 
	padding-bottom: 3px;
}
.legendText {
	position: absolute;
	/* float: left; */
	padding-top: 2px;
	padding-left: 20px;
	font-size: 12px;
	cursor: pointer;
}	



svg {
	background:rgb(96,160,255); /* background:rgb(0,153,255); */
	stroke:rgb(0,51,204);
	stroke-linejoin:round;
} 

#path {
  stroke: green;
  stroke-width: 0.25px;
  fill: none;
}

.countries {
	fill: rgb(255,255,204);
	stroke: #a8b4ff;
	stroke-width: 0.2px;
	opacity: 0.5;
	display: none;
}
.europe {
	stroke: #625750;
	stroke-width: 0.5px;
	fill: #fff2df; /* Sage Green */
	opacity: 0.5;
	display: none;
 }
.boundaries {
	stroke: #fefef8; /* #ce8300   light brown: RGB: (206,131,0) */
	stroke-width: 1px;
	opacity: 1;
	fill: #fefef8; 
	cursor: pointer;
	/* display: none; */
 }
.boundaries2 {
	stroke: #158017; /* 158017  ce8300 light brown: RGB: (206,131,0) */
	stroke-width: 1px;
	opacity: 1;
	fill: #f5fefb; /* light green */ 
	cursor: pointer;
	/* display: none; */
 }  
#water {
	stroke: blue;
	stroke-width: 0.2px;
	fill: blue; 
}
.rivers {
	stroke: blue; /* I replaced this blue because it looks closer to photoshop version of this: 0066ff */
	stroke-width: 0.5px;
	fill: none;
	opacity: .5;
}
.gardens {
	stroke: none; /* I replaced this blue because it looks closer to photoshop version of this: 0066ff */
	fill: #33d036;
	stroke-width: 0.0px;
	opacity: 1.0;
	size: 14px;
}
.monuments {
	stroke: none;
	fill: purple; 
} 
.roads {
	stroke: brown;
	stroke-width: 0.2px;
	fill: none; 
	cursor: pointer;
}
#riversBtn {
	stroke: blue;
	stroke-width: 0.2px;
	fill: none; 
	opacity: 0.7;
}
#gardensBtn {
	stroke: none; /* I replaced this blue because it looks closer to photoshop version of this: 0066ff */
	fill: #33d036;
	stroke-width: 0.0px;
	opacity: 1.0;
	size: 14px;
}
#monumentsBtn {
	stroke: purple;
	stroke-width: 0.2px;
	fill: none; 
	opacity: 0.7;
}
#roadsBtn {
	stroke: brown;
	stroke-width: 0.2px;
	fill: none; 
	opacity: 0.7;
}
#boundariesBtn {
	stroke: brown;
	stroke-width: 0.2px;
	fill: none; 
	opacity: 0.7;
}
.provinces {
	fill:none; /* #1d9003 #7dc47f #f8fff8 yellow-green */
	stroke:#d8efbf; /* d8efbf */
	stroke-width: 0.5px;
	stroke-opacity:1;	
	fill-opacity: 0.1;
}
.country-label {
	fill:rgb(102,51,0);
	stroke: none;
	font-family:"Times New Roman", Times, serif;
	text-transform: uppercase;
	font-size:14px;
	text-anchor:middle;
	pointer-events:none;	
}
.water-label {
	fill:white;
	stroke: none;
	font-family:"Times New Roman", Times, serif;
	/* text-transform: uppercase; */
	font-size:18px;
	text-anchor:middle;
	pointer-events:none;
	font-style: italic;	
}
.coastLine {
	fill:none;
	stroke:rgb(0,153,255);
}
.counties {
  fill: black;
}
/* .capitalIcon {
	stroke: black;
	stroke-width: 1.2px;
	fill: white;  
 } */
 .capitalIcon {
	stroke: none;
	fill: red;
	fill-rule: evenodd;
} 
 .capitalText {
	stroke-width: 0px;  
 }
.city {
	stroke: none;
}
.cityText {
	stroke: none;
}
.countryText {
	stroke: none;
	font-size:18px;
	color: gray;
	opacity:.3;
}

.castles {
	stroke: none;
	fill: blue;
}
.castlesText {
	stroke: none;
	fill: blue;
}

.triangle {
	stroke: none;
	fill: brown;
} /* this will be replaced by castle icon that is the Pointer with the C */
.castlePointer {
	stroke: none;
	fill: orange;
}
.museumPointer {
	stroke: none;
	fill: purple;
} 
.gardenPointer {
	stroke: none;
	fill: #33d036;
}
.monumentPointer {
	stroke: none;
	fill: purple;
}
.myImages {
	z-index: 1;
}
/*
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
} */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
	/* cursor:crosshair; pointer*/
	cursor: pointer;
}

.d3-tip {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
  /* = bootstrap h4 */
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

#scaleBar {
	height:50;
	width:200;
	fill:black;
	stroke:none;
	opacity:1;
}
#scaleMid {
	font-size: 10px;
	font-weight: regular;
	text-anchor: start;
	color:#000;	
}
#scaleMiles {
	font-size: 10px;
	font-weight: regular;
	text-anchor: start;	
	color:#000;
}
.scaleText {
	font-size: 10px;
	font-weight: regular;
	text-anchor: start;
	color:#000;	
}