html, body, #map{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-size:14px;
	overflow:hidden;
}
body.firstLoad{
	background-image:url(../img/firstLoad.gif);
	background-repeat:no-repeat;
	background-position:center;
	background-color:#E8E8E8;
}
.firstLoad div{
	visibility:hidden;
}
#map{
	top:34px;
	bottom:0;
	height:auto;
	width:75%;
	position:absolute;
}
#banner{
	position:absolute;
	z-index:4000;
	top:0;
	left:0;
	width:100%;
	overflow:hidden;
    background-color:black;
    height: 34px;
}
#banner img {
    height: 24px;
    margin: 4px 3px 0 3px;
    cursor:pointer;
    float:left;
}

#banner div {
	color: #FFFFFF;
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
	left: 100px;
	position: absolute;
	text-align: left;
	top: 2px;
	width: auto;
}
.btn{
	z-index:1;
	position:absolute;
	border:1px solid black;	
	cursor:pointer;
	background-color:white;
	width:44px;
	height:44px;
	border-radius:22px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:22px;
	-webkit-background-size: length_x length_y;
	text-align:center;
	vertical-align:middle;
	font-size:25px;
	font-weight:bold;
}
.mapBtn{
	position:fixed;
}
#outBtn{
	left:3px;
	top:86px;
	background-image:url(../img/zout.png);
}
#inBtn{
	background-image:url(../img/zin.png);
	left:3px;
	top: 37px;
}
#srchBtn{
	top: 37px;
	left:101px;
	background-image:url(../img/search.png);
}
#locBtn {
    background-image: url("../img/locate.png");
	top: 37px;
	left: 52px;
}
#search{
	position:absolute;
	z-index:1;
	left:150px;
	top:37px;
}
#address, #zipPct{
	border-radius:4px 0 0 4px;
	width:322px;
	border:1px solid black;
	height:42px;
	font-size:18px;
	padding:0 0 0 3px;
}
#zipPct{
	display:none;
}
#searchType{
	border-radius: 0 4px 4px 0;
	border:1px solid black;
	position:absolute;
	left:326px;
	top:0;
	background-color:#E8E8E8;
	width:85px;
	height:42px;
	overflow: visible;
	cursor:pointer;
}

#searchType img {
    float: right;
    margin: 19px 4px 0 0;
}
.searchTypeOpen{
	border-radius: 0 4px 0 0 !important;
}
#typeChoices{
	display:none;
	background-color:#E8E8E8;
	width:85px;
	border-radius: 0 0 4px 4px;
	border:1px solid black;
	position:absolute;
	left:476px;
	top:80px;
	cursor:pointer;
}
#typeChoices div{
	padding: 10px 5px;
	text-align: center;
}

#searchChoice{
	font-weight: bold;
	margin-top: 12px;
	text-align: center;
	width: 100%;
 }
#searchType:HOVER, #typeChoices div:HOVER, .btn:HOVER{
	background-color:darkgrey;
}
#tabCont{
	position:absolute;
	top:34px;
	bottom:0;	
	right:0;
	width:25%;
	font-size:12px;
}
.tabs, .tabPg{
	background-color:#E8E8E8;
	border-bottom:1px solid black;
}
#tabBtns{
	position:absolute;
	bottom: 0;
	right: 0;
	top: 0;
	width: 44px;
	border-left:1px solid black;	
}
#tabBtns div{
	background-position:center;
	background-size:40px 36px;
	background-repeat:no-repeat;
}
#mapTab{
	background-image:url(../img/map.png);
}
#crimeTab{
	background-image:url(../img/crime.png);
}

