@charset "UTF-8";

body {
  font-family: sans-serif;
  margin: 20px 45px;
}

a:link, a:visited {
  color: #6300c5;
}
a:hover {
  color: #ff3399;
}

.unbold {
  font-weight: normal;
}
.adj-right {
  margin-right: 58px;
}
.container-fluid {
  margin-left: -15px !important;
}

.clickable {
  cursor: pointer;
}

.footnote {
  font-size: 14px;
  font-style: italic;
  margin-top: 15px;
}

.site-name {
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

.login-area {
  background: #ffffff;
  margin: 15px auto;
  line-height: 1.8em;
  color: #333;
  border-radius: 4px;
  padding: 30px;
  width: 380px;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}
.login-area label {
  color: #888888;
  font-weight: 700;
}
.login-area .field-column {
    padding: 15px 10px;
}
.login-input-box {
  padding: 13px;
  border: #CCC 1px solid;
  border-radius: 4px;
  width: 332px;
  font-size: 16px;
}
.btn-login {
  padding: 13px;
  background-color: #5d9cec;
  color: #f5f7fa;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  border: #5791da 1px solid;
  font-size: 18px;
  font-weight: 700;
}
.error-message, .success-message {
  padding: 7px 10px;
  border-radius: 4px;
  margin: 30px 10px 10px 10px;
}
.error-message {
  background: #fff1f2;
  border: #ffd5da 1px solid;
  color: #d6001c;
}
.success-message {
  background: #f1fff2;
  border: #d5ffda 1px solid;
  color: #008000;
}
.error-info {
  color: #ff0000;
  margin-left: 10px;
}

.hi-nav {
  color: #ddd;
  line-height: 1.5;
  padding: 10px 20px 10px 45px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.hi-nav a:link, .hi-nav a:visited {
  color: #ddd;
}
.hi-nav a:hover {
  color: #ff3399;
}
.us-nav {
  background-color: #eee;
}
.us-nav, .us-nav a:link, .us-nav a:visited {
  color: #505050;
}
.us-nav a:hover {
  color: #ff3399;
}
.state-nav {
  background-color: #005800;
}
.county-nav {
  background-color: #680038;
}
.city-nav {
  background-color: #000080;
}
.nav-menu-header {
  margin-top: 8px;
  min-width: 105px;
  padding-left: 8px;
  text-align: left;
  font-weight: 700;
}
.top-element {
  margin-top: 85px;
}
h1.top-element {
  margin-top: 110px;
}

#category-section {
  margin: 15px -45px 0 -45px;
  padding: 5px 45px;
}
.category-banner {
  color: #ffffff;
  background-position: 50% 50%;
  background-size: cover;
  padding: 5px 20px;
}
.category-banner a:link, .category-banner a:visited {
  color: #f2ff80;
}
.category-banner a:hover {
  color: #ff3399;
}
#category-bar {
  column-count: 4;
  margin-top: 12px;
}
.category-item {
  margin-bottom: 12px;
}

.page-title a {
  text-decoration: none;
  color: inherit;
}
.page-title a:hover {
  color: #ff3399;
}

.letter-heading {
  margin-top: 35px;
  margin-bottom: 20px;
}

.state-link {
  font-size: 18px;
  margin-bottom: 8px;
}
.org-link, .list-item {
  margin-bottom: 8px;
}
.dept-link {
  margin-bottom: 12px;
}
.external-link {
  font-family: sans-serif;
  font-size: 16px;
  padding-left: 10px;
}

.county-list {
  column-count: 3;
}
.dept-list {
  column-count: 2;
}

.org-image img {
  width: auto;
  height: 150px;
  margin-top: 15px;
  margin-left: 30px;
}
#org-map {
  width: 260px;
  height: 175px;
  margin-left: 30px;
}
.ol-attribution {
  font-size: 10px;
}

