#map { position:relative; height:600px; width:100%; }

#Maps div {
	width: 100%;
	height: 100%;
}
#Maps {
	background-color:#fff;
	max-width:980px;
	max-height:600px;
	width: 100%;
	height: 60vw;
    cursor: move;
}
#MapScale {
	/*position: absolute;*/
	/*bottom: 0;*/
    /*cursor: default;*/
    text-align: right;
}
#ElevationKey {
	/*display: none;*/
	background: #FFFFFF;
	position: absolute;
	top: 10px;
	left: 10px;
    box-shadow: 1px 1px 4px #666666;
    padding:5px;
}
#Legends {
	padding: 10px;
	background: #F1EDE9;
    box-shadow: 1px 1px 1px #AAAAAA;
}
#LegendTable {
	width:100%;
	height: 103px;
}
#LegendTable td {
	width:33%;
}
.legend {
	display:inline;
}
.Scale {
	height:4px; 
	margin-left:6px;
	border-color: #000000; 
	border: 1px;
	border-style: none none none solid;
	float:right;
}
#ScaleKmText,#ScaleMilesText {
	font-size: 80%;
}
#ScaleKm {
	width:100px; 
	border-bottom-style: solid;
}
#ScaleMiles {
	width:160px; 
	border-top-style: solid;
	margin-top:6px;
}
#ScaleKmTd {
	width: 80px;
}
#ScaleMilesTd {
	width: 130px;
}
#Navtibet_main img {
	border: 1px;
	border-bottom: 2px;
	border-style: solid;
	border-color:#FFDD00;
}
#SacredMountains g, 
#Cities g, 
#Monasteries g, 
#FolkRegions g, 
#NGari, 
#NavTexttibet_main, 
#ViewFullScreen, 
g.monastery {
    cursor: pointer;
}
g.monastery text{
	fill: #FF0000;
}
#NavMaps div img {
	height:136px;
}
#PlaceDetailOverlay {
	position:fixed;
	top:0;
	left:0;
	right:0;
	opacity:.6;
	background-color:#000;
	height:100%;
	width:100%;
	z-index:1000;
}
#FixCoordsCard {
	width:420px;
	height:50px;
	border:1px solid #873522;
	background-color:#e9e7dd;
	padding:20px;
	position:absolute;
	top:240px;
	left:264px;
}	
#CloseFixCoordsCard {
	position:absolute;
	top: 223px;
	left: 714px;
	cursor: pointer;
}	



#PlaceDetailCardMap {
	width:373px;

	z-index:101;
	border:1px solid #873522;
	background-color:#e9e7dd;
	padding:20px;

	z-index:1001;
	left:0;
	right:0;
	margin:0 auto;
	display: flex;
	flex-direction: column;

	position: fixed;
	top: 50%;
	/* bring your own prefixes */
	transform: translate(0%, -50%);
}
#ClosePlaceDetailCardMap {
	width:30px;
	position:absolute;
	top: 23px;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding-left:418px;
	cursor: pointer;
	z-index:1002;

	position: fixed;
	top: 50%;
	/* bring your own prefixes */
	transform: translate(0%, -50%);
}

#PersonDetailCardMap {
	width:281px;

	border:1px solid #873522;
	background-color:#e9e7dd;
	padding:20px;

	z-index:900;
	left:60px;
	top: 400px;
	position: absolute;
	max-height: 500px;
	overflow: scroll;
}
#ClosePersonDetailCardMap {
	width:30px;
	position:absolute;
	top: 400px;
	left: 352px;

	cursor: pointer;
	z-index:901;
}

#FacetDetailCardMap {
	width:281px;

	border:1px solid #873522;
	background-color:#e9e7dd;
	padding:20px;

	z-index:900;
	left:60px;
	top: 400px;
	position: absolute;
	max-height: 500px;
	overflow: scroll;
}
#CloseFacetDetailCardMap {
	width:30px;
	position:absolute;
	top: 400px;
	left: 352px;

	cursor: pointer;
	z-index:901;
}