#dateTab{
	background-image:url(../img/cal.png);
}
#chartTab{
	background-image:url(../img/chart.png);
}
#legendTab{
	background-image:url(../img/leg.png);
}
#mapTab, #mapChoice{
	height:11%;
}
#crimeTab, #crimeChoice{
	height:11%;
}
#dateTab, #dateChoice{
	height:15%;
}
#chartTab, #chart{
	height:37%;
}
#legendTab, #legend{
	height:26%;
}
#tabPgs{
	bottom: 0;
	right: 44px;
	top: 0;
	left:0;
	border-left:1px solid black;
	position:absolute;	
}
#crimeChoice, #dateChoice, #legend, #chart{
	overflow:auto;
}
#mapChoice table, #crimeChoice table, #dateChoice table{
	border-collapse:collapse;
	height:100%;
	width:100%;
	cursor:pointer;
}
#mapChoice tr, #crimeChoice tr, #dateChoice tr{
	vertical-align:middle;
}
#mapChoice td, #crimeChoice td, #dateChoice td{
 	height:22px;
	padding:0 5px;
	color:darkgrey;
	
}
#mapChoice .enabled td:HOVER, #crimeChoice td:HOVER, #dateChoice td:HOVER, #dateChoice tr:HOVER{
 	height:22px;
	padding:0 5px;
	color:black;
	background-color:darkgrey;
}
.checked{
	background-color: white;
}
.checked td{
	font-weight:bold;
	color:black !important;
}
.enabled td{
	color:black !important;
}
#dateChoice select{
	border: 1px solid black;
	margin:0 0 2px 15px;
	vertical-align: middle;
	font-size:12px;
}
#dateChoice td{
	width:33%;
}
#yearToDate{
	width:100%;
}
#theme{
	top:30%;
}
#heat{
	top:60%;
}
#point{
	top:90%;
}
#datePicker{
	display:none;
}
#chart{
	padding:0 3px;
}
#sumChart{
	display:none;
	width:100%;
	font-size:10px;
}
.curBar, .prevBar{
	height:11px;
	border:1px solid darkgrey;
	text-align:right;
	overflow:visible;
}
.prevBar{
	background-color:white;
}
.curBar{
	background-color:black;
}
.curBar div, .prevBar div {
	margin: -1px 0 0 0;
	
}
.sumTitle{
	font-weight:bold;
	margin:5px 0 0;
}
.chartLeg{
    display: none;
	margin:5px 0 0;
	width: 216px !important;
}
.chartLeg td{
    font-size: 10px;
}
.chartLeg img{
	width:11px;
	height:11px;
	border:1px solid darkgrey;
	float:left;
	margin:0 3px 0 0;
}
.curYr img{
	background-color:black;
}
.prevYr img{
	background-color:white;
}
.curYrTxt{
	padding: 0 5px 0 0;	
}
#legend table{
	width:60%;
	margin:0 20%;
	border-collapse:collapse;
}
#legend td{
	text-align:center;
	vertical-align:middle;
}
#legTitle, #chartTitle{
	font-weight:bold;
	padding:3px;
	text-align:center;
}
#heatLeg{
	display: none;	
}
#heatLeg .ht{
	padding:0 0 0 5px;
	text-align:left;
}
.hg{
	width:15px;
	height:15px;
	border:1px solid darkgrey;
	border-top:none;
	border-bottom:none;
}
#h5{
	border-bottom:1px solid darkgrey;
	background-color:rgba(179,0,0,0.6);
}
#h4{
	background-color:rgba(227,74,51,0.6);
}
#h3{
	background-color:rgba(252,141,89,0.6);
}
#h2{
	background-color:rgba(253,204,138,0.6);
}
#h1{
	border-top:1px solid darkgrey;
	background-color:#f4f3ef;
}
#mapTip{
	background-color: #FFF8DC;
	border: 1px solid black;
	display: none;
	font-size: 11px;
	position: absolute;
	z-index: 1000;
	padding: 3px;
	font-weight: bold;
}
.nycInfo{
    z-index: 7000;
    position: absolute;
}
.nycInfoContent{
    background-color: white;
    border: 1px solid black;
    border-radius:22px;
    padding: 10px 28px 10px 10px;
    overflow:auto;
}
.closeNycInfo{
    border:1px solid black;
    border-radius:7px;
    height:14px;
    position:absolute;
    right:7px;
    top:7px;
    width:14px;
    background-image:url(../img/x.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:8px;
	-webkit-background-size: length_x length_y;
	cursor:pointer;
}
.tail{
	background-repeat:no-repeat;
	background-position:center;
	background-repeat:no-repeat;
	background-size:16px;
	-webkit-background-size: length_x length_y;
	position:absolute;
	width:100%;
	height:16px;
}
.up{
	background-image:url(../img/uptail.png);
	top: -15px;
}
.down{
	background-image:url(../img/downtail.png);
	bottom: -15px;
}
.infoTitle{
	font-weight:bold;
}
.shDtl{
	color:blue;
	text-decoration:underline;
	cursor:pointer;
}
.crDtl{
	display:none;
	margin:5px 0 0 0;
	padding:5px 0 0 0;
	border-top:1px solid black;
}
#mapTitle{
	position:absolute;
	right:50px;
	z-index:6000;
	color:white;
	font-weight:bold;
	margin:7px 5px 0 0;
}
#spin{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:8000;
	background-color:rgba(255,255,255,0.6);
	background-image:url(../img/spin.gif);
	background-position:center;
	background-repeat:no-repeat;
}
.enabled .zoomOut, .enabled .zoomIn{
	display:none;
}
#mo option{
	text-align:right;
}
#chartAll{
	display:none;
	text-align:center;
	text-decoration:underline;
	color:blue;
	cursor:pointer;
	margin:10px 0 0;
}
#compare{
	position: absolute;
	bottom: 0;
	right: 0;
	display: none;
	height:31%;
	border-top:1px solid black;
	width: 100%;
	z-index: 8000;
	background-color: #E8E8E8;
	overflow-y:hidden;
	overflow-x:auto;
	font-size: 10px;
}
#compChart div{
	cursor:pointer;
}
.compBarCur, .compBarPrev{
	position:absolute;
	bottom:16px;
	border:1px solid darkgrey;
	width:11px;
}
.compBarCur{
	background-color:black;
}
.compBarPrev{
	background-color:white;
}
.compPct, .userPct{
	border:none !important;
	border-top:1px solid #000000 !important;
	bottom:1px;
	padding-right:15px;
	position:absolute;
	text-align:center;
	width:25px;
}
.prevTitle{
	width:35px;
	padding:0;
	text-align:left;
}
.userPct div, .compPct div {
    width: 26px;
}
.userPctBar{
	background-color: darkgray;
}
.userPct{
	font-weight:bold;
}
.rot{
	position: absolute;
	text-align: right;
	top: -20px;
	width:11px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#compTitle{
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 0 5px;
	text-align: center;
	width: 100%;
}
#close{
	position: absolute;
	background-color:white;
	top: 69%;
	margin:5px;
	right: 0;
	display: none;
	z-index: 8000;
    border-radius:11px;
    height:22px;
    width:22px;
	background-size:22px;
}
#myBar{
	position:absolute;
	bottom:1px;
	height:169px;
	width:33px;
	z-index:-1;
}
#myBar{
	background-color: darkgrey;
	height:170px;
	width:34px;
}
.activeBar{
	font-weight:bold;
	border:2px solid black;
}
#compTitle .chartLeg{
	margin:-2px 0  0 calc(50% - 108px);	
}
.pac-item {
    white-space: pre-wrap;
    width: 353px;
    margin: 15px 0;
    padding-left:5px;
    font-size: 14px;
}
.pac-item-query{
    font-size: 14px;
}
.pac-container {
    left: 3px !important;
    width: auto !important;
    position: absolute !important;
    top: 86px !important;
	border:1px solid black;
	border-radius:22px;
	z-index: 3000 !important;
}
.pac-container:after{
	margin:0 5px 3px 0;
}
.chartPop{
	font-weight:normal;
	font-size:12px;
}
.note {
	border-top: 1px solid #000000;
	font-size: 10px;
	margin: 5px 0 0 0;
	padding:2px 0 0 0;
}
@media only screen and (max-width: 430px){
	#compTitle{
		width:288px;
	}
}
@media only screen and (max-height: 570px), only screen and (max-width: 365px){
	#address, #zipPct{
		font-size:16px;
		width:152px;
	}	
	#searchType{
		font-size:10px;
		left: 156px;
		width: 58px;
	}
	#typeChoices{
		left:257px;
		width:58px;
	}
	#typeChoices div{
		padding: 10px 0 10px 1px;
		text-align:center;
		font-size:11px;
	}
	#locBtn{
		left:3px;
		top:135px;
	}
	#srchBtn{
		left:52px;
	}
	#search{
		left:101px;
	}
}
@media only screen and (min-width: 470px) and (max-width: 480px){
	#srchBtn{
		left:101px;
	}
	#search{
		left:150px !important;
	}
	#address, #zipPct {
		width: 264px !important;
	}
	#searchType {
		font-size: 10px;
		left: 267px;
		width: 58px;
	}
	#typeChoices {
		left: 417px;
		width: 58px;
	}
	#locBtn {
		top: 37px;
		left: 52px;
	}
	#search{
		left:101px;
		display:none;
	}
	.pac-container {
	    right: 3px !important;
	    width: auto !important;
	    bottom:65px;
	}
	.pac-item {
	    width: 304px;
	}
}
@media only screen and (max-height: 618px), only screen and (max-width: 1000px){
	#map{
		width:100%;
		height:auto;
		bottom:61px;
	}
	#tabCont{
		top:auto;
		left:0;
		bottom:0;	
		right:auto;
		width:100%;
		height:44px;
	}
	.tabsOpen{
		top:34px !important;
		height:auto !important;
		display:block !important;
		z-index:1000;
	}
	#tabBtns{
		left:0;
		right: auto;
		top: auto;
		height: 44px;
		width:100%;
		border:none;
	}
	.tabs{
		position:absolute;
		width:20%;
		bottom:0;
		border-left:1px solid black;	
		border-top:1px solid black;
		cursor:pointer;	
	}
	.tabPg{
		position:absolute;
		width:100%;
		bottom:0;
		top:0;
		display:none;
		height:auto !important;
	}
	#tabPgs{
		display:none;
		top:0 !important;
		bottom:61px !important;
		width:100% !important;
		right:0 !important;
		left:0 !important;
	}
	#mapTab, #crimeTab, #dateTab, #legendTab, #chartTab{
		height: 44px;
	}
	#mapTab{
		left:0;
		border-left:none;	
	}
	#crimeTab{
		left:20%;
	}
	#dateTab{
		left:40%;
	}
	#legendTab{
		left:60%;
	}
	#chartTab{
		left:80%;
	}
	#mapChoice table, #crimeChoice table, #dateChoice table{
		text-align:center;
		vertical-align:middle;
	}
	#legTitle, #chartTitle, #compTitle{
		padding:10px;
	}
	#legend table{
		margin:20px 20%;
	}
	#close{
		right: -3px;
		top: 33px !important;
	}
	#compare{
		top:34px;
		bottom:61px;
		height:auto;
		border-bottom: 1px solid black;
	}
	#compTitle{
		margin:0 0 0 -3px;
	}
	#compTitle table{
		margin:0;
	}
	#mapTitle{
		background-color: #000000;
		bottom: 44px;
		font-size: 13px;
		left: 0;
		right:auto;
		text-align:center;
		position: absolute;
		width: 100%;
		height:17px;
	}
}
@media only screen and (min-height : 420px) and (max-width: 768px){
	#tabCont {
		font-size: 14px;
	}
	#sumChart{
		font-size:14px;
	}
	.curBar, .prevBar{
		height: 20px;
		padding-top: 6px;
	}
}
@media only screen and (min-height: 825px) and (min-width: 1024px){
	#tabCont {
		font-size: 14px;
	}
	#sumChart{
		font-size:14px;
	}
	.curBar, .prevBar{
		height: 18px;
		padding-top: 2px;
	}
	#legend table{
		margin-top:20px;
	}
}
@media only screen and (max-height : 180px){
	#map{
		bottom:0;
	}
	#tabCont, #mapTitle{
		display:none;
	}
}
.fullDetail {
    top: 34px !important;
    bottom: 0 !important;
    width: 100%;
    left: 0 !important;
	overflow:hidden !important;
}
.fullDetail .tail {
    display: none;
}
.fullDetail .nycInfoContent {
    width: 100%;
    height: 100%;
    border: none;
    border-radius:0;
}
.fullDetail .closeNycInfo {
    right: 3px;
    background-size: 22px;
    border-radius: 11px ;
    height: 22px;
    width: 22px;
}
.fullDetail .crDtl{
	margin: 5px 16px 0 0;
	padding:5px;	 
}
#copyright{
	z-index:1;
	font-size:10px;
	position:absolute;
	bottom:15px;
	right:0px;
	padding:2px;
}
#about {
    color: #FFFFFF;
    padding: 6px 3px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 6000;
}
.pct0 .residents,.pct0 .infoCrimes{/*DOC*/
	display:none;
}