body {
	font-family: 'Open Sans', sans-serif;
	padding-right: 0px;
	padding-left: 0px;
	height: auto;
	color: #444;
}


#top-image {
	max-width: 100%;
	max-height: 100%;
	opacity: 0.8;
}

#top-title {
	position: absolute;
	top: 30%;
	left: 35%;
	font-size: 75px;
	color: #fff;
	stroke: #000;
	stroke-width: 1px;
}
.office{
  font-size: 15px;
  font-weight:bold;
  text-transform:uppercase;
}



.explainer-small {
  font-size: 14px;
}

.all-stories {
	display:flex;
}

.story-container {
	width: 30%;
	height: 400px;
	background-color: #6487AC;
	margin: 2px 5px 2px 5px;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	font-weight:bold;
}

.story-image {
	margin: 15px;
	max-width: 90%;
}

/* table {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	float: left;
} */

.table th,
.table td {
	text-align: left;
}

h1, h2, h3, h4, h5 {
  font-weight: 400;
  margin-bottom: 10px !important;
  color: #444;
  font-family: 'RobotoSlab','Helvetica','san-serif'; }

h1 {
  font-size: 3em; }

h2 {
  font-size: 1.875em; }

h3 {
  font-size: 1.250em; }

h4 {
  font-size: 1.125em; }

h5 {
  font-size: 1em; }

p, li {
  font-size: 1em;
  color: #000;
  font-family: 'NunitoSans','Helvetica','san-serif';
  font-weight: 300; }

.line {
  fill: none;
  stroke: #950952;
  stroke-width: 2px;
}

.large-number {
  font-size: 18px !important;
	color: #000;
	font-weight: bold;

}

.subhead{
	font-size: 18px;
}

#candidates-container {
  margin-bottom: 20px;
}




.explainer-header {
  font-size: 12px;
  font-weight:bold;
/*   text-transform: uppercase; */
  position: relative;
  background: #ddd;
  color: #000;
  margin: 0;
  padding: 2px 0px 2px 17px;
  display: block;
  max-width:50%;
  cursor: pointer;
}

.explainer-small {
  padding: 0px 15px;
  margin: 5px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.questions:checked ~ .explainer-small{
  height: auto;
  opacity: 1;
  padding: 15px;
}

.plus {
  position: absolute;
  color: #000;
  margin-left: 2px;
  z-index: 5;
  font-size: 1em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
  pointer-events: none;
}

.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.questions {
  display: none;
}

/* table.dataTable tbody th, table.dataTable tbody td {
  padding: 2px 5px 2px 5px !important;
} */


.table th {
	border-bottom: 3px dashed #950952;
}

table.display td {
	padding: 10px 10px;
	background-color: none;
}

tr.odd {
	background-color: white;
}

a {
  color: #1c2242;
  text-decoration: underline; }
  a:hover {
    color: #950952;
    text-decoration: underline; }

.download,
{
	float: right;
}

.source {
	font-size: 13px;
	font-weight: bold;
	float: left;
	margin-bottom: 5px;
}

.search_row {
	font-weight: bold;
	font-size: 12px;
	float: left;
}

table, tr, td {
    background-color: rgba(0, 0, 0, 0.01) !important;
}

.table th {
	font-size: 13px;
	background-color: none;
	color: #950952;
	font-weight: bold;
}

.table thead th {
	vertical-align: middle;
	cursor: pointer;
}
/* 
label,
input,
button,
select,
textarea {
	line-height: 30px
} */

input,
textarea,
select,
.uneditable-input {
	height: 25px;
	line-height: 25px;
}

select {
	width: 75px
}

.form-inline input {
	margin-left: 5px;
}

.dataTables_length {
	padding-left: 10px
}

td.left.sorting_1,
.table-hover tbody tr:hover td {
	background-color: rgba(149, 9, 82, 0.2);
	filter: alpha(opacity=20);
	filter: progid: DXImageTransform.Microsoft.Alpha(opacity=20);
	-moz-opacity: 0.20;
}

.table tbody>tr:nth-child(odd)>th>td.sorting_1 {
	background-color: rgba(149, 9, 82, 0.1);
}

	.dataTables_wrapper .dataTables_length {
		text-align: left !important;
	}

	.dataTables_wrapper .dataTables_filter {
		text-align: left !important;
	}

/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/

@media only screen and (max-width: 450px) {
	/* For mobile phones: */
	/* Force table to not be like tables anymore */

	table {
		width:95% !important;
	}
	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}
	h1 {
		font-size: 25px;
		line-height: 1.2;
	}
	.search_row {
		float: none;
	}
	.source {
		font-size: 12px;
		font-weight: bold;
		margin-top: 2px;
	}
	p {
		font-size: 13px;
		margin: 0;
	}
	h2 {
		font-size: 18px;
		margin: 0;
	}
	.download {
		font-size: 13px;
		float: left;
	}
	body {
		padding-right: 0px !important;
		padding-left: 0px !important;
		margin: 0;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.pagination ul>li>a,
	.pagination ul>li>span {
		padding: 4px 8px;
	}
	.pagination {
		width: 100%;
		font-size: 11px;
		margin: 0;
	}
	.form-search label,
	.form-inline label,
	.form-search .btn-group,
	.form-inline .btn-group {
		font-size: 13px;
	}


	input,
	textarea,
	.uneditable-input {
		width: 70%;
		display: inline-block;
		margin-left: 10px;
	}
	tr {
		border: 1px solid #ccc;
	}
	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-top: 20%;
		text-align: right;
		height: 70%;
	}
	table.display td.center {
		text-align: right;
	}
	table.display td {
		padding: 30px 10px 3px 10px;
	}
	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		margin-right: 10px;
		white-space: nowrap;
	}

	td a {
		margin-left: 100px;
	}

	td .table-rating {
		margin-left: 125px;
	}
	/*
		Label the data for mobile use
		*/
	#candidates td:nth-of-type(1):before {
		content: "Candidate";
		font-weight: bold;
		text-align: left;
	}
	#candidates 	td:nth-of-type(2):before {
		content: "Race";
		font-weight: bold;
		text-align: left;
	}
	#candidates 	td:nth-of-type(3):before {
		content: "Number of contributors";
		font-weight: bold;
		text-align: left;
	}
	#candidates 	td:nth-of-type(4):before {
		content: "Amount";
		font-weight: bold;
		text-align: left;
	}
