/*
	Sets the height of a block as a percentage of its width.
	The width is assumed to be 100%.
	The HTML element must have a single DIV as a child.

	XXX I could allow the width to some other %.  Should always be a % though as I'm using
		the padding-top trick.
 */
/*
	Zoom, center and crop an image using a given ratio.
	The HTML element must have a single DIV as a child that specifies the background image.
 */
/* 
	This is a very simple grid system.
	Use .grid() for the parent, .col(x%) for the children.
*/
.episodeTitle {
  margin-top: 14px;
}
#episodeDetails {
  display: block;
  margin: 2px 0 9px 0;
}
#episodeDetails:after {
  content: "";
  display: table;
  clear: both;
}
.episodeImage {
  display: block;
  float: left;
  width: 35%;
  margin-bottom: 5px;
}
.episodeImage .episodeImageViewZoomCenterCrop {
  /* 
		   Nice if possible to use an image rather than background image so I
		   can drag and drop. Consider using the new "object-fit" property + polyfills.
		*/
  position: relative;
  overflow: hidden;
}
.episodeImage .episodeImageViewZoomCenterCrop:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.episodeImage .episodeImageViewZoomCenterCrop div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.episodeImage .episodeImageViewZoomCenterCrop div {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.episodeNotes {
  display: block;
  float: left;
  width: 65%;
}
.episodeNotes .episodeNotesConstrained {
  position: relative;
  overflow: hidden;
}
.episodeNotes .episodeNotesConstrained:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 30.28846154%;
}
.episodeNotes .episodeNotesConstrained .episodeNotesView {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.episodeNotes .episodeNotesConstrained .episodeNotesView {
  padding-left: 20px;
}
.episodeNotes .episodeNotesConstrained .episodeNotesView p:first-child {
  margin-top: 0;
}
.episodeDescriptionFull {
  display: block;
  float: left;
  width: 100%;
}
.episodeDescriptionFull .episodeNotesView {
  position: static;
  padding-left: 0;
}
.episodeDescriptionFull .episodeNotesConstrained {
  max-height: 100px;
}
#episodeDescriptionDialogContent h2 {
  line-height: 24px;
}
.episodeDescMoreLink {
  display: none;
}
.episodeDescriptionMore .episodeDescGreyLine {
  position: absolute;
  display: block;
  bottom: 0;
  height: 20px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
.episodeDescriptionMore .episodeDescGreyLine:hover {
  cursor: pointer;
}
.episodeDescriptionMore .episodeDescMoreLink {
  position: absolute;
  display: block;
  right: 0;
  bottom: 0;
  background-color: white;
}
.episodeDescriptionMore .episodeDescMoreLink .fa {
  color: #333;
}
.episodeDescriptionMore .episodeDescMoreLink a {
  text-decoration: none;
}
.episodeDescriptionMore .episodeDescGreyLine,
.episodeDescriptionMore .episodeDescMoreLink {
  padding: 5px 0 0 20px;
}