/*
  Proportional scaling
  ====================

  HTML Structure:

  div.tws-content-box
    div.tws-content-box--inner-wrapper
    img.tws-content-box--proportions-image

  RESERVING THE PROPORTIONS
  The <img> is an invisible gif with a width of 100%. Unlike any other HTML element images are
  scaled proportionally. This forces the height of the parent.
  (.tws-content-box) to scale proportionally.

  FILLING THE SPACE
  To use the space that the invisible image has reserved .tws-content-box must be set to
  `positions: relative;`. This allows .tws-content-box--inner-wrapper to be stretched to cover
  the area of its parent.
*/

.tws-content-box {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.tws-content-box--inner-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.tws-content-box--proportions-image {
  width: 100%;
}

/*
  Vertical alignment
  ==================

  Structure:

  div.tws-content-box--table
    div.tws-content-box--cell

  Table cells allow vertical alignment. Table cells may exist within a table row, or directly within
  a table (http://quirksmode.org/css/css2/display.html#table). A table must explicitly be told to
  use full width and height (100%), otherwise it will only occupy the space it needs.
*/

.tws-content-box a:hover {
  text-decoration:none;
}

.tws-content-box--table {
  display: table;
  width: 100%;
  height: 100%;
}

.tws-content-box--cell {
  display: table-cell;
}

/* Vertical alignment */
.tws-content-box--top {
  vertical-align: top;
}
.tws-content-box--middle {
  vertical-align: middle;
}
.tws-content-box--bottom {
  vertical-align: bottom;
}

/* Horizontal alignment */
.tws-content-box--left {
  text-align: left;
}
.tws-content-box--center {
  text-align: center;
}
.tws-content-box--right {
  text-align: right;
}