#candidates 	td:nth-of-type(5):before {
		content: "Running in general?";
		font-weight: bold;
		text-align: left;
	}
  #donor-types td:nth-of-type(1):before {
		content: "Type";
		font-weight: bold;
		text-align: left;
	}
  
	#donor-types 	td:nth-of-type(2):before {
		content: "Amount";
		font-weight: bold;
		text-align: left;
	}
  
  #candidate-donors td:nth-of-type(1):before {
		content: "Donor";
		font-weight: bold;
		text-align: left;
	}
	#candidate-donors 	td:nth-of-type(2):before {
		content: "Type";
		font-weight: bold;
		text-align: left;
	}
	#candidate-donors 	td:nth-of-type(3):before {
		content: "Amount contributed";
		font-weight: bold;
		text-align: left;
	}
  
	#candidate-donor-types 	td:nth-of-type(1):before {
		content: "Type";
		font-weight: bold;
		text-align: left;
	}
	#candidate-donor-types 	td:nth-of-type(2):before {
		content: "Amount contributed";
		font-weight: bold;
		text-align: left;
	}
	#raw-data td:nth-of-type(1):before {
		content: "Date";
		font-weight: bold;
		text-align: left;
	}
	#raw-data 	td:nth-of-type(2):before {
		content: "Donor Type";
		font-weight: bold;
		text-align: left;
	}
	#raw-data 	td:nth-of-type(3):before {
		content: "Donor Name";
		font-weight: bold;
		text-align: left;
	}
		#raw-data 	td:nth-of-type(4):before {
		content: "Donor State";
		font-weight: bold;
		text-align: left;
	}
	#raw-data 	td:nth-of-type(5):before {
		content: "Contribution Type";
		font-weight: bold;
		text-align: left;
	}
  	#raw-data 	td:nth-of-type(6):before {
		content: "Amount";
		font-weight: bold;
		text-align: left;
	}
	#raw-data 	td:nth-of-type(7):before {
		content: "Comments";
		font-weight: bold;
		text-align: left;
	}
}



/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
		margin: 0;
		width: 95% !important;
	}

	#all-map {
		width:95%;
		height: 600px;
	} 
  
  .bar-container {
    max-width: 50%;
    margin-left: 50%;
  }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 480px) {
	#all-map {
		width:95%;
		height: 800px;
	} 

}

@media only screen and (min-device-width: 1000px) {
	.njam-container {
		margin: auto;
	}

}


.njam-container {
  /*    font-family: 'Roboto',sans-serif;
  */
  fill: #333;
  max-width: 620px;
  margin-top: 5px;
  margin-left: 2px;
  /*    padding:0px 0px 15px 2px;
  */
}


.njam-container div.btn-group.bootstrap-select {
  width: 90%;
}