/*#PlaceDetailCardMap div.photo img {
	max-width: 100%;
	max-height: 200px;
	height: auto;
	width:auto;
	/*height:200px;*/

/*
#PlaceDetailCardMap div.photo {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	max-height: 200px;
}
#PlaceDetailCardMap div.photo img {
	flex-shrink:0;
	min-width:100%;
	min-height:100%
}
*/

#PlaceDetailCardMap div.title {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	color:#373330;
	line-height:32px;
	letter-spacing:0;
	margin-top:10px;
}





#PlaceDetailCardMap div.years {
	/*Myriad pro*/
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color:#4E5D47;
	line-height:24px;
	letter-spacing:0;	
}
#PlaceDetailCardMap div.desc {
	font-family:'Cardo', Georgia, serif;
	font-size: 16px;
	color:#555555;
	line-height:20px;
	letter-spacing:0;	

	margin-bottom: 30px;
}



#PlaceDetailCardMap div.viewLink {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11px;
	color:#555;
	line-height:15px;
	letter-spacing:.1em;	
	position:absolute;
	bottom:20px;
	left:20px;
	cursor: pointer;
	text-transform: uppercase;
}
#PlaceDetailCardMap div.viewLink:hover {
	color:#873522;
}
#PlaceDetailCardMap div.mapLinkDiv {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11px;
	color:#555;
	line-height:15px;
	letter-spacing:.1em;	
	position:absolute;
	bottom:20px;
	right:20px;
	cursor: pointer;
	text-transform: uppercase;
}
#PlaceDetailCardMap span.mapLink:hover {
	color:#873522;
}
#PlaceDetailCardMap span.fixCoordsLink {
	color:blue;
    text-decoration: underline;
}

#PlaceDetailCardMap div.photo {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow: hidden;
	max-height: 200px;
}
#PlaceDetailCardMap div.photo img.wide {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}
#PlaceDetailCardMap div.photo img.tall {
	max-height: 100%;
	width: 100%;
}​

#PlaceDetailCardMapExpanded {
	width:600px;

	border:1px solid #873522;
	background-color:#e9e7dd;
	padding:20px;
	position:absolute;
	top:520px;
	/*left:288px;*/
	left:50%;
	margin-left: -300px;

	padding: 20px;
	z-index: 1001;
	/*margin: 0 auto;*/
	display: flex;
	flex-direction: column;
}
#ClosePlaceDetailCardMapExpanded {
	width: 30px;
	position: absolute;
	top: 503px;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding-left: 688px;
	cursor: pointer;
	z-index: 1002;
}
#PlaceDetailCardMapExpanded div.photo {
	max-width: 300px;
	max-height: 200px;
	height: auto;
	width:auto;
	float: left;
}
#PlaceDetailCardMapExpanded div.photo img {
	max-width: 300px;
	max-height: 200px;
	height: auto;
	width:auto;
	float: left;
}
#PlaceDetailCardMapExpanded div.title {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	color:#373330;
	line-height:32px;
	letter-spacing:0;
	margin-top:20px;

	max-width: 300px;
}
#PlaceDetailCardMapExpanded div.years {
	/*Myriad pro*/
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color:#4E5D47;
	line-height:24px;
	letter-spacing:0;

	max-width: 300px;
}
#PlaceDetailCardMapExpanded div.desc {
	font-family:'Cardo', Georgia, serif;
	font-size: 16px;
	color:#555555;
	line-height:20px;
	letter-spacing:0;
	margin-bottom: 30px;

	max-width: 300px;
}

#PlaceDetailCardMapExpanded div.miniTimeline {
	font-family:'Cardo', Georgia, serif;
	font-size: 16px;
	color:#555555;
	line-height:20px;
	letter-spacing:0;
	margin-bottom: 30px;
	float: left;
	padding-left: 20px;
	max-width: 280px;
}

