/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/


#tuscaloosa-map {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 1000px;
  font-family: "Helvetica Nueue", Helvetica, Arial, Sans-Serif;
}

#tuscaloosa-guff {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#tuscaloosa-guff p {
  font-family: "Helvetica Nueue", Helvetica, Arial, Sans-Serif;
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 15px;
}

#tuscaloosa-guff h1 {
  font-family: ff-meta-serif-web-1, ff-meta-serif-web-2, Georgia, serif;
  font-size: 20px;
  margin-bottom: 0;
}

#tuscaloosa-map .chart-guff {
  margin-top: 10px;
}

#tuscaloosa-map #legend {
  width: 150px;
  height: 70px;
  position: absolute;
  bottom: 25px;
  left: 2px;
  padding: 5px;
  border: 1px solid #efefef;
  background-color: white;
  background-color: rgba(255,255,255, 0.8);
  z-index: 100000;
  font-size: 12px;
}

#tuscaloosa-map #legend p {
  margin-top: 0;
}

.dot {
  width:  8px;
  height: 8px;
  border-radius: 6px;
  display: inline-block;
  margin-right: 0.25em;
  background-color: #000;
}

.school {
  position: absolute;
  font-size: 12px;
  padding: 2px;
  padding-left: 15px;
  font-weight: bold;
  border: 1px solid white;
  z-index: 1000000000;
  background: url(https://static.propublica.org/rails/assets/segregation-now/school-10b4794e05807c690190820d53a81ccbf85a07dcb4e2eb0a064be429edf18c8a.png) no-repeat;
  background-size: 12px 12px;
  background-position: 1px 1px;
  background-color: white;
  background-color: rgba(255,255,255, 0.8);
}

.school.active {
  border: 1px solid red;
}

.black .dot {
  background-color: #0000bb;
}

.white .dot {
  background-color: #bb0000;
}

#t-map {
  padding: 0px;
  width: 1009px;
  height: 500px;
  position: relative;
  background: url(https://static.propublica.org/rails/assets/segregation-now/out-f8b79ff4d89453b7d56520a5d4b6e828a2388420f926ff53b58338c98e163177.png);
}

#t-tabs {
  position: absolute;
  top: 0;
  left: 0;
  z-index:10000;
  cursor:pointer;
}

#t-tabs .t-tab {
  border: 1px solid #efefef;
  float: left;
  margin: 5px;
  padding: 10px;
  font-family: "Helvetica Nueue", Helvetica, Arial, Sans-Serif;
  background-color: white;
  background-color: rgba(255,255,255, 0.7);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

#t-tabs .t-tab.active {
  background-color: #74a9cf;
}

.note {
  display: none;
  position: absolute;
  width: 200px;
  background-color: white;
  background-color: rgba(225,225,225, 0.8);
  font-size: 11px;
  left: 200px;
  top: 100px;
  padding: 5px;
  z-index: 100000;
}

.note.active {
  display:block;
}

#t-tabs .t-tab:hover {
  background-color: #d0d1e6;
}

svg {
  z-index:100;
}