/* Mixin */
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

body, html {
	height:100%;
	margin:0;
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
}

body {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	line-height:1em;
}

#title {
	position:absolute;
	top:10px;
	left:65px;
	background-color:rgba(255,255,255,0);
	z-index:4;
}
#victim_title {
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	padding-left: 10px;
	
}

#header {
	position:fixed;	
	width:100%;
	height:20px;
	padding:10px;
	z-index:3;
	background-color:rgba(255,255,255,1);
	transition: all .5s;
	opacity:1;
	top: 0;
}
#victimheader {
	position:relative;	
	width:100%;
	height:45px;
	padding:10px;
	z-index:3;
	background-color:rgba(255,255,255,1);
	transition: all .5s;
	opacity:1;
	
}
	#victimheader .buttonContainer {
		padding: 7px;
		font-size: 19pt;
		font-weight: 100;
		/*float: right;*/
		height: 19px;
		line-height: 19px;
		position: absolute;
		right: 25px;
		top: 0px;
		cursor: pointer;
		
	}
	
		#victimheader .buttonContainer .fa {
			margin-left:5px;
			color:#444;
		}
		
			#victimheader .buttonContainer .fa:hover {
				margin-left:5px;
				color:#111;
			}
			
			#victimheader .buttonContainer .fa#searchButton {
				font-size:16pt;
			}
		
		#victimheader .buttonContainer a {
			color:inherit;
			text-decoration:none;
		}
	
	
#map_canvas, #map_narrow {
	width:100%;
	height:60%;
	z-index:1;
	position: relative;
	/*margin-top: 45px;*/
	margin-bottom: 20px;
}
@media all and (max-width: 960px)  {
	#map_canvas {
		height: 90%;
	}
}
@media all and (max-width: 500px)  {
	#map_canvas {
		margin-top: 0;
		margin-left: 0px;
		
		width: 100vw;
	}
}

#map_narrow {
	height: 30%;
	min-height: 200px;
	
}

#graphs, .graphs2 {
	width: 100%;
	background-color: white;
	/*height: 30%;*/
	height: auto;
	position: relative;
	/*clear:both;*/
	z-index: 5;
	padding-bottom: 20px;
	padding-right: 20px;
	margin-top: 45px;
}
.graphs2 {
	padding-right: 0px;
}
#byYear {
	width: 15%;
	float: left;
}
#byMonth {
	width: 15%;
	height: 100%;
	float: left;
}
.toooltip {
	position: absolute;
	display: none;
	border: 1px solid black;
	padding: 2px 5px;
	background-color: white;
	opacity: 0.80;
	z-index: 5;
}
#search {
	position: relative;
	width: 30%;
	float: left;
	background-color:#12bdf1;
	z-index:2;
	opacity:1;
	overflow: hidden;
	padding: 20px;
}
.upperleftHomicide {
		width: 30%;
		float: left;
	}
		.upperleftHomicide h1 {
			font-family: 'Open Sans Condensed', sans-serif;
			text-transform: uppercase;
			margin-top: 0px !important;
			font-size: 38px !important;
			font-weight: bold;
		}
