app/assets/stylesheets/beta/container.css.sass
@mixin rounded
  +border-radius($corner-radius)
  +black-box-shadow($default-box-shadow-opacity, 0px, 1px, 3px)
  background-color: white
  margin-bottom: $rounded-vertical-spacing

  .highlight-left
    margin-left: -1px
  .highlight-right
    margin-right: -1px

.rounded
  +rounded

.image-container
  padding: $image-padding
  +box-sizing(border-box)

  img
    display: block
    +border-radius($corner-radius)

  .photo-credit
    float: right
    span
      color: $light-text

.content-container
  padding: $content-padding
  +box-sizing(border-box)

  h1, h2, h3, h4, h5
    color: $dark-text
    margin-bottom: 3px

  p, span, li
    color: $text-color
    font-size: 1.1em
    margin-bottom: 0px
    line-height: 1.4em

  .highlight-left
    margin-left: -($content-padding + 1px)
    padding-left: ($content-padding + 1px)
  .highlight-right
    margin-right: -($content-padding + 1px)
    padding-right: ($content-padding + 1px)

  .subtitle
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif
    font-size: 0.7em
    text-transform: uppercase
    margin-bottom: 2px

    > span, time
      padding-left: 5px
      margin-left: 5px
      border-left: 1px solid #888

    > span:first-child, time:first-child
      padding-left: 0px
      margin-left: 0px
      border-left: 0px

    .timestamp
      color: $timestamp-color
      font-size: 1em

  mark
    background: none
    font-weight: bold

.vertical-label
  color: $text-color
  font-size: 1em
  line-height: 100%
  letter-spacing: 1px
  text-transform: uppercase
  +text-shadow(0px 1px 1px white)

  position: absolute
  +transform-origin(0, 0)
  +transform(rotate(-90deg) translate(-100%, -100%))
  white-space: nowrap

.large-slideshow
  width: 642px
  height: 399px