#PlaceDetailCardMapExpanded div.viewLink {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11px;
	color:#555;
	line-height:15px;
	letter-spacing:.1em;
	position:absolute;
	bottom:20px;
	left:20px;
	cursor: pointer;
	text-transform: uppercase;
	float: left;
	max-width: 300px;
}
#PlaceDetailCardMapExpanded div.viewLink:hover {
	color:#873522;
}
#PlaceDetailCardMapExpanded div.mapLinkDiv {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 11px;
	color:#555;
	line-height:15px;
	letter-spacing:.1em;
	position:absolute;
	bottom:20px;
	right:20px;
	cursor: pointer;
	text-transform: uppercase;
}
#PlaceDetailCardMapExpanded span.mapLink:hover {
	color:#873522;
}
#PlaceDetailCardMapExpanded span.fixCoordsLink {
	color:blue;
	text-decoration: underline;
}


#wrapperPlaceDetailCardMapExpanded {
	margin-right: 300px;
}
#contentPlaceDetailCardMapExpanded {
	float: left;
	width: 100%;
}
#sidebarPlaceDetailCardMapExpanded {
	float: right;
	width: 300px;
	margin-right: -300px;
	max-height: 600px;
	overflow: auto;
}
#clearedPlaceDetailCardMapExpanded {
	clear: both;
}

#MapCrumbs {
	margin:20px 0;
	line-height:15px;
	color:#888;
	font-size:11px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing:.1em;
}
#NavTextLevelOne {
	color:#873522;
}
#NavTexttibet_main {
	color:#4F4F50;
}
#MapContainer {
	max-width:980px; 
	position:relative;
	margin:auto;
	
}
#Maps { 
	/*position:relative;*/
}
#NavMaps { 
	height:136px;
	overflow:hidden;
}
#Navtibet_main {
	width:25%;
	margin-right:10px;
}

	.ui-control {
	  background:#fff;
	  position:absolute;
	  top:230px;
	  right:10px;
	  padding:10px;
	  z-index:100;
	  border-radius:3px;
	  border: 1px solid #666;
	  }

	.my-icon {
	  z-index:2000;
	  border-radius: 100%;
	  width: 15px;
	  height: 15px;
	  text-align: left;
	  line-height: 15px;
	  border: 1px solid #666;
	  background-color:rgba(239, 83, 55, 0.8);
	}

	.community-icon {
		z-index:2000;
		border-radius: 100%;
		width: 15px;
		height: 15px;
		text-align: left;
		line-height: 15px;
		border: 1px solid #666;
		background-color:rgba(239, 83, 55, 0.8);
	}

	.mountain-icon {
		z-index:2000;
		width: 15px;
		height: 15px;
		text-align: left;
		line-height: 15px;
		background-image: url("https://treasuryoflives.org/images/mountain-icon-red.png");
		background-size: cover;
	}

	.no-cluster-icon {
	  border-radius: 100%;
	  width: 15px;
	  height: 15px;
	  text-align: left;
	  line-height: 15px;
	  border: 1px solid #666;
	  background-color:rgba(239, 83, 55, 0.8);
	}
	
	.city-icon { 
	  width: 12px;
	  height: 12px;
	  text-align: left;
	  line-height: 12px;
	  border: 1px solid #666;
	  background-color:rgba(255, 255, 255, 0.8)
	}

	.region-label{
	  
	  border-radius: 100%;
	  width: 15px;
	  height: 15px;
	  text-align: left;
	  line-height: 15px;
	  color: black;
	  border: 0px solid #666;
	  background-color:rgba(239, 83, 55, 0.0)
	}

	.icon-dc {
	  background: #3ca0d3;
	}
	.icon-sf {
	  background-color:rgba(239, 83, 55, 0.8)
	}

	.leaflet-container h3 {
	  font-size: 12px;
	  line-height: 15px;
	  margin: 0 0px 30px 17px;
	  white-space: nowrap;
	  font-family: 'Cardo', Georgia, serif;
	  font-weight:600;
	  color: black;
	  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	  z-index:1901;
	}
	
	.leaflet-container h4 {
	  font-size: 12px;
	  line-height: 12px;
	  margin: -1px 0px 20px 14px;
	  white-space: nowrap;
	  font-family: 'Cardo', Georgia, serif;
	  font-weight:600;
	  color: black;
	  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}

	.leaflet-container h2 {
	  font-size: 26px;
	  white-space: nowrap;
	  font-family: 'Cardo', Georgia, serif;
	  margin-left:20px;
	  font-weight: bold;
	  color: #000;
	  z-index:1900;
	  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}
	
	.leaflet-container h1 {
	  font-size: 40px;
	  white-space: nowrap;
	  font-family: 'Cardo', Georgia, serif;
	  margin-left:0px;
	  font-weight: bold;
	  color: #000;
	  z-index:1900;
	  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}
	