h4.search-heading {
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
}
form.search-form label {
  padding: 7px;
  color: #808080;
  font-size: 15px;
  font-weight: 700;
}
form.search-form input[type=text] {
  width: 100%;
  font-size: 16px;
  margin-top: 1px;
  margin-bottom: 10px;
  padding: 4px 5px 3px 5px;
}
.btn-search {
  margin-bottom: 10px;
  padding: 8px 12px;
  background-color: #6060d0;
  color: #f5f7fa;
  cursor: pointer;
  border-radius: 4px;
  border: #5791da 1px solid;
  font-size: 15px;
  font-weight: 700;
}
#search-results {
  margin-top: 15px;
}
#search-count {
  margin-left: 10px;
}
#search-paging {
  font-size: 14px;
  text-align: right;
  margin-right: 20px;
}
#search-paging .clickable {
  font-weight: 700;
  color: #6300c5;
}
#search-paging .clickable:hover {
  color: #ff3399;
}
#contact-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  border: 5px solid #dddddd;
  border-style: inset;
}
#contact-table td {
  border: 1px solid #aaaaaa;
  padding: 5px 6px 0 6px;
}
#contact-table .query-cell {
  font-size: 15px;
}
#verify-footnote {
  font-weight: 700;
  margin-top: 10px;
  margin-left: 13px;
}

#division-section {
  width: 40vw;
  margin-right: 20px;
}

#contact-section .query-cell {
  margin-bottom: 8px;
}

.staff-heading {
  margin-left: 3px;
}
.service-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 21px 0 10px 3px;
}
#service-section .query-cell, #dept-service .query-cell {
  padding: 5px 0;
  min-width: 30px;
  font-size: 16px;
}
#service-table {
  margin-bottom: 10px;
}
#service-table th, #dept-service th {
  font-size: 20px;
}

.detail-heading, .pct-report, #exp-detail-table {
  margin-top: 10px;
}
.salary-report .query-cell, #service-table .query-cell, #dept-service .query-cell {
  vertical-align: top;
}

.field-name {
  font-weight: 700;
  padding-right: 10px;
  padding-bottom: 10px;
}
.field-value {
  padding-bottom: 10px;
}
.expense-caption {
  font-weight: 700;
  padding-right: 10px;
  padding-bottom: 5px;
}
.expense-caption a {
  font-weight: normal;
}
.expense-value {
  padding-bottom: 5px;
}
.query-results {
  font-size: 16px;
}
.query-cell {
  min-width: 5px;
  margin-bottom: 5px;
}
.query-cell img, .query-cell span {
  vertical-align: middle;
}
.data-highlight {
  font-weight: 700;
  font-style: italic;
  color: #6300c5;
}
.rank-number {
  font-weight: 700;
  font-style: italic;
  color: #6300c5;
}
.rank-org a {
  color: inherit;
  text-decoration: none;
}
.rank-org a:hover {
  color: #ff3399;
}

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  text-align: left;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}
.dropdown-content a {
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.exp-heading .dropdown-content {
  background-color: #f9f9f9;
}
.exp-heading .dropdown-content a {
  color: black;
  padding: 10px;
}
.exp-heading .dropdown-content a:hover {
  background-color: #eee
}
.hi-nav .dropdown-content {
  width: 130px;
  background-color: #f9f9f9;
}
.hi-nav .dropdown-content a {
  color: black;
  padding: 10px;
  font-size:13px;
  margin-bottom: 15px;
}
.hi-nav .dropdown-content a:hover {
  background-color: #eee;
}
.btn-logout {
  margin-top: 15px;
  padding: 10px;
  color: black;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
}
.btn-logout:hover {
  background-color: #eee;
}

.pie-chart {
  width: 850px;
  height: 500px;
  margin-left: 275px;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.pie-chart-left {
  margin-left: -10px;
  z-index: 1;
}
.pie-chart-right {
  z-index: 2;
  margin-top: 3px;
  margin-left: -260px;
}


@media (max-width: 1200px) {

  body {
    margin: 20px 40px;
  }
  #category-section {
    margin: 15px -40px 0 -40px;
    padding: 5px 40px;
  }

  .adj-right {
    margin-right: 54px;
  }

  .hi-nav {
    padding-left: 40px;
  }

  #category-bar {
    column-count: 3;
  }

  form.search-form input[type=text] {
    width: 225px;
  }

  .salary-data {
    font-size: 15px;
  }

  .pie-chart {
    margin-left: 0;
    width: 700px;
    height: 450px;
  }
  .pie-chart-right {
    margin-left: -220px;
  }
}

