style.css

/* OVERALL */
body {
  font-family: Roboto, Arial, sans-serif;
}

/* PAGE LAYOUT */
#content {
  display: flex;
}

#map {
  height: 85vh;
  width: 35vw;
  min-width: 500px;
}

#offers {
  flex: 1;
  height: 85vh;
  overflow: scroll;
  margin-right: 10px;
}

#details {
  height: 85vh;
  overflow: scroll;
  display: none;
}

#content.detailsmode #map,
#content.detailsmode #offers {
  display: none;
}

#content.detailsmode #details {
  display: block;
}

button {
  float: right;
}

/* OFFER LIST */
.offer {
  padding: 10px;
  border-bottom: 1px solid black;
}

/* zebra stripes
.offer:nth-child(even) {
  background-color: #ccc;
}
*/

.offer:hover {
  background-color: #ccc;
}

/* EACH OFFER */
.offer h3 {
  padding: 0;
  margin: 0;
  font-size: 12pt;
}

.offer h3 a {
  color: black;
  text-decoration: none;
}

.offer h3 span {
  cursor: pointer;
}

.offer .tags {
  float: right;
}

.offer .tags span {
  cursor: pointer;
}

.offer .inhabitants:after,
.offer .costs:after,
.offer .size:after {
  content: " • ";
}

.offer .street {
  font-weight: bold;
  padding-right: 10px;
}
.street:before {
  content: "\a";
  white-space: pre
}

.offer .distances {
  font-style: italic;
  padding-right: 10px;
}
.offer .distances:before {
  content: "(";
}
.offer .distances:after {
  content: ")";
}

.offer .onlinesince {
  color: #999;
}

.offer .tags .tags-read.false:after { content: "🆕"; }
.offer .tags .tags-read.true:after { content: "👁"; }
.offer .tags .tags-interesting.undefined.false:after { content: "🤔"; }
.offer .tags .tags-interesting.false:after { content: "😐"; }
.offer .tags .tags-interesting.true:after { content: "😍"; }
.offer .tags .tags-contacted.false:after { content: "📝"; }
.offer .tags .tags-contacted.true:after { content: "✉️"; }
.offer .tags .tags-invited.false:after { content: "❓"; }
.offer .tags .tags-invited.true:after { content: "👍"; }

#details .freetexts {
  column-count: 2;
}