.upperleftForm {
	width: 70%;
	float: left;
}
.searchresults {
	border: none;
	width: 100%;

	
}
#share {
	font-weight: bold;
}
#finalcount {
	position:relative;
	width: 10%;
	float: left;
	background-color:#12bdf1;
	z-index:2;
	opacity:1;
	transition: all .5s;
	padding:10px;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0 10px;
}
#finalcount h4 {
	font-size: 1.4em;
	color: black;
	padding: 20px 0;
	border-bottom: 5px solid white;
	width: 50%;
}
#total_incidents {
	font-size: 120px;
	letter-spacing: -0.05em;
	margin-left: -15px;
}	
	
	#search label {
		font-size:8pt
	}

	#search table {
		width:100%;
	}
		#search table tr.section {
			margin-bottom:20px;
		}
		
			#search table tr.section:last-child {
				padding-bottom:0;
			}
		
			#search table tr.section td.sectionTitle {
				width: 30%;
				text-align: right;
				padding-right: 3%;
				margin-right: 3%;
				
			}
			
			@media all and (max-width: 500px)  {
				#search table tr.section td.sectionTitle {
					width: 15%;
				}
			}
			
			#search table tr.section td.sectionContent {
				padding-left: 3%;
				width: 64%;
			}
			
				#search table tr.section td.sectionContent .subsection{
					margin-bottom:10px;
				}
			
				#search table tr.section td.sectionContent .inputWrapper {
					position:relative;
					display:inline-block;
					
				}
						
					#search table tr.section td.sectionContent .inputWrapper.half {
						width:47%;
						margin-right:4%;
						
					}
					
						#search table tr.section td.sectionContent .inputWrapper.half:last-child {
							margin-right:0;
						}
					
				
					#search table tr.section td.sectionContent .inputWrapper label{
						position:absolute;
						top:0;
						left:0;
						font-size:12px;
						color:#aaa;
						text-transform:uppercase;
					}
					
					#search table tr.section td.sectionContent .inputWrapper input{
						margin-top:17px;
						width:100%;
						font-family:"Open Sans", sans-serif;
					}
					
					select option {
						background-color: #18d8ff;
					}
					option[selected] { background: #18d8ff; }
					
	#search .buttonContainer {
		border-top:1px solid lightgray;
		margin-top:10px;
		padding-top:10px;
	}
		
		#search .section .sectionContent  .button{
			float:left;
			background-color: white;
			color:black;
			/*font-family: "Open Sans", sans-serif;*/
			font-size:11pt;
			padding:5px 10px;
			border:1px solid #007fd4;
			border-radius:0px;
			font-weight:700;
			transition: all .25s;
			cursor:pointer;
			margin-right: 20px;
		}
			
			#search .section .sectionContent  .button:hover{
				background-color:#007fd4;
				color:white;
			}
	.social, .social-icon {
		color: black;
		font-size: 1.5rem;
	}	
	.social-icon:hover {
		color: darkgray;
	}
	
	.x-twitter {
		padding-left: 10px;
	}
	
#content {
	background-color:white;
	z-index:2;
	border-right:1px solid lightgray;
	transition: left .5s;
	color:rgba(0,0,0.9);
	padding-top:20px;
	
	
}
#victimcontent {
	background-color:white;
	z-index:2;
	width: 100%;
	padding-bottom: 10vh;
}
#commentcontent {
	background-color:white;
	z-index:2;
	width: 100%;
	padding-top: 20px;
	clear: both;
}
.victimsection {
	background-color:white;
	z-index:2;
	width: 33%;
	display: block;
	margin: 0 auto; 
	
}

@media all and (max-width: 1100px) {
	.victimsection {
		width: 66%;
	}
}

@media all and (max-width: 500px) {
	.victimsection {
		width: 90%;
	}
}

.victim-story h1 {
	margin-top: 0 !important;
	font-family: "Open Sans", sans-serif;
}
.victimsocial {
	margin: 10px 0;
	    text-align: center;
}

