/* === map container === */
.statMapSVG{
    font: 11px/20px Arial,Helvetica,Sans-Serif;	
}
/* === map wrapper === */
.mapWrap{
    background-color: #FFFFFF;
    background-image: url("background.gif") !important;
	-webkit-print-color-adjust: exact; 
    background-repeat: repeat-x !important;
    border: 1px solid #EEEDED;
    padding: 5px;
	margin: 5px;
	float:left;
}
/* === map title === */
.mapTitle{
    font: 11px/20px Arial,Helvetica,Sans-Serif;	
    font-weight: bold;
}
/* === map legend === */
.mapLegend table{
    font: 11px/20px Arial,Helvetica,Sans-Serif;	
    background-color: #FFFFFF;
	-webkit-print-color-adjust: exact;
    background-repeat: repeat-x !important;
    line-height: 15px;
	border-spacing: 1px;
    border: 1px solid #EEEDED;
	padding: 1px;
	margin: 5px;
}
	.mapLegend table th{
		font-weight: bold;
		text-decoration:none;
		text-align: center;
		background: url("backgroundtitle.png") repeat-x scroll 50% 50% #E6E6E6 !important;
		-webkit-print-color-adjust: exact; 
		padding: 1px 5px 1px 5px;
		margin-right: 5px;
		border-bottom: solid #bbbbbb 1px;
		border-right: solid #bbbbbb 1px;
		white-space:nowrap;
		height: 20px;
	}
	.mapLegend table td{
		color: #111111;
		background:inherit;
		-webkit-print-color-adjust: exact; 
		padding: 1px 5px 1px 5px;
		margin-right: 5px;
		height: 15px;
		border-bottom: solid #EEEEEE 1px;
		border-right: solid #EEEEEE 1px;
		white-space:nowrap;
	}
	.mapLegend table td:first{
		background:inherit !important;
	}
	.mapLegend table tr.parentArea td{
		font-weight: bold;
		text-decoration:none;
		border-bottom: none;
	}
/* === map utility button (zoom and export) === */
.mapZoom button, .mapExport button{
	width: 25px;
	-moz-user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
	
	background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #333333;
}
	.mapZoom button:hover, .mapZoom button:focus, .mapZoom button:active
	, .mapExport button:hover, .mapExport button:focus, .mapExport button:active
	, .mapExport ul.li-ex li:hover {
		background-color: #EBEBEB;
		border-color: #ADADAD;
		color: #333333;
	}
	.mapZoom button:active, .mapExport button:active {
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
		outline: 0 none;
	}
	.mapZoom button:focus, .mapExport button:focus {
		outline: thin dotted;
		outline-offset: -2px;
	}
	.mapZoom button.horizontal{
		margin-right: 5px;
	}
	.mapZoom button.vertical{
		margin-bottom: 5px;
	}
	.topLeft {
		top: 10px; left: 10px;
	}
	.topRight {
		top: 10px; right: 10px;
	}
	.topRightWithDownloadH {
		top: 10px; right: 45px;
	}
	.topRightWithDownloadV {
		top: 45px; right: 10px;
	}
	.bottomLeft {
		bottom: 10px; left: 10px;
	}
	.bottomRight {
		bottom: 10px; right: 10px;
	}
	.bottomLeft button.reset.vertical, .bottomRight button.reset.vertical { margin-bottom: 0px; }
	.topRight button.reset.horizontal, .bottomRight button.reset.horizontal { margin-right: 0px; }
.mapExport {
	top: 10px; right: 10px;
}
	.mapExport ul.li-ex li {
		text-align: right;
	}
	.mapExport ul.li-ex li a {
		display: block;
		padding: 5px;
		color: #428bca;
		text-decoration: none;
	}
	.mapExport button.download {
		background: #FFFFFF url("menu-icon.png") center no-repeat;
		width: 25px;
		height: 25px;
		float: right;
	}
.rtext{
	text-align: right;	
}
.ctext{
	text-align: center;	
}
/* === map tooltip === */
.kiddtooltip{
	position: absolute; 
	letter-spacing: 1;
	cursor:pointer;
	font-size: 10pt;
	padding: 8px;
	margin-bottom: 18px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
	background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #333333;
}
/* === loading === */

