.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

/** Common Styling to highlighted sections */
.alert, /* Bootstrap: which we make more like our .quote sections */
.quoteOrange, .quoteRed, .quoteGreen, .quoteBlue, .quoteYellow {
  padding: 10px 15px;
  margin: 10px 2%;
  width: 96%;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}

.quoteRed { /* FIXME, name needed */
  border-left: 12px solid #C11;
  background-image: none; /* override bootsrap, for now */
  background-color: #e7c3c3;
}

.quoteOrange { /* FIXME, name needed */
  border-left: 12px solid #FF9D1E;
  background-color: #FFCE8E;
}

.quoteBlue { /* FIXME, name needed */
  border-left: 12px solid #164CBA;
  background-color: #99F;
}

.quoteGreen { /* FIXME, name needed */
  border-left: 12px solid #693;
  background-color: #9C6;
}

.quoteYellow { /* FIXME, name needed */
  border-left: 12px solid #e4e47d;
  background-color: #F1F1BC;