.row {
	margin-bottom: 20px !important;
	
}
#incident_list {
	overflow: auto;
	height: 100%;
}
	#content:after {
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 8px;
		height: attr(data-height);
		background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(100%, rgba(0,0,0,0.25)));
		background: -webkit-linear-gradient(left, transparent 0, rgba(0,0,0,0.25) 100%);
		background: linear-gradient(to right, transparent 0, rgba(0,0,0,0.25) 100%);
		opacity: .2;
	}
	
	#content .block {
		width:90%;
		border-bottom:10px solid #eee;
		margin:0px auto 25px;
		padding-bottom:20px;
	}

		#content .block:last-child {
			border:0;
		}
	
	#content #aggregated {
	
	}
		
	#content .section {
	
	}
	
		#content .section:after {
		
		}
	
		#content .section h1 {
			font-size:80pt;
		}
		
		#content .section h4 {
			font-weight:400;
			font-size:10pt;
			
		}
		
		#content .section table {
			border-spacing:0;
			border-collapse:collapse;
			width:90%;
			margin:10px auto;
			font-size:11pt;
		}
		
		
		#content .section td {
			border-bottom:1px solid lightgray;
			padding:8px 0px;
		}
		
		#content .section td:last-child {
			text-align:right;
		}
			#content #aggregate td:last-child {
				width:20%;
			}
		
		
		#content .section tr:last-child  td{
			border-bottom:0;
		}
		
		#content .incident {
			
			//border-left:10px solid;
			border-top:1px solid #bbb;
			border-bottom:1px solid #bbb;
			padding:0 0px 0 15px;
			margin: 20px 0px 0px 0px;
			position:relative;
			
		}
		
			#content .incident:first-of-type{
				margin-top:20px;
			}
		
			#content .incident:hover, #content .incident.hover {
				background-color:#f2f2f2;
				cursor:pointer;
			}
			
			#content .incident.selected {
				background-color:#C7D2FF;
			}
		
			#content  .incident:before {
				content: " ";
				width: 10px;
				background-color:red;
				position:absolute;
				top:0;
				left:0;
				bottom:0;
				
			}
			
			#content .incident.arrest:before {
				background-color:#D6756E;
			}
			
			#content  .incident.offense:before {
				background-color:#509B6C;
			}
			
			#content  .incident .timestamp {
				font-weight:800;
				margin-bottom:10px;
				padding:5px 0px 5px 5px;
				margin-right:5px;
				text-transform:uppercase;
				font-size:10pt;
				border-bottom:1px solid lightgray;
				color:#444
			}
			
			#content .incident h1 {
				font-family: "Oswald", sans-serif;
				padding: 0;
				font-size: 16pt;
				font-weight: 400;
				border-bottom: 1px dashed gray;
				padding: 0 0 10px 0;
				margin: 0 25px 10px 0; 
				line-height:1.375em;
			}
				#content .incident h1:last {
			
				}
				
				
			#content .incident .info {
				margin:0 5px 0 0;
			
			
			}
			
				#content .incident .info table {
					margin:0;
				}
					
					#content .incident .info table tr {
						margin: 10px 0;
						display: block;
						padding-bottom: 10px;
						border-bottom: 1px solid lightgray;
					}
						
						#content .incident .info table tr:first-child {
							margin-top:0;
						}
						
						#content .incident .info table tr:last-child {
							border:none;
							margin-bottom:0;
						}
						
					
						#content .incident .info table tr td {
							margin:0px;
							border:0px;
							padding:0px;
						}
						
							#content .incident .info table tr td:first-child {
								width:30px;
							}
						
				#content .incident .info .fa {
					font-size:15pt; 
					margin:0 0px 0 5px;
				}
				
				#content .incident .info h2 {
					margin:0;
					padding:0;
					font-size:10pt;
					font-weight:400;
					text-align:left;
					margin-bottom:5px;
				}
					
					#content .incident .info h2:last-child {
						margin-bottom:0px;
					}
			
	#content.hidden{
		left:-300px;
		opacity:0;
	}
	
	#names {
		padding: 0px 20px 20px 20px;
		
	}
	.homicide_victim{
		padding: 0;
		margin: 0;
		cursor: pointer;
	}
.center {
	margin:auto;
	text-align:center;
}

.uppercase {
	text-transform:uppercase;
}

.skrollable {
	/*
	 * First-level skrollables are positioned relative to window
	 */
	position:fixed;
	z-index:100;
	width:300px;
}

.form-control {
display: block;
/*width: 100%;*/
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #18d8ff !important;
background-image: none;
border: 1px solid #18d8ff !important;
border-radius: 0px !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

#closeSearch {
	position: absolute;
	top: 10px;
	right: 30px;
	cursor: pointer;
}
#closeSearch :hover {
	color: #007fd4;
}

.tw-bs {
	margin: 10px auto !important;
	text-align: center;
}

#commentsDiv {
	margin: 0 auto 20px auto;
}
.credits
{
	width:100%;
	background-color:#fff;
	text-align:center;
	padding-bottom: 20px;
}
	
	.creditsWrapper
	{
	width:80%;
	margin:auto;
	}

	.credits h2
	{
	
	}
.tabrow {
		    text-align: center;
		    list-style: none;
		    padding: 0;
		    line-height: 24px;
		    height: 26px;
		    overflow: hidden;
		    font-size: 12px;
		    font-family: verdana;
		    position: absolute;
			top: -44px;
			left: 0;
			width: 100%;
			z-index: 5;
			
		}
		.tabrow li {
		   
			background-color: white;
		    display: inline-block;
		    position: relative;
		    z-index: 0;
		    border-top-left-radius: 6px;
		    border-top-right-radius: 6px;
		    text-shadow: 0 1px #FFF;
		    margin: 0 -5px;
		    padding: 0 20px;
		}
		.tabrow a {
			  color: #555;
			  text-decoration: none;
			  font-weight: bold;
			  font-family: "Open Sans", sans-serif;
		}
		.tabrow li.selected {
		    background: #FFF;
		    color: #333;
		    z-index: 2;
		    border-bottom-color: #FFF;
		}
		.tabrow:before {
		    position: absolute;
		    content: " ";
		    width: 100%;
		    bottom: 0;
		    left: 0;
		    /*border-bottom: 1px solid #AAA;*/
		    z-index: 6;
		}
