.test {
  outline: solid 1px red;
}
.rounded {
  border-radius: 1pc;
}
html {
  background-color: #aabbcc;
  padding: 1pc;
  font-family: sans-serif;
  font-size: 12pt;
  line-height: 1.4em;
}
.toggleAll {
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 1pc;
  text-shadow: 1pt 1pt 2pt black;
}
.collapse {
  margin-bottom: 0.5pc;
}
.collapse > p:before {
  content: "\025B8";
  padding-right: 0.5pc;
  font-size: 1.5em;
  vertical-align: sub;
}
.collapse.open > p:before {
  content: "\025BE";
  padding-right: 0.5pc;
  font-size: 1.5em;
  vertical-align: sub;
}
.collapse > p {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
}
.content {
  position: relative;
  left: 2pc;
  display: block;
}
.thumb {
  position: relative;
  display: inline-block;
  background: white;
  background-position: bottom right;
  background-size: cover;
  box-shadow: 3pt 3pt 6pt rgba(0, 0, 0, 0.5);
  margin-right: 0.8pc;
  margin-bottom: 0.5pc;
  height: 120px;
  vertical-align: top;
}
.thumb img {
  height: 120px;
  outline: 1px solid black;
}
.zoom:after {
  display: inline-block;
  position: absolute;
  bottom: -0.3pc;
  right: -0.3pc;
  content: url("css/full-size.png");
  width: 18px;
  height: 24px;
}
.zoom:active:after {
  bottom: -0.4pc;
}
.details {
  position: absolute;
  display: inline-block;
  width: 100%;
  left: 0;
  margin-left: -2pc;
  z-index: 99;
}
.details > .fade_bg {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
  animation-duration: 0.2s;
  animation-name: fadein;
}
.details > .thumb {
  float: left;
  left: 0;
  transition: transform 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.15, 1);
}
.details p {
  margin-top: -3.36pt;
  margin-bottom: 0.98em;
}
.details > .desc {
  display: block;
  color: white;
  text-shadow: 1px 1px black;
  opacity: 1;
  max-width: 45em;
  animation-duration: 0.3s;
  animation-name: delayed_fadein;
}
.details > .desc > img {
  float: left;
}
@media (max-width: 450px) {
  .details > .desc {
    display: inline-block;
    margin-left: -1pc;
    margin-right: -1pc;
    padding-left: 1pc;
    padding-right: 1pc;
  }
}
.fadein_anim {
  animation-duration: 0.2s;
  animation-name: fadein;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.delayed_fadein_anim {
  animation-duration: 0.3s;
  animation-name: delayed_fadein;
}
@keyframes delayed_fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hidden {
  display: none;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}