h1, .banner, .district, .chamber, .geo-table, .muni_elex, .town1, .dropdown-container, .chosen-drop, .town_name, .options, #county1 {
  font-family: "Roboto", sans-serif;
}

p, .contact-info, .address, .rating, .overall-rating, details, .description, h2 {
  font-family: "Roboto", sans-serif;
}

.description {
  font-size: 15px;
}

.banner, .banner2 {
  background-color: #6487AC;
  width: 100%;
  text-transform: uppercase;
  color: #fff;
}

.banner {
  height: 20px;
  width: 100%;
  padding: 0px 0px 0px 5px;
}

.banner2 {
  margin: 8px 0px 0px 0px;
  height: 5px;
  bottom: 10px;
  width: 100%;
}

h1 {
  margin: 2px;
}

.intro_text {
  font-size: 14px;
  clear: both;
}

.geo-form, .legislators {
  /*    background-color: #C67549;
  */
}

.geo-form {
  padding: 5px 0px 5px 8px;
  margin: 2px;
  font-size: 16px;
  /*    width:90%;
  */
  max-width: 300px;
  clear: both;
}

.geo-form .towny {
  color: #000000;
}

#town {
  width: 400px;
}

#input_click {
  background-color: #566EB5;
  border-color: #566EB5;
  font-size: 14px;
  margin: 2px;
}

.district {
  font-size: 20px;
}

.address {
  font-size: 13px;
  margin-bottom: 5px;
}

#map {
  width: 200px;
  height: 150px;
  margin-bottom: 10px;
}

.marker {
  stroke-opacity: 0.7;
  fill-opacity: 0.8;
}

.na {
  background-color: #ddd;
  fill: #4e4747;
  stroke: #4e4747;
}




details {
  clear: both;
  font-size: 13px;
}

.legislators a {
  color: #000;
  text-decoration: underline;
}

.name {
  font-size: 15px;
  padding-top: 2px;
}

.staffing-rank {
  font-size: 20px;
}

.deficiencies-tot {
  font-size: 20px;
}

.penalties-tot {
  font-size: 20px;
}

.district {
  font-size: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-weight: bold;
}

.legislators {
  margin: 0px 5px 5px 0px;
  padding: 5px 7px 0px 0px;
  color: #000;
  max-width: 275px;
}

.chamber {
  margin-top: 10px;
  padding-top: 10px;
  font-weight: bold;
  clear: both;
  text-transform: uppercase;
}

.geo-leg-header {
  font-size: 14px;
  text-transform: uppercase;
}

.geo-table {
  font-size: 14px;
  padding: 5px 5px 5px 5px;
  margin-top: 5px;
  display: grid;
  grid-template-columns: 50px 75px 150px;
  grid-template-rows: 25px 30px 30px 30px 30px 30px 30px;
  grid-gap: 10px 5px;
  align-items: center;
}

.table-header {
  padding: 2px;
  font-weight: bold !important;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
}

#header-label {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 16px;
  font-weight: bold;
}

#aide-label, #lpn-label, #rn-label {
  grid-column-start: 1;
  grid-column-end: 1;
}

#aide-nj-label, #aide-our-label, #lpn-nj-label, #lpn-our-label, #rn-nj-label, #rn-our-label {
  grid-column-start: 2;
  grid-column-end: 3;
}

.bar-container {
  background-color: #ddd;
  height: 130%;
  

}

#staffing-rank, #aide-nj-value, #aide-our-value, #lpn-nj-value, #lpn-our-value, #rn-nj-value, #rn-our-value {
  grid-column-start: 3;
  grid-column-end: 4;
  background-color: #C5C5C5;
  vertical-align: center;
}

.staffing-rank {
  background-color: #C5C5C5;
  vertical-align: center;
}



#staffing-rank {
  grid-row-start: 7;
  grid-row-end: 8;
  float: left;
}

.size-value {
  background-color: #ffc010;
  color: #1c2242;
  vertical-align: center;
  font-size: 12px;
/*  font-weight: bold;
*/  padding-left: 2px;
}

.rank-tot {
  color: #000;
  vertical-align: center;
  font-size: 12px;
  font-weight: bold;
  margin-left: 2px;
}

.town_name {
  font-size: 16px;
  font-weight: bold;
}

.credit {
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: #333;
  margin-bottom: 5px;
  font-style: italic;
}

@media only screen and (min-width: 400px) {
  #njam-container {
    margin: 0px 0px 17px 5px;
  }
}
@media only screen and (max-width: 400px) {
  #njam-container {
    margin: 5px 2px 5px 2px;
  }

  body {
    margin: 0px;
  }
}
/*#close-geo {
    display:none;
}*/

/*# sourceMappingURL=static/css/detail_template.css.map */