.beforeafter {
	width: 100%;
	margin: 20px auto;
}
.fa-arrow-circle-o-left, .fa-arrow-circle-o-right {
	color:lightgray;
	
}

.arrowname {
	margin: 0 10px;
}
.opensans {
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
}
#victim_list {
	width: 15%;
	position: relative;
	float: left;
	background-color: white;
	overflow-y: auto;
	padding: 5px 10px 20px 10px;
}
#victim_list h3 {
	margin-top: 0 !important;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
}
#victim_list p {
	font-size: 90%;
}
.victim-data img {
	width: 165px;
	height: auto;
}
.legendLabel {
	font-weight: bold;
	font-size: 110%;
}
.legendColorBox {
	display: none;
}
.victim_date {
	text-transform: uppercase;
}
.fa-arrow-left:hover, .fa-arrow-right:hover {
	opacity: .7;
	cursor: pointer;
}

/* --------------- media calls --------------------------------*/
/* if width between 1025 and 1366 */
@media all and (max-width: 1366px) and (min-width: 1025px)  {
	.upperleftHomicide {
		display: none;
	}
	#total_incidents {
		font-size: 100px;
	}
}
/* if width between 1024 and 769 */
@media all and (max-width: 1024px) and (min-width: 769px)  {
	.upperleftForm {
		width: 100%;
	}
	#graphs {
		/*height: 20%;*/
		display: grid;
		grid-template-columns: 1fr ;
		height: auto;
		padding-bottom: 0;
	}
	
	.graphs2 {
		height: auto;
    display: inline-block;
    margin-top: 0;
	}
	.upperleftHomicide {
		display: none;
	}
	#search {
		width: 100vw;
		float: none;
		overflow: auto;
	}
	#total_incidents {
		font-size: 90px;
	}
	#finalcount {
		width: 100vw;
		margin-left: 0;
		height: auto !important;
	}
	#finalcount h4 {
		font-size: 16px;
	}
	#byYear, #byMonth {
		width: 48% !important;
	}
	
	.byYrbyMo-holder {
		margin-bottom: 20px;
	}
	#btnSearch {
		margin-top: 10px;
	}
	#victim_list {
		position: relative;
		padding: 20px;
		background-color: white;
		width: 100%;
		top: 0;
		left: 0;
		margin-left: 20px;
		height: auto !important;
	}
	
	#victim_list p {
		width: 94vw;
	}
	
}

/* if width between 768 and 481 */
@media all and (max-width: 768px)  {
	.upperleftForm {
		width: 100%;
	}
	#graphs {
		/*height: 20%;*/
		display: grid;
		grid-template-columns: 1fr;
		height: auto;
		padding-bottom: 0;
	}
	.graphs2 {
		margin-top: 0;
		display: inline-block;
		height: auto;
		
	}
	
	#map_canvas {
		margin-top: 20px;
	}
	.upperleftHomicide {
		display: none;
	}
	#total_incidents {
		font-size: 90px;
	}
	#finalcount h4 {
		font-size: 16px;
	}
	#search {
		width: 100%;
		padding: 20px 0;
		float: none;
	}
	#finalcount {
		width: 100vw;
		margin-left: -20px;
		float: none;
		height: auto !important;
	}
	#btnSearch {
		margin-top: 10px;
	}
	#victim_list {
		position: relative;
		padding: 20px;
		background-color: white;
		width: 94%;
		
		height: auto !important;
	}
	.fa-times {
		display: none;
	}
	.graphs2 {
		height: auto;
		margin-left: 0px;
		clear: both;
		
	}
	#byYear {
		width: 98vw !important;
		float: none;
		
	}
	#byMonth {
		width: 98vw !important;
		float: none !important;
	}
}

