photo-groove/styles.css

body { font-family: Verdana; background-color: rgb(44, 44, 44); color: rgb(250, 250, 250); }
img, canvas { border: 1px solid white; margin: 5px; }
.large { width: 500px; float: right; }
.selected { margin: 0; border: 6px solid #60b5cc; }
.content { margin: 40px auto; width: 960px; }
#thumbnails { width: 440px; float: left; clear: both; }
#thumbnails.small img { width: 50px; }
#thumbnails.med img { width: 100px; }
#thumbnails.large img { width: 200px; }
#choose-size { float: left; margin-left: 20px; }
#choose-size > span { display: inline-block; margin: 0 10px; }
#activate-groove { float: right; margin-right: 20px; margin-top: 15px; }

h1 { color: #60b5cc; margin-bottom: 0; }
h3 { float: left; margin: 0 }
label { vertical-align: bottom; }
button {
  float: right; background-color: #60b5cc; border: 0; color: rgb(44, 44, 44);
  font-size: 24px;
  cursor: pointer;
  padding: 10px 30px;
}

button:hover {
  background-color: white;
}
#thumbnails, img.large, #choose-size, h3 { margin-top: 20px; }

.filters {
  width: 318px;
  float: right;
}

.filter-slider {
  width: 300px;
}

.filter-slider label {
  width: 70px;
  display: inline-block;
  padding-top: 5px;
}

range-slider {
  width: 120px;
  margin-top: 5px;
  margin-right: 15px;
  display: inline-block;
}

range-slider .jsr {
  margin: 0;
}

range-slider .jsr_rail-outer {
  padding: 0;
}

range-slider .jsr_rail {
  background: none;
}

range-slider .jsr_label {
  display: none;
}

range-slider .jsr_slider:focus::before {
  background: rgb(96, 181, 204);
}

.activity {
  position: absolute;
  top: 40px;
  right: 100px;
}

.folder { margin-left: 30px; }
.folder > label {
  background-color: #555;
  margin: 6px 8px;
  padding: 6px 8px;
  display: inline-block;
  cursor: pointer;
}

.folder > label:hover {
  background-color: #60b5cc;
}

.folder.expanded label::before {
  content: "▸";
  margin-right: 12px;
}

.folder.collapsed label::before {
  content: "▾";
  margin-right: 12px;
}

.photo {
  padding: 6px 8px;
  margin-left: 30px;
  cursor: pointer;
  color: white;
  display: block;
  text-decoration: none;
}

.photo:hover {
  background-color: #60b5cc;
}

.folders, .selected-photo {
  float: left;
  min-height: 400px;
  width: 360px;
}

.selected-photo h3 {
  margin-top: 60px;
  margin-bottom: 20px;
  color: #60b5cc;
}

.selected-photo img {
  display: block;
}

.selected-photo {
  width: 600px;
}

.content::after {
  content: "";
  display: table;
  clear: both;
}

.related-photos {
  clear: both;
}

.related-photo {
  float: left;
}

.related-photo:hover {
  float: left;
  border-color: #60b5cc;
}

.related-photo {
  cursor: pointer;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav li, nav h1 {
  display: inline-block;
}

nav a {
  text-decoration: none;
  padding: 5px 15px;
  color: white;
  font-weight: bold;
}

nav .active {
  text-decoration: underline;
}

nav a:hover {
  text-decoration: underline;
}

footer {
  color: #bbb;
  margin: 20px;
  margin-top: 60px;
}