@media (max-width: 768px) {

  body {
    margin: 20px 35px;
  }
  #category-section {
    margin: 15px -35px 0 -35px;
    padding: 5px 35px;
  }

  .adj-right {
    margin-right: 48px;
  }

  .hi-nav {
    padding-left: 35px;
  }

  #category-bar {
    column-count: 2;
  }

  .dept-list {
    column-count: 1;
  }

  .query-results {
    font-size: 15px;
  }
  #service-section .query-cell, #dept-service .query-cell {
    min-width: 20px;
  }
  .salary-data {
    font-size: 14px;
  }
  .wide-cell {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
  }
  .wide-cell:hover {
    overflow: visible;
    font-weight: 700;
  }
  .exp-detail-data .wide-cell {
    font-size: 12px;
    max-width: 40vw;
  }
  .exp-detail-data .wide-cell:hover {
    font-size: 15px;
  }

  #search-count {
    margin-left: 0;
  }
  #contact-table {
    margin-left: -15px;
  }
  #contact-table .query-cell {
    font-size: 12px;
  }

  .pie-chart {
    margin-left: -10px;
    width: 525px;
    height: 400px;
  }
  .pie-chart-right {
    margin-left: -10px;
  }
}

@media (max-width: 576px) {

  #search-count {
    margin-bottom: 10px;
  }
  #search-paging {
    text-align: left;
  }

}

@media (max-width: 480px) {

  /* top, right, bottom, left */
  body {
    margin: 20px 10px 20px 20px;
  }
  #category-section {
    margin: 15px -10px 0 -20px;
    padding: 5px 10px 5px 20px;
  }
  body.login-body {
    margin: 20px 0;
  }
  h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 18px;
  }

  .footnote {
    font-size: 13px;
  }

  .adj-right {
    margin-right: 34px;
  }

  .site-name {
    font-size: 22px;
  }

  .login-area {
    width: 260px;
  }
  .login-input-box {
    width: 212px;
  }

  .hi-nav {
    padding-left: 20px;
    font-size: 12px;
  }
  .nav-menu-header {
    margin-top: 5px;
    font-size: 15px;
  }

  .top-element {
    margin-top: 90px;
  }
  h1.top-element {
    margin-top: 100px;
  }

  #category-bar {
    column-count: 2;
  }

  .field-name, .field-value {
    font-size: 13px;
  }

  .dept-link, .org-link, .list-item {
    font-size: 14px;
  }
  .category-link, .category-item {
    font-size: 13px;
  }

  .county-list {
    column-count: 2;
  }

  .query-results {
    font-size: 14px;
  }
  .query-cell {
    min-width: 2px;
  }
  .service-heading {
    font-size: 17px;
  }
  #service-section .query-cell, #dept-service .query-cell {
    font-size: 14px;
    min-width: 5px;
  }
  #service-table th, #dept-service th {
    font-size: 17px;
  }

  #contact-table td {
    padding: 5px 2px 0 2px;
  }
  #contact-table .query-cell {
    font-size: 10px;
  }

  .salary-report .query-cell {
    font-size: 13px;
  }
  #salary-1 .salary-data {
    margin-left: -8px;
  }
  #salary-2 .salary-data {
    margin-left: -15px;
  }
  #staff-table, #elected-table {
    margin-left: -10px;
    margin-right: -5px;
  }
  #exp-detail-table {
    margin-left: -5px;
  }
  #contact-section {
    font-size: 14px;
  }

  .org-image img {
    height: 100px;
    margin-left: 20px;
  }
  #org-map {
    width: 180px;
    height: 150px;
    margin-left: 0;
  }

  .letter-index {
    font-size: 16px;
    line-height: 1.75;
  }

  .pie-chart, .pie-chart-left {
    margin-left: -100px;
  }
}