.slanted {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);
}

.marker-special
{
	z-index: 2000 !important;
	/* background-color:rgba(60, 180, 60, 0.8) */
}

.community-special
{
	z-index: 2001 !important;
	/* background-color:rgba(60, 180, 60, 0.8) */
}

.mapSearchCheckbox
{
	vertical-align:middle; font-size: 20px;line-height: 27px;margin-bottom: 20px;font-family: 'Cardo', Georgia, serif;
}

.rotate 
{
-ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
    transform: rotate(20deg);
}

.spaced
{
	letter-spacing: 1em;
}

.spaced-1
{
	letter-spacing: .4em;
}

.spaced-2
{
	letter-spacing: 1.4em;
}
.plateau
{
	font-size: 20px !important;
	font-style: italic;
}

.rotate10
{
	-ms-transform: rotate(10deg); /* IE 9 */
	    -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
	    transform: rotate(10deg);
}

.rotate20
{
	-ms-transform: rotate(20deg); /* IE 9 */
	    -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
	    transform: rotate(20deg);
}

.rotate30
{
	-ms-transform: rotate(30deg); /* IE 9 */
	    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
	    transform: rotate(30deg);
}

.rotate-10
{
	-ms-transform: rotate(-10deg); /* IE 9 */
	    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
	    transform: rotate(-10deg);
}

.rotate-20
{
	-ms-transform: rotate(-20deg); /* IE 9 */
	    -webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
	    transform: rotate(-20deg);
}

.rotate-30
{
	-ms-transform: rotate(-30deg); /* IE 9 */
	    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
	    transform: rotate(-30deg);
}

.mapLinks{font-size:34px;}

.map-search{float: left; margin-left: 15px; width: 329px; /* transforms to width: 268px; */ height: 38px; border-right: solid 1px #e9e7dd;
	transition-property: all;
	transition-duration: 200ms;
	transition-timing-function: ease;}
.map-search form div{height: 38px; width: 329px; /* transforms to width: 268px;*/ position: relative;
	transition-property: all;
	transition-duration: 200ms;
	transition-timing-function: ease;}
.map-search label{display: none; width: 60px; position: absolute; top: 9px; left: 8px; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.map-search input#query{border: 0; display: block; height: 35px; width: 243px;/* transforms to width: 243px;*/ position: absolute; top: 0; left: -5px; font-size: 16px; line-height: 1.5; padding: 0; color: #222; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	transition-property: all;
	transition-duration: 200ms;
	transition-timing-function: ease;}
.map-search input#query::-webkit-input-placeholder{font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.map-search input#query:-moz-placeholder{font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.map-search input#query::-moz-placeholder{font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.map-search input#query:-ms-input-placeholder{font-weight: bold; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.map-search input[type="submit"]{width: 30px; height: 38px; position: absolute; top: 0; right: 3px; background: transparent url('https://treasuryoflives.org/images/bkg-icon-search.png') no-repeat 4px 8px; background-size: 20px 20px; border: 0;}

div.timeline-event {
	border-color: #d3d3d3;
}