Tracking COVID-19 on campus, across D.C.

html {
background-color: #2c2b2c;
}

a {
color: white !important;
}

.social-links {
color: white;
}

.widgettitle {
color: white;
}

.post-title {
color: white;
}

.byline-author {
color: white;
}

.item-container {
width: 100%;
overflow: hidden;
background-color: white;
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 8px solid #b31400;
}

.item-left {
width: 100%;
height: 100%;
}

.item-right {
width: 100%;
}

.item-image {
width: auto;
height: 100%;
object-fit: cover;
overflow: hidden;
}

.item-quote {
color: black;
margin-top: 1.5em;
padding-left: 16px;
padding-right: 16px;
font-size: 12pt;
}

.attribution {
color: #8a898a;
}

.quote-title {
font-size: 14pt;
}

p {
color: white;
}

.map-header {
font-weight: 700;
font-size: 24pt;
width: 100%;
background-color: #b31400;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 32px;
padding-right: 32px;
color: white;
margin-bottom: 0;
text-align: center;

}

.map-header h3 {
font-weight: 700;
font-size: 24pt;
width: 100%;
color: white;
margin-bottom: 0;
text-align: center;
margin: 0 0 0 0;
}

.map-header p {
font-weight: 500;
font-size: 16pt;
margin: 0 0 0 0;
}

.map-header p {
font-weight: 500;
font-size: 16pt;
margin: 0 0 0 0;
}

.item-quote h3 {
font-size: 24pt;
margin: 0;
margin-bottom: 0.5em;
}

@media only screen and (max-width: 600px) {
.map-header h3 {
font-size: 16pt;
}

.map-header p {
font-size: 12pt;
}
}

li {
font-size: 12pt;
}

.hover-button-subtitle {
font-size: 12pt;
color: white;
opacity: 0.7;
margin-top: 0;
font-weight: 700;
}

.hover-button {
transition: .5s ease;
width: calc(50% – 1.0rem);
text-align: center;
}

.hover-button h3 {
font-size: 25pt;
color: white;
}

.hover-button:hover {
opacity: 0.8;
}

.hover-button { cursor: pointer; }

@media screen and (max-width: 600px) {
.hover-button {
width: calc(100% – 1.0rem);
margin-bottom: 0.25rem;
margin-top: 0.25rem;
}
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.ALL {
text-decoration: none;
}

.DISTRICT {
text-decoration: none;
}

.STUDENTS {
text-decoration: none;
}

.ADMIN {
text-decoration: none;
}

.HEALTH {
text-decoration: none;
}

function showAll() {
selectItem(“ALL”, “ALL-BUTTON”, “ALL-SUBTITLE”);
}

function showDistrict() {
selectItem(“DISTRICT”, “DISTRICT-BUTTON”, “DISTRICT-SUBTITLE”);
}

function showAdmin() {
selectItem(“ADMIN”, “ADMIN-BUTTON”, “ADMIN-SUBTITLE”);
}

function showStudents() {
selectItem(“STUDENTS”, “STUDENTS-BUTTON”, “STUDENTS-SUBTITLE”);
}

function showHealth() {
selectItem(“HEALTH”, “HEALTH-BUTTON”, “HEALTH-SUBTITLE”);
}

function selectItem(sectionID, buttonName, subtitleName) {
document.getElementById(“ALL-BUTTON”).style.backgroundColor = “#666666”;
document.getElementById(“DISTRICT-BUTTON”).style.backgroundColor = “#666666”;
document.getElementById(“STUDENTS-BUTTON”).style.backgroundColor = “#666666”;
document.getElementById(“HEALTH-BUTTON”).style.backgroundColor = “#666666”;
document.getElementById(“ADMIN-BUTTON”).style.backgroundColor = “#666666”;

document.getElementById(“ALL-SUBTITLE”).textContent = “Click to read stories”;
document.getElementById(“DISTRICT-SUBTITLE”).textContent = “Click to read stories”;
document.getElementById(“STUDENTS-SUBTITLE”).textContent = “Click to read stories”;
document.getElementById(“HEALTH-SUBTITLE”).textContent = “Click to read stories”;
document.getElementById(“ADMIN-SUBTITLE”).textContent = “Click to read stories”;

document.getElementById(buttonName).style.backgroundColor = “#b31400”;
document.getElementById(subtitleName).textContent = “Selected”;

hideAll();

if (sectionID == “ALL”) {
showClass(“ALL”);
showClass(“DISTRICT”);
showClass(“STUDENTS”);
showClass(“ADMIN”);
showClass(“HEALTH”);
} else {
showClass(sectionID);
}
}

function hideAll() {
hideClass(“ALL”);
hideClass(“DISTRICT”);
hideClass(“STUDENTS”);
hideClass(“ADMIN”);
hideClass(“HEALTH”);
}

function showClass(className) {
var elements = document.getElementsByClassName(className);
for(var i = 0; i < elements.length; i++) { elements[i].style.display = "block"; } } function hideClass(className) { var elements = document.getElementsByClassName(className); for(var i = 0; i < elements.length; i++) { elements[i].style.display = "none"; } }