.spinner {
	position: absolute; 
	top: 45%; 
	left: 45%; 
	z-index: 1; 
}
.spinner-text {
	top: 50%; 
	left: 50%; 
	padding: 7px 10px; 
	border-radius: 5px; 
	border: 1px solid #999; 
	background: none repeat scroll 0% 0% rgb(245, 245, 242); 
	color: #999; 
	margin-left: -58px;
	margin-top: -18px;
}
.spinner-bar {
	font-size: 0;
    height: 60px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
    transition: all 0.3s ease-in-out 0s;
}

	.spinner-bar > div {
	  background-color: rgb(153, 153, 153);
	  height: 100%;
	  width: 7px;
	  display: inline-block;
	  margin: 0 3px 0 0;
	  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	  animation: stretchdelay 1.2s infinite ease-in-out;
	}

	.spinner-bar .rect2 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}

	.spinner-bar .rect3 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}

	.spinner-bar .rect4 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}

	.spinner-bar .rect5 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}

	@-webkit-keyframes stretchdelay {
	  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	  20% { -webkit-transform: scaleY(1.0) }
	}

	@keyframes stretchdelay {
	  0%, 40%, 100% { 
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	  }  20% { 
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	  }
	}

.spinner-bounce {
  width: 60px;
  height: 60px;
}

	.spinner-bounce .container1 > div, .spinner-bounce .container2 > div, .spinner-bounce .container3 > div {
	  width: 12px;
	  height: 12px;
	  background-color: rgb(153, 153, 153);

	  border-radius: 100%;
	  position: absolute;
	  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	  animation: bouncedelay 1.2s infinite ease-in-out;
	  /* Prevent first frame from flickering when animation starts */
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}

	.spinner-bounce .spinner-container {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}

	.spinner-bounce .container2 {
	  -webkit-transform: rotateZ(45deg);
	  transform: rotateZ(45deg);
	}

	.spinner-bounce .container3 {
	  -webkit-transform: rotateZ(90deg);
	  transform: rotateZ(90deg);
	}

	.spinner-bounce .circle1 { top: 0; left: 0; }
	.spinner-bounce .circle2 { top: 0; right: 0; }
	.spinner-bounce .circle3 { right: 0; bottom: 0; }
	.spinner-bounce .circle4 { left: 0; bottom: 0; }

	.spinner-bounce .container2 .circle1 {
	  -webkit-animation-delay: -1.1s;
	  animation-delay: -1.1s;
	}

	.spinner-bounce .container3 .circle1 {
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}

	.spinner-bounce .container1 .circle2 {
	  -webkit-animation-delay: -0.9s;
	  animation-delay: -0.9s;
	}

	.spinner-bounce .container2 .circle2 {
	  -webkit-animation-delay: -0.8s;
	  animation-delay: -0.8s;
	}

	.spinner-bounce .container3 .circle2 {
	  -webkit-animation-delay: -0.7s;
	  animation-delay: -0.7s;
	}

	.spinner-bounce .container1 .circle3 {
	  -webkit-animation-delay: -0.6s;
	  animation-delay: -0.6s;
	}

	.spinner-bounce .container2 .circle3 {
	  -webkit-animation-delay: -0.5s;
	  animation-delay: -0.5s;
	}

	.spinner-bounce .container3 .circle3 {
	  -webkit-animation-delay: -0.4s;
	  animation-delay: -0.4s;
	}

	.spinner-bounce .container1 .circle4 {
	  -webkit-animation-delay: -0.3s;
	  animation-delay: -0.3s;
	}

	.spinner-bounce .container2 .circle4 {
	  -webkit-animation-delay: -0.2s;
	  animation-delay: -0.2s;
	}

	.spinner-bounce .container3 .circle4 {
	  -webkit-animation-delay: -0.1s;
	  animation-delay: -0.1s;
	}

	@-webkit-keyframes bouncedelay {
	  0%, 80%, 100% { -webkit-transform: scale(0.0) }
	  40% { -webkit-transform: scale(1.0) }
	}

	@keyframes bouncedelay {
	  0%, 80%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	  } 40% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	  }
	}
/* === pattern === */
.statmap-circle {
	border-radius: 50%;
	width: 15px;
	height: 15px; 
}
.statmap-rect {
	width: 15px;
	height: 15px; 
}
.statmap-polygon {
	position: relative;
	width: 0; height: 0;
	border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
	z-index  : 1;
}
.statmap-polygon-top {
	position: absolute;
	width: 0; height: 0;
	border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
	z-index  : 2;
	top      : -7px;
    left     : -9px;
}
.statmap-image {
	width: 20px;
	height: 17px; 
}