@media all and (max-width: 500px)  {
	
	.upperleftForm {
		width: 100%;
	}
	#graphs {
		/*height: 20%;*/
	}
	.upperleftHomicide {
		display: none;
	}
	#total_incidents {
		font-size: 90px;
	}
	#search {
		width: 100vw;
		overflow: visible;
	}
	#finalcount {
		width: 100% !important;
		margin: 0;
		height: auto !important;
		padding-bottom: 40px;
	}
	#finalcount  h4{
		font-size: 14px;
	}
	#total_incidents {
		font-size: 70px;
		margin-top: 50px;
	}
	#btnSearch {
		margin-top: 10px;
		
	}
	
	#victim_title {
		font-size: 16px !important;
		margin-top: 0 !important;
	}
	#commentsDiv {
		margin: 20px 10px !important;
	}
	#graphs {
		padding-right: 0;
	}
	.graphs2 {
		height: auto;
		margin-left: 0px;
		clear: both;
		margin-left: 10px;
	}
	#byYear {
		width: 100vw !important;
		float: none;
		
	}
	#byMonth {
		width: 100vw !important;
		float: none !important;
	}
	#victim_list {
		position: relative;
		padding: 20px;
		background-color: white;
		width: 90%;
		top: 0;
		left: 0;
		margin-left: 20px;
		height: auto !important;
	}
	.fa-times {
		display: none;
	}
}
/* if width <= 320 */
@media all and (max-width: 320px)  {
	.upperleftHomicide {
		display: none;
	}
	.upperleftForm {
		width: 100%;
	}
	#graphs {
		height: 20%;
	}
	#search {
		width: 100%;
	}
	#graphs {
		width: 100%;
	}
	#finalcount {
		margin: 0;
		width: 100%;
	}
	#total_incidents {
		margin-top: 20px;
	}
	.gig-comments-commentBox-commentBox {
		width: 290px !important;
		margin-left: 5px !important;
	}
	#victim_title {
		font-size: 14px !important;
		margin-top: 10px !important;
	}
	.graphs2 {
		
	}
	#byYear {
		width: 100%;
	
	}
	#byMonth {
		width: 100%;
		
	}
	#victim_list {
		position: relative;
		padding: 20px;
		background-color: white;
		width: 100%;
		top: 0;
		left: 0;
		margin-left: 20px;
	}
	.fa-times {
		display: none;
	}
}

.myDivIcon {
	color: steelblue;
	font-size: 1.8rem;
	opacity: .7;
}

a:link {
	color: steelblue;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: navy;
}

navbar {
    width: 100%;
	height: 45px;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 10px;
    position: fixed;
	top: 0px;
    z-index: 3000;
	opacity: 1;
    background-color: white;
}

@media only screen and (max-width: 1000px) {
	navbar {
		top: 0;
	}
}

navbar textbranding {
	display: none;
}

@media only screen and (max-width: 1000px) {
	navbar textbranding {
		display: block;
		font-size: 1.1rem;
	}
}

navbar leftalign, navbar rightalign {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
@media only screen and (max-width: 1000px) {
	navbar leftalign {
		justify-content: flex-start;
	}
}
navbar rightalign {
	margin-right: 30px;
	
}

@media only screen and (max-width: 1000px) {
	navbar rightalign {
		margin-right: 10px;
	}
	
	#nav-home {
		padding-left: 20px;
	}
}

@media only screen and (max-width: 1100px) {
	navbar rightalign {
		margin-right: 20px;
	}
	
	
}

.pg-post-gazette {
	color: black ;
	font-size: 2rem;
    /*margin-right: 30px;*/
	background-color: transparent;
	cursor: pointer;
	padding-right: 5px;
	border-right: 3px solid lightgray;
}

ul {
	padding-inline-start: 20px;
	
}

ul li {
	margin-bottom: 10px;
}

.victimsection h1 {
	text-align: center;
	margin-bottom: 30px;
}

.return {
	font-size: 1rem;
	padding: 10px;
	background-color: steelblue;
	color: white !important;
	border: 1px solid black;
	display: inline-block;
	margin: 20px auto 30px auto;
}

.return:hover {
	opacity: .7;
}

.return a:link, .return a:visited {
	color: white;
}

.return a:hover {
	text-decoration: none;
}

.flex-container {
	display: flex;
  align-items: center;
  justify-content: center;
}

td,th {
	padding: 0;
}

tr {
	border-top: 0 none;
}